: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 - production value where a control carries a white label; on this estate the control is
     an orange FRAME with a paper inset and an ink label (measured 17.1:1 ink on paper) */
  --action:#C24E0F;
  /* phosphor - bounded utility token: instrument state, technical annotation, figure emphasis */
  --phosphor:#43610A; --phosphor-on-dark:#A6E24C;
  /* ambient expression - OPTION 2 (Founder choice, 18 Sep 2026): signature-pack hue and chroma, lightness
     respaced monotonically. L* 76.04 / 69.11 / 62.06 / 54.96 / 36.04; steps 6.93 / 7.05 / 7.10 / 18.93 (floor 6.0). */
  --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;
  /* page semantics - condensation is aqua, ingress is soft violet, used consistently */
  --cond:#7CB2B6; --cond-deep:#3E8A90; --cond-ink:#1F5D62;
  --ingr:#9379AD; --ingr-deep:#6B4097; --ingr-ink:#4E2F73;
  --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; overflow-x:hidden; }
h1,h2,h3,h4,p,ul,ol,figure,fieldset{ margin:0; }
fieldset{ padding:0; border:0; min-width:0; } legend{ padding: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; }

/* ---------- 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; }
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; }
.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; }
.deck{ font-size:19px; line-height:1.5; color:var(--body); max-width:56ch; }
.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; } }

/* ---------- 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 the amplitude of every plane step by one factor and changes no edge's
   width, position or angle. Dosing is not softening. Plates are SVG polygons - no interpolation
   crosses a plane edge anywhere. */
.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"); }
.amb-b-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=%22gb-light0%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-849.98%22 y1=%22-750.03%22 x2=%22-128.93%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23D0CDC4%22/%3E%3Cstop offset=%221%22 stop-color=%22%23D7D4CC%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light1%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-128.93%22 y1=%22450.00%22 x2=%22-28.13%22 y2=%22617.76%22%3E%3Cstop offset=%220%22 stop-color=%22%23EAE8E1%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E2E0D9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light2%22 gradientUnits=%22userSpaceOnUse%22 x1=%22251.07%22 y1=%22450.00%22 x2=%22357.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F3EF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23EDECE8%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light3%22 gradientUnits=%22userSpaceOnUse%22 x1=%22651.07%22 y1=%22450.00%22 x2=%22757.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23FBFAF8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3F2F1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light4%22 gradientUnits=%22userSpaceOnUse%22 x1=%221051.07%22 y1=%22450.00%22 x2=%221170.44%22 y2=%22648.66%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F7F7F7%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light5%22 gradientUnits=%22userSpaceOnUse%22 x1=%221501.07%22 y1=%22450.00%22 x2=%221607.18%22 y2=%22626.59%22%3E%3Cstop offset=%220%22 stop-color=%22%23FBFAF8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23F3F2F1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gb-light6%22 gradientUnits=%22userSpaceOnUse%22 x1=%221901.07%22 y1=%22450.00%22 x2=%222622.13%22 y2=%221650.03%22%3E%3Cstop offset=%220%22 stop-color=%22%23F4F3EF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23EDECE8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 620.000,0.000 -877.852,900.000 -7497.852,900.000%22 fill=%22url%28%23gb-light0%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22620.000,0.000 1000.000,0.000 -497.852,900.000 -877.852,900.000%22 fill=%22url%28%23gb-light1%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221000.000,0.000 1400.000,0.000 -97.852,900.000 -497.852,900.000%22 fill=%22url%28%23gb-light2%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221400.000,0.000 1800.000,0.000 302.148,900.000 -97.852,900.000%22 fill=%22url%28%23gb-light3%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221800.000,0.000 2250.000,0.000 752.148,900.000 302.148,900.000%22 fill=%22url%28%23gb-light4%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222250.000,0.000 2650.000,0.000 1152.148,900.000 752.148,900.000%22 fill=%22url%28%23gb-light5%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222650.000,0.000 9000.000,0.000 7502.148,900.000 1152.148,900.000%22 fill=%22url%28%23gb-light6%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; } }


/* ---------- hero - the opening moment as IMAGERY: daylight cast through a fluted translucent panel,
   graded sea-glass -> aqua -> periwinkle -> violet (the Founder's reference, made with Artlist,
   generation 01a0b535-88a5-7859-87b9-83834adecc08 output 0). The colour is cast through a material,
   not floating behind content; the ribs are the edges. NO text sits on the image: the copy is on the
   paper sheet with one folded corner. The 31 deg guard governs plates, not photographs. ---------- */
.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:112%; object-fit:cover; object-position:62% 0; }  /* 112%: the reference crops above the floor line */
.hero > .frame{ position:relative; z-index:1; }
@media (min-width:720px){ .hero{ padding:56px 0 80px; } .hero-media img{ object-position:50% 40%; } }
@media (min-width:1000px){ .hero{ padding:72px 0 96px; } }
.sheet-wrap{ position:relative; max-width:820px; }
/* the sheet casts a hard shadow on the surface it lies on: an offset plane, no blur */
.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; } }
/* the fold: the turned corner is a second plane in paper shadow; its crease is the same 31 deg line */
.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; }


.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; }
.fig-ingr{ --fig-c:var(--ingr); --fig-ink:var(--ingr-ink); }
.fig-media{ position:relative; aspect-ratio:4/3; background:var(--surface-sunken); }
.fig-media img{ width:100%; height:100%; object-fit:cover; }
.fig-label{ position:absolute; left:0; bottom:0; 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; padding:9px 18px 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%); padding-right:26px; }
.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); }

/* ---------- buttons - frame / paper inset / ink label ---------- */
.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; }
.btn-ghost{ border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--heading); }


/* the note - two refusals, designed as reassurance: a paper note with a turned corner, a sea-glass
   plane down its edge, statements in heading weight, nothing that reads as a warning */
.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); }
.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%); }


/* ---------- 04 next - tiles on paper ---------- */
.next{ padding:72px 0 80px; border-top:1px solid var(--border-hairline); }
.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; } }
.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 .opt-icon{ width:calc(100% + 32px); margin:0 -16px; }
/* photograph tiles: the image with the HOLVEM label plate - the same tag + name construction as the
   section-01 comparison pair (kept from v1 at the Founder's request): tag on the violet anchor with
   paper text (7.28:1), name on paper with the 31 deg cut. The label never sits on the image itself,
   so AA holds over every photograph by construction. */
.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-label{ z-index:1; }
.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-photo .tile-t{ font-size:16px; }
@media (prefers-reduced-motion: reduce){ .tile-media img{ transition:none; } }
.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); }
.tile:hover .ico, .tile:focus-visible .ico{ transform:translateY(-3px); }
.tile:hover .ico .field, .tile:focus-visible .ico .field{ opacity:1; }

/* ---------- forward ---------- */
.forward{ padding:64px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.forward-grid{ display:grid; gap:36px; }
@media (min-width:1000px){ .forward-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:64px; } }
.fwd h3, .stub h3{ margin-top:12px; font-size:24px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); }
.fwd ol{ margin-top:18px; padding:0; list-style:none; counter-reset:f; display:grid; gap:10px; }
.fwd li{ counter-increment:f; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; line-height:1.5; color:var(--body); }
.fwd li::before{ content:counter(f); font-size:12px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:4px; }
.fwd-foot{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; font-size:14px; color:var(--body); }
.stub{ padding:22px 24px; border:1px dashed var(--border); border-radius:var(--r); }
.stub p{ margin-top:10px; font-size:14.5px; color:var(--body); }
.flag{ display:inline-block; margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--action); border:1px solid var(--action); padding:4px 8px; border-radius:var(--r-field); }


/* ---------- decision - Route C light on the OPTION 2 values. DOSE 0.55 - measured on the rendered page
   under the actual text boxes (content hidden) at 390 / 640 / 768 / 1000 / 1109 / 1199 / 1260 / 1440 and at
   1000-1080 in 4-20px steps: worst 16px --body 4.86:1 (the soft-violet plane's shaded ramp edge), worst
   --heading 9.39:1, worst heading-em facet #805CA5 3.06:1 (large text; 0.60 drops it to 2.92 and fails).
   The violet anchor is not under any text box at any of those widths; if it ever were, it would bind the
   dose at 0.40 (4.76:1 at 0.40, 4.33 at 0.45). --muted never sits on the plate (2.09 at this dose).
   v3 RE-MEASURED on this page (b3/crops/boxes-*.json, content hidden, same instrument): worst 16px --body 4.845:1 (the
   nocap box at 1440, plate #BAADC6) and 5.359:1 at 390; --heading 10.30:1 both widths; kicker 5.94:1. Dose stays 0.55. ---------- */
.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,1fr) minmax(0,1.1fr); gap:64px; align-items:start; } }
.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 he liked: the plate INSIDE the letterforms at full dose, hard-edged. Built from the
   signature mark's own four facet values (#462F62 #6A3F96 #805CA5 #9678B2) because none of the four
   light Founder values clears 3:1 for large text on paper (1.78-2.02); the anchor does (6.84). */
.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); }
.actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.commit{ margin-top:22px; font-size:14px; line-height:1.5; color:var(--body); max-width:60ch; }
.commit b{ color:var(--heading); }
.nocap{ margin-top:18px; display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; padding:16px 18px; background:var(--surface-raised); border-radius:var(--r); font-size:14.5px; color:var(--body); }
.nocap svg{ width:20px; height:20px; }
.nocap b{ color:var(--heading); }


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





/* ================= page-specific ================= */
[hidden]{ display:none !important; }
/* this page's title is long: the sheet stays a portrait card on the left (700px) so the building stands at scale beside it; the photograph is not cropped vertically at 1440 */
.sheet-wrap, .sheet{ max-width:700px; }
.hero-media img{ height:100%; object-position:50% 50%; }
@media (min-width:1000px){ .hero{ padding:72px 0 88px; } }
.hero-meta span::before{ background:var(--accent); }
.h2[id]{ scroll-margin-top:16px; }

/* ---------- 01 what is happening - paper; two labelled photographs carry it ---------- */
.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); }
.pair.is-in .fig-cond{ animation:fromLeft .6s var(--ease) both; }
.pair.is-in .fig-floor{ 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;} }
.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; }
.handoff{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; font-size:14px; color:var(--muted); }

/* ---------- drawings - the homepage drawing language at page scale (.m5 .drawing) ---------- */
.drawing{ width:100%; height:auto; display:block; font-family:var(--mono); }
.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-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); }

/* ---------- 02 what is applied - raised paper: the section drawing, the photograph, the key ---------- */
.applied{ padding:72px 0 72px; background:var(--surface-raised); 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; } }
.applied .fig{ display:flex; flex-direction:column; }
.applied .fig .fig-media{ flex:none; }
.applied .fig .cap{ padding:14px 18px 16px; font-size:14px; line-height:1.5; color:var(--body); }
.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 .t{ display:block; margin-top:6px; font-size:15px; font-weight:600; color:var(--heading); letter-spacing:-.2px; }
.key p{ margin-top:6px; font-size:14px; line-height:1.5; color:var(--body); }
.key p b{ color:var(--heading); }

/* ---------- 03 the underside, bay by bay - the instrument on sunken paper ----------
   A plan of the working floor seen from below. One bay at a time is released, cleared, contained,
   treated and returned while the other five keep operating. Colour carries meaning only: phosphor
   = instrument state (the bay in hand), periwinkle = the containment sheet, the coat colour of the
   section drawing = the treated underside. Motion is one-shot and under 400ms per step. ---------- */
.bays{ padding:72px 0 80px; background:var(--surface-sunken); border-top:1px solid var(--border); }
.bays-grid{ margin-top:34px; display:grid; gap:24px; }
@media (min-width:1000px){ .bays-grid{ grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr); gap:32px; align-items:start; } }
.plan-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%); }
.plan-card::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%); }
.plan-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%); }
.plan-wrap{ position:relative; }
.plan-wrap > .plan-card{ position:relative; }
.plan{ width:100%; height:auto; display:block; font-family:var(--mono); }
.plan .floor{ fill:var(--surface); }
.plan .wall{ fill:none; stroke:var(--heading); stroke-width:3; }
.plan .pframe{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:5 5; }
.plan .col{ fill:var(--heading); }
.plan .dock{ fill:var(--surface-raised); stroke:var(--heading); stroke-width:1.5; }
.plan .rack{ fill:var(--surface-sunken); stroke:var(--border-strong); stroke-width:1; }
.plan .rack-mid{ stroke:var(--border-strong); stroke-width:1; }
.plan .light{ fill:#FFFFFF; stroke:var(--border); stroke-width:1; }
.plan .side{ fill:var(--muted); font-size:12px; letter-spacing:.12em; font-weight:500; }
.plan .plan-n{ fill:var(--muted); font-size:12px; letter-spacing:.1em; font-weight:600; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; }
/* labels inside the plan sit on a paper halo (paint-order stroke), as the reference drawing's .lbl does, so they hold AA on the coat and containment fills (phosphor on paper 6.82, accent-hover on paper 9.9) */
.plan .plan-lbl{ font-size:13px; letter-spacing:.12em; font-weight:600; fill:var(--muted); paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; }
.plan .coat{ fill:var(--accent-on-panel); }
.plan .rib{ stroke:var(--accent-hover); stroke-width:1; opacity:.55; }
.plan .foam-clip{ transition:width .36s var(--ease); }
.plan .sheet{ fill:var(--surface-raised); stroke:var(--heading); stroke-width:1; stroke-dasharray:4 3; opacity:0; transition:opacity .28s var(--ease); }
.plan .contain{ fill:var(--amb-periwinkle); opacity:0; transition:opacity .32s var(--ease); }
.plan .rel{ fill:none; stroke:var(--phosphor); stroke-width:2.5; stroke-dasharray:8 5; opacity:0; transition:opacity .28s var(--ease); }
.plan .bay[data-state="released"] .rel, .plan .bay[data-state="cleared"] .rel, .plan .bay[data-state="contained"] .rel, .plan .bay[data-state="applying"] .rel{ opacity:1; }
.plan .bay[data-state="cleared"] .sheet, .plan .bay[data-state="contained"] .sheet, .plan .bay[data-state="applying"] .sheet{ opacity:1; }
.plan .bay[data-state="contained"] .contain, .plan .bay[data-state="applying"] .contain{ opacity:.55; }
.plan .bay[data-state="released"] .plan-lbl, .plan .bay[data-state="cleared"] .plan-lbl, .plan .bay[data-state="contained"] .plan-lbl, .plan .bay[data-state="applying"] .plan-lbl{ fill:var(--phosphor); }
.plan .bay[data-state="treated"] .plan-lbl{ fill:var(--accent-hover); }
.plan .bay[data-state="treated"] .rack{ fill:var(--surface-raised); }
.plan .bay[data-state="treated"] .plan-n{ fill:var(--accent-hover); }
@media (max-width:859px){ .plan .plan-lbl, .plan .side{ display:none; } .plan .plan-n{ font-size:15px; } }
.plan-foot{ margin-top:10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; font-size:12.5px; color:var(--muted); }
.plan-foot b{ color:var(--heading); font-weight:600; }
/* the step bar - fills within a step (established component) */
.steps{ margin-top:18px; display:grid; grid-template-columns:repeat(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{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; } .step{ padding:8px 6px 10px; } .step .t{ font-size:11.5px; } .step .k{ display:none; } }
/* the reading - paper card with the fold corner; the corner takes the state colour */
.bay-card{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 22px 24px; overflow:hidden; }
.bay-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; }
.bay-card[data-state="treated"]::after{ background:var(--accent-on-panel); }
.bay-card[data-state="contained"]::after, .bay-card[data-state="applying"]::after{ background:var(--amb-periwinkle); }
.bay-kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.bay-count{ margin-top:6px; font-size:14px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; }
.bay-title{ margin-top:14px; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.4px; color:var(--heading); text-wrap:balance; }
.bay-title .n{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--phosphor); margin-right:10px; vertical-align:middle; }
.bay-body{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--body); min-height:66px; }
.bay-body b{ color:var(--heading); }
.bay-state{ animation:resIn .32s var(--ease); }
@keyframes resIn{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }
.meters{ margin-top:18px; display:grid; gap:12px; }
.meter{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; font-size:13px; color:var(--body); }
.meter-l{ display:flex; align-items:center; gap:8px; }
.meter-l i{ width:10px; height:8px; background:var(--m); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.meter-v{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--phosphor); font-size:12.5px; }
.meter-bar{ grid-column:1 / -1; height:6px; background:var(--surface-sunken); border-radius:2px; overflow:hidden; }
.meter-bar i{ display:block; height:100%; width:0; background:var(--phosphor); transition:width .4s var(--ease); }
.meter-op{ --m:var(--phosphor); } .meter-tr{ --m:var(--accent); } .meter-tr .meter-bar i{ background:var(--accent-on-panel); }
.bay-actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.bay-actions .btn{ padding:10px 14px; font-size:14px; }
.bay-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; }
.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); }

/* ---------- 04 the depth - paper: objective tiles choose; the ladder answers ---------- */
.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; }
.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-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 p{ margin-top:6px; font-size:14px; line-height:1.5; color:var(--body); }
.ladder-out .flag{ margin-top:8px; }
.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; }

/* ---------- 05 before anyone talks about depth - raised: what the survey establishes + the note ---------- */
.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; } }
.est{ list-style:none; padding:0; margin:0; display:grid; }
.est 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); }
.est li:first-child{ border-top:0; padding-top:0; }
.est li::before{ content:counter(e); counter-increment:e; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--phosphor); padding-top:5px; }
.est{ counter-reset:e; }
.est b{ color:var(--heading); }
.survey .note{ background:var(--surface); }
.survey .refusal h3{ font-size:17.5px; }
.survey .refusal p{ font-size:14px; }

/* ---------- related - photograph tiles on paper ---------- */
.next{ border-top:1px solid var(--border-hairline); }
.forward{ border-top:1px solid var(--border-hairline); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .pair .fig{ opacity:1; transform:none; }
}

/* ================= v2 additions - conversion furniture, index, material module, projects, answers ================= */

/* ---------- masthead: seven items at the tablet single-line band; the Guides family is new ---------- */
@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); }

/* ---------- hero, conversion: the sheet on the left, the estimator on the right ---------- */
.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; } }
.hero .sheet-wrap, .hero .sheet{ max-width:none; }
.hero h1{ font-size:clamp(34px,4.1vw,52px); letter-spacing:-1.1px; }
@media (min-width:1000px){ .hero{ padding:56px 0 72px; } }
/* the estimator: a second, raised sheet with the turned corner; nothing in it sits on the photograph */
.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; }
/* progress: four segments, moves on the first action (standard 6) */
.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; }
/* choice tiles: icon, clear selected state, full-tile hit area, keyboard (standard 6) */
.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; }
/* the reading: paper card with the fold, phosphor readout */
.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; }
.chip.is-flag{ border-color:var(--action); color:var(--action); font-weight:600; font-size:12px; }
/* the contact gate: the estate's field, arming control (standard 6) */
.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; }
.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; }
.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); }
.est-done .flag{ margin-top:4px; justify-self:start; }
.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); }

/* mobile bar - the landing page's proven sticky call, hidden while the estimator is in view and on the desktop band */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:var(--surface-raised); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; transform:translateY(0); transition:transform .3s var(--ease); }
.mbar.is-off{ transform:translateY(110%); }
.mbar span{ font-size:12.5px; color:var(--muted); }
.mbar .btn{ padding:10px 14px; font-size:14px; }
@media (min-width:1110px){ .mbar{ display:none; } }
body.has-mbar{ padding-bottom:64px; }
@media (min-width:1110px){ body.has-mbar{ padding-bottom:0; } }

/* ---------- the index - on this page: 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(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); }
section[id]{ scroll-margin-top:16px; }

/* ---------- 03 the material - SHARED MODULE (holvem-material-v1), goes on every building and service page ---------- */
.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); }

/* ---------- 05 the objective - rebuilt: the tile answers with the band, the FROM rate and what it does not claim ---------- */
.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-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 .prov{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.ladder-out .prov a{ color:var(--accent-text); }
.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); }

/* ---------- 06 survey + the rates: published FROM rates, qualified by size and objective ---------- */
.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); }
.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; } }
.refusal.is-published .rk{ color:var(--verdict-verified); }
.refusal.is-published h3{ color:var(--heading); }
.refusal .rate-line{ margin-top:8px; font-family:var(--mono); font-size:13px; color:var(--phosphor); font-weight:600; letter-spacing:.02em; }

/* ---------- 07 recent warehouse projects - real footage and photographs from the landing page, carried as records ---------- */
.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; }
.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-label{ z-index:1; }
.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; }
.rec.is-playing .rec-play .play{ display:none; } .rec.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; }
.records{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border); display:grid; gap:12px; }
@media (min-width:860px){ .records{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.record{ display:grid; gap:8px; padding:16px 18px 18px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); font-size:14px; color:var(--body); }
.record .rk{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.record h3{ font-size:17px; line-height:1.25; letter-spacing:-.2px; font-weight:600; color:var(--heading); }
.record dl{ margin:4px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13.5px; }
.record dt{ color:var(--muted); } .record dd{ margin:0; color:var(--heading); font-variant-numeric:tabular-nums; }
.record .res{ margin-top:4px; padding-top:8px; border-top:1px solid var(--border-hairline); font-size:13.5px; }
.record .res b{ color:var(--verdict-verified); }

/* ---------- 08 straight answers + 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; }


/* ---------- anchored CTA (standard s9): one or two through the body, where intent peaks; returns the reader to the hero form
   and moves focus to its first control. Paper strip, sea-glass edge, the arming orange frame; nothing on a plate. ---------- */
.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; }
.anchor-cta .btn{ flex:none; }
.raised .anchor-cta, .survey .anchor-cta, .projects .anchor-cta{ background:var(--surface); }

/* ================= buildings v5 (b5): the CTA audit's furniture ================= */
/* ================= g3: the masthead action is a BUTTON again (R1-SITE-03; standard s9 masthead exemption) =================
   The served homepage construction (.ghost desktop-cta on HOLVEM Furniture Top): 2px border-strong frame, 8px radius, 12px 24px, 16/24
   regular, ink label, transparent; hover fills sunken paper. Added per the ruling: a small arrow (decorative) that travels 3px 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; } }
@media (prefers-reduced-motion: reduce){ .masthead .desktop-cta, .masthead .desktop-cta svg{ transition:none; } }
.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); }
.fallback{ margin-top:18px; padding:14px 18px; background:var(--surface-raised); border-radius:var(--r); font-size:14.5px; color:var(--body); }
.fallback a{ color:var(--accent-text); font-weight:600; }

/* ---------- prototype flag ---------- */
.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; }

@media (prefers-reduced-motion: reduce){
  .est-prog i::after, .choice, .ixi, .mbar{ transition:none !important; }
}

.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:nowrap; }
/* v4 re-tidy after the UK-terms block: the key on five columns, the hand-off directly beneath it */
@media (min-width:1000px){ .applied .key{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.applied .handoff{ margin-top:30px; }

/* ================= a1: /applications/metal-roof-underside/ ================= */
/* hero: the underside itself, at scale; the sheet is the paper card; nothing sits on the photograph */
.hero-media img{ object-position:50% 62%; }
@media (min-width:720px){ .hero-media img{ object-position:50% 55%; } }
/* the index carries eight items on this page too */
/* ---------- 01 the build-up - paper: the section drawing large, the cut sample beside it, the key beneath ---------- */
.buildup{ padding:72px 0 64px; }
.buildup .applied-grid{ margin-top:34px; }
.buildup .fig .cap{ padding:14px 18px 16px; font-size:14px; line-height:1.5; color:var(--body); }
.buildup .fig{ display:flex; flex-direction:column; }
.buildup .fig .fig-media{ flex:none; }
.buildup .fig-tag{ background:var(--amb-periwinkle); color:var(--heading); }
.same{ margin-top:26px; padding-top:18px; border-top:1px solid var(--border-hairline); display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:start; font-size:14.5px; line-height:1.5; color:var(--body); max-width:70ch; }
.same::before{ content:""; width:12px; height:9px; margin-top:6px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.same b{ color:var(--heading); }

/* ---------- 02 five steps - the instrument on sunken paper ----------
   One section drawing carrying all ten states (a1/steps_draw.py); the step bar selects the step, the pair beneath selects the state.
   Colour carries meaning only: phosphor = verified state and the succeed condition, the violet anchor = failure and the fail condition,
   aqua = water, the coat colour = the coating. Every change is a one-shot cross-fade under 400 ms; none of it runs under reduced motion. */
.fivesteps{ padding:72px 0 80px; background:var(--surface-sunken); border-top:1px solid var(--border); }
.fivesteps .steps{ margin-top:34px; }
.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; } }
.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-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-wrap[data-state="f"] .sd-card::after{ background:var(--amb-violet-anchor); }
.sd-foot{ margin-top:10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; font-size:12.5px; color:var(--muted); }
.sd-foot b{ color:var(--heading); font-weight:600; }
.sd-foot .st-now{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); }
.sd-wrap[data-state="f"] .sd-foot .st-now{ color:var(--amb-violet-anchor); }
/* the drawing's vocabulary beyond the homepage set */
.drawing .ok{ stroke:var(--phosphor); stroke-width:3; }
.drawing .bad{ stroke:var(--amb-violet-anchor); stroke-width:3; }
.drawing .mk.bad{ fill:var(--amb-violet-anchor); stroke:none; }
.drawing .side.bad-side{ fill:var(--amb-violet-anchor); }
.drawing .bead{ fill:var(--cond); }
.drawing .drip{ stroke:var(--cond); stroke-width:2; stroke-dasharray:4 4; }
.drawing .flake{ fill:var(--body); }
.drawing .void{ fill:var(--heading); opacity:.78; }
.drawing .prep{ stroke:var(--phosphor); stroke-width:3; }
.drawing .coat.thin{ fill:var(--accent-on-panel); }
.drawing .rooflight{ fill:#FFFFFF; stroke:var(--heading); stroke-width:2; }
.drawing .climb{ fill:var(--surface-raised); stroke:var(--amb-violet-anchor); stroke-width:2.5; }
.drawing-mobile .drawing .ok, .drawing-mobile .drawing .bad, .drawing-mobile .drawing .prep{ stroke-width:1.8; }
.drawing-mobile .drawing .climb{ stroke-width:1.5; }
.sd [data-on]{ opacity:0; transition:opacity .3s var(--ease); }
.sd.is-1s [data-on~="1s"]{opacity:1}.sd.is-1f [data-on~="1f"]{opacity:1}.sd.is-2s [data-on~="2s"]{opacity:1}.sd.is-2f [data-on~="2f"]{opacity:1}.sd.is-3s [data-on~="3s"]{opacity:1}.sd.is-3f [data-on~="3f"]{opacity:1}.sd.is-4s [data-on~="4s"]{opacity:1}.sd.is-4f [data-on~="4f"]{opacity:1}.sd.is-5s [data-on~="5s"]{opacity:1}.sd.is-5f [data-on~="5f"]{opacity:1}
/* the reading card: kicker, the step, its description */
.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 .3s; }
.st-card[data-state="f"]::after{ background:var(--amb-violet-anchor); }
.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); }
.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; }
/* the pair: succeed | fail, two opposed states of equal weight; each is a button that puts its state into the drawing */
.pair2{ margin-top:18px; display:grid; gap:12px; }
@media (min-width:720px){ .pair2{ grid-template-columns:1fr 1fr; gap:16px; } }
.cond{ all:unset; box-sizing:border-box; cursor:pointer; 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); color:var(--heading); overflow:hidden; transition:transform var(--dur) var(--ease), border-color var(--dur); }
.cond::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c); }
.cond::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--c); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); }
.cond:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.cond:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.cond[aria-pressed="true"]{ border-color:var(--c); }
.cond[aria-pressed="true"]::after{ transform:scale(1); }
.cond-ok{ --c:var(--phosphor); }
.cond-bad{ --c:var(--amb-violet-anchor); background:var(--surface); }
.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 .ck svg{ width:16px; height:16px; flex:none; }
.cond .ck .shown{ margin-left:auto; font-size:10px; letter-spacing:.08em; color:var(--muted); opacity:0; transition:opacity .2s; }
.cond[aria-pressed="true"] .ck .shown{ opacity:1; }
.cond .ct{ font-size:17px; line-height:1.4; font-weight:600; letter-spacing:-.2px; color:var(--heading); text-wrap:pretty; }
.cond-bad .ct{ color:var(--heading); }
.cond .ct em{ font-style:normal; color:var(--c); }
.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%); }

/* ---------- 04 where it stops - raised: the real photograph with the label plate, a numbered ledger of three, the terminations band ---------- */
.stops{ padding:72px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.stops-grid{ margin-top:34px; display:grid; gap:20px; }
@media (min-width:1000px){ .stops-grid{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:28px; align-items:stretch; } }
.stops .fig{ background:var(--surface); display:flex; flex-direction:column; }
.stops .fig .fig-media{ flex:none; aspect-ratio:4/3; }
.stops .fig .fig-media img{ object-position:50% 22%; }  /* the portrait record: the rooflights sit in its upper half */
.stops .fig .fig-tag{ background:var(--verdict-verified); color:var(--surface-raised); }
.stops .fig .cap{ padding:14px 18px 16px; font-size:14px; line-height:1.5; color:var(--body); }
.ledger{ background:var(--surface-sunken); border-radius:var(--r); border-top:6px solid var(--amb-periwinkle); padding:22px 24px 24px; display:flex; flex-direction:column; }
.ledger .rk{ 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); }
.ledger ol{ margin:16px 0 0; padding:0; list-style:none; counter-reset:lg; }
.ledger li{ counter-increment:lg; display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.ledger li:first-child{ border-top:0; padding-top:4px; }
.ledger li::before{ content:"0" counter(lg); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--heading); padding-top:4px; font-variant-numeric:tabular-nums; }
.ledger li b{ display:block; font-size:17px; line-height:1.3; letter-spacing:-.2px; color:var(--heading); }
.ledger li p{ margin-top:5px; font-size:14.5px; line-height:1.5; color:var(--body); }
.ledger .lg-sign{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); font-size:13.5px; color:var(--body); display:flex; align-items:center; gap:10px; }
.ledger .lg-sign::before{ content:""; width:12px; height:9px; flex:none; background:var(--amb-periwinkle); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.terms{ position:relative; margin-top:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 24px 24px 30px; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); }
.terms::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%); }
.terms::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); }
.terms h3{ font-size:22px; line-height:1.25; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; max-width:36ch; }
@media (min-width:720px){ .terms h3{ font-size:26px; } }
.terms .tl{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.terms .tl span{ display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-field); background:var(--surface-raised); font-size:13.5px; color:var(--heading); font-weight:600; }
.terms p{ margin-top:14px; font-size:14.5px; line-height:1.5; color:var(--body); max-width:70ch; }
.terms p b{ color:var(--heading); }

/* ---------- 05 project records - paper; the reel from the landing page filtered to the metal roofs ---------- */
.projects{ background:var(--surface); }
.projects .rec{ background:var(--surface-raised); }
/* ---------- 06 depth and rate - raised paper: tiles, the ladder, the rates and the ONE anchored CTA ---------- */
.depth.raised{ background:var(--surface-raised); }
.raised .obj, .raised .ladder-out, .raised .ladder-empty, .raised .drawing-card{ background:var(--surface); }
.raised .rates .hv-size > div{ background:var(--surface-raised); }
/* ---------- 07 before depth - paper: the survey list, the note, the specifier's documents ---------- */
.survey.paper{ background:var(--surface); }
.survey.paper .note{ background:var(--surface-raised); }
.survey .estlist{ background:none; clip-path:none; padding:0; border-radius:0; }
.survey .estlist::after{ display:none; }
.docs{ margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.docs-grid{ margin-top:12px; display:grid; gap:8px; }
/* a1 layout balance (07): compact document rows on the left, more air between the refusals on the right, so the two columns land together at 1440 */
.survey.paper .doc{ padding:12px 16px 13px; gap:4px; }
.survey.paper .doc .dt{ font-size:15.5px; }
.survey.paper .doc .ds{ font-size:13.5px; line-height:1.4; }
.survey.paper .doc .dg{ padding-top:2px; font-size:13.5px; }
.survey.paper .refusal{ margin-top:26px; padding-top:24px; }
.survey.paper .refusal p{ margin-top:10px; }
.survey.paper .note-intro{ margin-top:12px; }
.survey.paper .note-sign{ margin-top:28px; }
@media (min-width:640px) and (max-width:999px){ .docs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.doc{ position:relative; display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; 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); }
.doc::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); }
.doc:hover, .doc:focus-visible{ transform:translateY(-3px); border-color:var(--accent); }
.doc:hover::after, .doc:focus-visible::after{ transform:scale(1); }
.doc .dk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.doc .dt{ font-size:17px; font-weight:600; letter-spacing:-.3px; line-height:1.25; color:var(--heading); }
.doc .ds{ font-size:14px; color:var(--body); line-height:1.45; }
.doc .dg{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); }
.doc .dg svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.doc:hover .dg svg, .doc:focus-visible .dg svg{ transform:translateX(4px); }
.docs-foot{ margin-top:14px; font-size:13.5px; color:var(--body); }
/* ---------- 08 answers - raised ---------- */
.answers.raised{ background:var(--surface-raised); }
.answers.raised .feature-q, .answers.raised .summary-card{ background:var(--surface); }
.answers.raised .summary-card{ border-color:var(--border); }
.next{ background:var(--surface); }
@media (prefers-reduced-motion: reduce){ .sd [data-on], .cond, .cond::after, .doc, .sd-card::after, .st-card::after{ transition:none !important; } .st-read{ animation:none !important; } }

/* ================= a2 ================= */
/* ---------- is this your roof? - a routing band under the index: four navigation tiles with the estimator's own line icons; the page's roof is marked ---------- */
.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:28px; 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:1000px){ .rtiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } }
.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); }

/* ---------- 03 why this layer, on this sheet - raised paper: four drawn frames, each a card, revealed one-shot as they come into view ---------- */
.why{ padding:72px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.why-grid{ margin-top:34px; display:grid; gap:16px; counter-reset:wf; }
@media (min-width:720px){ .why-grid{ grid-template-columns:1fr 1fr; gap:20px; } }
.wcard{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; opacity:0; transform:translateY(10px); transition:opacity .38s var(--ease), transform .38s var(--ease); }
.wcard.is-in{ opacity:1; transform:none; }
.wcard:nth-child(2){ transition-delay:.08s; } .wcard:nth-child(3){ transition-delay:.16s; } .wcard:nth-child(4){ transition-delay:.24s; }
.wcard .wf-wrap{ background:var(--surface-raised); border-bottom:1px solid var(--border-hairline); padding:14px 16px 8px; }
.wcard .drawing{ width:100%; height:auto; display:block; }
.wcard .wf .mk{ font-size:11.5px; } .wcard .wf .side{ font-size:9px; } .wcard .wf .cut{ stroke-width:4; } .wcard .wf .cut.lap{ stroke-width:3; } .wcard .wf .outline{ stroke-width:2; } .wcard .wf .annotation{ stroke-width:1.2; }
.wcard .wf .up{ stroke-width:1.8; } .wcard .wf .warm{ stroke-width:1.6; }
.wcard .wb{ padding:18px 20px 22px; display:grid; gap:8px; }
.wcard .wk{ 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(--muted); }
.wcard .wk::before{ content:"0" counter(wf); counter-increment:wf; display:grid; place-items:center; width:24px; height:24px; border-radius:var(--r-field); font-size:12px; letter-spacing:0; color:var(--surface-raised); background:var(--heading); }
.wcard h3{ font-size:22px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; }
.wcard p{ font-size:15px; line-height:1.5; color:var(--body); }
.wcard p b{ color:var(--heading); }
.why-sign{ margin-top:22px; font-size:15.5px; line-height:1.5; color:var(--body); max-width:70ch; display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:start; }
.why-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%); }
.why-sign b{ color:var(--heading); }
.drawing .primer{ stroke:var(--amb-aqua); stroke-width:3.5; }
.drawing .cover{ stroke:var(--heading); stroke-width:2; stroke-dasharray:6 5; fill:none; }
.drawing .board{ fill:var(--surface-sunken); }
.drawing .fix, .drawing .fixhead{ fill:var(--heading); }
.drawing .warm{ fill:none; stroke:var(--amb-soft-violet); stroke-width:2; }
.drawing .up{ stroke:var(--phosphor); stroke-width:2.5; }
.drawing-mobile .drawing .primer{ stroke-width:2; }
.sd.is-a [data-on~="a"]{opacity:1}.sd.is-b [data-on~="b"]{opacity:1}
/* ---------- 04 the rooflights - paper: the choice, two routes of equal weight; one drawing switches between them ---------- */
.rooflights{ padding:72px 0 72px; background:var(--surface); border-top:1px solid var(--border-hairline); }
.rl-grid{ margin-top:34px; display:grid; gap:18px; }
.rooflights .sd-card::after{ background:var(--phosphor); }
.rooflights .sd-wrap[data-state="b"] .sd-card::after{ background:var(--amb-periwinkle); }
.rooflights .sd-foot .st-now{ color:var(--phosphor); }
.rooflights .sd-wrap[data-state="b"] .sd-foot .st-now{ color:var(--accent-text); }
.routes{ margin-top:16px; display:grid; gap:12px; }
@media (min-width:720px){ .routes{ grid-template-columns:1fr 1fr; gap:16px; } }
.route{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; gap:12px; align-content:start; padding:22px 24px 24px 28px; 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); }
.route::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c); }
.route::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--c); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); }
.route:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.route:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.route[aria-pressed="true"]{ border-color:var(--c); }
.route[aria-pressed="true"]::after{ transform:scale(1); }
.route-a{ --c:var(--phosphor); }
.route-b{ --c:var(--amb-periwinkle); }
.route .rk{ 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(--body); }
.route-a .rk{ color:var(--phosphor); }
.route .rk .shown{ margin-left:auto; font-size:10px; letter-spacing:.08em; color:var(--muted); opacity:0; transition:opacity .2s; }
.route[aria-pressed="true"] .rk .shown{ opacity:1; }
.route h3{ font-size:24px; line-height:1.15; letter-spacing:-.5px; font-weight:600; color:var(--heading); text-wrap:balance; }
.route .rp{ font-size:15px; line-height:1.5; color:var(--body); }
.route .rp b{ color:var(--heading); }
.route ol{ margin:2px 0 0; padding:0; list-style:none; display:grid; gap:6px; counter-reset:rs; }
.route li{ counter-increment:rs; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; line-height:1.45; color:var(--body); }
.route li::before{ content:counter(rs); font-family:var(--mono); font-size:11px; font-weight:600; color:var(--c); padding-top:3px; }
.route-b li::before{ color:var(--accent-text); }
.route li b{ color:var(--heading); }
.rooflights .terms{ margin-top:18px; }
.rooflights .terms h3{ font-size:20px; }
@media (min-width:720px){ .rooflights .terms h3{ font-size:22px; } }

/* ---------- 05 records on raised, 06 depth on paper, 07 before depth on sunken with the note raised, 08 answers on paper ---------- */
.projects.raised{ background:var(--surface-raised); }
.depth.paper{ background:var(--surface); }
.paper .obj, .paper .ladder-out, .paper .ladder-empty, .paper .drawing-card{ background:var(--surface-raised); }
.paper .rates .hv-size > div{ background:var(--surface-raised); }
.survey.sunk{ background:var(--surface-sunken); border-top:1px solid var(--border); }
.survey.sunk .note{ background:var(--surface-raised); }
.survey.sunk .estlist{ background:none; clip-path:none; padding:0; border-radius:0; }
.survey.sunk .estlist::after{ display:none; }
.survey.sunk .estlist li{ border-top-color:var(--border); padding:36px 0; font-size:18px; line-height:1.55; }
.survey.sunk .estlist li:first-child{ padding-top:6px; }
.survey.sunk .handoff{ margin-top:8px; padding-top:22px; border-top:1px solid var(--border); }
.survey.sunk .refusal{ margin-top:18px; padding-top:16px; }
.survey.sunk .note{ padding:22px 24px 24px 28px; }
.answers.paper{ background:var(--surface); }
.answers.paper .feature-q{ background:var(--surface-raised); }
@media (min-width:1000px){ .answers.paper .ans-grid{ grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:48px; align-items:start; } }
.answers.paper .qa{ margin-top:0; }
@media (prefers-reduced-motion: reduce){ .wcard{ opacity:1; transform:none; transition:none !important; } .route, .route::after{ transition:none !important; } }

/* ================= a3: THE APPLICATIONS THEME - "the state run" =================
   On an application page the four mineral bodies are a SCALE of the substrate's state, not a wash: violet anchor = cold, below the dew
   point; aqua = the dew point, where water forms; sea-glass = above it, dry. The bodies are cut at 31 deg and never blended; the page's
   instruments move along the run. Where daylight is the subject (a rooflight) the light bodies alone stand for daylight through a material,
   as a plate, with every word on paper laid over it. The section drawing is rationed to 01 and 02. */
.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; }
/* ---------- 03 the cold morning - raised paper: one photographic stage with two states, numbered marks on the picture, the ledger beneath, the state run ---------- */
.cold{ padding:72px 0 76px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.cold-head{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; }
.seg{ display:inline-flex; gap:6px; padding:4px; background:var(--surface-sunken); border-radius:var(--r); }
.seg button{ all:unset; cursor:pointer; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:6px; font-size:13.5px; font-weight:600; color:var(--heading); transition:background-color var(--dur), color var(--dur); }
.seg button i{ width:10px; height:8px; background:var(--c); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.seg button[aria-pressed="true"]{ background:var(--surface-raised); box-shadow:0 1px 0 var(--border); }
.seg button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.seg .sb{ --c:var(--amb-violet-anchor); } .seg .sl{ --c:var(--phosphor); }
.cold-note{ font-size:13.5px; color:var(--muted); }
.stage-wrap{ position:relative; margin-top:16px; }
.stage-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%); }
.stage{ position:relative; aspect-ratio:21/9; background:var(--surface-sunken); 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%); }
.stage::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--amb-violet-anchor); clip-path:polygon(0 0, 100% 100%, 0 100%); transition:background-color .3s; z-index:3; }
.stage-wrap[data-state="layer"] .stage::after{ background:var(--phosphor); }
@media (max-width:719px){ .stage{ aspect-ratio:4/3; } }
.stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .36s var(--ease); }
.stage img.is-on{ opacity:1; }
@media (max-width:719px){ .stage img[data-state="bare"]{ object-position:48% 50%; } .stage img[data-state="layer"]{ object-position:40% 50%; } }
/* the marks: a numbered paper disc with the label plate beside it; never text on the photograph */
.mark{ position:absolute; z-index:2; display:flex; align-items:center; gap:0; transform:translate(-14px,-14px); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none; }
.mark.is-on{ opacity:1; pointer-events:auto; }
.mark b{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surface-raised); color:var(--heading); font-family:var(--mono); font-size:12px; font-weight:600; border:2px solid var(--c); box-shadow:0 1px 2px rgba(20,24,27,.25); flex:none; }
.mark span{ margin-left:8px; display:inline-flex; align-items:center; padding:6px 16px 6px 10px; background:var(--surface-raised); color:var(--heading); font-size:13px; font-weight:600; white-space:nowrap; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 100%, 0 100%); }
.mark[data-state="bare"]{ --c:var(--amb-violet-anchor); } .mark[data-state="layer"]{ --c:var(--phosphor); }
.mark:nth-of-type(2){ transition-delay:.06s; } .mark:nth-of-type(3){ transition-delay:.12s; } .mark:nth-of-type(5){ transition-delay:.06s; } .mark:nth-of-type(6){ transition-delay:.12s; }
@media (max-width:719px){ .mark span{ display:none; } }
/* the state run beneath the stage: violet (cold, below dew point) -> aqua (dew point) -> sea-glass (dry); the marker is the face the air touches */
.runbox{ margin-top:22px; padding:16px 18px 14px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); }
.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: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; }
.stage-wrap[data-state="layer"] ~ .runbox .marker i{ left:88%; 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; } }
/* the ledger: three numbered readings for the state shown */
.ledger3{ margin-top:18px; display:grid; gap:12px; }
@media (min-width:860px){ .ledger3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.ld{ display:grid; gap:8px; align-content:start; padding:18px 20px 20px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); border-top:5px solid var(--c); animation:resIn .32s var(--ease); }
.ld[data-state="bare"]{ --c:var(--amb-violet-anchor); } .ld[data-state="layer"]{ --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); }
.cold-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; }
.cold-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%); }
.cold-sign b{ color:var(--heading); }

/* ---------- 04 the daylight cut - paper: one panel, two halves divided by the fold; material for the sealed route, daylight for the open one ---------- */
.rooflights{ padding:72px 0 72px; background:var(--surface); border-top:1px solid var(--border-hairline); }
.dcut-wrap{ position:relative; margin-top:34px; }
.dcut-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%); }
.dcut{ position:relative; height:420px; border-radius:var(--r); overflow:hidden; isolation:isolate; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); --mid:50%; }
@media (max-width:719px){ .dcut{ height:300px; } }
/* daylight: the plate, dose 1, no text on it */
.dcut-light{ position:absolute; inset:0; z-index:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gdaylight-v30%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22-349.98%22%20y1%3D%22-750.03%22%20x2%3D%22371.07%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23A1B8AE%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ADC4B9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gdaylight-v31%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22914.78%22%20y1%3D%22123.31%22%20x2%3D%221111.07%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2376AAAE%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2382B5B9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gdaylight-v32%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%221111.07%22%20y1%3D%22450.00%22%20x2%3D%221832.13%22%20y2%3D%221650.03%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%239299BF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23878DB4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%22-6000.000%2C0.000%201120.000%2C0.000%20-377.852%2C900.000%20-7497.852%2C900.000%22%20fill%3D%22url%28%23gdaylight-v30%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%221120.000%2C0.000%201860.000%2C0.000%20362.148%2C900.000%20-377.852%2C900.000%22%20fill%3D%22url%28%23gdaylight-v31%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%221860.000%2C0.000%209000.000%2C0.000%207502.148%2C900.000%20362.148%2C900.000%22%20fill%3D%22url%28%23gdaylight-v32%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3C%2Fsvg%3E"); background-size:cover; background-position:center; background-repeat:no-repeat; }
/* the material: a plate of paper tones, the seal as one lit surface; clipped at the 31 deg cut */
.dcut-mat{ position:absolute; inset:0; z-index:1; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gmaterial-v30%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22-949.98%22%20y1%3D%22-750.03%22%20x2%3D%22-228.93%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23D7D4CC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DFDCD3%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gmaterial-v31%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22256.00%22%20y1%3D%22158.63%22%20x2%3D%22431.07%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E2E0D9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23EAE8E1%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gmaterial-v32%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22960.08%22%20y1%3D%22132.14%22%20x2%3D%221151.07%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F3F2F1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FBFAF8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gmaterial-v33%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%221591.92%22%20y1%3D%22185.12%22%20x2%3D%221751.07%22%20y2%3D%22450.00%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23EDECE8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F4F3EF%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gmaterial-v34%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%221751.07%22%20y1%3D%22450.00%22%20x2%3D%222472.13%22%20y2%3D%221650.03%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFFFFF%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F7F7F7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%22-6000.000%2C0.000%20520.000%2C0.000%20-977.852%2C900.000%20-7497.852%2C900.000%22%20fill%3D%22url%28%23gmaterial-v30%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%22520.000%2C0.000%201180.000%2C0.000%20-317.852%2C900.000%20-977.852%2C900.000%22%20fill%3D%22url%28%23gmaterial-v31%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%221180.000%2C0.000%201900.000%2C0.000%20402.148%2C900.000%20-317.852%2C900.000%22%20fill%3D%22url%28%23gmaterial-v32%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%221900.000%2C0.000%202500.000%2C0.000%201002.148%2C900.000%20402.148%2C900.000%22%20fill%3D%22url%28%23gmaterial-v33%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cpolygon%20points%3D%222500.000%2C0.000%209000.000%2C0.000%207502.148%2C900.000%201002.148%2C900.000%22%20fill%3D%22url%28%23gmaterial-v34%29%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3C%2Fsvg%3E"); background-size:cover; background-position:center; background-repeat:no-repeat; clip-path:polygon(0 0, calc(var(--mid) + 349.5px) 0, calc(var(--mid) - 349.5px) 100%, 0 100%); transition:clip-path .38s var(--ease); }  /* the fold: 31 deg from the horizontal, dy/dx = 0.600861; over 420px of height the edge runs 699px across, centred on --mid */
/* the coated edge: the stop when exposed, the seal's own edge at the rooflight when sprayed */
.dcut-edge{ position:absolute; z-index:2; top:0; left:calc(var(--mid) + 349.5px); width:5px; height:900px; margin-left:-2px; background:var(--accent-hover); transform-origin:50% 0; transform:rotate(59deg); transition:left .38s var(--ease); pointer-events:none; }
.dcut::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%); z-index:4; }
/* the two paper plates, one per half: the words never sit on the plate or the texture */
.dplate{ position:absolute; z-index:3; width:min(46%, 420px); background:var(--surface-raised); border-radius:var(--r); padding:20px 22px 22px; box-shadow:-7px 9px 0 rgba(20,24,27,.11); clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 15.6px, 100% 100%, 0 100%); transition:opacity .3s var(--ease); display:grid; gap:10px; }
.dplate::after{ content:""; position:absolute; top:0; right:0; width:26px; height:15.6px; background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.dplate.dp-a{ left:4%; top:9%; } .dplate.dp-b{ right:4%; bottom:9%; }
.dplate .dk{ 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); }
.dp-a{ --c:var(--phosphor); } .dp-b{ --c:var(--accent-text); }
.dplate h3{ font-size:22px; line-height:1.15; letter-spacing:-.5px; font-weight:600; color:var(--heading); text-wrap:balance; }
.dplate p{ font-size:14px; line-height:1.5; color:var(--body); }
.dplate p b{ color:var(--heading); }
.dplate .chips{ margin-top:2px; }
.dcut[data-route="a"] .dp-b, .dcut[data-route="b"] .dp-a{ opacity:0; pointer-events:none; }
.dcut[data-route="a"]{ --mid:96%; } .dcut[data-route="b"]{ --mid:4%; }
@media (max-width:719px){
  .dcut{ --mid:50%; } .dcut[data-route="a"]{ --mid:160%; } .dcut[data-route="b"]{ --mid:-60%; }
  .dcut-edge{ display:none; }
}
.dcut-foot{ margin-top:10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; font-size:12.5px; color:var(--muted); }
.dcut-foot .st-now{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; font-weight:600; color:var(--phosphor); }
.dcut-wrap[data-state="b"] .dcut-foot .st-now{ color:var(--accent-text); }
.routes{ margin-top:18px; }
@media (prefers-reduced-motion: reduce){ .stage img, .mark, .marker i, .dcut-mat, .dcut-edge, .dplate, .seg button{ transition:none !important; } .ld{ animation:none !important; } }

@media (max-width:719px){ .dcut-mat{ clip-path:polygon(0 0, calc(var(--mid) + 249.6px) 0, calc(var(--mid) - 249.6px) 100%, 0 100%); } }  /* 300px tall: the fold runs 499px across */

/* mobile: the panel carries two short label plates instead of the full plates (the route cards beneath hold the same approved copy) */
.dtag{ display:none; position:absolute; z-index:3; align-items:stretch; }
.dtag .fig-tag{ padding:8px 12px; font-size:11px; }
.dtag .fig-name{ font-size:13px; padding:8px 22px 8px 12px; }
.dtag.dt-a{ left:14px; top:14px; } .dtag.dt-b{ right:14px; bottom:14px; }
.dtag.dt-a .fig-tag{ background:var(--phosphor); color:var(--surface-raised); } .dtag.dt-b .fig-tag{ background:var(--amb-periwinkle); color:var(--heading); }
.dcut[data-route="a"] .dt-b, .dcut[data-route="b"] .dt-a{ opacity:0; }
@media (max-width:719px){ .dplate{ display:none; } .dtag{ display:inline-flex; } }

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


/* ---------- 03: the two-state switch (Founder R3: obvious, full triangles, keyboard) ---------- */
.seg2{ flex:1 1 380px; max-width:560px; display:grid; gap:8px; }
.seg2-hint{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--heading); display:flex; align-items:center; gap:10px; }
.seg2-hint::after{ content:""; flex:1; height:1px; background:var(--border-strong); }
.seg2-btns{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r); }
.seg2-btns button{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 12px; border-radius:6px; font-size:15px; line-height:1.25; font-weight:600; color:var(--body); text-align:center; transition:background-color var(--dur), color var(--dur), box-shadow var(--dur); }
.seg2-btns button svg{ flex:none; width:10px; height:12px; overflow:visible; }
.seg2-btns button svg path{ fill:var(--c); }
.seg2-btns .sb{ --c:var(--amb-violet-anchor); } .seg2-btns .sl{ --c:var(--phosphor); }
.seg2-btns button:hover{ color:var(--heading); background:var(--surface-raised); }
.seg2-btns button[aria-pressed="true"]{ background:var(--surface-raised); color:var(--heading); box-shadow:inset 0 0 0 2px var(--c), 0 1px 0 var(--border); }
.seg2-btns button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.seg2-keys{ font-size:13px; color:var(--muted); }
.seg2-keys kbd{ font-family:var(--mono); font-size:11.5px; padding:1px 6px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; background:var(--surface-raised); color:var(--heading); }
@media (max-width:719px){ .cold-head{ display:grid; } .seg2{ max-width:none; } .seg2-btns button{ font-size:14px; padding:10px 8px; } }
/* the route cards: title and one line, the plates above carry the detail */
.route h3{ font-size:20px; }


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