: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; } /* ================= 1 HERO: the original, restored (h2/HERO-SOURCE.md) ================= A full-bleed photographic plate: the cut-away roof edge. The copy sits on the image's own pale left field; NO card. Over the image: the dimension-line drawing (ink hairlines, one dashed datum) that draws in once, the violet profile line with its tip and a travelling pulse, a slow light drift and a sheen that shows only through the deck mask. Changed from the served hero, and only this: the scroll parallax is gone (standard s6, no parallax); the one-shot settle-in stays (scale 1.06 -> 1 as the page goes live); the CTA is filled #C24E0F with a white label (4.60:1) instead of #DB5A14 (3.45:1); the eyebrow and the proof line use --body rather than --muted so they hold on the field. CONTRAST, stated honestly: the image cannot load in the build container, so the field was measured on the served capture h2/served-hero-1568.jpg (the plate under the copy at 1568 wide): field luminance min 0.659, median 0.849; --heading 12.05:1, --body 6.95:1, --accent 5.13:1 (large), --muted 4.08:1 (which is why --muted is not used here). The 1440/1200/768/390 renders with the real image are still to be measured on a connected surface. ---------- */ .hero-stage{ position:relative; background:var(--surface); overflow:hidden; --z:1.06; } .hero-stage.is-live{ --z:1; } .hero-scene{ position:relative; width:100%; margin:0 auto; isolation:isolate; overflow:hidden; background:var(--surface-raised); aspect-ratio:1440/2880; } .hero-scene > *{ position:absolute; inset:0; } .hero-plate{ z-index:0; } .hero-plate img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; transform:scale(var(--z)); transform-origin:50% 50%; transition:transform 2.4s cubic-bezier(.22,.61,.36,1); } .hero-glow{ z-index:1; pointer-events:none; opacity:0; } .hero-sheen{ z-index:1; overflow:hidden; pointer-events:none; mix-blend-mode:screen; -webkit-mask-image:var(--deck); mask-image:var(--deck); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:center; mask-position:center; } .hero-sheen i{ position:absolute; top:-20%; bottom:-20%; left:-60%; width:220%; opacity:0; background:linear-gradient(101deg,transparent 38%,color-mix(in srgb,var(--surface-raised) 92%,transparent) 47%,transparent 56%); } .hero-lines{ z-index:2; width:100%; height:100%; display:block; } .ln{ fill:none; stroke:var(--heading); vector-effect:non-scaling-stroke; stroke-width:1px; stroke-linecap:square; opacity:.72; } .ln.d1{ stroke-dasharray:9 7; } .ln.x{ opacity:.6; } .vi-base,.vi-pulse{ fill:none; stroke:var(--accent); vector-effect:non-scaling-stroke; stroke-width:2.2px; stroke-linecap:round; } .vi-pulse{ stroke:var(--accent-soft); stroke-width:1.2px; opacity:0; } .vi-tip{ fill:var(--accent); } .v-mid,.v-tall{ display:none; } /* live: the lines draw in once, the tip appears, the profile line draws, then the pulse travels; the light drifts */ .is-live .ln{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:holvem-draw .9s cubic-bezier(.22,.61,.36,1) var(--d,1.1s) forwards; } .is-live .ln.d1{ stroke-dasharray:9 7; stroke-dashoffset:0; opacity:0; animation:holvem-fade .9s ease var(--d,1.1s) forwards; } .is-live .vi-tip{ opacity:0; animation:holvem-fade1 .6s ease 1.4s forwards; } .is-live .vi-base{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:holvem-draw 1.2s cubic-bezier(.22,.61,.36,1) 2.4s forwards; } .is-live .vi-pulse{ stroke-dasharray:var(--seg) var(--rest); stroke-dashoffset:var(--seg); animation:holvem-travel 6.5s cubic-bezier(.5,0,.5,1) 4.1s infinite; } .is-live .hero-sheen i{ animation:holvem-sheen 14s cubic-bezier(.45,0,.55,1) 1.4s infinite; } .is-live .hero-glow{ opacity:1; left:-45%; width:190%; background:linear-gradient(104deg,transparent 27%,color-mix(in srgb,var(--surface-raised) 46%,transparent) 44%,transparent 59%); mix-blend-mode:screen; animation:holvem-light 34s cubic-bezier(.45,0,.55,1) infinite alternate; } @keyframes holvem-draw{ to{ stroke-dashoffset:0; } } @keyframes holvem-fade{ to{ opacity:.72; } } @keyframes holvem-fade1{ to{ opacity:1; } } @keyframes holvem-travel{ 0%{ stroke-dashoffset:var(--seg); opacity:0; } 6%{ opacity:1; } 62%{ opacity:1; } 72%{ stroke-dashoffset:calc(-1 * var(--len)); opacity:0; } 100%{ stroke-dashoffset:calc(-1 * var(--len)); opacity:0; } } @keyframes holvem-light{ from{ transform:translateX(-12%); } to{ transform:translateX(12%); } } @keyframes holvem-sheen{ 0%{ opacity:0; transform:translateX(-26%); } 10%{ opacity:.85; } 42%{ opacity:.85; } 56%{ opacity:0; transform:translateX(26%); } 100%{ opacity:0; transform:translateX(26%); } } /* the copy */ .hero-copy{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; pointer-events:none; } .hero-copy .wrap{ max-width:var(--frame); width:calc(100% - 2 * var(--gutter)); margin:0 auto; } .hero-copy .inner{ width:min(560px,42vw); pointer-events:auto; } .hero-copy .eyebrow{ font-family:var(--mono); font-size:12px; line-height:18px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--body); } .hero-copy h1{ margin-top:16px; font-size:60px; line-height:66px; letter-spacing:-1.2px; font-weight:600; color:var(--heading); } .hero-copy h1 .violet{ color:var(--accent); } .hero-lede{ font-size:18px; line-height:30px; margin-top:24px; max-width:440px; color:var(--body); } .hero-copy .actions{ margin-top:36px; } .hero-stage .action{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:var(--r); background:var(--action); color:#FFFFFF; font-size:17px; line-height:24px; font-weight:600; text-decoration:none; box-shadow:0 12px 26px -14px rgba(194,78,15,.65); transition:transform var(--dur) var(--ease), background-color var(--dur), box-shadow var(--dur); } .hero-stage .action svg{ width:16px; height:16px; flex:none; transition:transform var(--dur) var(--ease); } .hero-stage .action:hover{ background:var(--action-hover); transform:translateY(-1px); box-shadow:0 16px 30px -14px rgba(194,78,15,.7); } .hero-stage .action:hover svg{ transform:translateX(3px); } .hero-stage .action:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; } /* the proof line: three plain facts in small type, a violet mark between them; --body, not --muted, on the field */ .hero-proof{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px 16px; padding:0; list-style:none; font-size:13.5px; line-height:1.45; color:var(--body); max-width:440px; } .hero-proof li{ display:inline-flex; align-items:center; gap:10px; } .hero-proof li::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; } @media (min-width:1200px){ .hero-scene{ aspect-ratio:2880/1440; max-height:80vh; min-height:520px; } } @media (min-width:768px) and (max-width:1199px){ .v-wide{ display:none; } .v-mid{ display:block; } .hero-scene{ aspect-ratio:2000/1440; max-height:74vh; min-height:470px; } .hero-copy h1{ font-size:36px; line-height:42px; letter-spacing:-.8px; margin-top:12px; } .hero-lede{ font-size:16px; line-height:24px; max-width:360px; margin-top:18px; } .hero-copy .actions{ margin-top:28px; } .hero-proof{ margin-top:18px; max-width:360px; font-size:13px; } } @media (max-width:767px){ .v-wide{ display:none; } .v-tall{ display:block; } .hero-plate img{ object-position:50% 0; } .hero-copy{ align-items:flex-start; padding-top:36px; } .hero-copy .inner{ width:100%; } .hero-copy h1{ font-size:36px; line-height:42px; letter-spacing:-.8px; margin-top:12px; } .hero-lede{ margin-top:18px; font-size:16px; line-height:24px; } .hero-copy .actions{ margin-top:24px; } .hero-proof{ display:none; } /* the tall crop puts the drawing directly under the copy; the proof line sits under the scene instead */ .hero-stage .hero-proof-strip{ display:block; } } /* the proof line on the tall crop: the same three claims on a paper strip under the scene, off the drawing */ .hero-proof-strip{ display:none; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .hero-proof-strip ul{ margin:0; padding:14px var(--gutter); list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; line-height:1.45; color:var(--body); } .hero-proof-strip li{ display:inline-flex; align-items:center; gap:10px; } .hero-proof-strip li::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; } @media (prefers-reduced-motion: reduce){ .hero-stage{ --z:1; } .hero-plate img{ transition:none; } .is-live .ln, .is-live .ln.d1, .is-live .vi-base, .is-live .vi-tip, .is-live .vi-pulse, .is-live .hero-sheen i, .is-live .hero-glow{ animation:none !important; } .is-live .ln, .is-live .vi-base{ stroke-dasharray:none; stroke-dashoffset:0; } .is-live .ln{ opacity:.72; } .is-live .ln.x{ opacity:.6; } .is-live .ln.d1{ stroke-dasharray:9 7; opacity:.72; } .is-live .vi-tip{ opacity:1; } .is-live .vi-pulse{ opacity:0; } .is-live .hero-glow, .hero-sheen{ display:none; } } /* ================= 2 START WITH WHAT YOU KNOW: four photographic doors ================= */ .hv-start{ padding:72px 0 76px; border-top:1px solid var(--border-hairline); } .doors{ margin-top:36px; display:grid; gap:14px; } @media (min-width:600px){ .doors{ grid-template-columns:1fr 1fr; } } @media (min-width:1000px){ .doors{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } } .door{ --dc:var(--amb-violet-anchor); position:relative; display:flex; flex-direction:column; gap:10px; 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); } .door::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--accent); clip-path:polygon(100% 0, 100% 100%, 0 0); transform:scale(0); transform-origin:100% 0; transition:transform .32s var(--ease); } .door-media{ position:relative; width:calc(100% + 32px); margin:-16px -16px 0; aspect-ratio:4/3; background:var(--surface-sunken); overflow:hidden; } .door-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } /* the label plate: ONE tag, the family, on paper with the 31 deg cut; the family's colour is a bar, not a second word */ .door-label{ position:absolute; left:0; bottom:0; z-index:1; display:flex; align-items:stretch; } .door-label i{ width:10px; background:var(--dc); } .door-label b{ display:flex; align-items:center; padding:10px 28px 10px 14px; background:var(--surface-raised); color:var(--heading); font-size:15px; font-weight:600; letter-spacing:-.1px; clip-path:polygon(0 0, calc(100% - 13.2px) 0, 100% 100%, 0 100%); } .door-problems{ --dc:var(--amb-aqua); } .door-buildings{ --dc:var(--amb-violet-anchor); } .door-applications{ --dc:var(--amb-soft-violet); } .door-systems{ --dc:var(--amb-periwinkle); } .door-s{ display:block; margin-top:6px; font-size:15.5px; line-height:1.5; color:var(--body); } .door-go{ margin-top:auto; padding-top:4px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--accent-text); } .door-go svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease); } .door:hover, .door:focus-visible{ transform:translateY(-4px); border-color:var(--accent); } .door:hover::after, .door:focus-visible::after{ transform:scale(1); } .door:hover .door-media img, .door:focus-visible .door-media img{ transform:scale(1.035); } .door:hover .door-go svg, .door:focus-visible .door-go svg{ transform:translateX(4px); } .doors.is-in .door{ animation:doorIn .42s var(--ease) both; } .doors.is-in .door:nth-child(2){ animation-delay:.06s; } .doors.is-in .door:nth-child(3){ animation-delay:.12s; } .doors.is-in .door:nth-child(4){ animation-delay:.18s; } @keyframes doorIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} } .start-foot{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); } /* ================= 3 GUIDES WITH THUMBNAILS: an editorial row, one featured, two beside it ================= */ .guides{ padding:72px 0 76px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .gedit{ margin-top:36px; display:grid; gap:16px; } @media (min-width:1000px){ .gedit{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:stretch; } } .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:3/2; 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:20px 22px 22px; display:flex; flex-direction:column; gap:8px; 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:21px; line-height:1.2; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; } .gp{ font-size:15px; line-height:1.5; color:var(--body); } .gp b{ color:var(--heading); } .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); } /* the featured card leads with the truth: the published FROM rates, tabular */ .gfeat .gt{ font-size:clamp(24px,2.4vw,30px); letter-spacing:-.6px; max-width:24ch; } .gfeat .gp{ font-size:16px; max-width:56ch; } .grates{ margin:10px 0 4px; display:flex; flex-wrap:wrap; align-items:end; gap:10px 28px; padding-top:14px; border-top:1px solid var(--border-hairline); } .grates .note{ flex:1 1 100%; font-size:13.5px; color:var(--body); } .grates div{ display:grid; gap:2px; } .grates .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; } .grates .v small{ font-size:12px; font-weight:500; color:var(--body); letter-spacing:.06em; text-transform:uppercase; margin-right:6px; } .grates .k{ font-size:13px; color:var(--body); } .gside{ display:grid; gap:16px; } @media (min-width:1000px){ .gside{ grid-template-rows:1fr 1fr; } } .gside .gmedia{ aspect-ratio:16/9; } /* at the two-column width the featured photograph fills the column so the row's edges meet: no dead space beside it */ @media (min-width:1000px){ .gfeat .gmedia{ flex:1 1 auto; aspect-ratio:auto; min-height:320px; } } .gside .gbody{ padding:18px 20px 20px; gap:6px; } .gside .gt{ font-size:19px; } .gside .gp{ font-size:14.5px; } .guides-foot{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); } /* ================= 4 THE MOTION MOMENT: a window onto site ================= The clip is dark at its edges, so it is framed as a window in paper: a large inset with the 31 deg chamfered corner and a hard offset shadow plane, generous paper above and below; the page stays light-dominant. The copy plate is paper, lower left, never over the bright doorway. Pause control top right, the reel's pattern. Reduced motion: no autoplay, poster only, the play control available. ---------- */ .motion{ padding:84px 0 92px; background:var(--surface); border-top:1px solid var(--border-hairline); } .stage-wrap{ position:relative; } .stage-wrap::before{ content:""; position:absolute; inset:0; transform:translate(-8px,10px); background:rgba(20,24,27,.12); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .stage{ position:relative; aspect-ratio:16/9; background:var(--panel); border-radius:var(--r); overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .stage::after{ content:""; position:absolute; top:0; right:0; z-index:3; width:var(--ch-x); height:var(--ch-y); background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--panel); } .stage .rec-play{ top:14px; right:calc(var(--ch-x) + 14px); } .plate{ position:absolute; left:24px; bottom:24px; z-index:2; width:min(400px, calc(100% - 48px)); background:var(--surface-raised); border-radius:var(--r); padding:18px 22px 20px; clip-path:polygon(0 0, calc(100% - 23.3px) 0, 100% 14px, 100% 100%, 0 100%); } .plate::after{ content:""; position:absolute; top:0; right:0; width:23.3px; height:14px; background:var(--surface-sunken); clip-path:polygon(0 0, 100% 100%, 0 100%); } .plate .kicker{ color:var(--verdict-verified); } .plate h2{ margin-top:8px; font-size:clamp(19px,1.8vw,24px); line-height:1.25; letter-spacing:-.4px; font-weight:600; color:var(--heading); text-wrap:balance; } .plate .tlink{ margin-top:12px; font-size:14.5px; } @media (min-width:1000px){ .plate{ left:32px; bottom:32px; padding:22px 26px 24px; } } @media (max-width:719px){ /* r3 fix: at phone width the stage box no longer clips the plate; the clip becomes a 16:9 window and the plate sits under it */ .stage{ aspect-ratio:auto; background:transparent; clip-path:none; border-radius:0; overflow:visible; } .stage::after, .stage-wrap::before{ display:none; } .stage video{ position:relative; aspect-ratio:16/9; height:auto; border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .plate{ position:static; width:auto; margin-top:16px; clip-path:none; padding:18px 20px 20px; border:1px solid var(--border-hairline); } .plate::after{ display:none; } } .motion-foot{ margin-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:14px; color:var(--body); } /* ================= 02 PROJECT RECORDS: the real footage and photographs, a 2 x 4 grid ================= Two columns to 999px, four from 1000px. Square media so portrait photographs, landscape photographs and 16:9 clips sit in one grid without a ragged edge. Clips play muted and looped while in view (never under reduced motion); every clip carries the visible pause control. Only these carry the "Project record" label. ---------- */ .projects{ padding:72px 0 76px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .recgrid{ margin-top:34px; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:600px){ .recgrid{ gap:14px; } } @media (min-width:1000px){ .recgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } } .rec{ position:relative; margin:0; background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; } .rec-media{ position:relative; aspect-ratio:1/1; background:var(--surface-sunken); overflow:hidden; } .rec-media img, .rec-media video{ width:100%; height:100%; object-fit:cover; display:block; } .fig-label{ position:absolute; left:0; bottom:0; z-index:1; display:flex; align-items:stretch; max-width:100%; } .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%); } .rec-media .fig-tag{ padding:8px 12px; font-size:11px; letter-spacing:.08em; } @media (max-width:1199px){ .rec-media .fig-name{ display:none; } } .rec-play{ all:unset; cursor:pointer; position:absolute; right:10px; top:10px; z-index:2; width:40px; height:40px; display:grid; place-items:center; background:var(--surface-raised); border:1.5px solid var(--heading); border-radius:var(--r); color:var(--heading); } .rec-play:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; } .rec-play svg{ width:14px; height:14px; } .rec-play .pause{ display:none; } .is-playing .rec-play .play{ display:none; } .is-playing .rec-play .pause{ display:block; } .rec-cap{ padding:12px 14px 14px; font-size:13.5px; line-height:1.45; color:var(--body); } .rec-cap b{ display:block; color:var(--heading); margin-bottom:2px; } @media (max-width:599px){ .rec-cap{ padding:10px 12px 12px; font-size:12.5px; } .rec-cap span{ display:none; } .rec-play{ width:34px; height:34px; right:8px; top:8px; } } .recgrid.is-in .rec{ animation:doorIn .38s var(--ease) both; } .recgrid.is-in .rec:nth-child(2){ animation-delay:.04s; } .recgrid.is-in .rec:nth-child(3){ animation-delay:.08s; } .recgrid.is-in .rec:nth-child(4){ animation-delay:.12s; } .recgrid.is-in .rec:nth-child(5){ animation-delay:.16s; } .recgrid.is-in .rec:nth-child(6){ animation-delay:.2s; } .recgrid.is-in .rec:nth-child(7){ animation-delay:.24s; } .recgrid.is-in .rec:nth-child(8){ animation-delay:.28s; } .projects-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-top:26px; font-size:14.5px; color:var(--body); } /* ================= 03 WHO HOLVEM ARE ================= Light-dominant. One large 16:9 plate, the 31 deg chamfer at its top right, and behind it a HARD-EDGED mineral plate (the Route C light construction, full dose) offset down and to the left, so the brand's material shows as a rim and never as a wash. A one-shot phosphor scan crosses the plate as it comes into view (380 ms; none under reduced motion). Under the plate, the three confirmed claims as figure-style statements: a mono word, a phosphor rule that draws in once, a plain line. No steps, no cards (R1-01-03). ---------- */ .who{ padding:84px 0 88px; background:var(--surface); border-top:1px solid var(--border-hairline); overflow:hidden; } .who-plate{ position:relative; margin-top:40px; } .who-plate::before{ content:""; position:absolute; inset:0; transform:translate(-18px,18px); border-radius:var(--r); clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); background-repeat:no-repeat; background-position:center; background-size:cover; 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"); } .who-media{ position:relative; aspect-ratio:16/9; background:var(--surface-sunken); border-radius:var(--r); overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .who-media::after{ content:""; position:absolute; top:0; right:0; z-index:3; width:var(--ch-x); height:var(--ch-y); background:var(--surface); clip-path:polygon(0 0, 100% 100%, 0 100%); } .who-media img, .who-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .who-scan{ position:absolute; top:0; bottom:0; left:0; width:2px; z-index:2; background:var(--phosphor-on-dark); box-shadow:0 0 12px 2px rgba(166,226,76,.55); opacity:0; pointer-events:none; } .who.is-in .who-scan{ animation:whoScan .38s cubic-bezier(.4,0,.6,1) .12s forwards; } @keyframes whoScan{ 0%{ opacity:.9; transform:translateX(0); } 100%{ opacity:0; transform:translateX(calc(100vw)); } } .who-tag{ position:absolute; left:0; bottom:0; z-index:2; display:flex; align-items:stretch; } .who-tag i{ width:10px; background:var(--accent); } .who-tag b{ display:flex; align-items:center; padding:10px 30px 10px 14px; background:var(--surface-raised); color:var(--heading); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100%); } .who-figs{ margin-top:44px; display:grid; gap:26px 32px; } @media (min-width:720px){ .who-figs{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .wfig{ display:grid; gap:12px; align-content:start; } .wfig .fv{ font-family:var(--mono); font-size:clamp(30px,3.2vw,44px); line-height:1; letter-spacing:-1px; font-weight:600; color:var(--heading); } .wfig .fr{ height:3px; background:var(--surface-sunken); position:relative; overflow:hidden; } .wfig .fr::after{ content:""; position:absolute; inset:0; background:var(--phosphor); transform:scaleX(1); transform-origin:0 50%; } .who.is-in .wfig .fr::after{ animation:ruleIn .36s var(--ease) both; } .who.is-in .wfig:nth-child(2) .fr::after{ animation-delay:.1s; } .who.is-in .wfig:nth-child(3) .fr::after{ animation-delay:.2s; } @keyframes ruleIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } .wfig .fk{ font-size:15.5px; line-height:1.5; color:var(--body); max-width:30ch; } .wfig .fk b{ color:var(--heading); } .who-foot{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); } @media (max-width:719px){ .who{ padding:64px 0 68px; } .who-plate{ margin-top:30px; } .who-plate::before{ transform:translate(-10px,10px); } .who-tag b{ font-size:11px; padding:8px 24px 8px 12px; } } /* ================= 04 MOISTURE FIRST: two generic data charts in the instrument style ================= Data graphics, not drawn sections. Raised paper plates, hairline grids, Geist Mono labels, the phosphor for the data. No unit numbers: the shapes are generic. One-shot draw-in as the section enters view (bars 360 ms, the wave 380 ms); static and complete under reduced motion. ---------- */ .moist{ padding:84px 0 88px; background:var(--surface); border-top:1px solid var(--border-hairline); } .moist .lede b{ color:var(--heading); } .charts{ margin-top:40px; display:grid; gap:18px; } @media (min-width:860px){ .charts{ grid-template-columns:1fr 1fr; gap:24px; } } .chart{ position:relative; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r); padding:22px 22px 20px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .chart::after{ content:""; position:absolute; top:0; right:0; width:var(--ch-x); height:var(--ch-y); background:var(--surface); clip-path:polygon(0 0, 100% 100%, 0 100%); } .chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-right:var(--ch-x); } .chart-head h3{ font-size:18px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); } .chart-head .std{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .chart-axis{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); } .chart svg{ display:block; width:100%; height:auto; margin-top:10px; } @media (max-width:719px){ .chart .lbl{ font-size:16px; } } .chart .grid line{ stroke:var(--border-hairline); stroke-width:1; shape-rendering:crispEdges; } .chart .axis{ stroke:var(--border-strong); stroke-width:1; shape-rendering:crispEdges; } .chart .lbl{ font-family:var(--mono); font-size:11px; fill:var(--muted); letter-spacing:.04em; } .chart .lbl.ink{ fill:var(--heading); font-weight:600; } .chart .lbl.ph{ fill:var(--phosphor); font-weight:600; } .chart .bar{ fill:var(--phosphor); rx:2; transform-origin:0 100%; transform-box:fill-box; } .chart .bar.tail{ fill:var(--phosphor); opacity:.55; } .chart .wave{ fill:none; stroke:var(--phosphor); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .chart .trend{ fill:none; stroke:var(--border-strong); stroke-width:1; stroke-dasharray:4 5; } .chart .mk{ fill:var(--surface-raised); stroke:var(--phosphor); stroke-width:2; } .chart .tick{ stroke:var(--phosphor); stroke-width:1; stroke-dasharray:3 4; } .chart-read{ margin-top:14px; display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:var(--body); } .chart-read i{ flex:none; width:10px; height:8px; margin-top:6px; background:var(--phosphor); clip-path:polygon(0 0, 100% 60%, 40% 100%, 0 100%); } .chart-read b{ color:var(--heading); } /* draw-in */ .moist.is-in .bar{ animation:barIn .36s var(--ease) both; } .moist.is-in .bar:nth-of-type(2){ animation-delay:.03s; } .moist.is-in .bar:nth-of-type(3){ animation-delay:.06s; } .moist.is-in .bar:nth-of-type(4){ animation-delay:.09s; } .moist.is-in .bar:nth-of-type(5){ animation-delay:.12s; } .moist.is-in .bar:nth-of-type(6){ animation-delay:.15s; } .moist.is-in .bar:nth-of-type(7){ animation-delay:.18s; } .moist.is-in .bar:nth-of-type(8){ animation-delay:.21s; } .moist.is-in .bar:nth-of-type(9){ animation-delay:.24s; } .moist.is-in .bar:nth-of-type(10){ animation-delay:.27s; } .moist.is-in .bar:nth-of-type(11){ animation-delay:.3s; } .moist.is-in .bar:nth-of-type(12){ animation-delay:.33s; } @keyframes barIn{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } } .moist.is-in .wave{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:waveIn .38s cubic-bezier(.3,0,.5,1) .2s forwards; } @keyframes waveIn{ to{ stroke-dashoffset:0; } } .moist.is-in .mk, .moist.is-in .mk-l{ opacity:0; animation:holvem-fade1 .3s ease .5s forwards; } .moist-foot{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; font-size:14.5px; color:var(--body); } @media (max-width:719px){ .moist{ padding:64px 0 68px; } .chart{ padding:18px 16px 16px; } } /* ================= 07 STRAIGHT ANSWERS: native details, the buildings-page construction ================= */ .answers{ padding:72px 0 80px; background:var(--surface-raised); border-top:1px solid var(--border-hairline); } .ans-grid{ margin-top:34px; display:grid; gap:28px; } @media (min-width:1000px){ .ans-grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start; } } .ans-note{ position:relative; background:var(--surface); border-radius:var(--r); padding:22px 24px 24px 28px; overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--ch-x)) 0, 100% var(--ch-y), 100% 100%, 0 100%); } .ans-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%); } .ans-note::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--amb-aqua); } .ans-note .big{ font-family:var(--mono); font-size:clamp(26px,2.6vw,34px); line-height:1; font-weight:600; color:var(--phosphor); letter-spacing:-.5px; } .ans-note h3{ margin-top:12px; font-size:20px; line-height:1.25; letter-spacing:-.3px; font-weight:600; color:var(--heading); text-wrap:balance; } .ans-note p{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--body); } .ans-note p b{ color:var(--heading); } .qa{ border-top:1px solid var(--border); } .qa details{ border-bottom:1px solid var(--border-hairline); } .qa summary{ cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr 20px; gap:16px; align-items:center; padding:16px 0; font-size:17px; font-weight:600; letter-spacing:-.2px; line-height:1.3; color:var(--heading); } .qa summary::-webkit-details-marker{ display:none; } .qa summary::after{ content:""; width:10px; height:10px; border-right:1.5px solid var(--heading); border-bottom:1.5px solid var(--heading); transform:rotate(45deg); transition:transform .2s; justify-self:center; margin-top:-5px; } .qa details[open] summary::after{ transform:rotate(-135deg); margin-top:5px; } .qa summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:2px; } .qa .a{ padding:0 0 18px; font-size:15px; line-height:1.55; color:var(--body); max-width:66ch; } .qa .a b{ color:var(--heading); } .qa .a a{ color:var(--accent-text); } .qa .a .tlink{ margin-top:8px; font-size:14.5px; } /* ================= 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; } /* ---------- reduced motion, the rest of the page: zero running animations, nothing lost ---------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration:0s !important; } .doors .door, .recgrid.is-in .rec, .who.is-in .who-scan, .who.is-in .wfig .fr::after, .moist.is-in .bar, .moist.is-in .wave, .moist.is-in .mk, .moist.is-in .mk-l{ animation:none !important; opacity:1; transform:none; } .who.is-in .wfig .fr::after{ transform:scaleX(1); } .who-scan, .who.is-in .who-scan{ display:none; } .moist.is-in .wave{ stroke-dasharray:none; stroke-dashoffset:0; } .door-media img, .gmedia img{ transition:none; } html{ scroll-behavior:auto; } } /* R1-SITE nav fix (23 Sep 2026): the settled IA made the desktop nav wrap to two lines. Single-line labels from 1320px (measured with Geist); the menu button carries the navigation up to 1319px (the band the capture already flagged as too tight). */ @media (min-width:1320px){ .masthead nav > a, .masthead .navitem > a{ white-space:nowrap; max-width:none; } .masthead nav{ gap:16px; font-size:13.5px; } .masthead .frame{ gap:12px; } } @media (min-width:1110px) and (max-width:1319px){ .masthead nav, .masthead .desktop-cta{ display:none !important; } .menu-button{ display:inline-flex !important; } .menu:not([hidden]){ display:block !important; } } /* ===================================================================================================== HOLVEM R3 FURNITURE (M5-R1, round R3, 28 Sep 2026) Masthead + mega menu + dropdowns, mobile menu, footer, the R3-S3 section-background system, the mineral edge band and the R3-S6 hero overlay component. HOW IT IS USED - apply.py inlines this file (plus grey-fix.css) into a page as