: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), reproduced from the Webflow component
   e271eda4-7f41-1c8c-ffd9-10398f144642 and the estate stylesheet; lockup from the integration kit ---------- */
.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; }
/* the coloured M3f-D signature with tagline, exactly as the homepage's HOLVEM Furniture Top serves it:
   master body verbatim, padded viewBox -6 -22 691.241 186.645, 216.01 x 58.33 (40px symbol), no fixed
   .logo box (Director ruling 16 Sep 2026; Founder ruling R1-03-15). */
.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); }
.menu .btn{ justify-self:start; margin:10px 0 4px; }
/* served tablet treatment (M5-W5R §15): menu button up to 1109px; single-line nav from 1110px, tighter to 1199px */
@media (min-width:1110px){
  .masthead nav{ display:inline-flex; }
  .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; } }

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

/* ---------- page summary ---------- */
.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), reproduced from component 0c75e49f-b6b7-8e5f-baf2-9c559cce8c11 ---------- */
footer{ padding:26px 0 34px; font-size:13px; color:var(--muted); border-top:1px solid var(--border-hairline); background:var(--surface); }
footer .frame{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--heading); text-decoration:underline; }
footer{ padding:48px 0 40px; }
.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 .frame{ display:block; }
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; } }

/* ================= z1: shared additions for 06 / 10 / 11 ================= */
/* a hero without a photograph: the paper sheet on the sunken field, the field cut at the fold */
.hero-paper{ position:relative; padding:40px 0 56px; background:var(--surface-sunken); overflow:hidden; isolation:isolate; }
.hero-paper::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(0deg,var(--surface) 0,var(--surface) 100%); clip-path:polygon(0 0, 46% 0, calc(46% + 160px) 100%, 0 100%); opacity:.55; }
.hero-paper .frame{ position:relative; z-index:1; }
.hero-paper .sheet-wrap{ max-width:880px; } .hero-paper .sheet{ max-width:880px; }
.rstrip{ margin:22px 0 0; display:grid; gap:8px; padding-top:18px; border-top:1px solid var(--border-hairline); }
@media (min-width:600px){ .rstrip{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.rstrip div{ display:grid; gap:4px; }
.rstrip dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.rstrip dd{ margin:0; font-size:15px; line-height:1.35; color:var(--heading); font-weight:500; }
.rstrip dd.big{ font-size:30px; line-height:1; letter-spacing:-1px; font-weight:600; font-variant-numeric:tabular-nums; }
.rstrip dd .flag-inline{ font-size:11px; }
/* the TO CONFIRM chip always sits on paper: 4.59:1 measured for the action colour on raised paper; 4.31 on the surface would not clear it */
.flag-inline{ background:var(--surface-raised); }
/* a plain section on paper or surface */
.sec-paper{ padding:72px 0 80px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.sec-surface{ padding:72px 0 80px; background:var(--surface); }
/* ---------- 06 the arithmetic: the profile allowance drawn, the multiplication beneath ---------- */
.arith{ margin-top:34px; display:grid; gap:16px; }
@media (min-width:1000px){ .arith{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:stretch; } }
.arith .drawing-card{ display:flex; flex-direction:column; }
.arith .drawing-card .fignote{ margin-top:auto; padding-top:10px; }
.drawing .sheetline{ fill:none; stroke:var(--heading); stroke-width:6; stroke-linecap:round; }
.drawing .devline{ fill:none; stroke:var(--phosphor); stroke-width:3; stroke-linecap:round; }
.drawing .plan{ fill:none; stroke:var(--border-strong); stroke-width:2; stroke-dasharray:6 6; }
.drawing.prof .body{ fill:var(--surface-sunken); }
.drawing .planline{ fill:none; stroke:var(--heading); stroke-width:3; stroke-linecap:round; }
.drawing .tick.dev{ stroke:var(--phosphor); }
.drawing .tick{ fill:none; stroke:var(--heading); stroke-width:2; }
.drawing .mk.plan-k{ fill:var(--body); }
.drawing-mobile .drawing .sheetline{ stroke-width:3; } .drawing-mobile .drawing .devline, .drawing-mobile .drawing.prof .body{ fill:var(--surface-sunken); }
.drawing .planline{ stroke-width:1.8; } .drawing-mobile .drawing .plan{ stroke-width:1.2; }
.sum{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 26px 26px 30px; overflow:hidden; box-shadow:0 1px 0 var(--border); display:flex; flex-direction:column; }
.sum::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--phosphor); }
.sum .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.sum-row{ margin-top:18px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:6px 10px; align-items:end; }
.sum-row .op{ font-size:30px; line-height:1; color:var(--border-strong); font-weight:400; padding-bottom:14px; text-align:center; }
.sum-row .term{ display:grid; gap:6px; min-width:0; }
.sum-row .term b{ font-size:clamp(24px,2.6vw,36px); line-height:1; letter-spacing:-1.2px; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sum-row .term b small{ font-size:.5em; letter-spacing:0; font-weight:500; color:var(--body); }
.sum-row .term span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--body); font-weight:600; line-height:1.3; }
.sum-row .term.allow b{ color:var(--phosphor); }
.sum-row .term.allow span{ color:var(--phosphor); }
.sum p{ margin-top:18px; font-size:14.5px; line-height:1.5; color:var(--body); }
.sum p b{ color:var(--heading); }
.sum .sum-sign{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-hairline); font-size:13.5px; color:var(--body); display:flex; gap:10px; align-items:center; }
.sum .sum-sign::before{ content:""; width:12px; height:9px; flex:none; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
@media (max-width:479px){ .sum-row{ grid-template-columns:1fr; } .sum-row .op{ text-align:left; padding:2px 0 0; font-size:22px; } }
/* ---------- 06 the ledger and the file strip ---------- */
.est-grid{ margin-top:34px; display:grid; gap:16px; }
@media (min-width:1000px){ .est-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; } }
.ldg{ margin:0; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:8px 24px 10px; }
.ldg div{ display:grid; grid-template-columns:150px 1fr; gap:6px 18px; padding:13px 0; border-top:1px solid var(--border-hairline); }
.ldg div:first-child{ border-top:0; }
.ldg dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); padding-top:3px; }
.ldg dd{ margin:0; font-size:15px; line-height:1.5; color:var(--heading); }
.ldg dd small{ display:block; margin-top:3px; font-size:13.5px; color:var(--body); font-weight:400; }
@media (max-width:599px){ .ldg div{ grid-template-columns:1fr; gap:2px; } }
.fstrip{ margin:0; background:var(--surface-sunken); border-radius:var(--r); border-top:6px solid var(--amb-periwinkle); padding:18px 22px 20px; display:grid; gap:12px; }
.fstrip div{ display:grid; grid-template-columns:110px 1fr; gap:4px 14px; align-items:baseline; }
.fstrip dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.fstrip dd{ margin:0; font-size:14.5px; color:var(--heading); font-weight:500; font-variant-numeric:tabular-nums; }
.fstrip .grade{ color:var(--verdict-verified); }
.fstrip .fs-sign{ margin-top:4px; padding-top:12px; border-top:1px solid var(--border); font-size:13px; color:var(--body); }
/* ---------- 06 the calculated outcome, and the refusals ---------- */
.outs{ margin-top:34px; display:grid; gap:12px; }
@media (min-width:600px){ .outs{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .outs{ gap:14px; } }
.out b{ white-space:nowrap; }
.out{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:18px 20px 20px; display:grid; gap:6px; align-content:start; overflow:hidden; }
.out::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(100% 0, 100% 100%, 0 0); }
.out .rk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.out b{ font-size:clamp(22px,2.2vw,28px); line-height:1.05; letter-spacing:-.8px; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
.out b small{ font-size:.55em; letter-spacing:0; font-weight:500; color:var(--body); }
.out p{ font-size:13.5px; line-height:1.45; color:var(--body); }
.outs-sign{ margin-top:14px; font-size:13.5px; color:var(--body); display:flex; gap:10px; align-items:center; }
.outs-sign::before{ content:""; width:12px; height:9px; flex:none; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.basis-grid{ margin-top:34px; display:grid; gap:16px; }
@media (min-width:1000px){ .basis-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; } }
.est-list{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.est-list li{ display:grid; grid-template-columns:14px 1fr; gap:12px; align-items:baseline; font-size:15px; line-height:1.55; color:var(--body); }
.est-list li::before{ content:""; width:12px; height:9px; position:relative; top:-1px; background:var(--verdict-verified); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); }
.est-list b{ color:var(--heading); }
.est-list li.rep::before{ background:var(--amb-periwinkle); }
.refuse-grid{ margin-top:34px; display:grid; gap:14px; }
@media (min-width:640px){ .refuse-grid{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (min-width:1000px){ .refuse-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.refuse-grid .note{ padding:22px 22px 24px 28px; display:flex; flex-direction:column; }
.refuse-grid .note .refusal{ margin-top:10px; padding-top:0; border-top:0; }
.refuse-grid .note .refusal h3{ font-size:18px; }
.refuse-grid .note .refusal p{ font-size:14px; }
.refuse-grid .note .note-sign{ margin-top:auto; padding-top:16px; }
.sec-surface .refuse-grid .note{ background:var(--surface-raised); }
.sec-paper .refuse-grid .note{ background:var(--surface); }
/* ---------- tiles without photographs; the summary paragraph without a copy control ---------- */
.tile-plain .tile-k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.tile-plain .tile-t{ margin-top:6px; font-size:19px; }
.tile-plain .tile-s{ font-size:14.5px; }
.forward-grid.one{ grid-template-columns:1fr; max-width:860px; }
.fwd-foot{ border-top:1px solid var(--border-hairline); padding-top:14px; }
/* ---------- 10 the upload form ---------- */
.uwrap{ padding:56px 0 80px; background:var(--surface); }
.ugrid{ display:grid; gap:20px; }
@media (min-width:1000px){ .ugrid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; align-items:start; } }
.uform{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:26px 26px 28px; box-shadow:0 1px 0 var(--border); overflow:hidden; }
.uform::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(100% 0, 100% 100%, 0 0); }
.uform .kicker{ color:var(--verdict-verified); }
.uform h2{ margin-top:10px; font-size:24px; line-height:1.2; letter-spacing:-.5px; font-weight:600; color:var(--heading); }
.uform .fields{ grid-template-columns:1fr; margin-top:18px; }
.uform .field.invalid .ctl{ border-color:var(--action); }
.uform .err{ display:none; font-size:13px; color:var(--action); }
.uform .field.invalid .err{ display:block; }
.uform .hint{ font-size:13px; color:var(--body); }
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.drop{ position:relative; display:grid; gap:8px; padding:18px 18px 16px; border:1.5px dashed var(--border-strong); border-radius:var(--r); background:var(--surface); }
.drop:hover, .drop.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.drop:focus-within{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0,0,0,0); }
.drop-title{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:600; color:var(--heading); cursor:pointer; }
.drop-title svg{ width:22px; height:22px; flex:none; }
.drop-sub{ font-size:13.5px; color:var(--body); }
.drop-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.drop-actions .btn{ padding:9px 14px; font-size:14px; background:var(--surface-raised); }
.files{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.file{ display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; padding:9px 12px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r-field); }
.file-kind{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--phosphor); min-width:34px; }
.file-name{ font-size:14px; font-weight:500; color:var(--heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-size{ font-family:var(--mono); font-size:12px; color:var(--body); font-variant-numeric:tabular-nums; }
.file.too-big{ border-color:var(--action); } .file.too-big .file-size{ color:var(--action); }
.file-rm{ all:unset; cursor:pointer; display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:var(--r-field); color:var(--heading); }
.file-rm svg{ width:12px; height:12px; } .file-rm:hover{ background:var(--surface-sunken); } .file-rm:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.files-summary{ font-family:var(--mono); font-size:12px; color:var(--body); min-height:18px; }
.uform textarea.ctl{ min-height:96px; resize:vertical; }
.usubmit{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.usubmit .proto{ font-family:var(--mono); font-size:12px; color:var(--action); border:1px solid var(--action); padding:3px 8px; border-radius:var(--r-field); }
.uform .udone{ margin-top:14px; padding:16px 18px; background:var(--surface); border-radius:var(--r); font-size:14.5px; color:var(--body); display:grid; gap:6px; }
.uform .udone b{ color:var(--heading); }
.uform .privacy{ margin-top:14px; font-size:13px; color:var(--body); }
.uside{ display:grid; gap:16px; }
.shot{ background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:22px 24px 24px; }
.shot .kicker{ color:var(--body); }
.shot h3{ margin-top:12px; font-size:15px; font-weight:600; color:var(--heading); }
.shot h3:first-of-type{ margin-top:14px; }
.shot ol{ margin:8px 0 0; padding:0; list-style:none; counter-reset:sh; display:grid; gap:6px; }
.shot li{ counter-increment:sh; display:grid; grid-template-columns:24px 1fr; gap:8px; font-size:14.5px; line-height:1.45; color:var(--body); }
.shot li::before{ content:"0" counter(sh); font-family:var(--mono); font-size:11px; font-weight:600; color:var(--phosphor); padding-top:3px; font-variant-numeric:tabular-nums; }
.aside-call{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px 30px; box-shadow:0 1px 0 var(--border); }
.aside-call::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); border-radius:var(--r) 0 0 var(--r); }
.aside-call .kicker{ color:var(--verdict-verified); }
.aside-call p{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--body); }
.aside-call p b{ color:var(--heading); }
.aside-call .tlink{ margin-top:12px; }
/* ---------- 11 the reference card and the commitment ---------- */
.hero-received{ --amb-dose:.55; padding:48px 0 60px; background:var(--surface); overflow:hidden; }
.hero-received .sheet-wrap{ max-width:820px; } .hero-received .sheet{ max-width:820px; }
.rgrid{ margin-top:-24px; padding:0 0 72px; background:var(--surface); }
.rgrid .frame{ display:grid; gap:16px; }
@media (min-width:860px){ .rgrid .frame{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:stretch; } }
.refcard{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 26px 26px 30px; box-shadow:0 1px 0 var(--border); overflow:hidden; display:flex; flex-direction:column; }
.refcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--phosphor); }
.refcard .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); }
.refcard output{ display:block; margin-top:12px; font-family:var(--mono); font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:.02em; font-weight:600; color:var(--heading); min-height:1.1em; font-variant-numeric:tabular-nums; }
.refcard.is-pending output{ color:var(--action); font-size:clamp(20px,2.4vw,26px); letter-spacing:.04em; }
.refcard .ref-sent{ margin-top:8px; font-size:13.5px; color:var(--body); min-height:1.5em; }
.refcard .ref-quote{ margin-top:14px; font-size:15px; line-height:1.5; color:var(--heading); }
.refcard .ref-fallback{ margin-top:10px; font-size:13.5px; color:var(--body); }
.refcard .ref-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-hairline); font-size:13px; color:var(--body); }
.promise{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 26px 26px 30px; box-shadow:0 1px 0 var(--border); display:flex; flex-direction:column; }
.promise::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); border-radius:var(--r) 0 0 var(--r); }
.promise .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--verdict-verified); }
.promise dl{ margin:12px 0 0; display:grid; gap:10px; }
.promise dl div{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline; padding:10px 0; border-top:1px solid var(--border-hairline); }
.promise dl div:first-child{ border-top:0; padding-top:2px; }
.promise dt{ font-size:14.5px; color:var(--body); }
.promise dd{ margin:0; font-size:16px; font-weight:600; color:var(--heading); text-align:right; }
.promise .commit{ margin-top:auto; padding-top:12px; border-top:1px solid var(--border-hairline); font-size:14px; color:var(--body); }
.promise .commit b{ color:var(--heading); }
.speed{ padding:64px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); }
.speed-grid{ margin-top:30px; display:grid; gap:20px; }
@media (min-width:860px){ .speed-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; } }
.speed .shot{ background:var(--surface); }
.speed .actions{ margin-top:0; }
.speed .after{ margin-top:14px; font-size:14px; color:var(--body); }
.quiet{ padding:48px 0 64px; background:var(--surface); }
.quiet .frame{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; }
.quiet p{ font-size:15px; color:var(--body); max-width:58ch; }
.quiet p b{ color:var(--heading); }
@media (prefers-reduced-motion: reduce){ .drop, .file, .btn-arm{ transition:none !important; } }

/* ================= u2: light design pass on /upload/ (M5-R1) ================= */
/* 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; } }

/* the hero joins /thank-you/'s family: the same plate (amb-c-light) at the same dose, the paper sheet on it; every word stays on paper */
.hero-send{ --amb-dose:.55; padding:56px 0 68px; background:var(--surface); overflow:hidden; }
@media (min-width:1000px){ .hero-send{ padding:76px 0 92px; } }
.hero-send .sheet-wrap{ max-width:800px; } .hero-send .sheet{ max-width:800px; }
/* u3 (R1-10-03): the hero strip is gone; the sheet is narrower and the hero taller so the plate still reads */
.hero-send .deck{ max-width:52ch; }
.hero-send .rstrip{ margin-top:26px; padding-top:20px; }

/* the upload block: the two columns land together at 1440 (measured), a little more air around the form */
.uwrap{ padding:52px 0 84px; }
@media (min-width:1000px){ .ugrid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; } }
.uform{ padding:28px 30px 30px; }
.uform .fields{ margin-top:22px; gap:18px; }

/* the drop zone: the heart of the page. A larger target, the glyph cut from HOLVEM's own planes, a clear drag-over state. */
.drop{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:6px 20px; align-items:start; padding:22px 22px 20px; min-height:176px; cursor:pointer;
  border:1.5px dashed var(--border-strong); background:var(--surface); transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.drop-glyph{ display:block; width:64px; height:64px; }
.drop-glyph svg{ width:64px; height:64px; display:block; overflow:visible; }
.drop-body{ display:grid; gap:8px; min-width:0; }
.drop-title{ font-size:16.5px; line-height:1.3; }
.drop-sub{ max-width:52ch; }
.drop-actions{ margin-top:6px; align-items:center; gap:12px 14px; }
.drop-or{ font-size:13px; color:var(--muted); }
/* the glyph's planes: the plate in the ambient run (top lit, front, side in shadow); the arrow in the accent, lit from the upper left */
.drop-glyph .g-top{ fill:var(--amb-sea-glass); } .drop-glyph .g-front{ fill:var(--amb-aqua); } .drop-glyph .g-side{ fill:var(--amb-periwinkle); }
.drop-glyph .g-lit{ fill:none; stroke:rgba(251,250,248,.7); stroke-width:1; }
.drop-glyph .a-front{ fill:var(--accent); } .drop-glyph .a-side{ fill:#4E2F73; }
.drop-glyph .g-arrow{ transition:transform var(--dur) var(--ease); }
/* states: hover invites; drag-over is unmistakable (solid accent edge, soft inset), the arrow lifts */
.drop:hover{ border-color:var(--accent); background:var(--surface-raised); }
.drop.is-over{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 4px var(--surface-raised); }
.drop:hover .g-arrow, .drop.is-over .g-arrow{ transform:translateY(-3px); }
.drop.is-over .drop-title{ color:var(--accent-text); }
.drop:focus-within{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.drop-actions .btn{ background:var(--surface-raised); }
.drop.is-over .drop-actions .btn{ pointer-events:none; }
@media (max-width:719px){ .drop{ grid-template-columns:1fr; padding:20px 18px 18px; min-height:0; } .drop-glyph, .drop-glyph svg{ width:48px; height:48px; } }

/* the list: each new file arrives once (a short one-shot), the rest hold still; the block collapses when empty so there is no dead gap */
.files{ margin:10px 0 0; }
.files:empty{ display:none; }
.files-summary{ min-height:0; margin-top:6px; }
.files-summary:empty{ display:none; }
@keyframes u-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.file.is-in{ animation:u-in .28s var(--ease) both; }
.uform .udone:not([hidden]){ animation:u-in .32s var(--ease) both; }
.usubmit{ margin-top:22px; }

/* the right column: a little tighter, the two lists closer to their kicker */
.shot{ padding:22px 24px 22px; }
.shot h3:first-of-type{ margin-top:12px; }
.shot ol{ gap:5px; }
.aside-call{ padding:22px 24px 22px 30px; }
@media (prefers-reduced-motion: reduce){ .file.is-in, .uform .udone:not([hidden]){ animation:none !important; } .drop, .drop-glyph .g-arrow{ transition:none !important; } .drop:hover .g-arrow, .drop.is-over .g-arrow{ transform:none; } }

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


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



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