/* tokens.css */
@font-face { font-family:"Anton";   src:url("../assets/fonts/anton/Anton-Regular.woff2") format("woff2"),url("../assets/fonts/anton/Anton-Regular.ttf") format("truetype");      font-weight:400; font-display:swap}
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo/Archivo-Regular.woff2") format("woff2"),url("../assets/fonts/archivo/Archivo-Regular.ttf") format("truetype");  font-weight:400; font-display:swap}
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo/Archivo-Medium.woff2") format("woff2"),url("../assets/fonts/archivo/Archivo-Medium.ttf") format("truetype");   font-weight:500; font-display:swap}
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo/Archivo-SemiBold.woff2") format("woff2"),url("../assets/fonts/archivo/Archivo-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap}
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo/Archivo-Bold.woff2") format("woff2"),url("../assets/fonts/archivo/Archivo-Bold.ttf") format("truetype");     font-weight:700; font-display:swap}
@font-face { font-family:"Archivo"; src:url("../assets/fonts/archivo/Archivo-Black.woff2") format("woff2"),url("../assets/fonts/archivo/Archivo-Black.ttf") format("truetype");    font-weight:900; font-display:swap}
:root {
--ink: #000000;
--cyan: #05a8ec;
--cyan-ink: #0a76a4;
--pink: #d1006e;
--white: #ffffff;
--ink-050: #f8f8f8;
--ink-100: #e2e2e2;
--ink-400: #6e6e6e;
--ink-600: #5c5c5c;
--on-void: rgba(255,255,255,0.72);
--on-void-dim: rgba(255,255,255,0.44);
--void-line: rgba(255,255,255,0.14);
--cyan-press: #048ac2;
--pink-press: #c00d68;
--club-navy: #1b2a4a;
--club-indigo: #2f3f6b;
--club-cream: #f2ece0;
--club-mist: #a9c2d6;
--font-display: "Anton", "Arial Narrow", Impact, sans-serif;
--font-core: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--lh-display: 1.06;
--lh-body: 1.55;
--lh-heading: 1.25;
--measure: 60ch;
--track-eyebrow: 0.14em;
--fs-hero:      clamp(3.25rem, 1.1rem + 9.2vw, 8.25rem);
--fs-display-l: clamp(2.75rem, 1.1rem + 7.1vw, 6.5rem);
--fs-display-m: clamp(2.125rem, 1.2rem + 4.1vw, 4.5rem);
--fs-h2:        clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
--fs-h3:        clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
--fs-h4:        clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
--fs-body:      clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
--fs-small:     0.9375rem;
--fs-micro:     0.6875rem;
--fs-eyebrow:   clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
--fs-stat:      clamp(3rem, 1.4rem + 6.4vw, 6.25rem);
--fs-ghost:     clamp(7rem, 2rem + 22vw, 20rem);
--container: 1200px;
--gutter: clamp(20px, 3vw, 40px);
--inset: clamp(10px, 1.6vw, 28px);
--slab-pad-y: clamp(48px, 6vw, 104px);
--slab-pad-x: clamp(22px, 4vw, 72px);
--stack: clamp(14px, 1.6vw, 22px);
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
--s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
--r-1: 4px;
--r-2: 8px;
--r-3: 14px;
--r-slab: 24px;
--r-pill: 999px;
--hairline: 1px solid var(--ink-100);
--keyline: 2px;
--rule-heavy: 4px;
--offset-type: 4px;
--offset-chip: 8px;
--shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
--shadow-card-hover: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.12);
--cta-shadow: 7px 7px 0 var(--ink);
--cta-shadow-press: 2px 2px 0 var(--ink);
--t-colour: 120ms;
--t-move: 180ms;
--t-max: 320ms;
--t-slab: 420ms;
--ease: cubic-bezier(.2,0,.2,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--marquee-loop: 32s;
--header-h: 92px;
--utility-h: 34px;
--header-gap: 10px;
--chrome-h: calc(var(--header-h) + var(--utility-h) + var(--header-gap));
--focus-ring: 0 0 0 3px var(--cyan);
--focus-offset: 2px;
--void-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
@media (max-width: 833px) { :root { --header-h: 62px; --lh-display: 1.08} }
/* app.css */
*,*::before,*::after { box-sizing: border-box}
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); overflow-x:clip}
body {
margin:0;
font-family:var(--font-core);
font-size:var(--fs-body);
line-height:var(--lh-body);
color:var(--white);
background:var(--ink);
-webkit-font-smoothing:antialiased;
overflow-x:clip}
body::before {
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background-image:var(--void-tooth); background-size:180px 180px; opacity:.05}
body > * { position:relative; z-index:1}
img,svg,video { display:block; max-width:100%}
button,input,select,textarea { font:inherit; color:inherit}
:focus-visible { outline:none; box-shadow:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:var(--r-1)}
.stack { display:flex; flex-direction:column; gap:0; padding:0}
.stack > .vp:first-child > .slab,
.stack > .slab:first-child { padding-top:var(--chrome-h)}
.slab {
--slab-bg: var(--white);
--slab-fg: var(--ink);
position:relative;
margin-inline:0;
background:var(--slab-bg);
color:var(--slab-fg);
border-radius:0;
overflow:hidden;
isolation:isolate}
.slab__in {
position:relative; z-index:2;
max-width:var(--container);
margin-inline:auto;
padding:var(--slab-pad-y) var(--slab-pad-x)}
.slab__in--flush { padding-inline:0}
.slab--tight .slab__in { padding-block:clamp(32px,4vw,64px)}
.slab--flush .slab__in { padding:0; max-width:none}
.s-white  { --slab-bg:var(--white);    --slab-fg:var(--ink)}
.s-sunken { --slab-bg:var(--ink-050);  --slab-fg:var(--ink)}
.s-cyan   { --slab-bg:var(--cyan);     --slab-fg:var(--ink)}
.s-pink   { --slab-bg:var(--pink);     --slab-fg:var(--white)}
.s-void   { --slab-bg:transparent;     --slab-fg:var(--white)}
.s-void   { border-radius:0}
.slab p { color:color-mix(in srgb, currentColor 72%, transparent); max-width:var(--measure)}
.slab a:not(.btn):not(.card):not(.spray-cta) { color:inherit}
.foam { display:none}
h1,h2,h3,.display-hero,.display-l,.display-m {
font-family:var(--font-display); font-weight:400;
line-height:var(--lh-display); letter-spacing:-.01em;
text-transform:uppercase; margin:0}
.display-hero { font-size:var(--fs-hero)}
.display-l { font-size:var(--fs-display-l)}
.display-m { font-size:var(--fs-display-m)}
h2 { font-size:var(--fs-h2)}
h3 { font-size:var(--fs-h3)}
h4,h5,h6 { line-height:var(--lh-heading)}
h4 { font-size:var(--fs-h4)}
.eyebrow {
font-family:var(--font-core); font-size:var(--fs-eyebrow); font-weight:700;
letter-spacing:var(--track-eyebrow); text-transform:uppercase;
margin:0 0 var(--s-4); display:flex; align-items:center; gap:10px;
color:var(--cyan)}
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; flex:none}
.eyebrow--pink{color:var(--pink)} .eyebrow--ink{color:var(--ink)} .eyebrow--white{color:var(--white)}
.lede { font-size:clamp(1.0625rem,1rem+.45vw,1.3125rem); line-height:1.5; max-width:var(--measure); margin:var(--s-5) 0 0}
.tight { max-width:44ch}
.hl-cyan{color:var(--cyan)} .hl-pink{color:var(--pink)}
.ast{font-size:.45em; vertical-align:super}
.head { margin-bottom:var(--s-8)}
.head p { margin-top:var(--s-4)}
.head--center { text-align:center}
.head--center .eyebrow { justify-content:center}
.head--center .eyebrow::after { content:""; width:22px; height:2px; background:currentColor; flex:none}
.head--center .lede { margin-inline:auto}
.ghost {
position:absolute; z-index:1; pointer-events:none; user-select:none;
font-family:var(--font-display); font-size:var(--fs-ghost); line-height:.75;
color:rgba(0,0,0,.045); letter-spacing:-.04em}
.s-pink .ghost, .s-void .ghost, .s-cyan .ghost { color:rgba(255,255,255,.12)}
.s-cyan .ghost { color:rgba(0,0,0,.07)}
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
padding:16px var(--s-6); border-radius:var(--r-pill); border:0;
font-family:var(--font-core);
font-weight:700; font-size:var(--fs-small); letter-spacing:.03em; text-transform:uppercase;
text-decoration:none; cursor:pointer; white-space:nowrap;
transform:none;
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.btn:hover, .btn:focus-visible { transform:translate(-2px,-2px); box-shadow:var(--cta-shadow)}
.btn:active { transform:translate(1px,1px); box-shadow:var(--cta-shadow-press)}
.btn--pink { background:var(--pink); color:var(--white)}
.btn--cyan { background:var(--cyan); color:var(--ink)}
.btn--ink { background:var(--ink); color:var(--white)}
.btn--white { background:var(--white); color:var(--ink)}
.btn--outline { background:transparent; color:currentColor; box-shadow:inset 0 0 0 var(--keyline) currentColor}
.btn--outline:hover, .btn--outline:focus-visible { box-shadow:inset 0 0 0 var(--keyline) currentColor, var(--cta-shadow)}
.btn--outline:active { box-shadow:inset 0 0 0 var(--keyline) currentColor, var(--cta-shadow-press)}
.s-void, .s-pink, .footer, .calc__out {
--cta-shadow: 7px 7px 0 var(--cyan);
--cta-shadow-press: 2px 2px 0 var(--cyan)}
.btn--lg { padding:20px var(--s-7); font-size:1rem}
.btn--block { width:100%}
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7)}
.badge {
display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-pill);
font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
background:var(--ink); color:var(--white)}
.badge--cyan{background:var(--cyan);color:var(--ink)}
.badge--pink{background:var(--pink);color:var(--white)}
.badge--white{background:var(--white);color:var(--ink)}
.utility {
background:var(--cyan); color:var(--ink); height:var(--utility-h);
display:flex; align-items:center; justify-content:center; text-align:center;
font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding-inline:var(--gutter);
overflow:hidden; transition:height .4s var(--ease), opacity .3s var(--ease)}
.utility a { color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(0,0,0,.4)}
.topnav { position:fixed; inset:0 0 auto 0; z-index:60; pointer-events:none}
.topnav__bar {
pointer-events:auto;
background:var(--cyan); color:var(--ink); height:var(--utility-h);
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
padding-inline:var(--gutter); overflow:hidden;
transition:height .4s var(--ease), opacity .3s var(--ease)}
.topnav__bar a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.4)}
.topnav__pill {
pointer-events:auto;
display:flex; align-items:center; justify-content:space-between;
gap:clamp(16px,2.4vw,40px);
height:var(--header-h);
width:100%; max-width:none;
padding-inline:max(var(--slab-pad-x), calc((100% - var(--container)) / 2 + var(--slab-pad-x)));
background:transparent; color:var(--ink);
transition:height .45s var(--ease), background-color .3s var(--ease)}
.topnav__links { display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); min-width:0; margin-right:auto}
.topnav__logo { display:block; text-decoration:none}
.topnav__actions { display:flex; align-items:center; gap:clamp(12px,1.5vw,22px)}
.topnav__link {
color:inherit; text-decoration:none; font-size:var(--fs-small); font-weight:600;
position:relative; padding-block:6px; white-space:nowrap;
transition:color var(--t-colour) var(--ease)}
.topnav__link::before {
content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
background:var(--pink); transform:scaleX(0); transform-origin:left;
transition:transform var(--t-max) var(--ease)}
.topnav__link:hover::before, .topnav__link[aria-current="page"]::before { transform:scaleX(1)}
.topnav__link:hover { color:var(--pink)}
.burger span { background:currentColor}
.header__phone {
color:var(--ink); background:var(--cyan); text-decoration:none;
font-weight:700; font-size:var(--fs-small); white-space:nowrap;
padding:10px 18px; border-radius:var(--r-pill);
animation:phonepulse 2.4s ease-out infinite}
.header__phone:hover { background:var(--cyan-press); color:var(--ink)}
@keyframes phonepulse {
0% { box-shadow:0 0 0 0 rgba(5,168,236,.55)}
70%,100% { box-shadow:0 0 0 12px rgba(5,168,236,0)}
}
.phone-ring { display:inline-flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:inherit}
.phone-ring svg { width:clamp(112px,11vw,148px); height:auto; overflow:visible}
.phone-ring__spin { transform-origin:60px 60px; animation:ringspin 16s linear infinite}
.phone-ring:hover .phone-ring__spin { animation-duration:6s}
.phone-ring text { font-family:var(--font-core); font-size:11.5px; font-weight:700; letter-spacing:.14em; fill:var(--pink)}
.phone-ring__num { font-family:var(--font-display); font-size:1.375rem; letter-spacing:.02em; text-decoration:none}
@keyframes ringspin { to { transform:rotate(360deg)} }
.topnav .logo-chip {
background:none; box-shadow:none; border-radius:0; padding:0;
width:auto; height:86px; transform:none;
transition:height .45s var(--ease), transform var(--t-move) var(--ease)}
.topnav .logo-chip img { height:100%; width:auto}
.topnav .topnav__logo:hover .logo-chip { transform:rotate(-2deg)}
.topnav.is-scrolled .topnav__bar { height:0; opacity:0}
.topnav.is-scrolled .topnav__pill {
height:62px;
background:var(--white); color:var(--ink);
border-radius:0; box-shadow:none;
border-bottom:1px solid rgba(0,0,0,.08)}
.topnav.is-scrolled .logo-chip { height:50px}
@media (max-width:1079px){
.topnav__links { display:none}
.topnav__actions .topnav__link { display:none}
.topnav__pill { justify-content:space-between}
.topnav .burger { display:flex}
}
@media (max-width:767px){
.topnav__bar .u-long { display:none}
.topnav__actions > .btn { display:none}
}
.burger { display:none; width:44px; height:44px; background:transparent; border:0; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px}
.burger span { width:22px; height:2px; background:var(--white); transition:transform var(--t-move) var(--ease), opacity var(--t-colour) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav { position:fixed; inset:var(--chrome-h) 0 0 0; background:var(--ink); z-index:55; padding:var(--s-7) var(--gutter); display:none; flex-direction:column; gap:var(--s-2); overflow-y:auto}
.mobile-nav.is-open { display:flex}
.mobile-nav a { color:var(--white); text-decoration:none; font-family:var(--font-display); font-size:2.25rem; text-transform:uppercase; padding-block:var(--s-3); border-bottom:1px solid var(--void-line)}
.mobile-nav .btn { margin-top:var(--s-5)}
@media (max-width:1079px){ .nav,.header__phone{display:none} .burger{display:flex} }
.hero { position:relative}
.hero__grid { display:grid; grid-template-columns:1.06fr .94fr; gap:var(--s-7); align-items:center}
.hero h1 { margin-top:var(--s-5)}
.hero__lede { max-width:40ch}
.hero__art { position:relative; justify-self:end; width:100%}
.hero__foamie { width:100%; will-change:transform}
@media (max-width:1023px){
.hero__grid { grid-template-columns:1fr}
.hero__art { max-width:440px; justify-self:center}
}
.trust {
display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); list-style:none; padding:var(--s-5) 0 0; margin:var(--s-6) 0 0;
border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:color-mix(in srgb, currentColor 62%, transparent)}
.trust li { display:flex; align-items:center; gap:8px}
.trust li::before { content:""; width:6px; height:6px; background:var(--pink); border-radius:50%; flex:none}
.scrub { position:relative; aspect-ratio:800/520; border-radius:var(--r-3); overflow:hidden; background:var(--ink); touch-action:pan-y; user-select:none; cursor:ew-resize}
.scrub__layer svg { width:100%; height:100%}
.scrub svg { display:block; width:100%; height:auto}
.scrub__layer { position:absolute; inset:0}
.scrub__layer--after { clip-path:inset(0 0 0 var(--pos,50%))}
.scrub__bar { position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:var(--white); z-index:8; pointer-events:none}
.scrub__knob {
position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%); z-index:6;
width:56px; height:56px; border-radius:50%; background:var(--white); color:var(--ink); z-index:9;
display:grid; place-items:center; font-size:14px; font-weight:900; letter-spacing:.06em;
box-shadow:0 0 0 4px rgba(0,0,0,.25); pointer-events:none}
.scrub__tag {
position:absolute; top:16px; z-index:6; padding:7px 14px; border-radius:var(--r-pill);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase}
.scrub__tag--before { left:16px; background:var(--pink); color:var(--white)}
.scrub__tag--after  { right:16px; background:var(--cyan); color:var(--ink)}
.calc { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center}
@media (max-width:899px){ .calc{grid-template-columns:1fr; gap:var(--s-7)} }
.calc__controls { display:flex; flex-direction:column; gap:var(--s-6)}
.slider label { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; margin-bottom:var(--s-3)}
.slider output { font-family:var(--font-display); font-size:1.5rem; letter-spacing:0}
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:rgba(0,0,0,.18); border-radius:2px; outline:none}
.s-pink input[type=range], .s-void input[type=range] { background:rgba(255,255,255,.24)}
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--ink); cursor:grab; border:3px solid var(--white)}
input[type=range]::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:var(--ink); cursor:grab; border:3px solid var(--white)}
.calc__out { text-align:center; padding:var(--s-7) var(--s-5); border-radius:var(--r-3); background:var(--ink); color:var(--white)}
.calc__money { font-family:var(--font-display); font-size:var(--fs-stat); line-height:.9; color:var(--cyan); display:block; font-variant-numeric:tabular-nums}
.calc__sub { font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--on-void); margin-top:var(--s-3)}
.era { border:0; padding:0; margin:0; min-width:0}
.era__legend { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); width:100%; padding:0; margin-bottom:var(--s-3); font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase}
.era__opts { display:flex; gap:6px; flex-wrap:wrap}
.era__opt { position:relative; flex:1}
.era__opt input { position:absolute; inset:0; opacity:0; cursor:pointer}
.era__pill {
display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 11px 6px 9px; white-space:nowrap;
border:2px solid rgba(0,0,0,.3); border-radius:var(--r-pill);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
cursor:pointer; user-select:none;
transition:background var(--t-colour) var(--ease), color var(--t-colour) var(--ease),
border-color var(--t-colour) var(--ease), transform var(--t-move) var(--ease),
box-shadow var(--t-move) var(--ease)}
.era__pill svg { width:20px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.era__leak { opacity:.9}
.era__opt:hover .era__pill { border-color:var(--ink); transform:translateY(-2px)}
.era__opt input:checked + .era__pill {
background:var(--ink); border-color:var(--ink); color:var(--white);
transform:translateY(-2px); box-shadow:4px 4px 0 rgba(0,0,0,.28)}
.era__opt input:checked + .era__pill .era__leak { stroke:var(--cyan); animation:era-leak 1.1s var(--ease) infinite alternate}
.era__opt input:focus-visible + .era__pill { outline:3px solid var(--ink); outline-offset:2px}
@keyframes era-leak { from { transform:translateY(0); opacity:.55} to { transform:translateY(-1.6px); opacity:1} }
.calc__out { position:relative}
@media (min-width:1024px) and (min-height:620px) {
.calc__out {
transform:rotate(-1.2deg); transform-origin:50% -120px;
translate:0 var(--drop, 0px); scale:var(--grow, 1); will-change:translate, scale;
transition:translate 180ms linear, scale 180ms linear}
.calc__out.is-hung { animation:calc-sway 5s ease-in-out infinite alternate}
.calc__out::before {
content:""; position:absolute; bottom:100%; left:50%; margin-left:-1.5px;
width:3px; height:100vh;
background:repeating-linear-gradient(180deg, var(--ink) 0 7px, rgba(0,0,0,.5) 7px 14px)}
.calc__out::after {
content:""; position:absolute; top:-9px; left:50%; margin-left:-9px;
width:18px; height:18px; border-radius:50%;
background:var(--ink-050); border:4px solid var(--ink)}
}
@keyframes calc-sway {
from { transform:rotate(-1.2deg)}
to   { transform:rotate(2.2deg)}
}
.calc__label {
display:inline-block; background:var(--white); color:var(--ink);
padding:7px 16px; border-radius:var(--r-pill);
font-size:var(--fs-micro); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
margin:0 0 var(--s-4)}
.calc__out .calc__label { color:var(--ink)}
.calc__out .btn { --cta-shadow:7px 7px 0 var(--white); --cta-shadow-press:2px 2px 0 var(--white)}
.calc__per {
display:block; margin-top:var(--s-2);
font-size:0.75rem; letter-spacing:.04em; line-height:1.4;
color:rgba(255,255,255,.62)}
.calc__out .calc__sub {
border-top:1px dashed rgba(255,255,255,.28); padding-top:var(--s-4); margin-top:var(--s-4);
display:flex; justify-content:center; align-items:baseline;
font-size:0.6875rem; letter-spacing:.14em; line-height:1.5;
color:var(--pink); font-weight:700}
.calc__out .calc__sub b { font-weight:700; color:var(--white); margin-left:.35em; font-variant-numeric:tabular-nums}
.calc__sep { width:4px; height:4px; border-radius:50%; background:var(--pink); margin:0 10px; align-self:center; flex:none}
.calc__fine {
margin:14px auto 0; max-width:36ch;
font-size:0.6875rem; line-height:1.55; letter-spacing:.015em;
color:rgba(255,255,255,.48)}
.chip-figure {
--chip: var(--cyan);
background:var(--chip); border-radius:var(--r-slab); padding:var(--s-5);
box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--ink);
transform:rotate(-2.5deg);
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.chip-figure--pink{--chip:var(--pink)} .chip-figure--white{--chip:var(--white)}
.chip-figure--r{transform:rotate(2.5deg)}
.chip-figure:hover { transform:rotate(0deg) translateY(-4px); box-shadow:12px 12px 0 var(--ink)}
.chip-figure img { width:100%}
.s-void .chip-figure { box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--white)}
.s-void .chip-figure:hover { box-shadow:12px 12px 0 var(--white)}
.sticker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s-6)}
.sticker { text-align:center}
.sticker h3 { font-family:var(--font-core); font-weight:700; font-size:var(--fs-h4); text-transform:none; letter-spacing:0; margin:var(--s-5) 0 4px}
.sticker p { font-size:var(--fs-small); margin:0 auto; max-width:24ch}
.wall { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0}
.wallcard { position:relative; padding:var(--s-7) var(--s-6); border-top:2px solid; border-color:color-mix(in srgb, currentColor 18%, transparent); overflow:hidden; transition:background-color var(--t-colour) var(--ease)}
.wallcard:hover { background:color-mix(in srgb, currentColor 6%, transparent)}
.wallcard__n { font-family:var(--font-display); font-size:clamp(3.5rem,6vw,5.5rem); line-height:.8; color:var(--cyan); display:block}
.s-cyan .wallcard__n { color:var(--ink)}
.wallcard h3 { font-family:var(--font-core); font-weight:700; font-size:var(--fs-h4); text-transform:none; letter-spacing:0; margin:var(--s-5) 0 var(--s-2)}
.wallcard p { font-size:var(--fs-small); margin:0}
.data { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-7) var(--s-6)}
.datum__v { font-family:var(--font-display); font-size:var(--fs-stat); line-height:.85; display:block; font-variant-numeric:tabular-nums}
.datum h3 { font-family:var(--font-core); font-weight:700; font-size:var(--fs-h4); text-transform:none; letter-spacing:0; margin:var(--s-4) 0 var(--s-2)}
.datum p { font-size:var(--fs-small); margin:0; max-width:24ch}
.promise { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:var(--s-6) var(--s-5)}
.promise__i { border-left:var(--rule-heavy) solid var(--pink); padding-left:var(--s-5)}
.s-pink .promise__i { border-color:var(--white)}
.promise__i h3 { font-family:var(--font-core); font-weight:700; font-size:var(--fs-h4); text-transform:none; letter-spacing:0; margin:0 0 var(--s-2)}
.promise__i p { font-size:var(--fs-small); margin:0}
.promise--duo { grid-template-columns:repeat(2,1fr)}
@media (max-width:599px){ .promise--duo{grid-template-columns:1fr} }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-5)}
.card {
display:flex; flex-direction:column; background:var(--white); color:var(--ink);
border-radius:var(--r-3); overflow:hidden; text-decoration:none;
box-shadow:var(--shadow-card);
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.s-white .card, .s-sunken .card { box-shadow:0 0 0 1px var(--ink-100)}
.card:hover, .card:focus-visible { transform:translate(-4px,-4px); box-shadow:0 0 0 1px var(--ink), var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.card:focus-visible { box-shadow:var(--focus-ring), var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.card:active { transform:translate(-1px,-1px); box-shadow:0 0 0 1px var(--ink), 3px 3px 0 var(--ink)}
.s-void .card:hover, .s-pink .card:hover { box-shadow:0 0 0 1px var(--cyan), var(--offset-chip) var(--offset-chip) 0 var(--cyan)}
.card:hover .card__go, .card:focus-visible .card__go { background:var(--ink); color:var(--white)}
.card:hover .card__go span, .card:focus-visible .card__go span { transform:translateX(4px)}
.card__media { aspect-ratio:4/3; background:var(--ink-050); overflow:hidden; position:relative; border-bottom:var(--keyline) solid var(--ink)}
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-max) var(--ease-out)}
.card:hover .card__media img, .card:focus-visible .card__media img { transform:scale(1.05)}
.card__body { padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-2); flex:1}
.card h3 { font-family:var(--font-core); font-weight:700; font-size:var(--fs-h4); text-transform:none; letter-spacing:0}
.card p { font-size:var(--fs-small); margin:0; flex:1; color:var(--ink-600)}
.card__go {
align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
margin-top:var(--s-3); padding:10px 18px; border-radius:var(--r-pill);
box-shadow:inset 0 0 0 var(--keyline) var(--ink);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
transition:background var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.card__go span { transition:transform var(--t-move) var(--ease)}
.marquee { overflow:hidden; padding-block:clamp(18px,1.7vw,26px); background:var(--ink); color:var(--white)}
.marquee--cyan { background:var(--cyan); color:var(--ink)}
.marquee__track { display:flex; width:max-content; animation:marquee var(--marquee-loop) linear infinite}
.marquee__g { display:flex; align-items:center; gap:var(--s-6); padding-right:var(--s-6); font-family:var(--font-display); font-size:clamp(1.125rem, 0.8rem + 1vw, 1.75rem); line-height:1.1; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap}
.marquee__g span::after { content:"•"; color:var(--cyan); margin-left:var(--s-6)}
.marquee--cyan .marquee__g span::after { color:var(--white)}
@keyframes marquee { to { transform:translateX(-50%)} }
.swipe {
display:grid; grid-auto-flow:column; grid-auto-columns:clamp(264px,27vw,344px); gap:var(--s-5);
overflow-x:auto; scroll-snap-type:x mandatory;
padding:10px var(--slab-pad-x) var(--s-5) 10px;
margin:-10px calc(var(--slab-pad-x) * -1) 0 -10px;
scroll-padding-left:10px;
scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe > * { scroll-snap-align:start}
.rail { height:var(--rule-heavy); background:color-mix(in srgb, currentColor 14%, transparent); position:relative; margin-top:var(--s-4)}
.rail__bar { position:absolute; inset-block:0; left:0; background:var(--pink); transition:width var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.hint { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4); font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; margin-top:var(--s-3); opacity:.62}
.s-cyan .card { box-shadow:none}
.s-cyan .card:hover { box-shadow:0 0 0 1px var(--ink), var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.swipe-nav { display:flex; justify-content:center; gap:var(--s-4); margin-top:var(--s-4)}
.swipe-nav__b {
width:56px; height:56px; border-radius:50%; border:0; padding:0; cursor:pointer;
background:var(--white); color:var(--ink);
box-shadow:inset 0 0 0 var(--keyline) var(--ink), 4px 4px 0 var(--ink);
font-size:22px; font-weight:700; line-height:1; display:grid; place-items:center;
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease), opacity var(--t-colour) var(--ease)}
.swipe-nav__b--prev { transform:rotate(-8deg)}
.swipe-nav__b--next { transform:rotate(8deg)}
.swipe-nav__b:hover { transform:rotate(0deg) translate(-2px,-2px); box-shadow:inset 0 0 0 var(--keyline) var(--ink), 7px 7px 0 var(--ink)}
.swipe-nav__b:active { transform:rotate(0deg) translate(1px,1px); box-shadow:inset 0 0 0 var(--keyline) var(--ink), 2px 2px 0 var(--ink)}
.swipe-nav__b.is-off { opacity:.35; pointer-events:none}
.acc { border-top:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.acc__i { border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.acc__b { width:100%; background:none; border:0; text-align:left; padding:var(--s-5) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); cursor:pointer; font-size:var(--fs-h4); font-weight:700; color:inherit; transition:color var(--t-colour) var(--ease)}
.acc__b:hover { color:var(--pink)}
.s-pink .acc__b:hover { color:var(--ink)}
.acc__s { flex:none; width:22px; height:22px; position:relative; transition:transform var(--t-move) var(--ease)}
.acc__s::before,.acc__s::after { content:""; position:absolute; background:currentColor; border-radius:1px}
.acc__s::before { inset:10px 0; height:2px}
.acc__s::after { inset:0 10px; width:2px}
.acc__b[aria-expanded="true"] .acc__s { transform:rotate(45deg)}
.acc__p { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-max) var(--ease)}
.acc__p[data-open="true"] { grid-template-rows:1fr}
.acc__p > div { overflow:hidden}
.acc__p p { margin:0 0 var(--s-5)}
.s-cyan .acc { border-top-color:rgba(0,0,0,.26)}
.s-cyan .acc__i { border-bottom-color:rgba(0,0,0,.26)}
.s-cyan .acc__b:hover { color:var(--white)}
.s-cyan .acc__p p { color:rgba(0,0,0,.74)}
.s-cyan .acc__p strong { color:var(--ink)}
.faq-link { font-weight:700; color:var(--white); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
.faq-link:hover { color:var(--ink)}
.faq-slab .lede { color:rgba(0,0,0,.74)}
.faq-slab .faq-foamie { filter:drop-shadow(0 12px 28px rgba(0,0,0,.18))}
.faq-slab .slab__in { padding-block:var(--slab-pad-y)}
.faq-slab { --cta-shadow:7px 7px 0 var(--pink); --cta-shadow-press:2px 2px 0 var(--pink)}
.faq-slab { overflow:clip}
@media (min-width:900px){
.faq-aside {
position:sticky;
top:calc(var(--chrome-h) + var(--s-5));
align-self:start}
.faq-slab .acc { --acc-pad:clamp(22px,2.5vw,32px)}
.faq-slab .acc__b { padding-block:var(--acc-pad)}
.faq-slab .acc { margin-top:calc(var(--acc-pad) * -1)}
}
.mscroll { overflow-x:auto; margin-inline:calc(var(--slab-pad-x) * -1); padding-inline:var(--slab-pad-x)}
.matrix { border-collapse:collapse; width:100%; min-width:800px; font-size:var(--fs-small)}
.matrix th,.matrix td { text-align:left; padding:var(--s-4); border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent); vertical-align:top}
.matrix thead th { font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; border-bottom:3px solid currentColor}
.matrix tbody th { font-weight:700; font-size:var(--fs-micro); letter-spacing:var(--track-eyebrow); text-transform:uppercase; width:150px; opacity:.6}
.matrix .win { color:var(--pink); font-weight:700}
.matrix .go { color:var(--pink); font-weight:700; text-decoration:none}
.matrix .go:hover { text-decoration:underline}
.field { display:flex; flex-direction:column; gap:6px}
.field label { font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; opacity:.66}
.field input,.field select,.field textarea {
width:100%; padding:15px var(--s-4); border:var(--keyline) solid var(--ink-100);
border-radius:var(--r-2); background:var(--white); color:var(--ink);
transition:border-color var(--t-colour) var(--ease)}
.field input:hover,.field select:hover { border-color:var(--ink-400)}
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--ink); box-shadow:var(--focus-ring); outline-offset:var(--focus-offset)}
.field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
.form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-4)}
.form-grid > .field { min-width:0}
.form-grid .span-2 { grid-column:1/-1}
@media (max-width:599px){ .form-grid{grid-template-columns:1fr} }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.45; opacity:.75}
.consent input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--cyan); flex:none}
.panel { background:var(--white); color:var(--ink); border-radius:var(--r-3); padding:clamp(24px,3vw,40px); box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--cyan)}
.panel--pink { box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--pink)}
.panel p { color:var(--ink-600)}
.form-note { font-size:12px; text-align:center; margin:var(--s-3) 0 0; opacity:.7}
.chips { display:flex; flex-wrap:wrap; gap:var(--s-2)}
.chip { position:relative}
.chip input { position:absolute; opacity:0; inset:0; cursor:pointer}
.chip span { display:block; padding:10px var(--s-4); border-radius:var(--r-pill); box-shadow:inset 0 0 0 var(--keyline) var(--ink-100); font-size:var(--fs-small); font-weight:600; cursor:pointer; transition:background-color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.chip input:hover + span { box-shadow:inset 0 0 0 var(--keyline) var(--ink)}
.chip input:checked + span { background:var(--ink); color:var(--white); box-shadow:inset 0 0 0 var(--keyline) var(--ink)}
.chip input:focus-visible + span { box-shadow:var(--focus-ring)}
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s-8); align-items:center}
.split--start { align-items:start}
.split--wide { grid-template-columns:1.12fr .88fr}
@media (max-width:899px){ .split--wide{grid-template-columns:1fr} }
.shot { position:relative; border-radius:var(--r-3); overflow:hidden; background:var(--ink-050)}
.shot img { width:100%; height:auto; display:block}
.shot--fill { height:100%}
.shot--fill img { height:100%; object-fit:cover}
.band { position:relative; overflow:hidden}
.band img { width:100%; height:clamp(280px,42vw,560px); object-fit:cover}
.band__over { position:absolute; inset:auto 0 0 0; padding:var(--s-8) var(--slab-pad-x) var(--s-7); background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0)); color:var(--white)}
.band__over .in { max-width:var(--container); margin-inline:auto}
.ph {
border:2px dashed var(--cyan); border-radius:var(--r-3); background:rgba(5,168,236,.07);
display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
gap:8px; padding:var(--s-6); min-height:190px; color:var(--cyan)}
.ph__l { font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase}
.ph__b { font-size:12px; max-width:34ch; line-height:1.45; color:color-mix(in srgb, currentColor 62%, transparent)}
.s-void .ph__b, .s-pink .ph__b { color:var(--on-void)}
.ph--4x3{aspect-ratio:4/3} .ph--16x9{aspect-ratio:16/9} .ph--1x1{aspect-ratio:1/1} .ph--3x4{aspect-ratio:3/4}
.sticky-cta {
position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:45;
display:flex; flex-direction:column; align-items:flex-end;
background:none; border:0; padding:0; cursor:pointer;
opacity:0; transform:translateY(14px); pointer-events:none;
transition:opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.sticky-cta.is-shown { opacity:1; transform:none; pointer-events:auto}
.sticky-cta__say {
position:absolute; right:0; bottom:calc(100% - 16px);
width:clamp(228px,22vw,292px);
opacity:0; transform:translateY(12px) scale(.94);
transform-origin:bottom right; pointer-events:none;
transition:opacity .26s var(--ease), transform .32s var(--ease-out)}
.sticky-cta:hover .sticky-cta__say,
.sticky-cta:focus-visible .sticky-cta__say {
opacity:1; transform:none;
animation:ctabob 3.2s var(--ease) .32s infinite}
.sticky-cta.is-shown .sticky-cta__say,
.sticky-cta:hover .sticky-cta__say { pointer-events:auto}
@media (hover:none) {
.sticky-cta__say { opacity:1; transform:none; animation:none}
}
.sticky-cta__cloudsvg { display:block; width:100%; height:auto; overflow:visible}
.cloud-rim  { fill:var(--ink); stroke:var(--ink); stroke-width:7; stroke-linejoin:round}
.cloud-fill { fill:var(--white)}
.sticky-cta__cloudtext {
position:absolute; left:0; right:0; top:4%; height:72%;
display:grid; place-content:center; text-align:center;
padding-inline:12%;
color:var(--ink); font-size:clamp(.8125rem,1vw,1rem); font-weight:700;
line-height:1.2; letter-spacing:.03em; text-transform:uppercase}
.sticky-cta__cloudtext > span { display:block; white-space:nowrap}
.sticky-cta__cloudtext b { color:var(--pink)}
.sticky-cta__mascot {
width:clamp(84px,8vw,116px); height:auto; display:block;
filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
transform-origin:bottom center;
transition:transform var(--t-max) var(--ease-out)}
.sticky-cta:hover .sticky-cta__mascot { transform:translateY(-9px) rotate(-5deg)}
.sticky-cta:focus-visible .sticky-cta__cloudsvg { outline:3px solid var(--cyan); outline-offset:2px; border-radius:20px}
@keyframes ctabob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.sticky-cta__mascot {
width:clamp(84px,8vw,116px); height:auto; display:block;
filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
transform-origin:bottom center;
transition:transform var(--t-max) var(--ease-out)}
.drawer-scrim { position:fixed; inset:0; background:rgba(0,0,0,.62); opacity:0; pointer-events:none; z-index:70; transition:opacity var(--t-move) var(--ease)}
.drawer-scrim.is-open { opacity:1; pointer-events:auto}
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--white); color:var(--ink); z-index:75; transform:translateX(100%); transition:transform var(--t-max) var(--ease); overflow-y:auto; padding:var(--s-7) var(--s-6) var(--s-8)}
.drawer.is-open { transform:none}
.drawer p { color:var(--ink-600)}
.drawer__x { position:absolute; top:var(--s-4); right:var(--s-4); width:40px; height:40px; border-radius:50%; border:0; background:var(--ink-050); cursor:pointer; font-size:20px; line-height:1; transition:background-color var(--t-colour) var(--ease)}
.drawer__x:hover { background:var(--ink-100)}
@media (max-width:767px){
.sticky-cta { right:12px; bottom:12px}
.sticky-cta__mascot { width:74px}
.sticky-cta__say { width:190px}
.sticky-cta__cloudtext { font-size:12px}
.drawer { width:100%}
}
.footer {
position:relative;
padding:clamp(48px,5vw,72px) 0 var(--s-5);
isolation:isolate}
.footer::after {
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(110% 74% at 6% 0%, rgba(5,168,236,.13), transparent 60%)}
.footer .in {
position:relative; z-index:1;
max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.footer .in::after {
content:"iFOAM"; position:absolute; right:-.02em; bottom:0; z-index:-1;
font-family:var(--font-display); font-size:clamp(4rem,10vw,9.5rem); line-height:.72;
letter-spacing:-.012em; color:rgba(255,255,255,.026);
pointer-events:none; user-select:none; -webkit-user-select:none}
.footer__grid { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:var(--s-6) var(--s-6); align-items:start}
.footer .logo-chip--flat { transition:transform var(--t-move) var(--ease-out)}
.footer .logo:hover .logo-chip--flat { transform:translateY(-3px) rotate(-1.5deg)}
.footer__grid > div:first-child > p:first-of-type {
font-size:var(--fs-body) !important; line-height:1.5;
color:rgba(255,255,255,.82); max-width:30ch !important}
.footer__grid > div:first-child > p:last-of-type {
display:inline-block; margin-top:var(--s-4) !important;
padding:14px 20px 16px; border-radius:var(--r-3);
border:2px solid var(--void-line); background:rgba(255,255,255,.035);
line-height:1.5; color:var(--on-void);
transition:border-color var(--t-move) var(--ease), background-color var(--t-move) var(--ease), transform var(--t-move) var(--ease-out)}
.footer__grid > div:first-child > p:last-of-type:hover {
border-color:var(--cyan); background:rgba(5,168,236,.08); transform:translateY(-2px)}
.footer a[href^="tel:"] {
font-family:var(--font-display); font-size:1.5rem; letter-spacing:.01em;
display:inline-block; margin-top:8px;
transition:color var(--t-colour) var(--ease)}
.footer a[href^="tel:"]:hover { color:var(--white) !important}
.footer .footer-wordmark {
display:block; margin-top:10px;
font-family:var(--font-display); color:var(--white);
font-size:1.0625rem; font-weight:800; line-height:1.1; letter-spacing:.01em}
.footer .footer-wordmark sup {
font-size:.52em; vertical-align:super; font-weight:700; margin-left:1px}
.footer .footer-wordmark > span {
display:block; margin-top:3px;
font-family:var(--font-core);
font-size:var(--fs-micro); font-weight:600; line-height:var(--lh-heading);
letter-spacing:var(--track-eyebrow); text-transform:uppercase;
color:var(--on-void)}
.footer .logo:hover .footer-logo { transform:translateY(-3px)}
.footer .footer-logo { transition:transform var(--t-move) var(--ease-out)}
.footer .footer__k {
position:relative; font-size:var(--fs-micro); font-weight:800; line-height:var(--lh-heading);
letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--cyan);
margin:0 0 var(--s-5); padding-bottom:12px}
.footer .footer__k::after {
content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--pink)}
.footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.footer a { color:var(--on-void); text-decoration:none; font-size:var(--fs-small); transition:color var(--t-colour) var(--ease)}
.footer li a {
position:relative; display:inline-block;
transition:color var(--t-colour) var(--ease), transform var(--t-move) var(--ease-out)}
.footer li a::before {
content:""; position:absolute; left:-14px; top:50%; width:6px; height:6px; margin-top:-3px;
border-radius:50%; background:var(--pink); opacity:0; transform:scale(.3);
transition:opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease-out)}
.footer li a:hover { color:var(--white); transform:translateX(13px)}
.footer li a:hover::before { opacity:1; transform:none}
.footer p { color:var(--on-void)}
.footer__meta {
margin-top:var(--s-6); padding-top:var(--s-5);
border-top:1px solid var(--void-line);
display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between;
font-size:12px; letter-spacing:.01em; color:var(--on-void-dim)}
.footer__legal {
display:inline-flex; align-items:center; gap:6px;
padding:6px 14px; border-radius:var(--r-pill);
border:1px solid var(--void-line); background:rgba(255,255,255,.03)}
.footer__legal a { font-size:12px; color:var(--on-void-dim)}
.footer__legal a:hover { color:var(--cyan)}
.footnote { font-size:11px; line-height:1.55; color:var(--on-void-dim); margin-top:var(--s-4); max-width:none}
@media (prefers-reduced-motion: reduce) {
.footer li a, .footer li a::before, .footer .logo-chip--flat,
.footer__grid > div:first-child > p:last-of-type { transition:none !important; transform:none !important}
}
@media (max-width:899px){
.footer__grid{ grid-template-columns:1fr 1fr}
.footer .in::after { font-size:clamp(3.5rem,16vw,7rem)}
}
@media (max-width:519px){
.footer__grid{ grid-template-columns:1fr}
.footer__meta { justify-content:flex-start}
}
[data-reveal]:not(.foam) { opacity:0; transform:translateY(18px)}
[data-reveal]:not(.foam).is-in { opacity:1; transform:none; transition:opacity var(--t-slab) var(--ease-out), transform var(--t-slab) var(--ease-out)}
@media (max-width:767px){
.utility .u-long { display:none}
.header__cta > .btn { display:none}
.header__phone { display:inline}
.btn-row { flex-direction:column; align-items:stretch}
.btn-row .btn { width:100%}
body { padding-bottom:74px}
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
[data-reveal] { opacity:1 !important; transform:none !important}
html { scroll-behavior:auto}
}
.calc__out p, .calc__out .eyebrow { color:var(--white)}
.calc__out .calc__sub { color:rgba(255,255,255,.55)}
.calc__out .calc__fine { color:rgba(255,255,255,.48)}
.ghost { opacity:.9}
.s-pink .ghost { color:rgba(255,255,255,.10)}
.hero__art { display:flex; justify-content:flex-end; align-items:flex-end}
.hero__foamie { width:auto; max-width:100%; max-height:min(72vh,700px); margin-left:auto}
.hero .slab__in { padding-block:clamp(36px,4vw,64px) 0}
@media (max-width:1023px){ .hero__art{justify-content:center} .hero__foamie{max-height:52vh} }
.stepbar { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; margin-bottom:var(--s-7)}
.stepbar__i { display:inline-flex; align-items:center; padding:9px 18px; border-radius:var(--r-pill); font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; background:color-mix(in srgb, currentColor 8%, transparent); opacity:.5; transition:background-color var(--t-colour) var(--ease), opacity var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.stepbar__i[data-state="current"] { background:var(--cyan); color:var(--ink); opacity:1}
.stepbar__i[data-state="done"] { background:var(--ink); color:var(--white); opacity:1}
.stepbar__sep { opacity:.35}
.wstep[hidden] { display:none}
.optgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s-4)}
.opt { position:relative}
.opt input { position:absolute; opacity:0; inset:0; cursor:pointer}
.opt > span { display:block; height:100%; cursor:pointer; background:var(--white); color:var(--ink); border-radius:var(--r-3); padding:var(--s-5); box-shadow:inset 0 0 0 var(--keyline) var(--ink-100); transition:box-shadow var(--t-colour) var(--ease), transform var(--t-move) var(--ease)}
.opt > span b { display:block; font-size:var(--fs-h4); margin-bottom:6px}
.opt > span em { font-style:normal; font-size:var(--fs-small); color:var(--ink-600)}
.opt input:hover + span { box-shadow:inset 0 0 0 var(--keyline) var(--ink)}
.opt input:checked + span { box-shadow:inset 0 0 0 3px var(--cyan); transform:translateY(-3px)}
.checker { display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:flex-end}
.checker .field { flex:1 1 260px}
.checker__out { margin-top:var(--s-4); font-weight:700}
.checker__out[data-state="yes"] { color:var(--cyan)}
.checker__out[data-state="no"] { color:var(--pink)}
.slab--flush.band .ph { min-height:clamp(240px,32vw,440px); border-radius:var(--r-slab)}
.header { overflow:visible}
.logo-chip {
display:block; width:clamp(60px,7vw,92px); aspect-ratio:1/1;
background:var(--white); border-radius:14px; padding:7px;
box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--cyan);
transform:translateY(clamp(12px,2vw,28px));
transition:transform var(--t-move) var(--ease)}
.logo:hover .logo-chip { transform:translateY(clamp(12px,2vw,28px)) rotate(-2deg)}
.logo-chip--flat { transform:none; box-shadow:0 0 0 2px var(--ink)}
.logo:hover .logo-chip--flat { transform:rotate(-2deg)}
.housenav { width:100%; height:auto}
.housenav .hn-zone { fill:var(--cyan); opacity:0; transition:opacity var(--t-colour) var(--ease)}
.housenav .hn-zone.active { opacity:.85}
.housenav .hn-dot { cursor:pointer}
.housenav .hn-dot circle { fill:var(--pink); stroke:var(--white); stroke-width:3; transition:r var(--t-move) var(--ease)}
.housenav .hn-dot.active circle, .housenav .hn-dot:hover circle { fill:var(--cyan)}
.housenav .hn-dot text { fill:var(--white); font-family:var(--font-display); font-size:17px; letter-spacing:.02em}
.hn-legend { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-5); padding:0; list-style:none}
.hn-legend a {
display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:inherit;
font-size:var(--fs-small); font-weight:600; padding:8px 0;
border-bottom:2px solid transparent; transition:border-color var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.hn-legend a b { font-family:var(--font-display); font-weight:400; color:var(--pink)}
.hn-legend a:hover, .hn-legend a.active { border-color:var(--cyan)}
.swipe--stickers { grid-auto-columns:clamp(220px,24vw,280px)}
.swipe--stickers .sticker { text-align:left}
.anatomy { position:relative; max-width:520px; margin-inline:auto}
.anatomy img { width:100%}
.panel .housenav { display:block; margin:-6px; width:calc(100% + 12px)}
.offset-cyan, .ex-cyan { color:var(--cyan)}
.offset-pink, .ex-pink { color:var(--pink)}
.offset-ink,  .ex-ink  { color:var(--ink)}
.s-void .offset-ink, .s-pink .offset-ink { color:var(--white)}
.t-outline, .t-outline-cyan { color:var(--cyan); -webkit-text-stroke:0}
.t-outline-pink { color:var(--pink); -webkit-text-stroke:0}
.t-outline-white { color:var(--white); -webkit-text-stroke:0}
.display-hero,.display-l,.display-m {
text-shadow:var(--offset-type) var(--offset-type) 0 var(--type-shadow, transparent)}
.display-hero span,.display-l span,.display-m span { color:inherit !important; -webkit-text-stroke:0 !important}
.s-white, .s-sunken { --type-shadow:var(--cyan)}
.s-pink  { --type-shadow:var(--ink)}
.s-cyan  { --type-shadow:var(--ink)}
.s-cyan .display-hero, .s-cyan .display-l, .s-cyan .display-m { color:var(--white)}
.s-cyan .panel, .s-cyan .card { --type-shadow:var(--white)}
.s-cyan .panel .display-hero, .s-cyan .panel .display-l, .s-cyan .panel .display-m,
.s-cyan .card .display-hero,  .s-cyan .card .display-l,  .s-cyan .card .display-m { color:var(--ink)}
.s-void  { --type-shadow:var(--pink)}
.band__over { --type-shadow:var(--pink)}
.band__over .display-m { text-shadow:var(--offset-type) var(--offset-type) 0 var(--type-shadow)}
@media (max-width:833px){
:root { --offset-type:3px}
}
.header--split .header__in { display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.nav--l { justify-self:start}
.header--split .header__cta { justify-self:end}
.header--split .header__cta .nav-inline { color:var(--white); text-decoration:none; font-size:var(--fs-small); font-weight:600; margin-right:var(--s-3)}
.header--split .header__cta .nav-inline:hover { color:var(--cyan)}
.logo--center { justify-self:center}
.navdrop { position:relative}
.navdrop__trigger::after {
content:""; display:inline-block; margin-left:7px; vertical-align:middle;
border:5px solid transparent; border-top:6px solid currentColor; border-bottom:0;
opacity:.75; transition:transform var(--t-colour) var(--ease)}
.navdrop:hover .navdrop__trigger::after { transform:rotate(180deg)}
.navdrop__panel::before { content:""; position:absolute; left:0; right:0; top:-20px; height:20px}
.navdrop__panel {
position:absolute; top:calc(100% + 18px); left:-16px; z-index:80;
width:min(560px, 82vw);
background:var(--white); color:var(--ink); border-radius:var(--r-3);
box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--cyan);
padding:var(--s-5);
display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-5);
opacity:0; transform:translateY(8px); pointer-events:none;
transition:opacity var(--t-colour) var(--ease), transform var(--t-move) var(--ease)}
.navdrop:hover .navdrop__panel, .navdrop:focus-within .navdrop__panel { opacity:1; transform:none; pointer-events:auto}
.navdrop__panel a { display:block; text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:var(--r-2); transition:background-color var(--t-colour) var(--ease)}
.navdrop__panel a:hover { background:var(--ink-050)}
.navdrop__panel b { display:block; font-size:var(--fs-small); font-weight:700}
.navdrop__panel em { font-style:normal; font-size:12px; color:var(--ink-600)}
.navdrop__panel .navdrop__all { grid-column:1/-1; text-align:center; font-weight:700; color:var(--pink); border-top:var(--hairline); margin-top:var(--s-2); padding-top:var(--s-3); border-radius:0}
.navdrop__panel .navdrop__all:hover { background:none; text-decoration:underline}
.hero-shot { position:relative; overflow:hidden; aspect-ratio:1672/941}
.hero-shot img { width:100%; height:100%; object-fit:cover}
.scrollx { position:relative}
.scrollx__stage {
--p:0; --s:1; --ty:0px;
--scale:calc(1 + (var(--s) - 1) * min(var(--p) / .82, 1));
position:relative; z-index:5;
border-radius:0; overflow:hidden;
transform-origin:center center;
will-change:transform}
.scrollx__stage.is-ready {
border-radius:0;
transform:translateY(calc(var(--ty) * var(--p))) scale(var(--scale))}
.scrollx__stage.is-ready .spray-hint,
.scrollx__stage.is-ready .spray-cta,
.scrollx__stage.is-ready .spray-reset { scale:calc(1 / var(--scale))}
.hero { overflow:visible}
[data-spray] {
touch-action:pan-y; user-select:none;
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36'><circle cx='18' cy='18' r='6' fill='none' stroke='%23e9107d' stroke-width='3'/><path d='M18 2v8M18 26v8M2 18h8M26 18h8' stroke='%23e9107d' stroke-width='3' stroke-linecap='round'/></svg>") 18 18, crosshair}
[data-spray] img { pointer-events:none; -webkit-user-drag:none}
.spray-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3}
.spray-foot {
position:absolute; left:0; right:0; bottom:15%; z-index:4;
display:flex; justify-content:center; pointer-events:none}
.spray-hint {
position:static; pointer-events:none;
font-size:var(--fs-small); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
background:var(--pink); color:var(--white); padding:14px 24px; border-radius:var(--r-pill);
animation:hintbob 2.2s var(--ease) infinite, hintring 2.2s var(--ease) infinite;
white-space:nowrap}
@keyframes hintbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes hintring {
0% { box-shadow:0 0 0 0 rgba(233,16,125,.55)}
70%,100% { box-shadow:0 0 0 18px rgba(233,16,125,0)}
}
.spray-reset {
position:absolute; top:14px; right:14px; z-index:4; border:0; cursor:pointer;
font:inherit; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
background:rgba(0,0,0,.72); color:var(--white); padding:10px 15px; border-radius:var(--r-pill);
transition:background-color var(--t-colour) var(--ease)}
.spray-reset:hover { background:var(--ink)}
.spray-cta {
position:static; pointer-events:auto; z-index:5;
display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
background:var(--pink); color:var(--white); text-decoration:none;
font-family:var(--font-core); font-weight:700; font-size:1rem;
letter-spacing:.03em; text-transform:uppercase;
padding:20px var(--s-7); border-radius:var(--r-pill); white-space:nowrap;
animation:ctapop .5s var(--ease-out);
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.spray-cta:hover, .spray-cta:focus-visible { transform:translateY(-2px); box-shadow:var(--cta-shadow)}
.spray-cta:active { transform:translateY(1px); box-shadow:var(--cta-shadow-press)}
@keyframes ctapop {
from { transform:translateY(26px) scale(.8); opacity:0}
to   { transform:none; opacity:1}
}
.spray-hint[hidden], .spray-reset[hidden], .spray-cta[hidden] { display:none}
.scene { position:relative; flex:1; min-height:300px; border-radius:var(--r-3); overflow:visible}
.scene__stage { position:absolute; inset:0; border-radius:var(--r-3); overflow:hidden}
.scene__stage .scrub { position:absolute; inset:0; aspect-ratio:auto; border-radius:0}
.scene__foamie {
position:absolute; right:clamp(4px,1.4vw,20px); bottom:0; z-index:7;
height:105%; width:auto; max-width:none; pointer-events:none}
.hero-top { display:grid; grid-template-columns:1fr auto; gap:var(--s-6); align-items:end; margin-bottom:var(--s-6)}
.hero-top__aside { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-4); text-align:right}
.kicker { font-size:var(--fs-eyebrow); font-weight:900; letter-spacing:var(--track-eyebrow); text-transform:uppercase}
.hero-trust { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); list-style:none; padding:0; margin:var(--s-4) 0 0; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-600)}
.hero-trust li { display:flex; align-items:center; gap:7px}
.hero-trust li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--pink)}
@media (max-width:1023px){
.hero-top { grid-template-columns:1fr; align-items:start}
.hero-top__aside { align-items:flex-start; text-align:left}
.scene { min-height:380px}
.scene__foamie { height:88%}
}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
html:has(.deck) { scroll-snap-type:none; scroll-padding-top:var(--chrome-h)}
.deck { gap:0; padding-bottom:0}
.deck .vp { padding-top:0}
.deck .vp:last-of-type { padding-bottom:0}
.deck .vp {
height:100svh;
display:flex; flex-direction:column; overflow:hidden}
.deck .vp > .slab { flex:1; min-height:0; display:flex}
.deck .vp > .slab > .slab__in { margin-block:auto; width:100%; padding-block:clamp(20px,3.4vh,44px)}
.deck .hero .slab__in { display:flex; flex-direction:column; height:auto; margin-block:0}
.deck .vp > .slab.hero > .slab__in { padding-bottom:0}
.deck .hero .hero-top { flex:none}
.deck .hero .scene { flex:1; min-height:0}
.deck .scrollx { height:150vh}
.deck .scrollx__stage { position:sticky; top:calc(var(--chrome-h) + 14px)}
.deck .vp--first { height:auto; min-height:100svh; overflow:visible}
.deck .hero .display-l { font-size:clamp(2.5rem,8.4vh,5.5rem)}
.deck .vp > .foam, .deck .vp > .marquee, .deck .vp > .hearth { flex:none}
.deck .vp .head { margin-bottom:clamp(18px,3.2vh,40px)}
.deck .vp .lede { margin-top:clamp(10px,1.6vh,20px)}
.deck .vp .btn-row { margin-top:clamp(16px,2.6vh,36px)}
.deck .vp .wallcard { padding-block:clamp(14px,2.6vh,32px)}
.deck .vp .datum__v { font-size:clamp(3rem,8.6vh,6rem)}
.deck .vp .chip-figure { max-width:none; justify-self:end}
.deck .vp .chip-figure img { max-height:48vh; width:auto; margin-inline:auto}
.deck .vp .panel { max-height:calc(100svh - var(--chrome-h) - 40px); overflow:auto}
.deck .vp .band, .deck .vp .band img { height:100%}
.deck .vp--tall { height:auto; min-height:0; overflow:visible; display:block}
.deck .vp--tall > .slab { display:block}
.deck .vp--tall > .slab > .slab__in { margin-block:0; padding-block:var(--slab-pad-y)}
}
.hero-lede { max-width:46ch; margin-top:var(--s-4)}
.hero-lede b { color:var(--ink)}
.creds { list-style:none; padding:0; margin:var(--s-5) 0 0; display:flex; flex-wrap:wrap; gap:12px 11px; max-width:620px}
.creds li {
display:flex; align-items:center; gap:9px; max-width:34ch;
padding:8px 17px 8px 8px; border-radius:var(--r-pill);
background:var(--white); color:var(--ink);
font-size:var(--fs-small); font-weight:700; line-height:1.15;
box-shadow:inset 0 0 0 2px var(--ink), 4px 4px 0 var(--cyan)}
.creds__ic {
width:30px; height:30px; flex:none; border-radius:50%;
background:var(--pink); display:grid; place-items:center}
.creds__ic svg {
width:17px; height:17px; fill:none;
stroke:var(--white); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.blob {
position:absolute; z-index:1; pointer-events:none; user-select:none;
width:auto; max-width:none;
aspect-ratio:809 / 1942;
transform:scaleX(var(--blob-flip,1));
opacity:var(--blob-a,1)}
.blob--r { --blob-flip:-1}
.s-white .blob, .s-sunken .blob { filter:drop-shadow(0 8px 20px rgba(0,0,0,.12))}
.s-grey .blob { filter:drop-shadow(0 8px 18px rgba(0,0,0,.09))}
@media (max-width:899px) { .blob { display:none} }
@media (min-width:1024px){
.wall--flow .wallcard { padding-right:var(--s-7)}
.wall--flow .wallcard:not(:last-child)::after {
content:"→"; position:absolute; top:var(--s-7); right:10px;
font-family:var(--font-display); font-size:1.75rem; line-height:.8; color:var(--pink)}
}
.faq-foamie { width:min(420px,100%); height:auto; margin-top:var(--s-6)}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine){ .deck .faq-foamie { max-height:32vh; width:auto} .deck .vp--tall .faq-foamie { max-height:none; width:min(400px,100%)} }
.scene__foamie { height:116%; right:-1%; bottom:-3%}
@media (max-width:1023px){ .scene__foamie { height:78%; right:-4%} }
.close-figure { justify-self:end; width:min(620px,100%)}
.close-figure img { width:100%; height:auto}
@media (max-width:899px){ .close-figure { justify-self:center; max-width:440px} }
.anatomy--stage { max-width:560px; background:var(--ink); border-radius:var(--r-slab); padding:var(--s-5); box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.tindex__head {
display:grid; grid-template-columns:1fr auto; gap:var(--s-5) var(--s-7);
align-items:end; margin-bottom:clamp(26px,3.6vh,52px)}
.tindex__body {
display:grid; grid-template-columns:minmax(248px,.82fr) minmax(0,2.05fr);
gap:clamp(28px,4.5vw,72px); align-items:start}
.tindex__seal {
position:relative; justify-self:end; align-self:end;
width:clamp(122px,12.5vw,166px); aspect-ratio:1;
border-radius:50%; display:grid; place-items:center;
background:var(--ink); transform:rotate(-5deg);
box-shadow:0 0 0 5px var(--white), 0 0 0 7px var(--cyan);
transition:transform var(--t-move) var(--ease)}
.tindex__seal:hover { transform:rotate(0deg) scale(1.04)}
.tindex__seal svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.tindex__seal text {
font-family:var(--font-core); font-size:10.5px; font-weight:700;
letter-spacing:.13em; fill:var(--white)}
.tindex__seal-spin { transform-origin:60px 60px; animation:ringspin 24s linear infinite}
.tindex__seal:hover .tindex__seal-spin { animation-duration:9s}
.tindex__seal-n {
position:relative; z-index:1;
font-family:var(--font-display); font-size:clamp(2.125rem,3.2vw,2.875rem);
line-height:.8; letter-spacing:-.03em; color:var(--cyan)}
.tindex__seal-sr {
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.tindex__list { display:flex; flex-direction:column; gap:6px}
.tix {
position:relative;
display:grid; grid-template-columns:auto 1fr auto; align-items:center;
gap:var(--s-4); width:100%; text-align:left; cursor:pointer;
background:transparent; border:0; border-radius:var(--r-3);
padding:clamp(11px,1.7vh,17px) var(--s-4);
transition:background-color var(--t-colour) var(--ease),
transform var(--t-move) var(--ease),
box-shadow var(--t-move) var(--ease)}
.tix__n {
font-family:var(--font-display); font-size:1.375rem; line-height:1;
font-variant-numeric:tabular-nums; min-width:1.6em;
color:var(--ink-400); transition:color var(--t-colour) var(--ease)}
.tix__t {
font-size:var(--fs-small); font-weight:600; line-height:1.3;
color:var(--ink-600); transition:color var(--t-colour) var(--ease)}
.tix::after {
content:"\2192"; justify-self:end;
width:32px; height:32px; border-radius:var(--r-pill);
display:grid; place-items:center;
font-family:var(--font-display); font-size:1.0625rem; line-height:1;
color:var(--ink-400); box-shadow:inset 0 0 0 var(--keyline) var(--ink-100);
transition:transform var(--t-move) var(--ease), color var(--t-colour) var(--ease),
background var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.tix:hover { background:var(--ink-050); transform:translateX(4px)}
.tix:hover .tix__n { color:var(--pink)}
.tix:hover .tix__t { color:var(--ink)}
.tix:hover::after { transform:translateX(4px); color:var(--ink); box-shadow:inset 0 0 0 var(--keyline) var(--ink)}
.tix.is-on {
background:var(--ink); transform:none;
box-shadow:5px 5px 0 var(--cyan);
padding-bottom:calc(clamp(11px,1.7vh,17px) + 6px)}
.tix.is-on .tix__n { color:var(--cyan)}
.tix.is-on .tix__t { color:var(--white); font-weight:700}
.tix.is-on::after { transform:translateX(4px); background:var(--cyan); color:var(--ink); box-shadow:none}
.tix__bar {
position:absolute; left:var(--s-4); right:var(--s-4); bottom:9px; height:3px;
border-radius:2px; background:rgba(255,255,255,.18);
opacity:0; transition:opacity var(--t-colour) var(--ease)}
.tix.is-on .tix__bar { opacity:1}
.tix__bar i {
display:block; height:100%; border-radius:inherit; background:var(--cyan);
transform:scaleX(0); transform-origin:left}
.tix.is-on .tix__bar i { transform:scaleX(1); transition:transform var(--t-move) var(--ease)}
.tix.is-on.is-timing .tix__bar i { animation:tix-dwell var(--dwell,7.4s) linear both}
@keyframes tix-dwell { from { transform:scaleX(0)} to { transform:scaleX(1)} }
.tindex__stage { position:relative; display:grid; min-height:clamp(340px,46vh,480px)}
.tpanel {
grid-area:1/1; display:grid;
grid-template-columns:minmax(220px,1.04fr) minmax(0,1.1fr);
gap:clamp(20px,3vw,48px); align-items:stretch;
visibility:hidden; opacity:0; transition:opacity var(--t-move) var(--ease)}
.tpanel.is-on { visibility:visible; opacity:1}
.tpanel__fig { margin:0; position:relative; height:100%}
.tpanel__fig .ph, .tpanel__fig img {
height:100%; border-radius:var(--r-3);
box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.tpanel__fig .ph { min-height:0; aspect-ratio:auto; padding:var(--s-5)}
.tpanel__fig img { width:100%; object-fit:cover}
.tpanel.is-on .tpanel__fig { animation:tp-fig var(--t-slab) var(--ease-out) both}
@keyframes tp-fig {
from { opacity:0; transform:translate(-12px,12px)}
to   { opacity:1; transform:none}
}
.tpanel__c { position:relative; align-self:center}
.tpanel__n {
display:flex; align-items:center; gap:10px;
font-family:var(--font-display); font-size:1.375rem; line-height:1;
color:var(--cyan); letter-spacing:.02em; margin-bottom:var(--s-3)}
.tpanel__n::after { content:""; height:2px; width:34px; background:var(--pink)}
.tpanel__c h3 { font-size:clamp(1.75rem,1rem+2.1vw,2.75rem)}
.tpanel__c p { margin:var(--s-4) 0 0; max-width:34ch}
.tpanel__chip {
display:inline-block; margin-top:var(--s-5); padding:6px 13px; border-radius:var(--r-pill);
font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink); background:color-mix(in srgb, var(--cyan) 14%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 45%, transparent)}
.tpanel__n, .tpanel__c h3, .tpanel__c p, .tpanel__chip { opacity:0; transform:translateY(14px)}
.tpanel.is-on .tpanel__n,
.tpanel.is-on .tpanel__c h3,
.tpanel.is-on .tpanel__c p,
.tpanel.is-on .tpanel__chip {
opacity:1; transform:none;
transition:opacity var(--t-max) var(--ease-out), transform var(--t-max) var(--ease-out)}
.tpanel.is-on .tpanel__n     { transition-delay:40ms}
.tpanel.is-on .tpanel__c h3  { transition-delay:100ms}
.tpanel.is-on .tpanel__c p   { transition-delay:160ms}
.tpanel.is-on .tpanel__chip  { transition-delay:220ms}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .vp .tindex__stage { min-height:clamp(300px,44vh,440px)}
.deck .vp .tix { padding-block:clamp(9px,1.5vh,18px)}
.deck .vp .tix.is-on { padding-bottom:calc(clamp(9px,1.5vh,18px) + 6px)}
.deck .vp .tix::after { width:28px; height:28px; font-size:1rem}
.deck .vp .tindex__seal { width:clamp(112px,15vh,150px)}
}
@media (max-width:899px) {
.tindex__head { grid-template-columns:1fr; align-items:start}
.tindex__seal { justify-self:start; width:clamp(108px,26vw,140px)}
.tindex__body { grid-template-columns:1fr; gap:0}
.tindex__list { display:none}
.tindex__stage { display:block; min-height:0}
.tpanel {
display:block; visibility:visible; opacity:1;
padding:var(--s-6) 0; border-top:2px solid var(--ink-100)}
.tpanel__fig { height:auto; max-width:460px}
.tpanel__fig .ph { aspect-ratio:4/5; height:auto}
.tpanel__fig img { aspect-ratio:4/5; height:auto}
.tpanel.is-on .tpanel__fig { animation:none}
.tpanel__c { margin-top:var(--s-6)}
.tpanel__c h3 { font-size:var(--fs-h3)}
.tpanel__n, .tpanel__c h3, .tpanel__c p, .tpanel__chip { opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce) {
.tindex__seal-spin { animation:none}
.tpanel.is-on .tpanel__fig { animation:none}
.tpanel__n, .tpanel__c h3, .tpanel__c p, .tpanel__chip { opacity:1; transform:none}
.tix.is-on.is-timing .tix__bar i { animation:none; transform:scaleX(1)}
}
.reel {
position:relative; overflow:hidden;
min-height:clamp(460px,72vh,760px);
background:var(--ink);
--reel-pad-b:clamp(26px,4.6vh,56px);
--reel-lift:clamp(60px,8vh,88px);
--reel-fade:700ms;
--reel-card-w:clamp(84px,10.5vw,146px);
--reel-ov:calc(var(--reel-card-w) * .12);
--reel-card-h:calc(var(--reel-card-w) + 62px)}
.reel__stage { position:absolute; inset:0}
.reel__shot {
position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
transition:opacity var(--reel-fade) linear, visibility 0s linear var(--reel-fade)}
.reel__shot.is-on { opacity:1; visibility:visible; transition:opacity var(--reel-fade) linear, visibility 0s}
.reel__shot img { width:100%; height:100%; object-fit:cover; display:block}
.reel__shot img { animation:reel-drift 26s linear infinite alternate; animation-play-state:paused}
.reel__shot.is-on img { animation-play-state:running}
@keyframes reel-drift {
from { transform:scale(1.06) translate3d(0,0,0)}
to   { transform:scale(1.15) translate3d(-1.5%,-1.7%,0)}
}
.reel__vignette {
position:absolute; inset:0; z-index:2; pointer-events:none;
background:
linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.66) 30%, rgba(0,0,0,0) 66%),
linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0) 44%),
radial-gradient(128% 96% at 50% 34%, rgba(0,0,0,0) 44%, rgba(0,0,0,.5))}
.reel__vignette::after {
content:""; position:absolute; inset:0;
background-image:var(--void-tooth); opacity:.16; mix-blend-mode:overlay}
.reel__over {
position:absolute; z-index:5; inset:auto 0 0 0;
padding:0 var(--slab-pad-x) var(--reel-pad-b);
color:var(--white); pointer-events:none}
.reel__over .in { max-width:var(--container); margin-inline:auto}
.reel__over .display-m { text-shadow:var(--offset-type) var(--offset-type) 0 var(--pink)}
.reel__meta { max-width:min(660px,100%); margin-top:clamp(16px,2.6vh,28px)}
.reel__tags { display:grid}
.reel__tagset {
grid-area:1/1; margin:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px;
opacity:0; visibility:hidden;
transition:opacity var(--t-max) linear, visibility 0s linear var(--t-max)}
.reel__tagset.is-on { opacity:1; visibility:visible; transition:opacity var(--t-max) linear, visibility 0s}
.reel__tag {
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px; border-radius:var(--r-pill);
background:rgba(0,0,0,.58); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow);
text-transform:uppercase; color:var(--white); white-space:nowrap;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px)}
.reel__tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none}
.reel__tag--lead { background:var(--cyan); color:var(--ink); box-shadow:none}
.reel__tag--lead::before { background:var(--ink)}
.reel__tagset.is-on .reel__tag { animation:reel-tag var(--t-max) var(--ease-out) both}
.reel__tagset.is-on .reel__tag:nth-child(1) { animation-delay:120ms}
.reel__tagset.is-on .reel__tag:nth-child(2) { animation-delay:220ms}
.reel__tagset.is-on .reel__tag:nth-child(3) { animation-delay:320ms}
@keyframes reel-tag { from { opacity:0; transform:translateY(9px)} to { opacity:1; transform:none} }
.reel__ticks { display:flex; gap:8px; margin-top:clamp(14px,2.2vh,24px)}
.reel__ticks i {
position:relative; overflow:hidden; border-radius:2px;
width:clamp(38px,5.4vw,84px); height:4px; background:rgba(255,255,255,.22)}
.reel__ticks i::after {
content:""; position:absolute; inset:0; background:rgba(255,255,255,.5);
transform:scaleX(0); transform-origin:left}
.reel__ticks i.is-done::after { transform:scaleX(1)}
.reel__ticks i.is-on::after { background:var(--cyan); transform:scaleX(var(--p,0))}
.reel__stack {
position:absolute; z-index:6;
right:var(--slab-pad-x); bottom:calc(var(--reel-pad-b) + var(--reel-lift));
display:flex; align-items:flex-end}
.reel__card + .reel__card { margin-left:calc(var(--reel-ov) * -1)}
.reel__card {
--tilt:0deg;
position:relative; flex:none; cursor:pointer; opacity:0;
width:var(--reel-card-w);
padding:7px 7px 26px; border:0; border-radius:4px;
background:var(--white);
box-shadow:0 14px 28px rgba(0,0,0,.5);
transform:rotate(var(--tilt));
transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease)}
.reel__card__f { position:relative; display:block; overflow:hidden; border-radius:2px}
.reel__card img {
width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
filter:grayscale(.72) brightness(.82) contrast(1.08);
transform:scale(1);
transition:transform 520ms var(--ease-out), filter 280ms var(--ease)}
.reel__card__k {
position:relative; display:block; margin-top:8px;
font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
color:var(--ink-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
transition:color var(--t-colour) var(--ease)}
.reel__card__k::after {
content:""; position:absolute; left:50%; right:50%; bottom:-5px; height:2px; background:var(--pink);
transition:left 260ms var(--ease-out), right 260ms var(--ease-out)}
.reel__card:nth-child(1) { --tilt:-7deg; z-index:1}
.reel__card:nth-child(2) { --tilt:4.5deg;  z-index:2}
.reel__card:nth-child(3) { --tilt:-3deg; z-index:3}
.reel__card:nth-child(4) { --tilt:6.5deg;  z-index:4}
.reel__card:hover, .reel__card:focus-visible {
transform:rotate(0deg) translateY(-18px) scale(1.06); z-index:9;
box-shadow:0 30px 52px rgba(0,0,0,.62), 7px 7px 0 var(--pink)}
.reel__card:hover img, .reel__card:focus-visible img { filter:none; transform:scale(1.09)}
.reel__card:hover .reel__card__k, .reel__card:focus-visible .reel__card__k { color:var(--ink)}
.reel__card:hover .reel__card__k::after, .reel__card:focus-visible .reel__card__k::after { left:0; right:0}
.reel__card:focus-visible { outline:none; box-shadow:0 30px 52px rgba(0,0,0,.62), 7px 7px 0 var(--pink), var(--focus-ring)}
.reel__card:hover + .reel__card { transform:rotate(var(--tilt)) translateX(12px)}
.reel__card:has(+ .reel__card:hover) { transform:rotate(var(--tilt)) translateX(-12px)}
.reel__card.is-on {
--tilt:0deg; z-index:8;
transform:rotate(0deg) translateY(-12px);
box-shadow:0 22px 42px rgba(0,0,0,.55), 0 0 0 3px var(--cyan), 7px 7px 0 rgba(5,168,236,.34)}
.reel__card.is-on img { filter:none}
.reel__card.is-on .reel__card__k { color:var(--ink)}
.reel__card.is-on .reel__card__k::after { left:0; right:0; background:var(--cyan)}
.reel__card.is-on:hover, .reel__card.is-on:focus-visible {
transform:rotate(0deg) translateY(-18px) scale(1.06);
box-shadow:0 30px 52px rgba(0,0,0,.62), 0 0 0 3px var(--cyan), 7px 7px 0 var(--pink)}
.reel.is-live .reel__card { opacity:1; animation:reel-card-in var(--t-slab) var(--ease-out) backwards}
.reel.is-live .reel__card:nth-child(1) { animation-delay:60ms}
.reel.is-live .reel__card:nth-child(2) { animation-delay:130ms}
.reel.is-live .reel__card:nth-child(3) { animation-delay:200ms}
.reel.is-live .reel__card:nth-child(4) { animation-delay:270ms}
@keyframes reel-card-in {
from { opacity:0; transform:rotate(var(--tilt)) translateY(52px) scale(.82)}
}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .vp .reel { min-height:0}
}
@media (max-width:899px) {
.reel {
min-height:clamp(440px,68vh,620px); --reel-pad-b:clamp(18px,3vh,26px);
--reel-lift:0px;
--reel-card-w:clamp(62px,16.5vw,88px);
--reel-ov:calc(var(--reel-card-w) * .1);
--reel-card-h:calc(var(--reel-card-w) + 10px)}
.reel__over { padding-bottom:calc(var(--reel-pad-b) + var(--reel-lift) + var(--reel-card-h) + 26px)}
.reel__stack { left:var(--slab-pad-x); right:auto}
.reel__card { padding:5px}
.reel__card__k { display:none}
.reel__ticks i { width:clamp(26px,7vw,44px)}
}
@media (max-width:639px) {
.reel__tags { gap:6px}
.reel__tagset { gap:6px}
.reel__tag { padding:5px 10px; font-size:10px; letter-spacing:.1em}
.reel__tag::before { width:5px; height:5px}
.reel__tag:nth-child(3) { display:none}
}
@media (prefers-reduced-motion:reduce) {
.reel__shot { transition:none}
.reel__shot img { animation:none}
.reel__tagset { transition:none}
.reel__tagset.is-on .reel__tag { animation:none}
.reel__ticks i.is-on::after { transform:scaleX(1)}
.reel.is-live .reel__card { animation:none}
.reel__card { opacity:1}
.reel__card img { transition:filter var(--t-colour) linear}
}
.no5__note {
max-width:30ch; margin:0; text-align:right;
font-size:var(--fs-small); font-weight:600; color:rgba(0,0,0,.72)}
.no5s { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px)}
.no5 {
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
min-height:clamp(230px,24vw,290px); padding:var(--s-5);
background:var(--ink); color:var(--white); border-radius:var(--r-3);
box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--white);
transform:rotate(var(--tilt,-2deg));
transition:transform var(--t-max) var(--ease-out), box-shadow var(--t-max) var(--ease-out)}
.no5:nth-child(1) { --tilt:-2.4deg}
.no5:nth-child(2) { --tilt:1.8deg}
.no5:nth-child(3) { --tilt:-1.2deg}
.no5:nth-child(4) { --tilt:2.2deg}
.no5:nth-child(5) { --tilt:-1.8deg}
.no5:hover { transform:rotate(0deg) translateY(-6px); box-shadow:14px 14px 0 var(--white)}
.no5::after {
content:""; position:absolute; right:0; bottom:0; width:0; height:0;
border-style:solid; border-width:0 0 0 0;
border-color:transparent transparent var(--cyan) transparent;
transition:border-width var(--t-max) var(--ease-out)}
.no5:hover::after { border-width:0 0 34px 34px; border-left-color:transparent}
.no5__n {
font-family:var(--font-display); font-size:clamp(2.5rem,3.6vw,3.5rem); line-height:.78;
color:var(--cyan); font-variant-numeric:tabular-nums}
.no5 h3 {
margin:0; font-family:var(--font-display); font-weight:400; text-transform:uppercase;
font-size:clamp(1.375rem,1.9vw,1.875rem); line-height:.92; letter-spacing:.01em}
.no5 h3 em { font-style:normal; color:var(--pink)}
.no5 p { margin:0; font-size:var(--fs-small); line-height:1.5; color:var(--on-void)}
.no5__tag {
margin-top:auto; padding:6px 11px; border-radius:var(--r-pill);
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
font-size:var(--fs-micro); font-weight:900; letter-spacing:.08em; text-transform:uppercase;
color:var(--white); transition:background-color var(--t-colour) var(--ease), color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.no5:hover .no5__tag { background:var(--cyan); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--cyan)}
.no5[data-reveal] { transition-delay:0ms}
.no5:nth-child(2)[data-reveal].is-in { transition-delay:80ms}
.no5:nth-child(3)[data-reveal].is-in { transition-delay:160ms}
.no5:nth-child(4)[data-reveal].is-in { transition-delay:240ms}
.no5:nth-child(5)[data-reveal].is-in { transition-delay:320ms}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .vp .no5 { min-height:clamp(190px,28vh,270px); padding:clamp(12px,2vh,22px)}
.deck .vp .no5__n { font-size:clamp(2rem,5vh,3.25rem)}
}
@media (max-width:1023px) {
.no5s { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px}
.no5 { min-height:200px}
.no5:nth-child(5) { grid-column:1/-1; min-height:0}
.no5__note { text-align:left; justify-self:start !important; max-width:none}
}
@media (max-width:599px) {
.no5s { grid-template-columns:1fr; gap:18px}
.no5, .no5:nth-child(5) { min-height:0}
.no5 { box-shadow:6px 6px 0 var(--white)}
.no5:hover { box-shadow:9px 9px 0 var(--white)}
}
@media (prefers-reduced-motion:reduce) {
.no5 { transition:none}
.no5:hover { transform:rotate(var(--tilt,-2deg))}
.no5::after { transition:none}
}
.proc { --proc-dot:clamp(46px,4.4vw,58px)}
.proc__lead { text-align:center; margin-bottom:clamp(30px,4.2vh,56px)}
.proc__lead .display-m { margin:0; white-space:nowrap; font-size:clamp(1.25rem,6.4vw,4.5rem)}
.proc__close { margin-top:clamp(26px,3.8vh,48px); text-align:center}
.proc__close .btn-row { justify-content:center; margin-top:0}
.proc__rail { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3)}
.proc__track {
position:absolute; left:12.5%; right:12.5%; top:calc(var(--proc-dot) / 2 - 1.5px);
height:3px; background:rgba(0,0,0,.13); border-radius:2px; overflow:hidden}
.proc__track__fill {
display:block; height:100%; width:0%;
background:var(--cyan); box-shadow:0 0 14px rgba(5,168,236,.55);
transition:width 100ms linear}
.proc__node {
position:relative; z-index:2; min-width:0; display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
padding:0 var(--s-2); border:0; background:none; color:inherit; font:inherit; text-align:center; cursor:pointer}
.proc__node__dot {
position:relative; width:var(--proc-dot); height:var(--proc-dot); border-radius:50%; flex:none;
display:grid; place-items:center;
background:var(--slab-bg); box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
font-family:var(--font-display); font-size:calc(var(--proc-dot) * .40); line-height:1; color:rgba(0,0,0,.42);
transition:background-color var(--t-move) var(--ease), color var(--t-move) var(--ease),
box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease-out)}
.proc__node__dot b { font-weight:400}
.proc__node:hover .proc__node__dot { transform:translateY(-4px)}
.proc__node.is-done .proc__node__dot { background:var(--cyan); color:var(--ink); box-shadow:none}
.proc__node.is-on .proc__node__dot {
background:var(--ink); color:var(--white); transform:scale(1.14);
box-shadow:0 0 0 8px var(--slab-bg), 0 10px 26px rgba(0,0,0,.20)}
.proc__node__ring {
position:absolute; inset:-8px; border-radius:50%; pointer-events:none; opacity:0;
background:conic-gradient(var(--cyan) calc(var(--p,0) * 360deg), rgba(0,0,0,.11) 0);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
transition:opacity var(--t-move) var(--ease)}
.proc__node.is-on .proc__node__ring { opacity:1}
.proc__node__k { font-weight:700; font-size:var(--fs-small); line-height:1.25; overflow-wrap:anywhere; hyphens:auto; color:rgba(0,0,0,.66); transition:color var(--t-colour) var(--ease)}
.proc__node.is-on .proc__node__k, .proc__node:hover .proc__node__k { color:var(--ink)}
.proc__node__s {
display:block; margin-top:3px; font-weight:600; font-size:var(--fs-micro);
text-transform:uppercase; letter-spacing:var(--track-eyebrow); color:rgba(0,0,0,.48)}
.proc__node:focus-visible { outline:none}
.proc__node:focus-visible .proc__node__dot { box-shadow:0 0 0 3px var(--ink-050), 0 0 0 6px var(--cyan)}
.proc__stage {
position:relative; display:grid; margin-top:clamp(24px,3.4vh,44px);
background:var(--white); color:var(--ink);
border-radius:var(--r-3);
box-shadow:0 0 0 1px var(--ink-100), var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.proc__panel {
grid-area:1/1; display:grid; grid-template-columns:clamp(78px,8.4vw,124px) minmax(0,1fr);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity 240ms var(--ease), visibility 0s linear 240ms}
.proc__panel[hidden] { display:grid}
.proc__panel.is-on { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}
.proc .proc__panel__n {
display:grid; place-items:center; margin:0; max-width:none;
font-family:var(--font-display); font-size:clamp(2.5rem,4.4vw,4rem); line-height:1;
color:var(--white); background:var(--ink); border-radius:var(--r-3) 0 0 var(--r-3)}
.proc__panel__b {
padding:clamp(22px,3vh,36px) clamp(22px,3vw,42px);
display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,.58fr);
gap:clamp(20px,3vw,44px); align-items:center}
.proc__panel__b h3 {
margin:0; font-family:var(--font-display); font-size:var(--fs-h3);
text-transform:uppercase; letter-spacing:.005em}
.proc__panel__c > p { margin:var(--s-3) 0 0; font-size:var(--fs-body); color:rgba(0,0,0,.68); max-width:58ch}
.proc__facts {
display:grid; gap:0; margin:0; padding:0 0 0 clamp(18px,2vw,26px); list-style:none;
border-left:var(--keyline) solid var(--ink-100)}
.proc__facts li {
display:block; padding:var(--s-3) var(--s-3) var(--s-3) 0; position:relative;
transition:padding-left var(--t-move) var(--ease-out)}
.proc__facts li + li { border-top:1px solid var(--ink-100)}
.proc__facts li::before {
content:""; position:absolute; left:calc(-1 * clamp(18px,2vw,26px) - var(--keyline)); top:0; bottom:0;
width:var(--keyline); background:var(--cyan); transform:scaleY(0); transform-origin:top;
transition:transform var(--t-move) var(--ease-out)}
.proc__facts li:hover { padding-left:8px}
.proc__facts li:hover::before { transform:scaleY(1)}
.proc__facts b { display:block; font-family:var(--font-display); font-size:clamp(1.375rem,1.9vw,1.75rem); line-height:1; letter-spacing:.01em}
.proc__facts span { display:block; margin-top:5px; font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:var(--track-eyebrow); color:var(--ink-600)}
.proc .proc__panel.is-on .proc__panel__n { animation:procNum 520ms var(--ease-out) both}
.proc__panel.is-on .proc__panel__c > *,
.proc__panel.is-on .proc__facts li { animation:procIn 480ms var(--ease-out) both; animation-delay:calc(var(--d,0) * 70ms)}
.proc__panel__c > *:nth-child(2) { --d:1}
.proc__facts li:nth-child(1) { --d:1}
.proc__facts li:nth-child(2) { --d:2}
.proc__facts li:nth-child(3) { --d:3}
@keyframes procIn { from { opacity:0; transform:translateY(16px)} to { opacity:1; transform:none} }
@keyframes procNum { from { opacity:0; transform:translateY(-14px)} to { opacity:1; transform:none} }
@media (max-width:720px) {
.proc { --proc-dot:44px}
.proc__rail { gap:var(--s-1)}
.proc__node { padding:0}
.proc__node__k { font-size:var(--fs-micro); font-weight:700}
.proc__node__s { display:none}
.proc__panel { grid-template-columns:minmax(0,1fr)}
.proc .proc__panel__n { padding:10px 0; border-radius:var(--r-3) var(--r-3) 0 0; font-size:2.25rem}
.proc__panel__b { grid-template-columns:minmax(0,1fr); gap:var(--s-5)}
.proc__facts { padding-left:var(--s-4)}
.proc__facts b { font-size:1.25rem}
.proc__close .btn { width:100%}
}
@media (prefers-reduced-motion:reduce) {
.proc .proc__panel.is-on .proc__panel__n,
.proc__panel.is-on .proc__panel__c > *,
.proc__panel.is-on .proc__facts li,
.proc__track__fill { transition:none}
}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .proc { --proc-dot:clamp(42px,6.2vh,56px)}
.deck .proc .display-m { font-size:min(clamp(2rem,6vh,3.5rem), 6.4vw)}
.deck .proc__lead { margin-bottom:clamp(22px,3.2vh,40px)}
.deck .proc__stage { margin-top:clamp(16px,2.6vh,34px)}
.deck .proc__panel__b { padding-block:clamp(14px,2.2vh,30px)}
.deck .proc__panel__c > p { font-size:clamp(.95rem,1.9vh,1.0625rem)}
.deck .proc__facts li { padding-block:clamp(7px,1.2vh,14px)}
.deck .proc__facts b { font-size:clamp(1.125rem,2.6vh,1.75rem)}
.deck .proc__close { margin-top:clamp(18px,2.8vh,38px)}
}
.no5__head { grid-template-columns:1fr auto}
.no5[data-reveal] { opacity:0; transform:translateY(18px) rotate(var(--tilt,-2deg))}
.no5[data-reveal].is-in { opacity:1; transform:rotate(var(--tilt,-2deg))}
.no5[data-reveal].is-in:hover { transform:rotate(0deg) translateY(-6px)}
@media (max-width:899px) { .no5__head { grid-template-columns:1fr} }
@media (max-width:899px) {
.no5:nth-child(1) { --tilt:-1.2deg}
.no5:nth-child(2) { --tilt:1deg}
.no5:nth-child(3) { --tilt:-0.7deg}
.no5:nth-child(4) { --tilt:1.2deg}
.no5:nth-child(5) { --tilt:-1deg}
}
.no5__head { grid-template-columns:1fr; text-align:center}
.no5__cta { display:flex; justify-content:center; margin-top:clamp(20px,3vw,36px)}
.no5 { padding:var(--s-6) var(--s-5) var(--s-5)}
.no5__n {
position:absolute; top:10px; right:14px; z-index:0;
font-size:clamp(3rem,4.2vw,4.5rem); line-height:.8;
color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.24)}
.no5 > *:not(.no5__n) { position:relative; z-index:1}
.no5 h3 { margin:0; display:flex; flex-direction:column; gap:6px}
.no5__kick {
font-family:var(--font-core); font-size:var(--fs-micro); font-weight:900;
letter-spacing:.18em; text-transform:uppercase; color:var(--on-void-dim);
transition:color var(--t-colour) var(--ease)}
.no5 h3 em {
font-family:var(--font-display); font-style:normal; font-weight:400; text-transform:uppercase;
font-size:clamp(1.625rem,2.3vw,2.375rem); line-height:.88; letter-spacing:.005em;
color:var(--pink)}
.no5:hover .no5__kick { color:var(--cyan)}
.no5 p {
margin:0; max-width:28ch;
font-size:var(--fs-small); line-height:1.55; color:var(--on-void);
letter-spacing:.002em}
.no5__tag {
display:inline-flex; align-items:center; gap:8px;
margin-top:auto; padding:8px 13px 8px 11px; border-radius:var(--r-pill);
background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; line-height:1.25;
color:var(--white)}
.no5__tag::before {
content:""; width:7px; height:7px; flex:none; border-radius:50%;
background:var(--cyan); box-shadow:0 0 0 3px rgba(5,168,236,.22);
transition:background-color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.no5:hover .no5__tag { background:var(--cyan); color:var(--ink); box-shadow:inset 0 0 0 1px var(--cyan)}
.no5:hover .no5__tag::before { background:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.18)}
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .vp .no5__n { font-size:clamp(2.5rem,6vh,4rem)}
}
@media (max-width:599px) {
.no5 h3 em { font-size:1.75rem}
.no5 p { max-width:none}
}
.no5__n { top:8px; right:12px; -webkit-text-stroke-color:rgba(255,255,255,.19)}
.no5 h3 { padding-right:clamp(44px,3.6vw,62px)}
@media (max-width:599px) { .no5 h3 { padding-right:64px} }
.no5__n {
position:static; display:block; margin-bottom:2px;
font-size:clamp(2.5rem,3.4vw,3.5rem); line-height:.78;
-webkit-text-stroke:1.5px rgba(255,255,255,.26); color:transparent}
.no5 h3 { padding-right:0; gap:4px}
.no5 h3 em { font-size:clamp(1.5rem,2.05vw,2.125rem)}
.no5 { padding:var(--s-5); gap:var(--s-2)}
.no5 p { margin-top:var(--s-2)}
@media (max-width:599px) { .no5 h3 { padding-right:0} }
@media (min-width:1180px) and (min-height:620px) and (pointer:fine) {
.deck .vp .no5__n { font-size:clamp(2.25rem,5.2vh,3.25rem)}
}
.no5__tag { padding:7px 11px 7px 9px; gap:7px; font-size:9.5px; letter-spacing:.07em}
.no5__tag::before { width:6px; height:6px; box-shadow:0 0 0 2.5px rgba(5,168,236,.22)}
.s-grey { --slab-bg:#ebebeb; --slab-fg:var(--ink); --type-shadow:var(--cyan)}
.s-grey .card { box-shadow:0 0 0 1px var(--ink-100)}
.s-grey .ghost { color:rgba(0,0,0,.05)}
.terr8__head {
display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,56px); align-items:end;
padding-bottom:var(--s-5); margin-bottom:clamp(24px,3vw,40px); border-bottom:2px solid rgba(0,0,0,.1)}
.terr8__lede { font-size:var(--fs-body); line-height:var(--lh-body); max-width:46ch; margin:0}
.terr8__body { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(24px,3vw,48px); align-items:center}
.terrfig { margin:0; display:flex; flex-direction:column; align-items:flex-start}
.terrfig__chip { position:relative; width:100%; max-width:470px; align-self:center}
.terrfig__chip img { display:block; border-radius:var(--r-2)}
.terrfig__badge {
position:absolute; right:-24px; bottom:-26px; z-index:2;
display:flex; flex-direction:column; align-items:center; gap:2px;
min-width:112px; padding:12px 16px 11px;
background:var(--white); color:var(--ink); border-radius:var(--r-3);
box-shadow:0 0 0 2px var(--ink), 6px 6px 0 var(--ink);
transform:rotate(-3.5deg);
transition:transform var(--t-max) var(--ease-out), box-shadow var(--t-max) var(--ease-out), background-color var(--t-move) var(--ease)}
.terrfig__badge b { font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem,2.6vw,2.375rem); line-height:.85}
.terrfig__badge em {
font-style:normal; font-size:var(--fs-micro); font-weight:700; text-align:center;
letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:rgba(0,0,0,.55);
transition:color var(--t-colour) var(--ease)}
.terrfig__badge b { transition:color var(--t-colour) var(--ease)}
.terr8[data-picked="true"] .terrfig__badge { transform:rotate(0deg) translateY(-4px); box-shadow:0 0 0 2px var(--cyan), 9px 9px 0 var(--ink)}
.terr8[data-picked="true"] .terrfig__badge b { color:var(--cyan)}
.terr8[data-picked="true"] .terrfig__badge em { color:var(--ink)}
.terrfig figcaption {
width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4);
margin-top:clamp(28px,3vw,44px); padding-top:var(--s-4); border-top:1px solid rgba(0,0,0,.14);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase}
.terrmap__go {
display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none;
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
padding-bottom:3px; border-bottom:2px solid var(--cyan);
transition:color var(--t-colour) var(--ease), border-color var(--t-colour) var(--ease)}
.terrmap__go i {
width:20px; height:8px; flex:none; background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4h17M13 0l5 4-5 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpath d='M0 4h17M13 0l5 4-5 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
transition:transform var(--t-move) var(--ease-out)}
.terrmap__go:hover { color:var(--cyan); border-color:var(--ink)}
.terrmap__go:hover i { transform:translateX(4px)}
.terr8__stack { display:flex; flex-direction:column; gap:clamp(10px,1.2vw,14px); padding-right:12px}
.tsk {
position:relative; isolation:isolate; overflow:hidden; width:100%; text-align:left;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
padding:var(--s-4) var(--s-5); border:0; cursor:pointer;
background:var(--white); color:var(--ink); border-radius:var(--r-3);
box-shadow:0 0 0 1px rgba(0,0,0,.14);
transform:rotate(var(--tilt,-1.2deg));
transition:transform var(--t-max) var(--ease-out), box-shadow var(--t-max) var(--ease-out), opacity var(--t-move) var(--ease)}
.tsk:nth-child(1) { --tilt:-1.2deg}
.tsk:nth-child(2) { --tilt:1deg}
.tsk:nth-child(3) { --tilt:-.7deg}
.tsk:hover, .tsk[aria-pressed="true"] { transform:rotate(0deg) translate(-3px,-3px); box-shadow:0 0 0 2px var(--ink), 10px 10px 0 var(--cyan)}
.terr8__stack.is-picked .tsk:not([aria-pressed="true"]):not(:hover) { opacity:.6}
.tsk__n {
position:absolute; top:8px; right:14px; z-index:0;
font-family:var(--font-display); font-size:clamp(1.875rem,2.6vw,2.5rem); line-height:.8;
-webkit-text-stroke:1.5px rgba(0,0,0,.16); color:transparent}
.tsk h3 { margin:0; display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; padding-right:52px}
.tsk__kick { font-family:var(--font-core); font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:rgba(0,0,0,.42); transition:color var(--t-colour) var(--ease)}
.tsk h3 em { font-family:var(--font-display); font-style:normal; font-size:clamp(1.25rem,1.7vw,1.625rem); line-height:.95; text-transform:uppercase; letter-spacing:.01em}
.tsk:hover .tsk__kick, .tsk[aria-pressed="true"] .tsk__kick { color:var(--cyan)}
.tsk p { margin:0; font-size:var(--fs-small); line-height:1.45; color:var(--ink-600); max-width:46ch}
.tsk__tag {
margin-top:2px; padding:5px 11px; border-radius:var(--r-pill);
font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase;
box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);
transition:background-color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.tsk:hover .tsk__tag, .tsk[aria-pressed="true"] .tsk__tag { background:var(--cyan); box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:1023px) {
.terr8__head { grid-template-columns:1fr; align-items:start; gap:var(--s-5)}
.terr8__body { grid-template-columns:1fr; gap:var(--s-6)}
}
@media (max-width:599px) {
.tsk h3 { padding-right:44px}
.terrfig figcaption { flex-direction:column; align-items:flex-start; gap:var(--s-3)}
.terrfig__badge { right:-8px; bottom:-16px; min-width:96px; padding:10px 13px 9px}
}
@media (prefers-reduced-motion: reduce) {
.tsk { transform:none; transition:box-shadow var(--t-colour) linear, opacity var(--t-colour) linear}
.tsk:hover, .tsk[aria-pressed="true"] { transform:none}
.terrfig__badge, .terrmap__go i { transition:background-color var(--t-colour) linear; transform:none}
}
/* forms.css */
.trustrow {
list-style:none; margin:var(--s-7) 0 0; padding:0;
display:flex; flex-wrap:wrap; gap:var(--s-3)}
.trustrow__i {
display:inline-flex; align-items:center; gap:9px;
font-size:13.5px; font-weight:700; line-height:1.15; color:var(--ink);
padding:8px 17px 8px 8px;
border-radius:var(--r-pill);
background:var(--white); box-shadow:inset 0 0 0 2px var(--ink), 4px 4px 0 var(--cyan);
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.trustrow__i:hover { transform:translate(-2px,-2px); box-shadow:inset 0 0 0 2px var(--ink), 7px 7px 0 var(--cyan)}
.trustrow__i:active { transform:translate(1px,1px); box-shadow:inset 0 0 0 2px var(--ink), 2px 2px 0 var(--cyan)}
.trustrow__i svg {
width:30px; height:30px; flex:none; box-sizing:border-box; padding:6.5px;
border-radius:50%; background:var(--pink);
fill:none; stroke:var(--white); stroke-width:1.9;
stroke-linecap:round; stroke-linejoin:round; opacity:1}
.s-cyan .trustrow__i, .s-cyan .creds li {
box-shadow:inset 0 0 0 2px var(--ink), 4px 4px 0 var(--ink)}
.s-cyan .trustrow__i:hover { box-shadow:inset 0 0 0 2px var(--ink), 7px 7px 0 var(--ink)}
.s-void .trustrow__i, .s-pink .trustrow__i, .footer .trustrow__i,
.s-void .creds li, .s-pink .creds li, .footer .creds li {
box-shadow:inset 0 0 0 2px var(--white), 4px 4px 0 var(--cyan)}
.est10__panel { align-self:start; box-shadow:inset 0 0 0 1px var(--ink-100), var(--offset-chip) var(--offset-chip) 0 var(--pink)}
.est10__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4)}
.est10__title {
font-family:var(--font-display); font-size:var(--fs-h3); line-height:.95;
text-transform:uppercase; color:var(--ink); margin:0}
.towndrop { position:relative; min-width:0}
.field .towndrop__native {
position:absolute; width:1px; height:1px; padding:0; margin:0; border:0;
opacity:0; pointer-events:none; clip-path:inset(50%)}
.towndrop__trigger {
width:100%; display:flex; align-items:center; gap:10px;
padding:15px 44px 15px 15px;
font-family:var(--font-core); font-size:var(--fs-body); font-weight:600; text-align:left;
color:var(--ink); background:var(--white);
border:var(--keyline) solid var(--ink-100); border-radius:var(--r-2);
cursor:pointer;
transition:border-color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.towndrop__trigger::after {
content:""; position:absolute; right:18px; top:50%; margin-top:-3px;
border:5px solid transparent; border-top:6px solid currentColor; border-bottom:0;
opacity:.75; transition:transform var(--t-colour) var(--ease)}
.towndrop__trigger:hover { border-color:var(--ink-400)}
.towndrop__trigger:focus-visible { outline:none; border-color:var(--ink); box-shadow:var(--focus-ring)}
.towndrop.is-open .towndrop__trigger { border-color:var(--ink)}
.towndrop.is-open .towndrop__trigger::after { transform:rotate(180deg)}
.towndrop.is-set .towndrop__trigger { border-color:var(--cyan); box-shadow:inset 0 0 0 1px var(--cyan)}
.towndrop__pin {
width:18px; height:18px; flex:none;
fill:none; stroke:var(--cyan); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
transition:stroke var(--t-colour) var(--ease)}
.towndrop.is-set .towndrop__pin { stroke:var(--ink)}
.towndrop__val { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.towndrop:not(.is-set) .towndrop__val { color:var(--ink-400); font-weight:500}
.towndrop__panel {
position:absolute; z-index:60; top:calc(100% + 10px); left:0; right:0;
background:var(--white); color:var(--ink);
border-radius:var(--r-3);
box-shadow:var(--offset-chip) var(--offset-chip) 0 var(--cyan), inset 0 0 0 1px var(--ink-100);
padding:var(--s-4);
max-height:312px; overflow-y:auto; overscroll-behavior:contain;
opacity:0; transform:translateY(8px); pointer-events:none;
transition:opacity var(--t-colour) var(--ease), transform var(--t-move) var(--ease)}
.towndrop.is-open .towndrop__panel { opacity:1; transform:none; pointer-events:auto}
.towndrop__k {
font-family:var(--font-core); font-size:var(--fs-micro); font-weight:700; line-height:var(--lh-heading);
letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400);
margin:0 0 6px; padding:0 6px}
.towndrop__grp + .towndrop__grp { margin-top:var(--s-4); padding-top:var(--s-4); border-top:var(--hairline)}
.towndrop__opts { display:grid; grid-template-columns:1fr 1fr; gap:2px}
.towndrop--list .towndrop__opts { grid-template-columns:1fr}
.towndrop__o {
display:block; width:100%; text-align:left;
font-family:var(--font-core); font-size:var(--fs-small); font-weight:600; color:var(--ink);
background:none; border:0; border-radius:var(--r-2);
padding:9px 10px; cursor:pointer;
transition:background-color var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.towndrop__o:hover, .towndrop__o.is-cursor { background:var(--ink-050)}
.towndrop__o[aria-selected="true"] { background:var(--cyan); color:var(--white)}
.towndrop__o:focus-visible { outline:none; box-shadow:var(--focus-ring)}
.towndrop__all {
grid-column:1/-1; text-align:center; font-weight:700; color:var(--pink);
border-top:var(--hairline); border-radius:0;
margin-top:var(--s-3); padding-top:var(--s-3)}
.towndrop__all:hover { background:none; text-decoration:underline}
.needs { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:var(--s-3)}
.need { position:relative; display:block; height:100%}
.field .need { font-size:var(--fs-body); font-weight:400; letter-spacing:0; text-transform:none; opacity:1}
.need input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; cursor:pointer}
.need__box {
position:relative; height:100%;
display:grid; gap:2px; justify-items:start; align-content:start;
padding:14px 14px 13px;
border-radius:var(--r-3);
background:var(--white);
box-shadow:inset 0 0 0 var(--keyline) var(--ink-100);
cursor:pointer;
transition:box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease), background-color var(--t-colour) var(--ease)}
.need__ico {
width:30px; height:30px; margin-bottom:8px;
fill:none; stroke:var(--ink-600); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
transition:stroke var(--t-colour) var(--ease), transform var(--t-move) var(--ease-out)}
.need__ico .need__ac { stroke:var(--cyan)}
.need__box b { font-size:var(--fs-small); font-weight:700; line-height:1.2}
.need__box em { font-style:normal; font-size:11px; line-height:1.3; color:var(--ink-600)}
.need input:hover + .need__box { box-shadow:inset 0 0 0 var(--keyline) var(--ink); transform:translateY(-2px)}
.need input:hover + .need__box .need__ico { stroke:var(--ink); transform:scale(1.06)}
.need input:focus-visible + .need__box { box-shadow:inset 0 0 0 var(--keyline) var(--ink), var(--focus-ring)}
.need input:checked + .need__box {
background:var(--cyan);
box-shadow:inset 0 0 0 var(--keyline) var(--ink), 5px 5px 0 var(--ink);
transform:translateY(-2px)}
.need input:checked + .need__box b { color:var(--white)}
.need input:checked + .need__box em { color:rgba(255,255,255,.82)}
.need input:checked + .need__box .need__ico { stroke:var(--white)}
.need input:checked + .need__box .need__ico .need__ac { stroke:var(--ink)}
.need input:checked + .need__box::after {
content:""; position:absolute; top:10px; right:10px;
width:8px; height:14px; border-right:2.5px solid var(--white); border-bottom:2.5px solid var(--white);
transform:rotate(42deg)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent { position:relative; align-items:center; gap:11px; font-size:12.5px; line-height:1.4; opacity:1; color:var(--ink-600)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent input { position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; border:0}
:where(.est10, .drawer--est, .areaform, .svcform) .consent__box {
width:22px; height:22px; flex:none; border-radius:7px;
display:grid; place-items:center;
background:var(--white); box-shadow:inset 0 0 0 var(--keyline) var(--ink-400);
cursor:pointer;
transition:background-color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent__box svg {
width:13px; height:13px; fill:none; stroke:var(--white);
stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:18; stroke-dashoffset:18;
transition:stroke-dashoffset var(--t-move) var(--ease-out)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent:hover .consent__box { box-shadow:inset 0 0 0 var(--keyline) var(--ink)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent input:checked + .consent__box { background:var(--cyan); box-shadow:inset 0 0 0 var(--keyline) var(--ink), 3px 3px 0 var(--ink)}
:where(.est10, .drawer--est, .areaform, .svcform) .consent input:checked + .consent__box svg { stroke-dashoffset:0}
:where(.est10, .drawer--est, .areaform, .svcform) .consent input:focus-visible + .consent__box { box-shadow:inset 0 0 0 var(--keyline) var(--ink), var(--focus-ring)}
@media (prefers-reduced-motion:reduce) {
:where(.est10, .drawer--est, .areaform, .svcform) .consent__box svg { transition:none}
.need input:hover + .need__box,
.need input:checked + .need__box,
.trustrow__i:hover { transform:none}
.need__ico { transition:none}
}
@media (max-width:479px) {
.towndrop__opts { grid-template-columns:1fr}
.need__box { padding:12px}
.need__ico { width:26px; height:26px}
}
/* s7b-cutaway.css */
.info { --now:var(--cyan-ink); --now-ink:var(--ink); --was:var(--pink); --pill:#dcf0fd; --pill-line:#b4e0f8}
.info--closed { --now:var(--pink); --now-ink:var(--white); --was:var(--cyan); --pill:#fde0ed; --pill-line:#f7c2da}
.info__switch { display:flex; flex-direction:column; align-items:flex-end}
.swx { position:relative; display:flex; padding:5px; border-radius:var(--r-pill); background:var(--white); box-shadow:inset 0 0 0 1px var(--ink-100)}
.swx__slide {
position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
border-radius:var(--r-pill); background:var(--ink); box-shadow:4px 4px 0 var(--now);
transition:transform var(--t-max) var(--ease-out), box-shadow var(--t-colour) var(--ease)}
.info--closed .swx__slide { transform:translateX(100%)}
.swx__o { position:relative; z-index:1}
.swx__o input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer}
.swx__o span {
display:block; padding:12px clamp(16px,2.4vw,30px); border-radius:var(--r-pill); cursor:pointer;
font-family:var(--font-display); font-size:clamp(1rem,1.5vw,1.35rem); letter-spacing:.02em; text-transform:uppercase;
color:var(--ink-400); transition:color var(--t-colour) var(--ease)}
.swx__o input:checked + span { color:var(--white)}
.swx__o input:focus-visible + span { box-shadow:var(--focus-ring)}
@media (max-width:767px) { .info__switch { align-items:flex-start} .swx__o span { padding:11px 18px} }
.info__grid { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s-4); align-items:stretch}
@media (max-width:1023px) { .info__grid { grid-template-columns:1fr} }
.info__card { margin:0; padding:clamp(16px,1.7vw,22px); background:var(--white); border-radius:var(--r-3); box-shadow:inset 0 0 0 1px var(--ink-100)}
.info__card figcaption { display:flex; flex-direction:column; gap:3px; margin-bottom:12px}
.info__card figcaption b { font-size:var(--fs-h4); font-weight:700}
.info__card figcaption em { font-style:normal; font-size:var(--fs-small); color:var(--ink-600)}
.info__k { margin:0 0 12px; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400)}
.info__k em { font-style:normal; color:var(--now)}
.cut { display:block; width:100%; height:auto}
.cut__sheath { fill:var(--ink-050)}
.cut__grain { stroke:var(--ink-100); stroke-width:1.2}
.cut__stud { fill:var(--ink-050); stroke:var(--ink-100); stroke-width:1.5}
.cut__board { fill:var(--ink-100)}
.cut__fill { fill:color-mix(in srgb, var(--now) 9%, var(--white)); transition:fill var(--t-max) var(--ease)}
.cut__cells { transition:opacity var(--t-max) var(--ease)}
.cut pattern circle { fill:color-mix(in srgb, var(--now) 30%, var(--white)); stroke:color-mix(in srgb, var(--now) 58%, var(--white)); stroke-width:1.2; transition:fill var(--t-max) var(--ease), stroke var(--t-max) var(--ease)}
.cut__cells--closed, .info--closed .cut__cells--open { opacity:0}
.info--closed .cut__cells--closed { opacity:1}
.cut__face { stroke:var(--now); stroke-width:3; fill:none; transition:stroke var(--t-max) var(--ease)}
.cut__lbl { fill:var(--ink-400); font-family:var(--font-core); font-size:10px; font-weight:800; letter-spacing:.1em}
.cut__res { fill:var(--ink); font-family:var(--font-core); font-size:10px; font-weight:800; letter-spacing:.1em}
.cut__in { stroke:var(--ink); stroke-width:2.4; fill:none}
.cut__out { stroke:var(--ink-400); stroke-width:2.4; stroke-dasharray:7 6; fill:none; opacity:0; transition:opacity var(--t-move) var(--ease)}
.cut__stop circle { fill:var(--now); transition:fill var(--t-max) var(--ease)}
.cut__stop path { stroke:var(--now-ink); stroke-width:2.6; fill:none; stroke-linecap:round; transition:stroke var(--t-max) var(--ease)}
.cut__stop { transition:opacity var(--t-move) var(--ease), transform var(--t-max) var(--ease-out)}
.cut__back { opacity:0; transition:opacity var(--t-move) var(--ease)}
.cut__back path { stroke:var(--now); stroke-width:2.4; stroke-dasharray:7 6; fill:none; transition:stroke var(--t-max) var(--ease)}
.cut__backhead { stroke-dasharray:none !important; stroke-linecap:round; stroke-linejoin:round}
.cut__test.is-bounce .cut__back { opacity:1}
.cut__test.is-through .cut__out { opacity:1}
.cut__test.is-through .cut__stop { opacity:0}
.cut__test.is-through .cut__in { stroke:var(--ink-400); stroke-dasharray:7 6}
.cut__side text { fill:var(--ink-400); font-family:var(--font-core); font-size:9.5px; font-weight:800; letter-spacing:.12em}
.cut__depth { fill:var(--ink-400)}
.meters { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.meter { display:grid; grid-template-columns:1fr auto; gap:3px 12px}
.meter__k { font-size:var(--fs-small); font-weight:700}
.meter__k em { font-style:normal; font-weight:400; color:var(--ink-400)}
.meter__v { font-family:var(--font-display); font-size:1.4rem; line-height:1; color:var(--now); font-variant-numeric:tabular-nums; transition:color var(--t-max) var(--ease)}
.meter__bar { position:relative; grid-column:1 / -1; height:10px; border-radius:var(--r-pill); background:var(--ink-050); box-shadow:inset 0 0 0 1px var(--ink-100); overflow:hidden}
.meter__bar i { position:absolute; inset:0 auto 0 0; width:var(--v,0%); border-radius:var(--r-pill); background:var(--now); transition:width var(--t-slab) var(--ease-out), background-color var(--t-max) var(--ease)}
.meter__bar b { position:absolute; top:-2px; bottom:-2px; left:var(--g,0%); width:2px; background:var(--was); opacity:.55; transition:left var(--t-slab) var(--ease-out), background-color var(--t-max) var(--ease)}
.meters__key { display:flex; align-items:center; gap:8px; margin:16px 0 0; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400)}
.meters__key i { width:14px; height:8px; border-radius:var(--r-pill)}
.meters__key .k-now { background:var(--now)}
.meters__key .k-ghost { width:2px; height:14px; border-radius:0; background:var(--was); margin-left:10px}
.info__cut { display:flex; flex-direction:column}
.info__where { margin-top:auto; padding-top:16px; border-top:var(--hairline)}
.info__where .info__k { margin-bottom:10px}
.info__tags { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.info__tags li {
display:inline-flex; align-items:center;
padding:9px 15px; border-radius:var(--r-pill);
background:var(--pill); box-shadow:inset 0 0 0 1px var(--pill-line);
font-size:12.5px; font-weight:700; line-height:1; color:var(--ink);
transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease),
background-color var(--t-max) var(--ease);
animation:infoTag 380ms var(--ease-out) backwards}
.info__tags li:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--pill-line), 4px 4px 0 var(--ink)}
.info__tags li:nth-child(2) { animation-delay:40ms} .info__tags li:nth-child(3) { animation-delay:80ms}
.info__tags li:nth-child(4) { animation-delay:120ms} .info__tags li:nth-child(5) { animation-delay:160ms}
@keyframes infoTag { from { opacity:0; transform:translateY(8px)} }
.info__data { display:flex; flex-direction:column}
.info__line { margin:16px 0 0; margin-top:auto; padding-top:16px; border-top:var(--hairline); font-size:var(--fs-small); color:var(--ink-600)}
@media (prefers-reduced-motion:reduce) {
.swx__slide, .meter__bar i, .meter__bar b { transition:none}
.info__tags li { animation:none}
}
/* sections.css */
.close11 {
--slab-bg: #d9dcde;
--slab-fg: var(--ink);
--type-shadow: var(--cyan);
--grey-lift: #e6e8ea;
--grey-deep: #c4c8cb;
border-radius: 0;
isolation: isolate}
.close11::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--grey-lift) 0%, var(--slab-bg) 52%, var(--grey-deep) 100%),
repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 1px, transparent 1px 84px),
repeating-linear-gradient(0deg,  rgba(0,0,0,.055) 0 1px, transparent 1px 84px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,1));
mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,1))}
.close11::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-image: var(--void-tooth); background-size: 180px 180px; opacity: .06}
.close11 .slab__in { z-index: 3}
.close11__split { display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--s-7); align-items: center}
.close11 .btn-row { margin-top: var(--s-5)}
.close11__cta { align-items: center; gap: var(--s-5)}
.close11__call {
display: inline-flex; align-items: center; gap: 11px;
text-decoration: none; color: var(--ink);
padding: 6px 4px; border-radius: var(--r-2)}
.close11__call__ic {
width: 40px; height: 40px; flex: none; display: grid; place-items: center;
border-radius: 50%; background: transparent;
box-shadow: inset 0 0 0 var(--keyline) var(--ink);
transition: background-color var(--t-colour) var(--ease), box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.close11__call__ic svg {
width: 17px; height: 17px; fill: none; stroke: var(--ink);
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
transition: stroke var(--t-colour) var(--ease)}
.close11__call__t { display: grid; line-height: 1.15}
.close11__call__t em {
font-style: normal; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-600)}
.close11__call__t b {
font-size: 1.0625rem; font-weight: 700; letter-spacing: .01em;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
transition: box-shadow var(--t-colour) var(--ease)}
.close11__call:hover .close11__call__ic { background: var(--cyan); box-shadow: inset 0 0 0 var(--keyline) var(--ink), 4px 4px 0 var(--ink); transform: translateY(-2px)}
.close11__call:hover .close11__call__ic svg { stroke: var(--ink)}
.close11__call:hover .close11__call__t b { box-shadow: inset 0 -2px 0 var(--ink)}
.close11__call:focus-visible { outline: none; box-shadow: var(--focus-ring)}
@media (max-width: 599px) { .close11__cta { gap: var(--s-4)} .close11__cta .btn { width: 100%} }
@media (prefers-reduced-motion: reduce) { .close11__call:hover .close11__call__ic { transform: none} }
.close11__h { font-size: clamp(2.125rem, 1rem + 3.8vw, 4rem)}
.close11__h .w {
display: inline-block;
opacity: 0; transform: translateY(.42em) rotate(2.5deg);
transition: opacity 520ms var(--ease-out), transform 640ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 60ms)}
.close11.is-in .close11__h .w { opacity: 1; transform: none}
.close11 .lede { margin-top: var(--s-4); max-width: 44ch; font-size: clamp(1rem, .95rem + .3vw, 1.125rem)}
.close11__ticks {
list-style: none; padding: 0; margin: var(--s-5) 0 0;
display: flex; flex-wrap: wrap; gap: 12px 11px}
.close11__ticks li {
display: flex; align-items: center; gap: 8px;
background: var(--white); color: var(--ink);
border-radius: var(--r-pill); padding: 9px 16px;
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
box-shadow: var(--offset-type) var(--offset-type) 0 var(--ink);
opacity: 0; transform: translateY(10px) rotate(var(--rot, -1.2deg));
transition: opacity 420ms var(--ease-out), transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.close11__ticks li:nth-child(2) { --rot: 1.1deg}
.close11__ticks li:nth-child(3) { --rot: -.6deg}
.close11.is-in .close11__ticks li { opacity: 1; transform: rotate(var(--rot, -1.2deg)); transition-delay: calc(340ms + var(--i, 0) * 80ms)}
.close11.is-in .close11__ticks li:hover {
transform: rotate(0deg) translateY(-3px);
box-shadow: 7px 7px 0 var(--cyan);
transition-delay: 0ms}
.close11__ticks li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none}
.close11__fig {
position: relative; z-index: 2; justify-self: end;
width: min(520px, 100%);
transform: translate3d(0, var(--py, 0px), 0)}
.close11__figin { position: relative; display: block; transform: rotate(var(--tilt, 0deg)); transition: transform 500ms var(--ease-out)}
.close11__plate {
position: absolute; left: -2%; right: -2%; bottom: 6%; height: 56%; z-index: 0;
border-radius: var(--r-slab);
background:
repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, transparent 3px 98px),
linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.06)),
var(--cyan);
box-shadow: 10px 10px 0 var(--ink);
transform: rotate(-1.6deg)}
.close11__plate::before {
content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 32px;
background: var(--white);
-webkit-mask-image: url("../assets/img/foam-edge-top.png");
mask-image: url("../assets/img/foam-edge-top.png");
-webkit-mask-size: auto 100%; mask-size: auto 100%;
-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
mask-mode: alpha;
animation: close11Drift 26s linear infinite}
.close11__stamp {
position: absolute; left: 5%; bottom: 13%; z-index: 3;
display: inline-flex; align-items: baseline; gap: 6px;
background: var(--white); color: var(--ink);
padding: 8px 14px; border-radius: var(--r-pill);
box-shadow: var(--offset-type) var(--offset-type) 0 var(--ink);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
transform: rotate(-2deg)}
.close11__stamp b { font-family: var(--font-display); font-size: 15px; letter-spacing: 0; color: var(--pink)}
.close11__gnome { position: relative; z-index: 2; width: 100%; height: auto; animation: close11Bob 6.5s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(0,0,0,.20))}
@keyframes close11Bob   { 0%,100% { transform: translateY(0)} 50% { transform: translateY(-12px)} }
@keyframes close11Drift { to { -webkit-mask-position: 480px 0; mask-position: 480px 0} }
@media (max-width: 1023px) {
.close11__split { grid-template-columns: 1fr; gap: var(--s-7)}
.close11__fig { justify-self: center; width: min(320px, 72%)}
}
@media (prefers-reduced-motion: reduce) {
.close11__h .w,
.close11__ticks li { opacity: 1 !important; transform: none !important; transition: none !important}
.close11__gnome, .close11__plate::before { animation: none !important}
.close11__fig { transform: none !important}
}
.hearth {
position: relative;
background: var(--ink);
color: var(--white);
isolation: isolate;
--cta-shadow: 7px 7px 0 var(--white);
--cta-shadow-press: 2px 2px 0 var(--white)}
.hearth::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--void-tooth); background-size: 180px 180px; opacity: .05}
.hearth__in {
position: relative; z-index: 2;
max-width: var(--container); margin-inline: auto;
padding: clamp(20px, 2.4vw, 32px) var(--slab-pad-x);
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: clamp(18px, 2.6vw, 34px)}
.hearth__tile {
flex: none; display: grid; place-items: center;
width: clamp(64px, 6vw, 84px); aspect-ratio: 1;
background: var(--white); border-radius: var(--r-3);
box-shadow: var(--offset-type) var(--offset-type) 0 var(--cyan)}
.hearth__ico { width: 68%; height: 68%; display: block}
.hearth__ico .hearth__cal,
.hearth__ico .hearth__grid path {
fill: none; stroke: var(--ink); stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round}
.hearth__ico .hearth__grid path { stroke-width: 2.8; opacity: .28}
.hearth__coin { fill: var(--pink); stroke: var(--white); stroke-width: 2.6}
.hearth__dollar { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round}
.hearth__brand {
display: flex; align-items: center; gap: 8px;
margin: 0 0 6px; max-width: none;
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--on-void)}
.hearth__logo {
flex: none; display: block; width: auto;
height: clamp(26px, 2.1vw, 32px)}
.hearth__thru { position: relative; padding-left: 9px; color: var(--on-void-dim)}
.hearth__thru::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 1px; height: 11px; margin-top: -5.5px; background: var(--void-line)}
.hearth__h {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.5rem, 0.9rem + 1.9vw, 2.5rem);
line-height: 1.02; letter-spacing: .005em; text-transform: uppercase;
color: var(--white)}
.hearth__sub {
margin: 7px 0 0;
font-size: var(--fs-small); line-height: 1.4;
color: var(--on-void)}
.hearth__sub b { color: var(--cyan); font-weight: 700}
.hearth__cta { justify-self: end}
@media (min-width: 720px) {
.hearth__sub { white-space: nowrap}
}
@media (min-width: 720px) and (max-width: 1023px) {
.hearth__sub { font-size: clamp(12.5px, 1.45vw, 15px)}
}
@media (max-width: 1023px) {
.hearth__in { gap: clamp(14px, 2.2vw, 24px)}
.hearth__tile { width: clamp(56px, 8vw, 68px)}
.hearth__cta { padding: 16px var(--s-6)}
}
@media (max-width: 719px) {
.hearth__in {
grid-template-columns: auto 1fr;
row-gap: clamp(16px, 3vw, 24px)}
.hearth__cta { grid-column: 1 / -1; justify-self: start}
}
@media (max-width: 559px) {
.hearth__in { grid-template-columns: 1fr}
.hearth__tile { width: 58px}
.hearth__cta { width: 100%}
}
/* pages.css */
.crumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-bottom: var(--s-5);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: color-mix(in srgb, currentColor 52%, transparent)}
.crumb a {
color: color-mix(in srgb, currentColor 58%, transparent);
text-decoration: none;
text-underline-offset: 3px;
transition: color var(--t-colour) var(--ease)}
.crumb a:hover, .crumb a:focus-visible { color: var(--cyan); text-decoration: underline}
.crumb [aria-current] {
display: inline-flex; align-items: center; gap: 7px;
color: var(--ink); font-weight: 700}
.crumb [aria-current]::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--cyan); flex: none}
.s-void .crumb [aria-current], .s-pink .crumb [aria-current] { color: var(--white)}
.crumb i { font-style: normal; color: color-mix(in srgb, currentColor 30%, transparent)}
.svc { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: var(--s-8); align-items: start}
.svc__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-8)}
.svc__aside { min-width: 0}
.svc__rail { display: flex; flex-direction: column; gap: var(--s-5)}
@media (min-width: 1024px) {
.svc__rail { position: sticky; top: calc(var(--chrome-h) + var(--s-5))}
}
@media (max-width: 1023px) {
.svc { grid-template-columns: 1fr; gap: var(--s-8)}
.svc__main { gap: var(--s-7)}
.svc__aside { max-width: none}
.svcform .form-grid { gap: var(--s-4)}
.svcform .needs { grid-template-columns: repeat(4, 1fr)}
.svcform .field label { font-size: var(--fs-small)}
}
@media (max-width: 719px) {
.svcform .needs { grid-template-columns: 1fr 1fr}
}
.svc__block > h2 {
font-family: var(--font-display); text-transform: uppercase;
font-size: var(--fs-h2); line-height: var(--lh-display);
margin: 0 0 var(--s-6)}
.sidecard {
background: var(--white); color: var(--ink);
border-radius: var(--r-3);
padding: var(--s-5);
box-shadow: inset 0 0 0 var(--keyline) var(--ink-100)}
.sidecard--lead { box-shadow: inset 0 0 0 var(--keyline) var(--ink), var(--offset-chip) var(--offset-chip) 0 var(--cyan)}
.sidecard h3 {
font-family: var(--font-display); text-transform: uppercase;
font-size: var(--fs-h3); line-height: var(--lh-display); margin: 0}
.sidecard > p { font-size: var(--fs-small); color: var(--ink-600); margin: var(--s-2) 0 0}
.sidecard .form-grid { margin-top: var(--s-5)}
.sidecard .btn { margin-top: var(--s-5)}
.sidecard--fact { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; box-shadow: inset 0 0 0 var(--keyline) var(--ink-100)}
.sidecard--fact .sidecard__ic {
width: 40px; height: 40px; border-radius: var(--r-2);
display: grid; place-items: center; background: var(--cyan)}
.sidecard--fact .sidecard__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round}
.sidecard--fact h3 { font-family: var(--font-core); font-size: var(--fs-h4); text-transform: none; letter-spacing: 0}
.sidecard--fact p { font-size: var(--fs-small); color: var(--ink-600); margin: 4px 0 0}
.sidecard--call { background: var(--ink); color: var(--white); box-shadow: var(--offset-chip) var(--offset-chip) 0 var(--pink)}
.sidecard--call .sidecard__k {
display: block; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--on-void-dim)}
.sidecard--call a {
display: inline-block; margin-top: var(--s-2); text-decoration: none;
font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1;
color: var(--white); transition: color var(--t-colour) var(--ease)}
.sidecard--call a:hover { color: var(--cyan)}
.sidecard--call p { color: var(--on-void); font-size: var(--fs-small); margin: var(--s-3) 0 0}
.sidecard__k--list {
display: block; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink-400); margin-bottom: var(--s-3)}
.svclinks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3)}
.svclinks a {
display: grid; grid-template-columns: 64px minmax(0, 1fr);
align-items: center; gap: var(--s-4);
padding: 10px 12px;
border-radius: var(--r-2);
box-shadow: inset 0 0 0 1px var(--ink-100);
text-decoration: none;
transition: box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.svclinks a:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--ink)}
.svclinks a:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ink), var(--focus-ring)}
.svclinks img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-1)}
.svclinks span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-400)}
.slab .svclinks b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; margin-bottom: 3px}
.svclinks a:hover b { color: var(--cyan)}
.linklist { list-style: none; padding: 0; margin: 0}
.linklist li + li { border-top: 1px solid var(--ink-100)}
.linklist a {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: 13px 0; text-decoration: none; color: var(--ink);
font-size: var(--fs-small); font-weight: 600;
transition: color var(--t-colour) var(--ease), padding-left var(--t-move) var(--ease)}
.linklist a::after {
content: "→"; font-size: 1.05rem; color: var(--ink-400); flex: none;
transition: transform var(--t-move) var(--ease), color var(--t-colour) var(--ease)}
.linklist a:hover { color: var(--cyan); padding-left: 6px}
.linklist a:hover::after { transform: translateX(4px); color: var(--cyan)}
.linklist a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1)}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain}
.tablewrap .matrix { min-width: 640px}
.tablenote, .slab .tablenote { font-size: var(--fs-micro); color: color-mix(in srgb, currentColor 58%, transparent); margin: var(--s-4) 0 0; line-height: 1.5; max-width: none}
.svcsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; position: relative}
.svcsteps .steps__i {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5);
align-items: start; position: relative;
padding: 0 0 var(--s-6);
list-style: none}
.svcsteps .steps__i::marker { content: ""}
.svcsteps .steps__i:last-child { padding-bottom: 0}
.svcsteps .steps__i::before {
content: ""; position: absolute; left: 23px; top: 44px; bottom: -4px; width: 2px;
background: linear-gradient(to bottom, var(--cyan), rgba(5, 168, 236, .18))}
.svcsteps .steps__i:last-child::before { display: none}
.svcsteps .steps__n {
font-family: var(--font-display); font-size: 22px; line-height: 1;
width: 48px; height: 48px; flex: none;
display: grid; place-items: center;
border-radius: var(--r-pill);
color: var(--ink); background: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink);
position: relative; z-index: 1;
transition: background-color var(--t-move) var(--ease), color var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.svcsteps .steps__i:hover .steps__n,
.svcsteps .steps__i:focus-within .steps__n {
background: var(--cyan); color: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink), 4px 4px 0 var(--ink)}
.svcsteps .steps__b h3 {
font-family: var(--font-core); font-weight: 700; font-size: var(--fs-h4);
text-transform: none; letter-spacing: 0; line-height: 1.25;
margin: 0 0 6px; padding-top: 12px}
.svcsteps .steps__b p { font-size: var(--fs-small); margin: 0; color: var(--ink-600); max-width: 42ch}
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4)}
.step {
padding: var(--s-5); border-radius: var(--r-3);
box-shadow: inset 0 0 0 var(--keyline) color-mix(in srgb, currentColor 16%, transparent);
transition: box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.step:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 var(--keyline) currentColor}
.step__n { font-family: var(--font-display); font-size: 2.5rem; line-height: .8; color: var(--cyan); display: block}
.step h3 { font-family: var(--font-core); font-weight: 700; font-size: var(--fs-h4); text-transform: none; letter-spacing: 0; margin: var(--s-4) 0 var(--s-2)}
.step p { font-size: var(--fs-small); margin: 0; color: color-mix(in srgb, currentColor 68%, transparent)}
.ph--tall { aspect-ratio: 3/4}
@media (max-width: 1023px) {
.svc-hero .shot { aspect-ratio: 3/2}
.svc-hero .shot img { width: 100%; height: 100%; object-fit: cover; max-height: none}
.svc-hero .shot::after { height: clamp(38px, 6vw, 54px)}
}
@media (max-width: 599px) { .svc-hero .shot { aspect-ratio: 4/3} }
@media (max-width: 599px) { .ph--tall { aspect-ratio: 4/3} }
.matrix td .shot { width: 158px; border-radius: var(--r-2)}
.matrix td .shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block}
.matrix .go { color: var(--cyan)}
.s-white .matrix .go, .s-sunken .matrix .go { color: var(--pink)}
.vs-slab .head { margin-bottom: clamp(28px, 3.4vw, 48px)}
.vs-slab .head .lede { text-wrap: balance}
.u-sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap}
.tablewrap .matrix--vs, .matrix--vs {
min-width: 880px; border-collapse: separate; border-spacing: 0;
table-layout: fixed}
.matrix--vs thead th { border-bottom: 0; padding: 0}
.matrix--vs thead th:first-child { width: 150px}
.matrix--vs .vs__col { width: calc((100% - 150px) / 4)}
.tablewrap .matrix--vs2, .matrix--vs2 { min-width: 640px}
.matrix--vs2 .vs__col { width: calc((100% - 150px) / 2)}
.vs__col {
vertical-align: top;
padding: var(--s-4) var(--s-4) var(--s-5) !important;
background: var(--white);
border-radius: var(--r-3) var(--r-3) 0 0}
.vs__flag {
display: inline-block; margin-bottom: var(--s-3);
padding: 5px 12px; border-radius: var(--r-pill);
background: var(--pink); color: var(--white);
font-family: var(--font-core); font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase}
.vs__flag--ghost { visibility: hidden}
.vs__name { min-height: 2.4em}
.vs__col--champ { box-shadow: inset var(--keyline) 0 0 var(--pink), inset calc(var(--keyline) * -1) 0 0 var(--pink), inset 0 var(--keyline) 0 var(--pink)}
.vs__cell--champ { box-shadow: inset var(--keyline) 0 0 var(--pink), inset calc(var(--keyline) * -1) 0 0 var(--pink)}
.matrix--vs tbody tr:last-child .vs__cell--champ {
box-shadow: inset var(--keyline) 0 0 var(--pink), inset calc(var(--keyline) * -1) 0 0 var(--pink),
inset 0 calc(var(--keyline) * -1) 0 var(--pink)}
.vs__shot { display: block; border-radius: var(--r-2); overflow: hidden}
.vs__shot img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block}
.vs__shot--ph {
display: flex; flex-direction: column; justify-content: center; align-items: center;
aspect-ratio: 16/10; min-height: 0; padding: var(--s-4);
gap: 7px; text-align: center}
.vs__shot--ph .ph__l {
font-family: var(--font-core); font-size: 9.5px; line-height: 1.25;
letter-spacing: var(--track-eyebrow); text-transform: uppercase}
.vs__shot--ph .ph__b {
font-family: var(--font-core); font-size: 10.5px; line-height: 1.4;
font-weight: 400; letter-spacing: 0; text-transform: none; max-width: none}
@media (max-width: 899px) { .vs__shot--ph .ph__b { display: none} }
.vs__name {
display: block; margin-top: var(--s-4);
font-family: var(--font-core); font-weight: 700; font-size: var(--fs-h4);
text-transform: none; letter-spacing: 0; line-height: 1.2; color: var(--ink)}
.vs__r {
display: block; margin-top: var(--s-3);
font-family: var(--font-display); font-size: clamp(1.75rem, 2.2vw, 2.5rem);
line-height: .9; color: var(--cyan-ink)}
.vs__r small { font-size: .34em; color: var(--ink-400); letter-spacing: .06em}
.vs__bar {
display: block; margin-top: var(--s-3);
height: 8px; border-radius: var(--r-pill); background: var(--ink-100);
overflow: hidden}
.vs__bar i {
display: block; height: 100%; width: var(--r, 100%);
border-radius: var(--r-pill); background: var(--cyan)}
.matrix--vs tbody th, .matrix--vs tbody td {
border-bottom: 1px solid var(--ink-100)}
.matrix--vs tbody td { background: var(--white)}
.matrix--vs tbody tr:last-child td { border-bottom: 0; border-radius: 0 0 var(--r-3) var(--r-3)}
.matrix--vs tbody th { opacity: 1; color: var(--ink-600)}
.vs__win { color: var(--cyan-ink); font-weight: 700}
.slab.vs-slab .matrix--vs a.go { color: var(--pink)}
.vs__flag { white-space: nowrap}
.svcform .svcform__sub { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-600)}
.svcform form { margin-top: var(--s-4)}
.svcform .form-grid { margin-top: 0; gap: var(--s-3)}
.svcform .field label { font-size: var(--fs-micro)}
.svcform .towndrop__panel { max-height: min(320px, 44vh)}
.svcform .needs { gap: 8px}
.svcform .need__box { padding: 10px 10px 9px}
.svcform .need__ico { width: 24px; height: 24px; margin-bottom: 5px}
.svcform .need__box b { font-size: 12.5px}
.svcform .need__box em { display: none}
.svcform .consent { margin-top: var(--s-4)}
.svcform .btn--block { margin-top: var(--s-4)}
@media (max-width: 1023px) {
.svcform .need__box em { display: block}
}
.tablewrap { position: relative}
.tablehint { display: none; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--cyan); margin: var(--s-3) 0 0}
.tablehint::after { content: " \2192"}
@media (max-width: 899px) {
.tablehint { display: block}
.tablewrap::after {
content: ""; position: absolute; inset: 0 0 0 auto; width: 44px;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--slab-bg, var(--white)))}
}
.hero-types { overflow: clip}
.hero-types .slab__in {
min-height: 100svh;
display: grid;
align-content: center;
padding-block: calc(var(--chrome-h) + var(--s-5)) var(--s-7)}
.stack > .hero-types.slab:first-child { padding-top: 0}
.hero-types h1 { margin: 0}
@media (min-width: 1180px) and (min-height: 620px) and (pointer: fine) {
.hero-types h1 { font-size: clamp(2.5rem, 8.4vh, 5.5rem)}
}
.hero-types .crumb { margin-bottom: var(--s-6)}
.hero-types .eyebrow { margin: 0 0 var(--s-4)}
.hero-types .lede { margin-top: var(--s-5); max-width: 48ch}
.hero-types .creds { margin-top: var(--s-6); max-width: none}
.qz { display: flex; flex-direction: column; gap: 0;
padding: 0; overflow: clip}
.qz__head {
position: sticky; top: var(--chrome-h); z-index: 2;
display: flex; align-items: flex-start; gap: var(--s-4);
padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
background: var(--white);
border-bottom: var(--hairline)}
.qz__headtext { min-width: 0; flex: 1}
.qz__title {
font-family: var(--font-display);
font-size: clamp(1.25rem, .95rem + .95vw, 1.75rem);
line-height: 1; text-transform: uppercase; color: var(--ink);
margin: 0; white-space: nowrap}
.qz__sub { margin: var(--s-2) 0 0; font-size: var(--fs-small)}
.qz__restart {
flex: none; width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: none; border: 0; padding: 0; color: var(--ink);
box-shadow: inset 0 0 0 var(--keyline) var(--ink-100);
transition: background-color var(--t-colour) var(--ease),
box-shadow var(--t-colour) var(--ease),
color var(--t-colour) var(--ease),
transform var(--t-move) var(--ease)}
.qz__restart[hidden] { display: none}
.qz__restart svg { width: 18px; height: 18px}
.qz__restart:hover:not(:disabled) {
background: var(--ink); color: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink)}
.qz__restart:active:not(:disabled) { transform: rotate(-45deg)}
.qz__restart:focus-visible { box-shadow: var(--focus-ring)}
.qz__body {
min-height: 205px; display: grid;
padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px)}
.qz__q, .qz__result { grid-area: 1 / 1}
.qz__q { border: 0; padding: 0; margin: 0; min-width: 0; display: none}
.qz__q.is-on { display: block; animation: qz-in var(--t-max) var(--ease-out) both}
.qz__legend {
padding: 0; margin: 0 0 var(--s-4);
font-weight: 700; font-size: var(--fs-h4); color: var(--ink)}
@keyframes qz-in {
from { opacity: 0; transform: translateY(8px)}
to   { opacity: 1; transform: none}
}
.qz__result { animation: qz-in var(--t-max) var(--ease-out) both}
.qz__result[hidden] { display: none}
.qz__kicker {
margin: 0 0 var(--s-2); font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--pink)}
.qz__pick {
font-family: var(--font-display); text-transform: uppercase;
font-size: var(--fs-h3); line-height: var(--lh-display);
color: var(--ink); margin: 0}
.qz__why { margin: var(--s-3) 0 0; font-size: var(--fs-small)}
.qz__best { margin: var(--s-3) 0 0; font-size: var(--fs-small)}
.qz__best b { color: var(--ink)}
.qz__acts {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--s-3); margin-top: var(--s-5)}
.qz__acts .btn {
padding: 13px var(--s-4);
font-size: .8125rem;
white-space: normal; text-align: center; line-height: 1.2}
@media (max-width: 419px) {
.qz__acts { grid-template-columns: 1fr}
}
.qz__foot {
margin-top: auto;
padding: var(--s-4) clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 24px);
border-top: var(--hairline)}
.qz__footrow {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); margin-bottom: var(--s-3); min-height: 22px}
.qz__count {
margin: 0; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink-600)}
.qz__count b { color: var(--ink)}
.qz__back {
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-size: var(--fs-small); font-weight: 700;
color: var(--ink-600);
transition: color var(--t-colour) var(--ease)}
.qz__back:hover { color: var(--ink)}
.qz__back:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-1)}
.qz__track {
height: 6px; border-radius: var(--r-pill);
background: var(--ink-100); overflow: hidden}
.qz__track i {
display: block; height: 100%; width: 33.333%;
border-radius: var(--r-pill); background: var(--cyan);
transition: width var(--t-max) var(--ease)}
@media (max-width: 1179px) {
.hero-types .slab__in {
min-height: 0;
padding-block: calc(var(--chrome-h) + var(--s-4)) var(--s-7)}
.qz__body { min-height: 130px}
}
@media (max-width: 599px) {
.qz__body { min-height: 230px}
}
.qz__pick:focus { outline: none}
.qz__pick:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-1)}
.hero-area .slab__in {
min-height: 100svh;
display: grid;
align-content: center;
padding-block: calc(var(--chrome-h) + var(--s-5)) var(--s-6)}
.stack > .hero-area.slab:first-child { padding-top: 0}
.hero-area .crumb { margin-bottom: var(--s-5)}
.hero-area .lede { margin-top: var(--s-5); max-width: 46ch}
.hero-area .creds { margin-top: var(--s-5); max-width: none}
.areaform { align-self: center; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2vw, 30px)}
.areaform .est10__title { font-size: clamp(1.25rem, .95rem + .95vw, 1.75rem)}
.areaform .areaform__sub { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-600)}
.areaform .drawer__form,
.areaform form { margin-top: clamp(14px, 1.8vh, 22px)}
.areaform .form-grid { gap: clamp(10px, 1.5vh, 16px)}
.areaform .field label { font-size: var(--fs-micro)}
.areaform .field input,
.areaform .towndrop__trigger { padding-block: clamp(11px, 1.5vh, 15px)}
.areaform .towndrop__panel { max-height: min(300px, 38vh)}
.areaform .needs { grid-template-columns: repeat(4, 1fr); gap: 8px}
.areaform .need__box { padding: 10px 10px 9px}
.areaform .need__ico { width: 24px; height: 24px; margin-bottom: 5px}
.areaform .need__box b { font-size: 12.5px}
.areaform .need__box em { display: none}
.areaform .consent { margin-top: clamp(10px, 1.6vh, 16px)}
.areaform .btn--block { margin-top: clamp(10px, 1.6vh, 16px); padding-block: clamp(13px, 1.9vh, 18px)}
.areaform .areaform__fine {
margin: var(--s-3) 0 0; text-align: center;
font-size: 11.5px; color: var(--ink-400)}
@media (min-height: 960px) and (min-width: 1280px) {
.areaform .need__box em { display: block}
}
@media (max-width: 1179px) {
.areaform .needs { grid-template-columns: 1fr 1fr}
}
@media (min-width: 900px) and (max-height: 780px) {
.hero-area .slab__in { padding-block: calc(var(--chrome-h) + var(--s-3)) var(--s-4)}
.hero-area h1 { font-size: clamp(2.125rem, 1rem + 3.2vw, 3.25rem)}
.hero-area .lede { margin-top: var(--s-3); font-size: 1rem}
.hero-area .creds { margin-top: var(--s-4); gap: 9px 8px}
.hero-area .creds li { font-size: 13px; padding: 7px 14px 7px 7px}
.areaform { padding: 18px 20px}
.areaform .areaform__fine { display: none}
}
@media (min-width: 900px) and (max-height: 920px) {
.terrmap .slab__in { padding-block: clamp(36px, 5vh, 48px)}
.terrmap__body { margin-top: 16px}
}
@media (min-width: 900px) and (max-height: 800px) {
.terrmap .slab__in { padding-block: 26px}
.terrmap__body { margin-top: 10px}
.gz__cap { margin-top: 8px}
.gz__step { padding: 5px 11px}
.tleg { padding: 13px 16px}
}
@media (max-width: 899px) {
.hero-area .slab__in {
min-height: 0;
padding-block: calc(var(--chrome-h) + var(--s-4)) var(--s-7)}
.hero-area .lede { max-width: none}
}
.areacheck .checker__out:empty { display: none}
.hero-about .slab__in {
padding-block: calc(var(--chrome-h) + var(--s-6)) var(--s-7)}
.stack > .hero-about.slab:first-child { padding-top: 0}
.hero-about h1 { margin: 0}
.hero-about .crumb { margin-bottom: var(--s-6)}
.hero-about .lede { margin-top: var(--s-5); max-width: 52ch}
.hero-about .creds { margin-top: var(--s-6); max-width: none}
.aboutshot { overflow: visible}
.aboutshot .slab__in { padding-block: 0}
.crew-shot { position: relative; overflow: hidden; aspect-ratio: 1000/440}
.crew-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
object-position: center 10%}
@media (max-width: 599px) {
.crew-shot { aspect-ratio: 4/3}
}
.aboutshot + .slab > .slab__in { padding-top: clamp(34px, 4.4vw, 68px)}
.roots__split { gap: clamp(40px, 5vw, 72px)}
.roots .lede { margin-top: var(--s-5)}
.roots .lede + p { margin-top: var(--s-4); max-width: var(--measure)}
.factcards { display: grid; gap: var(--s-4); align-content: start}
.factcard {
position: relative;
background: var(--white); color: var(--ink);
border-radius: var(--r-3);
padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 52px);
box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 var(--cyan);
transition: box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.factcard:hover, .factcard:focus-within {
transform: translate(-2px, -2px);
box-shadow: inset 0 0 0 2px var(--ink), 7px 7px 0 var(--cyan)}
.factcard__ic {
position: absolute; left: var(--s-5); top: var(--s-5);
width: 34px; height: 34px; border-radius: 50%;
background: var(--pink); color: var(--white);
display: grid; place-items: center}
.factcard__ic svg {
width: 19px; height: 19px; fill: none; stroke: currentColor;
stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round}
.factcard h3 {
font-family: var(--font-core); font-weight: 700;
font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow);
text-transform: uppercase; color: var(--ink-600);
margin: 0 0 6px}
.factcard p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); max-width: none}
.certmarks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3)}
.certmarks li {
display: grid; grid-template-columns: 96px minmax(0, 1fr);
align-items: center; gap: var(--s-4);
padding: 13px 15px;
border-radius: var(--r-2);
background: var(--white);
box-shadow: inset 0 0 0 1px var(--ink-100)}
.certmarks img { display: block; width: 100%; height: auto; max-height: 68px; object-fit: contain}
.certmarks span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-400)}
.certmarks b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; margin-bottom: 3px}
.factcard__foot {
margin: var(--s-4) 0 0 !important;
padding-top: var(--s-3);
border-top: 1px solid var(--ink-100);
font-size: var(--fs-micro) !important;
letter-spacing: .04em;
color: var(--ink-600) !important}
.factcard--certs { padding-left: var(--s-5)}
.factcard--certs h3 {
display: flex; align-items: center; gap: 11px;
margin-bottom: var(--s-4); line-height: 1}
.factcard--certs .factcard__ic { position: static; width: 30px; height: 30px}
.factcard--certs .factcard__ic svg { width: 17px; height: 17px}
.factcard--call:hover, .factcard--call:focus-within {
box-shadow: inset 0 0 0 2px var(--ink), 7px 7px 0 var(--pink)}
.factcard__tel {
display: inline-block;
font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
line-height: 1; letter-spacing: .02em;
color: var(--ink); text-decoration: none;
transition: color var(--t-colour) var(--ease)}
.factcard__tel:hover, .factcard__tel:focus-visible { color: var(--pink)}
.factcard__note { margin-top: 8px !important; font-size: var(--fs-micro) !important; color: var(--ink-600) !important}
@media (max-width: 1023px) {
.factcard__tel { display: block}
.factcard__note { margin-top: 4px !important; line-height: 1.35}
}
@media (max-width: 599px) {
.factcard__note { margin-top: 2px !important}
}
@media (max-width: 1023px) {
.roots .lede,
.roots .lede + p { max-width: none}
.roots h2 br { display: none}
.factcards { grid-template-columns: 1fr}
.roots .roots__split { gap: clamp(24px, 3.4vw, 40px)}
}
@media (min-width: 600px) and (max-width: 1023px) {
.factcards { grid-template-columns: 1fr 1fr}
.factcard--certs { grid-column: 1 / -1}
}
.holds .tindex__seal { box-shadow: 0 0 0 5px var(--cyan), 0 0 0 7px var(--white)}
.holds .tix { background: color-mix(in srgb, var(--white) 34%, transparent)}
.holds .tix__n { color: color-mix(in srgb, var(--ink) 52%, transparent)}
.holds .tix__t { color: var(--ink)}
.holds .tix::after { color: color-mix(in srgb, var(--ink) 48%, transparent); box-shadow: inset 0 0 0 var(--keyline) color-mix(in srgb, var(--ink) 20%, transparent)}
.holds .tix:hover { background: var(--white)}
.holds .tix:hover .tix__n { color: var(--pink)}
.holds .tix:hover::after { color: var(--ink); box-shadow: inset 0 0 0 var(--keyline) var(--ink)}
.holds .tix.is-on { background: var(--ink); box-shadow: 5px 5px 0 var(--white)}
.holds .tix.is-on .tix__n { color: var(--cyan)}
.holds .tix.is-on .tix__t { color: var(--white)}
.holds .tix.is-on::after { background: var(--cyan); color: var(--ink)}
.holds .tpanel__chip {
background: var(--white); color: var(--ink);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent)}
.holds .tpanel__n { color: var(--white)}
.holds .tpanel__n::after { background: var(--ink)}
.holds .tindex__seal { box-shadow: 0 0 0 5px var(--cyan), 0 0 0 7px var(--white)}
.holds .tix { background: color-mix(in srgb, var(--white) 34%, transparent)}
.holds .tix__n { color: color-mix(in srgb, var(--ink) 52%, transparent)}
.holds .tix__t { color: var(--ink)}
.holds .tix::after { color: color-mix(in srgb, var(--ink) 48%, transparent); box-shadow: inset 0 0 0 var(--keyline) color-mix(in srgb, var(--ink) 20%, transparent)}
.holds .tix:hover { background: var(--white)}
.holds .tix:hover .tix__n { color: var(--pink)}
.holds .tix:hover::after { color: var(--ink); box-shadow: inset 0 0 0 var(--keyline) var(--ink)}
.holds .tix.is-on { background: var(--ink); box-shadow: 5px 5px 0 var(--white)}
.holds .tix.is-on .tix__n { color: var(--cyan)}
.holds .tix.is-on .tix__t { color: var(--white)}
.holds .tix.is-on::after { background: var(--cyan); color: var(--ink)}
.holds .tpanel__chip {
background: var(--white); color: var(--ink);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent)}
.holds .tpanel__n { color: var(--white)}
.holds .tpanel__n::after { background: var(--ink)}
.holds .tpanel__fig .ph {
background: color-mix(in srgb, var(--white) 62%, transparent);
color: var(--ink);
border: 2px dashed color-mix(in srgb, var(--ink) 26%, transparent)}
.holds .tpanel__fig .ph .ph__b { color: color-mix(in srgb, var(--ink) 66%, transparent)}
.terrmap {
--slab-bg: #d9dcde;
--slab-fg: var(--ink);
--type-shadow: var(--cyan);
--grey-lift: #e6e8ea;
--grey-deep: #c8cccf;
border-radius: 0;
isolation: isolate}
.terrmap::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--grey-lift) 0%, var(--slab-bg) 54%, var(--grey-deep) 100%),
repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 84px),
repeating-linear-gradient(0deg,  rgba(0,0,0,.05) 0 1px, transparent 1px 84px)}
.terrmap .slab__in { position: relative; z-index: 2}
.terrmap__lead {
display: grid; grid-template-columns: 1.02fr 1fr;
gap: var(--s-5) var(--s-7); align-items: end}
.terrmap__lead h2 { margin: 0}
.terrmap__lead .lede { margin: 0; max-width: 62ch; color: var(--ink-600)}
.terrmap__body {
display: grid; grid-template-columns: 1.62fr 1fr;
gap: clamp(24px, 2.6vw, 44px);
align-items: start;
margin-top: clamp(26px, 3.4vh, 46px)}
[data-k="bentonville"]  { --tint: var(--cyan)}
[data-k="rogers"]       { --tint: var(--ink)}
[data-k="fayetteville"] { --tint: var(--pink)}
.gz { margin: 0}
.gz__svg {
display: block; width: 100%; aspect-ratio: 1.3;
border-radius: var(--r-3);
background:
radial-gradient(120% 100% at 12% 8%, rgba(5,168,236,.10), transparent 62%),
repeating-linear-gradient(90deg, rgba(5,168,236,.10) 0 1px, transparent 1px 34px),
repeating-linear-gradient(0deg,  rgba(5,168,236,.10) 0 1px, transparent 1px 34px),
var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink), 8px 8px 0 var(--ink)}
.gz__svg * { vector-effect: non-scaling-stroke}
.gz__us path {
fill: var(--ink-050); stroke: var(--ink-400); stroke-width: .7;
transition: opacity var(--t-max) var(--ease), fill var(--t-max) var(--ease)}
.gz__ark {
fill: var(--cyan); stroke: var(--ink); stroke-width: 1.4; opacity: .92;
transition: opacity var(--t-max) var(--ease), fill var(--t-max) var(--ease)}
.gz__county {
fill: var(--white); stroke: var(--ink); stroke-width: 2.2; opacity: 0;
filter: drop-shadow(3px 4px 0 rgba(0,0,0,.13));
transition: opacity var(--t-max) var(--ease)}
.gz__cnames text {
font-family: var(--font-core); font-size: .82px; font-weight: 700;
letter-spacing: .1px; fill: var(--ink); opacity: 0;
transition: opacity var(--t-max) var(--ease)}
.gz__towns, .gz__hq { opacity: 0; transition: opacity var(--t-max) var(--ease)}
.gz__town circle { fill: var(--tint); stroke: var(--white); stroke-width: 1.6}
.gz__town text {
font-family: var(--font-core); font-size: .56px; font-weight: 700; fill: var(--ink);
paint-order: stroke; stroke: var(--white); stroke-width: 3; stroke-linejoin: round}
.gz__town { transition: opacity var(--t-colour) var(--ease)}
.gz__hqring { fill: none; stroke: var(--pink); stroke-width: 1.6; opacity: .6;
transform-box: fill-box; transform-origin: center;
animation: gzPulse 2.8s var(--ease) infinite}
@keyframes gzPulse {
0%   { transform: scale(.72); opacity: .75}
70%  { transform: scale(1.5); opacity: 0}
100% { transform: scale(1.5); opacity: 0}
}
@media (prefers-reduced-motion: reduce) { .gz__hqring { animation: none} }
.gz__hqdot { fill: var(--pink); stroke: var(--white); stroke-width: 1.6}
.gz__hq text {
font-family: var(--font-core); font-size: .6px; font-weight: 700;
letter-spacing: .05px; fill: var(--pink);
paint-order: stroke; stroke: var(--white); stroke-width: 3; stroke-linejoin: round}
.gz__routes line {
stroke: var(--tint); stroke-width: 1.6; stroke-linecap: round;
stroke-dasharray: 4 3; opacity: 0;
transition: opacity var(--t-colour) var(--ease)}
.gz[data-stage="2"] .gz__us path { fill: var(--white)}
.gz[data-stage="3"] .gz__us path { fill: rgba(10,20,28,.055); stroke: var(--ink-100); opacity: 1}
.gz[data-stage="3"] .gz__ark { opacity: .45}
.gz[data-stage="3"] .gz__ark { fill: none; opacity: .3}
.gz[data-stage="2"] .gz__county { opacity: .3}
.gz[data-stage="3"] .gz__county { opacity: 1}
.gz[data-stage="3"] .gz__cnames text { opacity: .26}
.gz[data-stage="3"] .gz__towns,
.gz[data-stage="3"] .gz__hq { opacity: 1}
.gz__cap {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); flex-wrap: wrap; margin-top: 14px}
.gz__note {
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 52%, transparent)}
.gz__steps { display: flex; gap: 6px}
.gz__step {
padding: 7px 14px; border: 0; border-radius: var(--r-pill);
font-family: var(--font-core); font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
cursor: pointer;
transition: background-color var(--t-colour) var(--ease),
box-shadow var(--t-colour) var(--ease), color var(--t-colour) var(--ease)}
.gz__step:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink)}
.gz__step[aria-current="true"] {
background: var(--ink); color: var(--white);
box-shadow: inset 0 0 0 1px var(--ink), 3px 3px 0 var(--cyan)}
.gz__step:focus-visible { outline: none; box-shadow: var(--focus-ring)}
.terrmap[data-live] .gz__town { opacity: .14}
.terrmap[data-live="bentonville"]  .gz__town[data-k="bentonville"],
.terrmap[data-live="rogers"]       .gz__town[data-k="rogers"],
.terrmap[data-live="fayetteville"] .gz__town[data-k="fayetteville"] { opacity: 1}
.terrmap[data-live="bentonville"]  .gz__routes line[data-k="bentonville"],
.terrmap[data-live="rogers"]       .gz__routes line[data-k="rogers"],
.terrmap[data-live="fayetteville"] .gz__routes line[data-k="fayetteville"] { opacity: .8}
.tlegend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4)}
.tleg {
position: relative; display: grid; gap: 5px; width: 100%; text-align: left;
padding: clamp(15px, 1.6vw, 21px) clamp(16px, 1.7vw, 23px);
border: 0; border-radius: var(--r-3); cursor: pointer; overflow: hidden;
background: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink), 5px 5px 0 rgba(0,0,0,.14);
font-family: var(--font-core); color: var(--ink);
transition: box-shadow var(--t-move) var(--ease), transform var(--t-move) var(--ease)}
.tleg::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: var(--tint)}
.tleg:hover, .tleg[aria-pressed="true"] {
transform: translateY(-3px);
box-shadow: inset 0 0 0 var(--keyline) var(--ink), 8px 8px 0 var(--tint)}
.tleg:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--keyline) var(--ink), var(--focus-ring)}
.tleg__top { display: flex; align-items: center; gap: 10px}
.tleg__sw {
width: 14px; height: 14px; border-radius: 50%; flex: none;
background: var(--tint); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.28)}
.tleg__n { font-size: var(--fs-h4); font-weight: 700; line-height: 1.15; flex: 1}
.tleg__c {
font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
color: var(--tint); flex: none;
text-shadow: 2px 2px 0 rgba(0,0,0,.12)}
.tleg__sub {
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink-400)}
.tleg__p { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-600); margin-top: 3px}
.terrmap__hq {
display: flex; align-items: center; gap: 10px;
margin: clamp(20px, 2.6vh, 34px) 0 0;
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase}
.terrmap__hq span {
width: 9px; height: 9px; border-radius: 50%; flex: none;
background: var(--pink); box-shadow: 0 0 0 4px rgba(233,16,125,.22)}
.tchips { display: none}
.tchips__g + .tchips__g { margin-top: var(--s-5)}
.tchips__h {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--font-core); font-size: var(--fs-h4); font-weight: 700;
text-transform: none; letter-spacing: 0; margin: 0 0 10px}
.tchips__h em {
font-style: normal; font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow);
text-transform: uppercase; color: var(--ink-400)}
.tchips__l { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none}
.tchips__l li {
font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill);
background: var(--white);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 55%, transparent)}
.tchips__p { font-size: var(--fs-small); color: var(--ink-600); margin: 10px 0 0}
@media (max-width: 1179px) {
.terrmap__body { grid-template-columns: 1fr}
.tlegend { grid-template-columns: repeat(3, 1fr)}
.tleg__p { display: none}
.terrmap__lead { grid-template-columns: 1fr; align-items: start; gap: var(--s-5)}
.terrmap__lead .lede { max-width: none}
.terrmap__lead h2 { font-size: min(calc(8.3vw - 4px), var(--fs-display-m)); white-space: nowrap}
.terrmap__lead h2 br { display: none}
}
@media (max-width: 899px) {
.gz { display: none}
.tchips { display: block}
.tlegend { display: none}
}
@media (prefers-reduced-motion: reduce) {
.tleg:hover, .tleg[aria-pressed="true"] { transform: none}
}
.foamie { overflow: clip}
.foamie__split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
gap: clamp(32px, 5vw, 80px); align-items: center}
.foamie__c h2 { margin: 0}
.foamie__c .lede { max-width: 42ch}
.foamie__spots {
list-style: none; padding: 0; margin: var(--s-6) 0 0;
display: flex; flex-wrap: wrap; gap: 10px}
.foamie__spots li {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px; border-radius: var(--r-pill);
font-size: var(--fs-small); font-weight: 700; line-height: 1;
background: var(--white); color: var(--ink);
box-shadow: inset 0 0 0 2px var(--ink);
transition: transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease)}
.foamie__spotslabel {
margin: var(--s-6) 0 var(--s-3);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink-400)}
.foamie__spots { margin-top: 0}
.foamie__spotic {
width: 26px; height: 26px; border-radius: 50%; flex: none;
background: var(--pink); color: var(--white); display: grid; place-items: center}
.foamie__spotic svg {
width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round}
.foamie__spots li { padding-left: 8px}
.foamie__spots li:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--ink), 4px 4px 0 var(--cyan)}
.foamie__stage { position: relative; display: grid; place-items: center; isolation: isolate}
.foamie__stage .anatomy { position: relative; z-index: 2; margin: 0; width: 100%; max-width: 560px}
.foamie__stage .anatomy img {
animation: foamie-bob 5.4s var(--ease) infinite;
filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .18))}
@keyframes foamie-bob { 0%, 100% { transform: translateY(0)} 50% { transform: translateY(-14px)} }
.foamie__halo {
position: absolute; z-index: 0; top: 50%; left: 62%;
width: min(74%, 440px); aspect-ratio: 1; transform: translate(-50%, -48%);
border-radius: 50%;
background: radial-gradient(circle at 50% 42%,
var(--cyan) 0%,
color-mix(in srgb, var(--cyan) 62%, transparent) 58%,
transparent 72%)}
.foamie__orbit {
position: absolute; z-index: 1; top: 50%; left: 62%;
width: min(84%, 500px); aspect-ratio: 1; transform: translate(-50%, -48%);
border-radius: 50%;
border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
animation: foamie-spin 46s linear infinite}
@keyframes foamie-spin { to { transform: translate(-50%, -48%) rotate(360deg)} }
@media (prefers-reduced-motion: reduce) {
.foamie__stage .anatomy img, .foamie__orbit { animation: none}
}
@media (max-width: 1023px) {
.foamie__split { grid-template-columns: 1fr; gap: var(--s-7)}
.foamie__stage { order: -1}
.foamie__c .lede { max-width: none}
.foamie__halo, .foamie__orbit { left: 50%}
.foamie__halo { top: 40%; width: min(72%, 380px)}
.foamie__orbit { width: min(86%, 440px)}
.foamie__orbit { display: none}
}
@media (max-width: 599px) {
.foamie__spots { gap: 8px}
.foamie__spots li { font-size: 13px; padding: 8px 13px}
}
.crew .head--center p { margin-inline: auto}
@media (max-width: 1023px) {
.crew .head--center p { max-width: none}
}
.crewcard { cursor: default}
.crewcard:hover { transform: translate(-4px, -4px); box-shadow: 0 0 0 1px var(--ink), var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.crewcard__tag {
align-self: flex-start; margin-top: var(--s-3);
padding: 6px 13px; border-radius: var(--r-pill);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink); background: color-mix(in srgb, var(--cyan) 20%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 52%, transparent)}
.club {
--slab-bg: var(--ink); --slab-fg: var(--white);
--type-shadow: var(--pink);
overflow: hidden}
.club .lede { color: color-mix(in srgb, var(--white) 76%, transparent); max-width: 44ch}
.club__rule {
position: absolute; inset: 0 0 auto 0; z-index: 3;
overflow: hidden; padding-block: 11px;
background: var(--pink); color: var(--white)}
.club__rule .marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite}
.club__rule .marquee__g {
display: flex; align-items: center; gap: var(--s-6); padding-right: var(--s-6);
font-family: var(--font-core); font-weight: 700;
font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow);
text-transform: uppercase; white-space: nowrap}
.club__rule .marquee__g span::after { content: "★"; margin-left: var(--s-6); color: var(--ink)}
@media (prefers-reduced-motion: reduce) { .club__rule .marquee__track { animation: none} }
.club__split {
display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: clamp(32px, 5vw, 76px); align-items: center;
padding-top: clamp(18px, 2.4vw, 34px)}
.club__c h2 { margin: 0}
.club__badge {
display: inline-block; margin-bottom: var(--s-6);
padding: 11px 18px; border-radius: var(--r-2);
background: var(--pink); color: var(--white);
box-shadow: 4px 4px 0 var(--white);
font-family: var(--font-core); font-weight: 700;
font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow);
text-transform: uppercase; line-height: 1; text-align: center; white-space: nowrap;
transform: rotate(-4deg);
transition: transform var(--t-move) var(--ease)}
.club__badge:hover { transform: rotate(0deg) translateY(-3px)}
.club__goods {
list-style: none; padding: 0; margin: var(--s-6) 0 0;
display: flex; flex-wrap: wrap; gap: 9px}
.club__goods li {
padding: 8px 15px; border-radius: var(--r-pill);
font-size: var(--fs-small); font-weight: 700; line-height: 1;
color: var(--white);
box-shadow: inset 0 0 0 var(--keyline) color-mix(in srgb, var(--white) 40%, transparent);
transition: background-color var(--t-colour) var(--ease), color var(--t-colour) var(--ease), box-shadow var(--t-colour) var(--ease)}
.club__goods li:hover { background: var(--cyan); color: var(--ink); box-shadow: inset 0 0 0 var(--keyline) var(--cyan)}
.club__fig { position: relative; display: grid; place-items: center; isolation: isolate}
.club__blot {
position: absolute; z-index: 1; top: 50%; left: 50%;
width: min(118%, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 50% 48%,
color-mix(in srgb, var(--cyan) 62%, transparent) 0%,
color-mix(in srgb, var(--cyan) 30%, transparent) 52%,
transparent 70%)}
.club__drop {
position: absolute; z-index: 3; left: -18px; bottom: -18px;
display: grid; gap: 2px; justify-items: center;
padding: 12px 18px; border-radius: var(--r-2);
background: var(--white); color: var(--ink);
box-shadow: 5px 5px 0 var(--cyan);
transform: rotate(5deg)}
.club__drop b { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; letter-spacing: .02em}
.club__drop em {
font-style: normal; font-size: 10px; font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-600)}
@media (max-width: 1023px) {
.club__split { grid-template-columns: 1fr; gap: var(--s-7)}
.club__c { order: 1}
.club__fig { order: 2; max-width: 520px; margin-inline: auto; width: 100%}
.club .lede { max-width: none}
.club__blot { aspect-ratio: auto; height: min(108%, 430px)}
}
@media (max-width: 599px) {
.club__goods li { font-size: 13px; padding: 7px 13px}
.club__drop { padding: 10px 14px; left: 0}
}
.chip-figure img { display: block; height: auto; border-radius: var(--r-2)}
.club__chip { position: relative; z-index: 2; width: 100%; max-width: 460px}
[data-rvalue] .panel { box-shadow: var(--offset-chip) var(--offset-chip) 0 var(--ink)}
[data-rvalue] .split { gap: var(--s-8)}
.honest .head .lede { max-width: 56ch; text-wrap: balance}
.honest__pair {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
align-items: stretch}
.honest__card {
display: flex; flex-direction: column;
padding: clamp(22px, 2.4vw, 32px);
border-radius: var(--r-3);
background: var(--ink-050);
box-shadow: inset 0 0 0 var(--keyline) var(--ink-100)}
.honest__card--smart {
background: color-mix(in srgb, var(--cyan) 8%, var(--white));
box-shadow: inset 0 0 0 var(--keyline) var(--cyan)}
.honest__tag {
align-self: flex-start;
padding: 6px 14px; border-radius: var(--r-pill);
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase}
.honest__card--max .honest__tag { background: var(--pink); color: var(--white)}
.honest__card--smart .honest__tag { background: var(--cyan); color: var(--ink)}
.honest__line {
margin: var(--s-5) 0 0;
font-size: var(--fs-h4); font-weight: 700; line-height: 1.35;
color: var(--ink)}
.honest__card--max .honest__line {
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, var(--pink) 80%, transparent);
text-decoration-thickness: 2px;
color: var(--ink-600)}
.honest__pts { list-style: none; padding: 0; margin: var(--s-5) 0 0; flex: 1}
.honest__pts li {
position: relative; padding-left: 26px; margin-top: var(--s-3);
font-size: var(--fs-small); color: var(--ink-600); line-height: 1.5}
.honest__pts li::before {
position: absolute; left: 0; top: 0;
font-weight: 700; font-size: 1.05em}
.honest__card--max .honest__pts li::before { content: "\00d7"; color: var(--pink)}
.honest__card--smart .honest__pts li::before { content: "\2713"; color: var(--cyan)}
.honest__cost {
display: flex; align-items: center; gap: var(--s-3);
margin: var(--s-6) 0 0; padding-top: var(--s-4);
border-top: 1px solid var(--ink-100)}
.honest__costl {
font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
color: var(--ink-400)}
.honest__dots { display: flex; gap: 6px; margin-left: auto}
.honest__dots i {
width: 11px; height: 11px; border-radius: 50%;
box-shadow: inset 0 0 0 var(--keyline) var(--ink-400)}
.honest__card--max .honest__dots i.is-on { background: var(--pink); box-shadow: none}
.honest__card--smart .honest__dots i.is-on { background: var(--cyan); box-shadow: none}
.honest__foot {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--s-5);
margin-top: var(--s-7)}
.honest__foot p { margin: 0; max-width: 62ch}
.honest__foot .btn { flex: none}
@media (max-width: 899px) {
.honest__pair { grid-template-columns: 1fr}
.honest__card--smart { order: -1}
}
@media (max-width: 599px) {
.honest__foot .btn { width: 100%}
}
.hq .lede { margin-top: var(--s-4)}
.areacheck .checker { display: block}
.areacheck__s { margin: 8px 0 var(--s-5); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-600)}
.areacheck .checker .btn--block { margin-top: var(--s-4)}
.areacheck .checker__out { margin: var(--s-4) 0 0}
.areacheck__fine { margin: var(--s-4) 0 0; font-size: 12px; color: var(--ink-600)}
@media (min-width: 900px) { .hq .split--wide { grid-template-columns: 1.24fr .76fr} }
@media (min-width: 1180px) and (min-height: 620px) and (pointer: fine) {
h1.display-l { font-size: clamp(2.5rem, 8.4vh, 5.5rem)}
}
@media (max-width: 1179px) {
.hero-types .split,
[data-rvalue] .split {
grid-template-columns: 1fr;
gap: var(--s-7)}
.hero-types h1 br,
[data-rvalue] h2 br { display: none}
.hero-types .lede,
[data-rvalue] .lede { max-width: none}
[data-rvalue] .split { gap: var(--s-6)}
.honest__foot {
flex-direction: column; align-items: center; text-align: center}
.honest__foot p { max-width: none}
}
@media (max-width: 899px) {
.hero-types h1 {
white-space: nowrap;
font-size: min(var(--fs-display-l), 8.6vw)}
[data-rvalue] h2 {
white-space: nowrap;
font-size: min(var(--fs-display-m), 10.4vw)}
}
.hero-est .slab__in {
padding-block: calc(var(--chrome-h) + var(--s-6)) var(--s-7)}
.stack > .hero-est.slab:first-child { padding-top: 0}
.hero-est h1 { margin: 0}
.hero-est .crumb { margin-bottom: var(--s-6)}
.hero-est .lede { margin-top: var(--s-5); max-width: 52ch}
.hero-est .creds { margin-top: var(--s-6); max-width: none}
@media (max-width: 1179px) {
.hero-est .lede { max-width: none}
}
.getwrap .lede { margin-top: var(--s-5); max-width: none}
@media (min-width: 1180px) {
.getwrap__h { white-space: nowrap}
}
.getwrap .creds { margin-top: var(--s-6); max-width: none}
.getwrap .btn-row { margin-top: var(--s-6)}
.getwrap .slab__in { padding-bottom: clamp(30px, 3.6vw, 54px)}
.estshot { overflow: visible}
.estshot .slab__in { padding-block: 0 0}
@media (max-width: 1023px) {
.estshot .slab__in { padding-bottom: clamp(30px, 6vw, 56px)}
}
.est-shot { position: relative; overflow: hidden; aspect-ratio: 1000/440}
.est-shot img { width: 100%; height: 100%; object-fit: cover; display: block}
@media (max-width: 599px) {
.est-shot { aspect-ratio: 4/3}
}
.estshot + .slab > .slab__in { padding-top: clamp(34px, 4.4vw, 68px)}
.estwiz { position: relative; overflow: hidden}
.estwiz .slab__in { position: relative; z-index: 2}
.estwiz .est10__grid {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(to right, rgba(5,168,236,.075) 1px, transparent 1px),
linear-gradient(to bottom, rgba(5,168,236,.075) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(120% 90% at 82% 42%, #000 0%, transparent 72%);
mask-image: radial-gradient(120% 90% at 82% 42%, #000 0%, transparent 72%)}
.estwiz .est10__left .lede { color: var(--ink-600)}
.estwiz__h { margin: 0 0 var(--s-5)}
.estwiz .steps {
list-style: none; margin: var(--s-7) 0 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: 0; position: relative}
.estwiz .steps__i {
display: grid; grid-template-columns: auto 1fr; gap: var(--s-5);
align-items: start; position: relative; padding: 0 0 var(--s-6)}
.estwiz .steps__i::marker { content: ""}
.estwiz .steps__i:last-child { padding-bottom: 0}
.estwiz .steps__i::before {
content: ""; position: absolute; left: 23px; top: 44px; bottom: -4px; width: 2px;
background: linear-gradient(to bottom, var(--cyan), rgba(5,168,236,.18))}
.estwiz .steps__i:last-child::before { display: none}
.estwiz .steps__n {
font-family: var(--font-display); font-size: 22px; line-height: 1;
width: 48px; height: 48px; flex: none; display: grid; place-items: center;
border-radius: var(--r-pill); position: relative; z-index: 1;
color: var(--ink); background: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink);
transition: background-color var(--t-move) var(--ease),
color var(--t-move) var(--ease),
box-shadow var(--t-move) var(--ease),
transform var(--t-move) var(--ease)}
.estwiz .steps__b :is(h2, h3) {
font-family: var(--font-core); font-weight: 700; font-size: var(--fs-h4);
text-transform: none; letter-spacing: 0; line-height: 1.25;
margin: 0 0 6px; padding-top: 12px; text-shadow: none}
.estwiz .steps__b p { font-size: var(--fs-small); margin: 0; color: var(--ink-600); max-width: 42ch}
.estwiz .steps__i[data-state="current"] .steps__n {
background: var(--cyan); color: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink), 4px 4px 0 var(--ink);
transform: translateY(-1px)}
.estwiz .steps__i[data-state="done"] .steps__n {
background: var(--ink); color: var(--white);
box-shadow: inset 0 0 0 var(--keyline) var(--ink);
font-size: 0}
.estwiz .steps__i[data-state="done"] .steps__n::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 9px; height: 15px;
border-right: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white);
transform: translate(-50%, -60%) rotate(42deg)}
.estwiz .steps__i[data-state="todo"] { opacity: .5}
.estwiz .steps__i[data-state="todo"] .steps__n { box-shadow: inset 0 0 0 var(--keyline) var(--ink-100)}
@media (prefers-reduced-motion: reduce) {
.estwiz .steps__n { transition: none}
}
.estwiz__panel { overflow: visible; align-self: start}
.estwiz__panel .est10__head { margin-bottom: var(--s-2)}
.estwiz__panel .est10__title { font-size: clamp(1.25rem, .95rem + .95vw, 1.75rem); line-height: 1}
.estwiz__sub {
margin: 0 0 var(--s-5); font-size: var(--fs-small); line-height: 1.45;
color: var(--ink-600)}
.estwiz__sub a { color: var(--pink); font-weight: 700}
.wstep.is-in { animation: qz-in var(--t-max) var(--ease-out) both}
@media (prefers-reduced-motion: reduce) {
.wstep.is-in { animation: none}
}
.needs--job .need:last-child { grid-column: 1 / -1}
@media (max-width: 479px) { .needs--job { grid-template-columns: 1fr} }
.estwiz__acts { margin-top: var(--s-5); display: grid; gap: var(--s-3); justify-items: center}
.estwiz__back {
background: none; border: 0; padding: 4px 6px; cursor: pointer;
font: inherit; font-size: var(--fs-small); font-weight: 700;
color: var(--ink-600);
transition: color var(--t-colour) var(--ease)}
.estwiz__back:hover { color: var(--ink)}
.estwiz__back:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-1)}
.estwiz__panel .form-note { text-align: left}
.estwiz__panel .form-note[data-state="warn"] { color: var(--pink); opacity: 1; font-weight: 700}
.estwiz__panel .form-note:empty { display: none}
@media (max-width: 599px) {
.estwiz .steps { gap: 0}
}
.writ__copy h2 { margin: 0}
.writ__copy .lede { margin-top: var(--s-5); max-width: 46ch}
.writ__notsh {
margin: var(--s-7) 0 var(--s-4);
font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-eyebrow);
text-transform: uppercase; color: var(--ink-600)}
.writ__nots { list-style: none; margin: 0; padding: 0; display: grid}
.writ__nots li {
display: grid; grid-template-columns: 26px 1fr; column-gap: var(--s-4); row-gap: 4px;
padding: var(--s-4) 0; border-top: var(--hairline)}
.writ__nots li:last-child { border-bottom: var(--hairline)}
.writ__x {
grid-row: 1 / span 2; align-self: start;
width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center;
font-size: 11px; font-weight: 700; color: var(--pink);
box-shadow: inset 0 0 0 var(--keyline) var(--pink)}
.writ__nots b { font-size: var(--fs-body); line-height: 1.3; color: var(--ink)}
.writ__nots em { font-style: normal; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-600)}
.writ__sheet {
background: var(--white); border-radius: var(--r-3);
box-shadow: inset 0 0 0 var(--keyline) var(--ink),
var(--offset-chip) var(--offset-chip) 0 var(--cyan);
padding: clamp(20px, 2.2vw, 28px);
max-width: 480px; justify-self: end; align-self: start}
.writ__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink)}
.writ__mark {
font-family: var(--font-display); text-transform: uppercase;
font-size: 15px; letter-spacing: .02em; color: var(--ink)}
.writ__mark i { font-style: normal; font-size: 9px; vertical-align: super}
.writ__tag {
font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-eyebrow);
text-transform: uppercase; color: var(--ink-600);
padding: 6px 11px; border-radius: var(--r-pill);
box-shadow: inset 0 0 0 var(--keyline) var(--ink-100)}
.writ__rows { margin: 0; padding: 0}
.writ__row {
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: var(--s-3); padding: var(--s-3) 0; border-bottom: var(--hairline)}
.writ__row::after {
content: ""; grid-row: 1; grid-column: 2; height: 0;
border-top: 2px dotted var(--ink-100)}
.writ__row dt {
grid-column: 1; font-size: var(--fs-micro); font-weight: 700;
letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-600)}
.writ__row dd { grid-column: 3; margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--ink)}
.writ__total {
display: grid; gap: 4px; margin-top: var(--s-4);
padding: var(--s-4); border-radius: var(--r-2);
background: var(--ink); color: var(--white)}
.writ__totall {
font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-eyebrow);
text-transform: uppercase; color: var(--cyan)}
.writ__totalv { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h4); line-height: 1.1}
.writ__foot { margin: var(--s-4) 0 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--ink-600)}
@media (max-width: 1023px) {
.writ .split--wide { grid-template-columns: 1fr; gap: var(--s-5)}
.writ__copy .lede { max-width: none}
.writ__sheet { justify-self: stretch; max-width: none}
.writ__copy h2 br { display: none}
.writ__copy h2 { white-space: nowrap}
}
@media (max-width: 519px) {
.writ__copy h2 br { display: block}
.writ__copy h2 { white-space: normal}
}
@media (max-width: 479px) {
.writ__row { grid-template-columns: 1fr; gap: 4px}
.writ__row::after { display: none}
.writ__row dd { grid-column: 1}
}
.ownerbio__split { align-items: center}
.ownerbio__fig {
margin: 0; position: relative; overflow: hidden;
border-radius: var(--r-3);
aspect-ratio: 4 / 3;
box-shadow: var(--offset-chip) var(--offset-chip) 0 var(--ink)}
.ownerbio__fig img {
width: 100%; height: 100%; object-fit: cover; display: block;
object-position: center 30%}
.ownerbio__eyebrow {
display: block;
font-family: var(--font-core, sans-serif); font-weight: 700;
font-size: var(--fs-eyebrow, .6875rem); letter-spacing: var(--track-eyebrow, .14em);
text-transform: uppercase; color: var(--ink-400, #9a9a9a);
margin-bottom: var(--s-3)}
.ownerbio__c .lede { color: var(--cyan-ink); margin-bottom: var(--s-4)}
@media (max-width: 899px) {
.ownerbio__fig { aspect-ratio: 3 / 2}
}