: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; }

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; }
.deck{ font-size:19px; line-height:1.5; color:var(--body); max-width:56ch; }
body{ overflow-x:hidden; }
fieldset{ padding:0; border:0; min-width:0; margin:0; } legend{ padding:0; }

/* ---------- hero: the opening moment as imagery; the copy on the paper sheet with one folded corner (problems-v5) ---------- */
.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:72px 0 96px; } }
.sheet-wrap{ position:relative; max-width:820px; }
.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; max-width:820px; 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; }
.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(--cond-deep); clip-path:polygon(0 0, 100% 60%, 40% 100%); vertical-align:1px; }
.hero-go{ margin-top:22px; }

/* ---------- sections ---------- */
.sec{ padding:72px 0 64px; border-top:1px solid var(--border-hairline); }
.sec-raised{ background:var(--surface-raised); }
.sec-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); }
.sec-foot b{ color:var(--heading); }

/* ---------- figures: the photograph with the HOLVEM label plate (problems-v5 §01) ---------- */
.fig{ --fig-c:var(--cond); --fig-ink:var(--cond-ink); position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; }
.fig-media{ position:relative; aspect-ratio:4/3; background:var(--surface-sunken); 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; z-index:1; display:flex; align-items:stretch; }
.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; white-space:nowrap; 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; margin:0; 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%); }
.fig-facts b{ color:var(--heading); }
.fig .cap{ padding:14px 20px 18px; font-size:14px; color:var(--muted); }
/* real footage: the only label that reads "Project record" */
.rec .fig-tag{ background:var(--verdict-verified); color:var(--surface-raised); }
.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 16px 16px; font-size:13.5px; line-height:1.45; color:var(--body); }
.rec-cap b{ display:block; color:var(--heading); margin-bottom:2px; }

/* the pair: photograph beside its reading */
.pair{ margin-top:36px; display:grid; gap:20px; }
@media (min-width:860px){ .pair{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px; align-items:start; } }
.pair.is-in .fig{ animation:fromLeft .6s var(--ease) both; }
.pair.is-in .sheetcard{ animation:fromRight .6s var(--ease) .08s 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;} }
.pair-note{ margin-top:22px; display:grid; gap:6px 32px; padding:18px 0 0; border-top:1px solid var(--border); font-size:16px; }
@media (min-width:860px){ .pair-note{ grid-template-columns:1fr 1fr auto; align-items:baseline; } }
.pair-note b{ color:var(--heading); }
.pair-note span{ color:var(--muted); font-size:14px; }

/* a paper card with the turned corner: the reading beside a photograph */
.sheetcard{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 24px 26px 28px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); border:1px solid var(--border-hairline); }
.sheetcard::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%); }
.sheetcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--sc,var(--amb-aqua)); }
.sheetcard h3{ font-size:20px; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.sheetcard .kicker{ margin-bottom:10px; }
.signs{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.signs li{ display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15px; line-height:1.5; color:var(--body); }
.signs li b{ color:var(--heading); }
.signs li .n{ font-size:12px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:4px; }
.sheetcard .tlink{ margin-top:18px; font-size:14.5px; }

/* ---------- the leaflet: three folded panels in paper (problems-v5) ---------- */
.leaflet{ position:relative; display:grid; padding:0; margin:36px 0 0; list-style:none; }
@media (min-width:640px){ .leaflet{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.leaflet::before{ content:""; position:absolute; inset:0; transform:translate(-8px,10px); background:var(--surface-sunken); border-radius:var(--r); z-index:0; }
.panel{ position:relative; z-index:1; padding:0 0 22px; background:var(--surface-raised); display:grid; grid-template-rows:auto auto 1fr; }
.panel:nth-child(2){ background:#F6F5F1; }
.panel:first-child{ border-radius:var(--r) 0 0 var(--r); }
.panel:last-child{ border-radius:0 var(--r) var(--r) 0; }
@media (max-width:639px){ .panel{ border-radius:0 !important; } .panel:first-child{ border-radius:var(--r) var(--r) 0 0 !important; } .panel:last-child{ border-radius:0 0 var(--r) var(--r) !important; } }
.panel + .panel{ border-left:1px solid var(--border-hairline); }
@media (max-width:639px){ .panel + .panel{ border-left:0; border-top:1px solid var(--border-hairline); } }
.panel-cap{ height:14px; background:var(--pc); }
.panel:nth-child(1){ --pc:var(--amb-sea-glass); } .panel:nth-child(2){ --pc:var(--amb-aqua); } .panel:nth-child(3){ --pc:var(--amb-periwinkle); }
.panel:last-child .panel-cap{ clip-path:polygon(0 0, calc(100% - 23.3px) 0, 100% 100%, 0 100%); }
.panel-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:18px 20px 0; min-width:0; }
.panel h3{ font-size:20px; font-weight:600; letter-spacing:-.3px; color:var(--heading); }
.panel-q{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); white-space:nowrap; }
.panel p{ padding:10px 20px 0; font-size:15px; line-height:1.5; color:var(--body); }
.panel p b{ color:var(--heading); }
.panel .tlink{ margin:14px 20px 0; font-size:14.5px; justify-self:start; }

/* ---------- the section drawing (one per page; the ration is two) ---------- */
.why-grid{ margin-top:34px; display:grid; gap:28px; }
@media (min-width:1000px){ .why-grid{ grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:40px; align-items:start; } }
.drawing-card{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:18px 18px 16px; overflow:hidden; }
.seg{ display:inline-flex; gap:0; padding:3px; background:var(--surface-sunken); border-radius:6px; }
.seg button{ all:unset; cursor:pointer; padding:8px 14px; border-radius:4px; font-size:14px; font-weight:500; color:var(--body); display:inline-flex; align-items:center; gap:8px; transition:background-color .2s, color .2s; }
.seg button i{ width:10px; height:8px; background:var(--sc); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.seg button[aria-pressed="true"]{ background:var(--heading); color:var(--on-panel-heading); }
.seg button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.seg .s-a{ --sc:var(--amb-violet-anchor); } .seg .s-b{ --sc:var(--amb-sea-glass); }
.drawing-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; }
.drawing-head p{ font-size:14px; color:var(--muted); max-width:52ch; }
.drawing{ width:100%; height:auto; margin-top:14px; display:block; font-family:var(--font); }
.drawing-mobile{ display:none; }
@media (max-width:719px){ .drawing-desktop{ display:none; } .drawing-mobile{ display:block; } .drawing-mobile .lbl, .drawing-mobile .mk{ font-size:13px; } }
.drawing .cut{ fill:none; stroke:var(--heading); stroke-width:2.2; stroke-linejoin:round; }
.drawing .lbl{ font-size:11px; letter-spacing:.1em; fill:var(--muted); font-weight:500; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; }
.drawing .mk{ font-size:11px; letter-spacing:.06em; fill:var(--phosphor); font-weight:600; font-variant-numeric:tabular-nums; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; }
.drawing .mk.cold{ fill:var(--amb-violet-anchor); }
.drawing .datum{ stroke:var(--border); stroke-width:1; stroke-dasharray:4 4; }
.drawing .warm{ stroke:var(--amb-soft-violet); stroke-width:1.8; fill:none; stroke-linecap:round; }
.drawing .bead{ fill:var(--cond-deep); }
.drawing .layer{ fill:#E8E4D8; stroke:var(--border-strong); stroke-width:1; }
.drawing .purlin{ fill:var(--surface-sunken); stroke:var(--heading); stroke-width:1.6; }
.drawing .fix{ stroke:var(--heading); stroke-width:2; }
.drawing .heat{ stroke:var(--action); stroke-width:1.8; fill:none; stroke-linecap:round; }
.drawing .heat-h{ stroke:var(--action); stroke-width:1.8; fill:none; stroke-linecap:round; }
.drawing .sun{ stroke:#B98A1E; stroke-width:1.8; fill:none; stroke-linecap:round; }
.drawing .sky{ stroke:var(--amb-periwinkle); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-dasharray:5 5; }
.drawing .crack{ stroke:var(--heading); stroke-width:1.4; fill:none; }
.drawing .seal{ fill:var(--phosphor); }
.drawing .drip{ fill:var(--cond-deep); }
.drawing .sA, .drawing .sB{ transition:opacity .38s var(--ease); }
.drawing[data-state="a"] .sB{ opacity:0; }
.drawing[data-state="b"] .sA{ opacity:0; }
.drawing .layer{ transform-box:fill-box; transform-origin:top; transition:transform .38s var(--ease), opacity .3s; }
.drawing[data-state="a"] .layer{ transform:scaleY(0); opacity:0; }
.fignote{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--muted); }

/* ---------- the note: reassurance, not warning (problems-v5 §03) ---------- */
.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:19px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.refusal p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); }
.refusal .tlink{ margin-top:10px; font-size:14.5px; }
.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%); }

/* ---------- the check: three plates, how HOLVEM looks before it specifies ---------- */
.check-grid{ margin-top:34px; display:grid; gap:28px; }
@media (min-width:1000px){ .check-grid{ grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr); gap:40px; align-items:start; } }
.steps{ list-style:none; padding:0; margin:0; display:grid; gap:12px; counter-reset:s; }
.step{ counter-increment:s; position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; padding:18px 20px 20px 18px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); }
.step::before{ content:"0" counter(s); font-size:12px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:5px; }
.step h3{ font-size:18px; font-weight:600; letter-spacing:-.3px; color:var(--heading); }
.step p{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--body); }
.step p b{ color:var(--heading); }
.step .tlink{ margin-top:10px; font-size:14px; }

/* ---------- tiles: photographs with the label plate (problems-v5 §04) ---------- */
.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(var(--tn,4),minmax(0,1fr)); gap:16px; } }
.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-s{ display:block; font-size:14.5px; 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); }

/* ---------- doors: the hub's four big photographic doors (home-v2 construction, two across) ---------- */
.doors{ margin-top:36px; display:grid; gap:16px; }
@media (min-width:640px){ .doors{ grid-template-columns:1fr 1fr; gap:20px; } }
.door{ --dc:var(--amb-aqua); position:relative; display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; 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:16/10; 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:8px; font-size:clamp(21px,2.2vw,26px); 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:15.5px; line-height:1.5; color:var(--body); max-width:52ch; }
.door-go{ margin-top:auto; padding-top:6px; 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); }
.doors.is-in .door{ animation:doorIn .42s var(--ease) both; }
.doors.is-in .door:nth-child(2){ animation-delay:.06s; } .doors.is-in .door:nth-child(3){ animation-delay:.12s; } .doors.is-in .door:nth-child(4){ animation-delay:.18s; }
@keyframes doorIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.door-1{ --dc:var(--amb-sea-glass); } .door-2{ --dc:var(--amb-aqua); } .door-3{ --dc:var(--amb-periwinkle); } .door-4{ --dc:var(--amb-soft-violet); }

/* ---------- the record card: real figures with their basis (projects page facts) ---------- */
.record{ margin-top:34px; display:grid; gap:20px; }
@media (min-width:1000px){ .record{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:stretch; } }
.record-card{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:24px 24px 26px; display:flex; flex-direction:column; }
.record-card .kicker{ color:var(--verdict-verified); }
.record-card h3{ margin-top:12px; font-size:22px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; }
.figs{ margin-top:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
@media (min-width:600px){ .figs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.figs div{ padding-top:10px; border-top:1px solid var(--border-hairline); }
.figs .v{ display:block; font-size:24px; line-height:1.1; letter-spacing:-.6px; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
.figs .v small{ font-size:13px; font-weight:600; letter-spacing:0; color:var(--phosphor); margin-left:4px; }
.figs .k{ display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--muted); }
.record-card p{ margin-top:16px; font-size:14.5px; line-height:1.5; color:var(--body); }
.record-card p b{ color:var(--heading); }
.record-card .tlink{ margin-top:auto; padding-top:18px; font-size:14.5px; align-self:flex-start; }
.recs{ display:grid; gap:16px; }
@media (min-width:600px){ .recs{ grid-template-columns:1fr 1fr; } }
.recs .fig-media{ aspect-ratio:4/3; }
.recs .fig-name{ display:none; }
.recs .fig-tag{ padding:8px 12px; font-size:11px; letter-spacing:.08em; }

/* ---------- the reading: what a U-value means, three plates on one scale (a data graphic, not a drawing) ---------- */
.uval{ margin-top:34px; display:grid; gap:28px; }
@media (min-width:1000px){ .uval{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; } }
.formula{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 26px 26px; border:1px solid var(--border-hairline); }
.formula .eq{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; font-family:var(--mono); font-size:15px; color:var(--heading); }
.formula .eq b{ font-size:22px; font-weight:600; letter-spacing:-.4px; }
.formula .eq span{ color:var(--muted); font-size:13px; }
.formula p{ margin-top:14px; font-size:14.5px; line-height:1.5; color:var(--body); }
.formula p b{ color:var(--heading); }
.ubars{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.ubar{ display:grid; gap:8px; padding:16px 18px 18px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); }
.ubar-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; }
.ubar-h b{ font-size:15.5px; color:var(--heading); }
.ubar-h .v{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ubar-track{ height:10px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; }
.ubar-track i{ display:block; height:100%; width:var(--w); background:var(--phosphor); clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ubar.is-open .ubar-track{ background:transparent; border:1px dashed var(--border-strong); }
.ubar.is-open .ubar-h .v{ color:var(--action); }
.ubar.is-cold .ubar-track i{ background:var(--amb-violet-anchor); }
.ubar.is-cold .ubar-h .v{ color:var(--amb-violet-anchor); }
.ubar p{ font-size:13.5px; line-height:1.45; color:var(--body); }

/* ---------- the close: one action (home-v2 decision block) ---------- */
.dnote .up{ margin-top:14px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .pair .fig, .pair .sheetcard, .doors .door{ opacity:1; transform:none; }
  .drawing[data-state="a"] .layer{ transform:scaleY(0); }
}

.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; }
/* 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): Building problems family additions. The hero is the furniture's .hero-holvem;
   label plates never clip; tiles carry their name below the image; readable rows; hub doors three across. ---------- */
.hero-holvem .crumbs{ margin-bottom:0; }
.hero-holvem .crumbs a:hover{ color:var(--heading); }
.hero-holvem .hh-proof{ margin-top:2px; }
.hero-holvem .hh-actions .tlink{ font-size:15px; }
.fig-label{ max-width:100%; }
.fig-name{ white-space:normal; min-width:0; }
.door-label{ max-width:100%; }
.door-label b{ white-space:normal; min-width:0; }
/* tiles (R3-S5): the tag stays on the photograph, the name is a heading beneath it, three across at most (R3-S2) */
.tiles{ --tn:3; }
@media (min-width:1000px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tile-t{ display:block; font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.2px; color:var(--heading); text-wrap:balance; }
.tile-s{ font-size:15.5px; }
.tile-media .fig-label{ bottom:auto; top:0; }
.tile-media .fig-tag{ padding:8px 12px; font-size:11px; letter-spacing:.08em; clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 100%, 0 100%); padding-right:22px; }
/* rows: one idea per row, number, title, body (R3-S2) */
.rows{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--border); }
.row{ display:grid; gap:8px 28px; padding:26px 0 28px; border-bottom:1px solid var(--border-hairline); }
@media (min-width:860px){ .row{ grid-template-columns:52px minmax(0,.85fr) minmax(0,1.5fr); align-items:start; } }
.row-n{ font-size:12px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:7px; }
.row h3{ font-size:21px; line-height:1.25; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.row p{ font-size:16px; line-height:1.55; color:var(--body); max-width:62ch; }
.row p b{ color:var(--heading); }
.row .tlink{ margin-top:12px; font-size:14.5px; }
/* two plain statements on paper, under the rows */
.plain{ margin-top:28px; display:grid; gap:16px; }
@media (min-width:860px){ .plain{ grid-template-columns:1fr 1fr; gap:24px; } }
.plain > div{ position:relative; padding:22px 24px 24px 30px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; }
.plain > div::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.plain .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.plain h3{ margin-top:8px; font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); text-wrap:balance; }
.plain h3 + p{ margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--body); max-width:52ch; }
/* a single sheetcard on its own row keeps a reading measure */
@media (min-width:860px){ .pair.pair-eq{ grid-template-columns:1fr 1fr; align-items:stretch; } }
.sheetcard.solo{ margin-top:24px; max-width:820px; }
.sheetcard.solo p{ max-width:66ch; }
/* hub: doors three across from 1000px (R3-S2: never more than three cards in a row) */
@media (min-width:1000px){ .doors.doors-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .doors.doors-3 .door-t{ font-size:22px; } }
.doors.is-in .door:nth-child(5){ animation-delay:.24s; } .doors.is-in .door:nth-child(6){ animation-delay:.30s; }
.door-5{ --dc:var(--amb-violet-anchor); } .door-6{ --dc:var(--amb-sea-glass); }
/* touch widths (R3-S5): every control at least 44px tall */
@media (max-width:899px){
  .seg button{ min-height:44px; }
  .rec-play{ width:44px; height:44px; }
  .reset{ display:inline-flex; align-items:center; min-height:44px; }
  .copybtn{ min-height:44px; }
}


/* =====================================================================================================
   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); }



.r5-solo{ grid-template-columns:minmax(0,1fr) !important; }
@media (min-width:1000px){ .check-grid.r5-solo > .steps{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch; } }


.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; }