/* ==========================================================================
   M&M Insulation Ltd — contact page (contact.html) only
   Loaded in addition to style.css. Everything is scoped to this page's own classes so no other
   page is affected. The form's markup/ids/names are untouched (main.js depends on them).
   ========================================================================== */

/* Hero ------------------------------------------------------------------------------- */
.contact-hero .wrap{padding-block:clamp(2.75rem,6vw,4.75rem) clamp(4.5rem,8vw,6.5rem);}
.contact-hero h1{font-size:clamp(2.3rem,2.3vw + 1.5rem,3.8rem);line-height:1.04;letter-spacing:-.016em;max-width:14ch;margin-bottom:.45em;}
.contact-hero .lede{max-width:50ch;color:rgba(255,255,255,.86);margin-bottom:1.8rem;}
.contact-hero .hero-eyebrow-pill{margin-bottom:1.25rem;}
.contact-hero .hero-ctas{margin-bottom:1.8rem;}
.contact-hero__ticks{display:flex;flex-wrap:wrap;gap:.55rem 1.8rem;}
.contact-hero__ticks li{font-size:.9rem;}

/* Layout ----------------------------------------------------------------------------- */
.contact-main{background:var(--fog);padding-block:clamp(2.5rem,6vw,5rem);scroll-margin-top:90px;}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}

/* The form card ---------------------------------------------------------------------------- */
.contact-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-m);
  padding:clamp(1.5rem,3.6vw,2.7rem);box-shadow:var(--shadow-lg);
}
.contact-card__head{margin-bottom:1.7rem;}
.contact-card__head h2{font-size:clamp(1.65rem,1vw + 1.35rem,2.2rem);line-height:1.1;margin-bottom:.3em;}
.contact-card__head p{font-size:1rem;color:var(--ink-soft);max-width:none;}
.contact-card .form-grid{gap:1.2rem 1.1rem;}
.contact-card .field{gap:.45rem;}
.contact-card .field label{font-size:.84rem;font-weight:700;color:var(--ink);}
.contact-card .field input:not([type=checkbox]),
.contact-card .field select,
.contact-card .field textarea{
  background-color:#F7F8F6;border:1.5px solid var(--border);border-radius:var(--radius-s);
  min-height:54px;padding:.95rem 1.05rem;font-size:1rem;color:var(--ink);
  transition:border-color var(--dur-fast),background-color var(--dur-fast),box-shadow var(--dur-fast);
}
.contact-card .field textarea{min-height:132px;line-height:1.5;}
.contact-card .field input::placeholder,.contact-card .field textarea::placeholder{color:var(--slate-soft);}
.contact-card .field input:not([type=checkbox]):hover,.contact-card .field select:hover,.contact-card .field textarea:hover{border-color:var(--slate-soft);}
.contact-card .field input:not([type=checkbox]):focus,.contact-card .field select:focus,.contact-card .field textarea:focus{
  outline:none;background-color:#fff;border-color:var(--accent-deep);box-shadow:0 0 0 4px var(--accent-tint);
}
.contact-card .field.has-error input:not([type=checkbox]),.contact-card .field.has-error select,.contact-card .field.has-error textarea{
  border-color:var(--flag);background-color:#fff;box-shadow:0 0 0 3px var(--flag-tint);
}

/* Consent tick-box. It sits in a .field so main.js validates it and shows its error like the others;
   the resets below stop the text-input styling from being applied to the checkbox. */
.contact-card .consent-field{padding-top:.2rem;}
.contact-card .consent-row{display:flex;gap:.75rem;align-items:flex-start;}
.contact-card .consent-field input[type=checkbox]{
  flex:none;width:20px;height:20px;min-height:0;margin:.1rem 0 0;padding:0;border:0;background:none;box-shadow:none;
  accent-color:var(--accent-deep);cursor:pointer;
}
.contact-card .consent-field.has-error input[type=checkbox]{outline:2px solid var(--flag);outline-offset:2px;}
.contact-card .consent-field label{font-size:.88rem;font-weight:400;line-height:1.5;color:var(--ink-soft);cursor:pointer;}

/* The button: arrow is drawn with CSS so main.js can swap the text ("Sending...") without losing it */
.contact-card .btn--submit{
  margin-top:1.7rem;padding:1.15rem 1.6rem;font-size:1.05rem;gap:.7rem;
}
.contact-card .btn--submit::after{
  content:"";flex:none;width:20px;height:20px;transition:transform var(--dur-med) var(--ease-out);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316233D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
.contact-card .btn--submit:hover::after{transform:translateX(5px);}
.contact-card .btn--submit:disabled{opacity:.75;cursor:wait;}
.contact-card .btn--submit:disabled::after{display:none;}
.contact-card__note{margin:1.1rem 0 0;max-width:none;font-size:.82rem;line-height:1.5;color:var(--slate);}
.contact-card__note a{color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* The side panel ------------------------------------------------------------------------------ */
.contact-panel{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--radius-m);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.contact-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 320px at 100% 0%,rgba(200,146,63,.18),transparent 62%);
}
.contact-panel > *{position:relative;}
.contact-panel .eyebrow{color:var(--accent-on-dark);margin-bottom:.4rem;}
.contact-panel__phone{
  display:block;width:fit-content;max-width:100%;margin:0 0 .8rem;
  font:700 clamp(2rem,1.8vw + 1.4rem,2.7rem)/1.05 'Zilla Slab',Georgia,serif;letter-spacing:-.01em;
  color:var(--accent-on-dark);border-bottom:2px solid rgba(233,194,124,.4);
  transition:border-color var(--dur-fast),color var(--dur-fast);
}
.contact-panel__phone:hover{color:#fff;border-color:var(--accent-on-dark);}
.contact-panel p{color:rgba(255,255,255,.82);font-size:.97rem;max-width:36ch;margin:0;}
.contact-panel__list{display:grid;gap:1.15rem;margin:1.7rem 0;padding-top:1.5rem;border-top:1px solid var(--line-on-dark);}
.contact-panel__list li{display:flex;gap:.9rem;align-items:flex-start;}
.contact-panel__list svg{width:20px;height:20px;flex:none;margin-top:.1rem;color:var(--accent-on-dark);}
.contact-panel__label{display:block;margin-bottom:.3rem;font:700 .7rem/1 'Public Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.contact-panel__list a,.contact-panel__list div > span:not(.contact-panel__label):not(.flag){color:#fff;font-weight:600;word-break:break-word;}
.contact-panel__list a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;}
.contact-panel__list a:hover{text-decoration-color:var(--accent-on-dark);color:var(--accent-on-dark);}
.contact-panel__list div{font-size:.97rem;line-height:1.45;}
.contact-panel__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
.contact-panel__photos figure{margin:0;}
.contact-panel__photos img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line-on-dark);border-radius:var(--radius-s);background:var(--ink-deep);
}
.contact-panel__photos figcaption{margin-top:.5rem;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.3;color:rgba(255,255,255,.78);}

@media (min-width:901px){
  .contact-panel{position:sticky;top:96px;}   /* stays in view beside the longer form */
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}   /* form first, then the panel */
  .contact-panel__photos{max-width:420px;}
}
@media (max-width:480px){
  .contact-card .btn--submit{width:100%;}
}

/* The quiz card stretches to the height of the details panel, with the quiz centred inside it */
@media (min-width:901px){
  .contact-grid{align-items:stretch;}
  .contact-card{display:flex;flex-direction:column;justify-content:center;border-top:5px solid var(--accent);}
}

/* ==========================================================================
   Contact page v3: the quiz sits beside the headline in the first screen (owner feedback), and the phone, email,
   address and photos form a row of their own underneath.
   ========================================================================== */
.contact-hero .wrap.contact-hero__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;justify-items:stretch;
  column-gap:clamp(2.5rem,5vw,5rem);row-gap:0;
}
.contact-hero__copy{display:grid;justify-items:start;}
.contact-hero .wrap{padding-block:.85rem clamp(4.5rem,7vw,6rem);}
.contact-hero h1{max-width:16ch;}
.contact-hero__copy .hero-ctas{margin-bottom:1.6rem;}
.contact-hero .contact-card{
  background:#fff;color:var(--ink);border:0;border-top:6px solid var(--accent);border-radius:var(--radius-m);
  padding:clamp(1.1rem,1.8vw,1.8rem);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 8px rgba(200,146,63,.16),0 34px 70px -18px rgba(0,0,0,.6);
  scroll-margin-top:90px;
  animation:ctCardIn .7s cubic-bezier(.22,.61,.36,1) both,ctCardGlow 3.4s ease-in-out 1.2s 3;
}
@keyframes ctCardIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes ctCardGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 8px rgba(200,146,63,.16),0 34px 70px -18px rgba(0,0,0,.6);}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 0 15px rgba(200,146,63,.3),0 34px 70px -18px rgba(0,0,0,.6);}
}
@media (prefers-reduced-motion: reduce){.contact-hero .contact-card{animation:none;}}
.contact-main{padding-block:clamp(2rem,4vw,3.5rem);}

@media (min-width:901px){
  .contact-panel{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.1fr);
    column-gap:clamp(1.75rem,3.5vw,3.25rem);align-items:start;position:relative;top:auto;
  }
  .contact-panel > .eyebrow{grid-column:1;grid-row:1;}
  .contact-panel__phone{grid-column:1;grid-row:2;}
  .contact-panel > p{grid-column:1;grid-row:3;}
  .contact-panel__list{grid-column:2;grid-row:1 / 4;margin:0;padding-top:0;border-top:0;align-self:center;}
  .contact-panel__photos{grid-column:3;grid-row:1 / 4;max-width:none;}
  .contact-panel__photos img{aspect-ratio:4/3;}
  .contact-panel__list,.contact-panel__photos{padding-left:clamp(1.5rem,3vw,2.75rem);border-left:1px solid var(--line-on-dark);}
}
@media (max-width:900px){
  .contact-hero .wrap.contact-hero__grid{grid-template-columns:1fr;row-gap:2rem;}
  .contact-hero h1{max-width:none;}
  .contact-hero__ticks{display:none;}     /* the quiz comes straight after the introduction on phones */
  .contact-hero .wrap{padding-bottom:3.5rem;}
}