/* ============================================================
   ECOTECTURAL HOME BUILDERS — Redesign
   Light architectural-editorial. Ink + bone + logo-yellow accent.
   ============================================================ */

:root{
  /* palette — final decisions 2026-07-01 (accent = logo yellow #D8DA00, Schibsted throughout) */
  --ink:        #181C21;                   /* headings, dark sections, footer bg */
  --ink-2:      oklch(0.255 0.007 250);    /* hover on dark */
  --ink-soft:   oklch(0.31 0.007 250);
  --bone:       #FFFFFF;                    /* BONE RETIRED for good (Daryl 2026-07-12): pure white only.
                                               Never reintroduce #F8F7F2 or any warm off-white anywhere. */
  --bone-2:     #FFFFFF;                    /* white; if a surface needs colour, use an official logo
                                               colour (#D8DA00 / #555756 / #657573 / #969796 / #FFFFFF) */
  --surface:    #FFFFFF;                    /* was faint warm off-white; one consistent pure white site-wide */
  --band:       #FFFFFF;                    /* GREY TINT RETIRED (Daryl 2026-07-12, same day it was tried):
                                               section backgrounds are WHITE only. Dark ink bands stay ink.
                                               Never fill a section with #969796 or any grey. */
  --line:       oklch(0.875 0.005 95);
  --line-soft:  oklch(0.915 0.004 95);
  --body:       #4A4F56;                   /* primary body text (soft, per brief 2026-07-02) */
  --muted:      #545959;                   /* meta, captions, dividers (grey) */
  --muted-d:    oklch(0.70 0.01 250);      /* muted on dark */
  --brand-green:#D8DA00;                   /* logo wordmark */
  --accent:     #D8DA00;                   /* UI accent — CTAs, highlights, fills, top bar. Ink text on it. FILL, never text */
  --accent-d:   #BFC100;                   /* hover / darker accent */
  --accent-deep:#181C21;                   /* was green text; UI green retired -> ink for readability */
  --sage:       #778C8A;                   /* calm secondary — tints, dividers, tags. Fill only, never small text */

  /* type — Schibsted Grotesk (headings + body) + JetBrains Mono (labels). Fraunces removed. */
  --f-disp: "Schibsted Grotesk", system-ui, sans-serif;
  --f-body: "Schibsted Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* TYPE SYSTEM v2 (2026-07-09, approved on home; site-wide law — see CLAUDE.md) */
  --fs-kicker: .875rem;                        /* 14px kickers and labels */
  --ls-kicker: .12em;                          /* ~1.7px spread at 14px */
  --fs-display: clamp(3.5rem, 7vw, 6rem);      /* home hero H1 only */
  --fs-h1: clamp(2.75rem, 4.2vw, 3.375rem);    /* the ONE big statement per page: 54px */
  --fs-h2: clamp(2.5rem, 4.1vw, 3.3125rem);    /* section titles 53px: 1px under the statement */
  --fs-lead: 1.25rem;                          /* lead text under headings 20px */
  --fs-body: 1.1875rem;                        /* body copy 19px */
  --fs-cardtitle: 1.3125rem;                   /* 21px card and step titles */
  --fs-caption: .9375rem;                      /* captions, meta, card text 15px */

  /* rhythm */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1320px;
  --sec: clamp(4.15rem, 8.3vw, 8.3rem);        /* section gap, tightened 25% site-wide (2026-07-11) */
  --radius: 4px;
  /* leaf-in-house silhouette, traced from icon.png — used to mask the photo-filled emblem */
  --eco-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276 324'%3E%3Cpath fill='%23fff' d='M144 16 L265 170 Q269 175 263 175 L237 175 Q231 175 231 181 L231 306 Q231 316 221 316 L55 316 Q45 316 45 306 L45 181 Q45 175 39 175 L13 175 Q7 175 11 170 L132 16 Q138 9 144 16 Z'/%3E%3C/svg%3E");

  /* z */
  --z-nav: 100; --z-menu: 110;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--body);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);color:var(--ink);font-weight:600;
  letter-spacing:-0.03em;line-height:1.04;text-wrap:balance}
p{margin:0}
::selection{background:var(--accent);color:var(--ink)}

/* ---- shared layout ---- */
.reveal,.reveal-line{will-change:transform,opacity}
.hl{color:var(--ink);position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:0.06em;height:0.34em;
  background:var(--accent);z-index:-1;border-radius:1px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;letter-spacing:-0.01em;
  padding:.85rem 1.5rem;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .22s cubic-bezier(.23,1,.32,1),background .3s,color .3s,border-color .3s;
  line-height:1;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1rem}
.btn--block{width:100%}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px)}

.link-arrow{font-family:var(--f-disp);font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:2px;transition:gap .3s,color .3s}
.link-arrow:hover{color:var(--accent-deep)}

/* ============================================================
   NAV
   ============================================================ */
/* Header colour states (2026-07-12): the bar is colour-ADAPTIVE — main.js tags
   every top-level band light/dark and toggles nav--on-light / nav--on-dark by
   whichever band sits under the bar's midline. Over DARK bands: dark-frosted
   bar, light treatment (white wordmark, white links, white icons). Over LIGHT
   bands: bone-frosted bar, dark treatment (colour wordmark, ink links/icons).
   Colour is independent of the condense state. Mega-menu PANELS keep their own
   solid ink surface further down so dropdown contents are always legible. */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:0 var(--pad);
  background:rgba(16,20,24,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,transform .35s ease;
  border-bottom:1px solid rgba(255,255,255,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(16,20,24,.92)}
  .nav--on-light{background:rgba(255,255,255,.97)}}
.nav--on-dark{background:rgba(16,20,24,.55);border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 1px 14px rgba(0,0,0,.22)}
.nav--on-light{background:rgba(255,255,255,.92);border-bottom-color:rgba(24,28,33,.08);
  box-shadow:0 1px 14px rgba(24,28,33,.10)}
.nav--on-light .nav__drop-trigger{color:var(--ink)}
.nav--on-light .nav__links{border-top-color:rgba(24,28,33,.12)}
.nav--on-light .btn--phone{color:var(--ink);border-color:rgba(24,28,33,.3)}
.nav--on-light .btn--phone:hover{background:var(--bone-2);border-color:rgba(24,28,33,.5)}
.nav--on-light .nav__toggle span{background:var(--ink)}
/* condense-on-scroll (main.js drives it): past the hero the bar slims to
   logo + menu button + consultation CTA and STAYS slim; hover or keyboard
   focus expands the full nav with a quick ease (instant under reduced motion
   via the global transition kill). The consultation CTA stays visible slim. */
.nav .nav__top{transition:height .28s cubic-bezier(.16,1,.3,1)}
.nav .nav__logo{transition:height .28s cubic-bezier(.16,1,.3,1)}
.nav--condensed .nav__top{height:56px}
.nav--condensed .nav__logo{height:38px}
.nav--condensed .nav__links{display:none}
/* smooth height ease on the hover expand/collapse where supported */
@supports (interpolate-size:allow-keywords){
  .nav__links{interpolate-size:allow-keywords;height:auto;overflow:clip;
    transition:height .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,
      display .28s allow-discrete,border-color .4s}
  .nav--condensed .nav__links{display:none;height:0;opacity:0}
  @starting-style{
    .nav:not(.nav--condensed) .nav__links{height:0;opacity:0}
  }
}
.nav--condensed .nav__toggle{display:flex}
.nav--condensed .btn--phone{display:none}
.nav--condensed .btn--accent{padding:.65rem 1rem;font-size:.9rem}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0}
.nav__top{display:flex;align-items:center;gap:1.5rem;height:80px}
.nav__brand{display:flex;align-items:center;margin-right:auto}
.nav__logo{height:62px;width:auto;flex:none;transition:opacity .35s}
/* wordmark follows the bar tone (2026-07-12): full-colour logo.png (ECO
   #D8DA00 + TECTURAL #555756) on the light bar; white logo-light.png on the
   dark bar. Driven purely by the on-light/on-dark state, never by condense.
   (Supersedes round 17's solid/condensed swap with the same legibility goal.) */
.nav__logo--dark{display:block}
.nav__logo--light{display:none}
.nav--on-dark .nav__logo--dark{display:none}
.nav--on-dark .nav__logo--light{display:block}
.nav__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem 1.2rem;
  min-height:52px;padding:.4rem 0;border-top:1px solid rgba(255,255,255,.1);transition:border-color .4s}
.nav__links a{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.05rem,1.35vw,1.25rem);white-space:nowrap;
  color:#fff;letter-spacing:-0.01em;position:relative;opacity:.82;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--accent);transition:right .3s cubic-bezier(.16,1,.3,1)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}
.nav__cta{display:flex;align-items:center;gap:.7rem}
.btn--phone{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);
  font-family:var(--f-mono);font-weight:500;letter-spacing:0;font-size:.9rem;gap:.55rem;padding:.8rem 1.3rem}
.btn--phone svg{width:17px;height:17px;color:var(--accent);flex:none}
.btn--phone:hover{background:var(--ink-2);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
/* (the old .nav--light white-header state was retired 2026-07-11; the bar is
   frosted at the very top of the page and solid dark everywhere else) */

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:#fff;transition:.3s}

/* mobile menu */
.mobilemenu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--ink);
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);visibility:hidden}
.mobilemenu.open{transform:translateY(0);visibility:visible}
.mobilemenu nav{display:flex;flex-direction:column;gap:.4rem}
.mobilemenu nav a{font-family:var(--f-disp);font-weight:600;font-size:2rem;color:var(--bone);
  letter-spacing:-0.03em;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobilemenu nav a:hover{color:var(--accent)}
.mobilemenu__foot{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem}
.mobilemenu__phone{font-family:var(--f-mono);color:var(--muted-d);font-size:.95rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:760px;display:flex;align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,7vw,6rem);overflow:hidden;isolation:isolate}
  /* 760px matches the interior .pagebanner heroes (uniform hero size site-wide).
     The home page sets its own hero padding-top (scoped) to clear the fixed header. */
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:120%;object-fit:cover;transform:translateY(0)}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,18,20,.55) 0%,rgba(16,18,20,.30) 34%,rgba(16,18,20,.52) 66%,rgba(14,16,18,.90) 100%)}
/* Ecotectural emblem, bottom-right of every hero image (home + all page banners):
   matches the home hero placement, overhanging the image bottom edge */
.hero::after,.pagebanner::after{content:"";position:absolute;z-index:2;pointer-events:none;
  right:clamp(1.5rem,5vw,4.5rem);bottom:0;transform:translateY(26%);
  width:clamp(84px,9vw,132px);aspect-ratio:1;opacity:1;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.3));
  background:url("assets/logo/icon.png") no-repeat center/contain}
.hero__content{max-width:var(--maxw);margin:0 auto;width:100%;position:relative}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);
  font-size:.78rem;letter-spacing:.04em;color:#fff;text-transform:uppercase;margin-bottom:1.5rem;
  background:rgba(14,16,18,.62);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.55rem 1rem;border-radius:999px}
.hero__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero__title{color:#fff;font-weight:700;letter-spacing:-0.045em;
  font-size:clamp(2.7rem,7.4vw,6rem);line-height:.98;margin-bottom:1.5rem;max-width:16ch}
.hero__title em{font-style:italic;font-weight:600;color:var(--accent)}
.hero__title .reveal-line{display:block;overflow:hidden}
.hero__sub{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:46ch;
  margin-bottom:2.2rem;line-height:1.5}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero__since{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.4rem;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.hero__since::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.brandmark-row{max-width:var(--maxw);margin:calc(clamp(66px,8vw,96px) * -1) auto 0;padding:0 var(--pad);display:flex;justify-content:flex-end;position:relative;z-index:5;pointer-events:none}
.brandmark{width:clamp(66px,8vw,96px);height:auto}
.hero__badge{position:absolute;top:clamp(6rem,12vh,9rem);right:var(--pad);width:clamp(92px,11vw,140px)}
.hero__badge img{width:100%;opacity:.96;filter:drop-shadow(0 6px 24px rgba(0,0,0,.4))}
.hero__scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px}
.hero__scroll span{position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:#fff;transform:translateX(-50%);animation:scroll 1.9s infinite}
@keyframes scroll{0%{opacity:0;top:8px}40%{opacity:1}80%{opacity:0;top:20px}100%{opacity:0}}

/* ============================================================
   LEDE / positioning
   ============================================================ */
.lede{padding:calc(var(--sec) * 0.7) var(--pad) var(--sec)}
.lede__inner{max-width:var(--maxw);margin:0 auto}
.lede__kicker,.perf__kicker,.process__kicker,.team__kicker,.lede__kicker{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.6rem}
.lede__statement{font-size:clamp(1.9rem,4.6vw,3.7rem);font-weight:600;line-height:1.06;
  max-width:18ch;margin-bottom:clamp(2rem,5vw,3.5rem)}
.lede__body{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);
  max-width:920px;margin-left:0}
.lede__body p{font-size:1.075rem;color:var(--body)}

/* ============================================================
   IMAGE BAND
   ============================================================ */
.band{padding:0 var(--pad) var(--sec)}
.band__inner{max-width:var(--maxw);margin:0 auto;border-radius:var(--radius);
  overflow:hidden;aspect-ratio:2.6/1;background:var(--bone-2)}
.band__inner img{width:100%;height:100%;object-fit:cover}
@media (max-width:680px){.band__inner{aspect-ratio:16/10}}

/* ============================================================
   APPROACH / pillars
   ============================================================ */
.approach{padding:0 var(--pad) var(--sec)}
.approach__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gut);align-items:end}
.approach__head h2{font-size:clamp(1.8rem,3.8vw,3rem)}
.approach__head p{color:var(--muted);font-size:1.075rem;max-width:42ch}
.pillars{max-width:var(--maxw);margin:0 auto;list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.pillar{padding:clamp(1.8rem,3vw,2.8rem) 0;border-bottom:1px solid var(--line);
  padding-right:clamp(1rem,4vw,4rem);position:relative}
.pillar:nth-child(odd){padding-right:clamp(2rem,6vw,5rem)}
.pillar:nth-child(even){padding-left:clamp(2rem,5vw,4rem);border-left:1px solid var(--line)}
.pillar h3{font-size:1.45rem;margin-bottom:.7rem;display:flex;align-items:baseline;gap:.7rem}
.pillar h3::before{content:"";width:9px;height:9px;background:var(--accent);
  border-radius:50%;flex:none;transform:translateY(-2px)}
.pillar p{color:var(--muted);max-width:40ch}

/* ============================================================
   PERFORMANCE dark band
   ============================================================ */
.perf{background:var(--ink);color:var(--bone);display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;overflow:hidden}
.perf__media{overflow:hidden;min-height:460px}
.perf__media img{width:100%;height:100%;object-fit:cover}
.perf__panel{padding:clamp(3rem,7vw,7rem) clamp(1.5rem,5vw,5.5rem)}
.perf__panel h2{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:1.3rem;max-width:16ch}
.perf__kicker{color:var(--accent)}
.perf__lead{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:46ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0;
  border-top:1px solid rgba(255,255,255,.14)}
.stat{padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.stat:nth-child(even){padding-left:clamp(1.5rem,3vw,2.5rem);border-left:1px solid rgba(255,255,255,.14)}
.stat dt{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted-d);margin-bottom:.5rem}
.stat dd{margin:0;font-family:var(--f-disp);font-weight:700;font-size:clamp(2rem,4vw,2.9rem);
  color:#fff;letter-spacing:-0.03em;line-height:1}
.stat__sm{font-size:clamp(1.1rem,2vw,1.4rem)!important;font-weight:600!important;color:var(--accent)!important}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:#778C8A;color:#FFFFFF;overflow:hidden} /* soft sage tint (was brand yellow #D8DA00) */
.marquee__track{display:flex;width:max-content;animation:marq 45s linear infinite}
.marquee__group{display:flex;align-items:center;gap:1.5rem;flex:none;
  padding:12px 1.5rem 12px 0;
  font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.marquee__group i{color:#181C21;opacity:1;font-style:normal}
@media (hover:hover){.marquee:hover .marquee__track{animation-play-state:paused}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   WORK / gallery
   ============================================================ */
.work{padding:var(--sec) var(--pad)}
.work__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gut);align-items:end}
.work__head h2{font-size:clamp(1.9rem,4vw,3.2rem);max-width:16ch}
.work__head p{color:var(--muted);max-width:44ch}
.grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:200px;gap:clamp(.6rem,1vw,1rem)}
.grid__item{position:relative;overflow:hidden;border-radius:var(--radius);margin:0;
  grid-column:span 2;grid-row:span 2;background:var(--bone-2)}
.grid__item--xl{grid-column:span 4;grid-row:span 3}
.grid__item--tall{grid-column:span 2;grid-row:span 3}
.grid__item--wide{grid-column:span 4;grid-row:span 2}
.grid__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.grid__item:hover img{transform:scale(1.05)}
.grid__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.4rem 1.2rem;
  display:flex;flex-direction:column;gap:.15rem;color:#fff;
  background:linear-gradient(0deg,rgba(18,20,22,.78),transparent);
  transform:translateY(8px);opacity:0;transition:.45s cubic-bezier(.16,1,.3,1)}
.grid__item:hover figcaption{transform:translateY(0);opacity:1}
.grid__item figcaption span{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent)}
.grid__item figcaption b{font-family:var(--f-disp);font-weight:600;font-size:1.1rem}

/* ============================================================
   GRAND DESIGNS
   ============================================================ */
.gd{padding:var(--sec) var(--pad);background:var(--band);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gd__head{max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gut);align-items:end}
.gd__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1rem}
.gd__head h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.gd__lead{color:var(--muted);font-size:1.075rem;max-width:40ch}
.gd__video{position:relative;max-width:var(--maxw);margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.22)}
.gd__video iframe{width:100%;height:100%;border:0;display:block}
.gd__video video{width:100%;height:100%;border:0;display:block;object-fit:cover;background:var(--ink)}
/* our emblem, masking the video's own bottom-right watermark */
.gd__watermark{position:absolute;right:1.4%;bottom:11%;width:clamp(42px,6%,72px);height:auto;
  pointer-events:none;z-index:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
/* larger emblem on the self-hosted film, sized to cover the delogo patch bottom-right */
.gd__watermark--film{right:.8%;bottom:11.5%;width:clamp(96px,15%,200px)}

/* ============================================================
   PROCESS
   ============================================================ */
.process{padding:var(--sec) var(--pad);background:var(--band);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process__intro{max-width:var(--maxw);margin:0 auto clamp(2.8rem,5vw,4.5rem);max-width:760px}
.process__intro h2{font-size:clamp(1.9rem,4vw,3.2rem);margin-bottom:1.3rem;max-width:18ch}
.process__intro p:not(.process__kicker){color:var(--muted);font-size:1.1rem}
.steps{max-width:var(--maxw);margin:0 auto;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--line);padding:clamp(1.8rem,3vw,2.6rem) 0 0}
.step{position:relative}
.step__no{font-family:var(--f-disp);font-weight:700;font-size:2rem;color:var(--accent-deep);
  display:block;margin-bottom:1rem;letter-spacing:-0.03em;line-height:1}
.step h3{font-size:1.3rem;margin-bottom:.6rem}
.step p{color:var(--muted);font-size:.98rem}

/* ============================================================
   TEAM
   ============================================================ */
.team{padding:var(--sec) var(--pad);max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.team__portrait{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bone-2);
  aspect-ratio:auto} /* frame follows the image: Daryl's custom on-site crop (2026-07-09) */
.team__portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.team__body h2{font-size:clamp(1.8rem,3.6vw,2.9rem);margin-bottom:2.5rem;max-width:18ch}
.team__person{padding:1.6rem 0;border-top:1px solid var(--line)}
.team__person:last-child{border-bottom:1px solid var(--line)}
.team__person h3{font-size:1.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;margin-bottom:.6rem}
.team__person h3 span{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent-deep);font-weight:400}
.team__person p{color:var(--muted);max-width:52ch}
.team__person p+p{margin-top:1rem}

/* ============================================================
   MATERIALS
   ============================================================ */
.materials{padding:var(--sec) var(--pad)}
.materials__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,4vw,3.5rem);max-width:680px}
.materials__head h2{font-size:clamp(1.8rem,3.8vw,3rem);margin-bottom:1.2rem;max-width:16ch}
.materials__head p{color:var(--muted);font-size:1.075rem}
.materials__grid{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.material{display:flex;flex-direction:column}
.material__img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin-bottom:1.1rem;background:var(--bone-2)}
.material__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.material:hover .material__img img{transform:scale(1.05)}
.material h3{font-size:1.25rem;margin-bottom:.4rem}
.material p{color:var(--muted);font-size:.96rem}
.material__list{background:var(--ink);color:var(--bone);border-radius:var(--radius);
  padding:clamp(1.6rem,2.5vw,2.1rem);display:flex;flex-direction:column}
.material__list h3{color:#fff;font-size:1.25rem;margin-bottom:1.1rem}
.material__list ul{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:.7rem}
.material__list li{color:var(--muted-d);font-size:.98rem;padding-left:1.3rem;position:relative}
.material__list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  background:var(--accent);border-radius:50%}
.material__list .link-arrow{color:#fff;margin-top:1.4rem;align-self:flex-start}

/* ============================================================
   MEDIA FIGURES — in-body content imagery
   ============================================================ */
/* figures sit between sections; neighbours usually own a var(--sec) top/bottom,
   so pad only the side a neighbour does not already cover (avoids doubled gaps). */
.figband{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.figband--padt,.figrow--padt{padding-top:var(--sec)}
.figband--padb,.figrow--padb{padding-bottom:var(--sec)}
.figband__frame{border-radius:var(--radius);overflow:hidden;background:var(--bone-2);aspect-ratio:16/7}
.figband__frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.figband:hover .figband__frame img{transform:scale(1.04)}
.figband figcaption,.figrow figcaption{font-family:var(--f-mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:.85rem}

.figrow{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.5rem)}
.figrow figure{margin:0}
.figrow__frame{border-radius:var(--radius);overflow:hidden;background:var(--bone-2);aspect-ratio:4/3}
.figrow__frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.figrow figure:hover .figrow__frame img{transform:scale(1.05)}

/* ============================================================
   PROOF / certifications
   ============================================================ */
.proof{padding:var(--sec) var(--pad);text-align:center;background:var(--band);
  border-top:1px solid var(--line)}
.proof h2{font-size:clamp(1.7rem,3.4vw,2.6rem);max-width:18ch;margin:0 auto .9rem}
.proof__sub{color:var(--muted);max-width:54ch;margin:0 auto clamp(2.5rem,4vw,3.5rem)}
.logos{max-width:1000px;margin:0 auto;list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
.logos li{display:flex;align-items:center;justify-content:center}
.logos img{max-height:62px;width:auto;opacity:1;filter:none;
  transition:transform .35s}
.logos li:hover img{transform:translateY(-2px)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;padding:var(--sec) var(--pad);overflow:hidden;isolation:isolate;color:var(--bone)}
.contact__media{position:absolute;inset:0;z-index:-2}
.contact__media img{width:100%;height:112%;object-fit:cover}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,20,22,.9),rgba(18,20,22,.72))}
.contact__inner{max-width:var(--maxw);margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.contact__inner h2{color:#fff;font-size:clamp(2rem,4.6vw,3.6rem);max-width:18ch;margin-bottom:1.2rem}
.contact__inner>p{color:rgba(255,255,255,.84);max-width:50ch;font-size:1.1rem;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.contact__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;
  max-width:880px;margin-bottom:clamp(2.2rem,4vw,3rem)}
.ccard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;
  text-align:left;backdrop-filter:blur(6px);transition:background .3s,transform .3s,border-color .3s}
.ccard:not(.ccard--plain):hover{background:rgba(255,255,255,.12);transform:translateY(-3px);border-color:var(--accent)}
.ccard__role{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-d)}
.ccard__val{font-family:var(--f-disp);font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:-0.02em}
.ccard__val--sm{font-size:1.1rem;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--bone);padding:clamp(3.5rem,6vw,6rem) var(--pad) 2rem}
.foot__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:var(--gut)}
.foot__brand img{height:68px;margin-bottom:1.5rem;width:auto;flex:none}
.foot__brand p{color:var(--muted-d);max-width:38ch;font-size:1.08rem}
.foot__col{display:flex;flex-direction:column;gap:.7rem}
.foot__col h4{font-family:var(--f-mono);font-size:.84rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent);font-weight:500;margin-bottom:.5rem}
.foot__col a,.foot__col span{color:var(--muted-d);font-size:1.08rem;transition:color .25s}
.foot__col a:hover{color:#fff}
.foot__base{max-width:var(--maxw);margin:clamp(3rem,5vw,4.5rem) auto 0;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.88rem;color:var(--muted-d)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  /* condensed mobile bar keeps the consultation CTA visible beside the burger */
  .nav--condensed .nav__cta{display:flex}
  .nav--condensed .btn--phone{display:none}
  .lede__body{grid-template-columns:1fr;gap:1.2rem;max-width:60ch}
  .approach__head,.work__head,.gd__head{grid-template-columns:1fr;gap:1.2rem;align-items:start}
  .perf{grid-template-columns:1fr}
  .perf__media{min-height:50vh;order:-1}
  .steps{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}
  .materials__grid{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:1fr;gap:2rem}
  .team__portrait{max-width:420px;aspect-ratio:4/5}
  .logos{grid-template-columns:repeat(4,1fr);gap:2rem 2.5rem}
  .foot__inner{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:680px){
  body{font-size:1rem}
  .hero{align-items:flex-end;padding-bottom:6rem}
  .hero__badge{width:80px;top:5.5rem}
  .hero__title{font-size:clamp(2.4rem,11vw,3.4rem)}
  .hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .hero__actions .btn{width:100%}
  .hero__since{margin:0 0 1.1rem;justify-content:flex-start}
  .hero__scroll{display:none}
  .pillars{grid-template-columns:1fr}
  .pillar:nth-child(even){padding-left:0;border-left:0}
  .pillar:nth-child(odd){padding-right:0}
  .stats{grid-template-columns:1fr}
  .stat:nth-child(even){padding-left:0;border-left:0}
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .grid__item,.grid__item--xl,.grid__item--tall,.grid__item--wide{grid-column:span 2;grid-row:span 2}
  .grid__item figcaption{opacity:1;transform:none}
  .figrow{grid-template-columns:1fr}
  .figband__frame{aspect-ratio:4/3}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  .materials__grid{grid-template-columns:1fr}
  .contact__cards{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .foot__inner{grid-template-columns:1fr}
  .foot__base{flex-direction:column;gap:.4rem}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-line{opacity:1!important;transform:none!important}
  .marquee__track{animation:none;transform:none}
}

/* ============================================================
   MULTI-PAGE ADDITIONS (2026-06-08)
   ============================================================ */

/* ---- nav: active state + Moore-style mega-menu panels ---- */
.nav__links a[aria-current]{opacity:1;font-weight:700}
.nav__links a[aria-current]::after{right:0}
.nav__drop{display:flex;align-items:center}
.nav__drop-trigger{display:inline-flex;align-items:center;gap:.3rem}
.nav__caret{width:14px;height:14px;opacity:.7;transition:transform .3s}
.nav__drop.open .nav__caret{transform:rotate(180deg)}

/* full-width panel dropping below the header; opened via .open (JS: hover + focus).
   Frosted dark glass: ink at 88% with backdrop blur, an extension of the dark header. */
.nav__panel{position:absolute;top:100%;left:0;right:0;z-index:var(--z-nav);
  background:rgba(24,28,33,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12);border-radius:0 0 4px 4px;
  box-shadow:0 30px 60px rgba(10,12,14,.35);
  opacity:0;visibility:hidden;transform:translateY(6px);
  /* closing: fast, so the panel disappears the moment you move off it */
  transition:opacity .1s ease,transform .1s ease,visibility 0s linear .1s}
/* readability first: browsers without backdrop-filter get a near-solid panel */
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .nav__panel{background:rgba(24,28,33,.98)}
}
.nav__drop.open .nav__panel{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .16s ease,transform .16s ease,visibility 0s;transition-delay:0s}
/* brand-green accent line along the top edge of the open panel */
.nav__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);opacity:0;transition:opacity .16s}
.nav__drop.open .nav__panel::before{opacity:1}
/* cap the panel on small laptops: gentle internal scroll, never off-screen */
.nav__panel{max-height:calc(100dvh - 150px);overflow-y:auto}

/* uniform internal grid: spotlight column + link columns, same in every panel */
.nav__panel-inner{max-width:var(--maxw);margin:0 auto;
  padding:clamp(1.8rem,2.6vw,2.6rem) var(--pad);
  display:grid;grid-template-columns:minmax(280px,340px) 1fr;
  gap:clamp(1.8rem,3vw,3.2rem);align-items:start;
  min-height:456px} /* uniform: sized to the tallest panel so the layout never jumps */

/* panel links reset the top-bar link treatment (animated underline) to light-on-glass text */
.nav__links .nav__panel a{color:#fff;opacity:1;white-space:normal;font-size:1.0625rem}
.nav__links .nav__panel a::after{display:none}

/* spotlight: the featured image, teaser and CTA that anchor every panel */
.nav__spot{display:flex;flex-direction:column;gap:.65rem}
.nav__spot-media{display:block;aspect-ratio:3/2;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.nav__spot-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.nav__spot:hover .nav__spot-media img{transform:scale(1.04)}
.nav__spot b{font-weight:600;color:#fff;line-height:1.3;font-size:1.125rem}
.nav__spot-teaser{font-family:var(--f-mono);font-size:.78rem;color:rgba(255,255,255,.68);line-height:1.45}
.nav__cta-btn{display:inline-flex;align-self:flex-start;margin-top:.2rem;
  background:var(--accent);color:var(--ink);
  font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;
  padding:.55rem .9rem;border-radius:4px;transition:filter .2s}
.nav__spot:hover .nav__cta-btn{filter:brightness(1.06)}

/* right side: mono kicker, one-line intro, then grouped link columns */
.nav__cols{display:flex;flex-direction:column;min-width:0}
.nav__panel-kicker{font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.55rem}
.nav__intro{color:rgba(255,255,255,.85);font-size:1.0625rem;line-height:1.5;
  padding-bottom:1.1rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.nav__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.5rem clamp(1.4rem,2.2vw,2.4rem)}
.nav__group{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.nav__group-h{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 .8rem .5rem;font-weight:500}
.nav__group a{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .8rem;border-radius:4px;
  transition:background .2s}
.nav__group a b{font-weight:600;color:#fff;line-height:1.3;display:inline-flex;align-items:baseline;gap:.45rem}
/* hover affordance: a small arrow slides in beside the link title */
.nav__group a b::after{content:"\2192";font-family:var(--f-mono);font-size:.85em;color:var(--accent);
  opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.nav__group a:hover b::after,.nav__group a:focus-visible b::after{opacity:1;transform:translateX(0)}
.nav__group a span{font-family:var(--f-mono);font-size:.78rem;color:rgba(255,255,255,.68);line-height:1.45}
.nav__group a:hover{background:rgba(255,255,255,.08)}
.nav__group a:hover b{color:var(--accent)}
.nav__group a:hover span{color:rgba(255,255,255,.8)}
/* the primary link in each panel: bolder, arrow always showing */
.nav__group a.nav__primary b{font-weight:700}
.nav__group a.nav__primary b::after{opacity:1;transform:none}
/* the current page's own link inside a panel: "you are here" */
.nav__panel a.is-current{background:rgba(255,255,255,.06)}
.nav__panel a.is-current b{color:var(--accent);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:2px}
.nav__panel a.is-current b::after{content:"\2022";opacity:1;transform:none;font-size:1em}
.nav__panel a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* faint dim of the page while a panel is open (visual only, never blocks clicks) */
.nav__dim{position:absolute;top:100%;left:0;width:100vw;height:100vh;pointer-events:none;
  background:rgba(10,12,14,0);transition:background .16s}
.nav.mega-open .nav__dim{background:rgba(10,12,14,.3)}
@media (prefers-reduced-motion:reduce){
  .nav__panel,.nav__panel::before,.nav__dim,.nav__group a b::after{transition:none}
}

/* mobile menu: expandable sections (accordion) */
.mobilemenu{overflow-y:auto}
.mobilemenu__group{display:flex;flex-direction:column}
.mobilemenu__row{display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.mobilemenu__row a{flex:1;border-bottom:0!important}
.mobilemenu__acc{background:none;border:0;cursor:pointer;color:var(--bone);padding:.6rem .4rem;flex:none}
.mobilemenu__acc svg{width:24px;height:24px;display:block;transition:transform .3s}
.mobilemenu__acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobilemenu__sub{display:none;flex-direction:column;gap:.1rem;padding:.2rem 0 .6rem 1rem;
  margin-bottom:.2rem;border-left:2px solid rgba(255,255,255,.15);margin-left:.2rem}
.mobilemenu__group.open .mobilemenu__sub{display:flex}
.mobilemenu__sub a{font-size:1.15rem!important;font-weight:500!important;color:var(--muted-d)!important;
  border-bottom:0!important;padding:.35rem 0!important}
.mobilemenu__sub a:hover{color:var(--accent)!important}

/* ---- page banner (interior hero) ----
   ONE shared hero for every interior page. The content box (.pagebanner__inner)
   has a FIXED min-height with vertically centred content, so short and long
   headings produce EXACTLY the same hero height on every page. Only the home
   page hero (.hero) has its own treatment. Do not reintroduce per-page hero
   heights or the retired .pagebanner--sm variant. */
.pagebanner{position:relative;display:flex;align-items:center;isolation:isolate;
  min-height:760px;padding:8.5rem var(--pad) 2.6rem;background:var(--ink)}
  /* 760px on every hero (incl. home, so all match): with the open mega-menu
     dropping ~525px from the top, a generous ~235px band of the photo stays
     visible below the open panel. Mobile (<700px) drops to 62vh. */
/* overflow stays visible so the emblem can hang below the banner edge (photo layer is inset:0) */
.pagebanner::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--pb-img) center/cover no-repeat}
.pagebanner__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,18,20,.55) 0%,rgba(16,18,20,.32) 40%,rgba(14,16,18,.86) 100%)}
.pagebanner__inner{max-width:var(--maxw);margin:0 auto;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.breadcrumb{display:flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.76rem;
  letter-spacing:.03em;color:rgba(255,255,255,.78);text-transform:uppercase;margin-bottom:1rem}
.breadcrumb a{color:rgba(255,255,255,.78);transition:color .25s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb i{opacity:.5;font-style:normal}
.breadcrumb b{color:#fff;font-weight:500}
.pagebanner__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem}
.pagebanner__title{color:#fff;font-weight:700;letter-spacing:-0.04em;
  font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1;margin-bottom:1.2rem;
  max-width:30ch;text-wrap:balance} /* wraps to two balanced lines at most */
.pagebanner__sub{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.7vw,1.25rem);max-width:60ch;line-height:1.55}

/* ---- prose / intro section ---- */
.prose{padding:var(--sec) var(--pad)}
.prose__inner{max-width:var(--maxw);margin:0 auto}
.prose__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.5rem}
.prose__lead{font-size:clamp(1.6rem,3.4vw,2.7rem);font-weight:600;line-height:1.12;max-width:24ch;
  margin-bottom:clamp(2rem,4vw,3rem)}
.prose__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut);max-width:980px}
.prose__cols p{font-size:1.075rem;color:var(--body)}

/* ---- features grid (why-choose / collaboration) ---- */
.features{padding:0 var(--pad) var(--sec)}
.features__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,4vw,3.5rem);max-width:760px}
.features__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.2rem}
.features__head h2{font-size:clamp(1.8rem,3.8vw,3rem);max-width:20ch}
.feature-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-top:1px solid var(--line)}
.feature{padding:clamp(1.8rem,2.6vw,2.4rem) clamp(1.4rem,2vw,2rem) clamp(1.8rem,2.6vw,2.4rem) 0;
  border-bottom:1px solid var(--line)}
.feature:not(:nth-child(3n+1)){padding-left:clamp(1.4rem,2vw,2rem);border-left:1px solid var(--line)}
.feature__no{font-family:var(--f-mono);font-size:.82rem;color:var(--accent-deep);display:block;margin-bottom:.8rem}
.feature h3{font-size:1.3rem;margin-bottom:.6rem;display:flex;align-items:baseline;gap:.6rem}
.feature h3::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;flex:none}
.feature p{color:var(--muted);font-size:.99rem}

/* ---- leader card (Michael) ---- */
.leader-card{padding:0 var(--pad) var(--sec)}
.leader-card__inner{max-width:var(--maxw);margin:0 auto;background:var(--band);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(2rem,4vw,3.5rem)}
.leader-card__role{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent-deep);margin-bottom:1rem}
.leader-card__inner h3{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:1.2rem;max-width:24ch}
.leader-card__inner p{color:var(--muted);max-width:70ch;margin-bottom:1rem}
.leader-card__inner p:last-child{margin-bottom:0}

/* ---- statement band ---- */
.statement{padding:var(--sec) var(--pad);background:var(--ink);color:var(--bone)}
.statement__inner{max-width:var(--maxw);margin:0 auto;max-width:1000px}
.statement__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.3rem}
.statement__inner h2{color:#fff;font-size:clamp(1.9rem,4vw,3.2rem);margin-bottom:1.6rem;max-width:22ch}
.statement__inner p:not(.statement__kicker){color:rgba(255,255,255,.82);font-size:1.1rem;max-width:68ch}

/* ---- cta band ---- */
.cta-band{padding:var(--sec) var(--pad);background:var(--band);border-top:1px solid var(--line);text-align:center}
/* photo-backed final CTA: site-wide variant of the home page treatment */
.cta-band--photo{position:relative;isolation:isolate;overflow:hidden;border-top:0;
  padding:clamp(5rem,10vw,8rem) var(--pad)}
.cta-band--photo .cta-band__media{position:absolute;inset:0;z-index:-2}
.cta-band--photo .cta-band__media img{width:100%;height:100%;object-fit:cover}
.cta-band--photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,20,24,.86) 0%,rgba(16,20,24,.55) 45%,rgba(16,20,24,.8) 100%)}
.cta-band--photo .cta-band__inner h2{color:#fff}
.cta-band--photo .cta-band__inner p{color:rgba(255,255,255,.92)}
.cta-band__inner{max-width:760px;margin:0 auto}
.cta-band__inner h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.1rem;max-width:20ch;margin-inline:auto}
.cta-band__inner p{color:var(--muted);font-size:1.1rem;margin-bottom:2rem;max-width:48ch;margin-inline:auto}

/* ---- home work/process trailing links ---- */
.work__more,.process__more{max-width:var(--maxw);margin:clamp(2rem,3vw,3rem) auto 0;display:flex}
.process__more{justify-content:flex-start}

/* ---- testimonials ---- */
.testimonials{padding:var(--sec) var(--pad);background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonials__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,4vw,3.5rem);max-width:680px}
.t__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.1rem}
.testimonials__head h2{font-size:clamp(1.8rem,3.8vw,3rem)}
.tcards{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tcards--all{grid-template-columns:repeat(3,1fr)}
.tcard{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1rem}
.tcard__stars{color:var(--accent-deep);font-size:1rem;letter-spacing:.1em}
.tcard blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--body);
  white-space:pre-line} /* preserves the paragraph break in two-part reviews */
/* long reviews clamp to seven lines; main.js adds a Keep reading toggle when needed */
.tcard blockquote.is-clamped{display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;
  -webkit-box-orient:vertical;overflow:hidden}
.tcard__more-btn{align-self:flex-start;background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep)}
.tcard__more-btn:hover{text-decoration:underline}
.tcard__more-btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.tcard figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.tcard figcaption b{font-family:var(--f-disp);font-weight:600;color:var(--ink);font-size:1rem}
.tcard figcaption span{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* ---- projects: consult bar + gallery ---- */
.consultbar{padding:0 var(--pad);margin-top:calc(var(--sec) * -0.35)}
.consultbar__inner{max-width:var(--maxw);margin:0 auto;background:var(--ink);color:var(--bone);
  border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3.5vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  box-shadow:0 24px 60px rgba(0,0,0,.18)}
.consultbar__inner h2{color:#fff;font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:.4rem}
.consultbar__inner p{color:var(--muted-d);font-size:1rem}
.gallery-sec{padding:var(--sec) var(--pad)}
.gallery-sec .grid{cursor:zoom-in}
.gallery-sec .grid__item img{cursor:zoom-in}
.gallery-note{max-width:var(--maxw);margin:clamp(2rem,3vw,3rem) auto 0;color:var(--muted);max-width:70ch;font-size:1rem}
.gallery-note a{color:var(--accent-deep);border-bottom:1px solid var(--accent)}

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,13,15,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.97);transition:transform .3s}
.lightbox.open .lightbox__img{transform:scale(1)}
.lightbox__close{position:absolute;top:1.2rem;right:1.4rem;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.8rem;
  line-height:1;cursor:pointer;transition:background .25s}
.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:2rem;
  line-height:1;cursor:pointer;transition:background .25s;display:flex;align-items:center;justify-content:center}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lightbox__nav--next{right:clamp(.5rem,2vw,2rem)}

/* ---- products: category cards ---- */
.product-cats-sec{padding:0 var(--pad) var(--sec)}
.product-cats{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem)}
.pcat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.pcat:not(.pcat--cta):hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(0,0,0,.12);border-color:var(--accent)}
.pcat__img{aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.pcat__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.pcat:hover .pcat__img img{transform:scale(1.05)}
.pcat__body{padding:clamp(1.4rem,2vw,1.8rem);display:flex;flex-direction:column;flex:1}
.pcat__no{font-family:var(--f-mono);font-size:.8rem;color:var(--accent-deep);margin-bottom:.6rem}
.pcat__body h3{font-size:1.4rem;margin-bottom:.5rem}
.pcat__body p{color:var(--muted);font-size:.98rem;margin-bottom:1.1rem}
.pcat__link{margin-top:auto;font-family:var(--f-disp);font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:2px;align-self:flex-start;transition:color .3s}
.pcat:hover .pcat__link{color:var(--accent-deep)}
.pcat--cta{background:var(--ink);color:var(--bone);justify-content:center}
.pcat--cta h3{color:#fff;font-size:1.4rem;margin-bottom:.6rem}
.pcat--cta p{color:var(--muted-d);margin-bottom:1.2rem}
.pcat--cta .link-arrow{color:#fff;align-self:flex-start}

/* ---- product detail: supplier cards ---- */
.product-detail{padding:var(--sec) var(--pad)}
.product-detail__head{max-width:var(--maxw);margin:0 auto clamp(2.2rem,4vw,3rem)}
.pd__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1rem}
.product-detail__head h2{font-size:clamp(1.8rem,3.8vw,2.8rem)}
.suppliers{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem)}
.supplier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.supplier:hover{border-color:var(--accent);transform:translateY(-3px)}
.supplier__img{aspect-ratio:16/10;overflow:hidden;background:var(--bone-2)}
.supplier__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.supplier:hover .supplier__img img{transform:scale(1.05)}
.supplier__body{padding:clamp(1.5rem,2.5vw,2.1rem)}
.supplier h3{font-size:1.25rem;margin-bottom:.7rem;line-height:1.25}
.supplier h3 a{color:var(--accent-deep);border-bottom:2px solid var(--accent)}
.supplier h3 a:hover{color:var(--ink)}
.supplier p{color:var(--muted);font-size:1rem}
/* images + back-link sit inside .product-detail, aligned to the same maxw column */
.product-detail .figrow{padding-left:0;padding-right:0;margin-top:clamp(2.2rem,4vw,3.2rem)}
.product-detail__foot{max-width:var(--maxw);margin:clamp(2rem,3.5vw,3rem) auto 0}
.product-detail__foot .link-arrow{display:inline-flex}

/* ---- design&build: guarantees ---- */
.guarantees{padding:var(--sec) var(--pad);background:var(--band);border-top:1px solid var(--line)}
.guarantees__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center}
.guarantees__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1.2rem}
.guarantees__copy h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:1.2rem;max-width:18ch}
.guarantees__copy p:not(.guarantees__kicker){color:var(--muted);font-size:1.075rem;max-width:52ch}
.guarantees__badges{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5rem;align-items:center}
.guarantees__badges img{max-height:80px;width:auto;margin:0 auto}

/* ---- contact page ---- */
.contactpage{padding:var(--sec) var(--pad)}
.contactpage__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contactpage__details{display:flex;flex-direction:column;gap:1.6rem}
.cdetail{display:flex;flex-direction:column;gap:.35rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
.cdetail:last-child{border-bottom:0}
.cdetail__label{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cdetail__val{font-family:var(--f-disp);font-weight:700;font-size:1.5rem;color:var(--ink);letter-spacing:-0.02em}
.cdetail__val--sm{font-size:1.1rem;font-weight:600;line-height:1.4}
a.cdetail__val:hover{color:var(--accent-deep)}
.cdetail__sub{color:var(--accent-deep);font-family:var(--f-mono);font-size:.9rem}
.cdetail--cal{padding-top:.4rem}
.cdetail--cal .btn{align-self:flex-start;margin-top:.6rem}
.contactpage__form{background:var(--band);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.8rem,3.5vw,3rem)}
.contactpage__form h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.6rem}
.form{display:flex;flex-direction:column;gap:1.1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form__field{display:flex;flex-direction:column;gap:.45rem}
.form__field>span{font-family:var(--f-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.form__field em{color:var(--accent-deep);font-style:normal}
.form input,.form textarea{font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;width:100%;transition:border-color .25s,box-shadow .25s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgb(216 218 0 / 0.25)}
.form textarea{resize:vertical;min-height:120px}
.form__note{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.form__msg{font-size:.95rem;padding:.85rem 1rem;border-radius:var(--radius);font-weight:500}
.form__msg--ok{background:rgb(216 218 0 / 0.18);color:var(--accent-deep);border:1px solid var(--accent)}
.form__msg--warn{background:oklch(0.7 0.13 40 / .12);color:oklch(0.5 0.13 40);border:1px solid oklch(0.7 0.13 40 / .4)}

/* ---- map ---- */
.mapsec{height:clamp(320px,42vw,520px);background:var(--bone-2)}
.mapsec__frame{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) contrast(1.05)}

/* ---- responsive: multi-page ---- */
@media (max-width:1024px){
  .nav__panel{display:none}
  .prose__cols{grid-template-columns:1fr;gap:1.2rem;max-width:62ch}
  .feature-grid{grid-template-columns:1fr 1fr}
  .feature:nth-child(3n+1){padding-left:clamp(1.4rem,2vw,2rem);border-left:1px solid var(--line)}
  .feature:nth-child(odd){padding-left:0;border-left:0}
  .feature:nth-child(even){padding-left:clamp(1.4rem,2vw,2rem);border-left:1px solid var(--line)}
  .tcards,.tcards--all{grid-template-columns:1fr 1fr}
  .product-cats{grid-template-columns:1fr 1fr}
  .guarantees__inner{grid-template-columns:1fr;gap:2rem}
  .contactpage__inner{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:680px){
  .pagebanner{padding-top:7rem}
  .prose__cols{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .feature,.feature:nth-child(even),.feature:nth-child(3n+1){padding-left:0;border-left:0}
  .tcards,.tcards--all{grid-template-columns:1fr}
  .product-cats{grid-template-columns:1fr}
  .suppliers{grid-template-columns:1fr}
  .guarantees__badges{grid-template-columns:repeat(2,1fr)}
  .consultbar__inner{flex-direction:column;align-items:flex-start}
  .form__row{grid-template-columns:1fr}
  .lightbox__nav{width:44px;height:44px;font-size:1.6rem}
}

/* ============================================================
   PASSIVE HOUSE PAGE — added components (luxury contrast bands)
   .metrics  = dark stats band · .prose--ink = dark straight-talk
   .features--alt / .feature-grid--3 = 3-up benefits on bone
   ============================================================ */
.features--alt{background:var(--band);padding-top:var(--sec)}
.feature-grid--3{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}

/* dark performance metrics band */
.metrics{padding:var(--sec) var(--pad);background:var(--ink);color:var(--bone)}
.metrics__inner{max-width:var(--maxw);margin:0 auto}
.metrics__head{max-width:820px;margin:0 0 clamp(2.4rem,5vw,3.8rem)}
.metrics__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem}
.metrics__head h2{color:var(--bone);font-size:clamp(1.7rem,1.1rem+2vw,2.5rem);line-height:1.16;letter-spacing:-.01em}
.metrics__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid rgba(255,255,255,.14)}
/* generous, symmetric air between each divider and the column text
   (Daryl 2026-07-12); outer columns stay flush with the container edges */
.metric{padding:clamp(1.8rem,2.6vw,2.4rem) clamp(1.8rem,3vw,3rem) 0 clamp(1.8rem,3vw,3rem);
  border-right:1px solid rgba(255,255,255,.14)}
.metric:first-child{padding-left:0}
.metric:last-child{border-right:0;padding-right:0}
.metric__fig{display:block;font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.1rem,1.4rem+2.6vw,3.4rem);color:var(--accent);margin-bottom:.85rem}
.metric__label{display:block;color:var(--muted-d);font-size:.97rem;line-height:1.5}
.metrics__note{margin-top:clamp(1.8rem,3vw,2.6rem);color:var(--muted-d);font-size:.85rem;max-width:680px}
@media(max-width:860px){.metrics__grid{grid-template-columns:repeat(2,1fr)}
  .metric{border-bottom:1px solid rgba(255,255,255,.14)}
  .metric:nth-child(odd){padding-left:0}
  .metric:nth-child(2n){border-right:0;padding-right:0}}
@media(max-width:520px){.metrics__grid{grid-template-columns:1fr}
  .metric{border-right:0;padding-left:0;padding-right:0}}

/* dark "straight talk" prose variant */
.prose--ink{background:var(--ink);color:var(--bone)}
.prose--ink .prose__kicker{color:var(--ink)}
.prose--ink .prose__lead{color:var(--bone)}
.prose--ink .prose__cols p{color:var(--muted-d)}

/* ============================================================
   PRICING — rate card
   ============================================================ */
.rates{padding:0 var(--pad) var(--sec)}
.rates__inner{max-width:920px;margin:0 auto}
.rates__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:1.1rem}
.rates h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:1rem}
.rates__note{color:var(--muted);max-width:62ch;margin-bottom:2rem}
.ratecard{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:2.5rem}
.ratecard th{background:var(--ink);color:var(--bone);text-align:left;font-family:var(--f-mono);font-weight:500;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;padding:.95rem 1.2rem}
.ratecard td{padding:.95rem 1.2rem;border-bottom:1px solid var(--line);font-size:1.05rem}
.ratecard td:last-child{font-family:var(--f-mono);font-weight:500;color:var(--ink);text-align:right;white-space:nowrap}
.ratecard tr:nth-child(even) td{background:var(--bone-2)}
.ratecard tbody tr:last-child td{border-bottom:0}
.rates__margin{background:var(--bone-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:1.6rem 1.8rem}
.rates__margin h3{font-size:1.2rem;margin-bottom:.6rem}
.rates__margin p{color:var(--body);max-width:64ch}
.rates__margin strong{color:var(--ink)}
@media(max-width:680px){.ratecard td{font-size:.98rem;padding:.8rem .9rem}}

/* ============================================================
   SOCIAL FEED (about)
   ============================================================ */
.social{padding:0 var(--pad) var(--sec)}
.social__head{max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.social__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:1rem}
.social__head h2{font-size:clamp(1.8rem,3.8vw,2.8rem)}
.social__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.social__card{background:var(--bone-2);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.social__icon{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.social__icon svg{width:24px;height:24px}
.social__card h3{font-size:1.2rem}
.social__handle{font-family:var(--f-mono);font-size:.82rem;color:var(--muted)}
.social__card p{color:var(--muted);font-size:.97rem}
.social__card .link-arrow{margin-top:.4rem}
.social__note{max-width:var(--maxw);margin:1.6rem auto 0;text-align:center;color:var(--muted);font-size:.88rem}
@media(max-width:860px){.social__grid{grid-template-columns:1fr}}

/* ============================================================
   SIGNATURE EFFECT 1 — PHOTO-FILLED EMBLEM  (homepage)
   The original leaf-in-house mark with the grey house replaced
   by a real home photo. Placed static, centred in Selected Work.
   ============================================================ */
.pfl__mark{position:relative;margin:0;width:clamp(250px,34.8vw,384px);aspect-ratio:276/324}
/* crisp vector white outline — rounded corners, sharp straight edges */
.pfl__house{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pfl__house path{fill:none;stroke:#fff;stroke-width:8;stroke-linejoin:round;stroke-linecap:round}
/* centred over the Selected Work grid, lifted so it overlaps the top and bottom photos evenly */
.work .grid{position:relative}
.work__emblem{position:absolute;top:43.7%;left:50%;transform:translate(-50%,-50%);z-index:4;
  pointer-events:none}
.work__emblem .pfl__mark{width:clamp(250px,34.8vw,384px);
  filter:drop-shadow(0 8px 12px rgba(20,24,28,.38)) drop-shadow(0 34px 64px rgba(20,24,28,.55))}
.work__emblem .pfl__img{inset:0;width:100%;height:100%;transform:none;will-change:auto}
/* convex sheen — domed highlight top-left, shaded edges, clipped to the house silhouette
   so the photo-filled mark reads as if it is bulging out of the grid */
.work__emblem .pfl__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 100% at 36% 26%,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 26%,
    rgba(0,0,0,0) 52%, rgba(0,0,0,.22) 82%, rgba(0,0,0,.40) 100%)}
/* photo fills the house silhouette (SVG mask — reliable); the real leaf overlay
   below covers the centre, so the home reads only through the grey house area */
.pfl__photo{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:var(--eco-house);mask-image:var(--eco-house);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.pfl__img{position:absolute;inset:-11%;width:122%;height:122%;object-fit:cover;
  transform:translate3d(0,0,0) scale(1.05);will-change:transform}
/* the ORIGINAL leaf, halo and veins, kept intact, sitting on top of the photo */
.pfl__leaf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.28))}
.pfl__cap{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-d);margin:0}

/* ============================================================
   SIGNATURE EFFECT 2 — BLUEPRINT TO BUILT  (Design & Build)
   The logo draws itself as a fine blueprint line, then the
   finished-home photo fades in behind it. Default state (no JS
   / reduced motion) is the FINISHED frame: drawn + photo shown.
   ============================================================ */
.bp{padding:var(--sec) var(--pad) 0;display:flex;justify-content:center;text-align:center}
.bp__inner{max-width:600px;display:flex;flex-direction:column;align-items:center;gap:1rem}
.bp__kicker{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0}
.bp__title{font-size:clamp(1.6rem,3.4vw,2.3rem);max-width:14ch}
.bp__stage{position:relative;margin:1.2rem 0 0;width:clamp(258px,40vw,440px);aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;background:var(--bone-2);border:1px solid var(--line)}
.bp__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* faint veil so the ink linework reads over any part of the photo */
.bp__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(246,246,241,.18)}
.bp__svg{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:9%;
  overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.bp__house{stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.bp__leaf{stroke:var(--accent);stroke-width:3.2;stroke-linejoin:round}
.bp__vein{stroke:var(--accent-d);stroke-width:2;stroke-linecap:butt}
.bp__cap{color:var(--muted);font-size:.97rem;margin:.3rem 0 0;max-width:46ch}
/* finished state (default / no-JS / reduced motion): drawn + photo in place */
.bp__house,.bp__leaf,.bp__vein{stroke-dasharray:1;stroke-dashoffset:0}
.bp__photo{opacity:1}
/* armed by JS only when motion is allowed: reset to blank, define the draw */
.bp--armed .bp__house,.bp--armed .bp__leaf,.bp--armed .bp__vein{stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)}
.bp--armed .bp__leaf{transition-duration:1s;transition-delay:.9s}
.bp--armed .bp__vein{transition-duration:.7s;transition-delay:1.7s}
.bp--armed .bp__photo{opacity:0;transition:opacity 1.2s ease;transition-delay:2s}
/* in view: draw the line, then fade the home in behind it */
.bp--armed.is-drawn .bp__house,
.bp--armed.is-drawn .bp__leaf,
.bp--armed.is-drawn .bp__vein{stroke-dashoffset:0}
.bp--armed.is-drawn .bp__photo{opacity:1}

/* ============================================================
   CONTACT — office photo + map, side by side
   ============================================================ */
.officemap{padding:0 var(--pad) var(--sec)}
.officemap__inner{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
.officemap__photo{margin:0}
.officemap__photo .officemap__frame{width:100%;aspect-ratio:16/10;
  border-radius:clamp(18px,2vw,28px); /* soft frame, same as the home page's first in-body image */
  overflow:hidden;background:var(--bone-2)}
.officemap__photo img{width:100%;height:100%;object-fit:cover;display:block}
.officemap__photo figcaption{margin-top:1rem;font-family:var(--f-mono);font-size:.8rem;
  letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.officemap__map{margin:0}
.officemap__map iframe{width:100%;aspect-ratio:16/10;border:0;
  border-radius:clamp(18px,2vw,28px); /* soft frame, same as the home page's first in-body image */
  display:block;filter:grayscale(.3) contrast(1.05)}
@media(max-width:860px){.officemap__inner{grid-template-columns:1fr;gap:1.6rem}
  .officemap__map iframe{aspect-ratio:16/11}}

/* ============================================================
   OUR BUSINESS — process stages
   ============================================================ */
.obprocess{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) var(--sec)}
.obstage{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,38%);
  grid-template-areas:"no body media";column-gap:clamp(1.2rem,3vw,3rem);row-gap:1.4rem;align-items:center;
  padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:1px solid var(--line);scroll-margin-top:120px}
.obstage:nth-of-type(even){grid-template-columns:minmax(0,38%) auto minmax(0,1fr);
  grid-template-areas:"media no body"}
.obstage:first-child{border-top:0}
.obstage__no{grid-area:no;font-family:var(--f-mono);font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--ink);
  font-weight:500;line-height:1;position:relative;padding-top:.15rem;align-self:start}
.obstage__no::after{content:"";display:block;width:26px;height:3px;background:var(--accent);margin-top:.7rem;border-radius:2px}
.obstage__body{grid-area:body;max-width:64ch}
.obstage__body h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1rem}
.obstage__body p{color:var(--body);margin-bottom:1rem}
.obstage__body p:last-child{margin-bottom:0}
.obstage__list{margin:.2rem 0 0;padding-left:1.1rem;color:var(--muted)}
.obstage__list li{margin-bottom:.45rem}
.obstage__media{grid-area:media;margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 14px 36px rgba(20,24,28,.12)}
.obstage__media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media(max-width:780px){.obstage,.obstage:nth-of-type(even){grid-template-columns:auto 1fr;
  grid-template-areas:"no body" "media media";column-gap:1.2rem;row-gap:1.1rem}}
@media(max-width:680px){.obstage,.obstage:nth-of-type(even){grid-template-columns:1fr;
  grid-template-areas:"no" "body" "media";gap:.7rem;padding:2rem 0}
  .obstage__no::after{display:none}}

/* ============================================================
   JOIN OUR TEAM — current vacancies / role cards
   ============================================================ */
.vacancies{padding:var(--sec) var(--pad);background:var(--bone-2);scroll-margin-top:110px}
.vacancies__head{max-width:var(--maxw);margin:0 auto clamp(2.2rem,4vw,3.4rem)}
.vacancies__kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 .8rem}
.vacancies__head h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:18ch}
.vacancies__head p{color:var(--muted);max-width:56ch;margin-top:1rem}
.roles{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.role{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.role__img{aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.role__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.role:hover .role__img img{transform:scale(1.05)}
.role h3{font-size:1.25rem;padding:1.3rem 1.4rem .5rem}
.role p{color:var(--muted);font-size:.96rem;line-height:1.6;padding:0 1.4rem 1.5rem;margin:0}
.vacancies__note{max-width:var(--maxw);margin:1.8rem auto 0;color:var(--muted);font-size:.86rem}
@media(max-width:900px){.roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.roles{grid-template-columns:1fr}}

/* ============================================================
   DESIGN TOOLS — embedded-tool slot (House Generator, Interior Design)
   A placeholder now; the live tool is dropped into .toolembed (iframe) later.
   ============================================================ */
.toolsec{padding:var(--sec) var(--pad)}
.toolsec__inner{max-width:var(--maxw);margin:0 auto}
.toolsec__head h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:20ch}
.toolsec__head p{color:var(--muted);max-width:58ch;margin-top:1rem}
.toolembed{margin-top:clamp(1.6rem,3vw,2.6rem);border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--bone-2);min-height:clamp(320px,46vw,560px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(2rem,5vw,4rem);gap:.9rem;
  overflow:hidden}
.toolembed__badge{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep)}
.toolembed h3{font-size:clamp(1.3rem,2.6vw,1.9rem);max-width:22ch;margin:0}
.toolembed p{color:var(--muted);max-width:54ch;margin:0}
.toolembed iframe{width:100%;height:100%;min-height:inherit;border:0;border-radius:var(--radius)}

/* ============================================================
   Category kickers / labels — small logo-yellow pill, ink text
   (final decision 2026-07-01). One rule overriding every kicker;
   keeps each kicker's own font-size / letter-spacing / margin.
   ============================================================ */
.lede__kicker,.perf__kicker,.process__kicker,.team__kicker,.gd__kicker,
.pagebanner__kicker,.prose__kicker,.features__kicker,.statement__kicker,
.t__kicker,.pd__kicker,.guarantees__kicker,.metrics__kicker,.rates__kicker,
.social__kicker,.bp__kicker,.vacancies__kicker,.toolembed__badge{
  display:inline-block;background:var(--accent);color:var(--ink);
  padding:.34rem .72rem;border-radius:var(--radius);font-weight:500;line-height:1}

/* Grand Designs media credit under a hero (used on About) */
.pagebanner__credit{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:1.1rem}

/* ============================================================
   TYPE SYSTEM v2 (2026-07-09) — site-wide text set-out
   Approved on the home page, now brand law (see CLAUDE.md).
   Tiers: page H1 54 / section H2 34-38 semibold / card titles 21
   semibold / body 19-20 lh 1.7 / captions+meta 15 / kickers 14.
   All text left-aligned. Kicker 36-44px above headline; headline
   48-56px above body; heads 56-72px above their content.
   These groups override the older per-component sizes above.
   ============================================================ */

/* kickers above headings: 14px medium, spread, 36-44px below
   (heroes/page banners are exempt from the type system - they keep
   their own display treatment). ALL page kickers, no exceptions. */
.lede__kicker,.perf__kicker,.process__kicker,.team__kicker,.features__kicker,
.t__kicker,.gd__kicker,.prose__kicker,.pd__kicker,
.guarantees__kicker,.metrics__kicker,.rates__kicker,.social__kicker,
.credlogos__kicker,.creds__kicker,.statement__kicker,.bp__kicker,
.vacancies__kicker,.toolembed__badge{
  font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);font-weight:500;
  line-height:1.2;margin-bottom:clamp(2.25rem,3vw,2.75rem)}
/* small meta labels share the kicker size without the big gap */
.stat dt,.ccard__role,.cdetail__label,.form__field>span,.team__person h3 span{
  font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker)}

/* the ONE big statement per page (page statement below the banner;
   banner titles themselves keep their original hero treatment) */
.lede__statement,.prose__lead{
  font-size:var(--fs-h1);font-weight:600;line-height:1.1;letter-spacing:-.5px;max-width:26ch}

/* section titles: 53px semibold, 1px under the statement (home format) */
.features__head h2,.perf__panel h2,.testimonials__head h2,.gd__head h2,
.process__intro h2,.faq__head h2,.contact__inner h2,.work__head h2,
.approach__head h2,.materials__head h2,.team__body h2,.proof h2,
.guarantees__copy h2,.product-detail__head h2,.metrics__head h2,.rates h2,
.social__head h2,.statement__inner h2,.cta-band__inner h2,
.vacancies__head h2,.toolsec__head h2,.obstage__body h2,.bp__title{
  font-size:var(--fs-h2);font-weight:600;line-height:1.15;letter-spacing:-.3px}
/* deliberately compact component headings (not section titles): the consult
   bar and the contact form card keep their own smaller sizes */

/* 48-56px between a title and the text directly below it */
.materials__head h2,.guarantees__copy h2,.rates h2,.team__body h2,.proof h2,
.prose__lead{margin-bottom:clamp(3rem,4vw,3.5rem)}

/* 56-72px between a section head and the block it introduces */
.features__head,.work__head,.gd__head,.process__intro,.testimonials__head,
.approach__head,.materials__head,.product-detail__head,.social__head,
.metrics__head{margin-bottom:clamp(3.5rem,4.5vw,4.5rem)}

/* lead text directly under headings: 20px, generous line */
.approach__head p,.materials__head p,.guarantees__copy p:not(.guarantees__kicker),.lede__body p,
.prose__cols p,.proof__sub,.rates__note,.process__intro p:not(.process__kicker),
.cta-band__inner p,.statement__inner p:not(.statement__kicker){
  font-size:var(--fs-lead);line-height:1.7}

/* body copy tier: quotes and FAQ answers follow body size */
.tcard blockquote,.faq__item p{font-size:var(--fs-body);line-height:1.7}
/* 30-36px between stacked paragraphs in a text block */
.team__person p+p,.prose__cols p+p,.lede__body p+p,.guarantees__copy p+p{
  margin-top:2rem}

/* card and step titles: 21px semibold */
.feature h3,.step h3,.pillar h3,.material h3,.material__list h3,.pcat__body h3,
.pcat--cta h3,.supplier h3,.team__person h3,.social__card h3,.rates__margin h3,
.grid__item figcaption b{font-size:var(--fs-cardtitle);font-weight:600;line-height:1.3}

/* card descriptions and list text: 15px */
.feature p,.step p,.material p,.material__list li,.pcat__body p,.pcat--cta p,
.supplier p,.social__card p,.metric__label{font-size:var(--fs-caption);line-height:1.55}

/* captions and notes: 15px, tighter line */
.figband figcaption,.figrow figcaption,.tcard figcaption span,.tcard figcaption b,
.grid__item figcaption span,.gallery-note,.metrics__note,.social__note{
  font-size:var(--fs-caption);line-height:1.4}
.tcard figcaption b{font-weight:600}

/* everything reads from one clean left edge */
.proof,.social__head,.social__note,.credlogos__inner{text-align:left}
.proof h2,.proof__sub{margin-left:0;margin-right:0}

/* card grids: consistent generous gaps (48-56px on desktop) */
.tcards,.materials__grid,.product-cats,.suppliers,.social__grid{
  gap:clamp(3rem,3.4vw,3.5rem)}
/* cards keep at least 28-36px internal padding */
.pcat__body{padding:clamp(1.75rem,2.5vw,2.25rem)}
.supplier__body{padding:clamp(1.75rem,2.5vw,2.25rem)}

/* testimonial cards and process steps: home's roomier treatment, site-wide */
.tcard{padding:clamp(2.2rem,3vw,2.9rem);gap:1.2rem}
.tcard figcaption{padding-top:1.3rem;gap:.25rem}
.steps{gap:clamp(2rem,4vw,3.6rem);padding-top:clamp(2.4rem,4vw,3.4rem)}
.step__no{font-size:2.25rem;margin-bottom:1.2rem}
.step h3{margin-bottom:.75rem}

/* standalone in-body images: soft rounded frame like the home page's first
   image under the hero. Does NOT apply to clustered mosaics/galleries
   (home Selected Work grid, the two project-page groupings) or card grids. */
.figband__frame,.figrow__frame,.band__inner,.team__portrait,
.gd__video,.kc__media,.feat__video{border-radius:clamp(18px,2vw,28px)}

/* ============================================================
   FAQ / accordion — ONE shared style, site-wide (2026-07-11).
   Source of truth for every FAQ: compact rows, ink hover/focus
   fill with white text, smooth open where supported. Approved on
   Design & Build; pages add only context padding, never restyle.
   ============================================================ */
.faq{padding:0 var(--pad) var(--sec)}
.faq__inner{max-width:var(--maxw);margin:0 auto}
.faq__head{margin-bottom:clamp(3.5rem,4.5vw,4.5rem)}
.faq__head h2{margin-bottom:0}
.faq__kicker{display:inline-block;background:var(--accent);color:var(--ink);
  font-family:var(--f-mono);text-transform:uppercase;
  font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);font-weight:500;line-height:1.2;
  padding:.34rem .72rem;border-radius:var(--radius);
  margin-bottom:clamp(2.25rem,3vw,2.75rem)}
.faq__list{max-width:860px}
.faq__item{border-top:1px solid var(--line);interpolate-size:allow-keywords}
.faq__item:last-of-type{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;padding:1.25rem .95rem;margin:0 -.95rem;
  border-radius:12px;display:flex;justify-content:space-between;gap:2.5rem;align-items:baseline;
  font-family:var(--f-disp);font-weight:600;font-size:var(--fs-cardtitle);color:var(--ink);
  transition:background-color .2s ease,color .2s ease}
.faq__item summary:hover,.faq__item summary:focus-visible{background:var(--ink);color:#FFFFFF}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--f-mono);color:var(--accent-deep);
  font-size:1.35rem;line-height:1;transition:transform .25s cubic-bezier(.16,1,.3,1),color .2s ease;flex:none}
.faq__item summary:hover::after,.faq__item summary:focus-visible::after{color:#FFFFFF}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:focus-visible{outline:2px solid transparent}
.faq__item p{color:var(--body);padding:.2rem 0 1.5rem;max-width:66ch;line-height:1.7;margin:0}
@supports (interpolate-size:allow-keywords){
  .faq__item::details-content{opacity:0;block-size:0;overflow:clip;
    transition:content-visibility .3s allow-discrete,opacity .3s ease,block-size .3s ease}
  .faq__item[open]::details-content{opacity:1;block-size:auto}
}
@media (prefers-reduced-motion:reduce){
  .faq__item summary,.faq__item summary::after,.faq__item::details-content{transition:none}
}

/* mobile heroes: viewport-relative instead of the fixed 760px (must stay LAST so it
   wins the cascade against the base .pagebanner/.hero rules above) */
@media (max-width:700px){
  .pagebanner,.hero{min-height:62vh}
}