/* =====================================================================
   Proposr — Marketing site (Ink brand)
   Tokens + landing components
   ===================================================================== */

:root{
  --ink-950:#0a131b; --ink-900:#0e1a24; --ink-800:#18262f; --ink-700:#2a3942;
  --ink-600:#3e4d56; --ink-500:#5a6770; --ink-400:#7e8a92; --ink-300:#a6b0b6;
  --ink-200:#cbd2d6; --ink-100:#e4e8e8; --ink-050:#f1f3f1;
  --paper:#faf8f3; --paper-2:#f4f1ea;
  --acc-700:#1c3b96; --acc-600:#244ab4; --acc-500:#2a55c8; --acc-400:#4e73d6;
  --acc-300:#8aa3e5; --acc-100:#e7ecfb;
  --ok:#2f7d5b; --warn:#b07415; --stop:#a83a2c;
  --serif:"Newsreader", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, monospace;
  --acc:var(--acc-500); --ink:var(--ink-900);
  --ease:cubic-bezier(.22,.7,.2,1);
  --wrap:1200px;            /* content column cap; scales up on ultrawide (see foot of file) */
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink-900); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* wordmark — its square is the PRODUCT mark: pinned to blueprint, never the
   per-segment accent (segment colour lives in the nav crumb beside it) */
.wm{ font-family:var(--serif); font-weight:500; letter-spacing:-0.022em; color:var(--ink-900); line-height:1; display:inline-flex; align-items:baseline; white-space:nowrap; }
.wm .blk{ display:inline-block; width:.15em; height:.15em; background:#2a55c8; margin-left:.05em; transform:translateY(-.01em); border-radius:1px; }
.wm.rev{ color:var(--paper); }

/* buttons */
.btn{ font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.005em; border:0; border-radius:8px; padding:13px 22px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:transform .18s ease, background .18s ease; white-space:nowrap; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(3px); }
.btn-ink{ background:var(--ink-900); color:var(--paper); }
.btn-ink:hover{ background:var(--ink-800); }
.btn-acc{ background:var(--acc-500); color:#fff; }
.btn-acc:hover{ background:var(--acc-600); }
.btn-ghost{ background:transparent; color:var(--ink-900); border:1px solid var(--ink-200); }
.btn-ghost:hover{ border-color:var(--ink-400); }
.btn-sm{ padding:9px 15px; font-size:14px; border-radius:7px; }
.btn-rev{ background:var(--paper); color:var(--ink-900); }
.btn-rev:hover{ background:#fff; }

/* layout */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.ey{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.ey::before{ content:""; width:22px; height:1.5px; background:var(--acc); }

/* ---------- NAV + FOOTER: moved to /nav.css ----------
   The site chrome (header, dropdowns, mobile drawer, footer) is shared by
   every marketing page — including the self-contained features pages and the
   guides, which do NOT load this file — so it lives in /nav.css and is
   enforced against docs/marketing/partials/ by scripts/check-nav-drift.mjs. */

/* ---------- HERO ---------- */
.hero{ padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,72px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,68px); align-items:center; }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,76px); line-height:1.0; letter-spacing:-0.03em; margin:0; }
.hero h1 em{ font-style:italic; color:var(--ink-600); }
.hero .lede{ margin:26px 0 0; font-size:clamp(16px,1.7vw,19px); line-height:1.55; color:var(--ink-600); max-width:46ch; }
.hero .cta{ display:flex; gap:13px; margin-top:34px; flex-wrap:wrap; }
.hero .meta{ margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-400); display:flex; gap:18px; flex-wrap:wrap; }
.hero .meta span{ display:flex; align-items:center; gap:7px; }
.hero .meta .d{ width:5px; height:5px; border-radius:50%; background:var(--ok); }

/* hero document visual */
.doc-vis{ position:relative; }
.doc-paper{ background:#fff; border:1px solid var(--ink-100); border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 40px 80px -38px rgba(14,26,36,.45); overflow:hidden; transform:rotate(1.2deg); }
.doc-paper .band{ height:7px; background:var(--acc-500); }
.doc-pad{ padding:30px 32px; }
.dv-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.dv-brand{ display:flex; align-items:center; gap:9px; }
.dv-mark{ width:30px; height:30px; border-radius:5px; background:var(--ink-900); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:11px; }
.dv-name{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-800); line-height:1.2; }
.dv-meta{ text-align:right; font-family:var(--mono); font-size:8.5px; line-height:1.7; color:var(--ink-400); }
.dv-title{ font-family:var(--serif); font-weight:500; font-size:27px; letter-spacing:-0.02em; margin:22px 0 3px; color:var(--ink-900); }
.dv-sub{ font-family:var(--sans); font-size:11.5px; color:var(--ink-500); margin:0 0 18px; }
.mini-budget{ width:100%; border-collapse:collapse; }
.mini-budget td{ font-family:var(--sans); font-size:11.5px; color:var(--ink-800); padding:7px 0; border-bottom:1px solid var(--ink-100); }
.mini-budget td.n{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.mini-budget tr.tot td{ border-bottom:0; padding-top:13px; font-weight:600; }
.mini-budget tr.tot td.n{ font-family:var(--serif); font-size:17px; }
.dv-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--ink-100); }
.dv-accept{ font-family:var(--sans); font-weight:600; font-size:10.5px; color:#fff; background:var(--acc-500); padding:7px 13px; border-radius:6px; }
.dv-eng{ font-family:var(--mono); font-size:9px; color:var(--ink-400); display:flex; align-items:center; gap:6px; }
.dv-eng .d{ width:5px; height:5px; border-radius:50%; background:var(--acc-500); }
/* floating chips */
.float{ position:absolute; background:#fff; border:1px solid var(--ink-100); border-radius:10px; box-shadow:0 18px 40px -20px rgba(14,26,36,.4); padding:11px 14px; display:flex; align-items:center; gap:10px; font-family:var(--sans); }
.float .ic{ width:30px; height:30px; border-radius:7px; display:grid; place-items:center; flex:none; }
.float .ft{ font-size:12px; font-weight:600; color:var(--ink-900); line-height:1.25; }
.float .fs{ font-size:10.5px; color:var(--ink-400); font-family:var(--mono); }
.float.f1{ top:-22px; right:-14px; }
.float.f2{ bottom:34px; left:-30px; }

/* logos strip */
.trust{ padding:36px 0 8px; }
.trust .lbl{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-400); margin-bottom:20px; }
.trust .row{ display:flex; justify-content:center; align-items:center; gap:clamp(24px,5vw,56px); flex-wrap:wrap; opacity:.8; }
.trust .row .name{ font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink-500); letter-spacing:.01em; }

/* ---------- SECTION SCAFFOLD ---------- */
.section{ padding:clamp(64px,9vw,110px) 0; }
.section.dark{ background:var(--ink-900); color:var(--paper); }
.section.alt{ background:var(--paper-2); }
.section.dark .ey{ color:var(--acc-300); }
.section.dark .ey::before{ background:var(--acc-300); }
.sec-title{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.4vw,52px); line-height:1.04; letter-spacing:-0.025em; margin:0; max-width:20ch; }
.section.dark .sec-title{ color:var(--paper); }
.sec-intro{ font-size:clamp(16px,1.7vw,19px); line-height:1.55; color:var(--ink-600); max-width:54ch; margin:22px 0 0; }
.section.dark .sec-intro{ color:var(--ink-300); }
.head-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(38px,5vw,60px); }

/* problem statement */
.statement{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,46px); line-height:1.18; letter-spacing:-0.02em; max-width:24ch; }
.statement .mut{ color:var(--ink-300); }
.statement .acc{ color:var(--acc-500); font-style:italic; }
.section.dark .statement .mut{ color:var(--ink-600); }

/* steps / how it works */
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,30px); }
.step{ border-top:2px solid var(--ink-900); padding-top:22px; }
.section.dark .step{ border-color:var(--acc-400); }
.step .num{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--acc-500); }
.section.dark .step .num{ color:var(--acc-300); }
.step h3{ font-family:var(--serif); font-weight:500; font-size:24px; letter-spacing:-0.015em; margin:14px 0 10px; }
.step p{ font-size:15px; line-height:1.55; color:var(--ink-600); margin:0; }
.section.dark .step p{ color:var(--ink-300); }

/* doc-type gallery */
.types{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.type-card{ background:#fff; border:1px solid var(--ink-100); border-radius:10px; padding:22px; min-height:178px; display:flex; flex-direction:column; }
.type-card .tnum{ font-family:var(--mono); font-size:11px; color:var(--ink-300); }
.type-card .glyph{ flex:1; display:flex; align-items:center; justify-content:center; padding:14px 0; }
.type-card h4{ font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:-0.01em; margin:0 0 5px; }
.type-card p{ font-size:13px; color:var(--ink-500); margin:0; line-height:1.45; }

/* feature split (budget / portal) */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.feature.rev .fig{ order:-1; }
.feature ul.checks{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.feature ul.checks li{ display:flex; gap:12px; font-size:15.5px; color:var(--ink-700); line-height:1.45; }
/* tick drawn with a mask so it inherits each page's accent (see segment layer) */
.feature ul.checks li::before{ content:""; width:20px; height:20px; border-radius:50%; background:var(--acc-100); flex:none; margin-top:1px; position:relative; }
.feature ul.checks li{ position:relative; }
.feature ul.checks li::after{ content:""; position:absolute; left:0; top:1px; width:20px; height:20px;
  background:var(--acc-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14.5 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14.5 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.section.dark .feature ul.checks li{ color:var(--ink-200); }

/* budget figure */
.fig-card{ background:#fff; border:1px solid var(--ink-100); border-radius:12px; box-shadow:0 30px 60px -36px rgba(14,26,36,.4); overflow:hidden; }
.fig-bar{ padding:14px 18px; background:var(--paper-2); border-bottom:1px solid var(--ink-100); display:flex; justify-content:space-between; align-items:center; }
.fig-bar .t{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-700); }
.fig-bar .rev-tag{ font-family:var(--mono); font-size:10.5px; color:var(--acc-500); }
.fig-body{ padding:22px 24px; }
.budget2{ width:100%; border-collapse:collapse; }
.budget2 th{ text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); font-weight:500; padding:0 0 9px; border-bottom:1.5px solid var(--ink-900); }
.budget2 th.n, .budget2 td.n{ text-align:right; font-variant-numeric:tabular-nums; }
.budget2 td{ font-family:var(--sans); font-size:13px; color:var(--ink-800); padding:10px 0; border-bottom:1px solid var(--ink-100); }
.budget2 td.n{ font-family:var(--mono); }
.budget2 td .rate-src{ display:inline-block; font-family:var(--mono); font-size:9px; color:var(--acc-500); background:var(--acc-100); border-radius:3px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.budget2 tr.tot td{ border-bottom:0; padding-top:14px; font-weight:600; }
.budget2 tr.tot td.n{ font-family:var(--serif); font-size:19px; color:var(--ink-900); }
.budget2 tr.tot td.lab{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11px; color:var(--ink-500); }

/* portal figure */
.portal-fig{ background:#fff; border:1px solid var(--ink-100); border-radius:12px; box-shadow:0 30px 60px -36px rgba(14,26,36,.4); overflow:hidden; }
.pf-bar{ display:flex; align-items:center; justify-content:space-between; padding:11px 16px; background:var(--ink-900); }
.pf-bar .l{ display:flex; align-items:center; gap:10px; }
.pf-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); border-left:1px solid rgba(255,255,255,.2); padding-left:10px; }
.pf-bar .accept{ font-family:var(--sans); font-weight:600; font-size:11px; color:#fff; background:var(--acc-500); padding:7px 13px; border-radius:6px; }
.pf-body{ padding:24px; background:var(--paper); }
.pf-row{ display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--ink-100); }
.pf-row:last-child{ border-bottom:0; }
.pf-av{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:10px; color:#fff; }
.pf-c .who{ font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink-900); }
.pf-c .what{ font-family:var(--sans); font-size:12px; color:var(--ink-500); margin-top:1px; }
.pf-c .when{ font-family:var(--mono); font-size:9.5px; color:var(--ink-300); margin-top:3px; }

/* stat chips inside dark AI section */
.ai-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,5vw,64px); align-items:center; }
.term{ background:#0a131b; border:1px solid var(--ink-700); border-radius:12px; overflow:hidden; font-family:var(--mono); }
.term-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--ink-700); }
.term-bar .dot{ width:10px; height:10px; border-radius:50%; }
.term-bar .tt{ margin-left:8px; font-size:10.5px; color:var(--ink-400); letter-spacing:.06em; }
.term-body{ padding:18px; font-size:12.5px; line-height:1.9; }
.term .pmt{ color:var(--acc-300); }
.term .cmt{ color:var(--ink-500); }
.term .out{ color:var(--ink-200); }
.term .key{ color:#7fd1a8; }

/* closing CTA */
.cta-final{ text-align:center; }
.cta-final h2{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5.5vw,68px); line-height:1.02; letter-spacing:-0.03em; margin:0 auto; max-width:18ch; }
.cta-final .lede{ margin:24px auto 0; max-width:48ch; color:var(--ink-300); font-size:18px; line-height:1.55; }
.cta-final .cta{ display:flex; gap:13px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* footer: moved to /nav.css (see the NAV + FOOTER note above) */

@media (max-width:900px){
  .hero-grid,.feature,.ai-grid,.head-split{ grid-template-columns:1fr; }
  .feature.rev .fig{ order:0; }
  .steps3{ grid-template-columns:1fr; }
  .types{ grid-template-columns:1fr 1fr; }
  /* Hero proof chips are pinned to the document card's edges by design. The card
     goes full-width on tablet/mobile, so the chips would hang past the viewport
     and get clipped. Hide them here; the document already carries the same proof. */
  .float{ display:none; }
}
@media (max-width:520px){
  .types{ grid-template-columns:1fr; }
}

/* =====================================================================
   App-integration polish — responsive range, mobile nav, a11y
   Added when porting the marketing site into the Proposr repo. Everything
   below is ADDITIVE: it does not alter the desktop design, only fills the
   gaps (ultrawide presence, sub-900 navigation, focus, reduced motion).
   ===================================================================== */

/* ---------- Ultrawide: let the column breathe without breaking measure ----------
   Body copy is capped in `ch`, so line length stays readable; the wider wrap
   gives the grids, figures and full-bleed dark bands more presence on big glass. */
@media (min-width:1600px){ :root{ --wrap:1320px; } }
@media (min-width:2000px){ :root{ --wrap:1440px; } }
@media (min-width:2560px){ :root{ --wrap:1520px; } }

/* ---------- Keyboard focus ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--acc-500); outline-offset:2px; border-radius:4px;
}

/* Mobile nav (hamburger + drawer): moved to /nav.css, behaviour in /nav.js */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important;
  }
  .doc-paper{ transform:none; }
}

/* Nav dropdowns: moved to /nav.css (see the NAV + FOOTER note above) */

/* =====================================================================
   Content / legal pages (/about, /security, /privacy, /terms)
   ===================================================================== */
.legal-hero{ padding:clamp(48px,7vw,92px) 0 clamp(24px,3.5vw,38px); border-bottom:1px solid var(--ink-100); }
.legal-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,56px);
  line-height:1.04; letter-spacing:-0.03em; margin:0; max-width:18ch; }
.legal-hero .lede{ font-size:clamp(16px,1.7vw,18.5px); line-height:1.55; color:var(--ink-600); margin:18px 0 0; max-width:60ch; }
.legal-hero .stamp{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-400); margin:16px 0 0; }
.draft-note{ display:flex; gap:11px; align-items:flex-start; max-width:760px; margin:22px auto 0;
  background:#fdf6e8; border:1px solid #ecd9b0; border-radius:11px; padding:13px 16px;
  font-size:13.5px; line-height:1.5; color:#6b4e16; }
.draft-note b{ color:#533c10; }
.legal{ max-width:760px; margin:0 auto; padding:clamp(36px,5vw,60px) 0 clamp(64px,9vw,110px); }
.legal h2{ font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.5vw,28px);
  letter-spacing:-0.02em; margin:clamp(34px,4.5vw,52px) 0 12px; color:var(--ink-900); }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-family:var(--sans); font-weight:600; font-size:16.5px; color:var(--ink-900); margin:26px 0 8px; }
.legal p, .legal li{ font-size:16px; line-height:1.72; color:var(--ink-700); }
.legal p{ margin:12px 0; }
.legal ul{ padding-left:22px; margin:12px 0; }
.legal li{ margin:7px 0; }
.legal a{ color:var(--acc-600); }
.legal strong{ color:var(--ink-900); }
.legal .fill{ font-family:var(--mono); font-size:.9em; background:var(--acc-100); color:var(--acc-700);
  border-radius:4px; padding:1px 6px; white-space:nowrap; }
.legal .toc{ background:var(--paper-2); border:1px solid var(--ink-100); border-radius:12px; padding:18px 22px; margin:0 0 8px; }
.legal .toc ul{ list-style:none; padding:0; margin:0; columns:2; column-gap:28px; }
.legal .toc a{ font-size:14.5px; font-weight:500; }

/* =====================================================================
   SEGMENT IDENTITY LAYER — "one system, five trades"
   The Ink brand (paper, ink, type) is constant; each audience page remaps
   the ACCENT ladder via <body data-seg="…">, so eyebrows, bands, range
   tracks, ticks, tags and dark-section tints all speak that trade's colour
   while the page stays unmistakably Proposr.
     overview     blueprint  #2a55c8   (the master brand — no remap)
     residential  brick clay #a5422c   (terracotta, domestic)
     commercial   steel      #376681   (structural slate, institutional)
     trades       safety     #b84d11   (hi-vis energy)
     consultants  report     #20737d   (survey teal, analytical)
   ===================================================================== */
body[data-seg="residential"]{
  --acc-700:#7c2f1e; --acc-600:#933a26; --acc-500:#a5422c; --acc-400:#bc6450;
  --acc-300:#d49585; --acc-100:#f3e2dc; --acc:var(--acc-500);
}
body[data-seg="commercial"]{
  --acc-700:#26475a; --acc-600:#2e556e; --acc-500:#376681; --acc-400:#5b86a0;
  --acc-300:#93acbe; --acc-100:#e2eaf0; --acc:var(--acc-500);
}
body[data-seg="trades"]{
  --acc-700:#8a3a0e; --acc-600:#a24410; --acc-500:#b84d11; --acc-400:#ce7140;
  --acc-300:#e0a07e; --acc-100:#f8e7db; --acc:var(--acc-500);
}
body[data-seg="consultants"]{
  --acc-700:#14525a; --acc-600:#1a636c; --acc-500:#20737d; --acc-400:#4a929b;
  --acc-300:#84b7bd; --acc-100:#dfeef0; --acc:var(--acc-500);
}

/* Nav segment crumb + dropdown dots/segment-map: moved to /nav.css */

/* ---------- Hero motifs — each trade's visual world, behind content ---------- */
.hero{ position:relative; overflow:hidden; }
.hero > .wrap{ position:relative; z-index:1; }
.hero-motif{ position:absolute; pointer-events:none; z-index:0; }
/* overview: blueprint grid, fading out from the top */
body[data-seg="home"] .hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(color-mix(in srgb, var(--acc-500) 9%, transparent) 1px, transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg, color-mix(in srgb, var(--acc-500) 9%, transparent) 1px, transparent 1px) 0 0/56px 100%;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%, #000 25%, transparent 78%);
          mask-image:radial-gradient(130% 100% at 50% 0%, #000 25%, transparent 78%); }
/* commercial: curtain-wall mullions, column-dominant */
body[data-seg="commercial"] .hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--acc-500) 11%, transparent) 1px, transparent 1px) 0 0/44px 100%,
    linear-gradient(color-mix(in srgb, var(--acc-500) 8%, transparent) 1px, transparent 1px) 0 0/100% 128px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 86%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 86%); }
/* trades: hazard-tape eyebrow rule (replaces the plain line, hero only) */
body[data-seg="trades"] .hero .ey::before,
body[data-seg="trades"] .hero .seg-eyebrow::after{ content:""; width:40px; height:9px; border-radius:2px;
  background:repeating-linear-gradient(135deg, var(--acc-500) 0 5px, var(--ink-900) 5px 10px); }
/* residential + consultants get inline SVG motifs (roofline / contours) that
   draw themselves in — see .hero-motif path rules in the motion layer below */

/* =====================================================================
   MOTION — the splash's assemble language, woven through every page.
   Gated by html.js-anim (set pre-paint by an inline head script ONLY when
   JS runs and reduced-motion is off), so no-JS and reduced-motion users
   always get the complete static page.
   ===================================================================== */
@keyframes rvUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes rvCard{ from{ opacity:0; transform:translateY(26px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes rvBand{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes rvRow{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
@keyframes rvPop{ 0%{ opacity:0; transform:scale(1.5) rotate(-7deg); } 60%{ opacity:1; } 100%{ opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes rvDot{ 0%{ opacity:0; transform:scale(0); } 100%{ opacity:1; transform:scale(1); } }
@keyframes motifDraw{ to{ stroke-dashoffset:0; } }

/* scroll reveals (site.js tags .rv + sets --rvd stagger, adds .in on entry) */
html.js-anim .rv{ opacity:0; }
html.js-anim .rv.in{ animation:rvUp .68s var(--ease) both; animation-delay:var(--rvd,0ms); }

/* hero load: copy staggers in */
html.js-anim .hero-copy > *:nth-child(1){ animation:rvUp .6s var(--ease) .05s both; }
html.js-anim .hero-copy > *:nth-child(2){ animation:rvUp .6s var(--ease) .13s both; }
html.js-anim .hero-copy > *:nth-child(3){ animation:rvUp .6s var(--ease) .21s both; }
html.js-anim .hero-copy > *:nth-child(4){ animation:rvUp .6s var(--ease) .29s both; }
html.js-anim .hero-copy > *:nth-child(5){ animation:rvUp .6s var(--ease) .37s both; }

/* hero document assembles: card rises, band wipes, rows cascade, chips stamp */
html.js-anim .hero .doc-vis > :first-child{ animation:rvCard .8s var(--ease) .3s both; }
html.js-anim .hero .doc-vis .band,
html.js-anim .hero .doc-vis .a-band{ transform-origin:left center; animation:rvBand .55s var(--ease) .85s both; }
html.js-anim .hero .doc-vis table tr,
html.js-anim .hero .doc-vis .pk-row{ animation:rvRow .45s var(--ease) both; }
html.js-anim .hero .doc-vis table tr:nth-child(1), html.js-anim .hero .doc-vis .pk-row:nth-child(1){ animation-delay:1.0s; }
html.js-anim .hero .doc-vis table tr:nth-child(2), html.js-anim .hero .doc-vis .pk-row:nth-child(2){ animation-delay:1.09s; }
html.js-anim .hero .doc-vis table tr:nth-child(3), html.js-anim .hero .doc-vis .pk-row:nth-child(3){ animation-delay:1.18s; }
html.js-anim .hero .doc-vis table tr:nth-child(4), html.js-anim .hero .doc-vis .pk-row:nth-child(4){ animation-delay:1.27s; }
html.js-anim .hero .doc-vis table tr:nth-child(5), html.js-anim .hero .doc-vis .pk-row:nth-child(5){ animation-delay:1.36s; }
html.js-anim .hero .doc-vis table tr:nth-child(6), html.js-anim .hero .doc-vis .pk-row:nth-child(6){ animation-delay:1.45s; }
/* the proof chips land last — the splash's "seal" moment */
html.js-anim .hero .doc-vis .float,
html.js-anim .hero .doc-vis .anal-chip{ animation:rvPop .55s cubic-bezier(.3,1.3,.5,1) both; }
html.js-anim .hero .doc-vis .float.f1, html.js-anim .hero .doc-vis .anal-chip.a1{ animation-delay:1.75s; }
html.js-anim .hero .doc-vis .float.f2, html.js-anim .hero .doc-vis .anal-chip.a2{ animation-delay:2.15s; }
/* residential range card: track band grows, marker drops in */
html.js-anim .hero .cb-track .band{ transform-origin:left center; animation:rvBand .6s var(--ease) 1.15s both; }
html.js-anim .hero .cb-track .mk{ animation:rvDot .4s cubic-bezier(.3,1.3,.5,1) 1.7s both; }
html.js-anim .hero .cb-vals > div{ animation:rvUp .5s var(--ease) both; }
html.js-anim .hero .cb-vals > div:nth-child(1){ animation-delay:.95s; }
html.js-anim .hero .cb-vals > div:nth-child(2){ animation-delay:1.05s; }
html.js-anim .hero .cb-vals > div:nth-child(3){ animation-delay:1.15s; }
html.js-anim .hero .cb-notes .cb-note{ animation:rvUp .5s var(--ease) both; }
html.js-anim .hero .cb-notes .cb-note:nth-child(1){ animation-delay:1.45s; }
html.js-anim .hero .cb-notes .cb-note:nth-child(2){ animation-delay:1.54s; }
html.js-anim .hero .cb-notes .cb-note:nth-child(3){ animation-delay:1.63s; }
html.js-anim .hero .cb-notes .cb-note:nth-child(4){ animation-delay:1.72s; }
/* consultants report: pill pops, metrics rise */
html.js-anim .hero .rec-pill{ animation:rvPop .5s cubic-bezier(.3,1.3,.5,1) 1.1s both; }
html.js-anim .hero .feas-metrics .fm{ animation:rvUp .5s var(--ease) both; }
html.js-anim .hero .feas-metrics .fm:nth-child(1){ animation-delay:1.4s; }
html.js-anim .hero .feas-metrics .fm:nth-child(2){ animation-delay:1.49s; }
html.js-anim .hero .feas-metrics .fm:nth-child(3){ animation-delay:1.58s; }
html.js-anim .hero .feas-metrics .fm:nth-child(4){ animation-delay:1.67s; }

/* the h1 full stop — the brand square, clicking in like the splash period */
.h1-dot{ display:inline-block; width:.125em; height:.125em; background:var(--acc-500);
  margin-left:.07em; border-radius:.018em; }
html.js-anim .hero h1 .h1-dot{ animation:rvDot .42s cubic-bezier(.3,1.4,.5,1) 1.5s both; }
/* typed em (homepage): letters revealed by site.js; caret matches the splash */
.type-caret{ display:inline-block; width:.05em; height:.78em; background:var(--acc-500);
  margin-left:.04em; border-radius:.01em; transform:translateY(.06em); animation:typeCaret .82s step-end infinite; }
@keyframes typeCaret{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* inline SVG motifs draw in (residential roofline, consultants contours) */
html.js-anim .hero-motif path{ stroke-dasharray:1; stroke-dashoffset:1; animation:motifDraw 2s var(--ease) forwards; }
html.js-anim .hero-motif path:nth-child(1){ animation-delay:.45s; }
html.js-anim .hero-motif path:nth-child(2){ animation-delay:.85s; }
html.js-anim .hero-motif path:nth-child(3){ animation-delay:1.25s; }
html.js-anim .hero-motif path:nth-child(4){ animation-delay:1.6s; }