/* Layout: a pinned hero "room" where Ben starts his day, then alternating card + lane rows and three pinned scene
   stages (van, academy pitch, referee). Ben lives in one fixed overlay SVG the page scrolls past.
   The page is themed by the viewer's own clock (data-tod on <html>), not by the OS light/dark setting:
   night 23–07 · morning 07–10 · day 10–19 · evening 19–23. Each theme sets every colour explicitly. */
:root{
  --feet:640px;
  /* day — crisp, computerised light mode */
  --bg:#F5F6F8; --bg2:#EBEEF3; --panel:#FFFFFF; --ink:#0A0F1E; --muted:#535D72; --line:#0A0F1E; --soft:#D5DAE3;
  --accent:#2350FF; --accent2:#00A88F; --hot:#FF3B2F; --gold:#FFB800; --on-accent:#FFFFFF; --chip:#EEF2FF;
  --r:0px; --rs:0px; --bw:1.5px; --shadow:6px 6px 0 var(--ink); --shadow-s:3px 3px 0 var(--ink);
  --display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --neon:"Yellowtail","Brush Script MT",cursive;
  --room-wall:#E9EDF4; --room-floor:#C9D0DC; --room-edge:#0A0F1E; --grass:#3FA35B; --grass2:#2F8C4A;
  color-scheme:light;
}
html[data-tod="night"]{
  --bg:#030405; --bg2:#0B0D12; --panel:#0B0E14; --ink:#F7F3E8; --muted:#A3ABBA; --line:#F7F3E8; --soft:#2A303C;
  --accent:#FFD84A; --accent2:#8AD8FF; --hot:#FF6A86; --gold:#FFD84A; --on-accent:#0A0A0A; --chip:#151A24;
  --r:14px; --rs:10px; --bw:1.5px; --shadow:0 0 0 1px rgba(247,243,232,.06),0 24px 60px -30px rgba(138,216,255,.35); --shadow-s:none;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --room-wall:#141A2A; --room-floor:#232B3C; --room-edge:#F7F3E8; --grass:#173A26; --grass2:#10291B;
  color-scheme:dark;
}
html[data-tod="morning"]{
  --bg:#EAF5FF; --bg2:#FFF7D6; --panel:#FFFFFF; --ink:#0F2F59; --muted:#4A6990; --line:#B7D7F3; --soft:#D6E9FA;
  --accent:#FFC21A; --accent2:#2E9CF0; --hot:#FF7558; --gold:#FFC21A; --on-accent:#0F2F59; --chip:#FFF3C2;
  --r:24px; --rs:14px; --bw:2px; --shadow:0 22px 48px -28px rgba(46,156,240,.55); --shadow-s:0 8px 18px -12px rgba(46,156,240,.6);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --room-wall:#DDF0FF; --room-floor:#FFE39A; --room-edge:#0F2F59; --grass:#62C26F; --grass2:#4BAA5B;
  color-scheme:light;
}
html[data-tod="evening"]{
  --bg:#13081F; --bg2:#1E0D33; --panel:#1B0C2E; --ink:#FFF0FB; --muted:#C9AEDD; --line:#6B3596; --soft:#341752;
  --accent:#FF4FD8; --accent2:#3FE2FF; --hot:#FFD447; --gold:#FFD447; --on-accent:#13081F; --chip:#2A1245;
  --r:18px; --rs:12px; --bw:1.5px; --shadow:0 0 0 1px rgba(255,79,216,.25),0 0 40px -12px rgba(255,79,216,.45); --shadow-s:0 0 18px -6px rgba(63,226,255,.6);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --room-wall:#2A1145; --room-floor:#3B1A5C; --room-edge:#FF4FD8; --grass:#1F5A3A; --grass2:#174A2F;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s,color .5s}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
html[data-tod="day"] body::before,html:not([data-tod]) body::before{background:
  linear-gradient(var(--soft) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--soft) 1px,transparent 1px) 0 0/48px 48px;opacity:.55}
html[data-tod="night"] body::before{background:
  radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 33% 72%,#fff 60%,transparent),
  radial-gradient(1.4px 1.4px at 58% 9%,#fff 60%,transparent),radial-gradient(1px 1px at 77% 41%,#fff 60%,transparent),
  radial-gradient(1.2px 1.2px at 91% 83%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 51%,#cfe9ff 60%,transparent),
  radial-gradient(1px 1px at 66% 62%,#fff 60%,transparent),radial-gradient(1.3px 1.3px at 45% 33%,#ffe9a8 60%,transparent),
  radial-gradient(900px 600px at 85% -10%,rgba(138,216,255,.08),transparent 60%);opacity:.9}
html[data-tod="morning"] body::before{background:
  radial-gradient(900px 520px at 90% -8%,rgba(255,214,77,.55),transparent 62%),
  radial-gradient(800px 600px at -5% 40%,rgba(255,255,255,.9),transparent 60%),
  linear-gradient(180deg,#D9EEFF 0%,#EAF5FF 45%,#FFF8DC 100%)}
html[data-tod="evening"] body::before{background:
  radial-gradient(800px 520px at 88% 4%,rgba(255,79,216,.20),transparent 60%),
  radial-gradient(700px 600px at 0% 55%,rgba(63,226,255,.12),transparent 60%),
  radial-gradient(700px 500px at 100% 95%,rgba(255,212,71,.10),transparent 60%)}

a{color:inherit}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.kicker{font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);display:flex;align-items:center;gap:10px}
html[data-tod="morning"] .kicker{color:#1F7FCC}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.015em}
h2{font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.02;margin:12px 0 14px}
html[data-tod="day"] h2{font-weight:700;letter-spacing:-.01em;text-transform:none}
h3{font-weight:700;font-size:20px;line-height:1.15}
p{margin:0}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
.nav .in{height:64px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 18px/1 var(--display);letter-spacing:.02em}
.mark{width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:800 13px/1 var(--mono);letter-spacing:.02em;border-radius:var(--rs)}
html[data-tod="evening"] .mark{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),0 0 14px rgba(255,79,216,.6)}
.brand small{display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.links{display:flex;gap:22px;margin-left:auto}
.links a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--muted)}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--rs);font:700 15px/1 var(--body);text-decoration:none;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
html[data-tod="day"] .btn{box-shadow:var(--shadow-s)}
html[data-tod="day"] .btn.pri{border-color:var(--ink)}
html[data-tod="evening"] .btn.pri{box-shadow:0 0 22px -4px var(--accent)}
html[data-tod="night"] .btn.pri{box-shadow:0 0 24px -8px var(--accent)}
.nav .btn{min-height:38px;padding:0 14px;font-size:14px}
@media (max-width:900px){.links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:520px){.brand small{display:none}}

/* ---------- hero (pinned while Ben starts his day) ---------- */
.hero{position:relative;height:calc(100svh + 120svh)}
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hero-grid{height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:28px;padding-top:calc(64px + env(safe-area-inset-top,0px) + 10vh)}
.hero-copy{display:flex;flex-direction:column;gap:16px;min-width:0;position:relative;z-index:4}
.hello{font:600 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.hello b{color:var(--ink)}
.clockchip{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border:1px solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:999px;background:var(--chip);color:var(--ink);font-variant-numeric:tabular-nums}
html[data-tod="day"] .clockchip{border-radius:0;border-color:var(--ink)}
.clockchip i{width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
.banner{font-weight:800;font-size:clamp(54px,8.4vw,128px);line-height:.86;letter-spacing:-.035em;display:flex;flex-direction:column}
.banner .b2{font-size:.56em;letter-spacing:-.02em;line-height:.95}
html[data-tod="day"] .banner{font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
html[data-tod="day"] .banner .b1::after{content:"_";color:var(--accent);animation:caret 1s steps(1) infinite;margin-left:.04em}
@keyframes caret{50%{opacity:0}}
html[data-tod="night"] .banner .b1{color:transparent;-webkit-text-stroke:2px var(--ink)}
html[data-tod="night"] .banner .b2{color:var(--accent)}
html[data-tod="morning"] .banner .b1{background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 90%,transparent 90%);width:max-content;max-width:100%}
html[data-tod="evening"] .banner .b1{font-family:var(--neon);font-weight:400;letter-spacing:0;color:#FFE6FA;text-shadow:0 0 6px #fff,0 0 18px var(--accent),0 0 40px var(--accent),0 0 80px var(--accent);animation:flick 6s infinite;font-size:1.05em;line-height:1}
html[data-tod="evening"] .banner .b2{color:var(--accent2);text-shadow:0 0 18px rgba(63,226,255,.55)}
@keyframes flick{0%,40%,44%,100%{opacity:1}42%{opacity:.55}43%{opacity:.9}}
.phrase{font:700 clamp(19px,1.9vw,26px)/1.25 var(--display);max-width:26ch;text-wrap:balance}
html[data-tod="day"] .phrase{font-weight:600}
.sub{color:var(--muted);max-width:52ch;font-size:16.5px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.hero-lane{position:relative;height:100%}
#introSpot{position:absolute;left:calc(50% + 10px);right:max(16px,calc((100vw - 1240px)/2 + 16px));top:calc(64px + 7vh);height:calc(76vh - 64px - 7vh - 10px);pointer-events:none}
.cue{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;pointer-events:none}
.cue span{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
.cue svg{width:14px;height:14px;animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}

/* ---------- industries ticker ---------- */
.ticker{position:relative;z-index:4;border-block:var(--bw) solid var(--line);background:var(--panel);overflow:hidden;white-space:nowrap}
html[data-tod="morning"] .ticker{background:var(--accent);border-color:var(--accent)}
html[data-tod="evening"] .ticker{background:var(--bg2);border-color:var(--accent)}
.ticker .tk{display:inline-flex;gap:0;animation:tick 48s linear infinite;padding-block:14px}
.ticker span{font:700 15px/1 var(--display);letter-spacing:.02em;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.ticker span::after{content:"";width:7px;height:7px;background:var(--accent2);transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .tk{animation:none}}

/* ---------- generic rows ---------- */
.sec{position:relative;padding-block:clamp(90px,12vw,150px)}
.row{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:0;align-items:stretch}
.row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}
.row.flip .lane{order:-1}
.lane{position:relative;min-height:200px}
.card{position:relative;z-index:4;background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(24px,3.4vw,42px);min-width:0}
html[data-tod="night"] .card{border-color:color-mix(in srgb,var(--line) 70%,transparent)}
html[data-tod="day"] .card::before,html[data-tod="day"] .card::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent)}
html[data-tod="day"] .card::before{top:-8px;left:-8px;border-right:0;border-bottom:0}
html[data-tod="day"] .card::after{bottom:-8px;right:-8px;border-left:0;border-top:0}
.card > p{color:var(--muted);max-width:62ch}
.card .lead{color:var(--ink);font-size:18px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--muted);font-size:15.5px}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:var(--rs);background:color-mix(in srgb,var(--accent2) 18%,transparent);border:1.5px solid var(--accent2)}
.ticks li::after{content:"";position:absolute;left:5.5px;top:8px;width:5px;height:8px;border:solid var(--accent2);border-width:0 2px 2px 0;transform:rotate(45deg)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--mono);letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:var(--chip);color:var(--ink);border:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
html[data-tod="day"] .tag{border-radius:0}
.stack{font:500 13px/1.6 var(--mono);color:var(--muted);margin-top:18px}

.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.cap{padding:16px;border-radius:var(--rs);background:var(--bg2);border:1px solid color-mix(in srgb,var(--line) 22%,transparent);min-width:0}
.cap h3{font-size:17px;margin-bottom:4px}
.cap p{color:var(--muted);font-size:14.5px;line-height:1.5}
.cap svg{width:24px;height:24px;color:var(--accent2);margin-bottom:8px}

/* ---------- pinned scene stages ---------- */
.scene{position:relative}
.scene .stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:4}
.sgrid{height:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start;padding-top:calc(84px + env(safe-area-inset-top,0px))}
.sgrid.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.sgrid.flip .scard{order:2}
.scard{position:relative;z-index:4;max-height:calc(var(--feet) - 110px);overflow:hidden}
.scard .card{padding:clamp(20px,2.6vw,34px)}
.scard h2{font-size:clamp(30px,3.4vw,46px)}
.sarea{position:relative;height:calc(var(--feet) - 84px)}
.ground{position:absolute;left:0;right:0;top:var(--feet);bottom:0;z-index:1}
.ground.road{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 18%,var(--bg)) 0 6px,color-mix(in srgb,var(--ink) 8%,var(--bg)) 6px)}
.ground.pitch{background:repeating-linear-gradient(90deg,var(--grass) 0 70px,var(--grass2) 70px 140px);border-top:3px solid #F4F7F2}
.ground.pitch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}

/* locked builds */
.locks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.lk{border-radius:var(--rs);border:1px solid color-mix(in srgb,var(--line) 30%,transparent);background:var(--bg2);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.lk .shot{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:#0E1622}
.lk .shot svg.mock{position:absolute;inset:0;width:100%;height:100%;filter:blur(3.2px) saturate(.9);transform:scale(1.04)}
.lk .shot .glass{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%),repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 6px,transparent 6px 12px)}
.lk .pad{position:absolute;left:50%;top:50%;width:84px;height:100px;margin:-56px 0 0 -42px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.lk .stamp{position:absolute;right:10px;bottom:10px;font:700 11px/1 var(--mono);letter-spacing:.1em;padding:6px 9px;border-radius:4px;background:#FF3B2F;color:#fff;transform:rotate(-4deg)}
.lk .tx{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.lk .tx p{color:var(--muted);font-size:14.5px;line-height:1.5}
.shake .pad{animation:rattle .5s ease-in-out infinite;transform-origin:50% 20%}
@keyframes rattle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(8deg)}}

/* workshop grid */
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.wk{padding:18px;border-radius:var(--rs);background:var(--bg2);border:1px solid color-mix(in srgb,var(--line) 22%,transparent);display:flex;flex-direction:column;gap:8px;min-width:0}
.wk p{color:var(--muted);font-size:14.5px;line-height:1.5}
.wk .tag{align-self:flex-start}


/* websites tiles */
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.site{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--rs);overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 30%,transparent);background:var(--bg2);transition:transform .2s;min-width:0}
.site:hover{transform:translateY(-3px)}
.site .bro{height:16px;display:flex;gap:4px;align-items:center;padding:0 7px;background:rgba(0,0,0,.18)}
.site .bro i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65)}
.site .pv{aspect-ratio:16/9;max-width:100%;position:relative;overflow:hidden}
.site .pv svg{position:absolute;inset:0;width:100%;height:100%}
.site .nm{padding:10px 12px;display:flex;justify-content:space-between;gap:8px;font:700 14.5px/1.2 var(--display);align-items:center}
.site .nm small{font:500 11px/1.2 var(--mono);color:var(--muted)}

/* contact */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px;font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:0}
.form input,.form select,.form textarea{font:400 16px/1.4 var(--body);color:var(--ink);background:var(--bg);border:var(--bw) solid color-mix(in srgb,var(--line) 45%,transparent);border-radius:var(--rs);padding:12px 13px;width:100%;min-width:0}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 25%,transparent)}
.err{color:var(--hot);font-size:14px}
.thanks{margin-top:22px;padding:22px;border-radius:var(--rs);background:var(--bg2);border:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
.thanks h3{font-size:26px;margin-bottom:6px}
.where{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

footer{position:relative;z-index:4;border-top:1px solid color-mix(in srgb,var(--line) 30%,transparent);background:var(--bg2);padding-block:36px calc(90px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 36px;justify-content:space-between;align-items:center}
footer p{color:var(--muted);font-size:14px}

/* ---------- Ben's overlay, bubbles and the big football ---------- */
#ov{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:9;overflow:visible}
html[data-tod="night"] #figs{filter:drop-shadow(0 0 1.2px rgba(220,235,255,.7))}
html[data-tod="evening"] #figs{filter:drop-shadow(0 0 2px rgba(255,79,216,.45))}
.bub{position:fixed;left:0;top:0;z-index:20;max-width:250px;padding:11px 14px;border-radius:16px;background:#FFFDF5;color:#1B1408;font:700 14.5px/1.35 var(--body);box-shadow:0 14px 34px -14px rgba(0,0,0,.6),0 0 0 2px #22160F;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.bub.show{opacity:1}
.bub::after{content:"";position:absolute;left:var(--tail,40px);bottom:-8px;width:15px;height:15px;background:#FFFDF5;transform:translateX(-50%) rotate(45deg);box-shadow:2px 2px 0 0 #22160F;border-radius:0 0 3px 0}
.bub.alt{background:#FFF2A8}
.bub.alt::after{background:#FFF2A8}
#ballBack{position:fixed;inset:0;z-index:29;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(0,0,0,.15),rgba(0,0,0,.7))}
#ball{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:0;will-change:transform}
#ball svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- time-of-day switch ---------- */
.todsw{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid color-mix(in srgb,var(--line) 40%,transparent);box-shadow:0 10px 30px -16px rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-tod="day"] .todsw{border-radius:0;border-color:var(--ink)}
.todsw span{font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted);padding:0 6px 0 8px;white-space:nowrap}
.todsw button{width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
html[data-tod="day"] .todsw button{border-radius:0}
.todsw button svg{width:18px;height:18px}
.todsw button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.todsw button:hover{color:var(--ink)}
.todsw button[aria-pressed="true"]:hover{color:var(--on-accent)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:calc(76px + env(safe-area-inset-top,0px))}
  .hero-lane{display:none}
  #introSpot{left:auto;right:max(12px,env(safe-area-inset-right,0px));width:82vw;top:auto;bottom:calc(100svh - var(--feet));height:30svh}
  .banner{font-size:clamp(44px,14vw,72px)}
  .hero .sub{display:none}
  .phrase{font-size:18px;max-width:none}
  .hello{font-size:11.5px}
  .cue{display:none}
  .sec{padding-block:70px}
  .row{grid-template-columns:minmax(0,1fr) 22vw}
  .row.flip{grid-template-columns:22vw minmax(0,1fr)}
  .card{padding:22px 18px}
  .caps,.locks,.form{grid-template-columns:minmax(0,1fr)}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .sites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgrid,.sgrid.flip{grid-template-columns:minmax(0,1fr);gap:0;padding-top:calc(72px + env(safe-area-inset-top,0px))}
  .sgrid .sarea{display:none}
  .scard{max-height:calc(var(--feet) - 190px)}
  .scard .card{padding:18px 16px}
  .scard .card > p:not(.lead){display:none}
  .scard .ticks{display:none}
  .scard .lead{font-size:15px}
  .scard h2{font-size:30px;margin:6px 0 8px}
  .todsw span{display:none}
}
@media (max-width:420px){.sites{grid-template-columns:minmax(0,1fr)}}

/* ---------- server-rendered enquiry form (Blazor) ---------- */
.form .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form .field > label{font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.form .invalid{border-color:var(--hot)}
.form .invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--hot) 25%,transparent)}
.validation-message{color:var(--hot);font-size:13.5px;line-height:1.35}
.form .err{margin:0;padding:12px 14px;border-radius:var(--rs);background:color-mix(in srgb,var(--hot) 12%,transparent);border:1px solid color-mix(in srgb,var(--hot) 45%,transparent);color:var(--ink);font-size:15px}
.form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form .note{color:var(--muted);font-size:13px;margin:0}
.thanks .ref{font:600 14px/1 var(--mono);letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:var(--chip);border:1px solid color-mix(in srgb,var(--line) 30%,transparent);white-space:nowrap}
.thanks p + p{margin-top:8px}

/* ---------- plain pages (not found, error) ---------- */
.plain{min-height:100svh;display:grid;place-items:center;padding-block:96px}
.plain .card{max-width:560px;display:flex;flex-direction:column;gap:14px}
.plain .card h1{font-size:clamp(34px,5vw,52px);line-height:1}
.plain .card p{color:var(--muted)}