/* ==========================================================================
   GEELONG CONCRETE — v2
   Editorial / halftone. Reference: smackbang.co/portfolio/seao2

   The brief was a Geelong woman in her fifties running her own renovation.
   She reads Belle and Est, she has an architect's number in her phone, and
   she is not going to pick a concreter off a black website with a fluoro
   button on it. So: bone paper, ink type, one clay accent, a lot of space,
   and a halftone field doing the heavy lifting instead of stock photography.

   All styling flows through the tokens below. Re-skin = change the tokens.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* paper and ink */
  --bone:#F4F1EA;          /* page */
  --paper:#FAF8F4;         /* raised cards */
  --shell:#EDE8DE;         /* recessed bands */
  --ink:#1A1917;           /* type */
  --ink-2:#4A453E;         /* secondary type */
  --mute:#7A736A;          /* captions, meta */

  /* the one accent */
  --clay:#96492D;
  --clay-2:#B85F3C;
  --clay-wash:#F0E4DC;

  --line:rgba(26,25,23,.13);
  --line-2:rgba(26,25,23,.22);
  --line-bone:rgba(244,241,234,.22);

  --display:"Fraunces","Canela","Freight Display Pro",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  --gut:clamp(20px,5vw,64px);      /* page gutter */
  --max:1440px;
  --band:clamp(72px,9vw,150px);    /* vertical rhythm between sections */
  --r:2px;                         /* almost square. rounded corners read cheap here */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;color:var(--ink);
  margin:0 0 .45em;letter-spacing:-.025em;line-height:1.02;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 100;
}
h1{font-size:clamp(44px,7.4vw,100px)}
h2{font-size:clamp(31px,4.4vw,58px)}
h3{font-size:clamp(22px,2.4vw,32px);line-height:1.12}
h4{font-size:19px;line-height:1.25;letter-spacing:-.015em}
p{margin:0 0 1.05em}
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.35vw,30px);line-height:1.42;
  letter-spacing:-.02em;color:var(--ink-2);
}
.small{font-size:14.5px;color:var(--mute)}
em{font-style:italic}

/* the little letterspaced labels that carry the whole editorial feel */
.tag{
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:var(--mute);
  display:inline-block;
}
.tag.clay{color:var(--clay)}
.tag.bone{color:rgba(244,241,234,.72)}

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{padding:var(--band) 0}
.band-tight{padding:calc(var(--band) * .62) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* the two column editorial split: a heading left, the argument right */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px)}
.split-head{align-self:start}
.split-head .tag{margin-bottom:20px}

/* ---------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 28px;border-radius:var(--r);border:1px solid var(--ink);
  background:var(--ink);color:var(--bone);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--clay);border-color:var(--clay);color:var(--bone)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn-bone{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn-bone:hover{background:var(--clay);border-color:var(--clay);color:var(--bone)}
.btn-bone-ghost{background:transparent;border-color:var(--line-bone);color:var(--bone)}
.btn-bone-ghost:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* a text link that underlines from the left on hover */
.ulink{
  display:inline-block;position:relative;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.ulink:hover::after{transform:scaleX(1)}

/* ================================================================= topbar == */
.topbar{
  background:var(--ink);color:rgba(244,241,234,.8);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px}
.topbar a{color:var(--bone)}
.topbar a:hover{color:var(--clay-2)}
.topbar .tb-r{display:flex;align-items:center;gap:22px}

/* ================================================================= header == */
/* Editorial spread: links left, wordmark centred, links right. No logo blob,
   no orange button shouting at her. Smackbang's whole trick is confidence. */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--bone);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(244,241,234,.93);
  backdrop-filter:saturate(1.4) blur(10px)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:82px;gap:20px}
.nav-l,.nav-r{display:flex;align-items:center;gap:34px}
.nav-r{justify-content:flex-end}
.nav a.nav-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);position:relative;padding:6px 0;
  transition:color .25s var(--ease);
}
.nav a.nav-link:hover{color:var(--ink)}
.nav a.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav a.nav-link:hover::after{transform:scaleX(1)}

.wordmark{
  font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
}
.wordmark span{display:block;font-size:.62em;letter-spacing:.32em;color:var(--mute);
  margin-top:5px;font-family:var(--mono);text-align:center}

/* services dropdown */
.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 14px);left:-22px;min-width:280px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  box-shadow:0 24px 60px -28px rgba(26,25,23,.34);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{
  display:block;padding:10px 14px;font-size:14.5px;color:var(--ink-2);border-radius:var(--r);
  transition:background .2s,color .2s;letter-spacing:-.005em;
}
.drop a:hover{background:var(--clay-wash);color:var(--clay)}

/* burger, hidden until the breakpoint at the bottom of this file */
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);background:none;
  border-radius:var(--r);position:relative;padding:0;
}
.nav-toggle i{
  position:absolute;left:12px;width:20px;height:1px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.nav-toggle i:nth-child(1){top:17px}
.nav-toggle i:nth-child(2){top:22px}
.nav-toggle i:nth-child(3){top:27px}
.nav-toggle.open i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle.open i:nth-child(2){opacity:0}
.nav-toggle.open i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ------------------------------------------------------------ mobile nav -- */
.scrim{
  position:fixed;inset:0;background:rgba(26,25,23,.42);z-index:70;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.scrim.open{opacity:1;visibility:visible}
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,400px);background:var(--bone);
  z-index:80;transform:translateX(101%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mobile-nav.open{transform:none}
.m-top{display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);border-bottom:1px solid var(--line)}
.m-close{background:none;border:0;font-size:26px;line-height:1;padding:4px 8px;color:var(--ink)}
.m-body{padding:26px var(--gut) 40px}
.m-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin:26px 0 10px}
.m-body a{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:22px;letter-spacing:-.02em;
}
.m-body .m-sub a{font-family:var(--sans);font-size:15.5px;padding:9px 0;color:var(--ink-2)}
.m-foot{margin-top:30px;display:grid;gap:10px}

/* ================================================================== hero == */
/* Light hero. The composition does the work rather than a scrim: clean bone
   paper on the left where the type sits, dissolving into dense clay on the
   right. Scrimming a mid-tone field went muddy and the sub-copy vanished. */
.hero{position:relative;background:var(--bone);overflow:hidden}
.hero-field{
  position:absolute;inset:0;background:url("img/hero-field.jpg") right center/cover no-repeat;
}
/* the last few percent back to clean paper, so the type never fights a dot */
.hero-field::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--bone) 0%,rgba(244,241,234,.92) 26%,rgba(244,241,234,0) 54%);
}
.hero-inner{
  position:relative;z-index:2;
  min-height:clamp(540px,82vh,840px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(64px,11vw,140px);padding-bottom:clamp(40px,5vw,64px);
}
.hero h1{color:var(--ink);max-width:11ch;margin-bottom:28px}
.hero h1 em{font-style:italic;color:var(--clay);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.hero-sub{
  color:var(--ink-2);font-size:clamp(16px,1.35vw,19px);
  max-width:44ch;margin-bottom:34px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line-2);max-width:660px;
}
.hero-meta div{
  flex:1 1 180px;padding:20px 26px 0 0;color:var(--mute);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
}
.hero-meta b{display:block;font-family:var(--display);font-size:clamp(24px,2.1vw,30px);
  font-weight:400;letter-spacing:-.025em;color:var(--ink);text-transform:none;margin-bottom:3px}

/* -------------------------------------------------- hero reassurance ----- */
/* The line that says what happens after they enquire, then three signals
   sitting directly under the CTA where the eye already is. */
.hero-next{font-size:15px;color:var(--mute);max-width:46ch;margin:20px 0 0}
.hero-trust{
  list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;
}
.hero-trust li{
  position:relative;padding-left:22px;font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.hero-trust li::before{
  content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5px;
  border:1px solid var(--clay);border-radius:50%;
  background:radial-gradient(circle,var(--clay) 0 2.5px,transparent 2.5px);
}
/* A slow ring off each dot, staggered so they read as a sequence rather than
   a blink. Long and faint on purpose: this sits next to the headline and a
   busy pulse would fight it. The reduced-motion rule at the top of the file
   already flattens this to nothing. */
.hero-trust li::after{
  content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5px;
  border:1px solid var(--clay);border-radius:50%;
  animation:trust-ring 3.4s var(--ease) infinite;
}
.hero-trust li:nth-child(2)::after{animation-delay:.7s}
.hero-trust li:nth-child(3)::after{animation-delay:1.4s}
@keyframes trust-ring{
  0%{transform:scale(1);opacity:.5}
  60%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}

/* ------------------------------------------------------------- trust bar -- */
.trustbar{background:var(--ink);color:rgba(244,241,234,.82)}
.trustbar ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px 30px;
}
.trustbar li{
  padding:15px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;display:flex;align-items:baseline;gap:7px;
}
.trustbar b{font-family:var(--display);font-size:17px;font-weight:400;color:var(--bone);
  letter-spacing:-.02em}

/* -------------------------------------------------------------- why grid -- */
.why-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 clamp(20px,2.6vw,40px);border-top:1px solid var(--line);
}
.why{padding:26px 0 30px;border-bottom:1px solid var(--line)}
.why .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--clay);
  display:block;margin-bottom:16px}
.why h3{font-size:clamp(18px,1.5vw,21px);margin-bottom:.5em;line-height:1.15}
.why p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55}

/* -------------------------------------------------------------- problems -- */
/* The fear section. Darker ground so it lands differently from the rest. */
.problems-band{background:var(--shell)}
.problems{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.prob{
  background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--clay);
  border-radius:var(--r);padding:clamp(22px,2.2vw,30px);
}
.prob h3{font-size:clamp(19px,1.6vw,23px);margin-bottom:.5em}
.prob p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.58}
.prob-close{
  font-family:var(--display);font-size:clamp(19px,1.9vw,26px);line-height:1.35;
  letter-spacing:-.02em;max-width:52ch;margin:clamp(28px,3vw,42px) 0 0;
}

/* ---------------------------------------------------------------- founder -- */
.founder-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.founder-band .body p:last-child strong{font-weight:500;color:var(--ink)}

/* ------------------------------------------------------------ inline CTA -- */
/* Every major section ends in one of these, so there is never a long scroll
   without a way to act. */
.cta-inline{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  margin-top:clamp(30px,3.4vw,46px);
}
.cta-inline .small{margin:0}

.cta-trust{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:9px}
.cta-trust li{
  position:relative;padding-left:24px;font-size:14.5px;color:rgba(244,241,234,.82);
}
.cta-trust li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border:1px solid var(--clay-2);border-radius:50%;
}

/* ============================================================= statement == */
.statement{border-bottom:1px solid var(--line)}
.statement .lede{max-width:36ch;color:var(--ink);font-size:clamp(24px,3.2vw,44px);line-height:1.24}
.statement .body{max-width:52ch}

/* ============================================================== services == */
/* A numbered editorial index, not a grid of cards. Cards look like a template;
   a numbered list of finishes looks like a studio. */
.index-list{border-top:1px solid var(--line)}
.index-row{
  display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1.25fr) 30px;
  gap:clamp(14px,3vw,40px);align-items:baseline;
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .38s var(--ease);
}
.index-row::before{
  content:"";position:absolute;inset:0 -18px;background:var(--clay-wash);
  opacity:0;transition:opacity .34s var(--ease);z-index:0;border-radius:var(--r);
}
.index-row:hover::before{opacity:1}
.index-row > *{position:relative;z-index:1}
.index-row:hover{padding-left:14px}
.index-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute)}
.index-row:hover .index-num{color:var(--clay)}
.index-name{font-family:var(--display);font-size:clamp(23px,2.7vw,38px);
  letter-spacing:-.025em;line-height:1.05;font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 72}
.index-desc{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.index-arw{font-size:19px;color:var(--mute);justify-self:end;
  transition:transform .34s var(--ease),color .34s var(--ease)}
.index-row:hover .index-arw{transform:translateX(6px);color:var(--clay)}

/* ================================================================ process == */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--clay);
  display:block;margin-bottom:26px}
.step h3{margin-bottom:.5em}
.step p{color:var(--ink-2);font-size:15.5px;margin:0}

/* ================================================================= areas == */
/* Three region plates on the homepage instead of twenty suburb chips. */
.regions-row{display:flex;flex-wrap:wrap;gap:10px}
.regions-row a{
  flex:1 1 auto;text-align:center;padding:18px 26px;border:1px solid var(--line-2);
  border-radius:var(--r);font-family:var(--display);font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.02em;transition:background .28s var(--ease),color .28s var(--ease),
  border-color .28s var(--ease);
}
.regions-row a:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}

.areas-grid{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1px solid var(--line-2);border-radius:100px;padding:9px 19px;font-size:14px;
  color:var(--ink-2);transition:background .25s,color .25s,border-color .25s;
}
.chip:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* =================================================================== faq == */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.2vw,28px) 44px clamp(20px,2.2vw,28px) 0;
  font-family:var(--display);font-size:clamp(19px,1.9vw,25px);letter-spacing:-.02em;
  position:relative;line-height:1.22;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:1px;background:var(--ink);
  transition:transform .3s var(--ease);
}
.faq summary::before{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:1px;background:var(--ink);
  transform:rotate(90deg);transition:transform .3s var(--ease),opacity .3s;
}
.faq details[open] summary::before{transform:rotate(0);opacity:0}
.faq .ans{padding:0 clamp(40px,8vw,180px) 26px 0;color:var(--ink-2);font-size:15.5px}
.faq .ans p:last-child{margin:0}

/* ============================================================== page hero == */
/* Inner pages get the same light halftone treatment as the homepage, just
   shallower, so the shell reads as one site rather than a home page plus
   eleven templates. */
.page-hero{position:relative;background:var(--bone);overflow:hidden;
  border-bottom:1px solid var(--line)}
.page-hero .hero-field{position:absolute;inset:0;
  background:url("img/hero-field.jpg") right center/cover no-repeat}
.page-hero .hero-field::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--bone) 0%,rgba(244,241,234,.94) 38%,rgba(244,241,234,0) 64%)}
.page-hero-inner{position:relative;z-index:2;
  padding-top:clamp(44px,6vw,88px);padding-bottom:clamp(44px,5.5vw,80px)}
.crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin:0 0 24px}
.crumbs a:hover{color:var(--clay)}
.crumbs .sep{margin:0 10px;opacity:.45}
.page-hero h1{font-size:clamp(36px,5.4vw,74px);max-width:13ch;margin-bottom:20px}
.page-hero .sub{font-size:clamp(16px,1.3vw,19px);color:var(--ink-2);max-width:44ch;
  margin-bottom:30px}

/* ------------------------------------------------------------- inclusions -- */
.inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.inc li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative;
  font-size:15.5px;color:var(--ink-2)}
.inc li::before{content:"";position:absolute;left:2px;top:24px;width:13px;height:1px;
  background:var(--clay)}

.note{border-left:2px solid var(--clay);padding:3px 0 3px 22px;color:var(--ink-2);
  font-size:15.5px;max-width:62ch}
.note p:last-child{margin:0}

.wide-img{border-radius:var(--r);overflow:hidden;background:var(--shell);aspect-ratio:21/9}
.wide-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03)}

/* ------------------------------------------------------------------ areas -- */
/* Towns grouped under their region, because a flat list of them reads as
   counting suburbs rather than describing a business. */
.region + .region{margin-top:clamp(34px,4vw,56px)}
.region-name{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.19em;
  text-transform:uppercase;color:var(--clay);margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.area-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.area-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.area-card h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:.55em}
.area-card p{font-size:14.5px;color:var(--ink-2);margin:0 0 20px;flex:1}
.area-card .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay)}

/* --------------------------------------------------------------- contact -- */
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-list li{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:15.5px}
.contact-list .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);flex:0 0 120px;padding-top:4px}
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--shell)}
.map iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(1) contrast(.94)}

/* ================================================================== cta ==== */
.cta{background:var(--ink);color:var(--bone);position:relative;overflow:hidden}
/* Same lesson as the hero: solid ink under the type, halftone out to the
   right where nothing has to be read. An overlaid field at half opacity
   turns the whole band grey and eats the heading. */
.cta-field{position:absolute;inset:0;background:url("img/field-ink.jpg") right center/cover no-repeat}
.cta-field::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--ink) 0%,rgba(26,25,23,.94) 30%,rgba(26,25,23,.45) 62%,rgba(26,25,23,.2) 100%);
}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:var(--bone);max-width:14ch}
.cta .lede{color:rgba(244,241,234,.74)}

/* --------------------------------------------------------------- the form -- */
.quote-card{background:var(--paper);border-radius:var(--r);padding:clamp(26px,3vw,44px);
  color:var(--ink)}
.quote-card h3{margin-bottom:.4em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;background:var(--bone);border:1px solid var(--line-2);
  border-radius:var(--r);font-family:var(--sans);font-size:15.5px;color:var(--ink);
  transition:border-color .22s,background .22s;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--clay);background:var(--paper)}
.form-note{font-size:12.5px;color:var(--mute);margin:14px 0 0}
.form-success{display:none;background:var(--clay-wash);border:1px solid rgba(150,73,45,.3);
  border-radius:var(--r);padding:26px}
.form-success.show{display:block}
.hp{position:absolute;left:-9999px}

/* =============================================================== footer === */
.site-footer{background:var(--ink);color:rgba(244,241,234,.72);
  padding:clamp(56px,6vw,84px) 0 34px;font-size:14.5px}
.site-footer a{color:rgba(244,241,234,.72)}
.site-footer a:hover{color:var(--clay-2)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(24px,4vw,56px);
  padding-bottom:clamp(38px,4vw,56px);border-bottom:1px solid var(--line-bone)}
.f-top .wordmark{color:var(--bone);margin-bottom:18px}
.f-top .wordmark span{color:rgba(244,241,234,.55);text-align:left}
.f-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(244,241,234,.5);margin-bottom:16px}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding-top:26px;font-size:12.5px;color:rgba(244,241,234,.5)}

/* ------------------------------------------------------ mobile call bar --- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--ink);border-top:1px solid rgba(244,241,234,.14);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);
}
.callbar a + a{border-left:1px solid rgba(244,241,234,.14);background:var(--clay)}

/* ---------------------------------------------------------------- reveal -- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   BREAKPOINTS
   Everything above is the base. Nothing below this line may be overridden by
   a later base rule, because media queries add no specificity. That mistake
   cost us the mobile menu on the last build.
   ========================================================================== */
@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:22px 0}
  .step .n{margin-bottom:14px}
  .revs{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  /* the arrow has nowhere to go once this collapses, and auto placement
     dumps it on its own line under the number. Whole row is tappable. */
  .index-row{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .index-desc{grid-column:2 / 3;font-size:15px}
  .index-arw{display:none}
  .area-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  /* one breakpoint owns the nav swap */
  .nav{grid-template-columns:1fr auto;height:68px}
  .nav-l{display:none}
  .nav-r{gap:14px}
  .nav-r .nav-link,.nav-r .btn{display:none}
  .nav-toggle{display:block}
  .wordmark{justify-self:start;font-size:16px}
  .wordmark span{text-align:left}
  .topbar .tb-l{display:none}
  .topbar .wrap{justify-content:center}
  .callbar{display:flex}
  body{padding-bottom:52px}
  .hero-inner{min-height:auto;padding-top:clamp(215px,58vw,320px);padding-bottom:44px}
  /* on a phone the clear zone has to be at the bottom, not the left.
     `.page-hero .hero-field` is two classes and beats a bare `.hero-field`
     no matter which media query it sits in, so the inner pages need their
     own override here or their type ends up sitting on the dots. */
  .hero-field{background-image:url("img/hero-field-m.jpg");background-position:center top}
  .hero-field::after{background:linear-gradient(180deg,rgba(244,241,234,0) 0%,
    rgba(244,241,234,.9) 21%,var(--bone) 38%)}
  .page-hero .hero-field{background-image:url("img/hero-field-m.jpg");
    background-position:center top}
  .page-hero .hero-field::after{background:linear-gradient(180deg,rgba(244,241,234,0) 0%,
    rgba(244,241,234,.92) 17%,var(--bone) 30%)}
  .page-hero-inner{padding-top:clamp(150px,40vw,230px)}
  .hero-meta{margin-top:34px}
  .shots{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(96px,22vw,150px)}
  .s-6,.s-4,.s-4s,.s-8{grid-column:span 1;grid-row:span 2}
  .s-12{grid-column:span 2;grid-row:span 2}
  .form-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .problems{grid-template-columns:1fr}
  .trustbar ul{justify-content:flex-start;gap:0 24px}
  .trustbar li{padding:10px 0}
  .cta-inline .btn{width:100%;justify-content:center}
  .inc{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
  .contact-list li{flex-direction:column;gap:4px}
  .contact-list .k{flex:none}
  .f-top{grid-template-columns:1fr;gap:32px}
  .hero-meta div{flex:1 1 45%;padding-right:14px}
  .hero-meta b{font-size:24px}
}

@media (max-width:520px){
  body{font-size:16px}
  .hero-meta div{flex:1 1 100%}
  .rev-head{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{width:100%;justify-content:center}
}