/* =====================================================================
   TERRALUME SURFACES — Design System Stylesheet
   Self-hosted Lato (display) + Inter (body). No external CDNs.
   Palette: Charcoal owns the surface; Aggregate Orange is the
   rare signature spark (<=8% area, per brand guidelines).
   ===================================================================== */

/* ---------- Self-hosted type (from brand/design.json) ---------- */
@font-face{
  font-family:"Lato";
  src:url("fonts/Lato-Semibold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("fonts/Lato-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("fonts/Lato-Black.ttf") format("truetype");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================ TOKENS ============================ */
:root{
  /* Brand palette — design.json is the source of truth */
  --charcoal:        #24282B;   /* Charcoal — core brand */
  --charcoal-700:    #1C2023;   /* Deep Charcoal — shadows/deep panels */
  --charcoal-900:    #15181A;   /* darkest band */
  --sage:         #707880;   /* Sage — captions, labels, hairlines */
  --sage-soft:    #9AA0A6;
  --accent:       #FF6A00;   /* Aggregate Orange — signature spark ONLY */
  --accent-600:   #D85800;   /* Burnt Aggregate — orange-on-light text */
  --dark:         #15181A;   /* Forest Charcoal — body text / near-black */
  --light:        #F5F3EF;   /* Stone White — canvas */
  --stone-200:    #E4E2DE;   /* card surfaces, bands, hairlines */
  --stone-300:    #D6D4CF;
  --white:        #FFFFFF;

  --ink:          var(--dark);
  --muted:        #5C636A;     /* muted body on light */
  --muted-on-dark:#C8CCD0;
  --charcoal-rgb:    36,40,43;    /* charcoal as rgb — soft tints/focus rings */

  /* Type families */
  --font-display: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — 1.250 modular (design.json) */
  --fs-display-xl: clamp(2.85rem, 1.6rem + 4.6vw, 4.5rem);   /* ~72 */
  --fs-display-l:  clamp(2.35rem, 1.5rem + 3.0vw, 3.5rem);   /* ~56 */
  --fs-h1:         clamp(2.1rem, 1.5rem + 2.1vw, 2.75rem);   /* ~44 */
  --fs-h2:         clamp(1.7rem, 1.3rem + 1.5vw, 2.125rem);  /* ~34 */
  --fs-h3:         clamp(1.35rem, 1.15rem + 0.7vw, 1.625rem);/* ~26 */
  --fs-h4:         1.25rem;                                  /*  20 */
  --fs-lead:       clamp(1.075rem, 1rem + 0.35vw, 1.25rem);  /*  20 */
  --fs-body:       1.0625rem;                                /*  17 */
  --fs-body-s:     0.9375rem;                                /*  15 */
  --fs-caption:    0.8125rem;                                /*  13 */
  --fs-overline:   0.75rem;                                  /*  12 */

  /* Spacing — 8px base (design.json) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Radii — restrained (design.json) */
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:999px;

  /* Warm, low elevation (design.json) */
  --sh-1:0 1px 2px rgba(27,36,32,.06), 0 2px 6px rgba(27,36,32,.05);
  --sh-2:0 8px 24px rgba(27,36,32,.10);
  --sh-3:0 18px 48px rgba(27,36,32,.16);

  --container:1200px;
  --gutter:24px;
  --margin:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.32s var(--ease);
}

/* ============================ RESET ============================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--light);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); color:var(--ink); font-weight:900;}
p{margin:0;}
button{font-family:inherit;}

::selection{background:var(--accent); color:#fff;}

/* ---------- Keyboard focus (accessibility) ---------- */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
/* On dark surfaces keep the ring legible against charcoal */
.section--dark a:focus-visible,.section--charcoal a:focus-visible,
.hero a:focus-visible,.site-footer a:focus-visible,.cta-band a:focus-visible,
.page-hero a:focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(255,106,0,.45);
}
.btn:focus-visible{outline-offset:4px;}
/* mouse users never see the ring */
:focus:not(:focus-visible){outline:none;}

/* ---------- Skip to content ---------- */
.skip-link{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:200; padding:12px 22px; border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--charcoal); color:#fff; font-weight:600; font-size:var(--fs-body-s);
  box-shadow:var(--sh-2); transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}

/* ============================ LAYOUT ============================ */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--margin)*2);
  margin-inline:auto;
  padding-inline:var(--margin);
}
.section{padding-block:clamp(64px, 7vw, 104px);}
.section--tight{padding-block:clamp(48px, 5vw, 80px);}
.section--light{background:var(--stone-200);}
.section--paper{background:var(--light);}
.section--dark{background:var(--charcoal); color:var(--light);}
.section--charcoal{background:var(--charcoal-900); color:var(--light);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.section--charcoal h1,.section--charcoal h2,.section--charcoal h3{color:var(--light);}

/* ============================ TYPE UTILITIES ============================ */
h1{font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.015em;}
h2{font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.01em; font-weight:700;}
h3{font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.005em; font-weight:700;}
h4{font-size:var(--fs-h4); line-height:1.35; font-weight:600;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body);
  font-size:var(--fs-overline);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage);
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--accent); border-radius:2px;
}
.section--dark .eyebrow,.section--charcoal .eyebrow{color:var(--sage-soft);}

.lead{font-size:var(--fs-lead); line-height:1.55; color:var(--muted);}
.section--dark .lead,.section--charcoal .lead{color:var(--muted-on-dark);}
.measure{max-width:62ch;}
.text-accent{color:var(--accent-600);}

/* Section heads */
.section-head{max-width:720px; margin-bottom:var(--s-8);}
.section-head .eyebrow{margin-bottom:var(--s-4);}
.section-head h2{margin-bottom:var(--s-4);}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}

/* small utilities (replace inline styles) */
.center{text-align:center;}
.mt-4{margin-top:var(--s-4);}
.mt-5{margin-top:var(--s-5);}
.mt-6{margin-top:var(--s-6);}
.mt-7{margin-top:var(--s-7);}
.stack > * + *{margin-top:var(--s-4);}

/* ============================ BUTTONS ============================ */
.btn{
  --bg:var(--charcoal); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body-s);
  letter-spacing:.005em;
  padding:14px 26px;
  border-radius:var(--r-md);
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd);
  cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2);}
.btn:active{transform:translateY(0);}
.btn .ar{transition:transform var(--t);}
.btn:hover .ar{transform:translateX(4px);}

/* Primary = the single orange spark per view */
.btn--primary{--bg:var(--accent); --fg:#fff;}
.btn--primary:hover{--bg:var(--accent-600); box-shadow:0 10px 26px rgba(216,88,0,.32);}

/* Green = the workhorse CTA (most buttons) */
.btn--charcoal{--bg:var(--charcoal); --fg:#fff;}
.btn--charcoal:hover{--bg:var(--charcoal-700);}

/* Light / on-dark outline */
.btn--light{--bg:rgba(255,255,255,.12); --fg:#fff; --bd:rgba(244,241,234,.55); backdrop-filter:blur(3px);}
.btn--light:hover{--bg:#fff; --fg:var(--charcoal); --bd:#fff;}

/* Ghost on light */
.btn--ghost{--bg:transparent; --fg:var(--charcoal); --bd:var(--stone-300);}
.btn--ghost:hover{--bd:var(--charcoal); --bg:transparent;}

.btn--lg{padding:17px 32px; font-size:var(--fs-body);}
.btn--block{display:flex; width:100%; justify-content:center;}

/* text link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; color:var(--charcoal);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size var(--t), color var(--t);
  padding-bottom:2px;
}
.tlink .ar{transition:transform var(--t);}
.tlink:hover{background-size:100% 2px;}
.tlink:hover .ar{transform:translateX(4px);}
.section--dark .tlink,.section--charcoal .tlink{color:#fff;}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,241,234,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(27,36,32,.08);
  transition:box-shadow var(--t), background var(--t);
}
.site-header .container{padding-block:0;}
.nav{display:flex; align-items:center; gap:var(--s-6); height:78px;}

.brand{display:inline-flex; align-items:center; gap:12px;}
.brand__mark{width:42px; height:42px; flex:0 0 42px; display:block; object-fit:contain; border-radius:11px;}
.brand__mark svg{width:100%; height:100%; display:block;}
.brand__text{display:flex; flex-direction:column; line-height:1;}
.brand__name{
  font-family:var(--font-display); font-weight:900; font-size:1.32rem;
  letter-spacing:-.02em; color:var(--charcoal); line-height:1;
}
.brand__sub{
  font-family:var(--font-body); font-weight:600; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--sage);
  margin-top:4px; padding-left:1px;
}
.site-footer .brand__name{color:var(--light);}
.site-footer .brand__sub{color:var(--sage-soft);}

.nav__links{display:flex; gap:4px; margin-left:auto;}
.nav__links a{
  display:block; padding:9px 16px; border-radius:var(--r-pill);
  font-weight:500; font-size:.95rem; color:var(--dark);
  transition:color var(--t), background var(--t);
}
.nav__links a:hover{color:var(--charcoal); background:rgba(var(--charcoal-rgb),.07);}
.nav__links a.is-active{color:var(--charcoal); font-weight:600;}

.nav__cta{display:flex; align-items:center; gap:18px;}
.nav__phone{
  font-weight:700; font-size:.95rem; color:var(--charcoal);
  white-space:nowrap; transition:color var(--t);
}
.nav__phone:hover{color:var(--accent-600);}
.nav__phone--tbc{color:var(--muted); font-weight:600; font-style:italic;}

/* Mobile nav (checkbox, no JS) */
.nav-toggle,.nav-toggle-label{display:none;}
.nav-toggle-label{
  width:44px; height:44px; margin-left:auto;
  border:1px solid var(--stone-300); border-radius:var(--r-md);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(255,255,255,.5);
}
.nav-toggle-label span{width:20px; height:2px; background:var(--charcoal); border-radius:2px; transition:var(--t);}

/* ============================ HERO ============================ */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(620px, 88vh, 880px);
  display:flex; align-items:center;
  color:#fff; overflow:hidden;
  padding-block:var(--s-9);
}
.hero__media{position:absolute; inset:0; z-index:-2;}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 62%;}
/* Lighter, bottom-anchored scrim so the photo reads (critique P1) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(27,36,32,.20) 0%, rgba(27,36,32,.10) 38%, rgba(27,36,32,.72) 100%),
    linear-gradient(94deg, rgba(20,28,24,.74) 0%, rgba(20,28,24,.34) 46%, rgba(20,28,24,.04) 78%);
}
.hero__inner{max-width:680px;}
.hero .pill{margin-bottom:var(--s-5);}
.hero h1{
  font-size:var(--fs-display-xl); line-height:1.0; letter-spacing:-.028em;
  color:#fff; text-shadow:0 2px 30px rgba(11,18,14,.55);
}
.hero h1 .spark{
  color:var(--accent); display:block;
  text-shadow:0 2px 30px rgba(255,106,0,.28), 0 2px 24px rgba(11,18,14,.5);
}
.hero__lead{
  margin-top:var(--s-5); max-width:48ch;
  font-size:var(--fs-lead); line-height:1.55; color:#F0F1F2;
  text-shadow:0 1px 16px rgba(11,18,14,.5);
}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--s-7);}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:var(--s-7);
  padding-top:var(--s-5); border-top:1px solid rgba(244,241,234,.22);
}
.hero__trust li{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.975rem; font-weight:500; color:#EBECED;
}
.hero__trust .tick{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff;
}
.hero__trust .tick svg{width:13px; height:13px;}

/* tasteful staggered entrance — reduced-motion safe (see motion block) */
@keyframes heroRise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.hero__inner > *{animation:heroRise .7s var(--ease) both;}
.hero__inner > .pill{animation-delay:.05s;}
.hero__inner > h1{animation-delay:.13s;}
.hero__inner > .hero__lead{animation-delay:.22s;}
.hero__inner > .hero__actions{animation-delay:.31s;}
.hero__inner > .hero__trust{animation-delay:.4s;}

/* floating rating chip — fills the right space (critique P1) */
.hero__chip{
  position:absolute; z-index:1; right:var(--margin); bottom:var(--s-8);
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:var(--r-lg);
  background:rgba(244,241,234,.92); color:var(--ink);
  box-shadow:var(--sh-3); backdrop-filter:blur(6px);
}
.hero__chip .stars{color:var(--accent); font-size:.95rem; letter-spacing:2px; line-height:1;}
.hero__chip-icon{display:block; width:22px; height:22px; color:var(--charcoal); margin-bottom:4px;}
.hero__chip-icon svg{width:100%; height:100%; display:block;}
.hero__chip strong{display:block; font-family:var(--font-display); font-weight:900; font-size:1.15rem; color:var(--ink);}
.hero__chip span{font-size:.8rem; color:var(--muted);}

/* generic pill (badge) */
.pill{
  display:inline-flex; align-items:center; gap:.55em;
  padding:7px 15px 7px 13px; border-radius:var(--r-pill);
  font-size:var(--fs-caption); font-weight:600; letter-spacing:.02em;
}
.pill--glass{background:rgba(244,241,234,.14); color:#fff; border:1px solid rgba(244,241,234,.3);}
.pill--glass .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,106,0,.25);}
.pill--stone{background:var(--white); color:var(--charcoal); border:1px solid var(--stone-300); box-shadow:var(--sh-1);}
.pill--accent{background:rgba(255,106,0,.12); color:var(--accent-600); border:1px solid rgba(255,106,0,.28);}

/* ============================ STAT BAR ============================ */
.stat-band{
  background:var(--charcoal); color:var(--light);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.stat-band__inner{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:var(--s-7) var(--s-5); text-align:center;
  border-left:1px solid rgba(244,241,234,.14);
}
.stat:first-child{border-left:0;}
.stat__num{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.3rem,1.6rem+1.7vw,3rem); line-height:1;
  letter-spacing:-.02em; color:#fff;
}
.stat__num .u{color:var(--accent); font-size:.55em; vertical-align:.12em; margin-left:1px;}
.stat__label{margin-top:10px; font-size:var(--fs-body-s); color:var(--muted-on-dark); line-height:1.4;}

/* ============================ CARDS / SERVICES ============================ */
.grid{display:grid; gap:var(--s-5);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.card{
  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), border-color var(--t);
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--stone-300);}

/* service card with image */
.svc__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--stone-200);}
.svc__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.card:hover .svc__img img{transform:scale(1.05);}
.svc__tag{
  position:absolute; top:14px; left:14px; z-index:1;
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:var(--fs-caption); font-weight:600;
  background:rgba(27,36,32,.66); color:#fff; backdrop-filter:blur(4px);
}
.svc__body{padding:var(--s-6) var(--s-6) var(--s-7); display:flex; flex-direction:column; flex:1;}
.svc__body h3{margin-bottom:10px;}
.svc__body p{color:var(--muted); margin-bottom:var(--s-5);}
.svc__body .tlink{margin-top:auto;}

/* icon card (no image) */
.card--icon{padding:var(--s-7) var(--s-6);}
.card__icon{
  width:54px; height:54px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:var(--s-5);
  background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.card__icon svg{width:26px; height:26px;}
.card--icon h3{margin-bottom:10px;}
.card--icon p{color:var(--muted);}

/* ============================ SPLIT ============================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,80px); align-items:center;}
.split--top{align-items:start;}
.split--media-first .split__media,
.split--reverse .split__media{order:-1;}
.split__media{position:relative;}
.split__media img{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-2);
  aspect-ratio:4/3; object-fit:cover;
}
.split__media.tall img{aspect-ratio:3/4;}
.split__body .eyebrow{margin-bottom:var(--s-4);}
.split__body h2{margin-bottom:var(--s-4);}
.split__body > .lead{margin-bottom:var(--s-5);}
.split__body > p{color:var(--muted);}
.split__body > p + p{margin-top:var(--s-4);}
.split__body .btn{margin-top:var(--s-6);}

/* image badge overlay on split media */
.media-badge{
  position:absolute; bottom:16px; left:16px;
  background:rgba(27,36,32,.74); color:#fff; backdrop-filter:blur(6px);
  padding:10px 16px; border-radius:var(--r-md);
  font-size:var(--fs-body-s); font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.media-badge .num{font-family:var(--font-display); font-weight:900; color:var(--accent); font-size:1.15rem;}

/* ============================ CHECKLIST ============================ */
.checklist{display:grid; gap:14px; margin-top:var(--s-5);}
.checklist li{display:flex; gap:13px; align-items:flex-start; line-height:1.5;}
.checklist .tick{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:rgba(var(--charcoal-rgb),.10); color:var(--charcoal);
}
.section--dark .checklist .tick,.section--charcoal .checklist .tick{
  background:rgba(255,255,255,.12); color:#fff;
}
.checklist .tick svg{width:14px; height:14px;}
.checklist span strong{font-weight:600; color:inherit;}
.section--dark .checklist li,.section--charcoal .checklist li{color:#E7E8EA;}

/* ============================ GALLERY ============================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:16px;
}
.gallery__item{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--stone-200); box-shadow:var(--sh-1); margin:0;
  transition:box-shadow var(--t);
}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.gallery__item:hover{box-shadow:var(--sh-3);}
.gallery__item:hover img{transform:scale(1.06);}
/* persistent legibility scrim — gallery reads with info at rest, deepens on hover */
.gallery__item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 38%, rgba(20,28,24,.30) 66%, rgba(20,28,24,.82) 100%);
  opacity:.85; transition:opacity var(--t);
}
.gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1;}
.gallery__cap{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:1; margin:0;
  color:#fff; font-size:var(--fs-body-s); font-weight:600; line-height:1.3;
  text-shadow:0 1px 12px rgba(11,18,14,.55);
  transform:translateY(0); opacity:1;
  transition:transform var(--t), opacity var(--t);
}
.gallery__item:hover .gallery__cap{transform:translateY(-2px);}
.gallery__cap small{display:block; font-weight:600; color:#FFC59B; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px;}

/* feature spans for the masonry rhythm */
.g-tall{grid-row:span 2;}
.g-wide{grid-column:span 2;}
.g-big{grid-column:span 2; grid-row:span 2;}

/* full gallery page grid */
.gallery--page{grid-auto-rows:240px;}

/* ============================ PROCESS STEPS ============================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); position:relative;}
.step{position:relative; padding-top:var(--s-2);}
.step__num{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:var(--s-5);
  font-family:var(--font-display); font-weight:900; font-size:1.25rem;
  background:var(--white); color:var(--charcoal);
  border:2px solid var(--stone-300); position:relative; z-index:1;
}
.step:first-child .step__num{border-color:var(--accent); color:var(--accent-600);}
.steps::before{
  content:""; position:absolute; top:26px; left:26px; right:26px; z-index:0;
  border-top:2px dashed var(--stone-300);
}
.section--dark .steps::before{border-color:rgba(244,241,234,.22);}
.section--dark .step__num{background:var(--charcoal-700); color:#fff; border-color:rgba(244,241,234,.3);}
.section--dark .step:first-child .step__num{border-color:var(--accent); color:#fff;}
.step h3{font-size:var(--fs-h4); font-weight:700; margin-bottom:8px;}
.step p{color:var(--muted); font-size:var(--fs-body-s);}
.section--dark .step p{color:var(--muted-on-dark);}

/* ============================ TESTIMONIALS ============================ */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);}
.quote{
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-7) var(--s-6);
  box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t);
}
.quote:hover{transform:translateY(-4px); box-shadow:var(--sh-2);}
.quote .stars{color:var(--accent); letter-spacing:2px; font-size:.95rem; margin-bottom:var(--s-4);}
.quote blockquote{margin:0; font-size:1.075rem; line-height:1.6; color:var(--ink);}
.quote__who{display:flex; align-items:center; gap:12px; margin-top:var(--s-5);}
.quote__av{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:900;
  background:var(--charcoal); color:#fff; font-size:1rem;
}
.quote__name{font-weight:600; font-size:var(--fs-body-s); color:var(--ink);}
.quote__meta{font-size:var(--fs-caption); color:var(--sage);}

/* reviews coming soon (honest placeholder, no fake testimonials) */
.reviews-soon{
  max-width:760px; margin:var(--s-7) auto 0; text-align:center;
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:var(--s-8) var(--s-7);
  box-shadow:var(--sh-1);
}
.reviews-soon__icon{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto var(--s-5);
  border-radius:50%; background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.reviews-soon__icon svg{width:30px; height:30px;}
.reviews-soon__text{color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:60ch; margin:0 auto;}
.reviews-soon__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:var(--s-6);
}

/* ============================ FAQ ============================ */
.faq{max-width:820px; margin-inline:auto;}
.faq__item{
  border-bottom:1px solid var(--stone-300);
}
.faq__item summary{
  list-style:none; cursor:pointer; padding:var(--s-5) 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__icon{
  flex:0 0 30px; width:30px; height:30px; position:relative;
  border-radius:50%; border:1.5px solid var(--stone-300); transition:var(--t);
}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--charcoal); border-radius:2px; transition:var(--t);
}
.faq__icon::before{width:12px; height:2px;}
.faq__icon::after{width:2px; height:12px;}
.faq__item[open] .faq__icon{border-color:var(--accent); background:var(--accent);}
.faq__item[open] .faq__icon::before,.faq__item[open] .faq__icon::after{background:#fff;}
.faq__item[open] .faq__icon::after{height:0;}
.faq__answer{padding:0 0 var(--s-5); max-width:70ch;}
.faq__answer p{color:var(--muted);}
.faq__answer a{color:var(--accent-600); font-weight:600;}

/* ============================ CTA BAND ============================ */
.cta-band{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(255,106,0,.18), transparent 60%),
    linear-gradient(120deg, var(--charcoal) 0%, var(--charcoal-700) 100%);
  color:#fff;
  padding:clamp(40px,6vw,72px);
}
.cta-band::after{
  content:""; position:absolute; right:-60px; bottom:-90px; z-index:-1;
  width:320px; height:320px; border-radius:50%;
  border:2px solid rgba(255,106,0,.22);
}
.cta-band__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-7); flex-wrap:wrap;
}
.cta-band h2{color:#fff; max-width:18ch;}
.cta-band p{margin-top:14px; color:var(--muted-on-dark); max-width:46ch;}
.cta-band .btn{flex:0 0 auto;}

/* ============================ PAGE HERO (interior) ============================ */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, var(--charcoal) 0%, var(--charcoal-700) 60%, var(--charcoal-900) 100%);
  padding-block:clamp(72px,12vw,120px) clamp(56px,9vw,88px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.10;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1px, transparent 0);
  background-size:26px 26px;
}
.page-hero::after{
  content:""; position:absolute; top:-120px; right:-80px;
  width:360px; height:360px; border-radius:50%;
  border:2px solid rgba(255,106,0,.25);
}
.page-hero .container{position:relative; z-index:1;}
.page-hero .lead{position:relative;}
.breadcrumb{font-size:var(--fs-body-s); color:var(--sage-soft); margin-bottom:var(--s-5);}
.breadcrumb a{color:#fff; opacity:.85; transition:opacity var(--t);}
.breadcrumb a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px;}
.page-hero h1{color:#fff; max-width:18ch; margin-bottom:var(--s-5);}
.page-hero .lead{color:#E1E2E4; max-width:60ch;}
/* illustrative / disclaimer note on dark page heroes */
.note-illustrative{
  position:relative; display:inline-flex; align-items:flex-start; gap:9px;
  margin-top:var(--s-5); max-width:64ch;
  padding:11px 16px; border-radius:var(--r-md);
  background:rgba(244,241,234,.08); border:1px solid rgba(244,241,234,.18);
  color:#CDD0D3; font-size:var(--fs-body-s); line-height:1.5;
}
.note-illustrative::before{
  content:"i"; flex:0 0 18px; width:18px; height:18px; margin-top:1px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent); color:#fff;
  font-family:var(--font-display); font-weight:900; font-size:.72rem; font-style:normal;
}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--charcoal-900); color:#C8CCD0; padding-block:var(--s-9) var(--s-6);}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-7);
  padding-bottom:var(--s-7); border-bottom:1px solid rgba(244,241,234,.12);
}
.footer-brand .brand{margin-bottom:var(--s-5);}
.footer-about{color:#A6ACB2; max-width:42ch; font-size:var(--fs-body-s); line-height:1.6;}
.site-footer h4{color:#fff; font-size:var(--fs-body-s); font-weight:600; margin-bottom:var(--s-5); text-transform:uppercase; letter-spacing:.1em;}
.footer-links li,.footer-contact li{margin-bottom:12px;}
.footer-links a,.footer-contact a{color:#B4BABF; font-size:var(--fs-body-s); transition:color var(--t);}
.footer-links a:hover,.footer-contact a:hover{color:#fff;}
.footer-contact li{color:#A6ACB2; font-size:var(--fs-body-s);}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:var(--s-6); font-size:var(--fs-caption); color:#8A9097;
}
.footer-bottom a{color:#B4BABF;}
.footer-bottom a:hover{color:#fff;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:#C8CCD0;
  border:1px solid rgba(244,241,234,.18); transition:var(--t);
}
.footer-social a:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px);}
.footer-social svg{width:18px; height:18px;}

/* ============================ FORM (contact) ============================ */
.form-wrap{
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); padding:clamp(24px,4vw,40px); box-shadow:var(--sh-1);
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:var(--s-5);}
.field{display:flex; flex-direction:column;}
.field--full{grid-column:1 / -1;}
.field label{font-size:var(--fs-body-s); font-weight:600; color:var(--ink); margin-bottom:7px;}
.field .req{color:var(--accent-600);}
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--stone-300); border-radius:var(--r-md);
  background:var(--light); transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.field input::placeholder,.field textarea::placeholder{color:#969BA1;}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--charcoal); background:#fff;
  box-shadow:0 0 0 4px rgba(var(--charcoal-rgb),.12);
}
.form-note{font-size:var(--fs-caption); color:var(--sage); margin-top:14px;}

/* contact details list */
.contact-list li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--stone-200);}
.contact-list li:last-child{border-bottom:0;}
.ci-icon{
  flex:0 0 42px; width:42px; height:42px; border-radius:var(--r-md);
  display:grid; place-items:center; background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.ci-icon svg{width:21px; height:21px;}
.ci-label{font-size:var(--fs-caption); color:var(--sage); text-transform:uppercase; letter-spacing:.08em; font-weight:600;}
.ci-val{font-weight:600; color:var(--ink);}
a.ci-val:hover{color:var(--accent-600);}

/* contact aside: stack the detail card + call card */
.contact-aside{display:flex; flex-direction:column;}
.contact-aside .form-wrap h3{font-size:var(--fs-h3);}
.callcard{
  background:var(--white); border:1px solid var(--stone-200);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
}
.callcard img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.callcard__body{padding:var(--s-6);}
.callcard__body h3{font-size:var(--fs-h4); font-weight:700; margin-bottom:8px;}
.callcard__body p{color:var(--muted); font-size:var(--fs-body-s); margin-bottom:var(--s-5);}

/* feature row */
.feature{display:flex; gap:16px; align-items:flex-start;}
.feature__icon{
  flex:0 0 48px; width:48px; height:48px; border-radius:var(--r-md);
  display:grid; place-items:center; background:rgba(var(--charcoal-rgb),.08); color:var(--charcoal);
}
.feature__icon svg{width:24px; height:24px;}
.feature h3{font-size:var(--fs-h4); font-weight:700; margin-bottom:5px;}
.feature p{color:var(--muted); font-size:var(--fs-body-s);}

/* trust strip */
.trust-strip{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:18px 40px;
}
.trust-strip .tlabel{font-size:var(--fs-caption); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); font-weight:600;}
.trust-strip .tbadge{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; color:var(--charcoal); font-size:.95rem;
}
.trust-strip .tbadge svg{width:22px; height:22px; color:var(--charcoal);}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  :root{--margin:40px;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:var(--s-6) var(--s-7);}
  .footer-brand{grid-column:1 / -1;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .g-big,.g-wide{grid-column:span 2;}
  .g-big{grid-row:span 2;}
}

@media (max-width:860px){
  :root{--margin:24px;}
  .section{padding-block:var(--s-9);}
  .section--tight{padding-block:var(--s-8);}

  /* nav -> mobile */
  .nav__links{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; gap:2px;
    background:var(--light); padding:16px var(--margin) 24px;
    border-bottom:1px solid var(--stone-300);
    transform:translateY(-120%); transition:transform .35s var(--ease);
    box-shadow:var(--sh-2); z-index:55; margin-left:0;
  }
  .nav__links a{padding:14px 12px; border-radius:var(--r-md); font-size:1.05rem;}
  .nav-toggle:checked ~ .nav__links{transform:translateY(0);}
  .nav-toggle-label{display:flex;}
  .nav__cta{display:none;}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .grid--3{grid-template-columns:1fr;}
  .quotes{grid-template-columns:1fr;}
  .stat-band__inner{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-left:0;}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid rgba(244,241,234,.14);}
  .steps{grid-template-columns:1fr 1fr; gap:var(--s-6);}
  .steps::before{display:none;}

  .split{grid-template-columns:1fr; gap:var(--s-6);}
  .split--media-first .split__media,.split--reverse .split__media{order:-1;}
  .split__media img{aspect-ratio:16/10;}

  .hero{min-height:auto; padding-block:var(--s-8) var(--s-9);}
  .hero__chip{display:none;}

  .cta-band__inner{flex-direction:column; align-items:flex-start;}
  .cta-band .btn{width:100%; justify-content:center;}

  .section-head{margin-bottom:var(--s-7);}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:14px;}
}

@media (max-width:560px){
  .form-grid{grid-template-columns:1fr;}
  .stat-band__inner{grid-template-columns:1fr;}
  .stat{border-left:0 !important; border-top:1px solid rgba(244,241,234,.14);}
  .stat:first-child{border-top:0;}
  .steps{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr; grid-auto-rows:220px;}
  .g-big,.g-wide,.g-tall{grid-column:span 1; grid-row:span 1;}
  .btn{width:100%; justify-content:center;}
  .nav__cta{gap:10px;}
  .hero__actions .btn{width:100%;}
}

/* sticky mobile CTA bar */
.mobile-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:10px var(--margin) calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,241,234,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--stone-300);
  gap:10px;
}
.mobile-cta .btn{flex:1;}
.mobile-cta .btn--call{flex:0 0 auto;}
@media (max-width:860px){
  .mobile-cta{display:flex;}
  .site-footer{padding-bottom:calc(var(--s-8) + 64px);}
}

/* ============================ MOTION SAFETY ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .btn:hover,.card:hover,.quote:hover,.gallery__item:hover img,.svc__img img{transform:none !important;}
}

/* Choose your blend grid */
.blend-grid{margin-top:var(--s-6);}
.blend-card{border-radius:14px; overflow:hidden; background:#fff; border:1px solid #E4E2DE; box-shadow:var(--sh-1); transition:transform .3s, box-shadow .3s;}
.blend-card:hover{transform:translateY(-5px); box-shadow:var(--sh-3, 0 10px 24px rgba(27,36,32,.12));}
.blend-card img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.blend-card figcaption{padding:var(--s-4) var(--s-5);}
.blend-card figcaption strong{display:block; color:var(--charcoal); font-size:var(--fs-body); font-weight:800; letter-spacing:.01em;}
.blend-card figcaption span{color:var(--muted); font-size:var(--fs-body-s);}
@media(max-width:720px){.blend-grid.grid--3{grid-template-columns:repeat(2,1fr);}}

/* Stone video showcase */
.video-showcase{margin:var(--s-7) 0 0;}
.video-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/9; background:var(--charcoal); box-shadow:var(--sh-3);
}
.video-frame::after{ /* subtle inset edge so it reads as a framed surface */
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none;
}
.video-el{width:100%; height:100%; display:block; object-fit:cover;}
.video-cap{margin-top:var(--s-4); text-align:center; font-size:.85rem; color:var(--muted);}

/* Infographic / diagram figures (cross-section, comparison, process) */
.diagram-figure{
  margin:var(--s-7) auto 0; max-width:980px;
  background:#fff; border:1px solid #E4E2DE; border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:clamp(16px,3.4vw,36px);
}
.diagram-figure img{width:100%; height:auto; display:block;}
@media(max-width:560px){ .diagram-figure{padding:14px;} }

/* ============ SERVICE DROPDOWN NAV (epoxy + landscaping lines) ============
   Progressive enhancement: each parent <a> is a real link to its hub page,
   so the menu degrades to plain links if these rules never apply. */
.nav__links .has-sub{position:relative;}
.nav__links .has-sub > a{display:inline-flex; align-items:center; gap:6px;}
.nav__links .has-sub > a::after{
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.5; transition:transform var(--t), opacity var(--t);
}
.nav__links .sub{
  position:absolute; top:calc(100% + 8px); left:0; min-width:228px;
  background:#fff; border:1px solid var(--stone-300); border-radius:var(--r-md);
  box-shadow:var(--sh-2); padding:6px; margin:0; list-style:none;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t), transform var(--t), visibility var(--t); z-index:60;
}
.nav__links .has-sub::after{content:""; position:absolute; top:100%; left:0; right:0; height:10px;}
.nav__links .has-sub:hover > .sub,
.nav__links .has-sub:focus-within > .sub{opacity:1; visibility:visible; transform:translateY(0);}
.nav__links .has-sub:hover > a::after,
.nav__links .has-sub:focus-within > a::after{opacity:.9; transform:rotate(225deg); margin-top:3px;}
.nav__links .sub a{white-space:nowrap; font-size:.92rem; padding:9px 14px; border-radius:8px;}
@media (max-width:860px){
  .nav__links .has-sub{display:flex; flex-direction:column; align-items:stretch;}
  .nav__links .has-sub > a{justify-content:flex-start;}
  .nav__links .has-sub > a::after{display:none;}
  .nav__links .has-sub::after{display:none;}
  .nav__links .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-left:2px solid var(--stone-300);
    border-radius:0; margin:0 0 6px 14px; padding:0 0 0 6px; min-width:0; gap:0;
  }
  .nav__links .sub a{font-size:1rem; padding:11px 12px; color:var(--muted);}
}