/* ParClub site system, 29 Sep 2026.
   Shared by the homepage and every rebuilt page. One family (Schibsted
   Grotesk, normal case), colour from the P logo and the app, real screens in
   real device frames, Greg's own photography. Page sections are grouped below;
   society pages add their components at the end. Bump ?v= on every page that
   links this file when it changes. */
/* Homepage components (third pass).
   One family, Schibsted Grotesk, set in normal case: a working editorial
   grotesk rather than a display gimmick. Colour comes from the P logo and the
   app (#15803d action green, #22c55e signal green). Every phone is a real
   ParClub screen in a real device frame; every photo is Greg's own footage. */

:root{
  --night:#07160e; --pine:#10281a; --pine-2:#163523;
  --chalk:#f6efe4; --chalk-2:rgba(246,239,228,.78); --chalk-3:rgba(246,239,228,.58);
  --line-d:rgba(246,239,228,.12);
  --paper:#f4f0e7; --paper-2:#ece6d8; --card:#fdfbf7;
  --ink:#15251b; --ink-2:#3f5345; --ink-3:#5a6b5e; --line-l:rgba(21,37,27,.12);
  --green:#15803d; --green-deep:#0e5c2e; --signal:#22c55e; --signal-hi:#4ade80;
  --bronze:#c9a46b; --bronze-deep:#8a5a10; --flag:#e0533f; --gold:#f2c14e;

  --f:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-lg:28px; --r-xl:32px;
  --wrap:1320px; --gut:clamp(20px, 5vw, 72px);
  --shadow-1:0 1px 2px rgba(7,22,14,.06), 0 10px 30px -12px rgba(7,22,14,.16);
  --shadow-2:0 2px 6px rgba(7,22,14,.10), 0 40px 80px -24px rgba(7,22,14,.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--night); scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip; text-rendering:optimizeLegibility;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-60px; z-index:100; background:var(--signal); color:var(--night); padding:10px 16px; border-radius:10px; font-weight:700; }
.skip:focus{ top:12px; }
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto; padding:0 var(--gut); }

/* Type */
h1, h2.h{ font-weight:700; letter-spacing:-.04em; text-wrap:balance; }
h2.h{ font-size:clamp(40px, 5vw, 80px); line-height:1.02; margin-top:16px; }
h2.h em{ font-style:normal; }
.on-light h2.h em{ color:var(--green); }
.on-dark h2.h em{ color:var(--signal); }
.lbl{ font-weight:600; font-size:12.5px; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; }
.num{ font-weight:700; font-variant-numeric:lining-nums proportional-nums; letter-spacing:-.035em; }
.eyebrow{ color:var(--bronze-deep); }
.on-dark .eyebrow{ color:var(--bronze); }
.lede{ font-size:clamp(18px, 1.45vw, 24px); line-height:1.6; max-width:46ch; margin-top:22px; }
@media (min-width:1600px){ :root{ --wrap:1440px; } body{ font-size:18px; } .lbl{ font-size:13.5px; } }
.on-light .lede{ color:var(--ink-2); }
.on-dark .lede{ color:var(--chalk-2); }
.on-light{ background:var(--paper); color:var(--ink); }
.on-dark{ background:var(--night); color:var(--chalk); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 20px; border-radius:12px; border:0; font-weight:700; font-size:15px; line-height:1; white-space:nowrap; transition:background-color 180ms var(--ease), transform 180ms var(--ease); }
.btn:active{ transform:scale(.97); }
.btn-signal{ background:var(--signal); color:var(--night); }
.btn-signal:hover{ background:var(--signal-hi); }
.badges{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.badges a{ display:inline-block; line-height:0; border-radius:10px; transition:transform 180ms var(--ease); }
.badges a:hover{ transform:translateY(-2px); }
.badges img{ height:58px; width:auto; }
.contours{ position:absolute; inset:0; pointer-events:none; -webkit-mask:url(/art/home/contours.svg) center/cover no-repeat; mask:url(/art/home/contours.svg) center/cover no-repeat; }
.ico{ width:48px; height:48px; flex:none; }

/* Nav */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; color:var(--chalk); transition:background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.nav.is-scrolled{ background:rgba(7,22,14,.9); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); box-shadow:0 1px 0 var(--line-d); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:-.03em; }
.brand img{ width:34px; height:34px; border-radius:9px; box-shadow:0 0 0 1px var(--line-d); }
.nav-links{ display:flex; gap:4px; }
.nav-links a{ padding:8px 14px; border-radius:999px; font-size:15px; font-weight:500; color:var(--chalk-2); transition:color 180ms var(--ease), background-color 180ms var(--ease); }
.nav-links a:hover{ color:var(--chalk); background:rgba(246,239,228,.08); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-soc{ font-size:15px; font-weight:500; color:var(--chalk-2); transition:color 180ms var(--ease); }
.nav-soc:hover{ color:var(--chalk); }

/* Hero */
.hero{ position:relative; overflow:hidden; background:var(--night); color:var(--chalk); padding-top:72px; isolation:isolate; }
.hero .contours{ background:rgba(246,239,228,.06); z-index:-1; }
.hero-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px; align-items:center; min-height:max(700px, calc(100svh - 72px)); padding:32px var(--gut) 56px; }
.hero-copy{ padding:24px 0; }
.hero h1{ font-size:clamp(56px, 6.8vw, 128px); line-height:.97; margin-top:20px; }
.hero h1 .g{ display:block; color:var(--signal); }
.hero .lede{ max-width:42ch; }
.hero .badges{ margin-top:34px; }
.proof{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line-d); max-width:520px; }
.proof li{ display:flex; flex-direction:column; gap:6px; }
.proof b{ font-size:40px; line-height:.9; }
.proof span{ color:var(--chalk-3); }
.stage{ position:relative; height:clamp(600px, 46vw, 820px); }
.ph{ position:absolute; top:50%; will-change:transform; }
.ph img{ width:100%; height:auto; filter:drop-shadow(0 40px 60px rgba(0,0,0,.4)); }
.ph-front{ z-index:2; width:56%; left:4%; transform:translate3d(var(--px, 0px), calc(-50% + var(--py, 0px)), 0); }
.ph-back{ z-index:1; width:48%; right:0; transform:translate3d(calc(var(--px, 0px) * -.6), calc(-45% + var(--py, 0px) * -.6), 0) rotate(7deg); }
.ph-back img{ opacity:0; animation:rise 1100ms var(--ease) 420ms forwards; }
.ph-front img{ opacity:0; animation:rise 1100ms var(--ease) 200ms forwards; }
.bub{
  position:absolute; z-index:3; background:var(--card); color:var(--ink); border-radius:18px; box-shadow:var(--shadow-2); padding:13px 15px;
  opacity:0; animation:pop 800ms var(--ease) forwards, bob 7s ease-in-out infinite; animation-delay:calc(var(--d) * 1ms), calc(var(--d) * 1ms + 800ms);
}
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }
.bub .lbl{ font-size:10.5px; color:var(--bronze-deep); }
.b-mate{ --d:900; left:-14%; top:8%; display:flex; align-items:center; gap:11px; padding:11px 18px 11px 11px; border-radius:20px; }
.b-mate p{ font-size:14.5px; line-height:1.3; font-weight:700; letter-spacing:-.01em; }
.b-mate small{ display:block; font-size:12.5px; font-weight:400; color:var(--ink-3); }
.b-hcp{ --d:1200; left:-16%; bottom:16%; width:184px; }
.b-hcp .row{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:4px; }
.b-hcp b{ font-size:40px; line-height:.9; }
.b-hcp .delta{ font-size:11px; padding:4px 8px; color:var(--green); background:rgba(21,128,61,.10); }
.b-hcp svg{ width:100%; height:34px; margin-top:8px; overflow:visible; }
.b-gps{ --d:1500; right:-6%; bottom:6%; width:178px; }
.b-gps .yd{ display:flex; align-items:baseline; gap:7px; margin-top:4px; }
.b-gps .yd b{ font-size:46px; line-height:.9; }
.b-gps .yd span{ font-size:12.5px; line-height:1.2; color:var(--ink-3); }
.b-gps .bar{ position:relative; height:6px; border-radius:6px; background:var(--paper-2); margin-top:10px; overflow:hidden; }
.b-gps .bar i{ position:absolute; inset:0 auto 0 0; width:64%; border-radius:6px; background:linear-gradient(90deg, var(--green), var(--signal)); transform-origin:left; animation:grow 2200ms var(--ease) 1500ms both; }
@keyframes grow{ from{ transform:scaleX(.08); } to{ transform:none; } }
.av{ flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--h, var(--green)); }
.rise{ opacity:0; transform:translateY(24px); animation:rise 900ms var(--ease) forwards; animation-delay:calc(var(--d, 0) * 80ms + 60ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* Sections */
.sec{ position:relative; padding:clamp(88px, 11vw, 144px) 0; }
.sec-head{ max-width:760px; }
.reveal{ opacity:0; transform:translateY(44px); transition:opacity 1000ms var(--ease), transform 1000ms var(--ease); transition-delay:calc(var(--i, 0) * 80ms); }
.reveal.in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }

/* 01 On the course: real app screen */
/* 01 On the course: a pinned scene. The section is tall, the stage stays put,
   and scroll position (smoothed) drives the highlight, the zoom and the copy. */
.scene{ position:relative; height:380vh; background:var(--paper); }
.scene-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; padding-top:72px; }
.scene-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 110px); align-items:center; width:100%; }
.scene-copy .lede{ margin-top:18px; }
.ssteps{ display:grid; margin-top:40px; }
.sstep{ grid-area:1 / 1; display:grid; grid-template-columns:60px 1fr; gap:22px; align-items:start; opacity:0; transform:translateY(28px); transition:opacity 700ms var(--ease), transform 900ms var(--ease); pointer-events:none; }
.sstep.gone{ transform:translateY(-28px); }
.sstep.on{ opacity:1; transform:none; pointer-events:auto; }
.sstep .ico{ width:60px; height:60px; }
.sstep h3{ font-size:clamp(26px, 2.3vw, 38px); font-weight:700; line-height:1.1; letter-spacing:-.035em; }
.sstep p{ font-size:clamp(17px, 1.3vw, 20px); color:var(--ink-3); margin-top:10px; max-width:38ch; }
.sprog{ display:flex; gap:8px; margin-top:34px; max-width:420px; }
.sprog i{ flex:1; height:4px; border-radius:4px; background:var(--line-l); overflow:hidden; }
.sprog b{ display:block; height:100%; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; }
.try{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:40px; }
.try p{ font-weight:700; font-size:clamp(19px, 1.5vw, 24px); letter-spacing:-.02em; }
.try .badges img{ height:66px; }
.scene-phone{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.shot{ position:relative; width:min(460px, 100%, calc((100svh - 210px) * .534)); }
.shot-in{ position:relative; transform-origin:50% 50%; will-change:transform; }
.shot img{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(7,22,14,.28)); }
.hl{
  position:absolute; left:62.6%; top:16.6%; width:22.4%; height:11.8%; border-radius:14px; pointer-events:none; opacity:0;
  box-shadow:0 0 0 3px var(--signal), 0 0 0 10px rgba(34,197,94,.2), 0 0 40px 6px rgba(34,197,94,.25);
}
.hl i{ position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%); white-space:nowrap; background:var(--signal); color:var(--night); font-style:normal; font-weight:700; font-size:14px; padding:7px 12px; border-radius:10px; box-shadow:var(--shadow-1); transition:opacity 260ms var(--ease); }
.hl i.swap{ opacity:0; }
.scene-phone figcaption{ max-width:360px; text-align:center; font-size:14px; line-height:1.5; color:var(--ink-3); }
.scene-phone figcaption b{ color:var(--ink); font-weight:700; }

/* Founder */
.founder{ background:var(--paper); padding-top:0; }
.founder-grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.founder-photo{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3 / 4; box-shadow:var(--shadow-2); }
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.sig{ margin-top:28px; display:flex; align-items:center; gap:14px; }
.sig img{ width:44px; height:44px; border-radius:11px; }
.sig b{ display:block; font-weight:700; }
.sig span{ font-size:14px; color:var(--ink-3); }

/* 02 Your game */
.game{ background:var(--paper-2); }
.bento{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px; margin-top:60px; }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:28px; background:var(--card); box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.tile h3{ font-weight:700; font-size:24px; line-height:1.12; letter-spacing:-.03em; }
.tile .sub{ font-size:15.5px; color:var(--ink-3); margin-top:8px; max-width:44ch; }
.tile-foot{ margin-top:auto; padding-top:22px; }
.t-hcp{ grid-column:span 4; background:linear-gradient(160deg, #163a26 0%, #0e2718 55%, #0a1f13 100%); color:var(--chalk); min-height:500px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 330px); gap:6px; padding:32px 0 0 32px; }
.t-hcp .contours{ background:rgba(246,239,228,.05); }
.t-hcp .sub{ color:var(--chalk-2); max-width:34ch; }
.t-hcp .lbl{ color:var(--bronze); }
.hcp-main{ position:relative; display:flex; flex-direction:column; padding-bottom:28px; min-width:0; }
.hcp-num{ display:flex; align-items:baseline; gap:14px; margin-top:10px; flex-wrap:wrap; }
.hcp-num b{ font-size:clamp(76px, 7.4vw, 112px); line-height:.85; background:linear-gradient(180deg, #f6efe4 30%, #b9e6c6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.delta{ font-size:13px; font-weight:700; color:var(--night); background:var(--signal); padding:6px 11px; border-radius:999px; }
.chart{ position:relative; margin-top:auto; padding-top:28px; }
.chart svg{ width:100%; height:auto; overflow:visible; cursor:crosshair; touch-action:pan-y; }
.chart .ln{ fill:none; stroke:url(#hcpline); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2000ms var(--ease) 200ms; }
.chart .ar{ opacity:0; transition:opacity 1200ms var(--ease) 900ms; }
.chart .gd{ stroke:rgba(246,239,228,.10); stroke-dasharray:2 6; }
.chart .pt{ opacity:0; transition:opacity 500ms var(--ease); }
.chart .dot{ fill:var(--gold); stroke:#0e2718; stroke-width:4; opacity:0; transition:opacity 400ms var(--ease) 2000ms; }
.chart .scrub{ opacity:0; transition:opacity 150ms; }
.chart.on .scrub{ opacity:1; }
.chart .tip{ position:absolute; top:0; transform:translateX(-50%); padding:5px 10px; border-radius:10px; background:var(--chalk); color:var(--ink); font-size:13px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 150ms; }
.chart.on .tip{ opacity:1; }
.t-hcp.in .ln{ stroke-dashoffset:0; }
.t-hcp.in .ar, .t-hcp.in .dot, .t-hcp.in .pt{ opacity:1; }
.recent{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.recent li{ display:flex; align-items:center; gap:8px; padding:7px 11px 7px 7px; border-radius:12px; background:rgba(246,239,228,.07); box-shadow:inset 0 0 0 1px var(--line-d); font-size:13.5px; color:var(--chalk-2); }
.recent li b{ display:grid; place-items:center; min-width:34px; height:28px; padding:0 6px; border-radius:8px; font-size:14px; font-weight:800; color:var(--night); background:var(--c); }
.hcp-phone{ position:relative; align-self:end; justify-self:end; width:340px; margin:0 -14px -2px 0; }
.hcp-phone img{ width:100%; height:auto; display:block; filter:drop-shadow(-10px 20px 30px rgba(0,0,0,.35)); }

.t-same{ grid-column:span 2; background:var(--green); color:#fff; }
.t-same .contours{ background:rgba(255,255,255,.08); }
.t-same > *{ position:relative; }
.t-same .lbl{ color:rgba(255,255,255,.8); }
.t-same h3{ font-size:clamp(34px, 3vw, 44px); line-height:1; margin-top:12px; letter-spacing:-.04em; }
.t-same .sub{ color:rgba(255,255,255,.88); }
.t-same{ padding-bottom:0; }
.same-photo{ position:relative; flex:1; min-height:240px; margin:24px -28px 0; overflow:hidden; }
.same-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; }
.same-photo::before{ content:""; position:absolute; inset:0 0 auto 0; height:70px; z-index:1; background:linear-gradient(var(--green), rgba(21,128,61,0)); }
.setup-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.setup-chips li{ padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); font-size:14px; font-weight:600; }
.setup-chips li:first-child{ background:var(--chalk); color:var(--green-deep); box-shadow:none; }

.t-card{ grid-column:span 4; }
.t-fmt{ grid-column:span 2; }
.t-stats{ grid-column:span 6; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:28px; align-items:center; }
.t-card{ padding:0; }
.sc-head{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:24px 28px; background:linear-gradient(135deg, #f7f1e3, #efe6d2); border-bottom:1px solid var(--line-l); }
.sc-head > img{ width:50px; height:50px; border-radius:12px; box-shadow:var(--shadow-1); }
.sc-head h3{ font-size:clamp(22px, 1.8vw, 28px); }
.sc-head .sub{ margin-top:4px; font-size:15px; }
.card-total{ text-align:right; }
.card-total b{ display:block; font-size:62px; line-height:.84; color:var(--green-deep); letter-spacing:-.05em; }
.card-total span{ color:var(--ink-3); font-size:11px; }
.card-body{ padding:20px 28px 26px; }
.card-wrap{ overflow-x:auto; }
.card18{ width:100%; min-width:560px; border-collapse:separate; border-spacing:0; text-align:center; font-variant-numeric:tabular-nums; }
.card18 th, .card18 td{ padding:7px 0; font-size:15px; }
.card18 thead th{ background:var(--pine); color:var(--chalk); font-weight:700; font-size:13px; padding:9px 0; }
.card18 thead th:first-child{ border-radius:10px 0 0 10px; }
.card18 thead th:last-child{ border-radius:0 10px 10px 0; background:var(--green-deep); }
.card18 th[scope="row"]{ text-align:left; padding-left:10px; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.card18 thead th[scope="row"]{ color:var(--chalk-3); }
.card18 td{ border-bottom:1px solid var(--line-l); }
.card18 tr.yds td{ font-size:12.5px; color:var(--ink-3); }
.card18 tr.par td{ font-weight:600; }
.card18 tr.si td{ font-size:12.5px; color:var(--ink-3); }
.card18 sup{ color:var(--green); font-size:10px; margin-left:1px; }
.card18 tr.you td, .card18 tr.pts td{ border-bottom:0; padding:6px 0; }
.card18 td.tot{ font-weight:800; background:rgba(21,128,61,.07); }
.card18 tbody.gap td{ height:14px; border:0; padding:0; }
.sc{ display:inline-grid; place-items:center; width:30px; height:30px; font-weight:700; }
.sc.e{ border-radius:50%; background:var(--green-deep); color:#fff; box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--green-deep); }
.sc.b{ border-radius:50%; background:var(--signal); color:var(--night); }
.sc.o1{ border-radius:6px; background:#f3e3bd; color:#6e470b; }
.sc.o2{ border-radius:6px; background:#f7cdc4; color:#9b2c1c; }
.pp{ display:inline-grid; place-items:center; min-width:26px; height:24px; padding:0 4px; border-radius:7px; font-size:13px; font-weight:800; }
.pp.p0{ background:#f7cdc4; color:#9b2c1c; } .pp.p1{ background:#f3e3bd; color:#6e470b; } .pp.p2{ background:var(--paper-2); color:var(--ink-2); }
.pp.p3{ background:#bbf7d0; color:#14532d; } .pp.p4{ background:var(--green-deep); color:#fff; }
.sc-sum{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.sc-sum li{ display:flex; align-items:center; gap:8px; padding:7px 12px 7px 7px; border-radius:12px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-l); font-size:14px; font-weight:600; color:var(--ink-2); }
.sc-sum li b{ display:grid; place-items:center; min-width:28px; height:26px; border-radius:8px; font-weight:800; }
.seg{ margin-top:16px; }
.seg .lbl{ display:block; font-size:11px; color:var(--ink-3); margin-bottom:8px; }
.seg-row{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; border-radius:14px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-l); }
.seg-row button{ border:0; background:none; height:40px; border-radius:10px; font-weight:700; font-size:14.5px; color:var(--ink-3); transition:background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.seg-row button:hover{ color:var(--ink); }
.seg-row button[aria-pressed="true"]{ background:var(--card); color:var(--green-deep); box-shadow:0 1px 2px rgba(7,22,14,.08), 0 4px 12px -4px rgba(7,22,14,.2), inset 0 0 0 1.5px var(--green); }

.rings{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.ring{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.ring-dial{ position:relative; width:128px; height:128px; }
.ring-dial svg{ width:128px; height:128px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:10; }
.ring .tr{ stroke:var(--paper-2); }
.ring .vl{ stroke:var(--green); stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1600ms var(--ease) 300ms; }
.t-stats.in .ring .vl{ stroke-dashoffset:calc(1 - var(--v)); }
.ring-dial .lab{ position:absolute; inset:0; display:grid; place-content:center; }
.ring-dial .lab b{ font-size:34px; line-height:1; }
.ring-dial .lab small{ font-size:13px; font-weight:600; color:var(--ink-3); }
.ring .lbl{ font-size:11.5px; color:var(--ink); }
.ring p{ font-size:13.5px; line-height:1.4; color:var(--ink-3); margin-top:-6px; }

/* 03 Mates live board */
.mates{ overflow:hidden; }
.mates .contours{ background:rgba(246,239,228,.045); transform:scaleX(-1); }
.mates-grid{ position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.ticks{ margin-top:32px; display:grid; gap:14px; }
.ticks li{ display:flex; gap:14px; align-items:flex-start; color:var(--chalk-2); }
.ticks li b{ color:var(--chalk); font-weight:700; }
.ticks svg{ flex:none; width:24px; height:24px; margin-top:1px; }
.mates-vis{ position:relative; min-height:680px; }
.mates-photo{ position:absolute; left:0; top:0; width:58%; aspect-ratio:4 / 5; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-2); }
.mates-photo img{ width:100%; height:100%; object-fit:cover; }
.board{ position:absolute; right:0; bottom:0; width:min(580px, 88%); background:rgba(16,40,26,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:var(--r-lg); box-shadow:var(--shadow-2), inset 0 0 0 1px var(--line-d); padding:20px 20px 12px; }
.board-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.board-head h3{ font-weight:700; font-size:22px; letter-spacing:-.03em; line-height:1.1; }
.board-head small{ display:block; margin-top:6px; color:var(--chalk-3); font-size:11px; }
.live-tag{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; background:rgba(224,83,63,.16); color:#ff8a78; font-size:11px; }
.live-tag svg{ width:14px; height:12px; }
.live-tag.final{ background:rgba(242,193,78,.16); color:var(--gold); }
.board-cols, .board li{ display:grid; grid-template-columns:30px 34px 36px minmax(0, 1fr) 50px 54px; gap:10px; align-items:center; }
.board-cols{ margin-top:16px; padding:0 8px 8px; border-bottom:1px solid var(--line-d); color:var(--chalk-3); font-size:10.5px; }
.board-cols span:nth-child(n+5){ text-align:right; }
.board ol{ position:relative; }
.board li{ padding:9px 8px; border-bottom:1px solid var(--line-d); border-radius:12px; transition:background-color 600ms var(--ease); will-change:transform; }
.board li:last-child{ border-bottom:0; }
.board li.me{ background:rgba(34,197,94,.08); box-shadow:inset 0 0 0 1px rgba(34,197,94,.28); }
.board li.bump{ background:rgba(34,197,94,.22); }
.board li.win{ background:rgba(242,193,78,.16); box-shadow:inset 0 0 0 1px rgba(242,193,78,.45); }
.av{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--h, var(--green)); }
.m-pos{ font-weight:800; font-size:18px; text-align:center; font-variant-numeric:lining-nums; letter-spacing:-.03em; }
.m-mv{ font-weight:800; font-size:12px; display:flex; align-items:center; gap:2px; }
.m-mv.up{ color:var(--signal-hi); }
.m-mv.dn{ color:#ff8a78; }
.m-mv.eq{ color:var(--chalk-3); }
.m-mv svg{ width:9px; height:9px; }
.m-name{ font-weight:700; font-size:15px; line-height:1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-name small{ display:block; font-weight:500; font-size:12px; color:var(--chalk-3); margin-top:2px; }
.m-thru{ text-align:right; font-weight:600; font-size:15px; color:var(--chalk-2); font-variant-numeric:tabular-nums; }
.m-pts{ text-align:right; font-weight:800; font-size:24px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.m-pts.pop{ animation:ptpop 700ms var(--ease); }
@keyframes ptpop{ 0%{ color:var(--signal-hi); transform:scale(1.2); } 100%{ color:inherit; transform:none; } }
.board-foot{ display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 8px 4px; color:var(--chalk-2); font-size:14px; }
.board-foot svg{ width:22px; height:22px; flex:none; }

/* 04 Courses */
.courses-grid{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.bignum{ font-size:clamp(120px, 15vw, 210px); line-height:.82; color:var(--green-deep); margin-top:16px; letter-spacing:-.06em; }
.courses h2.h{ font-size:clamp(34px, 3.8vw, 52px); }
.find{ margin-top:34px; max-width:520px; }
.find label{ display:block; font-weight:700; font-size:15px; margin-bottom:10px; }
.field{ position:relative; }
.field svg{ position:absolute; left:18px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
.field input{ width:100%; height:60px; padding:0 18px 0 50px; border-radius:16px; border:0; background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line-l), var(--shadow-1); font-size:17px; outline:none; transition:box-shadow 180ms var(--ease); }
.field input::placeholder{ color:#7c8b80; }
.field input:focus{ box-shadow:inset 0 0 0 2px var(--green), 0 0 0 5px rgba(21,128,61,.14); }
.results{ margin-top:10px; background:var(--card); border-radius:16px; box-shadow:var(--shadow-1); overflow:hidden; }
.results:empty{ display:none; }
.results button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:13px 18px; border:0; background:transparent; border-top:1px solid var(--line-l); }
.results li:first-child button{ border-top:0; }
.results button:hover, .results button:focus-visible, .results button.act{ background:rgba(21,128,61,.07); outline:none; }
.results .nm mark{ background:none; color:var(--green-deep); font-weight:800; }
.results .ct{ flex:none; display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:11.5px; }
.results .open{ color:var(--green-deep); }
.results .none{ padding:16px 18px; font-size:15px; color:var(--ink-2); }
.results .none a{ color:var(--green-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.status{ margin-top:12px; font-size:13.5px; color:var(--ink-3); min-height:1.4em; }
.nations{ display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:10px 34px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line-l); }
.nations b{ display:block; font-size:30px; line-height:.95; }
.nations span{ font-size:11px; color:var(--ink-3); }
.map{ position:relative; justify-self:center; width:100%; max-width:420px; }
.map-box{ position:relative; width:100%; aspect-ratio:6133 / 11000; max-height:760px; }
.map canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.map-cap{ margin-top:14px; color:var(--ink-3); text-align:center; font-size:11.5px; }
.map-key{ display:flex; justify-content:center; gap:18px; margin-top:8px; font-size:12.5px; color:var(--ink-3); }
.map-key i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.mpin{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; opacity:0; transition:opacity 200ms var(--ease); }
.mpin.show{ opacity:1; }
.mpin i{ position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:var(--flag); box-shadow:0 0 0 3px var(--card), 0 4px 12px rgba(0,0,0,.3); }
.mpin span{ position:absolute; left:14px; top:-17px; white-space:nowrap; padding:7px 11px; border-radius:10px; background:var(--night); color:var(--chalk); font-size:13px; font-weight:600; box-shadow:var(--shadow-1); }
.mpin span small{ color:var(--signal-hi); font-weight:700; margin-left:6px; }
.mpin.flip span{ left:auto; right:14px; }
.mpin.hov i{ background:var(--green-deep); }

dialog.cc{ width:min(760px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:28px; background:var(--card); color:var(--ink); box-shadow:0 40px 120px -20px rgba(0,0,0,.6); overflow:auto; }
dialog.cc::backdrop{ background:rgba(7,22,14,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
dialog.cc[open]{ animation:ccin 420ms var(--ease); }
@keyframes ccin{ from{ opacity:0; transform:translateY(24px) scale(.98); } to{ opacity:1; transform:none; } }
.cc-top{ position:relative; overflow:hidden; background:var(--pine); color:var(--chalk); padding:28px 28px 24px; isolation:isolate; }
.cc-top .contours{ background:rgba(246,239,228,.06); z-index:-1; }
.cc-top .lbl{ color:var(--bronze); }
.cc-top h3{ font-weight:700; font-size:clamp(30px, 4.4vw, 44px); line-height:1.02; letter-spacing:-.04em; margin-top:10px; padding-right:48px; }
.cc-top p{ color:var(--chalk-2); margin-top:8px; font-size:15px; }
.cc-x{ position:absolute; right:18px; top:18px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(246,239,228,.1); color:var(--chalk); display:grid; place-items:center; }
.cc-x:hover{ background:rgba(246,239,228,.2); }
.cc-x svg{ width:18px; height:18px; }
.cc-stats{ display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:18px; }
.cc-stats div b{ display:block; font-size:32px; line-height:.95; }
.cc-stats div span{ font-size:10.5px; color:var(--chalk-3); }
.cc-body{ padding:24px 28px 28px; display:grid; gap:22px; }
.cc-card{ overflow-x:auto; }
.cc-card table{ width:100%; min-width:560px; border-collapse:collapse; text-align:center; font-variant-numeric:tabular-nums; }
.cc-card th, .cc-card td{ padding:7px 2px; font-size:14px; border-bottom:1px solid var(--line-l); }
.cc-card thead th{ background:var(--pine); color:var(--chalk); font-weight:700; font-size:12px; letter-spacing:.04em; }
.cc-card thead th:first-child{ border-radius:10px 0 0 10px; }
.cc-card thead th:last-child{ border-radius:0 10px 10px 0; }
.cc-card th[scope="row"]{ text-align:left; padding-left:6px; font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.cc-card tr.par td{ font-weight:700; }
.cc-card td.t{ font-weight:800; }
.cc-card .half + .half{ margin-top:14px; }
.cc-route{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; align-items:center; }
.cc-route svg{ width:100%; height:auto; border-radius:18px; background:#1d3a14; }
.cc-note{ font-size:14px; color:var(--ink-3); }
.cc-note b{ color:var(--ink); }
.cc-cta{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line-l); }
.cc-cta p{ font-weight:700; }
.cc-cta .badges img{ height:46px; }
.cc-none{ padding:18px; border-radius:16px; background:var(--paper); color:var(--ink-2); font-size:15px; }

/* Close: split card, photo at native resolution */
.close{ padding:clamp(56px, 7vw, 110px) 0; background:var(--paper); }
.close-card{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--night); color:var(--chalk); display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); align-items:stretch; isolation:isolate; box-shadow:var(--shadow-2); }
.close-card .contours{ background:rgba(246,239,228,.05); z-index:-1; }
.close-copy{ padding:clamp(40px, 6vw, 88px); display:flex; flex-direction:column; justify-content:center; }
.close h2.h{ font-size:clamp(44px, 5.2vw, 88px); line-height:1; max-width:12ch; }
.close .lede{ max-width:40ch; }
.close .badges{ margin-top:32px; }
.qr-row{ display:flex; align-items:center; gap:24px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line-d); }
.qr-row img{ width:clamp(170px, 14vw, 230px); height:auto; aspect-ratio:1; padding:14px; background:var(--card); border-radius:20px; flex:none; box-shadow:0 20px 40px -16px rgba(0,0,0,.6); }
.qr-row p{ font-size:clamp(16px, 1.25vw, 20px); line-height:1.5; color:var(--chalk-2); max-width:22ch; }
.qr-row p b{ font-size:1.15em; margin-bottom:4px; }
.qr-row p b{ display:block; color:var(--chalk); }
.soc{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:15px; font-weight:500; color:var(--chalk-2); }
.soc:hover{ color:var(--chalk); }
.close-photo{ position:relative; aspect-ratio:3 / 4; }
.close-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; }

/* Download dock: follows you down the page once the hero has gone */
.dock{
  position:fixed; z-index:60; left:50%; bottom:20px; transform:translate(-50%, 160%); transition:transform 500ms var(--ease);
  display:flex; align-items:center; gap:14px; padding:10px 10px 10px 12px; border-radius:20px;
  background:rgba(7,22,14,.92); -webkit-backdrop-filter:saturate(140%) blur(16px); backdrop-filter:saturate(140%) blur(16px);
  color:var(--chalk); box-shadow:0 20px 60px -12px rgba(0,0,0,.55), inset 0 0 0 1px var(--line-d);
}
.dock.show{ transform:translate(-50%, 0); }
.dock > img{ width:40px; height:40px; border-radius:10px; }
.dock p{ font-size:14px; line-height:1.25; margin-right:6px; }
.dock p b{ display:block; font-size:15.5px; letter-spacing:-.02em; }
.dock p span{ color:var(--chalk-3); }
.dock .badges{ gap:8px; }
.dock .badges img{ height:42px; }
.d-btn{ display:none; }
.d-x{ width:34px; height:34px; border-radius:50%; border:0; background:rgba(246,239,228,.08); color:var(--chalk-2); display:grid; place-items:center; }
.d-x:hover{ background:rgba(246,239,228,.16); color:var(--chalk); }
.d-x svg{ width:14px; height:14px; }

/* Footer */
.foot{ position:relative; overflow:hidden; background:var(--night); color:var(--chalk-2); padding:80px 0 36px; }
.foot .contours{ background:rgba(246,239,228,.035); }
.foot-grid{ position:relative; display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:40px; }
.foot .brand{ color:var(--chalk); }
.foot-tag{ margin-top:14px; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--chalk); }
.foot h4{ margin:0 0 14px; color:var(--bronze); }
.foot li + li{ margin-top:10px; }
.foot a:hover{ color:var(--chalk); }
.foot-bot{ position:relative; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:64px; padding-top:24px; border-top:1px solid var(--line-d); font-size:14px; color:var(--chalk-3); }

/* Responsive */
@media (max-width:1100px){
  .nav-links{ display:none; }
  .bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .t-hcp, .t-card, .t-stats{ grid-column:span 2; }
  .t-same, .t-fmt{ grid-column:span 1; }
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; gap:0; }
  .hero-copy{ padding:44px 0 32px; }
  .stage{ height:clamp(520px, 110vw, 640px); max-width:560px; width:100%; margin:0 auto; }
  .courses-grid, .founder-grid, .mates-grid{ grid-template-columns:1fr; }
  .scene{ height:340vh; }
  .scene-pin{ padding-top:64px; align-items:flex-start; }
  .scene-grid{ grid-template-columns:1fr; gap:12px; padding-top:16px; }
  .scene-copy .lede, .scene-copy .try, .scene-phone figcaption{ display:none; }
  .scene-copy h2.h{ font-size:clamp(30px, 8vw, 46px); margin-top:8px; }
  .ssteps{ margin-top:14px; }
  .sstep{ grid-template-columns:40px 1fr; gap:12px; }
  .sstep .ico{ width:40px; height:40px; }
  .sstep h3{ font-size:20px; }
  .sstep p{ font-size:15px; margin-top:4px; }
  .sprog{ margin-top:14px; }
  .shot{ width:min(320px, 72vw, calc((100svh - 400px) * .534)); }
  .founder-photo{ max-width:520px; }
  .mates-vis{ min-height:0; display:flex; flex-direction:column; }
  .mates-photo{ position:relative; width:100%; aspect-ratio:4 / 3; }
  .mates-photo img{ object-position:50% 30%; }
  .board{ position:relative; width:auto; margin:-90px 12px 0; }
  .map{ max-width:360px; }
  .close-card{ grid-template-columns:1fr; }
  .close-photo{ aspect-ratio:4 / 5; order:-1; }
  .t-stats{ grid-template-columns:1fr; }
  .t-hcp{ grid-template-columns:1fr; padding:28px 28px 0; }
  .hcp-phone{ justify-self:center; width:min(250px, 70%); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid > div:first-child{ grid-column:span 2; }
  .cc-route{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .nav-soc{ display:none; }
  .nav-in{ height:64px; }
  .hero{ padding-top:64px; }
  .brand{ font-size:21px; }
  .brand img{ width:30px; height:30px; }
  .btn{ padding:10px 16px; font-size:14px; }
  .badges img{ height:46px; }
  .proof{ gap:14px 26px; }
  .proof b{ font-size:32px; }
  .hero-grid{ padding:20px var(--gut) 40px; }
  .stage{ height:560px; }
  .ph-front{ width:60%; left:0; }
  .ph-back{ width:52%; right:-2%; }
  .bub{ padding:10px 12px; border-radius:15px; }
  .b-mate{ left:auto; right:0; top:2%; padding:8px 14px 8px 8px; }
  .b-mate p{ font-size:13px; }
  .av{ width:30px; height:30px; font-size:11px; }
  .b-hcp{ display:none; }
  .b-gps{ width:136px; right:2%; bottom:4%; }
  .b-gps .yd b{ font-size:34px; }
  .hl i{ font-size:12px; padding:5px 8px; }
  .dock{ left:12px; right:12px; bottom:12px; transform:translateY(160%); justify-content:space-between; }
  .dock.show{ transform:none; }
  .dock .badges{ display:none; }
  .dock p span{ display:none; }
  .d-btn{ display:inline-flex; }
  .bento{ grid-template-columns:1fr; gap:14px; margin-top:44px; }
  .t-hcp, .t-same, .t-card, .t-stats, .t-fmt{ grid-column:span 1; }
  .t-hcp{ min-height:0; }
  .tile{ padding:22px; }
  .t-same{ padding-bottom:0; } .same-photo{ margin:20px -22px 0; min-height:260px; }
  .card18{ min-width:0; }
  .sc-head{ grid-template-columns:auto 1fr; padding:18px; }
  .sc-head > img{ width:40px; height:40px; }
  .card18 tr.yds{ display:none; }
  .card18 th, .card18 td{ padding:4px 0; font-size:12.5px; }
  .card18 th[scope="row"]{ padding-left:4px; font-size:8.5px; letter-spacing:.02em; }
  .card18 thead th{ font-size:11px; padding:7px 0; }
  .card18 tr.si td{ font-size:10.5px; }
  .card18 sup{ font-size:8px; }
  .sc-head .card-total{ grid-column:1 / -1; text-align:left; }
  .card-body{ padding:14px 12px 18px; }
  .pp{ min-width:20px; height:20px; font-size:11.5px; }
  .try .badges img{ height:54px; }
  .card18 th, .card18 td{ padding:5px 0; font-size:13px; }
  .card18 th[scope="row"]{ font-size:9.5px; letter-spacing:.04em; }
  .sc{ width:23px; height:23px; font-size:12.5px; }
  .card-total b{ font-size:46px; }
  .rings{ gap:8px; }
  .ring-dial, .ring-dial svg{ width:96px; height:96px; }
  .ring-dial .lab b{ font-size:26px; }
  .ring p{ display:none; }
  .board{ margin:-60px 0 0; padding:16px 10px 8px; }
  .board-cols, .board li{ grid-template-columns:26px 28px 30px minmax(0, 1fr) 36px 44px; gap:7px; }
  .av{ width:30px; height:30px; font-size:11px; }
  .m-pts{ font-size:22px; }
  .nations{ grid-template-columns:repeat(2, auto); }
  .qr-row{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px 20px; }
  .cc-top{ padding:22px 20px 20px; }
  .cc-body{ padding:20px; }
}
@media (min-width:1900px){
  :root{ --wrap:1640px; }
  body{ font-size:19px; }
  .lbl{ font-size:14px; }
  .nav-in{ height:84px; }
  .brand{ font-size:26px; } .brand img{ width:40px; height:40px; }
  .nav-links a, .nav-soc{ font-size:17px; } .btn{ font-size:17px; padding:13px 24px; }
  .hero{ padding-top:84px; }
  .hero h1{ font-size:clamp(56px, 6.4vw, 176px); }
  h2.h{ font-size:clamp(40px, 4.6vw, 112px); }
  .lede{ font-size:clamp(18px, 1.15vw, 27px); }
  .badges img{ height:60px; }
  .proof b{ font-size:54px; }
  .stage{ height:clamp(600px, 44vw, 1080px); }
  .bub{ transform-origin:center; zoom:1.3; }
  .scene-pin{ padding-top:84px; }
  .shot{ width:min(620px, 100%, calc((100svh - 240px) * .534)); }
  .sstep{ grid-template-columns:72px 1fr; } .sstep .ico{ width:72px; height:72px; }
  .sstep h3{ font-size:44px; } .sstep p{ font-size:22px; }
  .hl i{ font-size:16px; }
  .tile{ padding:36px; } .tile h3{ font-size:32px; } .tile .sub{ font-size:18px; }
  .t-same{ padding-bottom:0; } .same-photo{ margin:28px -36px 0; }
  .t-same h3{ font-size:56px; }
  .card18 th, .card18 td{ font-size:16px; } .sc{ width:30px; height:30px; }
  .card-total b{ font-size:72px; } .hcp-num b{ font-size:120px; }
  .seg-row button{ height:48px; font-size:16px; }
  .ring-dial, .ring-dial svg{ width:156px; height:156px; } .ring-dial .lab b{ font-size:40px; }
  .board{ width:min(700px, 90%); padding:26px 26px 14px; } .board-head h3{ font-size:28px; }
  .board-cols, .board li{ grid-template-columns:36px 40px 44px minmax(0, 1fr) 60px 64px; }
  .m-name{ font-size:18px; } .m-pts{ font-size:30px; } .av{ width:40px; height:40px; font-size:14px; }
  .mates-vis{ min-height:820px; }
  .bignum{ font-size:clamp(120px, 13vw, 280px); }
  .field input{ height:70px; font-size:19px; }
  .map{ max-width:520px; }
  .qr-row img{ width:250px; }
  .dock{ zoom:1.2; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
}

/* ======================================================================
   Inner pages: shared components for societies, pricing, about, courses.
   ====================================================================== */
.nav-links a[aria-current="page"]{ color:var(--chalk); background:rgba(246,239,228,.1); }

/* Page hero: shorter than the homepage, same ground */
.phero{ position:relative; overflow:hidden; background:var(--night); color:var(--chalk); padding:calc(72px + clamp(56px, 8vw, 110px)) 0 clamp(64px, 8vw, 110px); isolation:isolate; }
.phero .contours{ background:rgba(246,239,228,.06); z-index:-1; }
.phero-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.phero h1{ font-size:clamp(46px, 5.6vw, 96px); line-height:1; margin-top:18px; }
.phero h1 .g{ color:var(--signal); }
.phero .lede{ max-width:44ch; }
.phero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px; }
.phero-note{ margin-top:18px; font-size:15px; color:var(--chalk-3); }
.phero-note b{ color:var(--chalk); font-weight:700; }
.btn-lg{ min-height:56px; padding:16px 26px; font-size:17px; border-radius:14px; }
.btn-ghost{ background:rgba(246,239,228,.08); color:var(--chalk); box-shadow:inset 0 0 0 1px var(--line-d); }
.btn-ghost:hover{ background:rgba(246,239,228,.14); }
.btn-green{ background:var(--green); color:#fff; }
.btn-green:hover{ background:var(--green-deep); }
.btn-line{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-l); }
.btn-line:hover{ box-shadow:inset 0 0 0 1.5px var(--green); color:var(--green-deep); }

/* Stat row */
.kpis{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.kpis > div{ padding-top:18px; border-top:1px solid var(--line-l); }
.on-dark .kpis > div{ border-color:var(--line-d); }
.kpis b{ display:block; font-size:clamp(34px, 3.4vw, 54px); line-height:1; }
.kpis span{ display:block; margin-top:8px; font-size:15px; color:var(--ink-3); }
.on-dark .kpis span{ color:var(--chalk-3); }

/* Section heads and splits */
.shead{ max-width:780px; }
.shead.center{ margin:0 auto; text-align:center; }
.shead.center .lede{ margin-left:auto; margin-right:auto; }
.split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.split.flip > :first-child{ order:2; }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin-top:56px; }
.cards.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cards.four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.card{ position:relative; border-radius:var(--r-lg); padding:28px; background:var(--card); box-shadow:var(--shadow-1); }
.on-dark .card{ background:var(--pine); box-shadow:inset 0 0 0 1px var(--line-d); }
.card .ico{ width:52px; height:52px; margin-bottom:18px; }
.card h3{ font-size:clamp(20px, 1.6vw, 25px); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
.card p{ margin-top:10px; color:var(--ink-3); font-size:16.5px; }
.on-dark .card p{ color:var(--chalk-2); }
.card .tag{ display:inline-block; margin-bottom:14px; padding:5px 10px; border-radius:8px; background:rgba(21,128,61,.1); color:var(--green-deep); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.on-dark .card .tag{ background:rgba(34,197,94,.14); color:var(--signal-hi); }

/* Tabs (keyboard accessible, see ui.js) */
.tabs{ margin-top:48px; }
.tablist{ display:flex; flex-wrap:wrap; gap:8px; padding:6px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line-l); width:max-content; max-width:100%; }
.on-dark .tablist{ background:var(--pine); box-shadow:inset 0 0 0 1px var(--line-d); }
.tablist button{ border:0; background:none; padding:12px 18px; border-radius:11px; font-weight:700; font-size:15.5px; color:var(--ink-3); transition:background-color 180ms var(--ease), color 180ms var(--ease); }
.on-dark .tablist button{ color:var(--chalk-3); }
.tablist button:hover{ color:var(--ink); }
.on-dark .tablist button:hover{ color:var(--chalk); }
.tablist button[aria-selected="true"]{ background:var(--green); color:#fff; }
.tabpanel{ margin-top:24px; }
.tabpanel[hidden]{ display:none; }
.tabpanel.in{ animation:rise 600ms var(--ease) both; }

/* Pricing */
.price{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--night); color:var(--chalk); box-shadow:var(--shadow-2); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); isolation:isolate; }
.price .contours{ background:rgba(246,239,228,.05); z-index:-1; }
.price-main{ padding:clamp(32px, 4vw, 56px); }
.price-main .lbl{ color:var(--bronze); }
.price-amt{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:14px; }
.price-amt b{ font-size:clamp(72px, 8vw, 120px); line-height:.85; letter-spacing:-.05em; }
.price-amt span{ font-size:18px; color:var(--chalk-2); padding-bottom:10px; }
.price-yr{ display:flex; align-items:baseline; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-d); }
.price-yr b{ font-size:40px; letter-spacing:-.04em; }
.price-yr span{ color:var(--chalk-2); }
.price-terms{ margin-top:22px; display:grid; gap:10px; }
.price-terms div{ display:flex; justify-content:space-between; gap:16px; padding:12px 14px; border-radius:12px; background:rgba(246,239,228,.06); box-shadow:inset 0 0 0 1px var(--line-d); font-size:15.5px; }
.price-terms b{ font-weight:800; }
.price-side{ padding:clamp(32px, 4vw, 56px); background:rgba(246,239,228,.035); border-left:1px solid var(--line-d); }
.price-side h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.checks{ margin-top:16px; display:grid; gap:12px; }
.checks li{ display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-size:16px; color:var(--chalk-2); }
.checks li b{ color:var(--chalk); font-weight:700; }
.checks svg{ width:24px; height:24px; }
.on-light .checks li{ color:var(--ink-2); }
.on-light .checks li b{ color:var(--ink); }
.price .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* Timeline */
.timeline{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:56px; counter-reset:t; }
.tl{ position:relative; padding:26px 24px; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-1); }
.tl::before{ counter-increment:t; content:counter(t); display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--green); color:#fff; font-weight:800; font-size:18px; margin-bottom:16px; }
.tl h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.tl .when{ display:block; margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-deep); }
.tl p{ margin-top:10px; font-size:15.5px; color:var(--ink-3); }

/* FAQ */
.faq{ margin-top:48px; display:grid; gap:12px; max-width:900px; }
.faq details{ border-radius:18px; background:var(--card); box-shadow:var(--shadow-1); }
.on-dark .faq details{ background:var(--pine); box-shadow:inset 0 0 0 1px var(--line-d); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 24px; font-weight:700; font-size:clamp(17px, 1.3vw, 20px); letter-spacing:-.015em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:none; width:14px; height:14px; border-right:2.5px solid var(--green); border-bottom:2.5px solid var(--green); transform:rotate(45deg) translate(-3px, -3px); transition:transform 300ms var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg) translate(-3px, -3px); }
.faq .a{ padding:0 24px 22px; color:var(--ink-2); font-size:16.5px; max-width:72ch; }
.on-dark .faq .a{ color:var(--chalk-2); }
.faq .a p + p{ margin-top:10px; }

/* Quote */
.quote{ position:relative; padding:clamp(28px, 4vw, 48px); border-radius:var(--r-xl); background:var(--card); box-shadow:var(--shadow-1); }
.quote blockquote{ margin:0; font-size:clamp(22px, 2.2vw, 34px); line-height:1.25; font-weight:600; letter-spacing:-.03em; }
.quote blockquote::before{ content:"\201C"; display:block; font-size:72px; line-height:.6; color:var(--green); margin-bottom:10px; }
.quote figcaption{ margin-top:18px; color:var(--ink-3); font-size:15px; }

/* Enquiry form */
.enquire{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.form{ padding:clamp(24px, 3vw, 40px); border-radius:var(--r-xl); background:var(--card); box-shadow:var(--shadow-2); color:var(--ink); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form label{ display:block; margin:16px 0 8px; font-weight:700; font-size:14.5px; }
.form label .opt{ font-weight:500; color:var(--ink-3); }
.form input, .form select, .form textarea{ width:100%; padding:14px 16px; border-radius:12px; border:0; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line-l); font-size:16.5px; color:var(--ink); outline:none; transition:box-shadow 180ms var(--ease); }
.form textarea{ resize:vertical; min-height:110px; }
.form input:focus, .form select:focus, .form textarea:focus{ box-shadow:inset 0 0 0 2px var(--green), 0 0 0 5px rgba(21,128,61,.14); }
.form .btn{ width:100%; margin-top:22px; }
.form-note{ margin-top:14px; font-size:14px; color:var(--ink-3); text-align:center; }
.form-note a{ color:var(--green-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.form-err{ margin-top:12px; color:#b63a28; font-weight:600; font-size:14.5px; }
.form-done{ text-align:center; padding:24px 8px; }
.form-done h3{ font-size:30px; font-weight:700; letter-spacing:-.03em; }
.form-done p{ margin-top:10px; color:var(--ink-2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Long-form text */
.prose{ max-width:72ch; font-size:18px; color:var(--ink-2); }
.prose h2{ font-size:clamp(28px, 2.6vw, 38px); font-weight:700; letter-spacing:-.035em; line-height:1.1; color:var(--ink); margin:48px 0 14px; }
.prose h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:32px 0 10px; }
.prose p + p, .prose ul, .prose ol{ margin-top:14px; }
.prose ul, .prose ol{ padding-left:22px; list-style:disc; }
.prose li + li{ margin-top:6px; }
.prose a{ color:var(--green-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); }

/* Closing band used at the foot of inner pages */
.band-cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--night); color:var(--chalk); padding:clamp(40px, 6vw, 88px); display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:40px; align-items:center; isolation:isolate; box-shadow:var(--shadow-2); }
.band-cta .contours{ background:rgba(246,239,228,.05); z-index:-1; }
.band-cta h2.h{ font-size:clamp(38px, 4.4vw, 68px); margin-top:0; }
.band-cta .cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

@media (max-width:1100px){
  .cards, .cards.four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .timeline{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:960px){
  .phero-grid, .split, .enquire, .price, .band-cta{ grid-template-columns:1fr; }
  .split.flip > :first-child{ order:0; }
  .price-side{ border-left:0; border-top:1px solid var(--line-d); }
  .band-cta .cta-row{ justify-content:flex-start; }
}
@media (max-width:640px){
  .phero{ padding-top:calc(64px + 44px); }
  .cards, .cards.two, .cards.four, .timeline{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .tablist{ width:100%; }
  .tablist button{ flex:1 1 auto; padding:10px 12px; font-size:14.5px; }
}
@media (min-width:1900px){
  .phero h1{ font-size:clamp(46px, 5.2vw, 132px); }
  .card{ padding:36px; } .card p{ font-size:18.5px; }
  .faq{ max-width:1100px; }
}
.chips-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips-row button{ border:0; padding:10px 14px; border-radius:12px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line-l), var(--shadow-1); font-weight:600; font-size:15px; color:var(--ink-2); transition:color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.chips-row button:hover{ color:var(--green-deep); box-shadow:inset 0 0 0 1.5px var(--green), var(--shadow-1); transform:translateY(-1px); }
.on-dark .card .ico{ background:var(--chalk); border-radius:14px; padding:7px; }
.get-qr{ display:flex; align-items:center; gap:22px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line-d); }
.get-qr img{ width:170px; height:170px; padding:14px; background:var(--card); border-radius:20px; flex:none; box-shadow:0 20px 40px -16px rgba(0,0,0,.6); }
.get-qr p{ font-size:17px; line-height:1.5; color:var(--chalk-2); max-width:24ch; }
.get-qr p b{ display:block; color:var(--chalk); font-size:19px; margin-bottom:4px; }
.get-phones{ position:relative; height:clamp(520px, 44vw, 780px); }
.get-phones .ph{ position:absolute; top:50%; }
.get-phones .ph img{ width:100%; height:auto; filter:drop-shadow(0 40px 60px rgba(0,0,0,.4)); }
.get-phones .p1{ z-index:2; width:52%; left:6%; transform:translateY(-50%); }
.get-phones .p2{ z-index:1; width:46%; right:0; transform:translateY(-44%) rotate(6deg); }
@media (max-width:960px){ .get-phones{ height:560px; max-width:520px; margin:0 auto; width:100%; } }
@media (max-width:640px){ .get-qr{ display:none; } .get-phones{ height:480px; } }
.legal-hero{ padding-bottom:clamp(40px, 5vw, 64px); }
.legal-hero h1{ font-size:clamp(40px, 4.6vw, 72px); }
.prose.legal .legal-intro{ font-size:20px; color:var(--ink); }
.prose.legal .legal-footnote{ margin-top:32px; font-size:15px; color:var(--ink-3); }
.prose.legal table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:15.5px; }
.prose.legal th, .prose.legal td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line-l); }
.prose.legal th{ background:var(--paper-2); color:var(--ink); }
.prose.legal .legal-docs{ list-style:none; padding:0; display:grid; gap:12px; }
.prose.legal .legal-docs li{ padding:18px 20px; border-radius:16px; background:var(--card); box-shadow:var(--shadow-1); }
.prose.legal .legal-docs a{ text-decoration:none; }
.prose.legal .legal-docs .doc-title{ display:block; font-size:19px; font-weight:700; color:var(--ink); }

/* Menu button and panel (the tabs, on screens too narrow for them) */
.menu-btn{ display:none; width:44px; height:44px; border:0; border-radius:12px; background:rgba(246,239,228,.08); color:var(--chalk); place-items:center; }
.menu-btn svg{ width:22px; height:22px; }
.menu-btn .x{ display:none; }
.menu-open .menu-btn .bars{ display:none; }
.menu-open .menu-btn .x{ display:block; }
.menu{ position:fixed; z-index:49; left:12px; right:12px; top:76px; padding:10px; border-radius:20px; background:rgba(16,40,26,.98); box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 0 0 1px var(--line-d); display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 220ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms; }
.menu-open .menu{ opacity:1; visibility:visible; transform:none; transition:opacity 220ms var(--ease), transform 280ms var(--ease); }
.menu a{ padding:14px 16px; border-radius:12px; color:var(--chalk); font-size:18px; font-weight:600; letter-spacing:-.01em; }
.menu a:hover, .menu a[aria-current="page"]{ background:rgba(246,239,228,.08); }
.menu .btn{ margin-top:8px; justify-content:center; }
@media (max-width:1100px){ .menu-btn{ display:grid; } .nav-cta{ gap:10px; } }
@media (max-width:640px){ .menu{ top:68px; } }

/* Society sub-nav: sticks under the main bar */
.subnav{ position:sticky; top:72px; z-index:45; margin-top:72px; background:rgba(16,40,26,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line-d); }
.subnav-in{ display:flex; gap:4px; align-items:center; overflow-x:auto; scrollbar-width:none; height:54px; }
.subnav-in::-webkit-scrollbar{ display:none; }
.subnav a{ flex:none; padding:8px 14px; border-radius:999px; color:var(--chalk-2); font-size:15px; font-weight:600; white-space:nowrap; transition:color 160ms var(--ease), background-color 160ms var(--ease); }
.subnav a:hover{ color:var(--chalk); background:rgba(246,239,228,.08); }
.subnav a[aria-current="page"]{ color:var(--night); background:var(--signal); }
.subnav a.enq{ margin-left:auto; color:var(--signal-hi); }
.subnav + .phero{ padding-top:clamp(44px, 5vw, 76px); }
@media (max-width:640px){ .subnav{ top:64px; margin-top:64px; } .subnav + .phero{ padding-top:44px; } }
@media (min-width:1900px){ .subnav{ top:84px; margin-top:84px; } }

/* Society pages */
.screen{ border-radius:18px; overflow:hidden; box-shadow:0 2px 6px rgba(7,22,14,.12), 0 40px 90px -30px rgba(7,22,14,.55); background:#f4efe6; }
.screen img{ width:100%; height:auto; }
.screen-cap{ margin-top:14px; font-size:14px; color:var(--ink-3); }
.on-dark .screen-cap{ color:var(--chalk-3); }
.phero .screen{ transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin:left center; }
.eg{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:52px; }
.eg article{ padding:24px; border-radius:22px; background:var(--card); box-shadow:var(--shadow-1); }
.eg h3{ font-size:19px; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.eg p{ margin-top:10px; font-size:15.5px; color:var(--ink-3); }
.eg .ico{ width:44px; height:44px; margin-bottom:14px; }
.said{ display:grid; gap:14px; }
.said p{ padding:20px 22px; border-radius:18px; background:var(--card); box-shadow:var(--shadow-1); font-size:18px; line-height:1.5; color:var(--ink); }
.said p span{ display:block; margin-top:8px; font-size:14px; color:var(--ink-3); }
/* Penalty switch: one table, two rules */
.pswitch{ margin-top:48px; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(28px, 4vw, 64px); align-items:start; }
.ptable{ border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-2); padding:10px; }
.ptable .head, .ptable li{ display:grid; grid-template-columns:44px minmax(0, 1fr) 72px 70px 74px; gap:10px; align-items:center; padding:10px 14px; }
.ptable .head{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line-l); }
.ptable .head span:nth-child(n+3), .ptable li span:nth-child(n+3){ text-align:right; }
.ptable ol{ position:relative; }
.ptable li{ border-radius:12px; transition:background-color 500ms var(--ease); font-variant-numeric:tabular-nums; }
.ptable li + li{ border-top:1px solid var(--line-l); }
.ptable li.hot{ background:rgba(34,197,94,.12); }
.ptable .pos{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--pine); color:var(--chalk); font-weight:800; font-size:14px; }
.ptable .nm{ font-weight:700; }
.ptable .pen{ color:#b63a28; font-weight:700; }
.ptable .mv{ font-weight:800; font-size:13px; }
.ptable .mv.up{ color:var(--green); } .ptable .mv.dn{ color:#b63a28; } .ptable .mv.eq{ color:var(--ink-3); }
.ptable .tot{ font-weight:800; font-size:17px; }
.pnote{ margin-top:12px; font-size:13.5px; color:var(--ink-3); }
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
.fit > div{ padding:28px; border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-1); }
.fit h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.fit .no{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-l); }
.fit ul{ margin-top:14px; display:grid; gap:10px; }
.fit li{ display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:16.5px; color:var(--ink-2); }
.fit li::before{ content:""; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.fit .no li::before{ background:#e7ddd0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%239b2c1c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.soc2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }
.soc2 article{ padding:30px; border-radius:var(--r-lg); background:var(--pine); color:var(--chalk); box-shadow:inset 0 0 0 1px var(--line-d); }
.soc2 h3{ font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.soc2 dl{ margin:18px 0 0; display:grid; gap:14px; }
.soc2 dt{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); }
.soc2 dd{ margin:4px 0 0; color:var(--chalk-2); font-size:16px; }
.soc2 a{ display:inline-block; margin-top:20px; color:var(--signal-hi); font-weight:700; }
@media (max-width:1100px){ .eg{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:960px){ .pswitch, .fit, .soc2{ grid-template-columns:1fr; } .phero .screen{ transform:none; } }
@media (max-width:640px){ .eg{ grid-template-columns:1fr; } .ptable .head, .ptable li{ grid-template-columns:34px minmax(0, 1fr) 56px 54px; gap:6px; padding:9px 8px; } .ptable .c-home{ display:none; } }
/* Dark panels that sit inside light sections keep light text */
.on-light .price .checks li, .on-light .band-cta .lede{ color:var(--chalk-2); }
.on-light .price .checks li b{ color:var(--chalk); }
.on-light .band-cta h2.h em{ color:var(--signal); }
.fit li > span a{ color:var(--green-deep); font-weight:700; }
@media (max-width:960px){ .phero-grid, .split, .enquire, .price, .band-cta{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:640px){
  .band-cta{ padding:32px 22px; }
  .band-cta .cta-row .btn, .price .cta-row .btn{ width:100%; justify-content:center; text-align:center; white-space:normal; }
}

/* Anchor jumps land below the fixed bar, and below the sub-nav on society pages */
html{ scroll-padding-top:88px; }
html:has(.subnav){ scroll-padding-top:142px; }
@media (max-width:640px){ html{ scroll-padding-top:80px; } html:has(.subnav){ scroll-padding-top:132px; } }
@media (min-width:1900px){ html{ scroll-padding-top:100px; } html:has(.subnav){ scroll-padding-top:154px; } }
/* Land on the heading, not on the section's top padding */
.sec[id]{ scroll-margin-top:calc(28px - clamp(88px, 11vw, 144px)); }
/* FAQ: answers slide open (ui.js animates the height), the open one is outlined */
.faq .a{ overflow:hidden; }
.faq details{ transition:box-shadow 260ms var(--ease), background-color 260ms var(--ease); }
.faq details[open]{ box-shadow:inset 0 0 0 1.5px rgba(21,128,61,.45), var(--shadow-1); }
.on-dark .faq details[open]{ box-shadow:inset 0 0 0 1.5px rgba(34,197,94,.45); }
.faq summary{ transition:color 200ms var(--ease); }
.faq summary:hover{ color:var(--green-deep); }
.on-dark .faq summary:hover{ color:var(--signal-hi); }
/* FAQ sections: heading and a photo stay put while the questions scroll */
.faq-aside{ position:sticky; top:170px; align-self:start; }
.faq-photo{ margin:34px 0 0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:4/5; max-height:min(540px, calc(100vh - 400px)); min-height:300px; width:100%; }
.faq-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; display:block; }
@media (max-width:960px){ .faq-aside{ position:static; } .faq-photo{ aspect-ratio:16/10; max-height:none; min-height:0; } }

/* Homepage hero: a deck of three real screens. Tap one (or a label) to bring it forward */
.stage-wrap{ position:relative; }
.stage .ph{ --k:1; position:absolute; top:50%; left:23%; width:54%; margin:0; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; z-index:1;
  transform:translate3d(var(--sx, 0%), calc(-50% + var(--sy, 0%)), 0) scale(var(--ss, 1)) rotate(var(--sr, 0deg));
  transition:transform 850ms cubic-bezier(.2,.8,.2,1), filter 600ms var(--ease); }
.stage .ph[data-slot="front"]{ z-index:3; cursor:default; }
.stage .ph[data-slot="right"]{ --sx:50%; --sy:3%; --ss:.8; --sr:8deg; --k:-.6; filter:brightness(.74) saturate(.9); }
.stage .ph[data-slot="left"]{ --sx:-50%; --sy:3%; --ss:.8; --sr:-8deg; --k:-.6; filter:brightness(.74) saturate(.9); }
@media (hover:hover){
  .stage .ph[data-slot="right"]:hover{ --sx:44%; --sr:6deg; filter:brightness(.95); }
  .stage .ph[data-slot="left"]:hover{ --sx:-44%; --sr:-6deg; filter:brightness(.95); }
}
.stage .ph:focus-visible{ outline:none; }
.stage .ph:focus-visible .ph-in{ outline:3px solid var(--signal); outline-offset:8px; border-radius:44px; }
.ph-in{ display:block; transform:translate3d(calc(var(--px, 0px) * var(--k)), calc(var(--py, 0px) * var(--k)), 0); }
.stage .ph img{ display:block; opacity:0; animation:rise 1100ms var(--ease) forwards; animation-delay:var(--in, 200ms); }
.stage .ph[data-screen="hole"] img{ --in:420ms; }
.stage .ph[data-screen="hcp"] img{ --in:560ms; }
.stage .bub{ z-index:4; transition:scale 450ms cubic-bezier(.2,.8,.2,1), box-shadow 450ms var(--ease); }
.stage .bub.hot{ scale:1.07; box-shadow:0 0 0 3px rgba(34,197,94,.85), var(--shadow-2); }
.deck-nav{ position:relative; z-index:5; display:flex; justify-content:center; gap:4px; margin:4px auto 0; padding:5px; width:max-content; max-width:100%; border-radius:14px; background:rgba(246,239,228,.06); box-shadow:inset 0 0 0 1px var(--line-d); opacity:0; animation:rise 900ms var(--ease) 900ms forwards; }
.deck-nav button{ border:0; background:none; color:var(--chalk-3); font-weight:700; font-size:14.5px; padding:10px 16px; min-height:44px; border-radius:10px; transition:background-color 220ms var(--ease), color 220ms var(--ease); }
.deck-nav button:hover{ color:var(--chalk); }
.deck-nav button[aria-pressed="true"]{ background:var(--signal); color:var(--night); }
.hero .hero-free{ font-size:clamp(15px, 1.2vw, 19px); letter-spacing:.09em; color:var(--chalk-2); }
.hero .hero-free b{ color:var(--signal); font-weight:800; }
@media (max-width:960px){
  .stage-wrap{ max-width:560px; width:100%; margin:0 auto; }
}
@media (max-width:640px){
  .stage .ph{ width:58%; left:21%; }
  .stage .ph[data-slot="right"]{ --sx:48%; }
  .stage .ph[data-slot="left"]{ --sx:-48%; }
  .deck-nav button{ font-size:14px; padding:10px 12px; }
}
@media (prefers-reduced-motion: reduce){ .stage .ph{ transition:none; } }
/* Touch screens: small text links get a finger-sized hit area without moving anything */
.nav .brand{ min-height:44px; }
@media (pointer:coarse){
  main a[href]:not([class]), .map-cap a, .more-link a, .cost-links a, .band-mail a, .fit-link, .golf-more, .who-links a, .phero-note a, .screen-cap a, .soc2 a{ padding-block:12px; margin-block:-12px; }
  .foot ul a{ display:inline-block; padding-block:8px; margin-block:-8px; }
  .map-cap a{ padding-block:15px; margin-block:-15px; }
}
/* Very narrow phones (iPhone SE 1st gen, small Androids): keep the logo clear of the button */
@media (max-width:360px){
  .nav .brand{ font-size:17px; gap:8px; }
  .nav .brand img{ width:28px; height:28px; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn{ padding:9px 12px; font-size:13.5px; min-height:40px; }
  .menu-btn{ width:40px; height:40px; }
}
/* Phones held sideways: hero goes side by side and fits the short screen */
@media (orientation:landscape) and (max-height:520px){
  .hero-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, .9fr); min-height:calc(100svh - 64px); gap:20px; padding-top:12px; padding-bottom:16px; }
  .hero-copy{ padding:6px 0; }
  .hero h1{ font-size:clamp(34px, 5.6vw, 52px); }
  .hero .lede{ font-size:15.5px; margin-top:12px; }
  .hero .badges{ margin-top:18px; }
  .proof{ display:none; }
  .stage-wrap{ max-width:none; }
  .stage{ height:calc(100svh - 150px); min-height:230px; max-width:none; }
  .stage .bub{ display:none; }
  .deck-nav button{ min-height:40px; padding:7px 11px; font-size:13px; }
  .scene-pin .shot, .scene-pin .scene-shot{ max-height:calc(100svh - 90px); }
  .stage{ height:calc(100svh - 172px); }
  .dock{ padding:8px 10px; gap:10px; bottom:10px; }
  .dock .badges, .dock p span{ display:none; }
  .d-btn{ display:inline-flex; }
}
/* Hero deck, second pass: bigger phones, and the screens come alive as they arrive */
.stage{ height:clamp(660px, 53vw, 940px); }
.stage .ph{ width:62%; left:19%; }
.stage .ph[data-slot="right"]{ --sx:44%; --ss:.78; }
.stage .ph[data-slot="left"]{ --sx:-44%; --ss:.78; }
@media (hover:hover){
  .stage .ph[data-slot="right"]:hover{ --sx:39%; }
  .stage .ph[data-slot="left"]:hover{ --sx:-39%; }
}
.ph-in{ position:relative; container-type:inline-size; }
.ph-yds{ position:absolute; left:74.04%; top:18.55%; transform:translateX(-50%); font-family:'Fraunces', Georgia, serif; font-weight:400; font-optical-sizing:auto; font-size:8.9cqw; line-height:1; letter-spacing:-.01em; color:#fffff7; font-variant-numeric:lining-nums proportional-nums; pointer-events:none; }
.ph-wipe{ position:absolute; left:17.59%; top:31.23%; width:64.82%; height:19.88%; background:#fdfbf7; transform-origin:right center; transform:scaleX(0); pointer-events:none; }
@media (max-width:960px){ .stage{ height:clamp(560px, 118vw, 700px); } }
@media (max-width:640px){
  .stage{ height:clamp(520px, 150vw, 640px); }
  .stage .ph{ width:66%; left:17%; }
  .stage .ph[data-slot="right"]{ --sx:42%; }
  .stage .ph[data-slot="left"]{ --sx:-42%; }
}
@media (orientation:landscape) and (max-height:520px){ .stage{ height:calc(100svh - 172px); } .stage .ph{ width:50%; left:25%; } }
/* Hero deck: centre the phones without a half-pixel translate so the front screen renders pin sharp */
.stage .ph{ top:0; bottom:0; margin:auto 0; height:fit-content; will-change:auto;
  transform:translate3d(var(--sx, 0%), var(--sy, 0%), 0) scale(var(--ss, 1)) rotate(var(--sr, 0deg)); }
.stage .ph img{ image-rendering:auto; }

/* Homepage fix pass */
/* Hero deck: the screen switcher sits over the foot of the stage, so it is above the fold on a laptop */
@media (min-width:961px) and (min-height:521px){
  .stage{ --sh:clamp(560px, min(53vw, calc(100vh - 124px)), 940px); height:var(--sh); }
  .stage .ph{ left:0; right:0; bottom:60px; margin:auto; width:min(62%, calc((var(--sh) - 64px) * .534)); }
  .deck-nav{ position:absolute; left:0; right:0; bottom:0; margin:0 auto; background:rgba(7,22,14,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
  .stage .b-gps{ bottom:13%; }
}
/* Hero bubble: a new personal best */
.b-pb{ align-items:center; padding:12px 18px 12px 12px; }
.b-pb .av{ width:40px; height:40px; }
.b-pb .av svg{ width:20px; height:20px; }
.b-pb p .lbl{ display:block; }
.b-pb p b{ display:block; font-size:30px; line-height:1; margin-top:4px; }
.b-pb p small{ margin-top:3px; }
.b-hcp .delta{ color:var(--green-deep); }
@media (max-width:640px){
  .b-pb{ padding:9px 14px 9px 9px; }
  .b-pb .av{ width:32px; height:32px; }
  .b-pb .av svg{ width:16px; height:16px; }
  .b-pb p b{ font-size:22px; margin-top:2px; }
  .b-pb p small{ font-size:11.5px; }
}
/* Your game: four formats in a two by two, and no hole in the grid on narrower screens */
.seg-row.seg-4{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; }
.t-fmt .seg:first-of-type{ margin-top:22px; }
@media (max-width:1100px){ .bento{ grid-auto-flow:row dense; } }
/* Mates: the board is labelled as example data */
.board-note{ margin-top:10px; font-size:12.5px; color:var(--chalk-3); text-align:right; }
.ticks a{ color:var(--chalk); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:961px){
  .board{ bottom:30px; }
  .board-note{ position:absolute; right:4px; bottom:0; margin:0; }
}
@media (max-width:960px){ .board-note{ padding-right:12px; } }
/* Courses: map credit */
.map-credit{ margin-top:8px; text-align:center; font-size:11px; color:var(--ink-3); }
.map-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* Homepage fix pass: the proof strip stays on one line */
.hero .proof{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:14px clamp(22px, 3vw, 44px); max-width:none; }
@media (max-width:640px){ .hero .proof{ gap:12px 20px; } .hero .proof b{ font-size:28px; } .hero .proof span{ font-size:11px; letter-spacing:.08em; } }
/* Homepage fix pass: your form, beside the card */
.t-card{ grid-row:span 2; }
.t-form{ grid-column:span 2; }
.t-form h3{ margin-top:10px; }
.t-form .lbl{ color:var(--bronze-deep); }
@media (max-width:1100px){ .t-card{ grid-row:auto; } .t-form{ grid-column:span 2; } }
@media (max-width:640px){ .t-form{ grid-column:span 1; } }
/* Homepage fix pass: "2,900+" is a character longer than the old figure, so it scales down on narrow phones */
@media (max-width:640px){ .courses .bignum{ font-size:min(120px, 28vw); } }
/* Audit fixes: the small label above dark page heroes needs real contrast; trademark line in the footer */
.phero .eyebrow, .nf .eyebrow{ color:var(--bronze); }
.foot-tm{ margin-top:14px; font-size:12px; line-height:1.5; color:var(--chalk-3); max-width:90ch; }

/* Phone pass (30 Sep, from Greg on an iPhone) */
/* Big tiles slid 44px while already on screen, which read as the page jumping. On phones: a short fade, started before the tile arrives */
@media (max-width:760px){
  .reveal{ transform:none; transition:opacity 450ms var(--ease); transition-delay:0ms; }
}
/* Download bar clears the rounded screen corner and the home indicator */
@media (max-width:640px){ .dock{ bottom:calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media (orientation:landscape) and (max-height:520px){ .dock{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)); } }
/* Last five rounds: a tidy list on phones */
@media (max-width:640px){
  .recent{ display:grid; grid-template-columns:1fr; gap:6px; }
  .recent li{ flex-direction:row-reverse; justify-content:space-between; padding:8px 8px 8px 14px; font-size:15px; }
}
/* Mates: the whole swing on phones, the board below it rather than over it */
@media (max-width:960px){
  .mates-photo{ aspect-ratio:4 / 5; }
  .mates-photo img{ object-position:50% 50%; }
  .board{ margin:16px 0 0; }
}
/* Map: the course label wraps and stays inside the map on phones */
@media (max-width:640px){
  .mpin span{ white-space:normal; width:max-content; max-width:min(240px, 64vw); line-height:1.3; }
  .mpin span small{ display:block; margin-left:0; margin-top:2px; }
}
/* Scorecard pop-up: all nine holes fit on a phone */
.cc-card .l-sm{ display:none; }
@media (max-width:520px){
  .cc-card table{ min-width:0; }
  .cc-card th, .cc-card td{ padding:7px 1px; font-size:12.5px; }
  .cc-card thead th{ font-size:11px; letter-spacing:0; }
  .cc-card th[scope="row"]{ padding-left:4px; font-size:10.5px; letter-spacing:.03em; }
  .cc-card .l-lg{ display:none; }
  .cc-card .l-sm{ display:inline; }
}

/* Chrome on iPhone resizes the page whenever its toolbar hides or shows (every change of scroll
   direction), so anything sized from the viewport height jumped. Those heights now use --vh: the
   viewport height locked at load by the homepage script (it only changes when the width does).
   Without the script --vh is 1vh, as before. */
:root{ --vh:1vh; }
@media (min-width:961px){ .hero-grid{ min-height:max(700px, calc(var(--vh) * 100 - 72px)); } }
.scene{ height:calc(var(--vh) * 380); }
.scene-pin{ height:calc(var(--vh) * 100); }
.shot{ width:min(460px, 100%, calc((var(--vh) * 100 - 210px) * .534)); }
@media (max-width:960px){
  .scene{ height:calc(var(--vh) * 340); }
  .shot{ width:min(320px, 72vw, calc((var(--vh) * 100 - 400px) * .534)); }
}
@media (min-width:1900px){ .shot{ width:min(620px, 100%, calc((var(--vh) * 100 - 240px) * .534)); } }
@media (min-width:961px) and (min-height:521px){ .stage{ --sh:clamp(560px, min(53vw, calc(var(--vh) * 100 - 124px)), 940px); } }
@media (orientation:landscape) and (max-height:520px){
  .hero-grid{ min-height:calc(var(--vh) * 100 - 64px); }
  .stage{ height:calc(var(--vh) * 100 - 172px); }
  .scene-pin .shot, .scene-pin .scene-shot{ max-height:calc(var(--vh) * 100 - 90px); }
}