/* ── reset ─────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ background:var(--ground); color:var(--ice); font-family:var(--f-body); font-size:var(--t-body); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* clip, not hidden: `hidden` would turn into a scroll container and detach it from the viewport's scrolling box */ overflow-x:clip; } img,svg,video{ display:block; max-width:100%; } button,input{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; padding:0; } :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; } .u-sr{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ── shared primitives ─────────────────────────────────────────── */ .shell{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); } /* mono micro-label, with the reference's trailing hairline */ .kicker{ display:flex; align-items:center; gap:16px; font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300; letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-faint); } .kicker::after{ content:''; flex:1; height:1px; background:currentColor; opacity:.32; } .kicker--stub::after{ flex:0 0 clamp(40px,7vw,110px); } .title{ font-family:var(--f-display); font-weight:200; font-size:var(--t-h2); line-height:.98; letter-spacing:.012em; text-transform:uppercase; } .lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ice-soft); max-width:46ch; font-weight:300; } .lead--dark{ color:var(--ice-soft); } .mono{ font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300; letter-spacing:var(--track-mono); text-transform:uppercase; } /* ── reduced motion ──────────────────────────────────────────── Kill the looping decoration, but keep anything that *arrives* via an animation visible — otherwise the call transcript and the booking confirmation would never appear at all. */ @media (prefers-reduced-motion: reduce){ .stage__ripple, .scr__avatar::before, .scr__avatar::after, .scr__key--yes, .scr__wave i, .scr__label i, .scr__badge i, .hero__scroll i, .strip__track{ animation:none !important; } .stage__ripple{ opacity:0; } .scr__wave i{ height:52%; } .is-live .scr__log li, .is-live .scr__chip, .is-live .scr__booked{ animation:none !important; opacity:1; transform:none; } .strip__track{ transform:none; } *, *::before, *::after{ scroll-behavior:auto !important; } } /* ── small layout utilities ─────────────────────────────────────── These exist so index.html carries no style="" attributes. That is what lets the Content-Security-Policy set style-src 'self' with no 'unsafe-inline' — inline styles are a CSS-injection exfiltration route, and the policy is only as strong as its weakest directive. */ .u-mb-26 { margin-bottom:26px; } .u-mt-16 { margin-top:16px; } .u-mt-28 { margin-top:28px; } .u-mt-cta { margin-top:clamp(26px,3vw,40px); } .u-mt-band { margin-top:clamp(56px,7vw,104px); } .u-lead-gap{ margin:26px 0 clamp(30px,4vw,52px); } .u-centre { text-align:center; max-width:52ch; margin-inline:auto; } .u-jc-centre{ justify-content:center; } .u-stack-centre{ display:grid; justify-items:center; gap:inherit; } .u-ice { color:var(--ice); font-weight:400; } .u-signal { color:var(--signal); } .u-ghost { color:var(--ice-ghost); }