/* Direction C, the rail. One sans, set big and tight. The headline's lines
   drift apart sideways as you leave the top, then the work runs sideways on a
   rail while you keep scrolling down: the page scrolls natively, the rail only
   reads where you are. One accent, used for the count and the one primary. */
:root{
  --bg:#FFFFFF;--ink:#101010;--mute:#7C7C78;--line:#ECECEA;--well:#F3F3F1;
  --accent:#2B3BEA;--accent-ink:#FFFFFF;
  --display:var(--sans);--r:10px;--hd:64px;--ch:min(62svh,600px);
}
html[data-theme="dark"]{--bg:#0B0B0C;--ink:#F1F1EF;--mute:#8C8C88;--line:#232325;--well:#17171A;--accent:#9AA6FF;--accent-ink:#0B0B0C}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--bg:#0B0B0C;--ink:#F1F1EF;--mute:#8C8C88;--line:#232325;--well:#17171A;--accent:#9AA6FF;--accent-ink:#0B0B0C}}
@media (max-width:759px){:root{--ch:min(52svh,118vw)}}
html{scroll-padding-top:var(--hd)}
em{font-style:normal;color:var(--mute)}

.kick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);letter-spacing:.01em}
.kick .ic{width:16px;height:16px}

.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);background:var(--bg)}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;letter-spacing:-.02em}
.brand .ic{width:18px;height:18px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding-inline:10px;font-size:14px;color:var(--mute);transition:color .2s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a .ic{width:18px;height:18px}
@media (max-width:599px){.nav a span{display:none}.nav a{padding-inline:0}}

/* hero */
.hero{min-height:100svh;display:grid;align-content:end;gap:28px;padding:calc(var(--hd) + 24px) var(--gut) 6svh;overflow:clip}
.h1{display:grid;font-weight:600;font-size:clamp(40px,9.4vw,136px);line-height:.94;letter-spacing:-.055em}
.ln{display:block;will-change:transform}
.ln:nth-child(even){padding-left:.9em}
@media (max-width:599px){.h1{font-size:clamp(36px,11.6vw,64px)}.ln:nth-child(even){padding-left:.5em}}

/* the rail */
.rail{position:relative}
.rail-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:28px;padding:calc(var(--hd) + 16px) 0 28px}
.rail-head,.rail-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gut)}
.count{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.c-n{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.04em;color:var(--accent)}
.c-of{color:var(--mute);font-size:14px}
.track{display:flex;gap:clamp(28px,6.5vw,120px);align-items:end;align-self:center;padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track>*{flex:none;scroll-snap-align:start}
.track .pm{height:var(--ch);width:100%}
/* The visuals are frameless: no surface, no corners, they stand on the ground. */
.art-piece{width:calc(var(--ch) * .6)}
.art-piece .pm{background:none;border-radius:0;overflow:visible}
.art-piece .piece-open{border-radius:0}
.art-piece .pc{padding-top:6px}
.track .pc{flex-wrap:wrap;row-gap:4px;align-items:center}
.track .pc-name{font-size:18px;font-weight:600;letter-spacing:-.02em}
.track .pc-meta{flex-basis:100%;order:3;margin:0}
.track .pc-go{margin-left:auto}
.end-wrap{display:grid;align-self:center;padding-right:clamp(16px,6vw,96px)}
.end{display:grid;gap:24px;justify-items:start;font-size:clamp(30px,3.2vw,48px);font-weight:600;line-height:1;letter-spacing:-.045em}
.end-go{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-ink);transition:transform .22s var(--spring)}
.end-go .ic{width:26px;height:26px}
.end:hover .end-go{transform:translateX(6px)}
.end:active .end-go{transform:scale(.96)}
.bar{position:relative;flex:1;height:1px;background:var(--line);max-width:420px}
.bar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.r-name{font-size:14px;color:var(--mute);white-space:nowrap}
/* With JS and motion: the stage pins and the track moves with the page. */
html.fx .rail.on .rail-stage{position:sticky;top:0;height:100svh;overflow:hidden}
html.fx .rail.on .track{overflow:visible;scroll-snap-type:none;will-change:transform}

/* what we do */
.do,.contact{display:grid;gap:32px;padding:20vh var(--gut) 0}
.svc{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:600px){.svc{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1100px){.svc{grid-template-columns:1fr 1fr 1fr}}
.svc li{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:1px solid var(--line);font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em}
.svc li .ic{width:20px;height:20px;color:var(--accent)}
.terms{display:flex;gap:12px;color:var(--mute);max-width:52ch}
.terms .ic{width:18px;height:18px;margin-top:3px}

.contact{padding-bottom:18vh}
.ct-line{font-weight:600;font-size:clamp(40px,7.4vw,112px);line-height:.95;letter-spacing:-.055em}
.ct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.primary{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px 0 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;transition:transform .2s var(--spring)}
.primary:active{transform:scale(.97)}
.ct-acts .btn{font-size:17px}

.ft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:28px var(--gut) 32px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.ft .legal{max-width:70ch}
.ft .btn{color:var(--mute);font-size:13px}
.ft .btn:hover{color:var(--ink)}
.ft .btn:hover .ic{transform:translateY(-3px)}
/* The open view: the visual large but whole, beside the words. */
.lp-media.art{height:min(70svh,620px);width:auto;max-width:100%;justify-self:center}
@media (max-width:899px){.lp-media.art{height:min(52svh,440px)}}
/* ---------- The compositions (comp.js). One art direction: a 3:5 field,
   sizes in container units, one shadow, one radius family. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url(elements/fonts/cinzel-500-latin.woff2) format('woff2')}
:root{--k-think:#7431D6;--k-yes:#7431D6;--k-shadow:0 2.6cqw 6.4cqw -2.6cqw rgba(16,16,20,.34),0 .4cqw 1.2cqw rgba(16,16,20,.06);--k-mono:ui-monospace,'SF Mono',Menlo,monospace}
html[data-theme="dark"]{--k-think:#A47EF3;--k-shadow:0 2.6cqw 6.4cqw -2cqw rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--k-think:#A47EF3;--k-shadow:0 2.6cqw 6.4cqw -2cqw rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}}
.comp{position:absolute;inset:0;container-type:size;color:var(--ink)}
.comp .el{position:absolute;transform:rotate(var(--r));transform-origin:50% 50%;will-change:transform,opacity}
.comp .el.xtra{display:none}
.comp.big .el.xtra{display:block}
.comp img,.pm-in .comp img{position:static;display:block;width:100%;height:auto;object-fit:fill;user-select:none}
.pm-in .comp .k-voters img,.comp .k-voters img{width:10cqw;height:10cqw}
.comp .lift{box-shadow:var(--k-shadow)}
.comp .ic{width:1em;height:1em}
/* Parkwood */
.k-player img{filter:drop-shadow(0 2cqw 3cqw rgba(16,16,20,.18))}
.k-spec{display:grid;gap:.6cqw;padding:5cqw 5cqw 4.4cqw;border-radius:3cqw;background:#F6F1EA;color:#2D3D31}
.spec-aa{font-family:'Cinzel',serif;font-size:19cqw;line-height:.9;letter-spacing:-.02em}
.spec-l{font-family:var(--k-mono);font-size:2.4cqw;letter-spacing:.18em;opacity:.7}
.spec-m{font-family:'Cinzel',serif;font-size:3.4cqw;letter-spacing:.06em}
.k-pill-pw{display:flex!important;align-items:center;justify-content:center;gap:2cqw;height:11cqw;border-radius:99px;background:#DBE442;color:#1F2A22;font-size:3.3cqw;font-weight:600;letter-spacing:.12em}
.k-chips{display:flex!important;justify-content:space-between;gap:2cqw;font-family:var(--k-mono);font-size:2.3cqw;color:var(--mute)}
.k-chips span{display:grid;justify-items:center;gap:1.6cqw}
.k-chips i{display:block;width:13cqw;height:13cqw;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.k-ask{display:flex!important;align-items:center;gap:1.8cqw;height:11cqw;padding:0 2.4cqw 0 3.4cqw;border-radius:99px;background:#DBE442;color:#1F2A22;font-size:3.3cqw;font-weight:600}
.k-ask b{margin-left:auto;padding:.6cqw 1.6cqw;border-radius:99px;background:#1F2A22;color:#DBE442;font-size:2.4cqw}
/* Padel app */
.k-sliver,.k-card{border-radius:4cqw;overflow:hidden}
.k-code{display:grid!important;gap:2cqw}
.code-f{font-family:var(--k-mono);font-size:2.3cqw;color:var(--mute);letter-spacing:.04em}
.k-code code{font-family:var(--k-mono);font-size:3.25cqw;line-height:1.5;white-space:pre;color:var(--ink)}
.k-code b{font-weight:600;color:var(--accent)}
.k-code i{font-style:normal;color:var(--mute)}
.k-tabs{display:flex!important;justify-content:space-between;align-items:center;height:12cqw;padding:0 4cqw;border-radius:99px;background:#FFFFFF;color:#66705F;font-size:4.6cqw}
.k-tabs .on{color:#2D3D31;position:relative}
.k-tabs .on::after{content:"";position:absolute;left:50%;bottom:-2.2cqw;width:1.4cqw;height:1.4cqw;margin-left:-.7cqw;border-radius:50%;background:#2D3D31}
/* THINK */
.k-globe svg{display:block;width:100%;height:auto}
.k-head{display:grid!important;font-family:var(--serif);font-size:9.2cqw;line-height:1.02;letter-spacing:-.035em;font-weight:500}
.k-head em{font-style:italic;color:var(--k-think)}
.k-vote{display:flex!important;gap:2cqw;padding:2cqw;border-radius:99px;background:var(--bg)}
.k-vote span{flex:1;display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:11cqw;border-radius:99px;font-size:4.2cqw;font-weight:600}
.k-vote .yes{background:var(--k-think);color:#FFFFFF}
.k-vote .no{background:var(--well);color:var(--ink)}
.k-voters{display:flex!important;align-items:center;justify-content:space-between}
.k-voters .faces{display:flex}
.k-voters img{border-radius:50%;border:.7cqw solid var(--bg);margin-left:-2.6cqw}
.k-voters img:first-child{margin-left:0}
.k-voters .live{display:flex;align-items:center;gap:1.4cqw;font-family:var(--k-mono);font-size:2.8cqw;letter-spacing:.14em;color:var(--mute)}
.k-voters .live i{width:2cqw;height:2cqw;border-radius:50%;background:#E5484D}
.k-mark{border-radius:22%;overflow:hidden}
/* Initial */
.k-icon img{filter:drop-shadow(0 3cqw 4cqw rgba(16,16,20,.28));border-radius:22%}
.k-timer{display:flex!important;align-items:center;gap:2.4cqw;height:13cqw;padding:0 4cqw;border-radius:99px;background:#111114;color:#FFFFFF;font-size:4.6cqw}
.k-timer .mx{display:block;height:6cqw}
.mx svg{display:block;height:100%;width:auto}
.k-letter{display:grid!important;place-items:center;aspect-ratio:1;border-radius:50%;background:#111114;box-shadow:inset 0 0 0 1.1cqw #FFD60A,var(--k-shadow)!important}
.k-letter .mx{height:9cqw}
.k-cat{display:grid!important;gap:1.6cqw;padding:2cqw;border-radius:4cqw;background:#F2F2EF}
.k-cat .row{display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 3cqw;border-radius:3cqw;background:#FFFFFF;color:#111114;font-size:4.2cqw;font-weight:500}
.k-cat .row>span{display:grid;gap:.4cqw}
.k-cat small{font-family:var(--k-mono);font-size:2cqw;letter-spacing:.14em;color:#8A8A86;font-weight:400}
.k-cat .ic{color:#2E9E5B;font-size:4.4cqw}
.k-ticket{display:grid!important;gap:2.4cqw;padding:4.4cqw;border-radius:4cqw;background:#FFD60A;color:#111114}
.t-k,.t-x{font-family:var(--k-mono);font-size:2.2cqw;letter-spacing:.16em}
.t-x{opacity:.55}
.k-ticket .mx{height:11cqw}
.t-q{font-size:4.6cqw;font-weight:600;letter-spacing:-.02em}
.k-sw{display:grid!important;gap:2cqw;font-family:var(--k-mono);font-size:2.2cqw;color:var(--mute)}
.k-sw span{display:flex;align-items:center;gap:1.6cqw}
.k-sw i{width:6cqw;height:6cqw;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}
/* Personas */
.k-picon{border-radius:22%;overflow:hidden}
.k-hello{display:grid!important;color:var(--ink)}
.k-hello small{font-size:3.6cqw;color:var(--mute)}
.k-hello span{font-family:var(--serif);font-weight:700;font-size:11cqw;line-height:1;letter-spacing:-.03em}
.k-create{display:flex!important;align-items:center;justify-content:center;gap:1.6cqw;height:11cqw;border-radius:99px;background:#3F9F7E;color:#0B1A14;font-size:4cqw;font-weight:600}
.k-tiles,.k-row{border-radius:4cqw;overflow:hidden;background:#0D1A15}
.k-sys{display:flex!important;align-items:center;gap:1.6cqw;font-family:var(--k-mono);font-size:2.6cqw;letter-spacing:.06em;color:var(--mute)}
.k-sys .n{display:flex;align-items:center;gap:1.2cqw;color:var(--ink);white-space:nowrap}
.k-sys .n .ic{font-size:3.6cqw}
.k-sys .ln{flex:1;height:1px;background:currentColor;opacity:.5}
.k-chips2{display:flex!important;gap:2cqw;flex-wrap:wrap}
.k-chips2 span{display:flex;align-items:center;gap:1.4cqw;height:8cqw;padding:0 3cqw;border-radius:99px;background:var(--well);font-size:3cqw;color:var(--ink)}