/* ============================================================
   HOMESTEAD GROUP — global.css  (v3 light system, brand teal)
   Modern, light, editorial. Off-white canvas, logo teal accent,
   charcoal anchor, photos as rich rounded cards.
   Palette is taken from the supplied logo artwork — do not drift.
   Type: Besley (display, variable) + Inter (text, variable)
   Rules: no backdrop-filter on fixed elements; all hover styles
   gated behind @media(hover:hover); animate-in-as-default.
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Besley';
  src: url('/fonts/besley-var.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand colours taken directly from the supplied logo artwork. */
  --ink:        #1F1C19;   /* logo charcoal — primary text */
  --ink-deep:   #16130F;   /* footer / anchor surfaces */
  --paper:      #F8F8F5;   /* page */
  --white:      #FFFFFF;   /* cards */
  --tint:       #EBF1F0;   /* recessed section, teal-tinted (default) */
  /* Trade surfaces, taken from the materials each trade works in. These shift
     the RECESSED SURFACE only. The accent stays brand teal everywhere, so the
     site gains wayfinding without turning into a rainbow. All three clear AA
     for body text (worst 4.89). */
  --tone-timber: #F4EFE7;  /* carpentry */
  --tone-stone:  #EDEDEA;  /* concrete  */
  --tone-steel:  #E4F0EE;  /* guard rail */
  --brand:      #088181;   /* logo teal — buttons, icons, large UI */
  --brand-ink:  #067272;   /* darker teal for small text (AA on paper) */
  --brand-2:    #055E5E;   /* hover / active */
  --brand-l:    #35B3B3;   /* teal on dark surfaces */
  --brand-t:    rgba(8, 129, 129, 0.09);   /* tint fill for icon chips */
  /* The eyebrow is OPAQUE on purpose. A translucent accent composites against
     whatever surface is behind it, so it drifted below AA on the reference
     grey. Fixed values render identically on every surface: 6.10 on the chip,
     and the chip stays visible against all five surfaces. */
  --eyebrow-bg: #DDE9E8;
  --eyebrow-fg: #055E5E;
  --mute:       #5F625E;   /* secondary text on light */
  --mute-d:     #A8ADA6;   /* secondary text on dark */
  --rule:       rgba(31, 28, 25, 0.12);
  --rule-d:     rgba(248, 248, 245, 0.15);
  --ok:         #2E7D4F;
  --err:        #B3261E;
  --shadow-1:   0 1px 2px rgba(31,28,25,.04), 0 10px 30px rgba(31,28,25,.06);
  --shadow-2:   0 2px 6px rgba(31,28,25,.05), 0 24px 60px rgba(31,28,25,.13);
  --ff-display: 'Besley', Georgia, 'Times New Roman', serif;
  --ff-text:    'Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --max:        1220px;
  --gutter:     clamp(20px, 4.5vw, 48px);
  --radius:     18px;
  --radius-lg:  26px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-text);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-decoration: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
section { background: var(--paper); }
::selection { background: var(--brand); color: var(--white); }

h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-family: var(--ff-text); font-weight: 700; font-size: 1.02rem; margin: 0 0 .45em; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--brand); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--eyebrow-fg);
  background: var(--eyebrow-bg);
  border: 1px solid rgba(8,129,129,.22);
  border-radius: 30px; padding: 8px 16px;
  margin-bottom: 22px;
}
.eyebrow svg { width: 13px; height: 13px; }

.lede { font-size: clamp(1.06rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--mute); max-width: 60ch; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(56px, 7vw, 100px) 0; }
.section--tight { padding: clamp(44px, 6vw, 76px) 0; }

/* Vertical rhythm. Padding used to be a flat 124px top and bottom, so two
   sections in a row produced 248px of contiguous empty space no matter how
   much content sat inside. Measured at 1440px, sections holding 380-480px of
   content were 34-40% padding, which reads as a page that failed to load
   rather than as air. A change of surface colour is itself the separator and
   earns the full pad; two bands on the same colour do not, so the boundary
   between them is roughly halved. Re-measure with the section audit in
   tools/ before changing these numbers. */
.section:not(.recessed):not(.dark):not(.cta-band) + .section:not(.recessed):not(.dark):not(.cta-band) { padding-top: clamp(4px, 1.4vw, 20px); }
.page-hero + .section:not(.recessed):not(.dark):not(.cta-band) { padding-top: clamp(18px, 2.8vw, 40px); }
.recessed { background: var(--tint); }
.dark { background: var(--ink-deep); color: var(--white); }
.dark h1, .dark h2, .dark h3 { color: var(--white); }
.dark section { background: var(--ink-deep); }
.dark .lede { color: var(--mute-d); }

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-text); font-size: .95rem; font-weight: 650;
  letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  border-radius: 999px; padding: 15px 30px; border: 1.5px solid transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .25s var(--ease); }
/* Press feedback fires on pointer-DOWN, not on release: feedback that waits
   for click feels dead, and on touch (where hover never fires) this is the
   only acknowledgement a press gets. Deliberately NOT inside the hover gate.
   The duration is short on the way in so the response reads as instant; the
   base .22s transition eases it back out on release. */
.btn:active { transform: scale(.97); transition-duration: .08s; }
.nav-search:active, .nav-burger:active { transform: scale(.92); transition-duration: .08s; }
/* Row press state. A translucent ink wash is allowed HERE as a narrow
   exception to the no-translucent-backgrounds rule: it exists only for the
   duration of a press, so it is never a surface anything has to hold AA
   against. 5% ink stays imperceptibly different across paper/tint/tones. */
.faq-q:active { background: rgba(31,28,25,.05); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px rgba(8,129,129,.26); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(31,28,25,.22); }
/* EVERY dark surface must be listed here. This started as `.dark` only, and
   each new dark band since then added its own copy of the same override
   further down the file. `.bleed` was missed, so the "The standards we build
   to" button rendered #1F1C19 ink on a #16130F band at about 1.1:1, i.e.
   invisible. axe did not catch it because the backdrop is a photo and axe
   skips image backdrops rather than failing them. Keep this as the ONE place
   the on-dark ghost button is defined, and add new dark surfaces here. */
.btn--ghost.on-dark,
.dark .btn--ghost,
.bleed .btn--ghost,
.band-dark .btn--ghost,
.hero-full .btn--ghost,
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.btn--light { background: var(--white); color: var(--ink); box-shadow: var(--shadow-1); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--lg { padding: 18px 36px; font-size: 1rem; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--brand-2); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8,129,129,.32); }
  .btn--primary:hover svg { transform: translateX(3px); }
  .btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
  .btn--ghost.on-dark:hover, .dark .btn--ghost:hover, .bleed .btn--ghost:hover,
  .band-dark .btn--ghost:hover, .hero-full .btn--ghost:hover, .cta-band .btn--ghost:hover {
    border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
  .btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .btn--ink:hover { background: #000; transform: translateY(-2px); }
}
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 8px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 300;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: var(--ink); color: var(--white); padding: 12px 20px;
  border-radius: 8px; font-weight: 600;
}

/* ---------- Header / nav (solid on scroll — never backdrop-filter) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled, .site-header.solid {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--rule), 0 8px 30px rgba(31,28,25,.05);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--max); margin: 0 auto;
  padding: 15px var(--gutter);
}
.nav-logo { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-size: .93rem; font-weight: 560; transition: color .2s; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--brand); }
@media (hover: hover) { .nav-links a:hover { color: var(--brand); } }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; font-size: .93rem; white-space: nowrap; }
.nav-phone svg { width: 16px; height: 16px; color: var(--brand); }
.nav .btn { padding: 12px 22px; font-size: .88rem; }
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  flex-direction: column; gap: 5px; transition: transform .2s var(--ease);
}
.nav-burger span { width: 24px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
/* 44px touch targets. The visual stays the designed size; the hit area is
   extended with a pseudo-element (burger renders 40x32, search 34px on
   mobile, both under the 44px minimum). */
.nav-burger, .nav-search { position: relative; }
.nav-burger::after { content: ''; position: absolute; inset: -6px -2px; }
.nav-search::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }

/* Mobile menu — solid light panel */
/* ============================================================
   Mobile menu — rebuilt 2026-08-09.
   Sheet is a two-row grid: a scrolling link region and an action
   footer pinned to the bottom, so "Get a quote" and the phone
   number are reachable without scrolling 18 links first.
   ============================================================ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 190; background: var(--paper);
  /* Rows, NOT a plain flex column. The previous version made the whole sheet
     one scroller with justify-content:center, which centres overflow and clips
     both ends unreachably (the three trade links sat 202px above the screen).
     Grid keeps the action footer out of the scroll entirely. */
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease), visibility .26s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }

.mm-scroll {
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  /* Top pad clears the 84px fixed header. The mask is a scroll-edge effect:
     links fade as they pass under the header instead of being chopped through
     the middle of a letter, which is what the hard edge looked like. */
  padding: 100px var(--gutter) 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}

.mm-group + .mm-group { margin-top: 24px; }
.mm-head {
  margin: 0 0 2px; font-family: var(--ff-text); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }

/* Scoped to .mm-group ONLY. As `.mobile-menu a` this clobbered the two buttons
   in the action footer: they rendered display:block with ink text, no
   horizontal padding (text jammed against the left edge) and a border-bottom
   divider under a pill, and the phone icon stacked above its number because
   inline-flex was overridden. Never widen this selector back to `.mobile-menu a`.
   Navigation is TEXT, never the display slab. */
.mm-group a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink); font-family: var(--ff-text); font-size: 1.06rem;
  font-weight: 600; letter-spacing: -.005em;
  min-height: 52px; padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.mm-group li:last-child a { border-bottom: 0; }
.mm-group a[aria-current="page"] { color: var(--brand-ink); }
.mm-group a[aria-current="page"]::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.mm-group a:active { color: var(--brand-ink); }

/* Action footer: outside the scroller, always on screen. */
.mm-cta {
  display: grid; gap: 10px; background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
}
.mm-cta .btn { width: 100%; }

body.menu-open { overflow: hidden; }
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links, .nav-phone { display: none; }
  .nav-burger { display: flex; }
  .nav .btn { padding: 10px 18px; font-size: .84rem; }
}

/* ---------- Home hero (light split) ---------- */
.hero-light {
  position: relative; overflow: hidden;
  padding: clamp(130px, 16vw, 190px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
}
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; } }
.hero-light h1 { max-width: 14ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3.4vw, 44px);
  margin-top: clamp(36px, 5vw, 54px); padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.hero-meta .hm { font-size: .85rem; color: var(--mute); }
.hero-meta .hm b { display: block; font-family: var(--ff-display); font-size: 1.55rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-bottom: 2px; }
.hero-meta .hm b .up { color: var(--brand); }

.hero-visual { position: relative; }
.hero-photo {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2);
}
.hero-photo img, .hero-photo video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.2; display: block; background: var(--tint); }
@media (max-width: 960px) { .hero-photo img, .hero-photo video { aspect-ratio: 16/10; } }
.hero-float {
  position: absolute; left: -26px; bottom: -28px;
  background: var(--white); border-radius: 16px; box-shadow: var(--shadow-2);
  padding: 16px 20px; display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--rule); max-width: 310px;
}
.hero-float .hf-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--brand-t); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.hero-float .hf-ic svg { width: 19px; height: 19px; }
.hero-float b { display: block; font-size: .9rem; letter-spacing: -.01em; }
.hero-float span { font-size: .78rem; color: var(--mute); line-height: 1.4; display: block; }
@media (max-width: 960px) { .hero-float { left: 12px; bottom: -20px; max-width: 82%; } }
/* ---------- Page hero (interior pages, light) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(128px, 15vw, 180px) 0 clamp(44px, 6vw, 72px);
  background:
    radial-gradient(ellipse 55% 60% at 92% 0%, rgba(192,98,43,.10), transparent 60%),
    var(--paper);
}
.page-hero h1 { max-width: 18ch; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lede { margin-left: auto; margin-right: auto; }
.page-hero--center .crumbs { justify-content: center; }

.page-hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (max-width: 940px) { .page-hero-split { grid-template-columns: 1fr; } .page-hero-media { order: -1; } }
.page-hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) {
  a.card:hover, .card.hoverable:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(8,129,129,.34); }
}
a.card { color: inherit; display: flex; flex-direction: column; }
.card .icon {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-t); color: var(--brand);
}
.card .icon svg { width: 22px; height: 22px; }
.card p { color: var(--mute); font-size: .95rem; }
.card .card-link {
  margin-top: auto; padding-top: 18px; font-weight: 650; font-size: .9rem; color: var(--brand-ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.card .card-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
@media (hover: hover) { a.card:hover .card-link svg { transform: translateX(4px); } }

/* ---------- Split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-2); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.4; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-media { order: -1; } }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: .98rem; }
.checklist li svg { width: 21px; height: 21px; flex: none; color: var(--brand); margin-top: 2px; background: var(--brand-t); border-radius: 50%; padding: 3px; }
.dark .checklist li svg { color: var(--brand-l); background: rgba(53,179,179,.16); }

/* ---------- Lane selector (two doors) ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 820px) { .doors { grid-template-columns: 1fr; } }
.door {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 440px; display: flex; align-items: flex-end;
  color: var(--white); background: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.door-media { position: absolute; inset: 0; }
.door-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.door::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,19,15,.9) 6%, rgba(22,19,15,.24) 52%, rgba(22,19,15,.06) 100%);
}
.door-body { position: relative; z-index: 2; padding: clamp(24px, 3.4vw, 40px); width: 100%; }
.door-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--white); }
.door-body p { color: rgba(251,249,244,.85); font-size: .96rem; max-width: 44ch; }
.door-tag {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  background: rgba(251,249,244,.92); color: var(--ink);
  padding: 9px 15px; border-radius: 30px;
}
@media (hover: hover) {
  .door:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
  .door:hover .door-media img { transform: scale(1.05); }
}

/* ---------- Process / steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 26px); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step {
  counter-increment: step; position: relative;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-size: .92rem; font-weight: 600;
  color: var(--brand); background: var(--brand-t);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 16px;
}
.step h4 { margin-top: 0; }
.step p { font-size: .93rem; color: var(--mute); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat b { display: block; font-family: var(--ff-display); font-weight: 600; font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; color: var(--brand); }
.stat span { font-size: .88rem; color: var(--mute); }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.faq-item.open { border-color: rgba(8,129,129,.34); box-shadow: var(--shadow-1); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ff-text); font-size: 1.02rem; font-weight: 650; color: var(--ink);
  padding: 20px 56px 20px 22px; position: relative; line-height: 1.4;
}
.faq-q::after {
  content: ''; position: absolute; right: 24px; top: 26px; width: 11px; height: 11px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq-item.open .faq-q::after { transform: rotate(225deg) translate(-4px, -4px); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-clip { overflow: hidden; min-height: 0; }
.faq-a-inner { padding: 0 22px 22px; color: var(--mute); max-width: 72ch; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
table.data { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 560px; }
table.data th, table.data td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
table.data th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); background: var(--tint); }
table.data tr:last-child td { border-bottom: 0; }

/* ---------- CTA band (vivid copper) ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  background: #067070;
}
.cta-band section { background: transparent; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { max-width: 20ch; color: #fff; }
.cta-band .lede { color: #fff; }
.cta-band .eyebrow { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.cta-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 52% 70% at 88% 6%, rgba(255,255,255,.09), transparent 60%);
}
.cta-band .btn--primary { background: var(--ink-deep); box-shadow: 0 12px 28px rgba(22,19,15,.3); }
@media (hover: hover) { .cta-band .btn--primary:hover { background: #000; } }
/* The band used to be a headline capped at 20ch sitting alone in a 1200px
   container, so around 60% of a solid teal slab carried nothing, on every
   page. The right column is the direct-contact path for anyone who has
   already decided and does not want a form. Panel is a SOLID darker teal,
   not a translucent white: rgba() over teal lightens the surface and drags
   white text down toward the AA floor. #055E5E holds white at 7.58. */
.cta-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .cta-split { grid-template-columns: 1fr; } }
.cta-side {
  background: var(--brand-2); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg); padding: clamp(22px, 2.8vw, 30px);
}
.cta-side h3 { color: #fff; font-size: 1.02rem; margin: 0 0 4px; letter-spacing: -.01em; }
/* Secondary text here is OPAQUE for the same reason the eyebrow chip is: a
   translucent white composites against whatever teal sits behind it, and the
   first version (rgba(255,255,255,.66)) measured 4.26 on #055E5E, under the
   4.5 floor for 12px labels. #CFE3E3 is the composited colour pinned as a
   real value, 5.69 against the panel, and it cannot drift. */
.cta-side > p { color: #CFE3E3; font-size: .87rem; margin: 0 0 18px; }
.cta-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.cta-row:first-of-type { border-top: 0; padding-top: 0; }
.cta-row svg { width: 19px; height: 19px; flex: none; color: var(--brand-l); }
.cta-row span { display: block; font-size: .76rem; color: #CFE3E3; letter-spacing: .02em; text-transform: uppercase; }
.cta-row b, .cta-row a { display: block; color: #fff; font-size: .97rem; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .cta-row a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.cta-row > div { min-width: 0; }

/* ---------- Forms ---------- */
/* The quote form is long enough that the phone number scrolled out of view
   within one screen, which is the wrong thing to lose on the highest-intent
   page. Sticky only where there is room: below 900px the column stacks, and
   on short viewports a sticky panel taller than the screen gets its bottom
   clipped with no way to reach it. */
@media (min-width: 901px) and (min-height: 760px) { .contact-aside { position: sticky; top: 96px; } }
.form-shell { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 650; letter-spacing: .01em; }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: 12px;
  padding: 13px 16px; width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); background: var(--white);
  box-shadow: 0 0 0 3.5px rgba(8,129,129,.14);
}
.field .hint { font-size: .8rem; color: var(--mute); }
.hp {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; pointer-events: none;
}
.seg { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.seg input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0;
}
.seg label {
  cursor: pointer; border: 1.5px solid var(--rule); border-radius: 30px;
  padding: 11px 22px; font-size: .9rem; font-weight: 600; background: var(--white);
  transition: border-color .2s, background .2s, color .2s;
}
.seg input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.seg input:focus-visible + label { outline: 2.5px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) { .seg label:hover { border-color: var(--brand); } }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.form-note { font-size: .82rem; color: var(--mute); max-width: 40ch; }
.form-status { margin-top: 18px; font-size: .93rem; font-weight: 600; display: none; padding: 14px 18px; border-radius: 12px; }
.form-status.err { display: block; background: rgba(179,38,30,.08); color: var(--err); }
.form-status.busy { display: block; background: var(--tint); color: var(--ink); }

/* ---------- Footer (deep anchor) ---------- */
/* The rounded top corners cut a notch that reveals whatever is BEHIND the
   footer. That used to be the body background (paper), which read as white
   chips punched into the teal CTA band on every page that ends with one.
   Overlapping the footer onto the previous section by exactly the radius
   makes the notch reveal that section's own colour, so the seam is seamless
   whatever the page ends with (teal band, paper section, tinted hero).
   z-index 3 because the CTA band's .wrap sits at z-index 2 in the same
   stacking context and would otherwise paint over the curve. */
.site-footer {
  background: var(--ink-deep); color: var(--mute-d); font-size: .92rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative; z-index: 3; margin-top: calc(-1 * var(--radius-lg));
}
.site-footer section { background: var(--ink-deep); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(52px, 7vw, 84px) 0 44px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h5, .site-footer .foot-h { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin: 0 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--mute-d); transition: color .2s; }
@media (hover: hover) { .site-footer a:hover { color: var(--brand-l); } }
.footer-brand .nav-logo { color: var(--white); }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: .9rem; }
.footer-bottom {
  border-top: 1px solid var(--rule-d); padding: 24px 0 30px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}
.footer-bottom a { color: var(--mute-d); }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .84rem; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.crumbs a { color: var(--mute); }
.crumbs svg { width: 12px; height: 12px; opacity: .6; }
@media (hover: hover) { .crumbs a:hover { color: var(--brand); } }

/* ---------- Prose (guides) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brand); }
.prose .callout {
  background: var(--tint); border: 1px solid rgba(8,129,129,.16);
  border-radius: 14px; padding: 22px 26px; margin: 1.6em 0; font-size: .96rem;
}
.prose .callout b:first-child {
  display: block; margin-bottom: 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink);
}

/* ---------- Marquee strip (light) ---------- */
.strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; overflow: hidden; background: var(--white); color: var(--mute); }
.strip-track { display: flex; gap: 54px; width: max-content; animation: strip-scroll 36s linear infinite; }
.strip-track span { display: inline-flex; align-items: center; gap: 54px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.strip-track span::after { content: '·'; color: var(--brand); font-size: 1.3rem; }
@keyframes strip-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- Pills (suburbs) ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills a {
  border: 1.5px solid var(--rule); border-radius: 30px; padding: 11px 22px;
  font-size: .89rem; font-weight: 600; color: var(--ink); background: var(--white);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
@media (hover: hover) { .pills a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } }

/* ---------- Reveal animation (animate-in-as-default) ----------
   Elements are VISIBLE by default. Only when JS confirms it will
   animate (html.js + IO support) do we set the hidden start state. */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv-d1 { transition-delay: .08s; }
html.js .rv-d2 { transition-delay: .16s; }
html.js .rv-d3 { transition-delay: .24s; }
html.js .rv.in-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .faq-a, .faq-q::after, .submenu, .btn, .nav-burger, .nav-search { transition-duration: .01s; }
}
/* Print + any non-interactive render: never hide revealed content */
@media print {
  html.js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header, .mobile-menu { position: static !important; }
  .strip-track { animation: none !important; }
  /* the screen-only curve overlap would clip a line of the section above on paper */
  .site-footer { margin-top: 0 !important; border-radius: 0 !important; }
}

/* ---------- Emergency note ---------- */
.em-note {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand-t); border: 1px solid rgba(8,129,129,.26);
  color: var(--brand-2); border-radius: 12px; padding: 12px 18px; font-size: .88rem; font-weight: 600;
}
.em-note svg { width: 16px; height: 16px; flex: none; }

/* ---------- Thank-you / 404 ---------- */
.ty-hero, .nf-hero {
  min-height: 78svh; display: flex; align-items: center; text-align: center;
  background: var(--tint);
  padding-top: 90px;
}
.ty-hero .wrap, .nf-hero .wrap { width: 100%; }
.ty-hero .tick { width: 78px; height: 78px; border-radius: 50%; background: var(--brand-t); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; }
.ty-hero .tick svg { width: 36px; height: 36px; }
.nf-hero { text-align: left; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 16px; } .mt-2 { margin-top: 32px; } .mt-3 { margin-top: 56px; }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); max-width: 780px; }
.section-head.center { margin-left: auto; margin-right: auto; }


/* ============================================================
   v3 components — real logo lockup, trade pillars, client grid
   ============================================================ */

/* ---------- Logo (real supplied artwork, never a drawn glyph) ---------- */
.nav-logo img { height: 64px; width: auto; }
@media (max-width: 1080px) { .nav-logo img { height: 54px; } }
.footer-mark img { height: 72px; width: auto; }

/* ---------- Trade pillars ---------- */
.trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
@media (max-width: 940px) { .trades { grid-template-columns: 1fr; } }
.trade-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  color: inherit; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.trade-media { position: relative; overflow: hidden; background: var(--tint); }
.trade-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; transition: transform .7s var(--ease); }
.trade-body { padding: clamp(24px, 2.8vw, 32px); display: flex; flex-direction: column; flex: 1; }
.trade-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
@media (hover: hover) {
  .trade-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(8,129,129,.34); }
  .trade-card:hover::before { transform: scaleX(1); }
  .trade-card:hover .trade-media img { transform: scale(1.04); }
  .trade-card:hover .card-link svg { transform: translateX(4px); }
}
.trade-tag {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 10px;
}
.trade-card h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .4em; }
.trade-card p { color: var(--mute); font-size: .95rem; }
.trade-list {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--rule); display: grid; gap: 9px;
}
.trade-list li { font-size: .89rem; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.trade-list li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.trade-card .card-link { margin-top: 22px; color: var(--brand-ink); font-weight: 650; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.trade-card .card-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }

/* ---------- Client types ---------- */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); }
@media (max-width: 980px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .clients { grid-template-columns: 1fr; } }
.client { padding-top: 22px; border-top: 2px solid var(--rule); }
.client .icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-t); color: var(--brand);
}
.client .icon svg { width: 20px; height: 20px; }
.client h4 { font-size: 1.02rem; margin-bottom: .5em; }
.client p { color: var(--mute); font-size: .92rem; }

/* ---------- Guide table of contents ---------- */
.toc { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; }
.toc a { font-weight: 550; }
.h1-guide { max-width: 24ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

/* ---------- Footer heading links ---------- */
.site-footer h5 a, .site-footer .foot-h a { color: var(--white); }
@media (hover: hover) { .site-footer h5 a:hover, .site-footer .foot-h a:hover { color: var(--brand-l); } }
.footer-contact a { color: var(--white); font-weight: 600; }

/* ============================================================
   v4 — mega menu, sectors, glossary, answer blocks, motion
   ============================================================ */

/* ---------- Mega menu ---------- */
.nav-links .has-menu { position: relative; }
.nav-links .has-menu > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .has-menu > a svg { width: 13px; height: 13px; transition: transform .25s var(--ease); opacity: .6; }
.submenu {
  position: absolute; top: 100%; left: 0; transform: translateY(-6px);
  /* starts 6px NEARER the trigger and settles away from it, so the panel
     reads as emerging from the nav item rather than floating up at it */
  padding-top: 14px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
}
.submenu-in {
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow-2); padding: 12px; width: max-content;
  max-width: min(620px, calc(100vw - 48px));
}
.submenu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  min-width: min(340px, calc(100vw - 72px)); }
.submenu-list--wide { grid-template-columns: 1fr 1fr; gap: 2px 6px;
  min-width: min(560px, calc(100vw - 72px)); }
@media (max-width: 1180px) { .submenu-list--wide { grid-template-columns: 1fr; min-width: 320px; } }
.submenu-list a { display: block; padding: 11px 14px; border-radius: 11px; color: var(--ink); transition: background .18s; }
.submenu-list b { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.submenu-list span { display: block; font-size: .8rem; color: var(--mute); line-height: 1.45; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.submenu-all {
  display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 13px 14px;
  border-top: 1px solid var(--rule); color: var(--brand-ink); font-size: .9rem;
}
.submenu-all svg:first-child { width: 20px; height: 20px; flex: none; }
.submenu-all svg:last-child { width: 15px; height: 15px; margin-left: auto; transition: transform .25s var(--ease); }
.submenu-all b { display: block; font-weight: 650; }
.submenu-all span { display: block; font-size: .78rem; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.has-menu:focus-within .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
@media (hover: hover) {
  .has-menu:hover .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .has-menu:hover > a svg { transform: rotate(180deg); }
  .submenu-list a:hover { background: var(--tint); }
  .submenu-all:hover svg:last-child { transform: translateX(4px); }
}

/* ---------- Answer-first block (AEO) ---------- */
.answer {
  background: var(--tint); border: 1px solid rgba(8,129,129,.18);
  border-radius: 16px; padding: 22px 26px; max-width: 760px;
}
.answer-l {
  display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px;
}
.answer-l svg { width: 14px; height: 14px; }
.answer p { font-size: 1.04rem; line-height: 1.6; margin: 0; }
.prose .answer { margin-bottom: 2.4em; }

/* ---------- Sector pages ---------- */
.painlist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.painlist li { position: relative; padding-left: 30px; font-size: .98rem; color: var(--mute); }
.painlist li::before {
  content: ''; position: absolute; left: 6px; top: .62em; width: 9px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.pill-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .pill-cards { grid-template-columns: 1fr; } }
.pill-card {
  display: flex; align-items: center; gap: 13px; padding: 18px 22px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font-weight: 620; font-size: .95rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pill-card svg:first-child { width: 20px; height: 20px; color: var(--brand); flex: none; }
.pill-card svg:last-child { width: 15px; height: 15px; margin-left: auto; color: var(--brand-ink); transition: transform .25s var(--ease); }
@media (hover: hover) {
  .pill-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-1); }
  .pill-card:hover svg:last-child { transform: translateX(4px); }
}

/* ---------- Glossary ---------- */
.toc-inline { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.toc-inline a {
  display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--white);
  border: 1.5px solid var(--rule); font-size: .89rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s, color .2s;
}
@media (hover: hover) { .toc-inline a:hover { border-color: var(--brand); color: var(--brand-ink); } }
.terms { margin: 0; display: grid; gap: 0; }
.term { padding: 22px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 250px 1fr; gap: 28px; scroll-margin-top: 110px; }
@media (max-width: 780px) { .term { grid-template-columns: 1fr; gap: 8px; } }
.term dt { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.term dd { margin: 0; color: var(--mute); font-size: .97rem; max-width: 68ch; }
.glossary-cta {
  display: flex; align-items: center; gap: 18px; padding: 26px 30px;
  background: var(--ink-deep); color: var(--white); border-radius: var(--radius-lg);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.glossary-cta > svg:first-child { width: 26px; height: 26px; color: var(--brand-l); flex: none; }
.glossary-cta > svg:last-child { width: 18px; height: 18px; margin-left: auto; flex: none; transition: transform .25s var(--ease); }
.glossary-cta b { display: block; font-family: var(--ff-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 4px; }
.glossary-cta span { display: block; font-size: .92rem; color: var(--mute-d); }
@media (hover: hover) {
  .glossary-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
  .glossary-cta:hover > svg:last-child { transform: translateX(5px); }
}

/* ---------- Motion: cross-document view transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .3s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.site-header, .site-footer { view-transition-name: none; }

/* ---------- Motion: hero entrance stagger ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-light .rv > .eyebrow,
  html.js .hero-light .rv > h1,
  html.js .hero-light .rv > .lede,
  html.js .hero-light .rv > .hero-ctas,
  html.js .hero-light .rv > .hero-meta { animation: rise .7s var(--ease) both; }
  html.js .hero-light .rv > h1 { animation-delay: .06s; }
  html.js .hero-light .rv > .lede { animation-delay: .13s; }
  html.js .hero-light .rv > .hero-ctas { animation-delay: .2s; }
  html.js .hero-light .rv > .hero-meta { animation-delay: .27s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Motion: anchor scrolling ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:target { scroll-margin-top: 110px; }

/* ============================================================
   v5 — sectional rhythm. Breaking the light/tint/light monotony
   with a dark band, a stat band, a full-bleed feature and a
   brand-derived divider. No gradient washes, no side tabs.
   ============================================================ */

/* ---------- Divider: hairline + the real logo mark, sheared like the logo ---------- */
.divider { display: flex; align-items: center; gap: 22px; max-width: var(--max);
  margin: 0 auto; padding: 0 var(--gutter); }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: var(--rule); }
.divider img { height: 26px; width: auto; opacity: .5; }
.divider--dark::before, .divider--dark::after { background: var(--rule-d); }

/* ---------- Dark band (rhythm break) ---------- */
.band-dark { background: var(--ink-deep); color: var(--white); }
.band-dark section, .band-dark .section { background: transparent; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--white); }
.band-dark .lede, .band-dark p { color: var(--mute-d); }
.band-dark .eyebrow { color: var(--brand-l); background: rgba(53,179,179,.12); border-color: rgba(53,179,179,.24); }
.band-dark .checklist li svg { color: var(--brand-l); background: rgba(53,179,179,.14); }
.band-dark h2 em { color: var(--brand-l); }

/* ---------- Full-bleed feature band ---------- */
.bleed { position: relative; min-height: clamp(340px, 46vw, 520px); display: flex; align-items: center;
  overflow: hidden; background: var(--ink-deep); }
.bleed-media { position: absolute; inset: 0; }
.bleed-media img { width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22,19,15,.92) 0%, rgba(22,19,15,.74) 45%, rgba(22,19,15,.3) 100%); }
.bleed .wrap { position: relative; z-index: 2; }
.bleed-statement { max-width: 22ch; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; margin: 0; }
.bleed-statement em { font-style: italic; color: var(--brand-l); }
.bleed-sub { color: rgba(255,255,255,.8); max-width: 46ch; margin: 22px 0 0; font-size: 1.02rem; }
.bleed .hero-ctas { margin-top: 30px; }
@media (max-width: 700px) { .bleed::after { background: linear-gradient(180deg, rgba(22,19,15,.72) 0%, rgba(22,19,15,.93) 70%); } }

/* ---------- Section rhythm helpers ---------- */
.section--slim { padding: clamp(44px, 5.5vw, 78px) 0; }
.band-dark + .section, .bleed + .section { padding-top: clamp(60px, 8vw, 108px); }

/* ---------- Standards ---------- */
.stds { display: grid; gap: 0; }
.std { display: grid; grid-template-columns: 190px 1fr; gap: 30px; padding: 26px 0; border-top: 1px solid var(--rule); }
@media (max-width: 780px) { .std { grid-template-columns: 1fr; gap: 10px; } }
.std-code { font-family: var(--ff-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -.01em; color: var(--brand-ink); }
.std h3 { font-size: 1.06rem; font-family: var(--ff-text); font-weight: 700; margin-bottom: .4em; letter-spacing: -.01em; }
.std p { color: var(--mute); font-size: .96rem; max-width: 70ch; margin: 0; }

/* ---------- Credentials ---------- */
.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 980px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .creds { grid-template-columns: 1fr; } }
.cred { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px; }
.cred-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--brand-t); color: var(--brand); margin-bottom: 16px; }
.cred-ic svg { width: 19px; height: 19px; }
.cred b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.cred-v { display: block; font-size: .88rem; font-weight: 600; color: var(--brand-ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cred-n { display: block; font-size: .84rem; color: var(--mute); margin-top: 10px; line-height: 1.5; }
.cred--tbc .cred-v { color: #9a6f06; }
.cred--tbc .cred-ic { background: rgba(176,128,12,.12); color: #9a6f06; }

/* ---------- Calculator ---------- */
.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (max-width: 900px) { .calc-wrap { grid-template-columns: 1fr; } }
.calc-out { background: var(--ink-deep); color: var(--white); border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 38px); }
.calc-hint { color: var(--mute-d); margin: 0; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-d); }
@media (max-width: 520px) { .calc-grid { grid-template-columns: 1fr; gap: 12px; } }
.calc-fig b { display: block; font-family: var(--ff-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; color: var(--brand-l); font-variant-numeric: tabular-nums; }
.calc-fig span { display: block; font-size: .8rem; color: var(--mute-d); margin-top: 5px; }
.calc-range { padding-top: 24px; }
.calc-range-l { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--mute-d); }
.calc-range b { display: block; font-family: var(--ff-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -.03em; margin: 8px 0 12px; color: #fff; font-variant-numeric: tabular-nums; }
.calc-range-n { display: block; font-size: .85rem; color: var(--mute-d); line-height: 1.55; max-width: 46ch; }
.calc-cta { width: 100%; margin-top: 24px; }

/* ---------- Downloads ---------- */
.dls { display: grid; gap: 14px; }
.dl { display: flex; align-items: flex-start; gap: 20px; padding: 26px 28px; background: var(--white); min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); color: inherit;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.dl-ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none;
  border-radius: 13px; background: var(--brand-t); color: var(--brand); }
.dl-ic svg { width: 21px; height: 21px; }
.dl-body { flex: 1; }
.dl-body b { display: block; font-family: var(--ff-display); font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.dl-d { display: block; color: var(--mute); font-size: .95rem; max-width: 64ch; }
.dl-m { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); margin-top: 12px; }
.dl-go { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--rule); color: var(--brand-ink); transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.dl-go svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .dl:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: rgba(8,129,129,.34); }
  .dl:hover .dl-go { background: var(--brand); border-color: var(--brand); color: #fff; }
}

/* Trailing mega-menu panels hang right so they cannot push the page wide */
.nav-links .has-menu:nth-last-of-type(1) .submenu,
.nav-links .has-menu:nth-last-of-type(2) .submenu { left: auto; right: 0; }

/* Tablet: give the mega menu room before the burger takes over */
/* Squeeze band between the burger cutover (1080) and full-width comfort:
   tighter gaps and no phone number, so the six items plus the bigger logo
   never wrap. The phone returns at 1151+ where there is room. */
@media (max-width: 1150px) and (min-width: 1081px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: .88rem; }
  .nav-phone { display: none; }
}

/* Grid and flex children default to min-width:auto and refuse to shrink below
   their min-content width, which overflows narrow phones. */
.split > *, .grid > *, .hero-split > *, .page-hero-split > *,
.calc-wrap > *, .trades > *, .clients > *, .steps > *, .doors > *,
.creds > *, .pill-cards > *, .term > *, .std > * { min-width: 0; }
.prose, .prose * { overflow-wrap: break-word; }

/* Download rows: stack the affordance on very narrow phones */
@media (max-width: 380px) {
  .dl { flex-wrap: wrap; gap: 14px; padding: 22px 20px; }
  .dl-body { flex: 1 1 100%; min-width: 0; }
  .dl-go { margin-left: auto; }
}
.dl-body, .dl-d, .dl-m { min-width: 0; overflow-wrap: break-word; }

/* ============================================================
   v6 — full-bleed hero. Replaces the split/card treatment.
   ============================================================ */
.hero-full {
  position: relative; min-height: 92svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink-deep);
}
.hero-full-media { position: absolute; inset: 0; }
.hero-full-media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .hero-full-media img { animation: heroDrift 26s ease-out both; transform-origin: 60% 55%; }
  @keyframes heroDrift { from { transform: scale(1.001); } to { transform: scale(1.07); } }
}
.hero-full::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,15,12,.94) 0%, rgba(18,15,12,.72) 34%, rgba(18,15,12,.22) 68%, rgba(18,15,12,.42) 100%);
}
.hero-full .wrap { position: relative; z-index: 2; width: 100%;
  padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(40px, 6vw, 68px); }
.hero-full .eyebrow { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); }
.hero-full h1 {
  color: #fff; max-width: 16ch; margin: 0 0 22px;
  font-size: clamp(2.9rem, 7.4vw, 6.2rem); line-height: .96; letter-spacing: -.035em;
}
.hero-full .lede { color: rgba(255,255,255,.86); max-width: 54ch; font-size: clamp(1.06rem, 1.5vw, 1.28rem); }
.hero-full .hero-ctas { margin-top: 32px; }

/* Bleed band can carry the site video instead of a still */
.bleed-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Header sitting over full-bleed dark media ---------- */
.nav-logo { position: relative; display: inline-flex; }
.nav-logo .l-light { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); }
.site-header--over:not(.scrolled):not(.solid) .l-dark { opacity: 0; }
.site-header--over:not(.scrolled):not(.solid) .l-light { opacity: 1; }
.site-header--over:not(.scrolled):not(.solid) .nav-links a,
.site-header--over:not(.scrolled):not(.solid) .nav-phone { color: #fff; }
.site-header--over:not(.scrolled):not(.solid) .nav-phone svg { color: var(--brand-l); }
.site-header--over:not(.scrolled):not(.solid) .nav-burger span { background: #fff; }
.site-header--over:not(.scrolled):not(.solid) .nav-links a[aria-current="page"] { color: var(--brand-l); }
@media (hover: hover) {
  .site-header--over:not(.scrolled):not(.solid) .nav-links a:hover { color: var(--brand-l); }
}
/* Deepen the top of the hero scrim so white nav text always clears its background */
.hero-full::after {
  background:
    linear-gradient(to top, rgba(18,15,12,.94) 0%, rgba(18,15,12,.72) 34%, rgba(18,15,12,.26) 62%, rgba(18,15,12,.62) 100%);
}

/* Heading levels were corrected for screen readers; these keep the visual scale. */
.site-footer .foot-h { font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white); margin: 0 0 18px; font-family: var(--ff-text); line-height: 1.4; }
.card .card-h, .form-shell .card-h { font-family: var(--ff-display); font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600; letter-spacing: -.015em; margin: 0 0 .5em; line-height: 1.12; }
.card .card-h2 { font-family: var(--ff-display); font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600; letter-spacing: -.015em; margin: 0 0 .5em; line-height: 1.12; }
.step h3 { font-family: var(--ff-text); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 .45em; letter-spacing: -.01em; line-height: 1.4; }
.client h3 { font-family: var(--ff-text); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 .5em; letter-spacing: -.01em; line-height: 1.4; }

/* ---------- Projects ---------- */
.projs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
@media (max-width: 980px) { .projs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .projs { grid-template-columns: 1fr; } }
.proj { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden; color: inherit; min-width: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.proj-media { overflow: hidden; background: var(--tint); }
.proj-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .7s var(--ease); }
.proj-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.proj-meta { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 10px; }
.proj h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: .4em; }
.proj p { color: var(--mute); font-size: .94rem; }
.proj .card-link { margin-top: auto; padding-top: 16px; color: var(--brand-ink); font-weight: 650;
  font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.proj .card-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
@media (hover: hover) {
  .proj:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: rgba(8,129,129,.34); }
  .proj:hover .proj-media img { transform: scale(1.04); }
  .proj:hover .card-link svg { transform: translateX(4px); }
}
.proj-facts { margin: 0 0 22px; display: grid; gap: 0; }
.proj-facts > div { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: .92rem; }
.proj-facts dt { color: var(--mute); min-width: 88px; flex: none; }
.proj-facts dd { margin: 0; font-weight: 650; }
.proj-scope-h { font-family: var(--ff-text); font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mute); margin: 4px 0 0; }
.proj-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 820px) { .proj-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proj-gallery { grid-template-columns: 1fr; } }
.proj-gallery a { display: block; border-radius: var(--radius); overflow: hidden; min-width: 0; }
.proj-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .6s var(--ease); }
@media (hover: hover) { .proj-gallery a:hover img { transform: scale(1.05); } }

/* ---------- Footer second row: who / resources / company ---------- */
.footer-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px);
  padding: 6px 0 44px; border-top: 1px solid var(--rule-d); margin-top: 8px; padding-top: 40px; }
@media (max-width: 780px) { .footer-grid2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid2 { grid-template-columns: 1fr; } }
.footer-grid2 > * { min-width: 0; }

/* ---------- Service areas hub ---------- */
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } }
.area { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px); min-width: 0; }
.area .area-h { font-family: var(--ff-display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.12; margin: 0 0 4px; }
.area .area-h a { color: var(--ink); }
@media (hover: hover) { .area .area-h a:hover { color: var(--brand-ink); } }
.area-council { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-ink); margin-bottom: 14px; }
.area p { color: var(--mute); font-size: .93rem; margin: 0 0 16px; }
.area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.area-links a { font-size: .82rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--rule); color: var(--ink); transition: border-color .2s, color .2s; }
@media (hover: hover) { .area-links a:hover { border-color: var(--brand); color: var(--brand-ink); } }

/* ---------- Careers ---------- */
.roles { display: grid; gap: 0; }
.role { display: grid; grid-template-columns: 280px 1fr; gap: 30px; padding: 24px 0;
  border-top: 1px solid var(--rule); }
@media (max-width: 780px) { .role { grid-template-columns: 1fr; gap: 8px; } }
.role > * { min-width: 0; }
.role h3 { font-size: 1.25rem; margin: 0; }
.role p { color: var(--mute); font-size: .96rem; margin: 0; max-width: 66ch; }

/* ---------- Site search ---------- */
.nav-search {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1.5px solid var(--rule); background: transparent;
  color: var(--ink); cursor: pointer; flex: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.nav-search svg { width: 17px; height: 17px; }
@media (hover: hover) { .nav-search:hover { border-color: var(--brand); color: var(--brand); } }
.site-header--over:not(.scrolled):not(.solid) .nav-search { color: #fff; border-color: rgba(255,255,255,.4); }
@media (hover: hover) {
  .site-header--over:not(.scrolled):not(.solid) .nav-search:hover { border-color: #fff; background: rgba(255,255,255,.12); }
}
@media (max-width: 1080px) { .nav-search { width: 34px; height: 34px; } }

.search {
  position: fixed; inset: 0; z-index: 260; background: rgba(22,19,15,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(60px, 12vh, 130px) 20px 20px;
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility .22s;
}
.search.is-open { opacity: 1; visibility: visible; }
.search-panel {
  width: 100%; max-width: 640px; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column;
  max-height: min(74vh, 620px); transform: translateY(-8px); transition: transform .28s var(--ease);
}
.search.is-open .search-panel { transform: none; }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.search-bar > svg { width: 19px; height: 19px; color: var(--mute); flex: none; }
.search-input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.05rem;
  color: var(--ink); outline: none; padding: 4px 0;
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 0; background: var(--tint); border-radius: 50%; color: var(--ink); cursor: pointer;
}
.search-close svg { width: 15px; height: 15px; }
.search-results { overflow-y: auto; padding: 10px; }
.search-hint { color: var(--mute); font-size: .93rem; padding: 18px 12px; margin: 0; }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search-list a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--ink); }
.search-list a.is-active, .search-list a:focus-visible { background: var(--tint); outline: none; }
@media (hover: hover) { .search-list a:hover { background: var(--tint); } }
.search-kind {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink); margin-bottom: 4px;
}
.search-list b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.search-d {
  display: block; font-size: .84rem; color: var(--mute); margin-top: 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.search-foot { padding: 12px 18px; border-top: 1px solid var(--rule); font-size: .78rem; color: var(--mute); }
.search-foot kbd {
  font: inherit; background: var(--tint); border: 1px solid var(--rule);
  border-radius: 5px; padding: 1px 6px; font-size: .74rem;
}
body.search-open { overflow: hidden; }

/* ---------- Quote form: drawing and photo attachment ---------- */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 30px 24px; border: 2px dashed var(--rule); border-radius: 14px;
  background: var(--paper); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--brand-t); color: var(--brand); margin-bottom: 4px; }
.drop-ic svg { width: 20px; height: 20px; }
.drop b { font-size: .98rem; letter-spacing: -.01em; }
.drop-sub { font-size: .85rem; color: var(--mute); max-width: 44ch; }
.drop.is-over { border-color: var(--brand); background: var(--tint); }
@media (hover: hover) { .drop:hover { border-color: var(--brand); } }
.drop:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3.5px rgba(8,129,129,.13); }
.drop-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.drop-list:empty { margin: 0; }
.drop-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 11px; font-size: .88rem; min-width: 0; }
.drop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.drop-size { color: var(--mute); font-size: .82rem; flex: none; font-variant-numeric: tabular-nums; }
.drop-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--tint); color: var(--ink); font-size: 1.05rem; line-height: 1; }
@media (hover: hover) { .drop-x:hover { background: var(--brand); color: #fff; } }
.drop-note.is-bad { color: var(--err); font-weight: 600; }

/* ---------- Reviews ---------- */
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
@media (max-width: 980px) { .revs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .revs { grid-template-columns: 1fr; } }
.revs > * { min-width: 0; }
.rev { margin: 0; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; }
.stars { display: flex; gap: 3px; color: var(--brand); margin-bottom: 14px; }
.stars svg { width: 16px; height: 16px; }
.rev blockquote { margin: 0 0 18px; font-family: var(--ff-display); font-size: 1.06rem;
  line-height: 1.5; font-weight: 500; letter-spacing: -.01em; }
.rev blockquote::before { content: '\201C'; }
.rev blockquote::after { content: '\201D'; }
.rev figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .88rem; }
.rev figcaption b { display: block; letter-spacing: -.01em; }
.rev figcaption span { display: block; color: var(--mute); font-size: .84rem; margin-top: 2px; }
.rev-src { display: inline-block; margin-top: 8px; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }

/* ---------- In-text links must not rely on colour alone (WCAG 1.4.1) ----------
   Scoped to running prose. Nav, cards, buttons and pills are distinguishable
   by position and shape, so they stay clean. */
.prose p a, .prose li a, .lede a, .form-note a, .callout a, .answer a,
.area p a, .rev figcaption a, .term dd a, .std p a, .search-hint a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(6, 114, 114, 0.42);
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
@media (hover: hover) {
  .prose p a:hover, .prose li a:hover, .lede a:hover, .form-note a:hover,
  .callout a:hover, .answer a:hover, .area p a:hover, .term dd a:hover,
  .std p a:hover, .search-hint a:hover { text-decoration-color: var(--brand); }
}


/* ============================================================
   v7 — trade tones. A page declares its trade on <body> and the
   recessed surface follows the material. Accent colour, type and
   spacing are unchanged; only the surface shifts.
   ============================================================ */
body[data-trade="carpentry"]  { --tint: var(--tone-timber); }
body[data-trade="concrete"]   { --tint: var(--tone-stone); }
body[data-trade="guard-rail"] { --tint: var(--tone-steel); }

/* The trade rule is a hairline under the page hero: present, not loud. */
body[data-trade] .page-hero { border-bottom: 3px solid var(--tint); }

/* Reference pages (guides, glossary, standards, tools) read as the library
   rather than the shopfront: a cooler, flatter surface. */
body[data-kind="reference"] { --tint: #ECEFF1; }

/* ---------- Style guide (internal reference, noindex) ---------- */
.sg-group { margin-bottom: clamp(30px, 4vw, 46px); }
.sg-group h3 { font-family: var(--ff-text); font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.sws { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 980px) { .sws { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sws { grid-template-columns: 1fr; } }
.sws > * { min-width: 0; }
.sw { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; }
.sw-chip { display: block; height: 60px; border-radius: 9px; border: 1px solid var(--rule); margin-bottom: 12px; }
.sw code { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.sw b { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: var(--brand-ink); margin: 3px 0 7px; }
.sw span { display: block; font-size: .83rem; color: var(--mute); line-height: 1.5; }
.tones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 780px) { .tones { grid-template-columns: 1fr; } }
.tone { padding: 26px; border-radius: var(--radius); border: 1px solid var(--rule); min-width: 0; }
.tone[data-trade="carpentry"]  { background: var(--tone-timber); }
.tone[data-trade="concrete"]   { background: var(--tone-stone); }
.tone[data-trade="guard-rail"] { background: var(--tone-steel); }
.tone-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: rgba(8,129,129,.1); color: var(--brand); margin-bottom: 14px; }
.tone-ic svg { width: 19px; height: 19px; }
.tone b { display: block; font-family: var(--ff-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; }
.tone span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.bands { display: grid; gap: 0; }
.bandrow { display: grid; grid-template-columns: 220px 160px 1fr; gap: 20px; padding: 16px 0;
  border-top: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 780px) { .bandrow { grid-template-columns: 1fr; gap: 4px; } }
.bandrow > * { min-width: 0; }
.bandrow b { font-size: 1rem; letter-spacing: -.01em; }
.bandrow-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--brand-ink); }
.bandrow span:last-child { color: var(--mute); font-size: .93rem; }
.sg-type { margin: 0 0 .5em; }
.sg-type + .form-note { margin-bottom: 1.4em; }