/* =====================================================================
   TERRALUME SURFACES — conversion.css
   Component layer for the Contact and Gallery pages.
   Loaded AFTER style.css. Reuses the existing design tokens
   (--charcoal, --accent, --muted, --stone-*, --s-*, --r-*, --sh-*,
   --font-display). New components only — nothing here overrides a
   shared component's core behaviour.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A11y: nudge readable label text off the failing --sage (#707880 ~3.4:1)
   onto --muted (#5C636A) ONLY within our owned pages' new components.
   We scope tightly so we never touch shared-component appearance.
   --------------------------------------------------------------------- */

/* ============================ PROCESS: WHAT HAPPENS NEXT ============================ */
.next-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-5);
  margin-top:var(--s-7);
  counter-reset:step;
}
.next-step{
  position:relative;
  background:var(--white);
  border:1px solid var(--stone-200);
  border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-6) var(--s-6);
  box-shadow:var(--sh-1);
  display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.next-step:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--stone-300);}
.next-step__num{
  position:absolute; top:-18px; left:var(--s-6);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:1.15rem;
  background:var(--charcoal); color:#fff;
  box-shadow:var(--sh-1); border:2px solid var(--white);
}
.next-step:first-child .next-step__num{background:var(--accent);}
.next-step__icon{
  width:46px; height:46px; border-radius:var(--r-md);
  display:grid; place-items:center; margin:var(--s-3) 0 var(--s-4);
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.next-step__icon svg{width:24px; height:24px;}
.next-step h3{font-size:var(--fs-h4); font-weight:700; margin-bottom:8px;}
.next-step p{color:var(--muted); font-size:var(--fs-body-s); margin:0;}
.next-step__when{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:var(--s-5);
  padding:6px 13px; border-radius:var(--r-pill);
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.01em;
  background:rgba(255,106,0,.12); color:var(--accent-600);
  border:1px solid rgba(255,106,0,.26);
}
.next-step__when svg{width:14px; height:14px;}

/* connector rail behind the cards (desktop only) */
.next-steps{position:relative;}
.next-steps::before{
  content:""; position:absolute; top:-18px; left:14%; right:14%; z-index:0;
  border-top:2px dashed var(--stone-300);
}
.next-step{z-index:1;}

@media (max-width:860px){
  .next-steps{grid-template-columns:1fr; gap:var(--s-6);}
  .next-steps::before{display:none;}
  .next-step__num{left:var(--s-6);}
}

/* ============================ RESPONSE-WINDOW NOTE ============================ */
.response-note{
  display:flex; align-items:flex-start; gap:13px;
  max-width:64ch; margin-top:var(--s-6);
  padding:14px 18px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--stone-200);
  box-shadow:var(--sh-1);
  font-size:var(--fs-body-s); line-height:1.55; color:var(--muted);
}
.response-note strong{color:var(--ink); font-weight:700;}
.response-note__icon{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.response-note__icon svg{width:18px; height:18px;}

/* ============================ TRUST BADGES (honest) ============================ */
.trust-badges{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
  margin-top:var(--s-6);
}
.trust-badge{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-6);
  box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.trust-badge:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--stone-300);}
.trust-badge__icon{
  flex:0 0 44px; width:44px; height:44px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.trust-badge__icon svg{width:23px; height:23px;}
.trust-badge h3{font-size:1.0625rem; font-weight:700; margin-bottom:5px; line-height:1.25;}
.trust-badge p{color:var(--muted); font-size:var(--fs-body-s); margin:0; line-height:1.5;}

@media (max-width:860px){
  .trust-badges{grid-template-columns:1fr;}
}

/* ============================ SERVICE-AREA STRIP ============================ */
.area-card{
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:clamp(24px,4vw,40px);
  box-shadow:var(--sh-1);
}
.area-card .eyebrow{margin-bottom:var(--s-4);}
.area-card h3{font-size:var(--fs-h3); margin-bottom:var(--s-3);}
.area-card > p{color:var(--muted); max-width:64ch;}
.area-suburbs{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:var(--s-5);
}
.area-suburbs li{
  display:inline-flex; align-items:center;
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:var(--fs-body-s); font-weight:600; color:var(--charcoal);
  background:var(--stone-200); border:1px solid var(--stone-300);
}
.area-note{
  margin-top:var(--s-5); font-size:var(--fs-body-s); color:var(--muted);
}
.area-note strong{color:var(--ink);}

/* ============================ CONSENT CHECKBOX (form) ============================ */
.consent{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:var(--s-5);
  font-size:var(--fs-body-s); line-height:1.5; color:var(--muted);
}
.consent input[type="checkbox"]{
  flex:0 0 20px; width:20px; height:20px; margin-top:2px;
  accent-color:var(--accent);
  border:1.5px solid var(--stone-300); border-radius:var(--r-sm);
  cursor:pointer;
}
.consent label{cursor:pointer; font-weight:500; color:var(--muted);}
.consent a{color:var(--accent-600); font-weight:600;}

/* legend that explains the required asterisk (kept adjacent to fields) */
.form-legend{
  font-size:var(--fs-body-s); color:var(--muted); margin-top:var(--s-3);
}
.form-legend .req{color:var(--accent-600); font-weight:700;}

/* ============================ FAQ-ON-CONTACT helper ============================ */
.contact-faq{max-width:820px; margin-top:var(--s-6);}

/* ---------------------------------------------------------------------
   GALLERY PAGE
   --------------------------------------------------------------------- */

/* The visually-hidden heading for the second gallery region (a11y) */
.vh{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* macro / blend studies — labelled honestly as indicative renders */
.indicative-flag{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-pill);
  font-size:var(--fs-overline); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(20,28,24,.72); color:#fff;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.indicative-flag svg{width:12px; height:12px;}

/* gallery section rhythm: a clear sub-head + intro per block */
.gallery-block-head{margin-bottom:var(--s-6);}
.gallery-block-head .eyebrow{margin-bottom:var(--s-3);}
.gallery-block-head h2{margin-bottom:var(--s-3);}
.gallery-block-head .lead{color:var(--muted); max-width:64ch;}

/* macro detail trio — square aggregate close-ups with tightened captions */
.macro-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s-5); margin-top:var(--s-6);
}
.macro-card{
  position:relative; margin:0;
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t);
}
.macro-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2);}
.macro-card img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.macro-card figcaption{padding:var(--s-5) var(--s-5) var(--s-6);}
.macro-card figcaption strong{
  display:block; color:var(--charcoal); font-size:var(--fs-body);
  font-weight:800; letter-spacing:.01em; margin-bottom:3px;
}
.macro-card figcaption span{color:var(--muted); font-size:var(--fs-body-s); line-height:1.45;}

@media (max-width:860px){
  .macro-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .macro-grid{grid-template-columns:1fr;}
}

/* tighten the page-hero illustrative note spacing on gallery */
.gallery-intro .note-illustrative{margin-top:var(--s-5);}