:root{
  --surface:#F4F3EF; --surface-raised:#FBFAF8; --surface-sunken:#E9E7E0;
  --panel:#121417; --panel-border:#2A2F35;
  --border-hairline:#DEDBD2; --border:#C9C6BE; --border-strong:#8B8779;
  --heading:#14181B; --body:#3C4147; --muted:#5F6369;
  --on-panel-heading:#F4F3EF; --on-panel-body:#C9C6BE; --on-panel-muted:#9DA1A7;
  --accent:#6A3F96; --accent-hover:#58347C; --accent-text:#602F90; --accent-soft:#F0E9F6; --accent-on-panel:#BFA4DA;
  --focus-ring:#25528C;
  --verdict-verified:#155C46; --verdict-indicative:#25528C; --verdict-insufficient:#5F6369; --verdict-refused:#14181B;
  /* action: the production value where a control carries a white label (white on #C24E0F measured 4.60:1 at 17px/600);
     the estate's other construction is an orange FRAME with a paper inset and an ink label (17.1:1), used at the close */
  --action:#C24E0F; --action-hover:#AD4409;
  /* phosphor: bounded utility token */
  --phosphor:#43610A; --phosphor-on-dark:#A6E24C;
  /* ambient expression, OPTION 2 (Founder choice, 18 Sep 2026) */
  --amb-sea-glass:#A9C1B6; --amb-aqua:#7CB2B6; --amb-periwinkle:#8D94BC; --amb-soft-violet:#9379AD; --amb-violet-anchor:#6B4097;
  --holvem-fold:31deg;
  /* a 31 deg chamfer: dy/dx = tan(31) = 0.6009 */
  --ch-x:36.6px; --ch-y:22px;
  --cond:#7CB2B6; --cond-deep:#3E8A90; --cond-ink:#1F5D62;
  --font:"Geist", Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --frame:1296px; --gutter:16px; --r:8px; --r-field:4px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.28s;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (min-width:720px){ :root{ --gutter:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--surface); color:var(--body); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--accent-text); }
b{ font-weight:600; }
.frame{ width:100%; max-width:var(--frame); margin:0 auto; padding:0 var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
[hidden]{ display:none !important; }
/* ---------- type ---------- */
.kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:10px; }
.kicker b{ font-variant-numeric:tabular-nums; color:var(--heading); }
.kicker b::after{ content:""; display:inline-block; width:14px; height:1px; background:var(--border-strong); margin-left:10px; vertical-align:middle; }
.h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.8px; font-weight:600; color:var(--heading); text-wrap:balance; max-width:22ch; }
.lede{ font-size:17.5px; line-height:1.55; color:var(--body); max-width:62ch; }
.sec-head{ display:grid; gap:14px; }
.sec-head .lede{ margin-top:4px; }
@media (min-width:1000px){ .sec-head{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:end; } .sec-head .lede{ margin-top:0; } }
.h2[id]{ scroll-margin-top:16px; }

/* ---------- ambient surfaces (integration kit construction): the plate is carried on a pseudo-element over the
   section's locked ground at a DOSE, a uniform alpha composite; it changes no edge's width, position or angle ---------- */
.amb{ position:relative; isolation:isolate; }
.amb::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:cover; opacity:var(--amb-dose,1); }
.amb > *{ position:relative; z-index:1; }
.amb-c-light::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gc-light-v50%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-429.98%22 y1=%22-750.03%22 x2=%22291.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23A1B8AE%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ADC4B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v51%22 gradientUnits=%22userSpaceOnUse%22 x1=%22673.14%22 y1=%22220.43%22 x2=%22811.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%2376AAAE%22/%3E%3Cstop offset=%221%22 stop-color=%22%2382B5B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v52%22 gradientUnits=%22userSpaceOnUse%22 x1=%221354.78%22 y1=%22123.31%22 x2=%221551.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23878DB4%22/%3E%3Cstop offset=%221%22 stop-color=%22%239299BF%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v53%22 gradientUnits=%22userSpaceOnUse%22 x1=%221859.66%22 y1=%22264.58%22 x2=%221971.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%238C74A5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23987FB1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v54%22 gradientUnits=%22userSpaceOnUse%22 x1=%221971.07%22 y1=%22450.00%22 x2=%222692.13%22 y2=%221650.03%22%3E%3Cstop offset=%220%22 stop-color=%22%2372499C%22/%3E%3Cstop offset=%221%22 stop-color=%22%23663D90%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 1040.000,0.000 -457.852,900.000 -7497.852,900.000%22 fill=%22url%28%23gc-light-v50%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221040.000,0.000 1560.000,0.000 62.148,900.000 -457.852,900.000%22 fill=%22url%28%23gc-light-v51%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221560.000,0.000 2300.000,0.000 802.148,900.000 62.148,900.000%22 fill=%22url%28%23gc-light-v52%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222300.000,0.000 2720.000,0.000 1222.148,900.000 802.148,900.000%22 fill=%22url%28%23gc-light-v53%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222720.000,0.000 9000.000,0.000 7502.148,900.000 1222.148,900.000%22 fill=%22url%28%23gc-light-v54%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); }
/* ---------- furniture: HOLVEM Furniture Top (site-wide), as home-v1 carries it; the coloured signature (R1-03-15);
   the settled IA (R1-04-10): one item "Buildings & applications", two-column dropdown ---------- */
.response{ font-family:var(--mono); font-size:12px; line-height:18px; padding:12px var(--gutter); text-align:center; border-bottom:1px solid var(--border); color:var(--muted); background:var(--surface); }
.response .tel{ color:var(--heading); white-space:nowrap; }
.masthead{ position:relative; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); }
.masthead .frame{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:107px; padding-top:24px; padding-bottom:24px; }
.masthead .logo{ display:inline-flex; align-items:center; flex-shrink:0; width:auto; height:auto; font-size:0; line-height:0; text-decoration:none; }
.masthead .logo svg{ width:209.25px; height:58.33px; display:block; }
.masthead .logo:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; }
.masthead nav{ display:none; gap:24px; align-items:center; font-size:14px; line-height:24px; }
.masthead nav > a, .masthead .navitem > a{ display:flex; align-items:center; gap:6px; color:var(--heading); text-decoration:none; padding:6px 0; }
.masthead .navitem{ position:relative; }
.masthead .navitem > a::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-2px) rotate(45deg); }
.masthead nav a[aria-current="page"], .masthead .navitem[data-current] > a{ box-shadow:inset 0 -2px 0 var(--heading); }
.masthead .sub{ position:absolute; left:-12px; top:100%; padding:12px 0 0; display:none; z-index:20; min-width:288px; }
.masthead .sub a{ display:block; padding:12px 18px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:14px; line-height:24px; color:var(--heading); text-decoration:none; }
.masthead .sub a:first-child{ border-top:1px solid var(--border); border-radius:var(--r) var(--r) 0 0; }
.masthead .sub a:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--r) var(--r); }
.masthead .sub a:hover, .masthead .sub a:focus-visible{ background:var(--surface-sunken); }
.masthead .sub a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); }
.masthead .navitem:hover .sub, .masthead .navitem:focus-within .sub, .masthead .navitem.is-open .sub{ display:block; }
.masthead .navitem.is-closed .sub{ display:none; }
.menu-button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--heading); padding:8px 12px; border:1.5px solid var(--border-strong); border-radius:var(--r); }
.menu-button i{ width:16px; height:10px; border-top:2px solid var(--heading); border-bottom:2px solid var(--heading); position:relative; }
.menu-button i::after{ content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid var(--heading); }
.menu-button[aria-expanded="true"]{ background:var(--heading); color:var(--on-panel-heading); border-color:var(--heading); }
.menu-button[aria-expanded="true"] i, .menu-button[aria-expanded="true"] i::after{ border-color:var(--on-panel-heading); }
.menu-button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.menu{ background:var(--surface-raised); border-bottom:1px solid var(--border); }
.menu[hidden]{ display:none; }
.menu-grid{ display:grid; gap:0; padding-top:12px; padding-bottom:20px; }
.menu .mgroup{ padding:6px 0; border-bottom:1px solid var(--border); display:grid; }
.menu .mhub{ font-weight:500; color:var(--heading); text-decoration:none; padding:8px 0; font-size:17px; }
.menu .msub{ padding:6px 0 6px 18px; font-size:16px; color:var(--body); text-decoration:none; }
.menu .msub[aria-current="page"]{ color:var(--heading); box-shadow:inset 3px 0 0 var(--accent); padding-left:15px; }
.menu > .frame > .mhub{ padding:14px 0 6px; }
.menu .tel{ display:block; padding:12px 0; font-size:14px; color:var(--muted); font-family:var(--mono); }
@media (min-width:1110px){
  .masthead nav{ display:flex; }
  .menu-button, .menu{ display:none !important; }
}
@media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:14px; } .masthead nav a{ white-space:nowrap; } }
@media (max-width:519px){ .response{ font-size:11px; line-height:16px; padding:10px var(--gutter); } .response .tel{ display:block; margin-top:2px; } }
@media (min-width:1110px) and (max-width:1259px){ .masthead nav{ gap:12px; font-size:13.5px; } .masthead .frame{ gap:10px; } }
.masthead .sub .subgroup{ display:block; padding:10px 18px 4px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.menu .mgroup .msubgroup{ padding:8px 0 2px 18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
/* the masthead action is a BUTTON (R1-SITE-03; standard s9 masthead exemption): the served construction, a small arrow that travels on hover */
.masthead .desktop-cta{ display:none; align-items:center; gap:10px; padding:12px 24px; border:2px solid var(--border-strong); border-radius:var(--r); font-size:16px; line-height:24px; font-weight:400; color:var(--heading); text-decoration:none; white-space:nowrap; background:transparent; transition:background-color var(--dur), border-color var(--dur); }
.masthead .desktop-cta svg{ width:14px; height:14px; flex:none; transition:transform var(--dur) var(--ease); }
.masthead .desktop-cta:hover{ background:var(--surface-sunken); border-color:var(--heading); }
.masthead .desktop-cta:hover svg{ transform:translateX(3px); }
.masthead .desktop-cta:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
@media (min-width:1110px){ .masthead .desktop-cta{ display:inline-flex; } }
@media (min-width:1110px) and (max-width:1259px){ .masthead .desktop-cta{ font-size:14px; padding:9px 16px; gap:8px; } }
/* the settled IA: one item, two columns */
.masthead .sub.sub-2{ min-width:560px; display:none; }
.masthead .navitem:hover .sub-2, .masthead .navitem:focus-within .sub-2, .masthead .navitem.is-open .sub-2{ display:grid; grid-template-columns:1fr 1fr; }
.masthead .navitem.is-closed .sub-2{ display:none; }
.masthead .sub-2 > div{ display:grid; }
.masthead .sub-2 > div:first-child a, .masthead .sub-2 > div:first-child .subgroup{ border-right:0; }
.masthead .sub-2 > div:first-child a:first-child, .masthead .sub-2 > div:first-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:var(--r) 0 0 0; }
.masthead .sub-2 > div:last-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:0 var(--r) 0 0; }
.masthead .sub-2 > div:first-child a:last-child{ border-radius:0 0 0 var(--r); border-bottom:1px solid var(--border); }
.masthead .sub-2 > div:last-child a:last-child{ border-radius:0 0 var(--r) 0; border-bottom:1px solid var(--border); }
.masthead .sub-2 .subgroup{ border-top:0; }
.masthead .sub-2 > div:first-child .subgroup{ border-radius:var(--r) 0 0 0; }
.masthead .sub-2 .all{ font-weight:600; color:var(--accent-text); }
/* the tablet single-line band (1110-1259) is where the masthead is tight: the item wraps to two lines inside the 107px masthead instead of pushing the CTA past the frame */
@media (min-width:1110px) and (max-width:1259px){ .masthead .navitem.nav-ba > a{ white-space:normal; max-width:88px; line-height:1.15; text-align:left; } .masthead .desktop-cta{ padding:12px 14px; font-size:15px; } }
@media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:8px; } .masthead .frame{ gap:8px; } .masthead .navitem.nav-ba > a{ max-width:80px; } }

/* ---------- text links and the two button constructions ---------- */
.tlink{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--accent-text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.tlink:hover{ color:var(--heading); }
.tlink::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r); font-size:15px; font-weight:600; text-decoration:none; color:var(--heading); background:var(--surface-raised); border:2px solid var(--heading); transition:transform var(--dur) var(--ease), background-color var(--dur), border-color var(--dur); }
.btn svg{ width:16px; height:16px; }
.btn:hover{ transform:translateY(-2px); }
.btn-action{ border-color:var(--action); box-shadow:inset 0 0 0 3px var(--surface-raised); padding:13px 20px; }
.btn-action:hover{ background:#FFF; }

/* ================= components carried from the accepted building (b6) and application (a3) pages ================= */
.h2[id]{ scroll-margin-top:16px; }
section[id]{ scroll-margin-top:16px; }
.btn-ghost{ border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--heading); }
.btn-arm{ border-color:var(--border-strong); box-shadow:none; transition:border-color .25s, box-shadow .25s, transform var(--dur) var(--ease); }
.btn-arm.is-armed{ border-color:var(--action); box-shadow:inset 0 0 0 3px var(--surface-raised); }
.btn-arm:disabled{ cursor:default; opacity:.8; }
.btn-arm:disabled:hover{ transform:none; }
.deck{ font-size:19px; line-height:1.5; color:var(--body); max-width:56ch; }
h1{ font-size:clamp(38px,5.2vw,60px); line-height:1.08; letter-spacing:-1.2px; font-weight:600; color:var(--heading); text-wrap:balance; }
fieldset{ padding:0; border:0; min-width:0; margin:0; } legend{ padding:0; }

/* ---------- hero: the building or the substrate at scale behind a paper sheet with one folded corner; nothing sits on the photograph ---------- */
.hero{ position:relative; padding:40px 0 64px; background:var(--surface); overflow:hidden; isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:0; background:#C9D6D9; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero > .frame{ position:relative; z-index:1; }
@media (min-width:720px){ .hero{ padding:56px 0 80px; } }
@media (min-width:1000px){ .hero{ padding:56px 0 72px; } }
.sheet-wrap{ position:relative; }
.sheet-wrap::before{ content:""; position:absolute; inset:0; transform:translate(-7px,9px); background:rgba(20,24,27,.11); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.sheet{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:26px 24px 30px; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
@media (min-width:720px){ .sheet{ padding:38px 44px 44px; } }
.sheet::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.crumbs{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.crumbs a{ color:var(--muted); text-decoration:none; } .crumbs a:hover{ color:var(--heading); text-decoration:underline; }
.crumbs [aria-current]{ color:var(--body); }
.hero h1{ margin-top:12px; font-size:clamp(34px,4.1vw,52px); letter-spacing:-1.1px; }
.hero .deck{ margin-top:18px; }
.hero-meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:var(--body); }
.hero-meta span::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--accent); clip-path:polygon(0 0, 100% 60%, 40% 100%); vertical-align:1px; }
.hero-grid{ display:grid; gap:22px; align-items:start; }
@media (min-width:1000px){ .hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr); gap:40px; } }
@media (min-width:1260px){ .hero-grid{ grid-template-columns:minmax(0,1fr) 520px; gap:56px; } }
/* hub hero: the sheet alone, wider, with the one hero action */
.hero-hub .sheet-wrap{ max-width:760px; }
.hero-hub .hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.hero-hub .hero-actions .quiet{ font-size:14px; color:var(--body); }
.hero-proof{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px 16px; padding:0; list-style:none; font-size:13.5px; line-height:1.45; color:var(--body); }
.hero-proof li{ display:inline-flex; align-items:center; gap:10px; }
.hero-proof li::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; }

/* ---------- figures with the label plate: tag on colour, name on paper with the 31 deg cut; never text on the photograph ---------- */
.fig{ --fig-c:var(--cond); --fig-ink:var(--cond-ink); background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.fig-ingr{ --fig-c:var(--ingr); --fig-ink:var(--ingr-ink); }
.fig-media{ position:relative; aspect-ratio:4/3; background:var(--surface-sunken); flex:none; overflow:hidden; }
.fig-media img, .fig-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.fig-label{ position:absolute; left:0; bottom:0; display:flex; align-items:stretch; z-index:1; }
.fig-tag{ display:flex; align-items:center; white-space:nowrap; padding:9px 14px; background:var(--fig-c); color:var(--heading); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.fig-name{ display:flex; align-items:center; padding:9px 26px 9px 14px; background:var(--surface-raised); color:var(--heading); font-size:15px; font-weight:600; clip-path:polygon(0 0, calc(100% - 13.2px) 0, 100% 100%, 0 100%); }
.fig-facts{ list-style:none; padding:18px 20px 20px; display:grid; gap:12px; }
.fig-facts li{ display:grid; grid-template-columns:12px 1fr; gap:12px; align-items:baseline; font-size:15px; line-height:1.45; color:var(--body); }
.fig-facts li::before{ content:""; width:12px; height:9px; background:var(--fig-c); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); position:relative; top:0; }
.fig-facts b{ color:var(--heading); }
.fig .cap{ padding:14px 18px 16px; font-size:14px; line-height:1.5; color:var(--body); }
.fig-record .fig-tag{ background:var(--verdict-verified); color:var(--surface-raised); }

/* ---------- the paper note with a turned corner and a sea-glass edge: refusals designed as reassurance ---------- */
.note{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:26px 26px 28px 30px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.note::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.note .kicker{ color:var(--verdict-verified); }
.note-intro{ margin-top:10px; font-size:15px; color:var(--body); }
.refusal{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border-hairline); }
.refusal .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.refusal h3{ margin-top:8px; font-size:17.5px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.refusal p{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--body); }
.refusal.is-published .rk{ color:var(--verdict-verified); }
.refusal .rate-line{ margin-top:8px; font-family:var(--mono); font-size:13px; color:var(--phosphor); font-weight:600; letter-spacing:.02em; }
.note-sign{ margin-top:22px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.note-sign::before{ content:""; width:12px; height:9px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }

/* ---------- navigation tiles with photographs ---------- */
.tiles{ margin-top:34px; display:grid; gap:12px; }
@media (min-width:600px){ .tiles{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.tiles.tiles-3{ grid-template-columns:1fr; }
@media (min-width:600px){ .tiles.tiles-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tile{ position:relative; display:flex; flex-direction:column; gap:12px; min-height:100%; padding:16px; background:var(--surface-raised); color:var(--heading); text-decoration:none; border-radius:var(--r); border:1.5px solid var(--border-hairline); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.tile::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); }
.tile-media{ position:relative; width:calc(100% + 32px); margin:-16px -16px 0; aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden; }
.tile-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tile-media .fig-tag{ background:var(--amb-violet-anchor); color:var(--surface-raised); }
.tile-media .fig-name{ font-size:14px; padding:8px 24px 8px 12px; }
.tile:hover .tile-media img, .tile:focus-visible .tile-media img{ transform:scale(1.025); }
.tile-t{ display:block; font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:1.25; color:var(--heading); }
.tile-s{ display:block; margin-top:4px; font-size:14px; color:var(--body); line-height:1.45; }
.tile-go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); }
.tile-go svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.tile:hover, .tile:focus-visible{ transform:translateY(-4px); border-color:var(--accent); }
.tile:hover::after, .tile:focus-visible::after{ transform:scale(1); }
.tile:hover .tile-go svg, .tile:focus-visible .tile-go svg{ transform:translateX(4px); }
.next{ padding:72px 0 80px; border-top:1px solid var(--border-hairline); }
.raised{ background:var(--surface-raised); }

/* ---------- the handoff line and the anchored return to the hero form (a text link, never a second button) ---------- */
.handoff{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; font-size:14px; color:var(--muted); }
.anchor-cta{ position:relative; margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:18px 22px 18px 26px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; }
.anchor-cta::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.anchor-cta .ac-t{ font-size:17px; font-weight:600; letter-spacing:-.2px; color:var(--heading); line-height:1.3; }
.anchor-cta .ac-s{ display:block; margin-top:3px; font-size:13.5px; font-weight:400; color:var(--body); letter-spacing:0; }
.raised .anchor-cta, .survey .anchor-cta{ background:var(--surface); }

/* ---------- drawings: the homepage drawing language at page scale ---------- */
.drawing{ width:100%; height:auto; display:block; font-family:var(--mono); overflow:hidden; }
.drawing-mobile{ display:none; }
@media (max-width:719px){ .drawing-desktop{ display:none; } .drawing-mobile{ display:block; } }
.drawing .cut{ fill:none; stroke:var(--heading); stroke-width:8; stroke-linejoin:round; stroke-linecap:round; }
.drawing .outline{ fill:none; stroke:var(--heading); stroke-width:4; stroke-linejoin:round; }
.drawing .annotation{ fill:none; stroke:var(--heading); stroke-width:2; stroke-linecap:round; }
.drawing .annotation.lam{ stroke:var(--border); stroke-width:2; }
.drawing .annotation.datum{ stroke:var(--border-strong); stroke-dasharray:6 6; stroke-width:1.5; }
.drawing .annotation.dim, .drawing .annotation.range{ stroke:var(--phosphor); }
.drawing .annotation.coat-edge{ stroke:var(--accent-hover); stroke-width:2; }
.drawing .member{ fill:var(--surface-sunken); }
.drawing .body{ fill:var(--surface-raised); }
.drawing .cellsA{ fill:var(--border); opacity:.24; }
.drawing .cellsB{ fill:var(--border-hairline); opacity:.44; }
.drawing .s-light{ stop-color:var(--surface-raised); }
.drawing .s-shade{ stop-color:var(--border); }
.drawing .s-field{ stop-color:var(--accent-soft); }
.drawing .coat{ fill:var(--accent-on-panel); }
.drawing .mk{ fill:var(--phosphor); font-size:18px; letter-spacing:.06em; font-weight:600; font-variant-numeric:tabular-nums; }
.drawing .side{ fill:var(--muted); font-size:13px; letter-spacing:.12em; font-weight:500; }
.drawing-mobile .mk{ font-size:12px; } .drawing-mobile .side{ font-size:9.5px; }
.drawing-mobile .cut{ stroke-width:4; } .drawing-mobile .outline{ stroke-width:2; } .drawing-mobile .annotation{ stroke-width:1.2; }
.drawing .conc{ fill:var(--surface-sunken); }
.drawing .agg{ fill:var(--border); opacity:.5; }
.drawing .bead{ fill:var(--cond); }
.drawing .drip{ stroke:var(--cond); stroke-width:2; stroke-dasharray:4 4; fill:none; }
.drawing .prep{ stroke:var(--phosphor); stroke-width:3; fill:none; }
.drawing .flake{ fill:var(--body); }
.drawing .foamfill{ fill:var(--accent-soft); stroke:var(--accent-hover); stroke-width:1.5; }
.drawing .steel{ fill:var(--surface-raised); stroke:var(--heading); stroke-width:3; }
.drawing .lbl{ fill:var(--heading); font-size:14px; letter-spacing:.06em; font-weight:600; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; }
.drawing-mobile .lbl{ font-size:10px; stroke-width:4px; }
.drawing-card{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:18px 18px 16px; overflow:hidden; }
.raised .drawing-card{ background:var(--surface); }
.fignote{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--muted); }

/* ---------- what is applied: the section drawing, the photograph, the key ---------- */
.applied{ padding:72px 0 72px; border-top:1px solid var(--border-hairline); }
.applied-grid{ margin-top:34px; display:grid; gap:24px; }
@media (min-width:1000px){ .applied-grid{ grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr); gap:32px; align-items:start; } }
.key{ margin-top:24px; display:grid; gap:14px 20px; }
@media (min-width:640px){ .key{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .key{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; } }
.key > div{ padding:14px 0 0; border-top:2px solid var(--border); }
.key .n{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--phosphor); font-weight:600; }
.key p{ margin-top:6px; font-size:14px; line-height:1.5; color:var(--body); }
.key p b{ color:var(--heading); }
.applied .handoff{ margin-top:30px; }

/* ---------- what is happening: paper; a labelled pair, then what it is not ---------- */
.happen{ padding:72px 0 64px; }
.pair{ margin-top:36px; display:grid; gap:20px; }
@media (min-width:860px){ .pair{ grid-template-columns:1fr 1fr; gap:24px; } }
.fig-cond{ --fig-c:var(--cond); --fig-ink:var(--cond-ink); }
.fig-floor{ --fig-c:var(--amb-periwinkle); }
.fig-ok{ --fig-c:var(--phosphor); } .fig-ok .fig-tag{ color:var(--surface-raised); }
.pair.is-in .fig:first-child{ animation:fromLeft .36s var(--ease) both; }
.pair.is-in .fig:last-child{ animation:fromRight .36s var(--ease) .06s both; }
@keyframes fromLeft{ from{ opacity:0; transform:translateX(-14px);} to{ opacity:1; transform:none;} }
@keyframes fromRight{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }
.isnot{ margin-top:28px; padding:22px 0 0; border-top:1px solid var(--border); display:grid; gap:14px 32px; }
@media (min-width:860px){ .isnot{ grid-template-columns:1fr 1fr 1fr; } }
.isnot p{ font-size:15.5px; line-height:1.5; color:var(--body); }
.isnot b{ display:block; color:var(--heading); margin-bottom:4px; }
/* three numbered readings */
.ledger3{ margin-top:30px; display:grid; gap:12px; }
@media (min-width:860px){ .ledger3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.ld{ --c:var(--amb-periwinkle); display:grid; gap:8px; align-content:start; padding:18px 20px 20px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); border-top:5px solid var(--c); }
.ld.ld-cold{ --c:var(--amb-violet-anchor); } .ld.ld-dew{ --c:var(--amb-aqua); } .ld.ld-dry{ --c:var(--phosphor); }
.ld .lk{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.ld .lk b{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; letter-spacing:0; color:var(--heading); background:var(--surface-raised); border:2px solid var(--c); }
.ld h3{ font-size:19px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); text-wrap:balance; }
.ld p{ font-size:14.5px; line-height:1.5; color:var(--body); }
.ld p b{ color:var(--heading); }
.raised .ld{ background:var(--surface); }
.sign{ margin-top:20px; font-size:15px; line-height:1.5; color:var(--body); max-width:72ch; display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:start; }
.sign::before{ content:""; width:12px; height:9px; margin-top:7px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.sign b{ color:var(--heading); }

/* ---------- the estimator: a second raised sheet with the turned corner ---------- */
.est-wrap{ position:relative; }
.est-wrap::before{ content:""; position:absolute; inset:0; transform:translate(-7px,9px); background:rgba(20,24,27,.11); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.est{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 20px 24px; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); scroll-margin-top:24px; }
.est::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
@media (min-width:720px){ .est{ padding:26px 28px 28px; } }
.est-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; padding-right:var(--ch-x); }
.est-head .kicker{ color:var(--verdict-verified); }
.est-time{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.est-prog{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.est-prog i{ display:block; height:5px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; position:relative; }
.est-prog i::after{ content:""; position:absolute; inset:0; background:var(--phosphor); transform:scaleX(0); transform-origin:0 50%; transition:transform .36s var(--ease); }
.est-prog i.is-on::after{ transform:scaleX(1); }
.est-prog i.is-done::after{ transform:scaleX(1); background:var(--accent-on-panel); }
.est-steps{ margin-top:8px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.est-steps span[aria-current]{ color:var(--phosphor); }
.est-panel{ margin-top:18px; min-width:0; }
.est-panel[hidden]{ display:none; }
.est-q{ font-size:19px; line-height:1.25; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.est-sub{ margin-top:6px; font-size:13.5px; color:var(--body); }
.est-back{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--heading); text-decoration:underline; text-underline-offset:3px; margin-bottom:10px; }
.est-back:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; }
.choices{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:480px){ .choices{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.choice{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; gap:8px; padding:12px 12px 12px; min-height:88px; background:var(--surface); border:1.5px solid var(--border-hairline); border-radius:var(--r); color:var(--heading); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur), background-color var(--dur); }
.choice::after{ content:""; position:absolute; top:0; right:0; width:26px; height:15.6px; background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .3s var(--ease); }
.choice:hover{ transform:translateY(-2px); border-color:var(--border-strong); background:var(--surface-raised); }
.choice:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.choice[aria-pressed="true"]{ border-color:var(--accent); background:var(--surface-raised); }
.choice[aria-pressed="true"]::after{ transform:scale(1); }
.choice svg{ width:44px; height:26px; display:block; }
.choice svg path{ fill:none; stroke:var(--heading); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.choice svg .fill{ fill:var(--accent-soft); stroke:none; }
.choice[aria-pressed="true"] svg .fill{ fill:var(--accent-on-panel); }
.choice .ct{ font-size:13.5px; font-weight:600; line-height:1.2; letter-spacing:-.1px; }
.choice .cs{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--phosphor); font-weight:600; }
.est-foot{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; font-size:13px; color:var(--muted); }
.est-foot .btn{ padding:10px 14px; font-size:14px; }
.reading{ margin-top:14px; position:relative; background:var(--surface); border-radius:var(--r); padding:16px 16px 16px; overflow:hidden; }
.reading::after{ content:""; position:absolute; top:0; right:0; width:40px; height:24px; background:var(--phosphor); clip-path:polygon(0 0, 100% 100%, 100% 0); }
.reading .rk{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.reading h3{ margin-top:6px; font-size:17px; line-height:1.3; font-weight:600; letter-spacing:-.2px; color:var(--heading); text-wrap:balance; padding-right:34px; }
.reading p{ margin-top:8px; font-size:14px; line-height:1.5; color:var(--body); }
.reading p b{ color:var(--heading); }
.rd-draw{ margin-top:12px; width:100%; height:auto; display:block; font-family:var(--mono); }
.rd-draw .sheet-l{ fill:none; stroke:var(--heading); stroke-width:2.2; stroke-linejoin:round; }
.rd-draw .foam-l{ fill:var(--accent-soft); stroke:var(--accent-hover); stroke-width:1; }
.rd-draw .dim{ stroke:var(--phosphor); stroke-width:1; fill:none; }
.rd-draw .mk{ fill:var(--phosphor); font-size:11.5px; letter-spacing:.06em; font-weight:600; }
.rd-draw .side{ fill:var(--muted); font-size:9px; letter-spacing:.1em; font-weight:500; }
.chips{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--r-field); font-size:12.5px; color:var(--heading); background:var(--surface-raised); font-variant-numeric:tabular-nums; }
.chip b{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--phosphor); font-weight:600; white-space:nowrap; }
.est-lead{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); }
.est-lead b{ color:var(--heading); }
.fields{ margin-top:14px; display:grid; gap:12px; }
@media (min-width:480px){ .fields{ grid-template-columns:1fr 1fr; } .fields .span2{ grid-column:1 / -1; } }
.field{ display:grid; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--heading); }
.field label small{ font-weight:400; color:var(--muted); }
.ctl{ width:100%; box-sizing:border-box; padding:11px 12px; font:inherit; font-size:15px; color:var(--heading); background:var(--surface-raised); border:1.5px solid var(--border-strong); border-radius:var(--r-field); }
.ctl:focus{ outline:2px solid var(--focus-ring); outline-offset:2px; border-color:var(--heading); }
.ctl::placeholder{ color:#7C8086; }
select.ctl{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314181B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.est-submit{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.est-note{ margin-top:14px; font-size:13px; line-height:1.5; color:var(--body); display:grid; gap:6px; }
.est-note b{ color:var(--heading); }
.est-note a{ color:var(--accent-text); }
.est-how{ margin-top:12px; border-top:1px solid var(--border-hairline); padding-top:10px; font-size:13px; color:var(--body); }
.est-how summary{ cursor:pointer; font-weight:600; color:var(--heading); list-style:none; display:flex; align-items:center; gap:8px; }
.est-how summary::-webkit-details-marker{ display:none; }
.est-how summary::before{ content:""; width:7px; height:7px; border-right:1.5px solid var(--heading); border-bottom:1.5px solid var(--heading); transform:rotate(-45deg); transition:transform .2s; }
.est-how[open] summary::before{ transform:rotate(45deg); }
.est-how summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; }
.est-how p{ margin-top:8px; }
.est-done{ margin-top:14px; padding:16px 18px; background:var(--surface); border-radius:var(--r); font-size:14.5px; color:var(--body); display:grid; gap:8px; }
.est-done b{ color:var(--heading); }
.err{ font-size:12.5px; color:var(--action); font-weight:600; display:none; }
.field.is-invalid .err{ display:block; }
.field.is-invalid .ctl{ border-color:var(--action); }
.proto{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--action); border:1px solid var(--action); padding:3px 7px; border-radius:var(--r-field); display:inline-block; }
.flag-inline{ font-family:var(--mono); font-size:12px; color:var(--action); border:1px solid var(--action); padding:1px 6px; border-radius:var(--r-field); white-space:normal; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* ---------- the index: numbered plates on sunken paper; the section in view takes phosphor ---------- */
.index{ background:var(--surface-sunken); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0 18px; }
.index .frame{ display:grid; gap:12px; }
@media (min-width:1000px){ .index .frame{ grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; } }
.index .kicker{ white-space:nowrap; }
.ix{ min-width:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 6px; margin:-4px -2px -6px; scroll-snap-type:x proximity; }
.ix::-webkit-scrollbar{ display:none; }
@media (min-width:1000px){ .ix{ display:grid; grid-template-columns:repeat(var(--ixn,8),minmax(0,1fr)); overflow:visible; padding:0; margin:0; } }
.ixi{ position:relative; flex:0 0 auto; width:150px; box-sizing:border-box; display:grid; gap:4px; align-content:start; padding:10px 22px 10px 12px; background:var(--surface-raised); border:1.5px solid var(--border-hairline); border-radius:var(--r); color:var(--heading); text-decoration:none; overflow:hidden; scroll-snap-align:start; transition:transform var(--dur) var(--ease), border-color var(--dur); }
@media (min-width:1000px){ .ixi{ width:auto; padding:10px 20px 10px 12px; } }
.ixi::after{ content:""; position:absolute; top:0; right:0; width:22px; height:13.2px; background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 100% 0); transition:background-color .3s; }
.ixi .n{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--muted); }
.ixi .t{ font-size:13px; font-weight:600; line-height:1.2; letter-spacing:-.1px; }
.ixi:hover, .ixi:focus-visible{ transform:translateY(-2px); border-color:var(--border-strong); }
.ixi[aria-current="true"]{ border-color:var(--phosphor); }
.ixi[aria-current="true"] .n{ color:var(--phosphor); }
.ixi[aria-current="true"]::after{ background:var(--phosphor); }

/* ---------- the material module (holvem-material-v1), building pages only: the one dark device ---------- */
.material{ padding:72px 0 76px; background:var(--panel); color:var(--on-panel-body); border-top:1px solid var(--panel-border); }
.material .kicker{ color:var(--on-panel-muted); } .material .kicker b{ color:var(--on-panel-heading); }
.material .h2{ color:var(--on-panel-heading); }
.material .lede{ color:var(--on-panel-body); }
.mat-grid{ margin-top:34px; display:grid; gap:24px; }
@media (min-width:1000px){ .mat-grid{ grid-template-columns:minmax(0,1.25fr) minmax(320px,.95fr); gap:48px; align-items:start; } }
.mat-copy p{ font-size:16.5px; line-height:1.55; color:var(--on-panel-body); max-width:62ch; }
.mat-copy p + p{ margin-top:14px; }
.mat-copy p.strong{ font-size:20px; line-height:1.35; font-weight:600; color:var(--on-panel-heading); letter-spacing:-.3px; }
.mat-fig{ background:#1A1E23; border:1px solid var(--panel-border); border-radius:var(--r); overflow:hidden; }
.mat-fig .fig-media{ background:#1A1E23; aspect-ratio:4/3; }
.mat-fig .fig-tag{ background:var(--phosphor-on-dark); color:var(--panel); }
.mat-fig .fig-name{ background:var(--panel); color:var(--on-panel-heading); }
.mat-fig .cap{ padding:12px 16px 14px; font-size:13.5px; line-height:1.5; color:var(--on-panel-muted); }
.mat-stats{ margin-top:28px; display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (min-width:860px){ .mat-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } }
.mat-stats > div{ padding-top:12px; border-top:2px solid var(--panel-border); }
.mat-stats .v{ display:block; font-family:var(--mono); font-size:22px; line-height:1.1; font-weight:600; color:var(--phosphor-on-dark); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.mat-stats .k{ display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--on-panel-body); }
.mat-open{ margin-top:26px; padding-top:18px; border-top:1px solid var(--panel-border); font-size:14px; line-height:1.5; color:var(--on-panel-body); max-width:70ch; }
.mat-open b{ color:var(--on-panel-heading); }
.mat-open a{ color:var(--accent-on-panel); }
.mat-open a:focus-visible{ outline-color:var(--phosphor-on-dark); }

/* ---------- the step bar that fills within a step, and the reading card with the folded corner ---------- */
.sec-head + .steps{ margin-top:34px; }
.steps{ margin-top:18px; display:grid; grid-template-columns:repeat(var(--stn,5),minmax(0,1fr)); gap:6px; }
.step{ all:unset; cursor:pointer; box-sizing:border-box; display:grid; gap:8px; padding:10px 10px 12px; background:var(--surface-raised); border:1.5px solid var(--border-hairline); border-radius:var(--r); color:var(--heading); min-width:0; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.step:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.step:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.step .bar{ height:5px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; }
.step .bar i{ display:block; height:100%; width:0; background:var(--phosphor); transition:width .36s var(--ease); }
.step[aria-current="step"] .bar i{ width:100%; }
.step.is-done .bar i{ width:100%; background:var(--accent-on-panel); }
.step .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.step[aria-current="step"] .k{ color:var(--phosphor); }
.step .t{ font-size:13.5px; font-weight:600; letter-spacing:-.1px; line-height:1.2; }
.step[aria-current="step"]{ border-color:var(--phosphor); }
@media (max-width:639px){ .steps{ gap:4px; } .step{ padding:8px 6px 10px; } .step .t{ font-size:11.5px; } .step .k{ display:none; } }
.st-grid{ margin-top:18px; display:grid; gap:18px; }
@media (min-width:1000px){ .st-grid{ grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr); gap:24px; align-items:stretch; } .st-grid.even{ grid-template-columns:1fr 1fr; align-items:start; } }
.sd-wrap{ position:relative; }
.sd-wrap::before{ content:""; position:absolute; inset:0; transform:translate(-7px,9px); background:rgba(20,24,27,.10); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.sd-card{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:18px 18px 14px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.sd-card::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--phosphor); clip-path:polygon(0 0, 100% 100%, 0 100%); transition:background-color .3s; }
.sd-foot{ margin-top:10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; font-size:12.5px; color:var(--muted); }
.st-now{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); }
.st-card{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 22px 24px; overflow:hidden; display:flex; flex-direction:column; }
.st-card::after{ content:""; position:absolute; top:0; right:0; width:54px; height:32.4px; background:var(--phosphor); clip-path:polygon(0 0, 100% 100%, 100% 0); transition:background-color .36s; }
.st-kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.st-count{ margin-top:6px; font-size:14px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; }
.st-title{ margin-top:14px; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.4px; color:var(--heading); text-wrap:balance; }
.st-title .n{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--phosphor); margin-right:10px; vertical-align:middle; }
.st-body{ margin-top:10px; font-size:15px; line-height:1.5; color:var(--body); }
.st-body b{ color:var(--heading); }
.st-read{ animation:resIn .32s var(--ease); }
@keyframes resIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }
.st-actions{ margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.st-actions .btn{ padding:10px 14px; font-size:14px; }
.st-actions .reset{ margin-left:auto; }
.reset{ all:unset; cursor:pointer; font-size:14px; font-weight:600; color:var(--heading); text-decoration:underline; text-underline-offset:3px; }
.reset:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; }
.st-sign{ margin-top:18px; font-size:13.5px; color:var(--body); display:flex; align-items:center; gap:10px; max-width:70ch; }
.st-sign::before{ content:""; width:12px; height:9px; flex:none; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.tight{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border-hairline); font-size:13.5px; line-height:1.5; color:var(--body); display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:start; }
.tight::before{ content:""; width:12px; height:9px; margin-top:6px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.tight b{ color:var(--heading); }
.sunk{ background:var(--surface-sunken); border-top:1px solid var(--border); }

/* ---------- objectives: the tile answers with the band, the FROM rate and what it does not claim ---------- */
.depth{ padding:72px 0 72px; border-top:1px solid var(--border-hairline); }
.objectives{ margin-top:30px; display:grid; gap:12px; }
@media (min-width:600px){ .objectives{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .objectives{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.obj{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; gap:10px; padding:16px 16px 18px; background:var(--surface-raised); border:1.5px solid var(--border-hairline); border-radius:var(--r); color:var(--heading); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.obj::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); }
.obj:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.obj:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.obj[aria-pressed="true"]{ border-color:var(--accent); }
.obj[aria-pressed="true"]::after{ transform:scale(1); }
.obj .ok{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.obj[aria-pressed="true"] .ok{ color:var(--phosphor); }
.obj .ot{ font-size:16px; font-weight:600; letter-spacing:-.2px; line-height:1.25; }
.obj .os{ font-size:13.5px; color:var(--body); line-height:1.45; }
.obj .of{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; font-variant-numeric:tabular-nums; }
.obj .of .d{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--phosphor); letter-spacing:.02em; }
.obj .of .r{ font-size:12.5px; color:var(--body); }
.ladder-grid{ margin-top:22px; display:grid; gap:22px; }
@media (min-width:1000px){ .ladder-grid{ grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr); gap:32px; align-items:start; } }
.ladder-grid.no-drawing{ grid-template-columns:1fr; }
@media (min-width:1000px){ .ladder-grid.no-drawing{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; } }
.ladder-out{ background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:22px 22px 24px; display:grid; gap:16px; }
.ladder-out .k{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.ladder-out .v{ display:block; margin-top:6px; font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.4px; color:var(--heading); }
.ladder-out .v.big{ font-family:var(--mono); font-size:20px; color:var(--heading); }
.ladder-out .v.rate{ font-family:var(--mono); font-size:19px; letter-spacing:-.2px; }
.ladder-out .v.rate small{ font-family:var(--font); font-size:13px; font-weight:400; color:var(--body); letter-spacing:0; margin-left:6px; }
.ladder-out p{ margin-top:6px; font-size:14px; line-height:1.5; color:var(--body); }
.ladder-out .prov{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.ladder-out .prov a{ color:var(--accent-text); }
.ladder-out[hidden]{ display:none; }
.ladder-empty{ background:var(--surface-raised); border:1px dashed var(--border); border-radius:var(--r); padding:22px; font-size:14.5px; color:var(--body); }
.ladder-note{ margin-top:14px; font-size:14px; color:var(--body); max-width:62ch; }
.notclaim{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }
.notclaim li{ display:grid; grid-template-columns:12px 1fr; gap:10px; font-size:14px; line-height:1.45; color:var(--body); }
.notclaim li::before{ content:""; width:12px; height:9px; margin-top:6px; background:var(--verdict-refused); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.notclaim b{ color:var(--heading); }
.raised .obj, .raised .ladder-out, .raised .ladder-empty{ background:var(--surface); }

/* ---------- the survey list, the note, and the published rates ---------- */
.survey{ padding:72px 0 76px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.survey-grid{ margin-top:34px; display:grid; gap:28px; }
@media (min-width:1000px){ .survey-grid{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:56px; align-items:start; } }
.estlist{ list-style:none; padding:0; margin:0; display:grid; counter-reset:e; }
.estlist li{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding:20px 0; border-top:1px solid var(--border-hairline); font-size:17px; line-height:1.5; color:var(--body); }
.estlist li:first-child{ border-top:0; padding-top:0; }
.estlist li::before{ content:counter(e); counter-increment:e; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--phosphor); padding-top:5px; }
.estlist b{ color:var(--heading); }
.survey .note{ background:var(--surface); }
.survey.sunk .note{ background:var(--surface-raised); }
.survey.paper{ background:var(--surface); } .survey.paper .note{ background:var(--surface-raised); }
.rates{ margin-top:30px; padding-top:26px; border-top:1px solid var(--border); display:grid; gap:20px; }
.rates > div{ min-width:0; }
@media (min-width:1000px){ .rates{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:56px; align-items:start; } }
.rates h3{ font-size:24px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); margin-top:10px; text-wrap:balance; }
.rates .lede{ font-size:15.5px; margin-top:12px; }
.rt{ width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; }
.rt th, .rt td{ text-align:left; padding:11px 10px 11px 0; border-bottom:1px solid var(--border-hairline); vertical-align:top; }
.rt th{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); border-bottom:1px solid var(--border); }
.rt td.k{ font-weight:600; color:var(--heading); }
.rt td.d{ font-family:var(--mono); font-size:13px; color:var(--phosphor); font-weight:600; white-space:nowrap; }
.rt td.r{ color:var(--heading); }
.rt td.r small{ color:var(--muted); font-size:12px; white-space:normal; }
.rt-foot{ margin-top:10px; font-size:12.5px; color:var(--muted); }
.rt-foot a{ color:var(--accent-text); }
.hv-size{ margin-top:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hv-size > div{ padding:12px 12px 12px; background:var(--surface); border-radius:var(--r); border:1px solid var(--border-hairline); }
.sunk .hv-size > div, .paper .hv-size > div{ background:var(--surface-raised); }
.hv-size .a{ display:block; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.04em; }
.hv-size .p{ display:block; margin-top:4px; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
.hv-size .p i{ display:block; height:4px; margin-top:8px; background:var(--phosphor); border-radius:2px; }
@media (max-width:479px){ .hv-size{ grid-template-columns:1fr; } }

/* ---------- project records: HOLVEM's own footage and photographs; the only items labelled Project record ---------- */
.projects{ padding:72px 0 76px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.reel{ margin-top:34px; display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (min-width:860px){ .reel{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.rec{ position:relative; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.projects.paper{ background:var(--surface); } .projects.paper .rec{ background:var(--surface-raised); }
.rec-media{ position:relative; aspect-ratio:4/5; background:var(--surface-sunken); overflow:hidden; }
.rec-media img, .rec-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.rec-media .fig-tag{ background:var(--verdict-verified); color:var(--surface-raised); }
.rec-media .fig-name{ font-size:13px; padding:8px 22px 8px 12px; }
@media (max-width:599px){ .rec-media .fig-name{ display:none; } .rec-media .fig-tag{ padding:8px 12px; } }
.rec-play{ all:unset; cursor:pointer; position:absolute; right:10px; top:10px; z-index:2; width:40px; height:40px; display:grid; place-items:center; background:var(--surface-raised); border:1.5px solid var(--heading); border-radius:var(--r); color:var(--heading); }
.rec-play:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.rec-play svg{ width:14px; height:14px; }
.rec-play .pause{ display:none; }
.is-playing .rec-play .play{ display:none; } .is-playing .rec-play .pause{ display:block; }
.rec-cap{ padding:12px 14px 14px; font-size:13.5px; line-height:1.45; color:var(--body); }
.rec-cap b{ display:block; color:var(--heading); margin-bottom:2px; }
.projects-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-top:22px; font-size:14.5px; color:var(--body); }

/* ---------- straight answers and the page summary ---------- */
.answers{ padding:72px 0 76px; border-top:1px solid var(--border-hairline); }
.ans-grid{ margin-top:34px; display:grid; gap:36px; }
@media (min-width:1000px){ .ans-grid{ grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:64px; align-items:start; } }
.feature-q{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.feature-q::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.feature-q::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.feature-q .yes{ font-family:var(--mono); font-size:34px; line-height:1; font-weight:600; color:var(--phosphor); letter-spacing:-.5px; }
.feature-q .q{ margin-top:10px; font-size:15px; color:var(--body); font-style:italic; }
.feature-q h3{ margin-top:10px; font-size:21px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); text-wrap:balance; }
.feature-q p{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--body); }
.feature-q p b{ color:var(--heading); }
.qa{ margin-top:14px; border-top:1px solid var(--border); }
.qa details{ border-bottom:1px solid var(--border-hairline); }
.qa summary{ cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr 20px; gap:16px; align-items:center; padding:16px 0; font-size:17px; font-weight:600; letter-spacing:-.2px; line-height:1.3; color:var(--heading); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:""; width:10px; height:10px; border-right:1.5px solid var(--heading); border-bottom:1.5px solid var(--heading); transform:rotate(45deg); transition:transform .2s; justify-self:center; margin-top:-5px; }
.qa details[open] summary::after{ transform:rotate(-135deg); margin-top:5px; }
.qa summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; }
.qa .a{ padding:0 0 18px; font-size:15px; line-height:1.55; color:var(--body); max-width:66ch; }
.qa .a b{ color:var(--heading); }
.qa .a a{ color:var(--accent-text); }
.summary-card{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px; border:1px solid var(--border-hairline); }
.summary-card h3{ margin-top:10px; font-size:22px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; }
.summary-card ol{ margin-top:16px; padding:0; list-style:none; counter-reset:f; display:grid; gap:10px; }
.summary-card li{ counter-increment:f; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15px; line-height:1.5; color:var(--body); }
.summary-card li::before{ content:counter(f); font-size:12px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:4px; }
.answers.raised .feature-q, .answers.raised .summary-card{ background:var(--surface); }

/* ---------- the close: one button, the brief; the telephone and the upload route as text on a paper note ---------- */
.decision .commit{ margin-top:22px; font-size:14px; line-height:1.5; color:var(--body); max-width:60ch; }
.decision .commit b{ color:var(--heading); }

/* ================= the Applications theme: the state run (a3, standard s11) =================
   The four mineral bodies as a scale of the substrate's state: violet, cold and below the dew point; aqua, the dew point, where water
   forms; sea-glass, above it and dry. Planes cut at 31 deg, never blended. On the hero sheet as a 6px rule; under the reading as the
   instrument the marker moves along. No building page carries it. */
.run{ position:relative; display:block; width:100%; height:22px; overflow:hidden; border-radius:3px; --k:36.6px; }
.run .run-bodies{ display:block; position:absolute; inset:0; }
.run i{ position:absolute; top:0; bottom:0; right:0; display:block; background:var(--b); clip-path:polygon(var(--k) 0, 100% 0, 100% 100%, 0 100%); }
.run i:nth-child(1){ left:0; clip-path:none; --b:var(--amb-violet-anchor); }
.run i:nth-child(2){ left:calc(22% - var(--k) / 2); --b:var(--amb-soft-violet); }
.run i:nth-child(3){ left:calc(40% - var(--k) / 2); --b:var(--amb-periwinkle); }
.run i:nth-child(4){ left:calc(58% - var(--k) / 2); --b:var(--amb-aqua); }
.run i:nth-child(5){ left:calc(76% - var(--k) / 2); --b:var(--amb-sea-glass); }
.run-sheet{ height:6px; --k:10px; margin:0 0 18px; }
.runbox{ margin-top:22px; padding:16px 18px 14px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); }
.raised .runbox, .sunk .runbox{ background:var(--surface-raised); }
.runbox .rk{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.runbox .rk .lo{ color:var(--amb-violet-anchor); } .runbox .rk .hi{ color:var(--verdict-verified); }
.runbox .run{ margin-top:10px; height:22px; }
.marker{ position:relative; height:26px; margin-top:6px; }
.marker i{ position:absolute; top:0; left:var(--mx,12%); transform:translateX(-7px); display:flex; flex-direction:column; align-items:flex-start; gap:2px; transition:left .38s var(--ease), transform .38s var(--ease); }
.marker i::before{ content:""; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:9px solid var(--heading); }
.marker i em{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; font-weight:600; color:var(--heading); white-space:nowrap; }
.marker.at-end i{ transform:translateX(calc(-100% + 7px)); align-items:flex-end; }
@media (max-width:719px){ .runbox .rk .mid{ display:none; } .marker i em{ font-size:9.5px; } }
/* is this your roof: a routing band under the index */
.place{ padding:26px 0 30px; border-bottom:1px solid var(--border-hairline); background:var(--surface); }
.place .frame{ display:grid; gap:14px; }
@media (min-width:1000px){ .place .frame{ grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:start; } }
.place .kicker{ white-space:nowrap; padding-top:4px; }
.rtiles{ min-width:0; display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (min-width:860px){ .rtiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rtile{ position:relative; display:grid; gap:6px; align-content:start; padding:12px 14px 12px; background:var(--surface-raised); border:1.5px solid var(--border-hairline); border-radius:var(--r); color:var(--heading); text-decoration:none; overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.rtile::after{ content:""; position:absolute; top:0; right:0; width:26px; height:15.6px; background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .3s var(--ease); }
.rtile:hover, .rtile:focus-visible{ transform:translateY(-2px); border-color:var(--accent); }
.rtile:hover::after, .rtile:focus-visible::after{ transform:scale(1); }
.rtile[aria-current="page"]{ border-color:var(--phosphor); }
.rtile[aria-current="page"]::after{ transform:scale(1); background:var(--phosphor); }
.rtile svg{ width:44px; height:26px; display:block; }
.rtile svg path{ fill:none; stroke:var(--heading); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.rtile svg .fill{ fill:var(--accent-soft); stroke:none; }
.rtile .rt{ font-size:14px; font-weight:600; line-height:1.2; letter-spacing:-.1px; }
.rtile .rs{ font-size:12.5px; line-height:1.4; color:var(--body); }
.rtile .rc{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); }
.rtile .rg{ font-size:12.5px; font-weight:600; color:var(--accent-text); }
/* the state-run instrument: one drawing, four states; the drawing's parts switch by class */
.sd [data-on]{ opacity:0; transition:opacity .3s var(--ease); }
.sd.is-1 [data-on~="1"], .sd.is-2 [data-on~="2"], .sd.is-3 [data-on~="3"], .sd.is-4 [data-on~="4"]{ opacity:1; }
/* the two-route material pair (coated / uncoated; sprayed / stopped) */
.pair2{ margin-top:18px; display:grid; gap:12px; }
@media (min-width:860px){ .pair2{ grid-template-columns:1fr 1fr; gap:16px; } }
.cond{ --c:var(--phosphor); box-sizing:border-box; position:relative; display:grid; gap:10px; align-content:start; padding:20px 22px 22px 26px; background:var(--surface-raised); border:1.5px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; }
.cond::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c); }
.cond-alt{ --c:var(--amb-periwinkle); }
.cond .ck{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--c); }
.cond-alt .ck{ color:var(--accent-text); }
.cond .ck svg{ width:16px; height:16px; flex:none; }
.cond h3{ font-size:21px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; }
.cond p{ font-size:14.5px; line-height:1.5; color:var(--body); }
.cond p b{ color:var(--heading); }
.cond ol{ margin:2px 0 0; padding:0; list-style:none; display:grid; gap:6px; counter-reset:rs; }
.cond li{ counter-increment:rs; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; line-height:1.45; color:var(--body); }
.cond li::before{ content:counter(rs); font-family:var(--mono); font-size:11px; font-weight:600; color:var(--c); padding-top:3px; }
.cond-alt li::before{ color:var(--accent-text); }
.cond li b{ color:var(--heading); }
.sunk .cond, .raised .cond{ background:var(--surface-raised); }
/* two material plates for the two thicknesses */
.plates{ margin-top:26px; display:grid; gap:14px; }
@media (min-width:720px){ .plates{ grid-template-columns:1fr 1fr; gap:18px; } }
.plate{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); box-shadow:-7px 9px 0 rgba(20,24,27,.10); }
.plate::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.plate .pk{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--phosphor); }
.plate .pv{ margin-top:8px; font-family:var(--mono); font-size:34px; line-height:1; font-weight:600; letter-spacing:-.6px; color:var(--heading); font-variant-numeric:tabular-nums; }
.plate .pv small{ font-family:var(--font); font-size:13px; font-weight:400; letter-spacing:0; color:var(--body); margin-left:8px; }
.plate h3{ margin-top:10px; font-size:19px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); }
.plate p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); }
.plate p b{ color:var(--heading); }
.plate .pr{ margin-top:12px; font-family:var(--mono); font-size:13px; color:var(--phosphor); font-weight:600; letter-spacing:.02em; }
/* the record card: the real project beside its footage */
.recordbox{ margin-top:34px; display:grid; gap:20px; }
@media (min-width:1000px){ .recordbox{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:stretch; } }
.record{ position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 26px 26px 30px; background:var(--surface-raised); border-radius:var(--r); overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.record::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.record::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--verdict-verified); }
.record .rk{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--verdict-verified); }
.record h3{ font-size:24px; line-height:1.15; letter-spacing:-.5px; font-weight:600; color:var(--heading); text-wrap:balance; }
.record dl{ margin:6px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14.5px; }
.record dt{ color:var(--muted); } .record dd{ margin:0; color:var(--heading); font-variant-numeric:tabular-nums; }
.record .outs{ margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.record .out{ padding-top:10px; border-top:2px solid var(--border); }
.record .out b{ display:block; font-family:var(--mono); font-size:22px; line-height:1.1; font-weight:600; color:var(--heading); letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.record .out b small{ font-family:var(--font); font-size:12px; font-weight:400; color:var(--body); letter-spacing:0; margin-left:4px; }
.record .out span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--body); }
.record .rep{ margin-top:6px; font-size:14px; line-height:1.5; color:var(--body); }
.record .rep b{ color:var(--heading); }
.record .tlink{ margin-top:auto; padding-top:8px; }
.recordbox .fig .fig-media{ aspect-ratio:16/10; flex:1 1 auto; }
@media (max-width:999px){ .recordbox .fig .fig-media{ aspect-ratio:16/9; } }

/* ================= hubs ================= */
.doors-big{ margin-top:36px; display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.door{ --dc:var(--amb-violet-anchor); position:relative; display:flex; flex-direction:column; gap:10px; padding:18px; background:var(--surface-raised); color:var(--heading); text-decoration:none; border-radius:var(--r); border:1.5px solid var(--border-hairline); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.door::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); }
.door-media{ position:relative; width:calc(100% + 36px); margin:-18px -18px 0; aspect-ratio:3/2; background:var(--surface-sunken); overflow:hidden; }
.door-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.door-label{ position:absolute; left:0; bottom:0; z-index:1; display:flex; align-items:stretch; }
.door-label i{ width:10px; background:var(--dc); }
.door-label b{ display:flex; align-items:center; padding:10px 28px 10px 14px; background:var(--surface-raised); color:var(--heading); font-size:15px; font-weight:600; letter-spacing:-.1px; clip-path:polygon(0 0, calc(100% - 13.2px) 0, 100% 100%, 0 100%); }
.door-t{ display:block; margin-top:6px; font-size:22px; line-height:1.15; letter-spacing:-.5px; font-weight:600; color:var(--heading); text-wrap:balance; }
.door-s{ display:block; margin-top:4px; font-size:15px; line-height:1.5; color:var(--body); }
.door-facts{ list-style:none; padding:12px 0 0; margin:4px 0 0; border-top:1px solid var(--border-hairline); display:grid; gap:6px; }
.door-facts li{ display:grid; grid-template-columns:12px 1fr; gap:10px; font-size:13.5px; line-height:1.45; color:var(--body); }
.door-facts li::before{ content:""; width:12px; height:9px; margin-top:6px; background:var(--dc); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.door-facts b{ color:var(--heading); }
.door-go{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); }
.door-go svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.door:hover, .door:focus-visible{ transform:translateY(-4px); border-color:var(--accent); }
.door:hover::after, .door:focus-visible::after{ transform:scale(1); }
.door:hover .door-media img, .door:focus-visible .door-media img{ transform:scale(1.035); }
.door:hover .door-go svg, .door:focus-visible .door-go svg{ transform:translateX(4px); }
.door-warehouse{ --dc:var(--amb-violet-anchor); } .door-agri{ --dc:var(--amb-sea-glass); } .door-offices{ --dc:var(--amb-periwinkle); }
.door-metal{ --dc:var(--amb-soft-violet); } .door-fc{ --dc:var(--amb-aqua); } .door-soffit{ --dc:var(--amb-periwinkle); }
.doors-big.is-in .door{ animation:doorIn .38s var(--ease) both; }
.doors-big.is-in .door:nth-child(2){ animation-delay:.06s; } .doors-big.is-in .door:nth-child(3){ animation-delay:.12s; }
@keyframes doorIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.hub-foot{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); }
.hv-start{ padding:72px 0 76px; border-top:1px solid var(--border-hairline); }
/* the application doors carry the sequence as four small plates; the run beneath the row is the family's legend */
.seq{ display:flex; gap:4px; margin-top:4px; }
.seq span{ flex:1; padding:6px 8px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--heading); background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r-field); text-align:center; }
.seq span:last-child{ border-color:var(--phosphor); color:var(--phosphor); }
.legend{ margin-top:22px; padding:18px 20px 16px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); }
.legend .rk{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.legend .rk .lo{ color:var(--amb-violet-anchor); } .legend .rk .hi{ color:var(--verdict-verified); }
.legend .run{ margin-top:10px; }
.legend p.rk{ max-width:none; margin-top:0; }
.legend p{ margin-top:12px; font-size:14px; line-height:1.5; color:var(--body); max-width:70ch; }
.legend p b{ color:var(--heading); }
/* what every page tells you: three plain columns */
.tells{ padding:72px 0 76px; border-top:1px solid var(--border-hairline); }
.tells-grid{ margin-top:34px; display:grid; gap:20px; }
@media (min-width:860px){ .tells-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.tell{ padding:18px 0 0; border-top:2px solid var(--border); }
.tell .n{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--phosphor); font-weight:600; }
.tell h3{ margin-top:8px; font-size:20px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); }
.tell p{ margin-top:8px; font-size:15px; line-height:1.5; color:var(--body); }
.tell p b{ color:var(--heading); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .pair .fig, .doors-big .door{ opacity:1; transform:none; }
}
/* ================= 6 CLOSE: one primary action on the Route C light plate =================
   DOSE 0.55 on the OPTION 2 values, RE-MEASURED ON THIS PAGE with the text hidden, under every text box, at 1440 and
   390: see h2/shots/contrast-close.json (written by the verification script). --muted never sits on the plate; the
   telephone and the estimate route sit on a paper note, so nothing under 16px is read off the plate. ---------- */
.decision{ --amb-dose:.55; padding:84px 0 92px; background:var(--surface); border-top:1px solid var(--border-hairline); }
.decision-grid{ display:grid; gap:28px; }
@media (min-width:1000px){ .decision-grid{ grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:64px; align-items:end; } }
.decision .kicker{ color:var(--body); } .decision .kicker b{ color:var(--heading); }
.decision h2{ margin-top:14px; font-size:clamp(36px,4.8vw,58px); line-height:1.02; letter-spacing:-1.4px; font-weight:600; color:var(--heading); }
/* the grading the Founder liked: the plate INSIDE the letterforms at full dose, hard-edged, from the signature's own facet values */
.decision h2 em{ font-style:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 420 84%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gink-v40%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-640.95%22 y1=%22-1158.03%22 x2=%2280.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23402B5A%22/%3E%3Cstop offset=%221%22 stop-color=%22%2355406F%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v41%22 gradientUnits=%22userSpaceOnUse%22 x1=%22190.31%22 y1=%22-24.22%22 x2=%22230.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23623A8A%22/%3E%3Cstop offset=%221%22 stop-color=%22%23764E9E%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v42%22 gradientUnits=%22userSpaceOnUse%22 x1=%22230.10%22 y1=%2242.00%22 x2=%22951.15%22 y2=%221242.03%22%3E%3Cstop offset=%220%22 stop-color=%22%238A69AC%22/%3E%3Cstop offset=%221%22 stop-color=%22%23765598%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 150.000,0.000 10.201,84.000 -6139.799,84.000%22 fill=%22url%28%23gink-v40%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22150.000,0.000 300.000,0.000 160.201,84.000 10.201,84.000%22 fill=%22url%28%23gink-v41%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22300.000,0.000 9000.000,0.000 8860.201,84.000 160.201,84.000%22 fill=%22url%28%23gink-v42%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; }
.decision .lede{ color:var(--body); }
.decision .actions{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.decision .actions .btn{ background:var(--surface-raised); }
.decision .quiet{ font-size:14px; color:var(--body); }
.dnote{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:20px 22px 22px 26px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.dnote::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.dnote::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.dnote .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.dnote p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); }
.dnote p b{ color:var(--heading); }
.dnote .alt{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border-hairline); }
.dnote .tlink{ font-size:14.5px; }

/* ---------- furniture: HOLVEM Furniture Bottom (site-wide), as home-v1 carries it ---------- */
footer{ padding:48px 0 40px; font-size:13px; color:var(--muted); border-top:1px solid var(--border-hairline); background:var(--surface); }
footer .frame{ display:block; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--heading); text-decoration:underline; }
.fgrid{ display:grid; gap:28px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:720px){ .fgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1000px){ .fgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.fgrid > div{ display:grid; gap:6px; align-content:start; }
.fgrid a{ font-size:13px; line-height:1.4; }
.fgrid .fhub{ font-weight:600; color:var(--heading); font-size:14px; margin-bottom:4px; }
.futil{ margin-top:36px; padding-top:18px; border-top:1px solid var(--border-hairline); }
footer p{ margin-top:12px; }

/* ---------- reduced motion, the rest of the page: zero running animations, nothing lost ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:0s !important; }
  .doors .door{ animation:none !important; opacity:1; transform:none; }
  .door-media img, .gmedia img{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* R1-SITE nav fix (23 Sep 2026): the settled IA made the desktop nav wrap to two lines. Single-line labels from 1320px (measured with Geist);
   the menu button carries the navigation up to 1319px (the band the capture already flagged as too tight). */
@media (min-width:1320px){ .masthead nav > a, .masthead .navitem > a{ white-space:nowrap; max-width:none; } .masthead nav{ gap:16px; font-size:13.5px; } .masthead .frame{ gap:12px; } }
@media (min-width:1110px) and (max-width:1319px){
  .masthead nav, .masthead .desktop-cta{ display:none !important; }
  .menu-button{ display:inline-flex !important; }
  .menu:not([hidden]){ display:block !important; }
}



/* ---------- R3 (28 Sep 2026): the HOLVEM hero action, the signature inside the copy column, the depth table, the record reel ---------- */
.hero-holvem .action{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:13px 22px; border-radius:var(--r); background:var(--action); color:#FFFFFF; font-size:16px; font-weight:600; text-decoration:none; transition:transform var(--dur) var(--ease), background-color var(--dur); }
.hero-holvem .action:hover{ transform:translateY(-2px); background:var(--accent-hover, var(--action)); }
.hero-holvem .action:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.hero-holvem .action svg{ width:14px; height:14px; }
.hero-holvem.hero-app .crumbs{ margin-bottom:0; }
.hero-holvem.hero-app .run-sheet{ margin:0; }
.hero-holvem.hero-app .hh-actions .tlink{ font-size:15px; }
/* which depth fits: one simple table */
.depthtab{ margin-top:30px; }
.depthtab .rt td.r{ color:var(--body); }
.depthtab .rt td.r b{ color:var(--heading); }
.depthtab .rt th:nth-child(2), .depthtab .rt td.d{ width:1%; padding-right:18px; }
@media (max-width:639px){
  .depthtab .rt thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .depthtab .rt tr{ display:grid; grid-template-columns:1fr; gap:2px; padding:14px 0; border-bottom:1px solid var(--border-hairline); }
  .depthtab .rt td{ border:0; padding:0; }
  .depthtab .rt td.d{ width:auto; }
}
.depth-foot{ margin-top:18px; font-size:15px; line-height:1.5; color:var(--body); max-width:70ch; }
.depth-foot b{ color:var(--heading); }
/* the routing tiles: three, one row on wide screens */
@media (min-width:1000px){ .rtiles.rtiles-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* the index wraps on a phone instead of scrolling off the edge */
@media (max-width:639px){ nav.index .ix{ display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible; padding:0; margin:0; } nav.index .ixi{ width:auto; } }
/* a three-item reel */
@media (min-width:860px){ .reel.reel-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }


/* =====================================================================================================
   HOLVEM R3 FURNITURE (M5-R1, round R3, 28 Sep 2026)
   Masthead + mega menu + dropdowns, mobile menu, footer, the R3-S3 section-background system,
   the mineral edge band and the R3-S6 hero overlay component.

   HOW IT IS USED
   - apply.py inlines this file (plus grey-fix.css) into a page as <style data-furniture="r3"> at the END of
     <head>, after the page's own <style>. Every rule here therefore wins ties against the r2 furniture CSS a
     page still carries. Inner class names are new (nav-item, nav-panel, mega, drop, mm-*, sf-*) so the old
     r2 rules (.navitem, .sub, .mgroup, .fgrid ...) never match the new markup.
   - Tokens: the page's own :root carries them (home-v2 lineage). The :root block below repeats the same
     values so a fragment or hero-example renders standalone; identical values, no drift.
   - Breakpoints (R1-SITE nav fix kept): the full nav runs from 1320px; the Menu button carries the
     navigation from 1110 to 1319 and below 1110 (mobile). Re-measured with the real Geist, see the report.
   - No em or en dashes in visible copy anywhere in this file's components.
   ===================================================================================================== */

:root{
  --surface:#F4F3EF; --surface-raised:#FBFAF8; --surface-sunken:#E9E7E0;
  --panel:#121417; --panel-border:#2A2F35;
  --border-hairline:#DEDBD2; --border:#C9C6BE; --border-strong:#8B8779;
  --heading:#14181B; --body:#3C4147; --muted:#5F6369;
  --on-panel-heading:#F4F3EF; --on-panel-body:#C9C6BE; --on-panel-muted:#9DA1A7;
  --accent:#6A3F96; --accent-hover:#58347C; --accent-text:#602F90; --accent-soft:#F0E9F6; --accent-on-panel:#BFA4DA;
  --focus-ring:#25528C;
  --action:#C24E0F; --action-hover:#AD4409;
  --phosphor:#43610A; --phosphor-on-dark:#A6E24C;
  --amb-sea-glass:#A9C1B6; --amb-aqua:#7CB2B6; --amb-periwinkle:#8D94BC; --amb-soft-violet:#9379AD; --amb-violet-anchor:#6B4097;
  --holvem-fold:31deg;
  --ch-x:36.6px; --ch-y:22px;
  --font:"Geist", Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --frame:1296px; --gutter:16px; --r:8px; --r-field:4px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.28s;
  /* THE MINERAL RUN as a slim band: four hard-edged planes, boundaries cut at the fold (31deg from horizontal,
     the "/" orientation of the accepted ambient plates). Hard stops, never a wash. Works at any width because
     the stop positions map to the band's width when the band is much wider than tall. */
  --mineral-run:linear-gradient(149deg, var(--amb-sea-glass) 0 46%, var(--amb-aqua) 46% 64%, var(--amb-periwinkle) 64% 82%, var(--amb-violet-anchor) 82% 100%);
  --mineral-run-soft:linear-gradient(149deg, var(--amb-sea-glass) 0 46%, var(--amb-aqua) 46% 64%, var(--amb-periwinkle) 64% 82%, var(--amb-soft-violet) 82% 100%);
}
@media (min-width:720px){ :root{ --gutter:32px; } }

/* ---------------------------------------------------------------- masthead ---------------------------------- */
.masthead{ position:relative; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); }
.masthead .frame{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:107px; padding-top:24px; padding-bottom:24px; }
.masthead .logo{ display:inline-flex; align-items:center; flex-shrink:0; width:auto; height:auto; font-size:0; line-height:0; text-decoration:none; }
.masthead .logo svg{ width:209.25px; height:58.33px; display:block; }
.masthead .logo:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; }

.masthead nav{ display:none; align-items:center; gap:22px; font-size:14px; line-height:24px; flex:1 1 auto; min-width:0; justify-content:flex-start; padding-left:8px; }
.masthead .nav-item{ position:relative; }
.masthead .nav-item > a{ display:flex; align-items:center; gap:7px; color:var(--heading); text-decoration:none; padding:8px 0; white-space:nowrap; max-width:none; }
.masthead .nav-item > a[aria-haspopup]::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-2px) rotate(45deg); transition:transform var(--dur) var(--ease); }
.masthead .nav-item:hover > a[aria-haspopup]::after, .masthead .nav-item.is-open > a[aria-haspopup]::after{ transform:translateY(1px) rotate(225deg); }
.masthead .nav-item.is-closed > a[aria-haspopup]::after{ transform:translateY(-2px) rotate(45deg); }
.masthead .nav-item > a[aria-current="page"], .masthead .nav-item[data-current] > a{ box-shadow:inset 0 -2px 0 var(--heading); }
.masthead .nav-item > a:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }

/* the panel: opens on hover, on keyboard focus within, or on tap (furniture.js adds is-open); Escape adds is-closed */
.masthead .nav-panel{ position:absolute; left:-14px; top:100%; padding-top:10px; display:none; z-index:20; }
.masthead .nav-item:hover .nav-panel, .masthead .nav-item:focus-within .nav-panel, .masthead .nav-item.is-open .nav-panel{ display:block; }
.masthead .nav-item.is-closed .nav-panel{ display:none; }
.masthead .nav-mega.is-open .nav-panel::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:30px; }
.masthead .nav-end .nav-panel{ left:auto; right:-14px; }

/* dropdown: raised paper on a slim mineral edge */
.masthead .drop{ min-width:300px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 22px 44px -28px rgba(20,24,27,.45); overflow:hidden; padding:0 0 8px; }
.masthead .drop::before{ content:""; display:block; height:4px; background:var(--mineral-run); }
.masthead .drop a{ display:block; padding:9px 18px; font-size:14px; line-height:22px; color:var(--heading); text-decoration:none; }
.masthead .drop a:hover, .masthead .drop a:focus-visible{ background:var(--surface); color:var(--accent-text); outline:none; }
.masthead .drop a:focus-visible{ box-shadow:inset 0 0 0 2px var(--focus-ring); }
.masthead .drop a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); }
.masthead .drop .drop-hub{ font-weight:600; padding-top:14px; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--border-hairline); }
.masthead .drop .drop-group{ display:block; padding:12px 18px 4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.masthead .drop-2{ display:grid; grid-template-columns:1fr 1fr; min-width:620px; column-gap:0; }
.masthead .drop-2::before{ grid-column:1 / -1; }
.masthead .drop-2 .drop-span{ grid-column:1 / -1; }
.masthead .drop-2 a:not(.drop-span):nth-child(odd){ border-right:1px solid var(--border-hairline); }
.masthead .drop-s{ min-width:220px; }

/* mega menu (Buildings & applications): spans the frame, five columns, two families */
.masthead .nav-mega{ position:static; }
.masthead .nav-mega .nav-panel{ left:var(--gutter); right:var(--gutter); }
.masthead .mega{ background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 26px 52px -30px rgba(20,24,27,.5); overflow:hidden; }
.masthead .mega::before{ content:""; display:block; height:6px; background:var(--mineral-run); }
.masthead .mega-grid{ display:grid; grid-template-columns:3fr 2fr; }
.masthead .mega-family{ padding:20px 28px 24px; min-width:0; }
.masthead .mega-applications{ border-left:1px solid var(--border-hairline); background:var(--surface); }
.masthead .mega-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--border-hairline); }
.masthead .mega-head h2{ margin:0; font-size:15px; line-height:22px; font-weight:600; color:var(--heading); letter-spacing:-.1px; }
.masthead .mega-all{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--accent-text); text-decoration:none; white-space:nowrap; }
.masthead .mega-all svg{ width:13px; height:13px; transition:transform var(--dur) var(--ease); }
.masthead .mega-all:hover svg, .masthead .mega-all:focus-visible svg{ transform:translateX(3px); }
.masthead .mega-all:hover{ text-decoration:underline; }
.masthead .mega-cols{ display:grid; gap:0 22px; }
.masthead .mega-buildings .mega-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.masthead .mega-applications .mega-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.masthead .mega-group{ min-width:0; }
.masthead .mega-group h3{ margin:0 0 6px; font-size:11px; line-height:16px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.masthead .mega-group a{ display:block; padding:5px 8px 5px 0; margin-left:-8px; padding-left:8px; border-radius:4px; font-size:13.5px; line-height:19px; color:var(--heading); text-decoration:none; text-wrap:pretty; }
.masthead .mega-group a:hover, .masthead .mega-group a:focus-visible{ color:var(--accent-text); background:var(--accent-soft); outline:none; }
.masthead .mega-group a:focus-visible{ box-shadow:inset 0 0 0 2px var(--focus-ring); }
.masthead .mega-group a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); }

/* the masthead action: the served BUTTON construction (R1-SITE-03; standard s9 masthead exemption) */
.masthead .desktop-cta{ display:none; align-items:center; gap:10px; padding:12px 22px; border:2px solid var(--border-strong); border-radius:var(--r); font-size:15px; line-height:24px; font-weight:400; color:var(--heading); text-decoration:none; white-space:nowrap; background:transparent; flex:none; transition:background-color var(--dur), border-color var(--dur); }
.masthead .desktop-cta svg{ width:14px; height:14px; flex:none; transition:transform var(--dur) var(--ease); }
.masthead .desktop-cta:hover{ background:var(--surface-raised); border-color:var(--heading); }
.masthead .desktop-cta:hover svg{ transform:translateX(3px); }
.masthead .desktop-cta:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }

/* the Menu button (mobile, and the 1110 to 1319 desktop band) */
.menu-button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--heading); padding:8px 12px; border:1.5px solid var(--border-strong); border-radius:var(--r); }
.menu-button i{ width:16px; height:10px; border-top:2px solid var(--heading); border-bottom:2px solid var(--heading); position:relative; }
.menu-button i::after{ content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid var(--heading); }
.menu-button[aria-expanded="true"]{ background:var(--heading); color:var(--on-panel-heading); border-color:var(--heading); }
.menu-button[aria-expanded="true"] i, .menu-button[aria-expanded="true"] i::after{ border-color:var(--on-panel-heading); }
.menu-button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }

@media (min-width:1320px){
  .masthead nav{ display:flex; }
  .masthead .desktop-cta{ display:inline-flex; }
  .menu-button, .menu{ display:none !important; }
}
@media (min-width:1600px){ .masthead nav{ gap:28px; font-size:14.5px; } }
@media (max-width:1319px){
  .masthead nav, .masthead .desktop-cta{ display:none !important; }
  .menu-button{ display:inline-flex !important; }
  .menu:not([hidden]){ display:block !important; }
}

/* ---------------------------------------------------------------- mobile menu -------------------------------- */
.menu{ background:var(--surface-raised); border-bottom:1px solid var(--border); position:relative; z-index:39; }
.menu[hidden]{ display:none; }
.menu::before{ content:""; display:block; height:4px; background:var(--mineral-run); }
.mm{ display:grid; padding-top:6px; padding-bottom:22px; }
.mm-group{ border-bottom:1px solid var(--border-hairline); }
.mm-toggle{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; font-size:17px; line-height:24px; font-weight:500; color:var(--heading); }
.mm-toggle::after{ content:""; flex:none; width:8px; height:8px; margin-right:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-2px) rotate(45deg); transition:transform var(--dur) var(--ease); }
.mm-toggle[aria-expanded="true"]::after{ transform:translateY(2px) rotate(225deg); }
.mm-toggle:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; border-radius:4px; }
.mm-group[data-current] > .mm-toggle, .mm-group[data-current] > .mm-direct{ box-shadow:inset 3px 0 0 var(--accent); padding-left:12px; }
.mm-panel{ display:grid; padding:0 0 14px; }
.mm-panel[hidden]{ display:none; }
.mm-sub{ display:block; padding:12px 0 4px 16px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.mm-link{ display:block; padding:8px 0 8px 16px; font-size:16px; line-height:24px; color:var(--body); text-decoration:none; border-radius:4px; }
.mm-link:hover{ color:var(--heading); }
.mm-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.mm-link[aria-current="page"]{ color:var(--heading); box-shadow:inset 3px 0 0 var(--accent); padding-left:13px; }
.mm-link.mm-all{ font-weight:600; color:var(--accent-text); }
.mm-direct{ display:flex; align-items:center; gap:10px; padding:15px 0; font-size:17px; line-height:24px; font-weight:500; color:var(--heading); text-decoration:none; }
.mm-direct[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); padding-left:12px; }
.mm-direct svg{ width:14px; height:14px; }
.mm-cta{ border-bottom:0; }
.mm-brief{ font-weight:600; }
.mm-tel{ display:block; padding:12px 0 0; font-size:14px; color:var(--muted); font-family:var(--mono); }
@media (min-width:720px){
  .mm{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; align-items:start; }
  .mm-tel{ grid-column:1 / -1; }
}

/* ---------------------------------------------------------------- footer ------------------------------------- */
footer.sitefoot{ padding:0 0 40px; font-size:13px; color:var(--muted); border-top:0; background:var(--surface); }
footer.sitefoot::before{ content:""; display:block; height:6px; background:var(--mineral-run); }
footer.sitefoot .frame{ display:block; padding-top:48px; }
footer.sitefoot a{ color:var(--muted); text-decoration:none; }
footer.sitefoot a:hover{ color:var(--heading); text-decoration:underline; }
footer.sitefoot a[aria-current="page"]{ color:var(--heading); }
.sf-grid{ display:grid; gap:30px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:720px){ .sf-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1000px){ .sf-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:28px 22px; } }
.sf-grid > div{ display:grid; gap:7px; align-content:start; min-width:0; }
.sf-grid a{ font-size:13px; line-height:1.4; text-wrap:pretty; }
.sf-grid .sf-hub{ font-weight:600; color:var(--heading); font-size:14px; margin-bottom:4px; }
.sf-grid .sf-cont{ color:var(--muted); font-weight:500; }
.sf-grid .sf-second{ margin-top:18px; }
@media (min-width:1000px){ .sf-grid .sf-cont{ visibility:hidden; } }
.sf-util{ margin:36px 0 0; padding-top:18px; border-top:1px solid var(--border-hairline); }
footer.sitefoot p{ margin-top:12px; }
footer.sitefoot .sf-util + p{ margin-top:14px; }

/* ---------------------------------------------------------------- R3-S3 SECTION BACKGROUNDS -------------------
   The Founder: grey bands make the pages look dull. Rule: sections alternate between the surface (#F4F3EF) and the
   raised paper (#FBFAF8). Section rhythm comes from the slim 31deg mineral edge band or from hairline rules, never
   from a flat grey (#E9E7E0 or similar) full-width band. grey-fix.css neutralises the r2 grey classes.

   .sec-surface / .sec-paper   the two grounds. Alternate them; two paper sections in a row take a hairline rule.
   .rule-top / .rule-bottom    a hairline rule between sections of the same ground.
   .band-mineral-edge          the section carries a 6px mineral band across its top (::before). Do not combine
                               with .amb (which owns ::before); use the standalone element instead.
   .band-mineral-edge.edge-bottom   the band sits on the bottom edge.
   .band-mineral-edge.edge-thin     3px, for quiet sections.
   <div class="mineral-edge" aria-hidden="true"></div>   the standalone band, placed between two sections. */
.sec-surface{ background:var(--surface); }
.sec-paper{ background:var(--surface-raised); }
.rule-top{ border-top:1px solid var(--border-hairline); }
.rule-bottom{ border-bottom:1px solid var(--border-hairline); }
.band-mineral-edge{ position:relative; }
.band-mineral-edge::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:3; pointer-events:none; background:var(--mineral-run); }
.band-mineral-edge.edge-bottom::before{ top:auto; bottom:0; }
.band-mineral-edge.edge-thin::before{ height:3px; }
.band-mineral-edge.edge-soft::before{ background:var(--mineral-run-soft); }
.mineral-edge{ display:block; height:6px; background:var(--mineral-run); }
.mineral-edge.edge-thin{ height:3px; }

/* ---------------------------------------------------------------- R3-S6 HERO OVERLAY: .hero-holvem -------------
   A photograph under a HOLVEM overlay. Light-dominant, no black overlay.
   Layers, bottom to top: the image (.hh-media), translucent mineral planes cut at 31deg along the right edge
   (.hh-planes, five hard-edged planes, skewX(-59deg) gives edges at exactly 31deg from horizontal), optional fine
   dimension hairlines (.hh-lines), the pale left field for copy legibility (.hh-field), then the copy (.hh-copy).
   The field is the raised paper at .96 to .93 alpha under the copy column, so body copy (#3C4147) measures at
   least 7:1 over any photograph, including a black one (measured in hero-example.html; see the report).
   Markup:
   <section class="hero-holvem" aria-labelledby="h1">
     <div class="hh-media"><img src=".." width=".." height=".." alt="..">
       <div class="hh-planes" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
       <svg class="hh-lines" viewBox="0 0 1000 600" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">...</svg>
     </div>
     <div class="hh-field" aria-hidden="true"></div>
     <div class="frame hh-copy"><div class="hh-inner"> eyebrow, h1, lede, one action </div></div>
   </section>
   Modifiers: .planes-left (planes and field swap sides), .planes-quiet (lower plane alpha), .hh-tall / .hh-short. */
.hero-holvem{ position:relative; isolation:isolate; overflow:hidden; background:var(--surface-raised); display:grid; }
.hero-holvem .hh-media{ position:relative; z-index:0; overflow:hidden; background:var(--surface-sunken); }
.hero-holvem .hh-media > img, .hero-holvem .hh-media > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-holvem .hh-planes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-holvem .hh-planes i{ position:absolute; top:-12%; bottom:-12%; left:var(--x); width:var(--w); background:var(--c); opacity:var(--a); transform:skewX(-59deg); transform-origin:50% 50%; }
/* the run, sea-glass to violet, toward the edge; positions are % of the media width, measured at mid height */
.hero-holvem .hh-planes i:nth-child(1){ --c:var(--amb-sea-glass);     --a:.60; --x:55%; --w:8%; }
.hero-holvem .hh-planes i:nth-child(2){ --c:var(--amb-aqua);          --a:.56; --x:63%; --w:5%; }
.hero-holvem .hh-planes i:nth-child(3){ --c:var(--amb-periwinkle);    --a:.52; --x:68%; --w:9%; }
.hero-holvem .hh-planes i:nth-child(4){ --c:var(--amb-soft-violet);   --a:.46; --x:77%; --w:4%; }
.hero-holvem .hh-planes i:nth-child(5){ --c:var(--amb-violet-anchor); --a:.44; --x:81%; --w:9%; }
.hero-holvem.planes-quiet .hh-planes i{ opacity:calc(var(--a) * .7); }
.hero-holvem .hh-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-holvem .hh-lines .ln{ fill:none; stroke:var(--heading); stroke-opacity:.42; stroke-width:1; vector-effect:non-scaling-stroke; shape-rendering:crispEdges; }
.hero-holvem .hh-lines .ln.pale{ stroke:var(--surface-raised); stroke-opacity:.85; }
.hero-holvem .hh-lines .tip{ fill:var(--surface-raised); stroke:var(--heading); stroke-opacity:.6; stroke-width:1; vector-effect:non-scaling-stroke; }
.hero-holvem .hh-field{ display:none; position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-holvem .hh-copy{ position:relative; z-index:3; padding-top:30px; padding-bottom:44px; }
.hero-holvem .hh-inner{ display:grid; gap:16px; max-width:640px; }
.hero-holvem .hh-eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.hero-holvem h1{ font-size:clamp(34px,5.2vw,56px); line-height:1.06; letter-spacing:-1.2px; font-weight:600; color:var(--heading); text-wrap:balance; margin:0; }
.hero-holvem .hh-lede{ font-size:17.5px; line-height:1.55; color:var(--body); max-width:56ch; }
.hero-holvem .hh-actions{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:6px; }
.hero-holvem .hh-proof{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13.5px; color:var(--body); }
.hero-holvem .hh-proof li{ display:flex; align-items:center; gap:8px; }
.hero-holvem .hh-proof li::before{ content:""; width:8px; height:8px; background:var(--mineral-run); flex:none; }
/* mobile: image block on top (the planes live inside it), copy on paper below; nothing sits on the photograph */
.hero-holvem .hh-media{ aspect-ratio:4/3; }
@media (min-width:640px){ .hero-holvem .hh-media{ aspect-ratio:16/9; } }
@media (min-width:900px){
  .hero-holvem{ display:block; min-height:clamp(520px, 64vh, 700px); }
  .hero-holvem.hh-tall{ min-height:clamp(600px, 78vh, 820px); }
  .hero-holvem.hh-short{ min-height:clamp(420px, 52vh, 560px); }
  .hero-holvem .hh-media{ position:absolute; inset:0; aspect-ratio:auto; z-index:0; }
  .hero-holvem .hh-field{ display:block;
    background:linear-gradient(90deg, rgba(251,250,248,.97) 0%, rgba(251,250,248,.95) 36%, rgba(251,250,248,.93) 44%, rgba(251,250,248,.62) 54%, rgba(251,250,248,.18) 66%, rgba(251,250,248,0) 76%); }
  .hero-holvem .hh-copy{ display:grid; align-items:center; min-height:inherit; padding-top:72px; padding-bottom:84px; }
  .hero-holvem .hh-inner{ max-width:min(560px, 42%); gap:18px; }
  .hero-holvem.planes-left .hh-field{ background:linear-gradient(270deg, rgba(251,250,248,.97) 0%, rgba(251,250,248,.95) 36%, rgba(251,250,248,.93) 44%, rgba(251,250,248,.62) 54%, rgba(251,250,248,.18) 66%, rgba(251,250,248,0) 76%); }
  .hero-holvem.planes-left .hh-inner{ margin-left:auto; }
  .hero-holvem.planes-left .hh-planes{ transform:scaleX(-1); }
}
@media (min-width:1600px){ .hero-holvem .hh-inner{ max-width:min(600px, 40%); } }

/* ---------------------------------------------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce){
  .masthead .nav-item > a::after, .masthead .mega-all svg, .masthead .desktop-cta svg, .mm-toggle::after{ transition:none !important; }
}

/* =====================================================================================================
   HOLVEM R3 GREY FIX (Founder R3-S3: "when the section background goes grey ... makes the pages look dull")
   apply.py inlines this after furniture.css. It neutralises the r2 classes that paint a flat grey
   (#E9E7E0 = --surface-sunken) as a SECTION background, and turns them into the surface ground with a hairline.

   Found by grep across r2/*.html (28 Sep 2026), section-level grey classes actually used on elements:
     .sunk               <section class="sunk">         applications-concrete-soffit, applications-fibre-cement-encapsulation,
                                                        buildings-agricultural, buildings-offices-concrete-soffits (as "depth sunk")
     .survey.sunk        <section class="survey sunk">  applications-metal-roof-underside, -concrete-soffit, -fibre-cement-encapsulation
     .fivesteps          <section class="fivesteps">    applications-metal-roof-underside
     .bays               <section class="bays">         buildings-warehouse-distribution
     .turn               <section class="turn">         systems-condensation-risk-analysis
     .hero (sunken)      <section class="hero">         projects-hub only (the other 26 .hero rules are already --surface).
                                                        NOT neutralised here: a blanket .hero rule would also hit the
                                                        case-study hero (#D8DEDC). The projects-hub builder changes it
                                                        with the new hero (R3-S6).
     nav.index           <nav class="index">            the "On this page" rail: 13 pages (applications, buildings, problems,
                                                        services, systems). A slim grey band; now surface with hairlines.
   Defined but not carried by any element (neutralised anyway so a copied rule cannot revive them):
     .sec.sunken (documents, systems-*, thank-you, upload)   .hero-paper (thank-you, upload)
   Not touched, because they are plates or instruments, not full-width bands: .ledger, .fstrip, .band (a card with a
   plate), .seg, .stage, media placeholders (.tile-media, .fig-media, .rec-media, .door-media, .gmedia) and every
   chamfer ::after that paints the corner cut.

   METHOD. Each neutralised section gets background:var(--surface) AND remaps --surface-sunken to --surface inside
   itself. The chamfer pseudo-elements and placeholders inside those sections paint with var(--surface-sunken) so
   they follow the new ground automatically and no corner cut shows as a grey triangle. Cards inside stay raised
   paper (#FBFAF8) on the surface (#F4F3EF), which is the accepted alternation.
   Rhythm: add class="band-mineral-edge" (furniture.css) to the neutralised section, or place
   <div class="mineral-edge" aria-hidden="true"></div> before it, where the page needs more than the hairline.
   ===================================================================================================== */
.sunk, .survey.sunk, .depth.sunk, .sec.sunken, .fivesteps, .bays, .turn, .hero-paper{
  --surface-sunken:var(--surface);
  background:var(--surface);
  border-top-color:var(--border-hairline);
}
nav.index{
  --surface-sunken:var(--surface);
  background:var(--surface);
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);
}
/* the index tiles' corner cut follows the ground; the phosphor cut on the current tile is kept */
nav.index .ixi:not([aria-current="true"])::after{ background:var(--surface); }



/* =====================================================================================================
   HOLVEM R4 · the survey section (.sv)
   Replaces the R3 "What the survey establishes" / "Before depth is discussed" section on every building
   and application page that carries one. No prices on this section (Founder ruling R4-1).
   Scope: every class is prefixed sv- ; the section keeps its R3 classes (survey, sunk, raised, sec-surface)
   so the page's own ground, padding and neutralisation rules still apply, and adds .sv.
   Uses the R3 tokens only. Contrast measured on the rendered page at 1440 and 390, text hidden, pixel under the box
   (survey-contrast.json beside this file): body #3C4147 on #F4F3EF / #FBFAF8 = 9.27 / 9.87 · muted #5F6369 = 5.44 / 5.79 ·
   phosphor #43610A = 6.40 / 6.82 · verified green #155C46 = 7.13 / 7.59 · accent-text #602F90 = 8.20 / 8.73 · headings 16.1 / 17.1.
   Append to the page's main <style> after the R3 section rules.
   ===================================================================================================== */

.sv{ --sv-ground:var(--surface-raised); --sv-card:var(--surface); --sv-plate:var(--surface); }
.sv.sunk, .sv.sec-surface, .sv.paper{ --sv-ground:var(--surface); --sv-card:var(--surface-raised); --sv-plate:var(--surface-raised); }
.sv .sv-head .lede{ max-width:60ch; }

/* ---------- the five checks: a sequence of cards ---------- */
.sv-steps{ list-style:none; margin:40px 0 0; padding:0; display:grid; gap:12px; counter-reset:sv; position:relative; }
.sv-step{
  position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-areas:"top title" "top desc"; column-gap:16px; row-gap:6px; align-content:start;
  padding:18px 18px 20px; background:var(--sv-card); border:1px solid var(--border-hairline); border-radius:var(--r);
  overflow:hidden; transition:border-color var(--dur) var(--ease);
}
.sv-step .sv-top{ grid-area:top; flex-direction:column; justify-content:flex-start; gap:8px; padding-right:0; }
.sv-step .sv-t{ grid-area:title; padding-right:28px; }
.sv-step .sv-d{ grid-area:desc; }
/* the sequence cue: a cut corner that runs sea-glass → aqua → periwinkle → soft violet → violet, the mineral order */
.sv-step::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--amb-sea-glass); clip-path:polygon(100% 0, 100% 100%, 0 0); }
.sv-step:nth-child(2)::after{ background:var(--amb-aqua); }
.sv-step:nth-child(3)::after{ background:var(--amb-periwinkle); }
.sv-step:nth-child(4)::after{ background:var(--amb-soft-violet); }
.sv-step:nth-child(5)::after{ background:var(--amb-violet-anchor); }
.sv-step:hover{ border-color:var(--border); }
.sv-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:28px; }
.sv-n{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:2px; }
.sv-n::before{ content:""; display:inline-block; width:14px; height:1px; background:var(--border-strong); margin-right:8px; vertical-align:middle; }
.sv-t{ margin:0; font-size:18px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); text-wrap:balance; }
.sv-d{ margin:0; font-size:15px; line-height:1.5; color:var(--body); }
.sv-d .flag-inline{ font-size:11px; }

/* the icons: cut planes in the R3 instrument language; colours come from the page tokens */
.sv-ico{
  --sv-ik-top:#E6E8E7; --sv-ik-front:#C4C9CB; --sv-ik-side:#9CA3A7; --sv-ik-crest:#B9BFC2;
  --sv-ik-bar:#8B8779; --sv-ik-bar-top:#A9A595; --sv-ik-cut:var(--heading); --sv-ik-edge:var(--border-strong);
  --sv-ik-mark:var(--phosphor); --sv-ik-water:var(--amb-aqua); --sv-ik-water-deep:#5F9AA0;
  --sv-ik-coat:var(--accent-soft); --sv-ik-coat-edge:#D9C9EA; --sv-ik-coat-ink:var(--accent);
  width:72px; height:53px; flex:none; display:block; overflow:visible;
}

/* ---------- what you get after the survey: the paper note with the turned corner ---------- */
.sv-after{
  position:relative; margin-top:26px; padding:26px 28px 26px 32px; background:var(--sv-plate);
  border-radius:var(--r); overflow:hidden;
}
.sv-after::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.sv-after::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--sv-ground); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.sv-after .kicker{ color:var(--verdict-verified); }
.sv-after .sv-after-l{ margin:10px 0 0; font-size:17px; line-height:1.35; font-weight:600; letter-spacing:-.2px; color:var(--heading); max-width:30ch; text-wrap:balance; }
.sv-out{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px 24px; }
.sv-out li{ position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--body); }
.sv-out li::before{ content:""; position:absolute; left:2px; top:6px; width:5px; height:9px; border-right:2px solid var(--phosphor); border-bottom:2px solid var(--phosphor); transform:rotate(45deg); }
.sv-out b{ display:block; font-size:15.5px; line-height:1.3; color:var(--heading); margin-bottom:3px; }
.sv-out b a{ color:inherit; text-decoration:underline; text-decoration-color:var(--border-strong); text-decoration-thickness:1px; text-underline-offset:3px; transition:color var(--dur), text-decoration-color var(--dur); }
.sv-out b a:hover{ color:var(--accent-text); text-decoration-color:var(--accent-text); }
.sv-handoff{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border-hairline); }

/* ---------- the estimate / brief strip ---------- */
.sv-cta{
  position:relative; margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  padding:20px 24px 20px 28px; background:var(--sv-plate); border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
}
.sv-cta::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--heading); }
.sv-cta .sv-cta-t{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.2px; color:var(--heading); line-height:1.3; max-width:60ch; }
.sv-cta .sv-cta-s{ display:block; margin-top:4px; font-size:13.5px; font-weight:400; color:var(--body); letter-spacing:0; }
.sv-cta .tlink{ flex:none; }

/* ---------- focus ---------- */
.sv a:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; }

/* ---------- responsive: 390 → 1440 ---------- */
@media (min-width:560px){
  .sv-out{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:720px){
  .sv-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .sv-step{ padding:22px 22px 24px; grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "title" "desc"; row-gap:10px; }
  .sv-step .sv-top{ flex-direction:row; justify-content:space-between; padding-right:28px; gap:12px; }
  .sv-step .sv-t{ padding-right:0; }
  /* the fifth check runs the full width and reads sideways */
  .sv-step:nth-child(5){ grid-column:1 / -1; grid-template-columns:88px minmax(0,1fr); grid-template-areas:"top title" "top desc"; column-gap:20px; row-gap:8px; }
  .sv-step:nth-child(5) .sv-top{ flex-direction:column; justify-content:flex-start; padding-right:0; gap:10px; }
  .sv-step:nth-child(5) .sv-t{ max-width:34ch; }
  .sv-step:nth-child(5) .sv-d{ max-width:62ch; }
  .sv-after{ padding:28px 34px 28px 36px; }
  .sv-out{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1120px){
  .sv-steps{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:44px; }
  .sv-step:nth-child(5){ grid-column:auto; grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "title" "desc"; column-gap:0; row-gap:10px; }
  .sv-step:nth-child(5) .sv-top{ flex-direction:row; justify-content:space-between; padding-right:28px; }
  .sv-step:nth-child(5) .sv-t, .sv-step:nth-child(5) .sv-d{ max-width:none; }
  .sv-out{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px 24px; }
  .sv-out li{ font-size:14px; }
}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  .sv *, .sv *::before, .sv *::after{ transition:none !important; animation:none !important; }
}



.prl{ padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--border-hairline); }
.prl-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 32px; }
.prl-head .h2{ margin-top:14px; max-width:22ch; }
.prl-grid{ margin-top:32px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .prl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .prl-grid.prl-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.prl-card{ display:flex; flex-direction:column; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; color:inherit; text-decoration:none; transition:border-color .2s ease; }
.prl-card:hover{ border-color:var(--accent); }
.prl-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.prl-media{ position:relative; aspect-ratio:16/10; background:var(--surface-sunken); overflow:hidden; }
.prl-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.prl-tag{ position:absolute; left:0; bottom:0; padding:7px 12px; background:var(--surface-raised); color:var(--heading); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.prl-body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.prl-t{ color:var(--heading); font-weight:600; font-size:18px; line-height:1.3; }
.prl-s{ color:var(--body); font-size:15px; line-height:1.5; }
.prl-go{ margin-top:auto; padding-top:6px; color:var(--accent-text); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.prl-go svg{ width:14px; height:14px; }
@media (prefers-reduced-motion:reduce){ .prl-card{ transition:none; } }


.sf-grid.sf-lean{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
@media (min-width:1000px){ .sf-grid.sf-lean{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sf-grid.sf-lean a{ font-size:14px; }