: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; --plate-c-light: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"); /* 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:var(--plate-c-light); } .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; } /* ---------- forward ---------- */ .forward{ padding:64px 0 72px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .forward-grid{ display:grid; gap:36px; } @media (min-width:1000px){ .forward-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:64px; } } .fwd h3, .stub h3{ margin-top:12px; font-size:24px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); } .fwd ol{ margin-top:18px; padding:0; list-style:none; counter-reset:f; display:grid; gap:10px; } .fwd li{ counter-increment:f; display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; line-height:1.5; color:var(--body); } .fwd li::before{ content:counter(f); font-size:12px; font-weight:600; color:var(--phosphor); font-variant-numeric:tabular-nums; padding-top:4px; } .fwd-foot{ margin-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; font-size:14px; color:var(--body); } .stub{ padding:22px 24px; border:1px dashed var(--border); border-radius:var(--r); } .stub p{ margin-top:10px; font-size:14.5px; color:var(--body); } .flag{ display:inline-block; margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--action); border:1px solid var(--action); padding:4px 8px; border-radius:var(--r-field); } /* ---------- decision : Route C light on the OPTION 2 values. DOSE 0.55 : measured on the rendered page under the actual text boxes (content hidden) at 390 / 640 / 768 / 1000 / 1109 / 1199 / 1260 / 1440 and at 1000-1080 in 4-20px steps: worst 16px --body 4.86:1 (the soft-violet plane's shaded ramp edge), worst --heading 9.39:1, worst heading-em facet #805CA5 3.06:1 (large text; 0.60 drops it to 2.92 and fails). The violet anchor is not under any text box at any of those widths; if it ever were, it would bind the dose at 0.40 (4.76:1 at 0.40, 4.33 at 0.45). --muted never sits on the plate (2.09 at this dose). v3 RE-MEASURED on this page (b3/crops/boxes-*.json, content hidden, same instrument): worst 16px --body 4.845:1 (the nocap box at 1440, plate #BAADC6) and 5.359:1 at 390; --heading 10.30:1 both widths; kicker 5.94:1. Dose stays 0.55. ---------- */ .decision{ --amb-dose:.55; padding:84px 0 92px; background:var(--surface); border-top:1px solid var(--border-hairline); } .decision-grid{ display:grid; gap:28px; } @media (min-width:1000px){ .decision-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:start; } } .decision .kicker{ color:var(--body); } .decision .kicker b{ color:var(--heading); } .decision h2{ margin-top:14px; font-size:clamp(36px,4.8vw,58px); line-height:1.02; letter-spacing:-1.4px; font-weight:600; color:var(--heading); } /* the grading he liked: the plate INSIDE the letterforms at full dose, hard-edged. Built from the signature mark's own four facet values (#462F62 #6A3F96 #805CA5 #9678B2) because none of the four light Founder values clears 3:1 for large text on paper (1.78-2.02); the anchor does (6.84). */ .decision h2 em{ font-style:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 420 84%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22gink-v40%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-640.95%22 y1=%22-1158.03%22 x2=%2280.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23402B5A%22/%3E%3Cstop offset=%221%22 stop-color=%22%2355406F%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v41%22 gradientUnits=%22userSpaceOnUse%22 x1=%22190.31%22 y1=%22-24.22%22 x2=%22230.10%22 y2=%2242.00%22%3E%3Cstop offset=%220%22 stop-color=%22%23623A8A%22/%3E%3Cstop offset=%221%22 stop-color=%22%23764E9E%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22gink-v42%22 gradientUnits=%22userSpaceOnUse%22 x1=%22230.10%22 y1=%2242.00%22 x2=%22951.15%22 y2=%221242.03%22%3E%3Cstop offset=%220%22 stop-color=%22%238A69AC%22/%3E%3Cstop offset=%221%22 stop-color=%22%23765598%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points=%22-6000.000,0.000 150.000,0.000 10.201,84.000 -6139.799,84.000%22 fill=%22url%28%23gink-v40%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22150.000,0.000 300.000,0.000 160.201,84.000 10.201,84.000%22 fill=%22url%28%23gink-v41%29%22 shape-rendering=%22crispEdges%22/%3E%3Cpolygon points=%22300.000,0.000 9000.000,0.000 8860.201,84.000 160.201,84.000%22 fill=%22url%28%23gink-v42%29%22 shape-rendering=%22crispEdges%22/%3E%3C/svg%3E"); background-size:cover; background-position:center; -webkit-background-clip:text; background-clip:text; color:transparent; } .decision .lede{ color:var(--body); } .actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; } .commit{ margin-top:22px; font-size:14px; line-height:1.5; color:var(--body); max-width:60ch; } .commit b{ color:var(--heading); } .nocap{ margin-top:18px; display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; padding:16px 18px; background:var(--surface-raised); border-radius:var(--r); font-size:14.5px; color:var(--body); } .nocap svg{ width:20px; height:20px; } .nocap b{ color:var(--heading); } /* ---------- furniture: HOLVEM Furniture Bottom (site-wide), 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; } /* ---------- 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); } /* ================= 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); } /* ================= 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; } .docs{ margin-top:26px; padding-top:22px; border-top:1px solid var(--border); } .docs-grid{ margin-top:12px; display:grid; gap:8px; } .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 ---------- */ .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); } @media (min-width:720px){ .hero-media img{ object-position:70% 45%; } } .hero-meta span::before{ background:var(--phosphor); } /* ---------- 02 the calculation sheet ---------- */ .calc{ padding:72px 0 80px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .calc-grid{ margin-top:34px; display:grid; gap:14px; } @media (min-width:860px){ .calc-grid{ grid-template-columns:5fr 4fr; gap:20px; } } .cs{ position:relative; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); padding:22px 24px 24px; overflow:hidden; } .cs::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); } .cs .rk{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .cs .rk i{ font-style:normal; color:var(--phosphor); } .cs ol{ margin:14px 0 0; padding:0; list-style:none; counter-reset:cs; } .cs li{ counter-increment:cs; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:13px 0; border-top:1px solid var(--border-hairline); font-size:15px; line-height:1.5; color:var(--body); } .cs li::before{ content:"0" counter(cs); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--heading); padding-top:3px; font-variant-numeric:tabular-nums; } .cs li b{ color:var(--heading); } .cs li.br::before{ color:var(--amb-violet-anchor); } .cs.out{ border-top:6px solid var(--phosphor); } .cs .cs-sign{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border-hairline); font-size:13.5px; color:var(--body); display:flex; gap:10px; align-items:center; } .cs .cs-sign::before{ content:""; width:12px; height:9px; flex:none; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } /* ---------- hand-off tiles ---------- */ .next .tiles{ grid-template-columns:1fr; } @media (min-width:600px){ .next .tiles{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .next .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:860px; } } .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:20px; } .tile-plain .tile-s{ font-size:15px; } @media (prefers-reduced-motion: reduce){ .bridge::before, .bd [data-on], .bd .flow.brg, .readout::before, .readout .fig-sub{ transition:none !important; } } /* ================= v2 (M5-R1 light pass, 2026-09-23) ================= */ /* the settled IA: one item, two columns (home-v2, verbatim) */ .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; } } /* 03 the duty card: the page's one mid-page mineral moment. The same plate the close block carries, on the card's low-text ground, positioned so the sea-glass, aqua and periwinkle bodies cross the card and the violet anchor stays out of it. DOSE 0.55, measured on the rendered card under the text boxes at 1440 and 390 (see the return). */ .dcard.is-mineral{ isolation:isolate; } .dcard .dmineral{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:var(--plate-c-light); background-repeat:no-repeat; background-size:cover; background-position:38% 50%; opacity:.55; } .dcard.is-mineral > *:not(.dmineral){ position:relative; z-index:1; } .dcard.is-mineral::before{ z-index:2; background:var(--amb-violet-anchor); } .dcard.is-mineral::after{ z-index:2; } .dcard.is-mineral .who small{ color:var(--heading); opacity:.86; } /* 04 the refusals: one paper note, three statements in heading weight, each with its answer beside it */ .refuse-note{ margin-top:34px; background:var(--surface); padding:26px 30px 8px 34px; } .refuse-note .refusal{ margin-top:0; padding:20px 0 22px; border-top:1px solid var(--border-hairline); display:grid; gap:8px 40px; } .refuse-note .refusal:first-of-type{ margin-top:16px; border-top:0; padding-top:8px; } .refuse-note .refusal h3{ margin-top:0; font-size:22px; line-height:1.25; max-width:22ch; } .refuse-note .refusal p{ margin-top:0; font-size:15px; } .refuse-note .note-sign{ margin-top:10px; } @media (min-width:760px){ .refuse-note .refusal{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; } .refuse-note .refusal h3{ font-size:24px; } } /* the specifier band: the route on a paper note beside the text, the two halves weighted 1.25 : 1 */ .send{ padding:60px 0 64px; } @media (min-width:860px){ .send-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; align-items:center; } } .send-note{ position:relative; background:var(--surface); border-radius:var(--r); padding:22px 24px 24px 30px; box-shadow:0 1px 0 var(--border); align-self:center; } .send-note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-aqua); border-radius:var(--r) 0 0 var(--r); } .send-note .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .send-note .tlink{ margin-top:10px; font-size:17px; } .send-note .send-foot{ margin-top:10px; padding-top:12px; border-top:1px solid var(--border-hairline); } /* the hand-off tiles fill the frame: two tiles, the room they need */ @media (min-width:1000px){ .next .tiles{ max-width:none; gap:20px; } .next .tile{ padding:22px 24px 24px; } .next .tile .tile-t{ font-size:22px; } } /* the close block: one button, the specialist as a text link beside it, the telephone on a note (home-v2 construction) */ .decision .actions{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; } .decision .actions .btn{ background:var(--surface-raised); } .decision .actions .tlink{ font-size:15px; } .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); } @media (min-width:1000px){ .decision-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; } } /* 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; } } /* ================= R2 systems family: shared components ================= */ .sheet-wrap, .sheet{ max-width:760px; } .hero-cta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; } .hero-cta .quiet{ font-size:14px; color:var(--body); } .sec{ padding:72px 0 80px; } .sec.raised{ background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .sec.sunken{ background:var(--surface-sunken); border-top:1px solid var(--border); } .sec.paper{ background:var(--surface); border-top:1px solid var(--border-hairline); } .sec .h2{ margin-top:14px; } /* the plate ledger: a row of paper plates, each with a 6px mineral edge; the bodies run sea-glass -> violet in order */ .plates{ margin-top:34px; display:grid; gap:14px; } @media (min-width:640px){ .plates{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .plates{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .plates.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .plate{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:20px 22px 22px 26px; box-shadow:0 1px 0 var(--border); overflow:hidden; } .plate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--pc,var(--amb-sea-glass)); } .plate::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); } .plate:nth-child(1){ --pc:var(--amb-sea-glass); } .plate:nth-child(2){ --pc:var(--amb-aqua); } .plate:nth-child(3){ --pc:var(--amb-periwinkle); } .plate:nth-child(4){ --pc:var(--amb-soft-violet); } .plate .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .plate .std{ display:block; margin-top:10px; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--phosphor); } .plate h3{ margin-top:8px; font-size:19px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); text-wrap:balance; } .plate p{ margin-top:8px; font-size:14.5px; line-height:1.5; color:var(--body); } .plate p b{ color:var(--heading); } /* the data sheet: a specification table on paper; figures tabular; unknown cells carry the build marker */ .dsheet{ margin-top:34px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; } .dsheet table{ width:100%; border-collapse:collapse; font-size:15px; } .dsheet th, .dsheet td{ text-align:left; padding:13px 18px; border-top:1px solid var(--border-hairline); vertical-align:top; } .dsheet thead th{ border-top:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); background:var(--surface); } .dsheet th[scope="row"]{ font-weight:600; color:var(--heading); width:38%; } .dsheet td{ color:var(--body); font-variant-numeric:tabular-nums; } .dsheet td b{ color:var(--heading); } .dsheet td .basis{ display:block; margin-top:2px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--phosphor); font-weight:600; position:static; background:none; padding:0; box-shadow:none; border-radius:0; } .dsheet td .basis::before{ display:none; } @media (max-width:639px){ .dsheet th, .dsheet td{ padding:11px 14px; font-size:14px; } .dsheet th[scope="row"]{ width:44%; } } .tc{ font-family:var(--mono); font-size:12.5px; color:var(--action); border:1px solid var(--action); padding:1px 6px; border-radius:var(--r-field); white-space:nowrap; font-weight:600; letter-spacing:.02em; } /* two-column argument: text on the left, a paper note or figure on the right */ .split{ margin-top:34px; display:grid; gap:20px; } @media (min-width:1000px){ .split{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px; align-items:start; } } .prose p{ font-size:16px; line-height:1.6; color:var(--body); max-width:62ch; } .prose p + p{ margin-top:14px; } .prose p b{ color:var(--heading); } .prose h3{ margin-top:22px; font-size:20px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); } .prose h3 + p{ margin-top:8px; } .prose ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px; max-width:62ch; } .prose li{ display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:baseline; font-size:15.5px; line-height:1.5; color:var(--body); } .prose li::before{ content:""; width:12px; height:9px; position:relative; top:-1px; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .prose li b{ color:var(--heading); } /* the record card: the one real worked example, quoted with its basis */ .example{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:22px 24px 24px 30px; box-shadow:0 1px 0 var(--border); overflow:hidden; } .example::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--verdict-verified); } .example .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--verdict-verified); } .example h3{ margin-top:8px; font-size:19px; line-height:1.3; font-weight:600; letter-spacing:-.3px; color:var(--heading); } .example dl{ margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14.5px; line-height:1.45; } .example dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); padding-top:3px; } .example dd{ margin:0; color:var(--body); font-variant-numeric:tabular-nums; } .example dd b{ color:var(--heading); } .example .res{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border-hairline); font-size:14.5px; line-height:1.5; color:var(--body); } .example .res b{ color:var(--heading); font-size:17px; } .example .tlink{ margin-top:12px; font-size:14.5px; } /* the upload route (family furniture, from the U-values page) */ .send{ padding:60px 0 64px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .send-grid{ display:grid; gap:18px; } @media (min-width:860px){ .send-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; align-items:center; } } .send h2{ font-size:clamp(24px,2.6vw,30px); line-height:1.15; letter-spacing:-.6px; font-weight:600; color:var(--heading); margin-top:12px; } .send p{ font-size:15.5px; line-height:1.55; color:var(--body); max-width:58ch; } .send-note{ position:relative; background:var(--surface); border-radius:var(--r); padding:22px 24px 24px 30px; box-shadow:0 1px 0 var(--border); align-self:center; } .send-note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-aqua); border-radius:var(--r) 0 0 var(--r); } .send-note .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .send-note .tlink{ margin-top:10px; font-size:17px; } .send-note .send-foot{ margin-top:10px; padding-top:12px; border-top:1px solid var(--border-hairline); font-size:13.5px; color:var(--muted); } /* hand-off tiles: three across on this family */ .next{ padding:72px 0 80px; border-top:1px solid var(--border-hairline); } @media (min-width:1000px){ .next .tiles.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* drawings: the family's flow marks */ .drawing .flow{ fill:none; stroke:var(--heading); stroke-width:1.6; opacity:.5; } .drawing .flow.brg{ stroke:var(--amb-violet-anchor); stroke-width:2.6; opacity:1; } .drawing .fix{ fill:var(--heading); } .drawing .fixhead{ fill:var(--heading); } .drawing .mk.bad{ fill:var(--amb-violet-anchor); } .drawing .lbl{ fill:var(--body); font-size:13px; letter-spacing:.08em; font-weight:600; paint-order:stroke; stroke:var(--surface-raised); stroke-width:6px; stroke-linejoin:round; } .drawing-mobile .lbl{ font-size:9px; stroke-width:4px; } .drawing .wool{ fill:var(--amb-sea-glass); opacity:.45; } .drawing .steel{ fill:var(--border-strong); } .drawing .osb{ fill:var(--surface-sunken); } .drawing .board{ fill:var(--border); opacity:.6; } .drawing .foam{ fill:var(--accent-soft); } .drawing .membrane{ fill:none; stroke:var(--amb-violet-anchor); stroke-width:3; } .drawing .coatline{ fill:none; stroke:var(--action); stroke-width:5; stroke-linecap:round; } .drawing-mobile .coatline{ stroke-width:3; } .drawing-mobile .membrane{ stroke-width:2; } /* --muted never sits on an ambient plate */ .amb .kicker, .amb .tile-k, .amb .fignote, .amb .crumbs{ color:var(--body); } /* the mineral card: the family's one mid-page mineral moment (the U-values page's duty card construction). DOSE 0.55, the same plate and position as that card, the violet anchor kept out of the card. */ .is-mineral{ isolation:isolate; position:relative; } .is-mineral .dmineral{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:var(--plate-c-light); background-repeat:no-repeat; background-size:cover; background-position:38% 50%; opacity:.55; } .is-mineral > *:not(.dmineral){ position:relative; z-index:1; } @media (prefers-reduced-motion: reduce){ *{ transition-duration:0s !important; animation:none !important; } } /* ================= page-specific ================= */ .hero-media img{ object-position:50% 50%; } /* 01 the objectives: four plates, each with its band and its FROM rate; the fire band carries no rate (project dependent) */ .plate .band{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-variant-numeric:tabular-nums; } .plate .band b{ font-size:26px; line-height:1; letter-spacing:-.8px; font-weight:600; color:var(--heading); } .plate .band span{ font-family:var(--mono); font-size:12px; color:var(--body); } .plate .rate{ margin-top:8px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--phosphor); letter-spacing:.02em; } .plate .rate small{ font-family:var(--font); font-weight:400; color:var(--body); font-size:13px; letter-spacing:0; } .plate .not{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border-hairline); font-size:13.5px; color:var(--body); } .plate .not b{ color:var(--heading); } /* 02 the pair: 25 mm and 50 mm, each with a depth gauge drawn from the sheet underside to one scale, and its FROM rate */ .pair{ margin-top:34px; display:grid; gap:16px; } @media (min-width:760px){ .pair{ grid-template-columns:1fr 1fr; gap:20px; } } .dcard{ padding:0; display:grid; grid-template-columns:96px minmax(0,1fr); } .dcard::before{ display:none; } .gauge{ position:relative; background:var(--surface-sunken); border-right:1px solid var(--border-hairline); } .gauge .sheet-line{ position:absolute; left:0; right:0; top:22px; height:4px; background:var(--heading); } .gauge .foamdepth{ position:absolute; left:18px; right:18px; top:26px; background:var(--accent-soft); border:1px solid var(--accent-on-panel); border-top:0; } .gauge .foamdepth::after{ content:attr(data-d); position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--phosphor); white-space:nowrap; } .gauge .side{ position:absolute; left:0; right:0; top:6px; text-align:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--muted); } .dbody{ padding:22px 24px 24px; } .dbody .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .dbody .big{ margin-top:12px; display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums; } .dbody .big b{ font-size:40px; line-height:1; letter-spacing:-1.4px; font-weight:600; color:var(--heading); } .dbody .big span{ font-family:var(--mono); font-size:13px; color:var(--body); } .dbody .rate{ margin-top:10px; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--phosphor); } .dbody .rate small{ font-family:var(--font); font-weight:400; color:var(--body); font-size:13.5px; } .dbody .rr{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border-hairline); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; } .dbody .rr b{ font-size:22px; letter-spacing:-.5px; color:var(--heading); font-variant-numeric:tabular-nums; } .dbody .rr span{ font-family:var(--mono); font-size:12px; color:var(--body); } .dbody p{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--body); } .dbody p b{ color:var(--heading); } .budget{ margin-top:20px; } /* 03 the instrument: the slider sets the depth, the readout gives the foam layer's R, the bar draws it to scale */ .inst{ margin-top:34px; display:grid; gap:16px; } @media (min-width:1000px){ .inst{ grid-template-columns:minmax(0,1fr) 380px; gap:20px; align-items:start; } } .inst-card{ 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%); } .inst-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%); } .inst-card label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .inst-card label output{ font-size:15px; letter-spacing:0; text-transform:none; color:var(--heading); font-variant-numeric:tabular-nums; } .inst-card input[type=range]{ width:100%; margin:14px 0 0; accent-color:var(--accent); height:28px; } .inst-card input[type=range]:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:4px; } .ticks{ display:flex; justify-content:space-between; margin-top:2px; font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; } .rbar{ margin-top:22px; } .rbar .k{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .rbar .track{ position:relative; margin-top:8px; height:22px; background:var(--surface-sunken); border-radius:4px; overflow:hidden; } .rbar .fill{ position:absolute; left:0; top:0; bottom:0; width:33.3%; background:var(--phosphor); transition:width .28s var(--ease); } .rbar .tk{ position:absolute; top:0; bottom:0; width:1px; background:var(--border-strong); } .rbar .tl{ position:relative; height:18px; margin-top:4px; font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; } .rbar .tl span{ position:absolute; transform:translateX(-50%); white-space:nowrap; } .inst-foot{ margin-top:16px; font-size:13.5px; color:var(--body); display:flex; flex-wrap:wrap; gap:6px 18px; } .ro{ position:relative; background:var(--surface-raised); border-radius:var(--r); padding:24px 26px 26px 30px; box-shadow:0 1px 0 var(--border); overflow:hidden; } .ro::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--phosphor); } .ro .rk{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); } .ro .big{ margin-top:14px; display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums; } .ro .big b{ font-size:48px; line-height:1; letter-spacing:-1.8px; font-weight:600; color:var(--heading); } .ro .big span{ font-family:var(--mono); font-size:13px; color:var(--body); } .ro .sub{ margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--phosphor); font-weight:600; } .ro .eq{ margin-top:14px; font-family:var(--mono); font-size:13.5px; color:var(--heading); background:var(--surface); border-radius:var(--r-field); padding:10px 12px; font-variant-numeric:tabular-nums; } .ro p{ margin-top:14px; font-size:14.5px; line-height:1.5; color:var(--body); } .ro table{ margin-top:14px; width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums; } .ro th, .ro td{ text-align:left; padding:6px 0; border-top:1px solid var(--border-hairline); } .ro th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--body); border-top:0; } .ro td b{ color:var(--heading); } .ro tr[data-hot] td{ color:var(--phosphor); font-weight:600; } /* 04 the whole build-up: the drawing on raised paper, the example beside it */ .bu-grid{ margin-top:34px; display:grid; gap:20px; } @media (min-width:1000px){ .bu-grid{ grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr); gap:32px; align-items:start; } } .drawing .layer{ stroke:var(--heading); stroke-width:1.2; } .drawing .timber{ fill:var(--border-strong); stroke:var(--heading); stroke-width:1.2; } .drawing .lbl{ fill:var(--amb-violet-anchor); } .drawing .rmk{ fill:var(--phosphor); font-size:15px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums; } .drawing .rmk.tot{ fill:var(--heading); } .drawing-mobile .rmk{ font-size:9.5px; } /* ===================================================================================================== 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