/* Layout concept: a calm lane. Content runs in one measured column like a pool lane,
   with the logo's crossing wave lines as the only ornament and a numbered route
   (real sequence) as the one structural device. */
:root{
  --tsa:#345564;          /* sampled from supplied logo file */
  --tsa-deep:#24404c;
  --ink:#1c2f37;
  --muted:#52666e;
  --paper:#f3f6f5;        /* pale, slightly water-tinted ground */
  --surface:#ffffff;
  --mist:#e2ebea;
  --aqua:#86bfc0;         /* pool-tile accent, used for lines and markers */
  --sand:#b98a52;         /* towel/wood warmth, used only for small highlights */
  --line:rgba(52,85,100,.18);
  --btn:#345564; --btn-fg:#ffffff; --btn-hover:#24404c;
  --hero-ph:#345564;
  --review:#8a5a14; --review-bg:#fff3dc;
  --display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label:"Montserrat", "Figtree", system-ui, sans-serif;
  --gutter:clamp(16px, 4vw, 40px);
  --wrap:1180px;
  --radius:6px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --tsa:#9cc3cf; --tsa-deep:#c3dde4; --ink:#e6eef0; --muted:#a3b6bc; --paper:#0f1c22; --surface:#15262d;
  --mist:#1b313a; --aqua:#5fa4a6; --sand:#d6a96f; --line:rgba(160,200,210,.18);
  --btn:#c3dde4; --btn-fg:#10222a; --btn-hover:#e2eff2; --hero-ph:#24404c;
  --review:#ffd08a; --review-bg:#3a2a10; color-scheme:dark }}
:root[data-theme="dark"]{
  --tsa:#9cc3cf; --tsa-deep:#c3dde4; --ink:#e6eef0; --muted:#a3b6bc; --paper:#0f1c22; --surface:#15262d;
  --mist:#1b313a; --aqua:#5fa4a6; --sand:#d6a96f; --line:rgba(160,200,210,.18);
  --btn:#c3dde4; --btn-fg:#10222a; --btn-hover:#e2eff2; --hero-ph:#24404c;
  --review:#ffd08a; --review-bg:#3a2a10; color-scheme:dark }

/* language: hide the inactive language only (never set display) */
:root:not(.l-nl) [data-l="nl"], :root.l-nl [data-l="en"]{display:none !important}
/* logo per theme */
.logo-d{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-l{display:none} :root:not([data-theme="light"]) .logo-d{display:inline} }
:root[data-theme="dark"] .logo-l{display:none} :root[data-theme="dark"] .logo-d{display:inline}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{background:var(--paper); color:var(--ink); font:400 1.0625rem/1.6 var(--body); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--sand); outline-offset:3px; border-radius:3px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; letter-spacing:-.01em; text-wrap:balance; margin:0}
h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height:1.08}
h3{font-size:clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height:1.15}
h4{font-family:var(--label); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--tsa)}
p{margin:0}
.eyebrow{font-family:var(--label); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tsa)}
.lede{font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem); color:var(--muted); max-width:58ch}
.measure{max-width:62ch}
.stack{display:flex; flex-direction:column; gap:1rem}
section{padding-block:clamp(64px, 9vw, 120px)}
.sec-head{display:grid; gap:1rem; margin-bottom:clamp(32px, 5vw, 56px); max-width:760px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:48px; padding:.75rem 1.4rem;
  border-radius:999px; font:600 1rem/1.2 var(--body); text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:background .2s, color .2s, border-color .2s}
.btn-primary{background:var(--btn); color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--tsa)}
.btn .price{font-weight:500; opacity:.85; padding-left:.6em; border-left:1px solid currentColor}
.textlink{color:var(--tsa); font-weight:600; text-underline-offset:3px}

/* prototype bar */
.proto{background:var(--ink); color:var(--paper); font-size:.85rem}
.proto .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:center; justify-content:space-between; padding-block:.55rem}
.proto label{display:inline-flex; gap:.5rem; align-items:center; cursor:pointer}
.proto input{accent-color:var(--sand)}

/* header */
.site-head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:1.25rem; min-height:72px}
.brand img{height:46px; width:auto}
.nav{display:flex; gap:1.4rem; margin-left:auto; font-size:.95rem}
.nav a{text-decoration:none; color:var(--muted); padding-block:.4rem}
.nav a:hover{color:var(--ink)}
.head-actions{display:flex; align-items:center; gap:.75rem}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px}
.lang button{font:700 .72rem/1 var(--label); letter-spacing:.1em; border:0; background:transparent; color:var(--muted); padding:.5rem .65rem; border-radius:999px; cursor:pointer; min-width:40px; min-height:32px}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site-head .btn{min-height:42px; padding:.55rem 1.1rem; font-size:.95rem}
@media (max-width: 1020px){ .nav{display:none} .head-actions{margin-left:auto} }
@media (max-width: 520px){ .site-head .btn-primary{display:none} .brand img{height:40px} }

/* hero */
.hero{padding-block:clamp(32px, 6vw, 72px) 0; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center}
.hero h1{font-size:clamp(2.6rem, 1.6rem + 4.4vw, 5.1rem); line-height:1; letter-spacing:-.025em; font-weight:350}
.hero h1 em{font-style:italic; color:var(--tsa); display:block; font-weight:300}
.hero-copy{display:grid; gap:1.5rem; min-width:0}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.facts{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.92rem; color:var(--muted)}
.facts li{display:flex; align-items:center; gap:.5rem}
.facts li::before{content:""; width:14px; height:2px; background:var(--aqua); border-radius:2px}
.hero-photo{aspect-ratio:4/5; max-width:100%; border-radius:200px 200px var(--radius) var(--radius)}
.hero-waves{display:block; width:100%; height:clamp(56px, 8vw, 110px); margin-top:clamp(16px, 3vw, 32px); position:relative; z-index:2; pointer-events:none}
.hero-waves path{fill:none; stroke:var(--tsa); stroke-width:2; vector-effect:non-scaling-stroke; opacity:.55}
@media (max-width: 860px){ .hero-grid{grid-template-columns:1fr} .hero-photo{aspect-ratio:5/4; border-radius:120px 120px var(--radius) var(--radius)} }

/* photos with designed fallback */
.ph{position:relative; margin:0; overflow:hidden; background:var(--hero-ph); border-radius:var(--radius)}
.ph img{width:100%; height:100%; object-fit:cover}
.ph::after{content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.6'%3E%3Cpath d='M0 40C90 10 170 10 250 55S370 95 400 80'/%3E%3Cpath d='M0 70C100 95 180 90 260 60S360 30 400 40'/%3E%3Cpath d='M0 95C110 110 200 80 280 75S370 85 400 95'/%3E%3C/g%3E%3C/svg%3E") center 70%/100% 45% no-repeat}
.ph.off img{visibility:hidden}
.ph.off::after{opacity:1}
.ph .ph-note{display:none; position:absolute; left:12px; bottom:12px; right:12px; color:#fff; font:600 .72rem/1.35 var(--label); letter-spacing:.06em; text-transform:uppercase; opacity:.85}
.ph.off .ph-note{display:block}

/* goal chooser + journeys */
.goals{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem}
.goal{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:.6rem; padding:clamp(20px, 3vw, 32px); border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); transition:border-color .2s, transform .2s}
.goal:hover{border-color:var(--tsa)}
.goal:focus-visible{outline:2px solid var(--sand); outline-offset:3px}
.goal[aria-selected="true"]{border-color:var(--tsa); box-shadow:inset 0 -4px 0 var(--tsa)}
.goal .g-k{font:700 .72rem/1 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.goal .g-t{font:400 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.15 var(--display); color:var(--ink)}
.goal .g-d{color:var(--muted); font-size:.98rem}
.goal .g-go{font-weight:600; color:var(--tsa); font-size:.92rem}
.goal[aria-selected="true"] .g-go{visibility:hidden}
.goal-other{margin-top:1.25rem; color:var(--muted); font-size:.98rem; max-width:70ch}
@media (max-width: 700px){ .goals{grid-template-columns:1fr} }

.journey{margin-top:clamp(32px, 5vw, 56px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px, 5vw, 64px)}
.journey .ph{aspect-ratio:4/5; max-width:100%; align-self:start; position:sticky; top:110px}
.j-body{display:grid; gap:1.75rem; min-width:0}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.ticks li{position:relative; padding-left:1.75rem}
.ticks li::before{content:""; position:absolute; left:0; top:.72em; width:12px; height:2px; background:var(--tsa)}
@media (max-width: 860px){ .journey{grid-template-columns:1fr} .journey .ph{position:relative; top:auto; aspect-ratio:16/10} }

/* route lane: a real sequence */
.route{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:step}
.route li{counter-increment:step; display:grid; grid-template-columns:44px 1fr; gap:.25rem 1rem; padding-bottom:1.1rem; position:relative}
.route li::before{content:counter(step); grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--tsa); display:grid; place-items:center; font:700 .8rem/1 var(--label); color:var(--tsa); background:var(--paper); position:relative; z-index:1}
.route li::after{content:""; position:absolute; left:16.5px; top:34px; bottom:0; width:1.5px; background:repeating-linear-gradient(var(--aqua) 0 6px, transparent 6px 11px)}
.route li:last-child::after{display:none}
.route li:last-child::before{background:var(--tsa); color:var(--paper)}
.route b{font-weight:600}
.route .lvl{font:700 .68rem/1 var(--label); letter-spacing:.1em; color:var(--muted); margin-left:.5rem; padding:.2rem .4rem; border:1px solid var(--line); border-radius:3px; vertical-align:2px}
.route span.d{color:var(--muted); font-size:.96rem}
.note{font-size:.9rem; color:var(--muted)}
.plan{background:var(--mist); border-radius:var(--radius); padding:1.25rem 1.4rem; display:grid; gap:.4rem}
.plan strong{font-family:var(--display); font-weight:500; font-size:1.2rem}

.quote{margin:0; display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:start}
.quote .avatar{width:56px; height:56px; border-radius:50%; aspect-ratio:1; max-width:100%}
.quote blockquote{margin:0; font:italic 400 1.2rem/1.4 var(--display)}
.quote figcaption{grid-column:2; font-size:.9rem; color:var(--muted)}

/* first visit */
.visit{background:var(--surface); border-block:1px solid var(--line)}
.visit-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.video{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:var(--radius); overflow:hidden; background:var(--hero-ph)}
.video video{width:100%; height:100%; object-fit:cover; display:block; background:#0d1a20}
.video-meta{display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; margin-top:.75rem; font-size:.88rem; color:var(--muted)}
.qa{margin:0; display:grid; gap:0}
.qa > div{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding-block:1rem; border-top:1px solid var(--line)}
.qa > div:last-child{border-bottom:1px solid var(--line)}
.qa dt{font:700 .74rem/1.5 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--tsa); padding-top:.2rem}
.qa dd{margin:0; min-width:0}
@media (max-width: 860px){ .visit-grid{grid-template-columns:1fr} }
@media (max-width: 480px){ .qa > div{grid-template-columns:1fr; gap:.25rem} }

/* method */
.examples{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 3vw, 32px)}
.example{padding:clamp(22px, 3vw, 36px); border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); display:grid; gap:.85rem; align-content:start}
.example h3{font-style:italic}
.principles{margin-top:clamp(24px, 4vw, 40px); display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:start; max-width:820px}
.principles svg{width:84px; height:auto}
.principles svg path,.principles svg circle{fill:none; stroke:var(--tsa); stroke-width:2}
@media (max-width: 700px){ .examples{grid-template-columns:1fr} .principles{grid-template-columns:1fr} }

/* formats + prices */
.formats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 28px)}
.format{display:grid; grid-template-rows:auto 1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.format .ph{aspect-ratio:3/2; max-width:100%; border-radius:0}
.format-body{padding:1.4rem; display:grid; gap:.7rem; align-content:start}
.format .who{font:700 .72rem/1.3 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.format .suits{font-size:.97rem}
.format .from{margin-top:.4rem; font-family:var(--display); font-size:1.35rem}
.format .from small{font-family:var(--body); font-size:.85rem; color:var(--muted)}
@media (max-width: 900px){ .formats{grid-template-columns:1fr} .format{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:none} .format .ph{aspect-ratio:auto; height:100%} }
@media (max-width: 560px){ .format{grid-template-columns:1fr} .format .ph{aspect-ratio:16/9; height:auto} }

.avail{margin-top:1.25rem; padding:1rem 1.25rem; border-left:3px solid var(--aqua); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; max-width:820px}

.pricing{margin-top:clamp(48px, 6vw, 72px); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px, 5vw, 56px); align-items:start}
.seg{display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px; background:var(--surface)}
.seg button{border:0; background:transparent; color:var(--muted); font:600 .95rem/1 var(--body); padding:.7rem 1.1rem; border-radius:999px; cursor:pointer; min-height:42px}
.seg button[aria-pressed="true"]{background:var(--tsa); color:var(--paper)}
.table-scroll{overflow-x:auto; margin-top:1.25rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-variant-numeric:tabular-nums}
caption{text-align:left; padding:1rem 1.1rem .25rem; font-size:.88rem; color:var(--muted)}
th,td{text-align:left; padding:.8rem 1.1rem; border-bottom:1px solid var(--line)}
thead th{font:700 .7rem/1.3 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
tbody th{font-weight:600}
tbody tr.grp th, tbody tr.grp td{border-top:1.5px solid var(--line)}
td.num, th.num{text-align:right}
td.total{font-weight:700}
td .sub{display:block; font-size:.8rem; color:var(--muted); font-weight:400}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
.extra{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1rem; font-size:.95rem; color:var(--muted)}
.terms{margin:0; display:grid; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.5rem 1.25rem}
.terms > div{padding-block:.85rem; border-bottom:1px solid var(--line); display:grid; gap:.2rem}
.terms > div:last-child{border-bottom:0}
.terms dt{font-weight:600}
.terms dd{margin:0; color:var(--muted); font-size:.96rem}
.why{margin-top:1rem; font-size:.95rem; color:var(--muted)}
.practice{margin-top:1.25rem; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1.1rem 1.25rem; background:var(--mist); border-radius:var(--radius)}
.practice svg{width:36px; height:36px}
.practice svg path{fill:none; stroke:var(--tsa); stroke-width:1.8}
@media (max-width: 900px){ .pricing{grid-template-columns:1fr} }

/* locations */
.locs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 3vw, 32px)}
.loc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
.loc .ph{aspect-ratio:16/9; max-width:100%; border-radius:0}
.loc-body{padding:clamp(20px, 3vw, 32px); display:grid; gap:1.1rem; align-content:start}
.loc-body h3 small{display:block; font-family:var(--body); font-size:.95rem; color:var(--muted); margin-top:.3rem; letter-spacing:0}
.pool{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-block:1px solid var(--line)}
.pool div{padding:.8rem .2rem; display:grid; gap:.1rem}
.pool div + div{padding-left:1rem; border-left:1px solid var(--line)}
.pool b{font:400 1.45rem/1 var(--display); font-variant-numeric:tabular-nums}
.pool span{font:700 .66rem/1.3 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.loc dl{margin:0; display:grid; gap:.65rem}
.loc dl div{display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem}
.loc dt{font-weight:600; font-size:.93rem}
.loc dd{margin:0; color:var(--muted); font-size:.95rem; min-width:0}
.unwind{margin-top:clamp(32px, 5vw, 56px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:center}
.unwind .ph{aspect-ratio:3/2; max-width:100%}
@media (max-width: 860px){ .locs, .unwind{grid-template-columns:1fr} }
@media (max-width: 440px){ .loc dl div{grid-template-columns:1fr; gap:.1rem} .pool b{font-size:1.2rem} }

/* trust */
.trust-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px, 4vw, 56px)}
.coaches{margin-top:clamp(32px, 5vw, 48px); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem}
.slot{border:1.5px dashed var(--line); border-radius:var(--radius); padding:1.25rem; display:grid; gap:.6rem; align-content:start; color:var(--muted); font-size:.92rem; min-height:220px}
.slot .ring{width:64px; height:64px; border-radius:50%; border:1.5px dashed var(--tsa); opacity:.6}
.slot.founder{background:var(--surface); border-style:solid}
.slot.founder .play{width:64px; height:64px; border-radius:50%; background:var(--mist); display:grid; place-items:center}
.slot.founder .play svg{width:20px; fill:var(--tsa)}
.slot b{color:var(--ink); font-weight:600}
.stories{margin-top:clamp(40px, 6vw, 64px); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 3vw, 32px)}
.story{display:grid; gap:1rem; align-content:start; padding-top:1.25rem; border-top:1.5px solid var(--tsa)}
.story .tag{font:700 .7rem/1.3 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.story blockquote{margin:0; font:italic 400 1.22rem/1.4 var(--display)}
.story .who{display:flex; gap:.75rem; align-items:center; font-size:.92rem}
.story .who .avatar{width:44px; height:44px; border-radius:50%; aspect-ratio:1; max-width:100%; flex:none}
@media (max-width: 960px){ .coaches{grid-template-columns:repeat(2, minmax(0,1fr))} .stories{grid-template-columns:1fr} }
@media (max-width: 760px){ .trust-grid{grid-template-columns:1fr} }
@media (max-width: 420px){ .coaches{grid-template-columns:1fr} }

/* faq */
.faq{max-width:860px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative; font:400 1.25rem/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px; border-right:1.5px solid var(--tsa); border-bottom:1.5px solid var(--tsa); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details > div{padding:0 0 1.25rem; color:var(--muted); max-width:68ch}

/* closing */
.closing{background:var(--tsa-deep); color:var(--paper); text-align:left}
.closing .wrap{display:grid; gap:1.5rem; justify-items:start}
.closing h2{font-size:clamp(2.2rem, 1.5rem + 3vw, 3.8rem); color:inherit; font-weight:300}
.closing p{max-width:56ch; opacity:.85; font-size:1.1rem}
.closing .btn-primary{background:var(--paper); color:var(--ink)}
.closing .btn-primary:hover{background:var(--mist)}
.closing .btn-ghost{color:var(--paper); border-color:color-mix(in srgb, var(--paper) 40%, transparent)}
.closing-waves{width:100%; height:80px; display:block}
.closing-waves path{fill:none; stroke:var(--paper); stroke-width:1.6; opacity:.35; vector-effect:non-scaling-stroke}

/* footer */
.foot{padding-block:48px calc(48px + 64px); font-size:.93rem; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.2fr repeat(3, minmax(0,1fr)); gap:2rem}
.foot h4{margin-bottom:.75rem}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.foot a{text-decoration:none} .foot a:hover{text-decoration:underline}
.foot .brand img{height:56px}
.copy-num{display:inline-flex; align-items:center; gap:.5rem}
.copy-num button{font:600 .75rem/1 var(--body); border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:.35rem .6rem; cursor:pointer}
@media (max-width: 760px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 420px){ .foot-grid{grid-template-columns:1fr} }

/* sticky mobile CTA */
.mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:25; padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:none; gap:.6rem; transform:translateY(110%); transition:transform .25s}
.mobile-cta.show{transform:none}
.mobile-cta .btn{flex:1; min-height:46px; padding-inline:.8rem; font-size:.95rem}
@media (max-width: 760px){ .mobile-cta{display:flex} }

/* review notes */
.rv{display:none}
.review-on .rv{display:inline-flex; position:relative; vertical-align:2px; margin-left:.35rem; font:700 .62rem/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--review); background:var(--review-bg); border:1px solid color-mix(in srgb, var(--review) 45%, transparent); border-radius:3px; padding:.28rem .4rem; cursor:help; font-style:normal; white-space:nowrap}
.review-on .rv:hover::after, .review-on .rv:focus::after{content:attr(data-note); position:absolute; z-index:40; left:0; top:calc(100% + 6px); width:max-content; max-width:min(300px, 80vw); white-space:normal; text-transform:none; letter-spacing:0; font:500 .8rem/1.4 var(--body); color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:.6rem .7rem; border-radius:4px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.review-on .rv-block{display:block}
.rv-block{display:none; margin-top:.5rem; font-size:.82rem; color:var(--review); background:var(--review-bg); border-radius:4px; padding:.5rem .7rem}
.toast{position:fixed; right:16px; bottom:84px; z-index:60; max-width:min(360px, calc(100vw - 32px)); background:var(--ink); color:var(--paper); font:500 .8rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; padding:.6rem .8rem; border-radius:6px; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none}
.toast.show{opacity:.95; transform:none}

/* booking dialog (simulated) */
dialog{border:0; padding:0; border-radius:10px; width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); background:var(--surface); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(12,24,30,.55)}
.dlg{display:grid; gap:1.25rem; padding:clamp(20px, 4vw, 32px)}
.dlg-head{display:flex; justify-content:space-between; gap:1rem; align-items:start}
.dlg-close{border:0; background:transparent; color:var(--muted); font-size:1.6rem; line-height:1; cursor:pointer; width:40px; height:40px; border-radius:50%}
.dlg-close:hover{background:var(--mist)}
.sim{font:700 .66rem/1.3 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--review); background:var(--review-bg); padding:.35rem .5rem; border-radius:3px; justify-self:start}
.steps{font-size:.85rem; color:var(--muted)}
fieldset{border:0; margin:0; padding:0; display:grid; gap:.6rem}
legend{font:400 1.35rem/1.25 var(--display); margin-bottom:.6rem; padding:0}
.opt{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; align-items:start; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius); cursor:pointer}
.opt:has(input:checked){border-color:var(--tsa); background:var(--mist)}
.opt input{margin-top:.3rem; accent-color:var(--tsa); width:18px; height:18px}
.opt small{grid-column:2; color:var(--muted); font-size:.88rem}
.dlg-actions{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center}
.summary{background:var(--mist); border-radius:var(--radius); padding:1rem 1.1rem; display:grid; gap:.3rem}
.summary b{font-family:var(--display); font-weight:500; font-size:1.2rem}
.err{color:#b3261e; font-size:.9rem; min-height:1.2em}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .err{color:#ffb4ab} }
:root[data-theme="dark"] .err{color:#ffb4ab}
.help{font-size:.9rem; color:var(--muted)}

/* ===== v2 additions ===== */
.routes{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; margin-top:.25rem}
.routes-k{grid-column:1 / -1; font:700 .72rem/1 var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.route-link{display:grid; grid-template-columns:1fr auto; gap:.15rem .75rem; align-items:center; padding:.9rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .2s}
.route-link:hover{border-color:var(--tsa)}
.rl-t{font:500 1.08rem/1.25 var(--display)}
.rl-d{grid-column:1; font-size:.86rem; color:var(--muted)}
.rl-a{grid-column:2; grid-row:1 / span 2; color:var(--tsa); font-size:1.2rem}
@media (max-width: 520px){ .routes{grid-template-columns:1fr} }
.split2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem}
.mini{padding:1rem 1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:grid; gap:.4rem; align-content:start}
.mini p{font-size:.96rem; color:var(--muted)}
@media (max-width: 560px){ .split2{grid-template-columns:1fr} }
.ex-ph{aspect-ratio:16/9; max-width:100%; margin:-.25rem 0 .25rem}
.format .from{display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem}
.incl{font:700 .64rem/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--tsa); border:1px solid var(--line); border-radius:3px; padding:.3rem .4rem; margin-right:.3rem; align-self:center}
.included{margin-top:clamp(48px, 6vw, 72px); display:grid; gap:1.5rem}
.inc-head{display:grid; gap:.75rem; max-width:760px}
.inc-title{font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)}
.inc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 2vw, 24px)}
.inc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; display:grid; gap:.5rem; align-content:start}
.inc:nth-child(2){border-color:var(--tsa); box-shadow:inset 0 3px 0 var(--tsa)}
.inc-k{font:700 .68rem/1 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.inc-t{font:400 1.3rem/1.2 var(--display); text-transform:none; letter-spacing:0; color:var(--ink)}
.inc p{font-size:.97rem; color:var(--muted)}
.inc-note{padding:.9rem 1.1rem; border-left:3px solid var(--aqua); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; max-width:820px}
.inc-photos{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(12px, 2vw, 24px)}
.inc-photos .ph{aspect-ratio:16/9; max-width:100%}
.inc-photos .ph:last-child{aspect-ratio:auto}
@media (max-width: 860px){ .inc-grid{grid-template-columns:1fr} }
@media (max-width: 560px){ .inc-photos{grid-template-columns:1fr} .inc-photos .ph:last-child{aspect-ratio:16/9} }
.team-ph{aspect-ratio:21/9; max-width:100%; margin-bottom:clamp(28px, 4vw, 48px)}
@media (max-width: 700px){ .team-ph{aspect-ratio:4/3} }
.avatar.mono{display:grid; place-items:center; background:var(--mist); color:var(--tsa); font:700 .8rem/1 var(--label); letter-spacing:.06em}
.quote .avatar.mono{width:56px; height:56px}
.loc{grid-template-rows:auto}
/* freestyle page */
.fs-hero .hero-photo{border-radius:var(--radius) var(--radius) 200px var(--radius)}
.crumb{font-size:.9rem; color:var(--muted)} .crumb a{color:var(--tsa)}
.band{background:var(--surface); border-block:1px solid var(--line)}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 5vw, 64px); align-items:start}
@media (max-width: 860px){ .two-col{grid-template-columns:1fr} }
.paths{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 3vw, 32px)}
.path{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
.path .ph{aspect-ratio:16/10; max-width:100%; border-radius:0}
.path-body{padding:clamp(20px, 3vw, 32px); display:grid; gap:.9rem; align-content:start}
.path-body .who{font:700 .72rem/1.3 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
@media (max-width: 760px){ .paths{grid-template-columns:1fr} }
.deco{height:clamp(120px, 18vw, 220px); max-width:100%; border-radius:0}
.pricemini{margin:0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-variant-numeric:tabular-nums}
.pricemini div{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line)}
.pricemini div:last-child{border-bottom:0}
.pricemini dt{font-weight:600} .pricemini dd{margin:0; color:var(--muted); text-align:right}

/* ===== v3 additions ===== */
.pillars{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 28px); margin-top:clamp(28px, 4vw, 44px); padding-top:clamp(24px, 3vw, 32px); border-top:1px solid var(--line)}
.pillars > div{display:grid; gap:.5rem; align-content:start}
.pillars h3{font-size:1.25rem}
.pillars p{font-size:.96rem; color:var(--muted)}
@media (max-width: 960px){ .pillars{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 520px){ .pillars{grid-template-columns:1fr} }
.ph.cap figcaption{position:absolute; left:12px; bottom:10px; font:600 .72rem/1.3 var(--label); letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55)}
.loc .ph{aspect-ratio:16/9; max-width:100%; border-radius:0}
.loc{grid-template-rows:auto 1fr}
.ask-opts{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.ask-opt{display:grid; gap:.2rem; padding:1rem 1.1rem; border:1.5px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink)}
.ask-opt:hover{border-color:var(--tsa)}
.ask-t{font:400 1.25rem/1.2 var(--display)}
.ask-v{font-weight:600; font-size:.95rem; word-break:break-all}
.ask-d{font-size:.85rem; color:var(--muted)}
@media (max-width: 480px){ .ask-opts{grid-template-columns:1fr} }
.linkbtn{border:0; background:none; padding:0; font:inherit; color:var(--tsa); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fmt3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 24px)}
.fmt{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; display:grid; gap:.7rem; grid-template-rows:auto auto 1fr auto; align-content:start}
.fmt .who{font:700 .72rem/1.3 var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.fmt p{font-size:.97rem; color:var(--muted)}
.fmt .price-l{font-family:var(--display); font-size:1.35rem; color:var(--ink); padding-top:.8rem; border-top:1px solid var(--line)}
.fmt .price-l small{font-family:var(--body); font-size:.85rem; color:var(--muted)}
.status{justify-self:start; font:700 .64rem/1 var(--label); letter-spacing:.1em; text-transform:uppercase; padding:.35rem .5rem; border-radius:3px; background:var(--mist); color:var(--tsa)}
.fmt.planned{border-style:dashed}
.inc-strip{margin-top:clamp(16px, 2.5vw, 24px); display:grid; grid-template-columns:auto 1fr auto; gap:1rem 1.5rem; align-items:center; padding:1.1rem 1.4rem; background:var(--mist); border-radius:var(--radius)}
.inc-strip b{font-family:var(--display); font-weight:500; font-size:1.2rem}
@media (max-width: 900px){ .fmt3{grid-template-columns:1fr} .inc-strip{grid-template-columns:1fr} }
.wk{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 2vw, 20px)}
.wk > div{border-top:2px solid var(--tsa); padding-top:1rem; display:grid; gap:.4rem; align-content:start}
.wk h3{font-size:1.25rem} .wk p{font-size:.96rem; color:var(--muted)}
@media (max-width: 760px){ .wk{grid-template-columns:1fr} }
.price-l .linkbtn{font:600 .95rem/1.2 var(--body); margin-left:.4rem}
@media (max-width: 700px){ #workouts .ph{aspect-ratio:4/3 !important} }

/* ===== v4 additions ===== */
.menu-btn{display:none; font:700 .74rem/1 var(--label); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:.7rem .95rem; cursor:pointer; min-height:40px}
.nav a[aria-current="page"]{color:var(--ink); font-weight:600}
@media (max-width: 1020px){
  .menu-btn{display:inline-flex}
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem var(--gutter) 1rem; box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .nav.open a{padding:.85rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink)}
  .site-head .wrap{position:relative}
}
.prog{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.prog li{padding:.5rem .8rem; border:1.5px solid var(--line); border-radius:999px; font-size:.92rem; font-weight:600; background:var(--surface); position:relative}
.prog li + li::before{content:""; position:absolute; left:-.55rem; top:50%; width:.5rem; height:1.5px; background:var(--aqua)}
.prog li.mile{border-color:var(--tsa); color:var(--tsa)}
/* flexible progression (freestyle page) */
.flow{display:grid; gap:0; margin:0; padding:0; list-style:none}
.flow > li{display:grid; grid-template-columns:2.2rem 1fr; gap:.15rem 1rem; position:relative; padding-bottom:1.15rem}
.flow > li::before{content:""; grid-row:1 / span 3; width:14px; height:14px; margin:.35rem auto 0; border-radius:50%; border:2px solid var(--tsa); background:var(--paper); position:relative; z-index:1}
.flow > li.mile::before{background:var(--tsa)}
.flow > li::after{content:""; position:absolute; left:calc(1.1rem - .75px); top:1.3rem; bottom:0; width:1.5px; background:repeating-linear-gradient(var(--aqua) 0 6px, transparent 6px 11px)}
.flow > li:last-child::after{display:none}
.flow b{font-weight:600}
.flow .d{color:var(--muted); font-size:.96rem}
.entry{justify-self:start; font:700 .64rem/1.2 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--tsa); background:var(--mist); border-radius:3px; padding:.3rem .45rem; margin-top:.25rem}
/* status chips */
.chip{display:inline-flex; align-items:center; gap:.4rem; font:700 .64rem/1 var(--label); letter-spacing:.1em; text-transform:uppercase; padding:.4rem .55rem; border-radius:999px; white-space:nowrap}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.on{color:#1f6b4f; background:#e1f1ea}
.chip.plan{color:var(--tsa); background:var(--mist)}
.chip.off{color:var(--muted); background:transparent; border:1px solid var(--line)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip.on{color:#8fdcb9; background:#16352a} }
:root[data-theme="dark"] .chip.on{color:#8fdcb9; background:#16352a}
/* data tables */
.dtable{width:100%; min-width:560px; border-collapse:collapse; font-variant-numeric:tabular-nums}
.dtable th,.dtable td{padding:.85rem 1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.dtable thead th{font:700 .68rem/1.3 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.dtable tbody th{font-weight:600}
.dtable td small,.dtable th small{display:block; color:var(--muted); font-size:.85rem; font-weight:400}
.tbox{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
/* programme blocks */
.prog-sec{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px, 5vw, 64px); align-items:start}
.prog-sec .ph{aspect-ratio:4/3; max-width:100%; position:sticky; top:110px}
@media (max-width: 860px){ .prog-sec{grid-template-columns:1fr} .prog-sec .ph{position:relative; top:auto; aspect-ratio:16/10} }
.lv{display:grid; gap:0; border-top:1px solid var(--line)}
.lv > div{display:grid; grid-template-columns:7.5rem 1fr; gap:.25rem 1rem; padding:1rem 0; border-bottom:1px solid var(--line)}
.lv .code{font:700 .7rem/1.4 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--tsa); padding-top:.2rem}
.lv h3{font-size:1.25rem}
.lv p{color:var(--muted); font-size:.96rem; grid-column:2}
.lv .req{grid-column:2; font-size:.88rem; color:var(--ink)}
@media (max-width: 480px){ .lv > div{grid-template-columns:1fr} .lv p,.lv .req{grid-column:1} }
.facts-row{display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin:.25rem 0 1rem}
/* booking page */
.jump{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.75rem}
.jump a{display:grid; gap:.3rem; padding:1rem 1.1rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--ink)}
.jump a:hover{border-color:var(--tsa)}
.jump b{font:400 1.2rem/1.2 var(--display)}
.jump span{font-size:.88rem; color:var(--muted)}
@media (max-width: 860px){ .jump{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 420px){ .jump{grid-template-columns:1fr} }
.steps3{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; counter-reset:s}
.steps3 li{counter-increment:s; padding:1.1rem 1.2rem; border-top:2px solid var(--tsa); background:var(--surface); display:grid; gap:.35rem; align-content:start}
.steps3 li::before{content:counter(s); font:700 .72rem/1 var(--label); color:var(--tsa)}
.steps3 b{font:400 1.2rem/1.2 var(--display)}
.steps3 span{color:var(--muted); font-size:.94rem}
@media (max-width: 760px){ .steps3{grid-template-columns:1fr} }
.widget{border:1.5px dashed var(--tsa); border-radius:var(--radius); background:var(--surface); min-height:360px; display:grid; place-content:center; justify-items:center; gap:.6rem; padding:2rem 1.25rem; text-align:center}
.widget svg{width:44px; height:44px} .widget svg *{fill:none; stroke:var(--tsa); stroke-width:1.6}
.widget b{font:400 1.25rem/1.25 var(--display)}
.widget p{color:var(--muted); font-size:.92rem; max-width:44ch}
.widget .sim{margin-bottom:.2rem}
.bk-sec{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px, 5vw, 56px); align-items:start}
@media (max-width: 900px){ .bk-sec{grid-template-columns:1fr} }
.apps{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 3vw, 28px)}
.app-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(20px, 3vw, 28px); display:grid; gap:.75rem; align-content:start}
.app-card.tsa{border-color:var(--tsa); box-shadow:inset 0 3px 0 var(--tsa)}
.app-card ul{margin:0; padding-left:1.1rem; color:var(--muted); display:grid; gap:.3rem}
@media (max-width: 760px){ .apps{grid-template-columns:1fr} }

/* ---------- v5 · bsport widgets ---------- */
.bsport-box{background:#fff;color:#1c2f37;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(12px,2vw,20px);min-width:0}
.bsport-label{font-family:var(--label);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#52666e;margin:0 0 .75rem}
.bsport-mount{min-height:120px;min-width:0;max-width:100%;overflow-x:hidden}
.bsport-loading{color:#52666e;margin:0;padding:1.5rem 0;text-align:center}
.bsport-fallback{display:grid;gap:.5rem;padding:1.25rem;border:1px dashed rgba(52,85,100,.3);border-radius:var(--radius);background:#f3f6f5}
.bsport-fallback .textlink{color:#345564}
.bsport-fallback p{margin:0}
@media (max-width:768px){
  /* bsport sets the calendar search form to min-width:400px, which overflows phones.
     Give it the full row instead; the filter buttons after it stay horizontally scrollable.
     Tested on 375px with all six widgets. Specificity beats bsport's [id*=bsport-widget] .cleanslate rules. */
  .bsport-mount[id*="bsport-widget"] .cleanslate .bs-calendar-search__container{min-width:0!important;flex:0 0 100%!important;max-width:100%!important;box-sizing:border-box!important}
  .bsport-mount[id*="bsport-widget"] .cleanslate .bs-calendar-search__input__container{min-width:0!important;flex:1 1 auto!important;width:auto!important}
}

/* v6 · shortcut from "Choose how you'd like to learn" to the price table */
.price-jump{margin:.25rem 0 0;font-weight:600}
#prices{scroll-margin-top:90px}
#prices:focus{outline:none}

/* v7 · founder interview + coach cards (fill the existing four-card row) */
.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}
.slot.founder, .slot.coach{padding:0; overflow:hidden; border-style:solid; background:var(--surface); gap:.55rem; padding-bottom:1.25rem}
.slot.coach{margin:0}
.slot.founder > :not(.founder-ph), .slot.coach figcaption{padding:0 1.25rem}
.slot.coach figcaption{display:grid; gap:.45rem}
.coach-ph, .founder-ph{display:block; width:100%; height:auto; aspect-ratio:4/5; max-width:100%; object-fit:cover; background:var(--mist); margin-bottom:.4rem}
.founder-ph{position:relative; padding:0; border:0; cursor:pointer; overflow:hidden; font:inherit}
.founder-ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.founder-ph:hover img{transform:scale(1.03)}
.founder-ph .play{position:absolute; left:50%; top:64%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.founder-ph .play svg{width:22px; fill:#345564; margin-left:3px}
.founder-ph .dur{position:absolute; left:.75rem; bottom:.75rem; background:rgba(16,34,42,.78); color:#fff; font:600 .75rem/1 var(--label); letter-spacing:.06em; padding:.4rem .55rem; border-radius:4px}
.founder-ph:focus-visible{outline:3px solid var(--tsa); outline-offset:-3px}
.slot.founder .note{font-size:.82rem}
.coaches-note{margin-top:.9rem; font-size:.88rem}
dialog.vdialog{width:min(1000px, calc(100vw - 24px)); background:#0f1c22; color:#e6eef0}
.vd-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .75rem .7rem 1.1rem}
.vd-head p{margin:0; font:600 .92rem/1.3 var(--body)}
.vd-close{flex:none; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:transparent; display:grid; place-items:center; cursor:pointer}
.vd-close svg{width:16px; stroke:#fff; stroke-width:2; fill:none}
.vd-frame{background:#000; aspect-ratio:16/9}
.vd-frame video{display:block; width:100%; height:100%; background:#000}
.vd-meta{margin:0; padding:.65rem 1.1rem .8rem; font-size:.82rem; color:#a3b6bc}
@media (max-width: 600px){ dialog.vdialog{width:100vw; max-width:100vw; border-radius:0} }
@media (max-width: 420px){
  .slot.coach{grid-template-columns:118px minmax(0,1fr); align-items:start; gap:0; padding:0; min-height:0}
  .slot.coach .coach-ph{margin:0; height:100%; min-height:148px}
  .slot.coach figcaption{padding:.9rem 1rem; font-size:.88rem}
}
/* live bsport widgets: never let their filter row widen the page grid on phones */
.bk-sec > *, [data-tryloc-panel], .bsport-box{min-width:0; max-width:100%}