:root{ --surface:#F4F3EF; --surface-raised:#FBFAF8; --surface-sunken:#E9E7E0; --panel:#121417; --panel-border:#2A2F35; --border-hairline:#DEDBD2; --border:#C9C6BE; --border-strong:#8B8779; --heading:#14181B; --body:#3C4147; --muted:#5F6369; --on-panel-heading:#F4F3EF; --on-panel-body:#C9C6BE; --on-panel-muted:#9DA1A7; --accent:#6A3F96; --accent-hover:#58347C; --accent-text:#602F90; --accent-soft:#F0E9F6; --accent-on-panel:#BFA4DA; --focus-ring:#25528C; --verdict-verified:#155C46; --verdict-indicative:#25528C; --verdict-insufficient:#5F6369; --verdict-refused:#14181B; /* action: the production value where a control carries a white label (white on #C24E0F measured 4.60:1 at 17px/600); the estate's other construction is an orange FRAME with a paper inset and an ink label (17.1:1), used at the close */ --action:#C24E0F; --action-hover:#AD4409; /* phosphor: bounded utility token */ --phosphor:#43610A; --phosphor-on-dark:#A6E24C; /* ambient expression, OPTION 2 (Founder choice, 18 Sep 2026) */ --amb-sea-glass:#A9C1B6; --amb-aqua:#7CB2B6; --amb-periwinkle:#8D94BC; --amb-soft-violet:#9379AD; --amb-violet-anchor:#6B4097; --holvem-fold:31deg; /* a 31 deg chamfer: dy/dx = tan(31) = 0.6009 */ --ch-x:36.6px; --ch-y:22px; --cond:#7CB2B6; --cond-deep:#3E8A90; --cond-ink:#1F5D62; --font:"Geist", Inter, "Helvetica Neue", Arial, system-ui, sans-serif; --frame:1296px; --gutter:16px; --r:8px; --r-field:4px; --ease:cubic-bezier(.2,.7,.2,1); --dur:.28s; --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (min-width:720px){ :root{ --gutter:32px; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--surface); color:var(--body); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ul,ol,figure{ margin:0; } img{ display:block; max-width:100%; height:auto; } a{ color:var(--accent-text); } b{ font-weight:600; } .frame{ width:100%; max-width:var(--frame); margin:0 auto; padding:0 var(--gutter); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } :focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } [hidden]{ display:none !important; } /* ---------- type ---------- */ .kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:10px; } .kicker b{ font-variant-numeric:tabular-nums; color:var(--heading); } .kicker b::after{ content:""; display:inline-block; width:14px; height:1px; background:var(--border-strong); margin-left:10px; vertical-align:middle; } .h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.8px; font-weight:600; color:var(--heading); text-wrap:balance; max-width:22ch; } .lede{ font-size:17.5px; line-height:1.55; color:var(--body); max-width:62ch; } .sec-head{ display:grid; gap:14px; } .sec-head .lede{ margin-top:4px; } @media (min-width:1000px){ .sec-head{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:end; } .sec-head .lede{ margin-top:0; } } .h2[id]{ scroll-margin-top:16px; } /* ---------- ambient surfaces (integration kit construction): the plate is carried on a pseudo-element over the section's locked ground at a DOSE, a uniform alpha composite; it changes no edge's width, position or angle ---------- */ .amb{ position:relative; isolation:isolate; } .amb::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:cover; opacity:var(--amb-dose,1); } .amb > *{ position:relative; z-index:1; } .amb-c-light::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gc-light-v50%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-429.98%22 y1=%22-750.03%22 x2=%22291.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23A1B8AE%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ADC4B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v51%22 gradientUnits=%22userSpaceOnUse%22 x1=%22673.14%22 y1=%22220.43%22 x2=%22811.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%2376AAAE%22/%3E%3Cstop offset=%221%22 stop-color=%22%2382B5B9%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v52%22 gradientUnits=%22userSpaceOnUse%22 x1=%221354.78%22 y1=%22123.31%22 x2=%221551.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23878DB4%22/%3E%3Cstop offset=%221%22 stop-color=%22%239299BF%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v53%22 gradientUnits=%22userSpaceOnUse%22 x1=%221859.66%22 y1=%22264.58%22 x2=%221971.07%22 y2=%22450.00%22%3E%3Cstop offset=%220%22 stop-color=%22%238C74A5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23987FB1%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gc-light-v54%22 gradientUnits=%22userSpaceOnUse%22 x1=%221971.07%22 y1=%22450.00%22 x2=%222692.13%22 y2=%221650.03%22%3E%3Cstop offset=%220%22 stop-color=%22%2372499C%22/%3E%3Cstop offset=%221%22 stop-color=%22%23663D90%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 1040.000,0.000 -457.852,900.000 -7497.852,900.000%22 fill=%22url%28%23gc-light-v50%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221040.000,0.000 1560.000,0.000 62.148,900.000 -457.852,900.000%22 fill=%22url%28%23gc-light-v51%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%221560.000,0.000 2300.000,0.000 802.148,900.000 62.148,900.000%22 fill=%22url%28%23gc-light-v52%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222300.000,0.000 2720.000,0.000 1222.148,900.000 802.148,900.000%22 fill=%22url%28%23gc-light-v53%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%222720.000,0.000 9000.000,0.000 7502.148,900.000 1222.148,900.000%22 fill=%22url%28%23gc-light-v54%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); } /* ---------- furniture: HOLVEM Furniture Top (site-wide), as home-v1 carries it; the coloured signature (R1-03-15); the settled IA (R1-04-10): one item "Buildings & applications", two-column dropdown ---------- */ .response{ font-family:var(--mono); font-size:12px; line-height:18px; padding:12px var(--gutter); text-align:center; border-bottom:1px solid var(--border); color:var(--muted); background:var(--surface); } .response .tel{ color:var(--heading); white-space:nowrap; } .masthead{ position:relative; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); } .masthead .frame{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:107px; padding-top:24px; padding-bottom:24px; } .masthead .logo{ display:inline-flex; align-items:center; flex-shrink:0; width:auto; height:auto; font-size:0; line-height:0; text-decoration:none; } .masthead .logo svg{ width:209.25px; height:58.33px; display:block; } .masthead .logo:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; } .masthead nav{ display:none; gap:24px; align-items:center; font-size:14px; line-height:24px; } .masthead nav > a, .masthead .navitem > a{ display:flex; align-items:center; gap:6px; color:var(--heading); text-decoration:none; padding:6px 0; } .masthead .navitem{ position:relative; } .masthead .navitem > a::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-2px) rotate(45deg); } .masthead nav a[aria-current="page"], .masthead .navitem[data-current] > a{ box-shadow:inset 0 -2px 0 var(--heading); } .masthead .sub{ position:absolute; left:-12px; top:100%; padding:12px 0 0; display:none; z-index:20; min-width:288px; } .masthead .sub a{ display:block; padding:12px 18px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:14px; line-height:24px; color:var(--heading); text-decoration:none; } .masthead .sub a:first-child{ border-top:1px solid var(--border); border-radius:var(--r) var(--r) 0 0; } .masthead .sub a:last-child{ border-bottom:1px solid var(--border); border-radius:0 0 var(--r) var(--r); } .masthead .sub a:hover, .masthead .sub a:focus-visible{ background:var(--surface-sunken); } .masthead .sub a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent); } .masthead .navitem:hover .sub, .masthead .navitem:focus-within .sub, .masthead .navitem.is-open .sub{ display:block; } .masthead .navitem.is-closed .sub{ display:none; } .menu-button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--heading); padding:8px 12px; border:1.5px solid var(--border-strong); border-radius:var(--r); } .menu-button i{ width:16px; height:10px; border-top:2px solid var(--heading); border-bottom:2px solid var(--heading); position:relative; } .menu-button i::after{ content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid var(--heading); } .menu-button[aria-expanded="true"]{ background:var(--heading); color:var(--on-panel-heading); border-color:var(--heading); } .menu-button[aria-expanded="true"] i, .menu-button[aria-expanded="true"] i::after{ border-color:var(--on-panel-heading); } .menu-button:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } .menu{ background:var(--surface-raised); border-bottom:1px solid var(--border); } .menu[hidden]{ display:none; } .menu-grid{ display:grid; gap:0; padding-top:12px; padding-bottom:20px; } .menu .mgroup{ padding:6px 0; border-bottom:1px solid var(--border); display:grid; } .menu .mhub{ font-weight:500; color:var(--heading); text-decoration:none; padding:8px 0; font-size:17px; } .menu .msub{ padding:6px 0 6px 18px; font-size:16px; color:var(--body); text-decoration:none; } .menu .msub[aria-current="page"]{ color:var(--heading); box-shadow:inset 3px 0 0 var(--accent); padding-left:15px; } .menu > .frame > .mhub{ padding:14px 0 6px; } .menu .tel{ display:block; padding:12px 0; font-size:14px; color:var(--muted); font-family:var(--mono); } @media (min-width:1110px){ .masthead nav{ display:flex; } .menu-button, .menu{ display:none !important; } } @media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:14px; } .masthead nav a{ white-space:nowrap; } } @media (max-width:519px){ .response{ font-size:11px; line-height:16px; padding:10px var(--gutter); } .response .tel{ display:block; margin-top:2px; } } @media (min-width:1110px) and (max-width:1259px){ .masthead nav{ gap:12px; font-size:13.5px; } .masthead .frame{ gap:10px; } } .masthead .sub .subgroup{ display:block; padding:10px 18px 4px; background:var(--surface-raised); border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } .menu .mgroup .msubgroup{ padding:8px 0 2px 18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } /* the masthead action is a BUTTON (R1-SITE-03; standard s9 masthead exemption): the served construction, a small arrow that travels on hover */ .masthead .desktop-cta{ display:none; align-items:center; gap:10px; padding:12px 24px; border:2px solid var(--border-strong); border-radius:var(--r); font-size:16px; line-height:24px; font-weight:400; color:var(--heading); text-decoration:none; white-space:nowrap; background:transparent; transition:background-color var(--dur), border-color var(--dur); } .masthead .desktop-cta svg{ width:14px; height:14px; flex:none; transition:transform var(--dur) var(--ease); } .masthead .desktop-cta:hover{ background:var(--surface-sunken); border-color:var(--heading); } .masthead .desktop-cta:hover svg{ transform:translateX(3px); } .masthead .desktop-cta:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } @media (min-width:1110px){ .masthead .desktop-cta{ display:inline-flex; } } @media (min-width:1110px) and (max-width:1259px){ .masthead .desktop-cta{ font-size:14px; padding:9px 16px; gap:8px; } } /* the settled IA: one item, two columns */ .masthead .sub.sub-2{ min-width:560px; display:none; } .masthead .navitem:hover .sub-2, .masthead .navitem:focus-within .sub-2, .masthead .navitem.is-open .sub-2{ display:grid; grid-template-columns:1fr 1fr; } .masthead .navitem.is-closed .sub-2{ display:none; } .masthead .sub-2 > div{ display:grid; } .masthead .sub-2 > div:first-child a, .masthead .sub-2 > div:first-child .subgroup{ border-right:0; } .masthead .sub-2 > div:first-child a:first-child, .masthead .sub-2 > div:first-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:var(--r) 0 0 0; } .masthead .sub-2 > div:last-child .subgroup:first-child{ border-top:1px solid var(--border); border-radius:0 var(--r) 0 0; } .masthead .sub-2 > div:first-child a:last-child{ border-radius:0 0 0 var(--r); border-bottom:1px solid var(--border); } .masthead .sub-2 > div:last-child a:last-child{ border-radius:0 0 var(--r) 0; border-bottom:1px solid var(--border); } .masthead .sub-2 .subgroup{ border-top:0; } .masthead .sub-2 > div:first-child .subgroup{ border-radius:var(--r) 0 0 0; } .masthead .sub-2 .all{ font-weight:600; color:var(--accent-text); } /* the tablet single-line band (1110-1259) is where the masthead is tight: the item wraps to two lines inside the 107px masthead instead of pushing the CTA past the frame */ @media (min-width:1110px) and (max-width:1259px){ .masthead .navitem.nav-ba > a{ white-space:normal; max-width:88px; line-height:1.15; text-align:left; } .masthead .desktop-cta{ padding:12px 14px; font-size:15px; } } @media (min-width:1110px) and (max-width:1199px){ .masthead nav{ gap:8px; } .masthead .frame{ gap:8px; } .masthead .navitem.nav-ba > a{ max-width:80px; } } /* ---------- text links and the two button constructions ---------- */ .tlink{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--accent-text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; } .tlink:hover{ color:var(--heading); } .tlink::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg); } .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r); font-size:15px; font-weight:600; text-decoration:none; color:var(--heading); background:var(--surface-raised); border:2px solid var(--heading); transition:transform var(--dur) var(--ease), background-color var(--dur), border-color var(--dur); } .btn svg{ width:16px; height:16px; } .btn:hover{ transform:translateY(-2px); } .btn-action{ border-color:var(--action); box-shadow:inset 0 0 0 3px var(--surface-raised); padding:13px 20px; } .btn-action:hover{ background:#FFF; } .fig-label{ position:absolute; left:0; bottom:0; z-index:1; display:flex; align-items:stretch; } .fig-tag{ display:flex; align-items:center; white-space:nowrap; padding:9px 14px; background:var(--verdict-verified); color:var(--surface-raised); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; } .fig-name{ display:flex; align-items:center; white-space:nowrap; padding:8px 22px 8px 12px; background:var(--surface-raised); color:var(--heading); font-size:13px; font-weight:600; clip-path:polygon(0 0, calc(100% - 13.2px) 0, 100% 100%, 0 100%); } /* ================= 6 CLOSE: one primary action on the Route C light plate ================= DOSE 0.55 on the OPTION 2 values, RE-MEASURED ON THIS PAGE with the text hidden, under every text box, at 1440 and 390: see h2/shots/contrast-close.json (written by the verification script). --muted never sits on the plate; the telephone and the estimate route sit on a paper note, so nothing under 16px is read off the plate. ---------- */ .decision{ --amb-dose:.55; padding:84px 0 92px; background:var(--surface); border-top:1px solid var(--border-hairline); } .decision-grid{ display:grid; gap:28px; } @media (min-width:1000px){ .decision-grid{ grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:64px; align-items:end; } } .decision .kicker{ color:var(--body); } .decision .kicker b{ color:var(--heading); } .decision h2{ margin-top:14px; font-size:clamp(36px,4.8vw,58px); line-height:1.02; letter-spacing:-1.4px; font-weight:600; color:var(--heading); } /* the grading the Founder liked: the plate INSIDE the letterforms at full dose, hard-edged, from the signature's own facet values */ .decision h2 em{ font-style:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 420 84%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gink-v40%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-640.95%22 y1=%22-1158.03%22 x2=%2280.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23402B5A%22/%3E%3Cstop offset=%221%22 stop-color=%22%2355406F%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v41%22 gradientUnits=%22userSpaceOnUse%22 x1=%22190.31%22 y1=%22-24.22%22 x2=%22230.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23623A8A%22/%3E%3Cstop offset=%221%22 stop-color=%22%23764E9E%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v42%22 gradientUnits=%22userSpaceOnUse%22 x1=%22230.10%22 y1=%2242.00%22 x2=%22951.15%22 y2=%221242.03%22%3E%3Cstop offset=%220%22 stop-color=%22%238A69AC%22/%3E%3Cstop offset=%221%22 stop-color=%22%23765598%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 150.000,0.000 10.201,84.000 -6139.799,84.000%22 fill=%22url%28%23gink-v40%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22150.000,0.000 300.000,0.000 160.201,84.000 10.201,84.000%22 fill=%22url%28%23gink-v41%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22300.000,0.000 9000.000,0.000 8860.201,84.000 160.201,84.000%22 fill=%22url%28%23gink-v42%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; } .decision .lede{ color:var(--body); } .decision .actions{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; } .decision .actions .btn{ background:var(--surface-raised); } .decision .quiet{ font-size:14px; color:var(--body); } .dnote{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:20px 22px 22px 26px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .dnote::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .dnote::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); } .dnote .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); } .dnote p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); } .dnote p b{ color:var(--heading); } .dnote .alt{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border-hairline); } .dnote .tlink{ font-size:14.5px; } /* ---------- furniture: HOLVEM Furniture Bottom (site-wide), as home-v1 carries it ---------- */ footer{ padding:48px 0 40px; font-size:13px; color:var(--muted); border-top:1px solid var(--border-hairline); background:var(--surface); } footer .frame{ display:block; } footer a{ color:var(--muted); text-decoration:none; } footer a:hover{ color:var(--heading); text-decoration:underline; } .fgrid{ display:grid; gap:28px 24px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:720px){ .fgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1000px){ .fgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .fgrid > div{ display:grid; gap:6px; align-content:start; } .fgrid a{ font-size:13px; line-height:1.4; } .fgrid .fhub{ font-weight:600; color:var(--heading); font-size:14px; margin-bottom:4px; } .futil{ margin-top:36px; padding-top:18px; border-top:1px solid var(--border-hairline); } footer p{ margin-top:12px; } /* 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; } } /* ================= THE GUIDE TEMPLATE (R1-GUIDES-01): an advertorial, designed for reading and for the next step ================= Engagement furniture, all passive: the reading-progress run under the masthead (the four mineral bodies, revealed as the reader goes, cut at 31 deg, ending in violet); the "min left" reading in a sticky side rail with the contents (the section in view takes phosphor); a compact pill on narrow screens. Scroll-driven, rAF-throttled, IntersectionObserver for the contents; nothing animates by itself, so reduced motion has nothing to stop. The reading rhythm: the short answer first, key figures, pull-quotes, tables, data graphics, HOLVEM's own project record as the proof, an interactive lead form where the reader is ready for it, then one next step. ---------- */ body{ --pill-space:0px; } /* R3: the bar is 10px, on a sunken track with an ink hairline beneath it so the fill reads at a glance. Three states, set by the script from the reading position: reading, near (past 80%: the violet finish marker fills and the rail and pill say "Nearly done") and done (the whole run is lit and the rail and pill say "You have read the guide"). Every state change is a class or attribute swap; the only transition is the 240ms marker fill, which reduced motion sets to zero. */ .progress{ position:sticky; top:0; z-index:39; height:10px; background:var(--surface-sunken); border-bottom:1px solid var(--border-strong); box-shadow:inset 0 1px 0 var(--border); } .progress .run{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); } .progress .run b{ position:absolute; top:0; bottom:0; } /* four bodies; each later body overlaps the last by 16.65px (10px / tan 31deg) and its left edge is cut at 31 deg: a hard seam, no wash */ .progress .b1{ left:0; width:34%; background:var(--amb-sea-glass); } .progress .b2{ left:calc(34% - 16.65px); width:calc(24% + 16.65px); background:var(--amb-aqua); clip-path:polygon(16.65px 0,100% 0,100% 100%,0 100%); } .progress .b3{ left:calc(58% - 16.65px); width:calc(22% + 16.65px); background:var(--amb-periwinkle); clip-path:polygon(16.65px 0,100% 0,100% 100%,0 100%); } .progress .b4{ left:calc(80% - 16.65px); width:calc(20% + 16.65px); background:var(--amb-violet-anchor); clip-path:polygon(16.65px 0,100% 0,100% 100%,0 100%); } /* the 80% mark: a hairline tick on the track; the finish marker: a violet block cut at 31 deg at the right end, hollow until the reader is nearly done, then filled */ .progress .mark80{ position:absolute; top:0; bottom:0; left:80%; width:1px; background:var(--border-strong); opacity:.7; } .progress .fin{ position:absolute; top:0; bottom:0; right:0; width:44px; clip-path:polygon(16.65px 0,100% 0,100% 100%,0 100%); background:transparent; box-shadow:inset 0 0 0 1.5px var(--amb-violet-anchor); transition:background-color .24s var(--ease); } .progress[data-state="near"] .fin, .progress[data-state="done"] .fin{ background:var(--amb-violet-anchor); box-shadow:none; } .progress[data-state="done"]{ border-bottom-color:var(--amb-violet-anchor); } /* the state line in the rail and in the pill */ .rail-state{ display:none; margin-top:12px; padding:10px 12px; border-radius:var(--r-field); font-size:13.5px; line-height:1.4; color:var(--heading); background:var(--surface); border-left:4px solid var(--amb-violet-anchor); } .rail-state b{ display:block; font-weight:600; } .rail-state .tlink{ font-size:13.5px; margin-top:4px; display:inline-block; } .rail-state[data-for="near"]{ background:var(--accent-soft); } body[data-state="near"] .rail-state[data-for="near"], body[data-state="done"] .rail-state[data-for="done"]{ display:block; } body[data-state="done"] .rail-left .v{ color:var(--amb-violet-anchor); } /* ---------- hero (R3-S6): .hero-holvem from the furniture, guide variant .gh. The photograph sits under the pale field and the 31 deg planes; the copy (breadcrumb, kicker, H1, lede, byline) is sized so the whole H1 and lede sit above the fold at 1440x800, 1280x720 and 390x844, measured. Below 900px the image is a 2:1 strip and the copy sits on paper beneath it. ---------- */ .hero-holvem.gh .hh-media{ aspect-ratio:2/1; } @media (min-width:640px){ .hero-holvem.gh .hh-media{ aspect-ratio:21/9; } } .hero-holvem.gh .hh-copy{ padding-top:22px; padding-bottom:30px; } .hero-holvem.gh .hh-inner{ gap:12px; } .hero-holvem.gh h1{ font-size:clamp(31px,4.1vw,50px); line-height:1.06; letter-spacing:-1px; max-width:20ch; } .hero-holvem.gh .hh-lede{ font-size:17px; line-height:1.5; max-width:54ch; } @media (min-width:900px){ .hero-holvem.gh{ min-height:clamp(440px, 58vh, 620px); } .hero-holvem.gh .hh-copy{ padding-top:44px; padding-bottom:52px; } .hero-holvem.gh .hh-inner{ max-width:min(600px, 46%); gap:14px; } .hero-holvem.gh .hh-lede{ font-size:17.5px; } } .crumbs{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; } .crumbs a{ color:var(--muted); text-decoration:none; } .crumbs a:hover{ color:var(--heading); text-decoration:underline; } .crumbs [aria-current]{ color:var(--body); } .gh .kicker{ color:var(--body); } .gh .kicker .topic{ color:var(--accent-text); } .gh .kicker .rt{ font-family:var(--mono); letter-spacing:.06em; color:var(--heading); } .byline{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13.5px; color:var(--body); align-items:center; } .byline b{ color:var(--heading); font-weight:600; } .byline span::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--accent); clip-path:polygon(0 0, 100% 60%, 40% 100%); vertical-align:1px; } /* the 31 deg mineral mark: a small plate, cut at the fold angle, in the run's colour for that section (the run advances sea-glass, aqua, periwinkle, violet through the guide and repeats). Set by the section's --mk. */ .mk{ display:inline-block; width:38px; height:12px; margin-bottom:12px; background:var(--mk, var(--amb-sea-glass)); clip-path:polygon(0 0, 100% 0, calc(100% - 7.2px) 100%, 0 100%); } .prose > section:nth-of-type(4n+1){ --mk:var(--amb-sea-glass); } .prose > section:nth-of-type(4n+2){ --mk:var(--amb-aqua); } .prose > section:nth-of-type(4n+3){ --mk:var(--amb-periwinkle); } .prose > section:nth-of-type(4n+4){ --mk:var(--amb-violet-anchor); } /* the one-shot reveal: the section's opener (mark, kicker, heading) and its instruments rise 10px into place, once, 320ms, when they enter the viewport. Without the script, and under reduced motion, everything is in place from the start. */ .js .rv{ opacity:0; transform:translateY(10px); transition:opacity .32s var(--ease), transform .32s var(--ease); } .js .rv.is-in{ opacity:1; transform:none; } /* ---------- the reading grid: the article and the sticky rail ---------- */ .guide{ padding:44px 0 72px; } @media (min-width:720px){ .guide{ padding:56px 0 84px; } } .guide-grid{ display:grid; gap:36px; } @media (min-width:1000px){ .guide-grid{ grid-template-columns:minmax(0,1fr) 272px; gap:56px; align-items:start; } } @media (min-width:1200px){ .guide-grid{ gap:88px; } } .article{ min-width:0; max-width:760px; } .rail{ display:none; } @media (min-width:1000px){ .rail{ display:block; position:sticky; top:22px; } } .rail-left{ padding:18px 20px 20px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); } .rail-left .rk{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); } .rail-left .v{ margin-top:6px; font-family:var(--mono); font-size:30px; line-height:1; font-weight:600; color:var(--heading); letter-spacing:-.6px; font-variant-numeric:tabular-nums; } .rail-left .v small{ font-family:var(--font); font-size:14px; font-weight:500; letter-spacing:0; color:var(--body); margin-left:6px; } .rail-left .sub{ margin-top:8px; font-size:13px; color:var(--body); } .toc{ margin-top:16px; padding:6px 0 0; } .toc .rk{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); padding:0 0 8px 12px; } .toc ol{ list-style:none; padding:0; margin:0; display:grid; gap:2px; } .toc a{ display:grid; grid-template-columns:26px 1fr; gap:8px; align-items:baseline; padding:8px 12px; border-radius:var(--r-field); color:var(--body); text-decoration:none; font-size:14px; line-height:1.3; border-left:2px solid transparent; } .toc a .n{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums; } .toc a:hover{ color:var(--heading); background:var(--surface-raised); } .toc a[aria-current="true"]{ color:var(--heading); font-weight:600; border-left-color:var(--phosphor); background:var(--surface-raised); } .toc a[aria-current="true"] .n{ color:var(--phosphor); } .rail-skip{ margin-top:16px; padding:14px 16px; border-top:1px solid var(--border-hairline); font-size:13.5px; color:var(--body); } .rail-skip .tlink{ font-size:14px; margin-top:4px; } /* the pill: narrow screens only; a fixed reading with the contents behind it */ .pill{ display:none; } @media (max-width:999px){ body{ --pill-space:76px; } main{ padding-bottom:var(--pill-space); } .pill{ all:unset; cursor:pointer; position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:38; display:inline-flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:10px 14px 10px 14px; background:var(--heading); color:var(--on-panel-heading); border-radius:999px; font-size:13px; line-height:1.2; box-shadow:0 10px 24px -12px rgba(20,24,27,.6); white-space:nowrap; } .pill b{ font-family:var(--mono); font-weight:600; color:var(--phosphor-on-dark); font-variant-numeric:tabular-nums; } .pill .sec{ overflow:hidden; text-overflow:ellipsis; max-width:46vw; color:var(--on-panel-body); } .pill i{ width:7px; height:7px; border-right:1.5px solid var(--on-panel-body); border-top:1.5px solid var(--on-panel-body); transform:rotate(-45deg) translate(1px,1px); } .pill[aria-expanded="true"] i{ transform:rotate(135deg) translate(-1px,-1px); } .pill:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } .toc-sheet{ position:fixed; left:16px; right:16px; bottom:64px; z-index:37; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--r); padding:14px 8px 10px; box-shadow:0 18px 36px -18px rgba(20,24,27,.5); } .toc-sheet .toc{ margin:0; } } /* ---------- the prose ---------- */ .prose > section{ padding-top:8px; } .prose > section + section{ margin-top:44px; padding-top:36px; border-top:1px solid var(--border-hairline); } section[id]{ scroll-margin-top:24px; } .prose .kicker{ margin-bottom:12px; align-items:flex-start; } .prose .kicker b{ white-space:nowrap; } .prose h2{ font-size:clamp(26px,3vw,36px); line-height:1.14; letter-spacing:-.7px; font-weight:600; color:var(--heading); text-wrap:balance; max-width:24ch; } .prose h3{ margin-top:28px; font-size:20px; line-height:1.3; letter-spacing:-.3px; font-weight:600; color:var(--heading); max-width:44ch; } .prose p{ margin-top:16px; font-size:17px; line-height:1.62; color:var(--body); max-width:66ch; } .prose h2 + p{ margin-top:18px; } .prose p b{ color:var(--heading); } .prose ul, .prose ol{ margin-top:14px; padding-left:0; list-style:none; display:grid; gap:10px; max-width:66ch; } .prose li{ position:relative; padding-left:22px; font-size:16.5px; line-height:1.55; color:var(--body); } .prose ul li::before{ content:""; position:absolute; left:0; top:11px; width:10px; height:8px; background:var(--accent); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .prose ol{ counter-reset:g; } .prose ol[start="5"]{ counter-reset:g 4; } .prose ol li{ counter-increment:g; padding-left:30px; } .prose ol li::before{ content:counter(g,decimal-leading-zero); position:absolute; left:0; top:3px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--phosphor); } .prose li b{ color:var(--heading); } .prose a:not(.tlink){ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .prose a:not(.tlink):hover{ color:var(--heading); } .prose .tlink{ margin-top:16px; } /* the short answer: sea-glass edge, the figures in mono */ .short{ position:relative; margin-top:6px; padding:22px 24px 24px 28px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .short::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-sea-glass); } .short .rk{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--verdict-verified); } .short p{ margin-top:10px; font-size:17px; line-height:1.55; color:var(--body); max-width:62ch; } .short p b{ color:var(--heading); } .short .figs{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border-hairline); display:flex; flex-wrap:wrap; gap:12px 28px; } .short .figs div{ display:grid; gap:2px; } .short .figs .v{ font-family:var(--mono); font-size:22px; line-height:1.1; font-weight:600; color:var(--heading); letter-spacing:-.4px; font-variant-numeric:tabular-nums; } .short .figs .v small{ font-family:var(--font); font-size:12px; font-weight:500; color:var(--body); letter-spacing:.06em; text-transform:uppercase; margin-right:6px; } .short .figs .k{ font-size:13px; color:var(--body); } /* key figure callout */ .kf{ margin-top:26px; display:grid; gap:6px 24px; padding:20px 22px 22px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); max-width:66ch; } @media (min-width:600px){ .kf{ grid-template-columns:auto minmax(0,1fr); align-items:center; } } .kf .v{ font-family:var(--mono); font-size:clamp(30px,4vw,40px); line-height:1; font-weight:600; color:var(--heading); letter-spacing:-.8px; font-variant-numeric:tabular-nums; white-space:nowrap; } .kf .v small{ font-family:var(--font); font-size:12px; font-weight:600; color:var(--phosphor); letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:6px; } .kf .k{ font-size:15px; line-height:1.5; color:var(--body); } .kf .k b{ color:var(--heading); } .kf .k a{ color:var(--accent-text); } /* pull-quote (R3: richer). A paper plate with the corner cut at 31 deg; the left rule is the mineral run stacked as four hard bodies (sea-glass to violet), and the opening mark is set large in the section's mineral colour. */ .pull{ position:relative; margin:34px 0 10px; padding:22px 26px 22px 30px; max-width:34ch; background:var(--surface-raised); border:1px solid var(--border-hairline); 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%); } .pull::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg, var(--amb-sea-glass) 0 34%, var(--amb-aqua) 34% 58%, var(--amb-periwinkle) 58% 80%, var(--amb-violet-anchor) 80% 100%); } .pull::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--mk, var(--amb-sea-glass)); clip-path:polygon(0 0, 100% 100%, 0 100%); } .pull p{ margin:0; font-size:clamp(21px,2.3vw,27px); line-height:1.3; letter-spacing:-.4px; font-weight:500; color:var(--heading); text-wrap:balance; } .pull p::before{ content:"\201C" / ""; display:block; font-size:54px; line-height:.6; height:26px; font-weight:600; color:var(--mk, var(--amb-sea-glass)); letter-spacing:0; } .pull cite{ display:block; margin-top:12px; font-style:normal; font-size:13px; color:var(--muted); } .pull cite::before{ content:""; display:inline-block; width:14px; height:1px; background:var(--border-strong); margin-right:8px; vertical-align:middle; } /* tables */ .tbl-wrap{ margin-top:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-hairline); border-radius:var(--r); background:var(--surface-raised); } .tbl{ width:100%; min-width:520px; border-collapse:collapse; font-size:15px; } .tbl th, .tbl td{ padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border-hairline); } .tbl thead th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); background:var(--surface); } .tbl tbody th{ font-weight:600; color:var(--heading); } .tbl td{ color:var(--body); font-variant-numeric:tabular-nums; } .tbl td b{ color:var(--heading); } .tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom:0; } .tbl .num{ font-family:var(--mono); white-space:nowrap; } @media (max-width:519px){ .tbl{ min-width:440px; font-size:14px; } .tbl th, .tbl td{ padding:10px 10px; } } .tbl-note{ margin-top:10px; font-size:13.5px; color:var(--body); max-width:66ch; } /* the rank grid: a data graphic in a table, 1st to 5th on a five-step scale of the sunken paper to the phosphor */ .rank td{ text-align:center; } .rank td span{ display:inline-grid; place-items:center; min-width:44px; height:30px; padding:0 8px; border-radius:var(--r-field); font-family:var(--mono); font-size:13px; font-weight:600; color:var(--heading); background:var(--surface-sunken); } .rank td .r1{ background:var(--phosphor); color:#fff; } .rank td .r2{ background:#B8D77A; } .rank td .r3{ background:#DCE8C2; } .rank td .r4{ background:var(--surface-sunken); } .rank td .r5{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); color:var(--muted); } /* data graphics: on raised paper, the values in mono, phosphor for the figure that matters */ .chart{ margin-top:24px; padding:20px 20px 16px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); } .chart .ct{ font-size:15px; font-weight:600; color:var(--heading); letter-spacing:-.2px; } .chart .cs{ margin-top:2px; font-size:13.5px; color:var(--body); } .chart svg{ display:block; width:100%; height:auto; margin-top:14px; font-family:var(--font); } .chart .cn{ margin-top:10px; font-size:13px; color:var(--body); } .chart .lab{ font-size:13px; fill:var(--body); } .chart .labh{ font-size:13px; fill:var(--heading); font-weight:600; } .chart .mono{ font-family:var(--mono); font-size:12.5px; fill:var(--heading); font-weight:600; } .chart .monop{ font-family:var(--mono); font-size:12.5px; fill:var(--phosphor); font-weight:600; } .chart .ax{ stroke:var(--border); stroke-width:1; } .chart .tick{ font-family:var(--mono); font-size:11px; fill:var(--muted); } .chart .bar{ fill:var(--surface-sunken); stroke:var(--border); stroke-width:1; } .chart .bar25{ fill:var(--amb-aqua); } .chart .bar50{ fill:var(--amb-periwinkle); } .chart .from{ fill:var(--phosphor); } .chart .grid{ stroke:var(--border-hairline); stroke-width:1; } /* the drawn section: ink hairlines, one accent, the foam in paper tone; rationed to one per guide */ .draw{ margin-top:24px; padding:20px 20px 16px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); } .draw .ct{ font-size:15px; font-weight:600; color:var(--heading); letter-spacing:-.2px; } .draw .cs{ margin-top:2px; font-size:13.5px; color:var(--body); } .draw .scroll{ margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .draw svg{ display:block; width:100%; min-width:600px; height:auto; font-family:var(--font); } .draw .ink{ fill:none; stroke:var(--heading); stroke-width:1.2; vector-effect:non-scaling-stroke; } .draw .hair{ fill:none; stroke:var(--border-strong); stroke-width:1; vector-effect:non-scaling-stroke; } .draw .steel{ fill:#C9C6BE; stroke:var(--heading); stroke-width:1; } .draw .foam{ fill:#F7F3E8; stroke:var(--heading); stroke-width:1; } .draw .old{ fill:#D7D4CC; stroke:var(--heading); stroke-width:1; } .draw .new{ fill:#4B5057; stroke:var(--heading); stroke-width:1; } .draw .ins{ fill:#E9E7E0; stroke:var(--heading); stroke-width:1; } .draw .air{ fill:var(--surface); } .draw .lab{ font-size:12.5px; fill:var(--body); } .draw .labh{ font-size:13px; fill:var(--heading); font-weight:600; } .draw .acc{ fill:var(--accent); } .draw .accl{ stroke:var(--accent); stroke-width:1.5; fill:none; } .draw .ph{ fill:var(--phosphor); } .draw .pht{ font-family:var(--mono); font-size:11px; fill:#fff; font-weight:600; } .draw .cn{ margin-top:10px; font-size:13px; color:var(--body); } /* proof: HOLVEM's own record, labelled the positive way round */ .proofs{ margin-top:24px; display:grid; gap:14px; } @media (min-width:640px){ .proofs{ grid-template-columns:1fr 1fr; gap:16px; } } .proof{ background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .proof-media{ position:relative; aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden; } .proof-media img, .proof-media video{ width:100%; height:100%; object-fit:cover; display:block; } .proof-media .fig-tag{ padding:8px 12px; font-size:11px; letter-spacing:.08em; } .proof-cap{ padding:12px 14px 14px; font-size:13.5px; line-height:1.45; color:var(--body); } .proof-cap b{ display:block; color:var(--heading); margin-bottom:2px; } .rec-play{ all:unset; cursor:pointer; position:absolute; right:10px; top:10px; z-index:2; width:40px; height:40px; display:grid; place-items:center; background:var(--surface-raised); border:1.5px solid var(--heading); border-radius:var(--r); color:var(--heading); } .rec-play:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } .rec-play svg{ width:14px; height:14px; } .rec-play .pause{ display:none; } .is-playing .rec-play .play{ display:none; } .is-playing .rec-play .pause{ display:block; } /* the labelled comparison pair */ .pair{ margin-top:24px; display:grid; gap:14px; } @media (min-width:720px){ .pair{ grid-template-columns:1fr 1fr; gap:16px; } } .pair .proof-media{ aspect-ratio:4/3; } .pair .unl .fig-tag{ background:var(--amb-periwinkle); color:var(--heading); } .pair ul{ margin:0; padding:14px 14px 4px; display:grid; gap:8px; } .pair li{ font-size:14px; line-height:1.45; padding-left:18px; } .pair li::before{ top:8px; width:9px; height:7px; } .pair .proof-cap{ padding-top:8px; } /* the paper refusal note, designed as reassurance */ .note{ position:relative; margin-top:26px; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px 28px; overflow:hidden; max-width:66ch; 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 .rk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); } .note h3{ margin-top:8px; font-size:19px; } .note p{ margin-top:8px; font-size:15px; line-height:1.5; } /* ---------- the inline lead form: a paper instrument with the turned corner; neutral until it is ready, then orange ---------- */ .lead{ position:relative; margin-top:28px; background:var(--surface-raised); border-radius:var(--r); padding:22px 22px 24px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); border:1px solid var(--border-hairline); } @media (min-width:720px){ .lead{ padding:28px 30px 30px; } } .lead::after{ content:""; position:absolute; top:-1px; right:-1px; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .lead .rk{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--phosphor); display:flex; align-items:center; gap:10px; } .lead .rk::before{ content:""; width:10px; height:10px; background:var(--phosphor); clip-path:polygon(0 0, 100% 0, 100% 100%); } .lead h3{ margin-top:8px; font-size:clamp(21px,2.4vw,26px); line-height:1.2; letter-spacing:-.4px; max-width:26ch; } .lead .lp{ margin-top:8px; font-size:15px; line-height:1.5; color:var(--body); max-width:60ch; } .lead fieldset{ margin:0; padding:0; border:0; min-width:0; } .lead legend{ padding:0; font-size:14px; font-weight:600; color:var(--heading); margin-bottom:10px; } .lead label.lb{ display:block; font-size:13.5px; font-weight:600; color:var(--heading); margin-bottom:6px; } .lead .hint{ font-weight:400; color:var(--muted); } .lead input[type="text"], .lead input[type="email"], .lead input[type="tel"], .lead input[type="number"]{ width:100%; padding:11px 12px; font:inherit; font-size:16px; color:var(--heading); background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-field); } .lead input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-color:var(--heading); } .lead input[aria-invalid="true"]{ border-color:var(--action); } .lead .err{ display:none; margin-top:6px; font-size:13px; color:var(--action); font-weight:600; } .lead .err.is-on{ display:block; } .fields{ margin-top:18px; display:grid; gap:14px; } @media (min-width:640px){ .fields{ grid-template-columns:1fr 1fr; } .fields .span{ grid-column:1 / -1; } } .lead .foot{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; } .submit{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:var(--r); font:inherit; font-size:15px; font-weight:600; color:var(--heading); background:var(--surface-raised); border:2px solid var(--border-strong); box-shadow:inset 0 0 0 3px var(--surface-raised); cursor:pointer; transition:border-color var(--dur), transform var(--dur) var(--ease); } .submit svg{ width:16px; height:16px; } .submit:hover{ transform:translateY(-2px); border-color:var(--heading); } .lead.is-armed .submit{ border-color:var(--action); } .submit:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; } .lead .quiet{ font-size:13px; color:var(--body); } .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; } .done{ margin-top:18px; padding:18px 20px; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); } .done b{ display:block; font-size:17px; color:var(--heading); } .done p{ margin-top:6px; font-size:14.5px; color:var(--body); } .done .tlink{ margin-top:10px; font-size:14px; } /* choice tiles */ .tiles-q{ display:grid; gap:8px; } @media (min-width:600px){ .tiles-q{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } } .tq{ position:relative; display:block; cursor:pointer; } .tq input{ position:absolute; opacity:0; width:1px; height:1px; } .tq span{ position:relative; display:block; min-height:100%; padding:12px 14px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); font-size:14.5px; line-height:1.35; color:var(--heading); overflow:hidden; transition:border-color var(--dur), transform var(--dur) var(--ease); } .tq span::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); } .tq span small{ display:block; margin-top:3px; font-size:12.5px; color:var(--body); } .tq:hover span{ border-color:var(--border-strong); } .tq input:checked + span{ border-color:var(--accent); background:var(--surface-raised); } .tq input:checked + span::after{ transform:scale(1); } .tq input:focus-visible + span{ outline:2px solid var(--focus-ring); outline-offset:2px; } .qs{ margin-top:18px; display:grid; gap:20px; } .qs .q{ display:grid; gap:10px; } .qs .q .qn{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--heading); } .qs .q .qn i{ font-style:normal; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--phosphor); width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--border-hairline); border-radius:var(--r-field); background:var(--surface); } /* the estimator */ .est{ margin-top:18px; display:grid; gap:18px; } @media (min-width:760px){ .est{ grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); gap:28px; align-items:start; } } .est .row{ display:grid; gap:8px; } .est .row .lbrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .est input[type="range"]{ width:100%; accent-color:var(--accent); height:28px; margin:0; } .est input[type="range"]:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px; } .est .num{ display:flex; align-items:center; gap:8px; } .est .num input{ width:120px; font-family:var(--mono); font-variant-numeric:tabular-nums; } .est .num span{ font-size:14px; color:var(--body); } .readout{ position:relative; padding:18px 20px 18px; background:var(--panel); color:var(--on-panel-heading); border-radius:var(--r); overflow:hidden; } .readout::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--phosphor-on-dark); } .readout .rk{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--on-panel-muted); } .readout .rk::before{ display:none; } .readout .v{ margin-top:8px; font-family:var(--mono); font-size:clamp(28px,3.6vw,36px); line-height:1; font-weight:600; color:var(--phosphor-on-dark); letter-spacing:-.6px; font-variant-numeric:tabular-nums; } .readout .v small{ font-family:var(--font); font-size:13px; font-weight:500; color:var(--on-panel-body); letter-spacing:0; margin-left:6px; } .readout .sub{ margin-top:8px; font-size:13px; line-height:1.45; color:var(--on-panel-body); } .readout .sub b{ color:var(--on-panel-heading); } .est-note{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--body); } .est-note b{ color:var(--heading); } .lead .divide{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border-hairline); } /* the reading-path CTA at the end of the article: a text link only; the one button is in the close */ .next-step{ margin-top:34px; padding:22px 24px 24px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); max-width:66ch; } .next-step .rk{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--verdict-verified); } .next-step h3{ margin-top:8px; font-size:21px; } .next-step p{ margin-top:8px; font-size:15px; } .summary{ margin-top:0; } .summary ol{ margin-top:14px; } .summary li{ font-size:16px; } /* ---------- keep reading ---------- */ .keep{ padding:56px 0 64px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .keep-grid{ margin-top:28px; display:grid; gap:16px; } @media (min-width:720px){ .keep-grid{ grid-template-columns:1fr 1fr; gap:22px; } } .gcard{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--heading); transition:transform var(--dur) var(--ease), border-color var(--dur); } .gcard::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); } .gcard:hover, .gcard:focus-visible{ transform:translateY(-4px); border-color:var(--accent); } .gcard:hover::after, .gcard:focus-visible::after{ transform:scale(1); } .gmedia{ position:relative; aspect-ratio:16/9; background:var(--surface-sunken); overflow:hidden; flex:none; } .gmedia img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .gcard:hover .gmedia img, .gcard:focus-visible .gmedia img{ transform:scale(1.035); } .gbody{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; } .gk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); } .gt{ font-size:20px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; } .gp{ font-size:14.5px; line-height:1.5; color:var(--body); } .gcue{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); } .gcue svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); } .gcard:hover .gcue svg, .gcard:focus-visible .gcue svg{ transform:translateX(4px); } .keep-foot{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); } /* ---------- reduced motion: the instruments are scroll-driven and never animate on their own; transitions off ---------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration:0s !important; animation:none !important; } html{ scroll-behavior:auto; } .gmedia img{ transition:none; } } /* the range chart: rows of label + track; the bar is the band, the phosphor tick its published from rate */ .rchart{ margin-top:16px; } .rrows{ display:grid; gap:10px; } .rrow{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:12px; align-items:center; } @media (max-width:519px){ .rrow{ grid-template-columns:1fr; gap:4px; } } .rlab b{ display:block; font-size:14px; color:var(--heading); } .rlab span{ display:block; font-size:12.5px; color:var(--body); } .rtrack{ position:relative; height:54px; } .rtrack s{ position:absolute; top:0; bottom:0; width:1px; background:var(--border-hairline); } .rbar{ position:absolute; top:17px; height:22px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:2px; } .rbar.bar25{ background:var(--amb-aqua); } .rbar.bar50{ background:var(--amb-periwinkle); } .rbar::before{ content:""; position:absolute; left:-3px; top:-5px; width:4px; height:30px; background:var(--phosphor); } .rbar em{ position:absolute; font-style:normal; font-family:var(--mono); font-size:12px; font-weight:600; white-space:nowrap; } .rbar .rfrom{ top:-19px; left:4px; color:var(--phosphor); } .rbar .rto{ left:calc(100% + 8px); top:2px; color:var(--heading); } .raxis{ position:relative; height:22px; margin-top:4px; } @media (min-width:520px){ .raxis{ margin-left:130px; } } .raxis i{ position:absolute; top:0; width:1px; height:6px; background:var(--border); } .raxis i b{ position:absolute; top:8px; left:0; transform:translateX(-50%); font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted); } /* R3: the pill's states. Near: the label turns violet and reads "Nearly done"; done: "You have read the guide". */ @media (max-width:999px){ body[data-state="near"] .pill b, body[data-state="done"] .pill b{ color:var(--accent-on-panel); } body[data-state="done"] .pill{ background:var(--amb-violet-anchor); } body[data-state="done"] .pill .sec, body[data-state="done"] .pill b{ color:#fff; } body[data-state="done"] .pill i{ border-color:#fff; } .toc-sheet .rail-state{ margin:0 8px 10px; } } /* R3 cost guide: the three price tiers as three rows; each row is one idea (objective, depth, rate) */ .tiers{ margin-top:22px; display:grid; gap:10px; } .tier{ display:grid; gap:6px 18px; padding:16px 18px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); border-left:6px solid var(--tc, var(--amb-sea-glass)); } @media (min-width:640px){ .tier{ grid-template-columns:minmax(150px,.9fr) minmax(0,1.6fr) auto; align-items:center; } } .tier .to{ font-size:16px; font-weight:600; color:var(--heading); line-height:1.3; } .tier .to small{ display:block; font-size:12.5px; font-weight:500; color:var(--body); letter-spacing:.04em; text-transform:uppercase; margin-top:2px; } .tier .tp{ font-size:14.5px; line-height:1.5; color:var(--body); } .tier .tv{ font-family:var(--mono); font-size:17px; font-weight:600; color:var(--heading); white-space:nowrap; font-variant-numeric:tabular-nums; } .tier .tv small{ display:block; font-family:var(--font); font-size:12px; font-weight:500; color:var(--body); letter-spacing:0; } .tier.t25{ --tc:var(--amb-aqua); } .tier.t50{ --tc:var(--amb-periwinkle); } .tier.tsp{ --tc:var(--amb-violet-anchor); } .tier.tfire{ --tc:var(--heading); } .tier.tfire .tv{ color:var(--accent-text); } /* R3 cost guide: the three project scenarios, one card each (three across, stacked at 390) */ .scen{ margin-top:24px; display:grid; gap:14px; } @media (min-width:860px){ .scen{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } .sc{ display:flex; flex-direction:column; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .sc .sc-media{ position:relative; aspect-ratio:16/10; background:var(--surface-sunken); } .sc .sc-media img{ width:100%; height:100%; object-fit:cover; } .sc .sc-tag{ position:absolute; left:10px; top:10px; padding:5px 9px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--heading); background:var(--surface-raised); border-radius:var(--r-field); } .sc .sc-tag.real{ background:var(--phosphor); color:#fff; } .sc .sc-body{ padding:16px 18px 18px; display:grid; gap:8px; } .sc h3{ margin:0; font-size:19px; line-height:1.25; letter-spacing:-.3px; } .sc .sc-spec{ font-size:13.5px; line-height:1.45; color:var(--body); } .sc .sc-figs{ display:grid; gap:8px; padding-top:10px; border-top:1px solid var(--border-hairline); } .sc .sc-figs div{ display:grid; gap:2px; font-size:12.5px; color:var(--body); } .sc .sc-figs b{ font-family:var(--mono); font-size:15px; color:var(--heading); font-variant-numeric:tabular-nums; white-space:nowrap; } .sc .sc-note{ font-size:13.5px; line-height:1.45; color:var(--body); } /* R3 cost guide: the comparison, one row per option; the HOLVEM row carries the phosphor */ .tbl.cmp th, .tbl.cmp td{ font-size:14.5px; } .tbl.cmp tbody tr.us th{ border-left:4px solid var(--phosphor); } .tbl.cmp tbody tr.us td, .tbl.cmp tbody tr.us th{ background:var(--surface); } /* R3 cost guide: the evidence cards, three project records with their figures */ .evid{ margin-top:24px; display:grid; gap:14px; } @media (min-width:860px){ .evid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } .evid .proof-media{ aspect-ratio:4/3; } .evid dl{ margin:0; padding:12px 14px 14px; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:13.5px; line-height:1.4; } .evid dt{ color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding-top:2px; } .evid dt.ev-name{ grid-column:1 / -1; font-family:var(--font); font-size:16px; letter-spacing:-.2px; text-transform:none; color:var(--heading); padding:0 0 4px; } .evid dd.sr-only{ position:absolute; } .evid dd{ margin:0; color:var(--body); } .evid dd b{ color:var(--heading); } .evid .res{ grid-column:1 / -1; margin-top:4px; padding-top:10px; border-top:1px solid var(--border-hairline); font-size:14px; color:var(--heading); font-weight:600; } /* R3 cost guide: the four-step route from estimate to quotation, on one paper strip */ .route{ margin-top:22px; display:grid; gap:0; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } @media (min-width:760px){ .route{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .route div{ padding:16px 18px 18px; border-top:1px solid var(--border-hairline); } .route div:first-child{ border-top:0; } @media (min-width:760px){ .route div{ border-top:0; border-left:1px solid var(--border-hairline); } .route div:first-child{ border-left:0; } } .route .n{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--phosphor); } .route b{ display:block; margin-top:6px; font-size:15.5px; color:var(--heading); letter-spacing:-.2px; } .route p{ margin-top:6px; font-size:14px; line-height:1.45; color:var(--body); } /* R3 cost guide: the FAQ as disclosure rows; open by default is not needed, the summary carries the question */ .faq{ margin-top:22px; border-top:1px solid var(--border-hairline); } .faq details{ border-bottom:1px solid var(--border-hairline); } .faq details:last-child{ border-bottom:0; } .faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 28px; gap:14px; align-items:center; padding:16px 0; font-size:17px; font-weight:600; color:var(--heading); line-height:1.35; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; width:12px; height:12px; justify-self:center; border-right:1.5px solid var(--heading); border-bottom:1.5px solid var(--heading); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--dur) var(--ease); } .faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); } .faq summary:hover{ color:var(--accent-text); } .faq summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:var(--r-field); } .faq details p{ margin:0 0 18px; font-size:16.5px; } .faq details p + p{ margin-top:-8px; } /* the settle matrix: a mark per row, three states, the phosphor for what photographs carry */ .settle .m{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--heading); } .settle .m::before{ content:""; width:12px; height:12px; border-radius:2px; background:var(--surface-sunken); box-shadow:inset 0 0 0 1px var(--border); } .settle .m-yes::before{ background:var(--phosphor); box-shadow:none; } .settle .m-part::before{ background:linear-gradient(90deg, var(--phosphor) 0 50%, var(--surface-sunken) 50% 100%); box-shadow:inset 0 0 0 1px var(--border); } .settle .m-no::before{ background:var(--amb-periwinkle); box-shadow:none; } /* ===================================================================================================== 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