/* Parkwood Padel Club: three homepage directions on one markup. html[data-d=a|b|c], html[data-theme=light|dark].
   Brand guide colours only. Fonts: Jost stands in for Mr Eaves XL Mod OT, Cinzel for Felix Titling, until licensed webfonts arrive. */
:root{
  --green:#525C44; --cream:#E0D0B8; --lgreen:#8E997F; --white:#FFFFFF; --neon:#DBE442; --night:#2D3D31;
  --display:"Cinzel",Georgia,serif; --body:"Jost","Avenir Next",system-ui,sans-serif;
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 20.5%,1.043 24.5%,1.035 28.4%,1 39.7%,.994 51%,1);
  --r:22px; --pad:clamp(16px,4vw,56px); --max:1240px;
}
/* A: Clubhouse (cream editorial) */
html[data-d=a]{--bg:var(--cream);--bg2:var(--white);--ink:var(--night);--mute:#5b6656;--card:var(--white);--line:rgba(45,61,49,.14);--acc:var(--green);--accInk:var(--white);--glyph:var(--green);--band:var(--green);--bandInk:var(--cream)}
html[data-d=a][data-theme=dark]{--bg:var(--night);--bg2:#26342a;--ink:var(--cream);--mute:#b9b09f;--card:#36483a;--line:rgba(224,208,184,.16);--acc:var(--neon);--accInk:var(--night);--glyph:var(--neon);--band:var(--green);--bandInk:var(--cream)}
/* B: Night court (dark, neon as the signature) */
html[data-d=b]{--bg:var(--night);--bg2:#26342a;--ink:var(--cream);--mute:#b9b09f;--card:#36483a;--line:rgba(224,208,184,.16);--acc:var(--neon);--accInk:var(--night);--glyph:var(--neon);--band:var(--green);--bandInk:var(--cream)}
html[data-d=b][data-theme=light]{--bg:var(--white);--bg2:var(--cream);--ink:var(--night);--mute:#5b6656;--card:var(--cream);--line:rgba(45,61,49,.14);--acc:var(--night);--accInk:var(--neon);--glyph:var(--green);--band:var(--night);--bandInk:var(--cream)}
/* C: The village (white, green bands, arch shapes from the emblem) */
html[data-d=c]{--bg:var(--white);--bg2:var(--cream);--ink:var(--night);--mute:#5b6656;--card:var(--white);--line:rgba(45,61,49,.14);--acc:var(--green);--accInk:var(--white);--glyph:var(--green);--band:var(--green);--bandInk:var(--white)}
html[data-d=c][data-theme=dark]{--bg:var(--night);--bg2:#26342a;--ink:var(--cream);--mute:#b9b09f;--card:#36483a;--line:rgba(224,208,184,.16);--acc:var(--neon);--accInk:var(--night);--glyph:var(--neon);--band:var(--green);--bandInk:var(--cream)}
@media (prefers-color-scheme:dark){html[data-d=a]:not([data-theme=light]),html[data-d=c]:not([data-theme=light]){--bg:var(--night);--bg2:#26342a;--ink:var(--cream);--mute:#b9b09f;--card:#36483a;--line:rgba(224,208,184,.16);--acc:var(--neon);--accInk:var(--night);--glyph:var(--neon)}}

*{box-sizing:border-box;margin:0}
/* .btn and friends set display, which beats the hidden attribute on its own. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--glyph);outline-offset:2px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.kick{display:flex;align-items:center;gap:10px;font:500 13px/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.kick .ico{color:var(--glyph)}
.well{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--glyph)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.02em;line-height:1.08}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:20px;letter-spacing:.04em}
p{color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:999px;font:500 15px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .5s var(--spring)}
.btn:active{transform:scale(.96)}
.btn.pri{background:var(--acc);color:var(--accInk)}
.btn.sec{background:var(--card);color:var(--ink)}
.tbc{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tbc::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lgreen);margin-right:8px;vertical-align:middle}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo{height:40px;width:auto;transition:height .3s ease}
.top{transition:transform .45s var(--spring),box-shadow .3s ease}
.top .wrap{transition:min-height .3s ease}
.top.slim{box-shadow:0 1px 0 color-mix(in srgb,var(--ink,#000) 10%,transparent)}
.top.slim .wrap{min-height:58px}.top.slim .logo{height:32px}
.top.tuck{transform:translateY(-100%)}
.prog{display:none}
.scrolly .prog{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:var(--neon);transform-origin:left;transform:scaleX(0);pointer-events:none}
.logo.cream{display:none}
[data-theme=dark] .logo.dark,html[data-d=b]:not([data-theme=light]) .logo.dark{display:none}
[data-theme=dark] .logo.cream,html[data-d=b]:not([data-theme=light]) .logo.cream{display:block}
nav.links{display:flex;gap:24px}
nav.links a{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
nav.links .ico{width:18px;height:18px;color:var(--glyph)}

/* hero */
.hero{position:relative}
.media{position:relative;overflow:hidden;background:var(--night)}
.media video,.media img{width:100%;height:100%;object-fit:cover}
.media .scrim{position:absolute;inset:0;pointer-events:none}
.hero h1{font-size:clamp(40px,7vw,96px)}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px}
.hero-copy{display:flex;flex-direction:column;gap:22px}

html[data-d=a] .hero{padding:56px 0 24px}
html[data-d=a] .hero-copy{align-items:center;text-align:center;max-width:860px;margin:0 auto 40px}
html[data-d=a] .hero .media{aspect-ratio:16/7;max-width:1200px;margin:0 auto;border-radius:28px}
html[data-d=a] .hero .scrim{background:linear-gradient(180deg,transparent 55%,rgba(45,61,49,.45))}

html[data-d=b] .hero{min-height:min(92vh,900px);display:flex;align-items:flex-end;padding:0 0 64px}
html[data-d=b] .hero .media{position:absolute;inset:0;margin:0;max-width:none;width:100%}
html[data-d=b] .hero .media video,html[data-d=b] .hero .media img{filter:saturate(.9)}
html[data-d=b] .hero .scrim{background:radial-gradient(120% 90% at 70% 30%,transparent 30%,var(--night) 92%),linear-gradient(0deg,var(--night) 4%,transparent 60%)}
html[data-d=b] .hero-copy{position:relative;z-index:1;max-width:900px;color:var(--cream)}
html[data-d=b] .hero-copy p{color:#d6cbb8}
html[data-d=b] .hero h1 em{font-style:normal;color:var(--neon)}
html[data-d=b][data-theme=light] .hero .btn.sec{background:rgba(224,208,184,.16);color:var(--cream)}
html[data-d=b] .hero .btn.sec{background:rgba(224,208,184,.14);color:var(--cream)}
html[data-d=b] .hero .btn.pri{background:var(--neon);color:var(--night)}

html[data-d=c] .hero{padding:40px 0 56px;background:var(--band);color:var(--bandInk)}
html[data-d=c] .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
html[data-d=c] .hero-copy p,html[data-d=c] .hero .kick{color:color-mix(in srgb,var(--bandInk) 78%,transparent)}
html[data-d=c] .hero .kick .ico{color:var(--neon)}
html[data-d=c] .hero .media{aspect-ratio:4/5;border-radius:999px 999px 28px 28px}
html[data-d=c] .hero .btn.pri{background:var(--neon);color:var(--night)}
html[data-d=c] .hero .btn.sec{background:rgba(255,255,255,.12);color:var(--bandInk)}
.mini{display:flex;flex-wrap:wrap;gap:20px;font-size:14px}
.mini span{display:flex;align-items:center;gap:8px}

/* sections */
section.s{padding:clamp(64px,9vw,120px) 0}
.s .head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--card);border-radius:var(--r)}
.card .ico{width:26px;height:26px;color:var(--glyph)}
.band{background:var(--band);color:var(--bandInk)}
.band p,.band .kick{color:color-mix(in srgb,var(--bandInk) 76%,transparent)}
.band .card{background:rgba(255,255,255,.08)}
.band .card .ico,.band .kick .ico{color:var(--neon)}
.band .well{background:rgba(255,255,255,.1);color:var(--neon)}
.alt{background:var(--bg2)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.info{display:flex;flex-direction:column;gap:0;background:var(--card);border-radius:var(--r);padding:8px 24px}
.row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.row:last-child{border:0}
.row .ico{margin-top:3px;color:var(--glyph)}
.row b{display:block;font-weight:500;color:var(--ink)}
.row p{font-size:15px}

@media (max-width:700px){.hero .vbtn{width:44px;height:44px}}

/* precinct */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcol{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--card);border-radius:var(--r)}
.pcol h3{display:flex;align-items:center;gap:10px;font-size:17px}
.pcol h3 .ico{color:var(--glyph)}
.pcol ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.pcol li{display:flex;flex-direction:column;gap:2px;font-size:15px}
.pcol li b{font-weight:500}
.pcol li span{color:var(--mute);font-size:14px}
.pcol li.us b{color:var(--glyph)}
.palm{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:16px;padding:24px;background:var(--card);border-radius:var(--r)}
.src{font-size:13px;color:var(--mute);margin-top:20px}
html[data-d=c] .pcol{border-radius:999px 999px var(--r) var(--r);padding-top:48px;text-align:center;align-items:center}
html[data-d=c] .pcol h3{flex-direction:column}
html[data-d=b] .pcol{background:transparent;border-top:1px solid var(--line);border-radius:0;padding:24px 0}

/* ask */
.askbox{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--card);color:var(--ink);font:400 15px var(--body);cursor:pointer}
.chips .ico{width:16px;height:16px;color:var(--glyph)}
.band .chips button{background:rgba(255,255,255,.1);color:var(--bandInk)}
.band .chips .ico{color:var(--neon)}

footer{padding:48px 0 120px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer p{font-size:14px}

/* Ask Parkwood */
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--neon);color:var(--night);font:500 15px var(--body);letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 30px rgba(45,61,49,.28);transition:transform .6s var(--spring),opacity .3s}
.fab:active{transform:scale(.95)}
.chat-open .fab{transform:scale(.6);opacity:0;pointer-events:none}
.sheet{position:fixed;right:20px;bottom:20px;z-index:50;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100dvh - 40px));display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border-radius:26px;box-shadow:0 24px 70px rgba(20,28,22,.35);transform-origin:bottom right;transform:scale(.2);opacity:0;visibility:hidden;transition:transform .55s var(--spring),opacity .25s,visibility 0s .55s}
.chat-open .sheet{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--spring),opacity .2s,visibility 0s}
.sh-top{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.sh-top img{width:36px;height:auto}
.sh-top div{flex:1;line-height:1.25}
.sh-top small{display:block;font-size:12px;color:var(--mute);letter-spacing:.06em}
.x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;animation:pop .45s var(--spring) both}
.msg.bot{align-self:flex-start;background:var(--card);color:var(--ink);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--acc);color:var(--accInk);border-bottom-right-radius:6px}
.msg small{display:block;margin-top:6px;font-size:11px;opacity:.7}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.composer input{flex:1;min-width:0;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--card);color:var(--ink);font:400 16px var(--body)}
.composer button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--acc);color:var(--accInk);cursor:pointer}
.composer button[disabled]{opacity:.45}
.preview-note{padding:0 16px 12px;font-size:12px;color:var(--mute)}

/* reveal: only under .armed, so no-JS, print and thumbnails get the finished page */
.armed [data-r]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s var(--spring);transition-delay:calc(var(--i,0) * 60ms)}
.armed [data-r].in{opacity:1;transform:none}
.armed .hero [data-h]{opacity:0;transform:translateY(14px);animation:rise .9s var(--spring) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rise{to{opacity:1;transform:none}}
html.rm *,html.rm *::before{animation:none!important;transition:none!important}
html.rm [data-r],html.rm [data-h]{opacity:1!important;transform:none!important}

@media (max-width:900px){
  nav.links{display:none}
  html[data-d=c] .hero .wrap,.split,.askbox{grid-template-columns:1fr}
  html[data-d=c] .hero .media{aspect-ratio:1/1;max-width:420px;width:100%;margin:0 auto}
  .pgrid{grid-template-columns:1fr 1fr}
  html[data-d=a] .hero .media{aspect-ratio:4/3;border-radius:22px}
  .palm{grid-template-columns:auto 1fr}
  .palm .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:560px){
  body{font-size:16px}
  .pgrid{grid-template-columns:1fr}
  .top .btn span{display:none}
  .top .btn{padding:0 14px}
  html[data-d=b] .hero{min-height:760px}
  html[data-d=b] .hero .label{right:auto;left:16px;top:88px}
  html[data-d=b] .hero .vbtn{top:80px}
  .fab span{display:none}.fab{padding:0 16px}
  .sheet{right:8px;left:8px;bottom:8px;width:auto;height:calc(100dvh - 16px);transform-origin:bottom right}
}
.pcol{color:var(--ink)} .pcol h3 .ico{width:26px;height:26px}
html[data-d=b] .pcol{color:var(--bandInk)} html[data-d=b] .pcol li span{color:color-mix(in srgb,var(--bandInk) 70%,transparent)} html[data-d=b] .pcol h3 .ico,html[data-d=b] .pcol li.us b{color:var(--neon)}
.palm{color:var(--ink)} html[data-d=b] .palm{background:rgba(255,255,255,.08);color:var(--bandInk)}
html[data-d=a] .hero h1{font-size:clamp(38px,5.4vw,76px)} html[data-d=a] .hero-copy{margin-bottom:32px;gap:18px}

/* Feature cards, premium motion (founder, 10 Oct 2026). One entrance: the card
   rises and settles, the glyph draws itself, a neon rule grows under the title.
   On hover a soft spotlight follows the pointer and the card lifts. No loops;
   reduced motion shows the finished card. */
.card{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--spring),box-shadow .45s ease,background-color .3s ease}
.card h3{position:relative;padding-bottom:10px}
.card h3::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:36px;border-radius:2px;background:var(--neon,var(--glyph));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--spring) .25s}
.card .ico{transition:transform .5s var(--spring)}
.card .ico{stroke-dasharray:120;stroke-dashoffset:0}
.armed .card[data-r] .ico{stroke-dashoffset:120;transition:stroke-dashoffset 1.1s cubic-bezier(.3,0,.2,1) calc(var(--i,0) * 60ms + .15s),transform .5s var(--spring)}
.armed .card[data-r].in .ico{stroke-dashoffset:0}
.armed .card[data-r]{transform:translateY(26px) scale(.97)}
.armed .card[data-r].in{transform:none}
.card.in h3::after,html:not(.armed) .card h3::after{transform:scaleX(1)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(212,240,90,.14),transparent 70%)}
@media (hover:hover){
  .card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.28)}
  .card:hover::before{opacity:1}
  .card:hover .ico{transform:translateY(-3px) scale(1.08)}
  .card:hover h3::after{transform:scaleX(2.2)}
}
html.rm .card,html.rm .card *{transition:none!important}
html.rm .card .ico{stroke-dashoffset:0!important}
html.rm .card h3::after{transform:scaleX(1)!important}
@media print{.card .ico{stroke-dashoffset:0!important}.card h3::after{transform:scaleX(1)!important}}

/* Brand guide assets, premium pass (founder, 10 Oct 2026). Photos sit in
   editorial frames with a caption glyph; each reveals once (the frame opens
   from an inset, the image settles 1.04 to 1). No loops; reduced motion, print
   and no JS see the finished frame. */
.pic{position:relative;margin:0;display:flex;flex-direction:column;gap:12px}
.pic img{width:100%;height:auto;border-radius:var(--r)}
.pic figcaption{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pic figcaption .ico{width:16px;height:16px;color:var(--glyph)}
.photo{overflow:visible}
.photo>img{display:block;clip-path:inset(0 round var(--r))}
.armed .pic[data-r]{opacity:1;transform:none}
.armed .pic[data-r]>img,.armed .pic[data-r] .mural-scroll img{clip-path:inset(12% 8% 12% 8% round var(--r));transform:scale(1.04);transition:clip-path 1.1s cubic-bezier(.2,.7,.1,1) calc(var(--i,0) * 90ms),transform 1.4s cubic-bezier(.2,.7,.1,1) calc(var(--i,0) * 90ms)}
.armed .pic[data-r].in>img,.armed .pic[data-r].in .mural-scroll img{clip-path:inset(0 round var(--r));transform:none}
.armed .pic[data-r] figcaption{opacity:0;transition:opacity .6s ease calc(var(--i,0) * 90ms + .5s)}
.armed .pic[data-r].in figcaption{opacity:1}
html.rm .pic img,html.rm .pic svg{clip-path:inset(0 round var(--r))!important;transform:none!important}
html.rm .pic figcaption{opacity:1!important}

/* Photo strip */
.look{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:56px;align-items:start}
.look .pic:nth-child(2){margin-top:72px}
.look .pic:nth-child(3){margin-top:24px}

/* The mural band */
.mural{padding-bottom:clamp(48px,7vw,96px)}
.mural-fig{gap:14px}
.mural-scroll{width:100%;min-width:0;max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.mural-scroll img{background:#f4f1ea}
@media (max-width:900px){
  .look{grid-template-columns:1fr 1fr}
  .look .wide{grid-column:1/-1}
  .look .wide img{aspect-ratio:4/3;object-fit:cover}
  .look .pic:nth-child(2),.look .pic:nth-child(3){margin-top:0}
}
@media (max-width:560px){
  .look{gap:12px}
  .pic figcaption{font-size:11px;letter-spacing:.06em}
  .mural-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mural-scroll img{width:auto;max-width:none;height:240px}
}
.mural-fig figcaption{flex-wrap:wrap}
.swipe{display:none;align-items:center;gap:6px;color:var(--ink)}
@media (max-width:560px){.swipe{display:inline-flex}}

/* Precinct links: the whole row is the target; the out glyph says it leaves the site. */
.plink{display:block;color:inherit;text-decoration:none;border-radius:10px;margin:-6px -8px;padding:6px 8px;transition:background .2s}
.plink b{display:inline-flex;align-items:center;gap:6px}.plink b .ico{width:13px;height:13px;opacity:.55;transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.plink:hover{background:rgba(255,255,255,.06)}.plink:hover b .ico{opacity:1;transform:translate(2px,-2px)}
.plink:focus-visible{outline:2px solid currentColor;outline-offset:2px}
html.rm .plink,html.rm .plink b .ico{transition:none}

/* How to play: dark forest cards on a rail; the rail draws once, dots light in step */
.how-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,88px);align-items:start}
.how-grid>.head{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.how h2 em{font-style:normal;color:var(--neon)}
.steps{list-style:none;padding:0 0 0 36px;position:relative;display:flex;flex-direction:column;gap:20px}
.steps::before,.steps::after{content:"";position:absolute;left:9px;top:34px;bottom:34px;width:2px;border-radius:2px;transform-origin:top}
.steps::before{background:rgba(219,228,66,.18)}
.steps::after{background:var(--neon)}
.step{position:relative}
.step .dot{position:absolute;left:-36px;top:24px;width:20px;height:20px;border-radius:50%;background:var(--neon);box-shadow:0 0 0 5px var(--bg);border:2px solid var(--neon)}
/* scroll-linked rail: only under .scrolly (JS ran, motion allowed); otherwise finished */
.scrolly .steps::after{transform:scaleY(var(--fill,0))}
.scrolly .step .dot{background:var(--bg);transform:scale(.8);transition:transform .5s var(--spring),background-color .25s ease}
.scrolly .step.on .dot{background:var(--neon);transform:none}
.scrolly .step .sc{opacity:.55;transform:translateY(12px);transition:opacity .45s ease,transform .7s var(--spring),box-shadow .45s ease}
.scrolly .step.on .sc{opacity:1;transform:none}
.scrolly .step.cur .sc{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.scrolly .step .num{color:rgba(224,208,184,.5);transition:color .3s ease}
.scrolly .step.on .num{color:var(--neon)}
.scrolly .step .sc li{transform:translateY(8px);opacity:.7;transition:transform .6s var(--spring),opacity .4s ease}
.scrolly .step.on .sc li{transform:none;opacity:1}
.scrolly .step.on .sc li:nth-child(2){transition-delay:70ms}
.scrolly .step.on .sc li:nth-child(n+3){transition-delay:140ms}
@media (max-width:700px){.scrolly .step .sc{transform:translateY(6px)}.scrolly .step.cur .sc{transform:none}}
.sc{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r);background:#1F2B22;color:var(--cream)}
.st{display:flex;align-items:center;justify-content:space-between}
.sc .well{background:rgba(224,208,184,.1);color:var(--neon)}
.num{font:600 28px/1 var(--display);color:var(--neon);letter-spacing:.06em}
.sc h3{color:var(--cream)}
.sc ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.sc li{display:flex;gap:12px;align-items:flex-start;color:#d6cbb8;font-size:16px}
.sc li .ico{color:var(--neon);margin-top:2px}

@media (max-width:900px){.how-grid{grid-template-columns:1fr}.how-grid>.head{position:static}}

/* Booking dialog: grows from the button that opened it */
.bk-scrim{position:fixed;inset:0;z-index:60;background:rgba(12,18,14,.55);opacity:0;transition:opacity .25s}
.bk-open .bk-scrim{opacity:1}
.bk{position:fixed;z-index:61;left:50%;top:50%;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:26px;background:var(--bg2);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.45);transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) scale(.12);opacity:0;transition:transform .5s var(--spring),opacity .2s}
.bk-open .bk{transform:translate(-50%,-50%);opacity:1}
.bk-top{display:flex;align-items:center;gap:14px}
.bk-top>div{flex:1}.bk-top h2{font-size:24px}.bk-top p{font-size:14px}
.bk .x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.bk-form{display:flex;flex-direction:column;gap:14px}
.bk-note,.bk-to{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.bk-to{color:var(--mute);font-size:13px}
.bk-note .ico,.bk-to .ico{color:var(--glyph);margin-top:1px}
.f{display:flex;flex-direction:column;gap:6px}
.f>span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.f>span .ico{width:16px;height:16px;color:var(--glyph)}
/* One field family: 48 tall, 14 radius, a neutral lift instead of a hairline, an inner top highlight */
.f input,.f select{-webkit-appearance:none;appearance:none;min-height:48px;padding:0 16px;border:0;border-radius:14px;background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font:400 16px/1.2 var(--body);width:100%;transition:background-color .2s}
.f input:hover,.f select:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.f input::placeholder{color:var(--mute);opacity:1}
.f input:focus-visible,.f select:focus-visible{outline:2px solid var(--glyph);outline-offset:2px}
.f [aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #e07a5f}
.sel{position:relative;display:block}
.sel select{padding-right:48px;cursor:pointer}
.sel select option{background:var(--bg2);color:var(--ink)}
.sel .chev{position:absolute;right:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.err{color:#e8957d;font-size:13px}
.chk{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;color:var(--ink);cursor:pointer}
.chk input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:24px;height:24px;margin:0;border:0;border-radius:7px;background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 9%,transparent);color:var(--accInk);cursor:pointer;transition:background-color .2s}
.chk input::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform .35s var(--spring)}
.chk input:checked{background:var(--acc)}
.chk input:checked::before{transform:scale(1)}
.chk:hover input:not(:checked){background:color-mix(in srgb,var(--ink) 14%,transparent)}
.chk input:focus-visible{outline:2px solid var(--glyph);outline-offset:2px}
html.rm .chk input::before,html.rm .f input,html.rm .f select{transition:none}
.bk-status{font-size:14px;color:var(--ink)}.bk-status:empty{display:none}
.bk-acts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
html.rm .bk,html.rm .bk-scrim{transition:none}
@media (max-width:700px){
 .bk{left:0;right:0;top:auto;bottom:0;width:auto;max-height:92dvh;border-radius:26px 26px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(100%)}
 .bk-open .bk{transform:none}
 .bk-acts .btn{flex:1;justify-content:center}
}

@media print{.prog{display:none!important}.top{position:static;transform:none!important}.step .sc,.step .sc li{opacity:1!important;transform:none!important}.steps::after{transform:none!important}}

/* Booking facts card: each glyph tells its own line once, in turn, when the
   card arrives. Calendar draws then a day lands; the ticket draws and its
   perforation tears in; the clock face draws and the hands sweep to opening
   time; the opening spark bursts out from its core. Rows rise on one stagger.
   Played once; reduced motion, print
   and no JS show the finished card. */
.fxcard .row{position:relative}
.ico.fx{overflow:visible}
.ico.fx .hh,.ico.fx .mh{transform-origin:12px 12px}
.armed .fxcard .row{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .7s var(--spring)}
.armed .fxcard .row:nth-child(1){--k:0}.armed .fxcard .row:nth-child(2){--k:1}.armed .fxcard .row:nth-child(3){--k:2}.armed .fxcard .row:nth-child(4){--k:3}
.armed .fxcard .row{transition-delay:calc(var(--k,0) * 140ms + 120ms)}
.armed .fxcard.in .row{opacity:1;transform:none}
.armed .fxcard .d{stroke-dasharray:1;stroke-dashoffset:1}
.armed .fxcard.in .d{animation:fxDraw .9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(var(--k,0) * 140ms + 260ms)}
@keyframes fxDraw{to{stroke-dashoffset:0}}
.armed .fxcard .pop{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.armed .fxcard.in .pop{animation:fxPop .6s var(--spring) forwards;animation-delay:1.05s}
@keyframes fxPop{to{transform:scale(1)}}
.armed .fxcard .perf{opacity:0;transform:translateY(-6px)}
.armed .fxcard.in .perf{animation:fxTear .5s var(--spring) forwards;animation-delay:1.2s}
@keyframes fxTear{to{opacity:1;transform:none}}
.armed .fxcard .mh{transform:rotate(-200deg)}.armed .fxcard .hh{transform:rotate(-120deg)}
.armed .fxcard.in .mh{animation:fxSweep 1.3s cubic-bezier(.22,1,.36,1) forwards;animation-delay:1.25s}
.armed .fxcard.in .hh{animation:fxSweep 1.1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:1.35s}
@keyframes fxSweep{to{transform:rotate(0)}}
.armed .fxcard .rays{transform-box:fill-box;transform-origin:center;transform:scale(.3) rotate(-45deg);opacity:0}
.armed .fxcard .core{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.armed .fxcard.in .core{animation:fxPop .45s var(--spring) forwards;animation-delay:1.55s}
.armed .fxcard.in .rays{animation:fxBurst .8s var(--spring) forwards;animation-delay:1.7s}
@keyframes fxBurst{to{transform:none;opacity:1}}
.armed .fxcard .row b{transition:color .4s ease}
html.rm .fxcard .row,html.rm .fxcard .d,html.rm .fxcard .pop,html.rm .fxcard .perf,html.rm .fxcard .mh,html.rm .fxcard .hh,html.rm .fxcard .rays,html.rm .fxcard .core{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
@media print{.fxcard .row,.fxcard .d,.fxcard .pop,.fxcard .perf,.fxcard .mh,.fxcard .hh,.fxcard .rays,.fxcard .core{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;animation:none!important}}

/* ---- Complete site pass (11 Oct 2026): nav, menu sheet, court sheet, booking flow, the app, footer ---- */
nav.links{gap:20px}
nav.links a{font-size:13px;letter-spacing:.08em;position:relative;padding:6px 0}
nav.links a::after{content:"";position:absolute;left:26px;right:0;bottom:0;height:2px;border-radius:2px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--spring)}
nav.links a:hover::after,nav.links a[aria-current=true]::after{transform:scaleX(1)}
.top-acts{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;transition:transform .45s var(--spring)}
.menu-btn:active{transform:scale(.92)}
@media (max-width:1180px){nav.links{display:none}.menu-btn{display:grid}}
.mn-scrim{position:fixed;inset:0;z-index:70;background:rgba(12,18,14,.55);opacity:0;transition:opacity .25s}
.mn-open .mn-scrim{opacity:1}
.mn{position:fixed;z-index:71;top:12px;right:12px;width:min(360px,calc(100vw - 24px));display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:26px;background:var(--bg2);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.45);transform-origin:top right;transform:scale(.3);opacity:0;transition:transform .5s var(--spring),opacity .2s}
.mn-open .mn{transform:none;opacity:1}
.mn-top{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px 8px;font:600 15px var(--display);letter-spacing:.12em;text-transform:uppercase}
.mn a{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 12px;border-radius:14px;text-decoration:none;font-size:17px;letter-spacing:.04em}
.mn a .ico{color:var(--glyph)}
.mn a:hover,.mn a:focus-visible{background:var(--card);outline:none}
.mn .btn{margin-top:10px;justify-content:center}
html.rm .mn,html.rm .mn-scrim{transition:none}

/* court sheet */
.bkg{margin-top:48px;display:flex;flex-direction:column;gap:16px}
.bkg-bar{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;background:var(--card);font-size:13px;letter-spacing:.06em;color:var(--ink)}
.pill .ico{width:16px;height:16px;color:var(--glyph)}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
.day{flex:none;min-width:68px;padding:10px 8px;border:0;border-radius:18px;background:var(--card);color:var(--mute);font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;transition:transform .4s var(--spring),background-color .2s}
.day:hover{transform:translateY(-2px)}
.day b{display:block;font:600 20px/1.2 var(--display);color:var(--ink)}
.day small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.day[aria-pressed=true]{background:var(--acc);color:var(--accInk)}
.day[aria-pressed=true] b{color:var(--accInk)}
.bg{background:var(--card);border-radius:var(--r);overflow:hidden}
.bg-head,.bg-row{display:grid;grid-template-columns:88px repeat(var(--courts,4),minmax(0,1fr))}
.bg-head{border-bottom:1px solid var(--line)}
.bg-head div{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.bg-head div:first-child{justify-content:flex-start;padding-left:14px}
.bg-head .ico{width:16px;height:16px;color:var(--glyph)}
.bg-row{border-bottom:1px solid var(--line)}.bg-row:last-child{border:0}
.time{display:flex;align-items:center;padding:0 6px 0 14px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);border-right:1px solid var(--line)}
.slot{margin:5px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;border:0;border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;transition:transform .4s var(--spring),background-color .2s}
.slot .ico{width:17px;height:17px;color:var(--glyph)}
.slot b{font-size:13px;font-weight:500;letter-spacing:.04em}
.slot small{font-size:11px;color:var(--mute)}
.slot:not([disabled]):hover{transform:translateY(-2px)}
.slot[aria-pressed=true]{background:var(--acc);color:var(--accInk)}
.slot[aria-pressed=true] .ico,.slot[aria-pressed=true] small{color:var(--accInk)}
.slot.taken{background:transparent;color:var(--mute);cursor:not-allowed}
.slot.taken .ico{color:var(--mute)}
.slot.closed{background:repeating-linear-gradient(45deg,transparent,transparent 5px,var(--line) 5px,var(--line) 10px);color:var(--mute);cursor:not-allowed}
.slot.closed .ico{color:var(--mute)}
.slot:focus-visible,.day:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:4px}
.legend .ico{width:16px;height:16px;color:var(--glyph)}
.lg-free{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}.lg-pick{background:var(--acc)}.lg-taken{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}.lg-closed{background:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--mute) 3px,var(--mute) 5px)}
.tray{position:sticky;bottom:14px;z-index:15;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:16px 18px;border-radius:var(--r);background:var(--night);color:var(--cream);box-shadow:0 24px 50px -20px rgba(0,0,0,.7);transition:transform .5s var(--spring),opacity .2s}
html[data-theme=light] .tray{background:var(--green)}
.tray[hidden]{display:flex;visibility:hidden;opacity:0;transform:translateY(24px);pointer-events:none}
.tray-main{display:flex;gap:12px;align-items:center;min-width:0}
.tray .well{background:rgba(224,208,184,.12);color:var(--neon)}
.tray b{display:block;font-size:17px;font-weight:500}
.tray small{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:#d6cbb8}
.tray small span{display:inline-flex;align-items:center;gap:6px}
.tray small .ico{width:15px;height:15px;color:var(--neon)}
.tray .btn{background:var(--neon);color:var(--night)}
@media (max-width:560px){.bg-head,.bg-row{grid-template-columns:62px repeat(var(--courts,4),minmax(0,1fr))}.bg-head .ico,.slot small{display:none}.time{font-size:12px;padding-left:10px}.slot{margin:3px;min-height:50px}.tray .btn{flex:1;justify-content:center}}
html.rm .day,html.rm .slot,html.rm .tray{transition:none}

/* booking flow */
.bk{gap:16px}
.bk-prog{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:s}
.bk-prog li{position:relative;display:flex;align-items:center;gap:8px;padding-top:10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.bk-prog li .ico{width:16px;height:16px}
.bk-prog li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--line)}
.bk-prog li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--spring)}
.bk-prog li.done::after,.bk-prog li[aria-current=step]::after{transform:scaleX(1)}
.bk-prog li[aria-current=step],.bk-prog li.done{color:var(--ink)}
.bk-prog li[aria-current=step] .ico,.bk-prog li.done .ico{color:var(--glyph)}
.bk-step{display:flex;flex-direction:column;gap:14px}
.armed .bk-step:not([hidden]){animation:stepIn .45s var(--spring) both}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}}
.bk-step.back:not([hidden]){animation-name:stepBack}
@keyframes stepBack{from{opacity:0;transform:translateX(-18px)}}
.bk-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;min-height:96px;border:0;border-radius:16px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .4s var(--spring),background-color .2s}
.bk-choice button .ico{color:var(--glyph)}
.bk-choice b{font-size:15px;font-weight:500}
.bk-choice small{font-size:12px;color:var(--mute)}
.bk-choice [aria-checked=true]{background:var(--acc);color:var(--accInk)}
.bk-choice [aria-checked=true] .ico,.bk-choice [aria-checked=true] small{color:var(--accInk)}
.bk-choice [disabled]{cursor:not-allowed;opacity:.6}
.bk-choice button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.bk-fields{display:flex;flex-direction:column;gap:14px}
.bk-fields[hidden]{display:none}
.btn.apple{justify-content:center;background:var(--card);color:var(--mute);cursor:not-allowed}
.sum{display:flex;flex-direction:column;background:var(--card);border-radius:18px;padding:4px 18px}
.sum div{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sum div:last-child{border:0}
.sum dt{display:flex;align-items:center;gap:10px;flex:none;width:118px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sum dt .ico{width:16px;height:16px;color:var(--glyph)}
.sum dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.bk-step [data-change]{align-self:flex-start}
.bk-final{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;background:var(--card)}
.bk-final[hidden]{display:none}
.bk-final b{display:block;font-weight:500;margin-bottom:4px}
.bk-final p{color:var(--ink)}
.bk .err[data-err]{margin-top:-10px}
html.rm .bk-step{animation:none!important}html.rm .bk-prog li::after{transition:none}
@media (max-width:560px){.bk-choice{grid-template-columns:1fr}.bk-choice button{min-height:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px}.bk-choice button .ico{grid-row:span 2;align-self:center}.sum dt{width:96px}}

/* the app */
.app-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,88px);align-items:center}
.app-head{margin:0;max-width:none}
.app h2 em{font-style:normal;color:var(--neon)}
html[data-theme=light] .app h2 em{color:var(--green)}
.feats{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.feats button{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border:0;border-radius:18px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .25s,transform .4s var(--spring)}
.feats button:hover{background:color-mix(in srgb,var(--card) 55%,transparent)}
.feats button[aria-selected=true]{background:var(--card)}
.feats button[aria-selected=true] .well{background:var(--acc);color:var(--accInk)}
.feats button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.feats b{display:block;font-weight:500;font-size:16px}
.feats small{display:block;font-size:14px;color:var(--mute)}
.feats .well{flex:none;transition:background-color .25s,color .25s}
.also{list-style:none;padding:12px 12px 0;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.also li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mute)}
.also b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.also .ico{color:var(--glyph);margin-top:2px}
.soon{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;padding:0 18px;border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.soon .ico{color:var(--glyph)}
.stage{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;perspective:1400px}
.phone{position:relative;width:min(330px,78vw);aspect-ratio:414/900;padding:11px;border-radius:52px;background:linear-gradient(145deg,#3a4b3e,#141c16);box-shadow:0 50px 90px -30px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(224,208,184,.22);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,-8deg));transition:transform .9s var(--spring)}
.phone.live{transition:transform .12s linear}
.phone::after{content:"";position:absolute;top:22px;left:50%;width:90px;height:26px;margin-left:-45px;border-radius:20px;background:#0b100c;z-index:3}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:42px;background:var(--night)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(10%) scale(.98);transition:opacity .4s ease,transform .7s var(--spring)}
.screen img.out{transform:translateX(-10%) scale(.98)}
.screen img.on{opacity:1;transform:none}
.screen img.card-shot{object-fit:contain}
.stage figcaption{display:flex;align-items:center;gap:8px;max-width:340px;font-size:13px;color:var(--mute);text-align:left}
.stage figcaption .ico{width:16px;height:16px;color:var(--glyph)}
html.rm .phone{transform:none!important;transition:none}
html.rm .screen img{transition:none;transform:none}
@media (max-width:900px){.app-grid{grid-template-columns:1fr}.stage{order:-1}.phone{--ry:0deg}}

/* footer */
.foot{padding:64px 0 110px;border-top:1px solid var(--line);background:var(--bg2)}
.foot .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;align-items:start}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h3{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.12em}
.foot-col h3 .ico{color:var(--glyph)}
.foot-col p{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.foot-col p .ico{width:17px;height:17px;margin-top:3px;color:var(--glyph)}
.foot-col small{font-size:13px}
.foot-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:15px}
.foot-col a .ico{width:13px;height:13px;opacity:.6}
.foot-col a:hover{color:var(--glyph)}
.foot p a{text-decoration:none}
.foot .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.foot-base p{font-size:13px}
.credit{display:inline-flex;align-items:center;gap:8px;letter-spacing:.06em}
.credit .ico{width:16px;height:16px;color:var(--glyph)}
@media (max-width:900px){.foot .foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot .foot-grid{grid-template-columns:1fr}}
.bk-step[hidden]{display:none}
.foot-col p.lines{display:block}
.bk-acts [hidden]{display:none}

/* Ask Parkwood: three dots while the AI answers. They stop the moment the
   answer lands (the element is removed), and sit still under reduced motion. */
.msg.typing{display:inline-flex;gap:5px;align-items:center;min-height:20px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:pwDot 1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes pwDot{50%{opacity:1;transform:translateY(-2px)}}
html.rm .msg.typing i{animation:none;opacity:.6}
/* live booking: loading and error line, the live note, Your bookings */
.bkg-msg{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:28px 18px;color:var(--ink)}
.bkg-msg .ico{width:18px;height:18px;color:var(--glyph)}
.live-note{font-size:14px;color:var(--ink)}.live-note[hidden]{display:none}
.mine{display:grid;gap:12px}.mine[hidden]{display:none}
.mine h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500}
.mine h3 .ico{width:18px;height:18px;color:var(--glyph)}
.mine ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mine li{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px 16px;border-radius:18px;background:var(--card)}
.mine li>div:first-of-type{flex:1;min-width:180px;display:grid;gap:2px}
.mine li small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.mine li small .ico{width:14px;height:14px;color:var(--glyph)}
.mine-acts{display:flex;gap:10px}
.mine-acts .btn{min-height:44px}
.mine .well{background:var(--bg)}

/* How padel works (founder, 12 Oct 2026): a 3D court that plays each rule once.
   Without WebGL, without JS and in print: the poster and the six rules as a list. */
#how{padding-bottom:clamp(40px,5vw,72px)}
.rules{margin-bottom:clamp(64px,8vw,112px)}
.rules-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.rules-fig{display:flex;flex-direction:column;gap:12px;min-width:0}
.rules-stage{position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:#26342a;touch-action:pan-y;cursor:grab;outline-offset:3px}
.rules-stage.grabbing{cursor:grabbing}
.rules-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .5s ease}
.rules-poster{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s ease}
.rules.live .rules-stage canvas{opacity:1}
.rules.live .rules-poster{opacity:0}
.rules-hint{display:none;align-items:center;gap:10px;font-size:14px;color:var(--mute)}
.rules-hint .ico{color:var(--glyph)}
.rules.live .rules-hint{display:flex}
.rules-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.rules-rail,.rules-ctl,.rcap{display:none}
.rules.ready .rules-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rules.ready .rcap{display:flex}
.rules.ready .rules-ctl{display:flex;flex-wrap:wrap;gap:10px}
.rules.ready .rules-list{display:none}
.rchip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 12px;border:0;border-radius:999px;background:var(--card);color:var(--ink);font:500 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .45s var(--spring),background-color .25s ease,color .25s ease}
.rchip .ico{color:var(--glyph);transition:color .25s ease}
.rchip:active{transform:scale(.96)}
.rchip[aria-pressed=true]{background:var(--acc);color:var(--accInk)}
.rchip[aria-pressed=true] .ico{color:var(--accInk)}
.rcap{gap:14px;align-items:flex-start;padding:20px;background:var(--card);border-radius:var(--r);min-height:150px}
.rcap .well{background:var(--bg);flex:none}
.rcap b{display:flex;flex-direction:column;gap:6px;font:600 22px/1.15 var(--display);letter-spacing:.03em;color:var(--ink)}
.rcap .rnum{font:500 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--glyph)}
.rcap p{margin-top:8px}
.rcap.swap>div{animation:rcapIn .5s var(--spring) both}
@keyframes rcapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.rm .rcap.swap>div{animation:none}
.rules-ctl .btn{flex:1 1 auto;justify-content:center}
.rules-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.rules-list li{display:flex;gap:12px;align-items:flex-start}
.rules-list .ico{color:var(--glyph);margin-top:3px}
.rules-list b{color:var(--ink)}
@media (max-width:900px){
 .rules-grid{grid-template-columns:minmax(0,1fr)}
 .rules-stage{aspect-ratio:4/3}
}
@media (max-width:420px){.rchip span{font-size:12px;letter-spacing:.04em}.rchip{padding:0 8px;gap:6px}}
@media print{.rules-stage canvas,.rules-rail,.rules-ctl,.rcap,.rules-hint{display:none!important}.rules-poster{opacity:1!important}.rules-list{display:flex!important}.rules-grid{grid-template-columns:1fr 1fr}}

/* The AI tag on Ask Parkwood: a solid lime chip with night text (a real
   label, not a tinted outline), and the spark beside the sheet's subtitle. */
.fab .ai-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:var(--night,#2D3D31);color:var(--lime,#DBE442);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em}
.fab .ai-tag .ico{width:11px;height:11px}
.sh-top small{display:inline-flex;align-items:center;gap:5px}
.sh-top small .ico{width:12px;height:12px;color:var(--lime,#DBE442)}
/* Ask Parkwood voice (12 Oct 2026). The mic is a 44 px round control, neutral
   at rest, a solid fill when live. The bar shows one LIVE dot and a level ring
   driven by the audio level; the only loop, and it stops with the session.
   Reduced motion: no pulse, a still LIVE label. */
.composer .mic{background:var(--card);color:var(--glyph)}
.composer .mic.on{background:var(--acc);color:var(--accInk)}
.composer .mic:active,.vend:active{transform:scale(.94)}
.composer .mic,.vend{transition:transform .4s var(--spring),background .2s,color .2s}
.vbar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-top:1px solid var(--line);animation:pop .45s var(--spring) both}
.vbar[hidden]{display:none}
.vring{--lv:0;position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--glyph)}
.vring::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--glyph);opacity:calc(.15 + var(--lv) * .85);transform:scale(calc(1 + var(--lv) * .22));pointer-events:none}
.vbar:not([data-state=live]) .vring::after{opacity:0}
.vtxt{flex:1;min-width:0;line-height:1.3}
.vstate{display:flex;align-items:center;gap:7px;font-weight:500;font-size:15px;color:var(--ink)}
.vsub{display:block;font-size:12px;color:var(--mute);overflow-wrap:anywhere}
.vdot{display:none;width:8px;height:8px;border-radius:50%;background:#C8452F}
.vbar[data-state=live] .vdot{display:inline-block;animation:pwLive 1.6s ease-in-out infinite}
.vbar[data-state=live] .vstate::after{content:"LIVE";font-size:10px;letter-spacing:.14em;color:var(--mute)}
@keyframes pwLive{50%{opacity:.35}}
.vend{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--acc);color:var(--accInk);font:500 14px var(--body);cursor:pointer}
.vend[hidden]{display:none}
.vend .ico{width:16px;height:16px}
.vnote{align-self:center;max-width:90%;margin:0;font-size:12px;text-align:center;color:var(--mute)}
html.rm .vbar[data-state=live] .vdot{animation:none}
html.rm .vring::after{transform:none}
/* Ask Parkwood: Open the booking sheet, and the club's call-back form */
.chat-act{align-self:flex-start;text-decoration:none;display:flex;align-items:center;gap:10px;max-width:86%;min-height:48px;padding:10px 16px;border:0;border-radius:18px;background:var(--acc);color:var(--accInk);text-align:left;font:inherit;cursor:pointer;animation:pop .45s var(--spring) both;transition:transform .4s var(--spring)}
.chat-act:active{transform:scale(.97)}
.chat-act b{display:block;font-size:15px;font-weight:500}.chat-act small{display:block;font-size:12px;opacity:.85}
.lead{align-self:stretch;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--card);color:var(--ink);animation:pop .45s var(--spring) both}
.lead-h{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}.lead-h .ico{color:var(--glyph)}
.lead label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.lead label>span{display:block}.lead label>.ico{display:none}
.lead input:not([type=checkbox]){min-height:44px;padding:0 12px;border:0;border-radius:12px;background:var(--bg);color:var(--ink);font:400 15px var(--body)}
.lead .lead-c{flex-direction:row;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--ink)}
.lead .lead-c input{width:20px;height:20px;accent-color:var(--acc)}
.lead-err{margin:0;font-size:13px;color:#b3412e}
html[data-theme=dark] .lead-err{color:#f0a08f}
.lead-acts{display:flex;gap:8px;flex-wrap:wrap}.lead-acts .btn{min-height:44px;padding:0 16px;font-size:13px}
.lead-acts .btn.sec{background:var(--bg)}
.lead-note{font-size:11px;color:var(--mute)}
html.rm .chat-act,html.rm .lead{animation:none}
/* The call-back form as its own pop-up over the page: centred card on desktop, bottom sheet on phones. */
.lead-layer{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.lead-scrim{position:absolute;inset:0;background:rgba(45,61,49,.45);opacity:0;transition:opacity .25s ease}
.lead-layer .lead{align-self:center;position:relative;width:min(430px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:18px 18px 16px;gap:12px;background:var(--bg);box-shadow:0 30px 60px -20px rgba(45,61,49,.45);animation:none;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .2s ease,transform .45s var(--spring)}
.lead-layer .lead input:not([type=checkbox]){background:#fff}
.lead-layer .lead-acts .btn.sec{background:var(--card)}
.lead-layer.in .lead-scrim{opacity:1}.lead-layer.in .lead{opacity:1;transform:none}
.lead-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.lead-layer .lead-h{padding-right:48px;min-height:44px;font-size:17px}
@media (max-width:620px){.lead-layer{place-items:end stretch;padding:0}.lead-layer .lead{align-self:end;width:100%;border-radius:24px 24px 0 0;max-height:92dvh;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.lead-layer .lead{transform:translateY(100%)}}
html.rm .lead-layer .lead,html.rm .lead-scrim{transition:none}
/* Out reads red everywhere in the rules: the chip's cross glyph matches the red mark and glass. */
.rchip[data-step="4"] .ico{color:#D64B3C}

/* The skills drawer rising over the player's profile: one spring, revealed
   from the bottom edge so it reads as the app's own drawer. */
.screen img.drawer-shot{opacity:0;transform:translateY(16%);transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .7s ease;z-index:2;will-change:transform,opacity}
.screen img.drawer-shot.up{opacity:1;transform:none}
/* the profile underneath eases back as the drawer arrives, like a sheet over a screen */
.screen img.on{transition:opacity .4s ease,transform 1.2s cubic-bezier(.22,1,.36,1),filter 1.2s ease}
.screen.drawer-up img.on{transform:scale(.97);filter:brightness(.8)}
html.rm .screen img.drawer-shot{transition:none}
html.rm .screen img.on,html.rm .screen img.drawer-shot{transition:none}html.rm .screen.drawer-up img.on{transform:none;filter:none}

/* walk-through: scroll scrubs the render (frames on a canvas). Shown only under .armed; otherwise a poster gallery. */
.walk{padding-bottom:0}
.walk .wscroll{display:none;position:relative;height:520vh}
.armed .walk .wscroll{display:block}
.armed .walk .wgal{display:none}
.wstick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night);color:var(--cream)}
.wstick canvas{position:absolute;inset:0;width:100%;height:100%}
.wvig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(20,28,22,.55)),linear-gradient(transparent 60%,rgba(20,28,22,.65))}
.wtag{position:absolute;top:84px;right:var(--pad);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(45,61,49,.78);color:var(--cream);font:500 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.wtag .ico{width:16px;height:16px;color:var(--neon)}
.wchips{position:absolute;top:84px;left:var(--pad);display:flex;gap:8px;max-width:calc(100% - 2*var(--pad) - 210px);overflow-x:auto;scrollbar-width:none}
.wchips::-webkit-scrollbar{display:none}
.wchips .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(45,61,49,.78);color:var(--cream);font:500 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.wchips .chip .ico{width:18px;height:18px;color:var(--neon)}
.wchips .chip[aria-current=true]{background:var(--neon);color:var(--night)}
.wchips .chip[aria-current=true] .ico{color:var(--night)}
.wlabs{position:absolute;left:var(--pad);bottom:56px;width:min(420px,calc(100% - 2*var(--pad) - 180px))}
.wlab{position:absolute;left:0;bottom:0;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(45,61,49,.82);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .6s var(--spring)}
.wlab.on{opacity:1;transform:none}
.wlab .well{background:rgba(224,208,184,.12);color:var(--neon)}
.wlab h3{color:var(--cream)}
.wlab p{color:#d9ccb6;font-size:15px;line-height:1.4;margin-top:4px}
.wplan{position:absolute;right:var(--pad);bottom:104px;width:160px;padding:10px 10px 8px;border-radius:16px;background:rgba(45,61,49,.82)}
.wplan svg{display:block;width:100%;height:auto}
.wplan .o{fill:none;stroke:rgba(224,208,184,.5);stroke-width:1.2}
.wplan .c{fill:rgba(142,153,127,.25);stroke:rgba(224,208,184,.45);stroke-width:1}
.wplan .r{fill:rgba(224,208,184,.08);stroke:rgba(224,208,184,.35);stroke-width:1}
.wplan .t{fill:none;stroke:rgba(219,228,66,.45);stroke-width:1.2;stroke-dasharray:2 2.5}
.wplan .d{fill:var(--neon);stroke:var(--night);stroke-width:1.2}
.wplan figcaption{margin-top:4px;font:500 10px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#cbbfa9}
.wprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(224,208,184,.18)}
.wprog i{display:block;height:100%;width:100%;background:var(--neon);transform-origin:0 50%;transform:scaleX(0)}
.wgal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-bottom:clamp(64px,9vw,120px)}
.wpost img{width:100%;height:auto;border-radius:20px}
.wpost figcaption{display:flex;gap:12px;align-items:flex-start;margin-top:12px;color:var(--mute);font-size:15px}
.wpost figcaption b{display:block;color:var(--ink);font-family:var(--display);font-size:18px}
@media (max-width:700px){
 .wtag{top:74px;right:16px;padding:6px 10px;font-size:10px}
 .wchips{top:118px;left:0;right:0;max-width:none;padding:0 16px}
 .wlabs{left:16px;right:104px;width:auto;bottom:96px}
 .wlab{padding:12px 14px;gap:10px}.wlab h3{font-size:17px}.wlab p{font-size:14px}
 .wplan{right:16px;bottom:96px;top:auto;width:80px;padding:6px 6px 5px;border-radius:12px}
 .wplan figcaption{font-size:7.5px;letter-spacing:.06em}
 .wgal{grid-template-columns:1fr}
}

/* 13 Oct 2026: links in AI replies; cards in the chat log size to content
   (the log is a flex column, so a child must not shrink below its content);
   a soft scrim behind the hero text on phones so the kicker stays readable
   over the bright wall in the video without dimming the whole video. */
.msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.msg a:hover{text-decoration-thickness:2px}
.log>*{flex-shrink:0}
.chat-act{height:auto}
.chat-act>span{min-width:0}
html[data-d=b] .hero-copy::before{content:'';position:absolute;z-index:-1;left:-16px;right:-16px;top:-72px;bottom:-56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(45,61,49,0) 0,rgba(45,61,49,.88) 64px,rgba(45,61,49,.8) 52%,rgba(45,61,49,.9) 100%)}
@media (min-width:901px){html[data-d=b] .hero-copy::before{left:-12vw;right:-14vw;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}}
html[data-d=b] .hero .kick{color:var(--cream);text-shadow:0 1px 10px rgba(45,61,49,.9)}
/* Privacy link (13 Oct 2026) */
.foot-base a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;text-underline-offset:3px;margin-left:8px}
.foot-base a .ico{width:14px;height:14px}
.preview-note a,.lead-note a{color:inherit;text-underline-offset:2px}

/* Ask Parkwood, design A: the sphere leads (founder, 16 Oct 2026). The sphere is
   the mic; the state line sits under it, End beside it while voice is on. With
   an empty conversation it fills the sheet; once a message lands it compacts to
   the top on one spring. The composer is one white capsule, the disclosure one line. */
.orb{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 16px;min-height:0;transition:flex-grow .55s var(--spring),padding .55s var(--spring)}
.orb-btn{display:grid;place-items:center;width:200px;height:200px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:width .55s var(--spring),height .55s var(--spring),transform .4s var(--spring)}
.orb-btn:active{transform:scale(.96)}
.orb-btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.orb-btn[disabled]{cursor:default}
.orb-btn canvas{width:100%;height:100%;display:block}
.orb-t{font:500 24px/1.2 var(--display);letter-spacing:.03em;color:var(--ink);max-height:40px;overflow:hidden;transition:max-height .45s var(--spring),opacity .25s}
.orb-st{display:flex;align-items:center;gap:8px;min-height:18px;font:600 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-align:center}
.orb[data-vstate="again"] .orb-st{text-transform:none;letter-spacing:.02em;font-size:14px}
.orb[data-vstate="again"] .orb-st::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E") center/contain no-repeat}
.orb-sub{max-width:30ch;font-size:13px;line-height:1.4;color:var(--mute);text-align:center;overflow-wrap:anywhere}
.orb-sub:empty{display:none}
.orb .vend{min-height:44px}
.orb[data-vstate=live] .vdot{display:inline-block;animation:pwLive 1.6s ease-in-out infinite}
html.rm .orb .vdot{animation:none}
.talking .orb{flex-grow:0;padding:8px 16px 4px;border-bottom:1px solid var(--line)}
.talking .orb-btn{width:72px;height:72px}
.talking .orb-t{max-height:0;opacity:0}
.talking .orb-sub{display:none}
.talking .orb-st{min-height:16px}
.sheet:not(.talking) .log{flex:0 0 auto;padding:0}
.composer{border-top:0;padding:8px 12px 6px}
.composer{align-items:center;gap:6px;margin:0 12px;padding:6px 6px 6px 4px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.composer input{background:none;padding:0 12px}
.composer .go{background:var(--green);color:var(--white)}
.ai-line{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:10px 16px 14px;font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ai-line .ico{width:12px;height:12px;color:var(--green)}
.ai-line a{color:inherit;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin-block:-16px}
@media (max-height:640px){.orb-btn{width:150px;height:150px}}
html.rm .orb,html.rm .orb-btn,html.rm .orb-t{transition:none}

/* The register your interest pop-up (clause 1.7). It reuses .lead-layer, so it
   inherits the scrim, the entrance, the focus trap and the mobile sheet.

   ONE VIEW, NO SCROLL (founder, 23 Oct 2026: "so no scroll needed and just
   better UI UX"). What made it taller than a phone was four label-above-input
   pairs, a paragraph that repeated the head, and two equal buttons. Now the
   labels float inside their fields, the date is said once in the head, name and
   phone share a row, and there is one primary with a quiet way out under it. */
.reg-layer .lead.reg{gap:9px}
.reg-k{display:flex;align-items:center;gap:8px;padding-right:48px;min-height:44px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
.reg-k .ico{width:18px;height:18px;color:var(--glyph)}
.reg-t{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(23px,5.2vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.reg-b{margin:0 0 2px;font-size:14.5px;line-height:1.45;color:var(--mute)}

/* The offer is the reason to fill this in, so it leads rather than sits in a
   box of its own: a tinted card around it would also break the house rule. */
.reg-offer{display:flex;align-items:flex-start;gap:9px;margin:0 0 2px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.reg-offer .ico{width:18px;height:18px;flex:none;margin-top:1px;color:var(--glyph)}

.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* A field with its label inside it. The label lifts the moment there is
   anything to read, so the field never loses its name the way a bare
   placeholder does. */
.reg-f{position:relative;display:block}
.reg-f input{width:100%;height:54px;padding:20px 14px 6px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:400 15.5px var(--body)}
.reg-f input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.reg-f>span{position:absolute;left:15px;top:17px;font-size:15px;color:var(--mute);pointer-events:none;transition:transform .16s ease,font-size .16s ease,color .16s ease;transform-origin:left top}
.reg-f input:focus+span,.reg-f input:not(:placeholder-shown)+span{transform:translateY(-10px);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
html.rm .reg-f>span{transition:none}

.reg-layer .lead-c{flex-direction:row;align-items:flex-start;gap:10px;min-height:0;font-size:13px;line-height:1.35;color:var(--ink)}
.reg-layer .lead-c input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--acc)}

/* One primary, full width, with the quiet way out under it: two equal buttons
   side by side made "not now" look like half the offer. */
.reg-go{width:100%;justify-content:center;min-height:52px;margin-top:2px}
.reg-no{display:block;width:100%;min-height:40px;border:0;background:none;color:var(--mute);font:500 14px var(--body);letter-spacing:.04em;cursor:pointer}
.reg-no:hover{color:var(--ink)}

/* ── Doors open ────────────────────────────────────────────────────────────
   The club's Coming Soon poster as a band: the month and the year set like the
   poster sets them, the emblem large beside it. A green band in both schemes,
   because the poster's footer is green in both. */
.open-grid{display:flex;align-items:center;gap:clamp(20px,5vw,64px);justify-content:space-between}
.open-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.opening h2{display:flex;align-items:baseline;gap:.26em;color:var(--bandInk);font-size:clamp(44px,8vw,96px);letter-spacing:.04em;line-height:1}
.open-mo{text-transform:uppercase}
.open-yr{font-weight:400;opacity:.78}
.open-lede{font-size:clamp(16px,2vw,20px);max-width:30ch}
.opening .acts{display:flex;flex-wrap:wrap;gap:10px}
.opening .btn.pri{background:var(--neon);color:var(--night)}
.opening .btn.sec{background:rgba(255,255,255,.1);color:var(--bandInk)}
.open-mark{flex:none;width:clamp(70px,11vw,132px);opacity:.9}
.open-mark img{width:100%;height:auto}
@media (max-width:760px){.open-grid{gap:18px}.open-mark{align-self:flex-start;width:64px}}

/* ── Three stages ──────────────────────────────────────────────────────────
   The masterplan sheet, as rows. Counts are text; the plan beside each row is
   drawn from the same numbers and is decoration, so it carries no figure. */
.stg{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.stg-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(18px,3vw,30px) 0;border-bottom:1px solid var(--line)}
.stg-copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.stg-when{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.stg-when .ico{width:16px;height:16px;color:var(--glyph)}
.stg-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.stg-list li{display:flex;align-items:center;gap:9px;font-size:clamp(16px,1.8vw,19px);color:var(--ink)}
.stg-list .ico{width:19px;height:19px;color:var(--glyph)}
.stg-list b{font-weight:600}
.stg-plan{width:clamp(150px,22vw,230px);height:auto;flex:none}
.stg-plan .hall{fill:none;stroke:var(--line);stroke-width:1.5}
.stg-plan .in{fill:var(--glyph)}
.stg-plan .out{fill:none;stroke:var(--glyph);stroke-width:1.5}
.stg-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.stg-key span{display:flex;align-items:center;gap:8px}
.stg-key i{display:block;width:13px;height:16px;border-radius:2px;background:var(--glyph)}
.stg-key .k-out{background:none;border:1.5px solid var(--glyph)}
.stg-key .k-s{width:7px}
.stg-key .tbc{margin-left:auto}
.stg-key .tbc::before{margin-right:8px}
@media (max-width:720px){
  .stg-row{grid-template-columns:auto minmax(0,1fr);row-gap:14px}
  .stg-mark{min-width:3.6em;padding-left:18px}
  .stg-total{font-size:10px;letter-spacing:.1em}
  .stg-plan{grid-column:1/-1;width:100%}
  .stg-key .tbc{margin-left:0;flex-basis:100%}
}

/* A "to confirm" chip that is also the way to the answer. */
.tbc-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tbc-link::before{display:none}
.tbc-link .ico{width:15px;height:15px;color:var(--glyph)}

/* ── The register pop-up's brand head ──────────────────────────────────────
   "Be first on court": the emblem in cream on green, the club's own poster, so
   the thing that interrupts a visitor is unmistakably the club. Kept SHORT:
   it carries the opening date so the body copy does not have to repeat it. */
.reg-head{display:flex;align-items:center;gap:12px;margin:-18px -18px 6px;padding:13px 18px;background:var(--green);color:var(--cream);border-radius:18px 18px 0 0}
.reg-head img{width:34px;height:auto;flex:none}
.reg-head b{display:block;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.03em;line-height:1.15}
.reg-head span{display:block;margin-top:2px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 76%,transparent)}
.reg-layer .lead-x{background:rgba(255,255,255,.16);color:var(--cream);width:38px;height:38px;top:9px;right:9px}
@media (max-width:620px){.reg-head{margin:-18px -18px 6px;border-radius:24px 24px 0 0}}

/* ── Motion: the masterplan builds, the date arrives ──────────────────────
   Founder, 23 October 2026: "Can you use motion graphics for this section and
   make the Dec 2026 also more exciting".

   Everything here runs ONCE, off the same `.in` class the rest of the page
   reveals with, so there is one owner per transition and nothing loops. The
   `html.rm` rules at the top of this file already kill every animation and
   transition, so reduced motion gets the finished state with no extra branch. */

/* The plan draws itself: the hall first, then each court lands left to right,
   indoor filling and outdoor drawing its outline after. The order is the
   story, so the delays are deliberate rather than decorative. */
.armed .stg-plan .hall{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1s cubic-bezier(.3,0,.2,1) .1s}
.armed .stg-row.in .stg-plan .hall{stroke-dashoffset:0}

.armed .stg-plan .in,.armed .stg-plan .out{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);opacity:0;
  transition:transform .55s var(--spring) calc(.45s + var(--c,0) * 90ms),opacity .3s ease calc(.45s + var(--c,0) * 90ms)}
.armed .stg-row.in .stg-plan .in,.armed .stg-row.in .stg-plan .out{transform:none;opacity:1}

/* ── The stages, as stages ────────────────────────────────────────────────
   Founder, 23 Oct 2026: "so it emphasises the stages a bit more". Three rows
   on their own read as a table. A rail threads them into one climb, each
   stage marks it with a dot, and the running court total counts to the number
   the section promises: four at the doors, six, eight. */
.stg{position:relative}
.stg-mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:4.4em;padding-left:22px}

/* The rail: one line behind every mark, drawn once as the section arrives. */
.stg-mark::before{content:"";position:absolute;left:6px;top:-30%;bottom:-30%;width:2px;background:var(--line)}
.stg-row:first-child .stg-mark::before{top:50%}
.stg-row:last-child .stg-mark::before{bottom:50%}
.armed .stg-mark::before{transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.3,0,.2,1)}
.armed .stg-row.in .stg-mark::before{transform:none}

/* The stage's own dot on the rail. It fills when the stage lands. */
.stg-mark::after{content:"";position:absolute;left:1px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--lgreen)}
.armed .stg-mark::after{transform:scale(.3);opacity:0;transition:transform .5s var(--spring) .15s,opacity .3s ease .15s,background-color .4s ease .5s,border-color .4s ease .5s}
.armed .stg-row.in .stg-mark::after{transform:none;opacity:1;background:var(--acc);border-color:var(--acc)}

.stg-n{font-family:var(--display);font-size:clamp(26px,3.6vw,42px);line-height:1;color:var(--lgreen);letter-spacing:.06em}
.armed .stg-n{opacity:0;transform:translateY(12px) scale(.86);transition:opacity .45s ease,transform .7s var(--spring)}
.armed .stg-row.in .stg-n{opacity:1;transform:none}

/* The number the section is actually promising. */
.stg-total{display:block;font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.stg-total b{font-size:14px;color:var(--ink);font-weight:600}
.armed .stg-total{opacity:0;transform:translateY(8px);transition:opacity .4s ease .35s,transform .5s var(--spring) .35s}
.armed .stg-row.in .stg-total{opacity:1;transform:none}

/* The counting numbers must not reflow the line as they tick. */
.stg-list b{display:inline-block;min-width:.72em;text-align:right;font-variant-numeric:tabular-nums}

/* ── Doors open ───────────────────────────────────────────────────────────
   The month lands, the year follows it, and one pass of light crosses the
   band. The emblem wipes up from its own horizon, which is the shape already
   drawn into it. */
.opening{position:relative;overflow:hidden}

/* The heading carries `.in` for its spans to key off, but the spans do the
   moving: two owners on one transition is how a thing ends up fighting itself. */
.armed .opening h2[data-r]{opacity:1;transform:none;transition:none}
.armed .opening h2 .open-mo,.armed .opening h2 .open-yr{
  display:inline-block;opacity:0;transform:translateY(26px) scale(.94);
  transition:opacity .5s ease,transform .9s var(--spring)}
.armed .opening h2.in .open-mo{transition-delay:.05s}
.armed .opening h2.in .open-yr{transition-delay:.18s}
.armed .opening h2.in .open-mo,.armed .opening h2.in .open-yr{opacity:1;transform:none}

/* One sweep, once. A gradient the width of the band, moved across and then
   left alone: no animation-iteration-count to get wrong later. */
.opening::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 38%,rgba(219,228,66,.14) 50%,transparent 62%);
  transform:translateX(-120%)}
.armed .opening.lit::after{transition:transform 1.5s cubic-bezier(.33,0,.25,1) .35s;transform:translateX(120%)}
html.rm .opening::after{display:none}

.armed .open-mark img{clip-path:inset(100% 0 0 0);transform:translateY(12px);
  transition:clip-path 1s cubic-bezier(.3,0,.2,1) .3s,transform 1s var(--spring) .3s}
.armed .open-mark.in img{clip-path:inset(0 0 0 0);transform:none}
html.rm .open-mark img{clip-path:none!important}