:root{
  --bg:#050605;
  --bg-soft:#0b0d0b;
  --panel:#151915;
  --panel-2:#151915;
  --text:#f4f6f1;
  --muted:#a6ada5;
  --muted-2:#70776f;
  --accent:#75c447;
  --accent-2:#74ae53;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);
  --card-line:rgba(255,255,255,.16);
  --black:#020302;
  --display:'Archivo Black','Arial Black',sans-serif;
  --body:'Archivo',Arial,sans-serif;
  --shell:min(1240px,calc(100vw - 64px));
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 30px 90px rgba(0,0,0,.32);
  --header-h:82px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{color:inherit}
img,video{max-width:100%;display:block}
::selection{background:var(--accent);color:#050505}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:18px;top:-80px;z-index:1000;background:var(--accent);color:#050505;padding:12px 16px;border-radius:8px;font-weight:800;transition:.2s}
.skip-link:focus{top:18px}

/* The bottom border is opaque and not animated: a see-through line would let the page shine through under the header. */
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);border-bottom:1px solid transparent;transition:background .2s,backdrop-filter .2s}
.site-header:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .2s}
.site-header.is-scrolled:before{background:rgba(5,6,5,.94);backdrop-filter:blur(18px)}
.site-header.is-scrolled,.site-header.is-menu-open{border-color:#1c201c}
.site-header.is-menu-open:before{background:#080a08}
.header-shell{height:100%;display:flex;gap:28px;align-items:center}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:max-content}
.brand-mark{display:inline-grid;place-items:center;width:48px;height:48px;border:2px solid var(--text);font-family:var(--display);font-size:17px;letter-spacing:-.06em;transform:skew(-4deg)}.brand-mark-icon{display:block;border:0;transform:none;object-fit:contain}
.brand-copy{display:grid;line-height:.92;text-transform:uppercase}
.brand-copy strong{font-family:var(--display);font-size:14px}
.brand-copy span{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin-top:6px}
.nav-links{display:contents}
.nav-footer,.mobile-dock,.carousel-controls,.schedule-tabs,.hero-explore{display:none}
.nav-link,.nav-group-toggle,.header-phone{background:none;border:0;padding:0;cursor:pointer;color:#d6dbd4;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.085em;white-space:nowrap}
.nav-link,.nav-group{position:relative}
.nav-group:before{content:"";position:absolute;inset:100% 0 auto;height:24px}
.nav-link:after,.nav-group:after{content:"";position:absolute;left:0;bottom:-12px;width:0;height:2px;background:var(--accent);transition:.2s}
.nav-link:hover:after,.nav-link.is-active:after,.nav-group:hover:after,.nav-group.is-active:after{width:100%}
.nav-group-toggle{display:flex;align-items:center;gap:7px}
.nav-dropdown{position:absolute;top:calc(100% + 22px);left:50%;transform:translate(-50%,8px);min-width:245px;padding:10px;background:#0b0e0b;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.18s}
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown,.nav-group.is-open .nav-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dropdown a{display:block;padding:11px 12px;border-radius:8px;color:#d8ddd6;font-size:12px;font-weight:700}
.nav-dropdown a:hover{background:rgba(200,255,23,.08);color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:10px}
.header-phone{margin-right:4px}
.menu-icon{display:grid;gap:5px;width:19px}.menu-icon i{height:2px;width:100%;background:currentColor;transition:transform .25s}
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu-toggle[aria-expanded="true"]{color:var(--accent);border-color:rgba(200,255,23,.4)}

.btn{min-height:52px;padding:0 20px;border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.045em;cursor:pointer;transition:transform .18s,background .18s,border-color .18s,color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--accent);color:#080a07}.btn-primary:hover{background:var(--accent-2)}
.btn-secondary{border-color:var(--line-strong);background:rgba(255,255,255,.02);color:#fff}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.02)}
.btn-dark{background:#050505;color:var(--accent)}
.btn-line-dark{border-color:rgba(5,5,5,.35);color:#050505}
.btn-small{min-height:42px;padding-inline:15px;font-size:10px}
.text-link{display:inline-flex;margin-top:26px;color:var(--text);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.text-link:hover{color:var(--accent)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.17em;color:#d8ddd6}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(200,255,23,.08)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.065em;line-height:.92}
/* The first component heading is the page's <h1>; without its own size it looks like the <h2> it replaces.
   Components set --h-size on :is(h1,h2); the <h2>s render at 75% of it so the page has a clear hierarchy. */
h1{font-size:var(--h-size,1.5em);margin-bottom:.83em}
h2{font-size:calc(var(--h-size,2em) * .75)}
h1 span,h2 span{color:var(--accent)}
.lead{font-size:19px;line-height:1.7;color:#c4cac2}
.section{padding:120px 0}.section-soft{background:var(--bg-soft);border-block:1px solid var(--line)}
/* The header is fixed: a page that starts with an ordinary component (not a hero, which makes its own room)
   gets the header height on top of its own spacing. The hidden <h1> of a page without headings is skipped. */
#main>:is(:first-child,.sr-only:first-child+*):not(.sr-only,.landing-hero,.home-hero,.utility-hero,.detail-hero){padding-top:calc(var(--header-h) + 80px)}
@media (max-width:860px){#main>:is(:first-child,.sr-only:first-child+*):not(.sr-only,.landing-hero,.home-hero,.utility-hero,.detail-hero){padding-top:calc(var(--header-h) + 40px)}}
/* Two components with the same background in a row (dark, soft or green): one section spacing between them
   (120px, mobile 64px) instead of the bottom and top spacing added up, and no border line in between.
   Where the background changes, both keep their full spacing. builder-preview.css repeats this for the preview. */
.section:not(.section-soft,.schedule-teaser,.is-green)+.section:not(.section-soft,.schedule-teaser,.is-green),
.section-soft+.section-soft,
:is(.cta-band,.quote-section.is-green)+:is(.cta-band,.quote-section.is-green){padding-top:0}
.section-soft+.section-soft{border-top:0}
.section-soft:has(+.section-soft){border-bottom:0}
.section-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr);gap:70px;align-items:end;margin-bottom:52px}.section-head :is(h1,h2){--h-size:clamp(48px,5.8vw,82px);margin:16px 0 0}.section-head>.section-intro{margin:0;color:var(--muted);line-height:1.75}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(54px,8vw,110px);align-items:center}.split-wide{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}.split :is(h1,h2){--h-size:clamp(48px,5vw,76px);margin:18px 0 28px}.split p:not(.lead){color:var(--muted)}
/* A long compound ("Jeugdsportfonds") is wider than a split column at display size and runs over the image: hyphenate it
   (the page is lang="nl"). Only words of 13+ letters, so headings like "…in Waddinxveen." keep their line breaks; browsers
   without hyphenate-limit-chars (Safari) would hyphenate every word, so they keep the old behaviour. */
@supports (hyphenate-limit-chars:13 5 5){.split :is(h1,h2){hyphens:auto;hyphenate-limit-chars:13 5 5}}

/* Header / home */
.home-hero{position:relative;min-height:min(930px,100svh);overflow:hidden;border-bottom:1px solid var(--line)}
.home-hero-media{position:absolute;inset:0 0 0 46%;background-image:linear-gradient(0deg,rgba(4,5,4,.72),rgba(4,5,4,.06) 48%),var(--photo),radial-gradient(circle at 70% 40%,#273317,#080a08 62%);background-size:cover;background-position:center;filter:saturate(.72) contrast(1.06)}
.home-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 48%,rgba(200,255,23,.14),transparent 27%),linear-gradient(90deg,#050605 0 39%,rgba(5,6,5,.92) 48%,rgba(5,6,5,.1) 78%)}
.home-hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 70%);opacity:.4}
.home-hero-inner{position:relative;z-index:2;min-height:inherit;display:grid;grid-template-columns:minmax(0,760px) 1fr;align-items:center;padding-top:calc(var(--header-h) + 48px);padding-bottom:50px}
.home-hero-copy h1{font-size:clamp(62px,6vw,86px);margin:26px 0 28px}.home-hero-copy>p{max-width:620px;color:#c2c8c0;font-size:18px;line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.home-proof{display:flex;gap:32px;padding-top:22px;margin-top:52px;border-top:1px solid var(--line);max-width:670px}.home-proof div{display:grid;gap:4px}.home-proof strong{font-size:16px}.home-proof span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:800}.hero-vertical{justify-self:end;align-self:end;margin:0 8px 34px 0;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:14px}.hero-vertical span{color:var(--accent);font-weight:900}.hero-vertical i{display:block;width:1px;height:110px;background:linear-gradient(var(--accent),transparent)}.hero-vertical b{font-size:9px;letter-spacing:.22em;text-transform:uppercase}
.metric-strip{background:#080a08;border-bottom:1px solid var(--line)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}.metric-grid>div{min-height:140px;padding:32px;border-right:1px solid var(--line);display:flex;justify-content:center;flex-direction:column;gap:7px}.metric-grid>div:first-child{padding-left:0}.metric-grid>div:last-child{border-right:0}.metric-grid strong{font-size:23px;color:var(--accent);letter-spacing:-.04em}.metric-grid span{color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.09em}

.editorial-stack{position:relative;min-height:620px}.photo{background-image:linear-gradient(180deg,transparent 40%,rgba(4,5,4,.7)),var(--photo),linear-gradient(145deg,#1a2512,#090b09 70%);background-size:cover;background-position:center;position:relative;overflow:hidden}.photo:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 65%,rgba(200,255,23,.12));pointer-events:none}.photo-label{position:absolute;left:22px;bottom:20px;z-index:1;background:rgba(5,6,5,.75);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;backdrop-filter:blur(8px)}.editorial-main{position:absolute;inset:0 54px 60px 0;border-radius:var(--radius);box-shadow:var(--shadow)}.floating-note{position:absolute;right:0;bottom:0;width:min(285px,72%);padding:24px 26px;border:1px solid rgba(200,255,23,.45);background:rgba(8,10,8,.9);border-radius:14px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.floating-note small,.floating-note span{display:block;text-transform:uppercase;font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.11em}.floating-note strong{display:block;color:var(--accent);font-size:37px;letter-spacing:-.06em;margin:5px 0}

.discipline-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.discipline-card{grid-column:span 4;min-height:480px;position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;background:#0c0f0c;isolation:isolate;transition:transform .2s,border-color .2s}.discipline-card:hover{transform:translateY(-4px);border-color:rgba(200,255,23,.55)}.discipline-card>div{position:absolute;inset:0;z-index:-2;background-image:var(--photo),linear-gradient(145deg,#1a2413,#0a0b0a);background-size:cover;background-position:center;filter:saturate(.7) contrast(1.05);transition:transform .35s}.discipline-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,5,.05) 24%,rgba(5,6,5,.95) 86%)}.discipline-card:hover>div{transform:scale(1.03)}.discipline-card span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}.discipline-card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.045em;font-size:32px;line-height:1;margin:10px 0 10px}.discipline-card p{color:#bec4bc;max-width:340px;margin-bottom:16px}.discipline-card b{font-size:10px;text-transform:uppercase;letter-spacing:.07em}.discipline-large{grid-column:span 8;min-height:560px}.discipline-large h3{font-size:44px}.all-classes{display:flex;justify-content:center;margin-top:28px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.benefit-grid article{background:var(--bg);padding:34px}.section-soft .benefit-grid article{background:var(--bg-soft)}.benefit-grid article>span{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}.benefit-grid h3{font-size:19px;margin:20px 0 10px}.benefit-grid p{color:var(--muted);margin:0}.compact-grid{margin-top:32px}.compact-grid article{padding:24px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:14px}.gallery-item{position:relative;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background-image:linear-gradient(180deg,rgba(5,6,5,.03),rgba(5,6,5,.54)),var(--photo),linear-gradient(145deg,#1d2813,#080a08);background-size:cover;background-position:center;min-height:200px}.gallery-item:after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;transition:.2s}.gallery-item:hover:after{border-color:var(--accent)}.gallery-wide{grid-column:span 2}.gallery-full{grid-column:1/-1}.gallery-index,.gallery-open{position:absolute;z-index:2;background:rgba(5,6,5,.75);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.gallery-index{left:14px;top:14px;padding:7px 8px;border-radius:8px;color:var(--accent)}.gallery-open{right:14px;bottom:14px;padding:8px 10px;border-radius:999px}
.schedule-teaser{background:linear-gradient(135deg,#11160d,#060706 55%);border-block:1px solid var(--line)}.schedule-teaser-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}.schedule-teaser :is(h1,h2){--h-size:clamp(50px,5vw,76px);margin:18px 0 24px}.schedule-teaser p{color:var(--muted);max-width:520px}.schedule-stack{border-top:1px solid var(--line);display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);column-gap:18px}.schedule-stack div{grid-column:1/-1;display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);grid-template-columns:subgrid;gap:18px;padding:23px 0;border-bottom:1px solid var(--line);align-items:center}.schedule-stack span{min-width:70px;color:var(--accent);font-family:var(--display);font-size:21px;overflow-wrap:anywhere}.schedule-stack b{font-size:14px}
.price-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-preview-grid article{min-height:300px;border:1px solid var(--card-line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;background:var(--panel)}.price-preview-grid article.featured{background:var(--accent);color:#050505}.price-preview-grid span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.price-preview-grid strong{font-family:var(--display);font-size:52px;letter-spacing:-.07em;margin:38px 0 0}.price-preview-grid small{color:var(--muted);text-transform:uppercase;font-weight:800}.price-preview-grid .featured small{color:#26300d}.price-preview-grid a{margin-top:auto;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.price-preview-grid article:not(.featured) a{color:var(--accent)}

/* Landing */
.landing-hero{min-height:760px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.landing-hero-bg{position:absolute;inset:0 0 0 36%;background-image:var(--photo),linear-gradient(145deg,#1d2715,#070907);background-size:cover;background-position:center;filter:saturate(.7) contrast(1.05)}.landing-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050605 0 40%,rgba(5,6,5,.9) 51%,rgba(5,6,5,.2) 79%),linear-gradient(0deg,rgba(5,6,5,.75),transparent 45%)}.landing-hero-inner{position:relative;z-index:2;min-height:inherit;padding-top:calc(var(--header-h) + 80px);padding-bottom:70px;display:grid;grid-template-columns:minmax(0,760px) 1fr;align-items:center}.landing-copy :is(h1,h2){--h-size:clamp(68px,7.8vw,118px);margin:24px 0}.landing-copy>.landing-intro{max-width:610px;font-size:19px;color:#c0c6be}.landing-stat{justify-self:end;align-self:end;margin-bottom:25px;padding:23px 26px;background:rgba(5,6,5,.78);border:1px solid rgba(200,255,23,.34);border-radius:14px;backdrop-filter:blur(12px)}.landing-stat strong{display:block;font-size:31px;color:var(--accent);letter-spacing:-.05em}.landing-stat span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#d6dcd4}.two-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}.info-panel,.hours-panel{border:1px solid var(--card-line);border-radius:var(--radius);padding:38px;background:var(--panel)}.info-panel :is(h1,h2){--h-size:clamp(46px,4.8vw,70px);margin:20px 0 25px}.info-panel p,.hours-panel small{color:var(--muted)}.hours-panel h3{font-size:22px;margin-bottom:20px}.hours{border-top:1px solid var(--line)}.hours>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.hours span{color:var(--muted)}.hours b{font-size:14px}.hours-panel small{display:block;margin-top:18px}

/* Detail */
.detail-hero{padding:calc(var(--header-h) + 85px) 0 80px;min-height:780px;display:flex;align-items:center}.detail-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:center}.detail-copy h1{font-size:clamp(65px,7vw,108px);margin:24px 0 12px}.detail-copy h2{font-family:var(--body);font-weight:800;letter-spacing:-.04em;text-transform:none;font-size:28px;color:var(--accent);margin-bottom:25px}.detail-copy>p{color:#bdc4bb;font-size:18px;line-height:1.7}.detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}.detail-meta span{border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.detail-media{min-height:610px;border-radius:var(--radius);position:relative;background-image:linear-gradient(0deg,rgba(5,6,5,.65),transparent 46%),var(--photo),linear-gradient(145deg,#26371a,#080a08);background-size:cover;background-position:center;box-shadow:var(--shadow);overflow:hidden}.detail-media:before{content:"";position:absolute;right:-50px;top:-50px;width:220px;height:220px;border:2px solid rgba(200,255,23,.45);transform:rotate(10deg)}.media-number{position:absolute;left:22px;bottom:20px;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;background:rgba(5,6,5,.72);border:1px solid var(--line);border-radius:999px;padding:9px 11px}.check-list{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}.check-list li{display:flex;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font-weight:700}.check-list span{color:var(--accent)}.dark-card{padding:38px;border:1px solid var(--card-line);background:var(--panel);border-radius:var(--radius)}.dark-card>p{color:#c1c8bf;font-size:17px;line-height:1.7;margin:26px 0}.notice{padding:20px;border-left:2px solid var(--accent);background:rgba(200,255,23,.06)}.notice strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.notice p{margin:7px 0 0;color:var(--muted);font-size:14px}.schedule-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:90px;align-items:start}.schedule-layout :is(h1,h2){--h-size:clamp(48px,5.2vw,76px);margin:18px 0 24px}.schedule-layout>div:first-child p{color:var(--muted)}.schedule-card{border-top:1px solid var(--line)}.schedule-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;padding:19px 0;border-bottom:1px solid var(--line);align-items:center}.schedule-row span{color:var(--muted)}.schedule-row strong{font-size:16px}.schedule-row small{text-align:right;color:var(--accent);font-weight:800}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card{border:1px solid var(--card-line);border-radius:var(--radius);padding:18px;background:var(--panel);transition:.2s}.related-card:hover{transform:translateY(-4px);border-color:rgba(200,255,23,.5)}.related-media{height:240px;border-radius:13px;background-image:linear-gradient(0deg,rgba(5,6,5,.35),transparent),var(--photo),linear-gradient(145deg,#1a2513,#080a08);background-size:cover;background-position:center;margin-bottom:20px}.related-card>span{color:var(--accent);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.related-card h3{font-family:var(--display);text-transform:uppercase;font-size:28px;letter-spacing:-.04em;margin:8px 0 20px}.related-card b{font-size:10px;text-transform:uppercase;letter-spacing:.06em}

/* Utility */
.utility-hero{padding:calc(var(--header-h) + 95px) 0 100px;background:radial-gradient(circle at 80% 25%,rgba(200,255,23,.12),transparent 25%),linear-gradient(135deg,#0b0d0b,#050605);border-bottom:1px solid var(--line)}.utility-hero.compact{padding-bottom:72px}.utility-hero-inner h1{font-size:clamp(64px,8vw,118px);max-width:980px;margin:25px 0}.utility-hero-inner>p{max-width:640px;color:var(--muted);font-size:18px}.utility-hero-inner>.btn{margin-top:28px}.pricing-section-head{display:grid;grid-template-columns:90px 1fr;gap:30px;align-items:start;margin-bottom:38px}.pricing-section-head>span{font-family:var(--display);font-size:46px;color:var(--accent);opacity:.65}.pricing-section-head :is(h1,h2){--h-size:clamp(48px,5vw,74px);margin:0 0 12px}.pricing-section-head p{color:var(--muted);margin:0}.price-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-card-grid article{min-height:270px;padding:27px;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel);display:flex;flex-direction:column}.price-card-grid article.featured{border-color:var(--accent);background:var(--accent);color:var(--black)}.price-card-grid article.featured>:is(small,h3,strong,span,p){color:var(--black)}.price-card-grid article.featured a:focus-visible{outline-color:var(--black)}.price-card-grid small{color:var(--accent);text-transform:uppercase;font-weight:900;letter-spacing:.08em}.price-card-grid strong{font-family:var(--body);font-weight:800;font-size:47px;letter-spacing:-.07em;margin-top:38px}.price-card-grid article>span{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase}.price-card-grid p{color:#c5cbc3;margin:18px 0}.price-card-action{margin-top:auto;padding-top:22px}.price-card-action .btn{width:100%;margin-top:0}.price-card-grid article.featured .btn-dark:hover{background:#1a1f16}.tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.tables-grid :is(h1,h2){--h-size:clamp(42px,4.2vw,62px);margin:18px 0 30px}.data-table,.info-list{border-top:1px solid var(--line)}.data-table>div{display:grid;grid-template-columns:1.4fr .6fr .6fr;padding:14px 0;border-bottom:1px solid var(--line);gap:12px}.table-head{color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.data-table b{text-align:right}.info-list>div{display:flex;justify-content:space-between;gap:24px;padding:15px 0;border-bottom:1px solid var(--line)}.info-list span{color:var(--muted)}.info-list b{text-align:right}.schedule-board{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.day-column{border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel);padding:24px}.day-column h2{font-size:32px;margin:0 0 18px;color:var(--accent)}.lesson{display:grid;grid-template-columns:90px 1fr;gap:7px 12px;padding:14px 0;border-top:1px solid var(--line)}.lesson time{font-size:12px;color:#fff;font-weight:800}.lesson strong{font-size:13px}.lesson span{grid-column:2;color:var(--muted);font-size:10px}.schedule-note{margin-top:30px;padding:25px;border:1px solid rgba(200,255,23,.3);border-radius:var(--radius);background:rgba(200,255,23,.04)}.schedule-note strong{color:var(--accent);text-transform:uppercase;font-size:11px;letter-spacing:.08em}.schedule-note p{color:var(--muted);margin:8px 0 0}.schedule-note a{color:var(--accent)}

.contact-layout{display:grid;grid-template-columns:1fr .9fr;gap:35px}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-cards article{border:1px solid var(--card-line);border-radius:var(--radius);padding:28px;background:var(--panel)}.contact-cards article>span{color:var(--accent);font-size:10px;font-weight:900}.contact-cards h3{font-size:20px;margin:22px 0 12px}.contact-cards p{margin-bottom:11px}.contact-cards small{color:var(--muted)}.contact-cards a:hover{color:var(--accent)}.map-visual{min-height:520px;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(circle at 52% 48%,rgba(200,255,23,.22),transparent 12%),linear-gradient(30deg,transparent 48%,rgba(255,255,255,.05) 49% 51%,transparent 52%),linear-gradient(-30deg,transparent 48%,rgba(255,255,255,.035) 49% 51%,transparent 52%),#0b0e0b;background-size:auto,80px 80px,80px 80px,auto;display:grid;place-items:center}.map-visual>div{display:grid;text-align:center;gap:4px;padding:26px 34px;background:rgba(5,6,5,.82);border:1px solid rgba(200,255,23,.4);border-radius:14px;box-shadow:var(--shadow)}.map-visual span{font-family:var(--display);color:var(--accent);font-size:27px}.map-visual strong{font-size:20px}.map-visual small{color:var(--muted)}
.video-card{border:1px solid var(--card-line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}.video-card video{width:100%;min-height:480px;object-fit:cover;background:#0a0b0a}.video-card>span{display:block;padding:18px 20px;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Forms */
.form-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}.form-layout :is(h1,h2),.signup-aside :is(h1,h2),.enrollment-aside :is(h1,h2){--h-size:clamp(48px,5vw,72px);margin:18px 0 25px}.form-layout>div>p,.signup-aside>p,.enrollment-aside>p{color:var(--muted)}.form-card,.enrollment-card{border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel);padding:34px}.form-card-wide{padding:42px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label:not(.checkbox){display:grid;gap:8px}.form-grid label>span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#dce0da}.form-grid .span-2{grid-column:span 2}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#090b09;color:#fff;padding:14px 15px;min-height:50px;transition:.2s}.form-grid textarea{resize:vertical}.form-grid input:hover,.form-grid select:hover,.form-grid textarea:hover{border-color:var(--line-strong)}.form-card>.btn{margin-top:24px}.checkbox{display:flex!important;gap:11px!important;align-items:flex-start!important;text-transform:none!important}.checkbox input{width:18px!important;height:18px!important;min-height:0!important;accent-color:var(--accent);margin-top:2px}.checkbox span{font-size:12px!important;text-transform:none!important;letter-spacing:0!important;color:var(--muted)!important;font-weight:500!important}.form-status{margin:15px 0 0;color:var(--accent);font-size:13px;font-weight:700;min-height:20px}.form-status.is-error{color:#ff8a8a}.form-section{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start;margin:2px 0 28px}.form-section+.form-grid,.form-section+.choice-grid,.form-section+.plan-grid{margin-bottom:38px}.form-section-number{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(200,255,23,.4);color:var(--accent);font-family:var(--display)}.form-section :is(h1,h2){font-family:var(--display);font-size:34px;text-transform:uppercase;letter-spacing:-.04em;margin:0 0 4px}.form-section p{margin:0;color:var(--muted)}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice-card{position:relative;cursor:pointer}.choice-card input{position:absolute;opacity:0}.choice-card>span{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#0b0d0b;transition:.2s}.choice-card b{font-size:13px}.choice-card small{color:var(--muted)}.choice-card input:checked+span{border-color:var(--accent);background:rgba(200,255,23,.08);box-shadow:inset 0 0 0 1px var(--accent)}.signup-shell{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:start}.signup-aside{position:sticky;top:110px;padding:10px}.signup-aside ol{list-style:none;padding:0;margin:32px 0;border-top:1px solid var(--line)}.signup-aside li{display:grid;grid-template-columns:38px 1fr;gap:15px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}.signup-aside li b{color:var(--accent);font-family:var(--display)}.signup-aside li span{color:#c7cdc5}
.enrollment-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:48px;align-items:start}.enrollment-progress{grid-column:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:-22px}.enrollment-progress>div{display:flex;align-items:center;gap:10px;color:var(--muted)}.enrollment-progress>div span{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:11px}.enrollment-progress>div b{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.enrollment-progress>div.is-active{color:#fff}.enrollment-progress>div.is-active span{background:var(--accent);border-color:var(--accent);color:#050505}.enrollment-progress i{height:1px;background:var(--line)}.enrollment-card{grid-column:1}.enrollment-aside{grid-column:2;grid-row:1 / span 2;position:sticky;top:110px;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#101410,#080a08)}.aside-rule{height:1px;background:var(--line);margin:26px 0}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.plan-card{position:relative;cursor:pointer}.plan-card input{position:absolute;opacity:0}.plan-card>div{min-height:150px;padding:20px;border:1px solid var(--line);border-radius:13px;background:#090b09;display:flex;flex-direction:column;transition:.2s}.plan-card small{color:var(--accent);text-transform:uppercase;font-size:9px;font-weight:900;letter-spacing:.07em}.plan-card h3{font-size:16px;margin:12px 0}.plan-card strong{margin-top:auto;font-size:23px}.plan-check{position:absolute;right:14px;top:14px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);z-index:2}.plan-card input:checked~.plan-check{background:var(--accent);box-shadow:inset 0 0 0 4px #0b0d0b}.plan-card input:checked~div{border-color:var(--accent);background:rgba(200,255,23,.05)}.consent-box{margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:14px;background:#090b09}.consent-box h3{margin:0 0 18px}.consent-box .checkbox{margin:11px 0}.consent-box>p{color:var(--muted);font-size:12px;margin:18px 0 0}.step-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:28px}.step-hint{font-size:11px;color:var(--muted)}

/* CTA/Footer */
.cta-band{padding:78px 0;background:var(--accent);color:#050505}.cta-band-inner{display:flex;align-items:end;justify-content:space-between;gap:60px}.cta-band .eyebrow{color:#182006}.cta-band .dot{background:#050505;box-shadow:0 0 0 5px rgba(5,5,5,.08)}.cta-band :is(h1,h2){--h-size:clamp(52px,6vw,86px);margin:18px 0 16px;max-width:900px}.cta-band p{margin:0;max-width:620px;color:#1e260c}.cta-band-actions{display:flex;flex-wrap:wrap;gap:10px;min-width:max-content}
.site-footer{padding:76px 0 24px;background:#030403;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,.75fr);gap:50px}.brand-footer{margin-bottom:23px}.footer-brand p{max-width:410px;color:var(--muted)}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:9px}.footer-grid h3{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:5px 0 10px}.footer-grid a{font-size:12px;color:#c2c8c0}.footer-grid a:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:26px;margin-top:54px;border-top:1px solid var(--line);color:var(--muted-2);font-size:10px;text-transform:uppercase;letter-spacing:.08em}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(2,3,2,.95);display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;padding:40px;opacity:0;visibility:hidden;transition:.2s}.lightbox.is-open{opacity:1;visibility:visible}.lightbox-stage{width:min(1100px,90vw);height:min(76vh,760px);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:var(--shadow)}.lightbox-fallback{display:none;padding:40px;border:1px solid var(--line);border-radius:14px;color:var(--muted)}.lightbox.has-error img{display:none}.lightbox.has-error .lightbox-fallback{display:block}.lightbox p{color:#c6cbc4;font-size:12px;margin:15px 0 0}.lightbox-close{position:absolute;right:24px;top:20px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#0d100d;font-size:26px;cursor:pointer}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}.js .reveal.is-visible{opacity:1;transform:none}

/* Carousel controls (site.js adds them after a [data-carousel] track). Shown on mobile, and on every
   screen for a slider with data-carousel-always (several large quotes). */
.carousel-status{display:flex;align-items:center;gap:14px;font-size:10px;font-weight:800;color:var(--muted)}
.carousel-count{color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.carousel-hint{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.carousel-buttons{display:flex;gap:8px}
.carousel-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--text);font-size:19px;cursor:pointer;transition:background .2s,color .2s}
.carousel-button:last-child{background:var(--accent);border-color:var(--accent);color:#050605}
.carousel-button:disabled{opacity:.3;cursor:default}

/* Tablet: keep the desktop compositions until they need more space. */
@media (max-width:1120px){
  :root{--shell:calc(100% - 48px)}
  .discipline-card{grid-column:span 6}.discipline-large{grid-column:span 12}
  .detail-hero-grid{gap:40px}.detail-media{min-height:540px}
  .price-card-grid,.schedule-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The menu is a viewport-sized layer, never a translated grid-sized item. */
@media (max-width:1023px){
  :root{--header-h:calc(76px + env(safe-area-inset-top))}
  .site-header{padding-top:env(safe-area-inset-top)}
  .header-shell{display:flex;justify-content:space-between;gap:16px}
  .header-actions{display:none}
  .brand-mark{width:40px;height:40px;font-size:15px}
  .brand-copy strong{font-size:12px}.brand-copy span{font-size:9px}
  .cta-band-inner{display:block}.cta-band-actions{margin-top:28px;min-width:0}
}

/* Mobile: compact editorial sections, touch rails and a thumb-friendly dock. */
@media (max-width:860px){
  :root{--gutter:24px;--shell:calc(100% - var(--gutter)*2);--radius:18px;--dock-h:82px}
  html{scroll-padding-bottom:calc(var(--dock-h) + 20px + env(safe-area-inset-bottom))}
  body{font-size:15px}
  body.has-mobile-dock{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
  .shell>*{min-width:0}
  .section{padding:64px 0}
  .section-head,.split,.split-wide,.schedule-teaser-grid,.two-panel,.schedule-layout,.tables-grid,.contact-layout,.form-layout,.signup-shell,.enrollment-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .section-head{margin-bottom:28px;align-items:start}
  .section-head :is(h1,h2),.split :is(h1,h2),.schedule-teaser :is(h1,h2),.schedule-layout :is(h1,h2),.tables-grid :is(h1,h2),.info-panel :is(h1,h2),.form-layout :is(h1,h2),.signup-aside :is(h1,h2),.enrollment-aside :is(h1,h2){--h-size:clamp(34px,9.5vw,58px);line-height:.99;letter-spacing:-.055em;margin:16px 0 20px;overflow-wrap:anywhere}
  .section-head :is(h1,h2){margin-bottom:0}
  .section-head>.section-intro{max-width:540px;line-height:1.6}
  .lead{font-size:17px;line-height:1.65}
  .eyebrow{font-size:9px;letter-spacing:.13em}
  .btn{min-height:52px;border-radius:12px;padding-inline:18px;font-size:11px}
  .btn:hover,.discipline-card:hover,.related-card:hover{transform:none}
  .text-link{min-height:44px;align-items:center;margin-top:12px}

  .home-hero{min-height:calc(100svh - var(--dock-h) - env(safe-area-inset-bottom));min-height:max(660px,calc(100svh - var(--dock-h) - env(safe-area-inset-bottom)))}
  .home-hero-media{inset:0;background-position:60% center;filter:saturate(.65) contrast(1.08)}
  .home-hero:after{background:linear-gradient(180deg,rgba(5,6,5,.35),rgba(5,6,5,.16) 25%,rgba(5,6,5,.75) 55%,#050605 100%),linear-gradient(90deg,rgba(5,6,5,.64),transparent 100%)}
  .home-hero-grid,.hero-vertical{display:none}
  .home-hero-inner{display:flex;align-items:flex-end;padding-top:calc(var(--header-h) + 92px);padding-bottom:26px}
  .home-hero-copy{width:100%}
  .home-hero-copy h1{font-size:clamp(30px,9vw,68px);line-height:.98;letter-spacing:-.055em;margin:20px 0}
  .home-hero-copy>p{max-width:500px;font-size:14px;line-height:1.65;color:#cbd0c7;margin-bottom:0}
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .hero-actions>.btn{flex:1;white-space:nowrap}
  .home-hero .hero-actions>.btn-secondary{background:rgba(5,6,5,.25)}
  .hero-explore{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .hero-explore span{color:var(--accent);font-size:18px}
  .home-proof{display:grid;grid-template-columns:.8fr .8fr 1.3fr;gap:12px;padding-top:18px;margin-top:13px;max-width:none}
  .home-proof strong{font-size:14px;white-space:nowrap}.home-proof span{font-size:8px;letter-spacing:.035em}
  .metric-grid{display:grid;grid-template-columns:1fr 1fr}
  .metric-grid>div,.metric-grid>div:first-child{min-height:95px;padding:20px 12px 20px 0;border-bottom:1px solid var(--line);gap:4px}
  .metric-grid>div:nth-child(even){padding-left:20px;border-right:0}
  .metric-grid>div:nth-last-child(-n+2){border-bottom:0}
  .metric-grid strong{font-size:19px}.metric-grid span{font-size:8px;line-height:1.6;letter-spacing:.06em}
  .editorial-stack{min-height:340px;margin-top:5px}
  .editorial-main{inset:0 22px 30px 0}
  .floating-note{width:180px;padding:16px 20px}.floating-note strong{font-size:32px}

  /* A slice of the next card makes horizontal exploration visible. */
  [data-carousel]{display:flex;gap:14px;width:calc(100% + var(--gutter)*2);max-width:none;margin-inline:calc(-1*var(--gutter));padding:2px var(--gutter) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;border:0;border-radius:0;background:transparent;-webkit-overflow-scrolling:touch}
  [data-carousel]::-webkit-scrollbar{display:none}
  [data-carousel]>*{flex:0 0 min(82vw,360px);min-width:0;grid-column:auto;scroll-snap-align:start;scroll-snap-stop:normal}
  [data-carousel]:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
  .discipline-card,.discipline-large{min-height:410px;padding:24px;border-radius:18px}
  .discipline-card h3,.discipline-large h3{font-size:32px;max-width:260px}
  .discipline-card p{font-size:14px;line-height:1.5}
  .discipline-card b{padding-top:8px}
  .discipline-card>div{background-position:60% center}
  .gallery-grid{grid-auto-rows:auto}
  .gallery-grid>.gallery-item{height:330px;min-height:0;border-radius:18px}
  .gallery-open{font-size:9px;min-height:34px;display:flex;align-items:center}
  .benefit-grid>article{flex-basis:min(77vw,320px);padding:26px;border:1px solid var(--card-line);background:var(--panel);border-radius:18px;min-height:220px}
  .section-soft .benefit-grid>article{background:var(--panel)}
  .benefit-grid h3{font-size:20px;margin-top:30px}
  .benefit-grid p{font-size:14px;line-height:1.65}
  .price-preview-grid>article{min-height:290px;padding:26px}
  .price-preview-grid a{display:flex;align-items:center;min-height:44px}
  .price-card-grid>article{min-height:300px}
  .related-card{padding:14px}.related-media{height:215px}
  .related-card h3{font-size:26px}
  .carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;min-height:48px}
  .all-classes{margin-top:20px}.all-classes>.btn{width:100%}

  .landing-hero{min-height:650px}
  .landing-hero-bg{inset:0;background-position:60% center}
  .landing-hero-shade{background:linear-gradient(180deg,rgba(5,6,5,.2),rgba(5,6,5,.3) 25%,rgba(5,6,5,.85) 70%,#050605)}
  .landing-hero-inner{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:24px;padding-top:210px;padding-bottom:30px}
  .landing-copy :is(h1,h2){--h-size:clamp(42px,12vw,80px);line-height:.96;letter-spacing:-.05em;margin:18px 0}
  .landing-copy>.landing-intro{font-size:15px;line-height:1.65}
  .landing-stat{align-self:flex-start;margin:0;padding:12px 18px;display:flex;align-items:center;gap:14px;border-radius:12px}
  .landing-stat strong{font-size:22px}.landing-stat span{font-size:8px}
  .detail-hero{position:relative;display:block;min-height:0;padding:0;isolation:isolate;background:#050605}
  .detail-hero-grid{display:flex;flex-direction:column;gap:0}
  .detail-copy{width:100%;padding:calc(var(--header-h) + 155px) 0 30px}
  .detail-copy h1{font-size:clamp(40px,12vw,78px);line-height:.98;letter-spacing:-.05em;margin:18px 0;overflow-wrap:anywhere}
  .detail-copy h2{font-size:22px;line-height:1.2;margin-bottom:16px}
  .detail-copy>p{font-size:15px;line-height:1.65}
  .detail-media{position:absolute;inset:0 0 auto;z-index:-1;width:100%;min-height:0;height:430px;border-radius:0;box-shadow:none;background-position:55% 30%;opacity:.75}
  .detail-media:before{inset:0;width:auto;height:auto;border:0;transform:none;background:linear-gradient(180deg,rgba(5,6,5,.1),rgba(5,6,5,.3) 24%,#050605 78%)}
  .media-number{display:none}.detail-meta{gap:6px;margin-top:22px}.detail-meta span{font-size:8px;padding:8px 10px}
  .js .detail-copy.reveal,.js .detail-media.reveal,.js .home-hero-copy.reveal,.js .landing-copy.reveal,.js .landing-stat.reveal{opacity:1;transform:none}
  .dark-card,.info-panel,.hours-panel{padding:25px}
  .schedule-row{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 0}
  .schedule-row small{grid-column:1/-1;text-align:left}.schedule-row strong{font-size:14px}
  .schedule-stack{column-gap:12px}
  .schedule-stack div{padding:18px 0;gap:12px}
  .schedule-stack span{min-width:56px}.schedule-stack b{font-size:13px}

  .utility-hero,.utility-hero.compact{padding:calc(var(--header-h) + 38px) 0 36px}
  .utility-hero-inner h1{font-size:clamp(42px,12vw,76px);line-height:.98;letter-spacing:-.055em;margin:20px 0;overflow-wrap:anywhere}
  .utility-hero-inner>p{font-size:15px;line-height:1.65;margin-bottom:0}
  .utility-hero-inner>.btn{margin-top:22px}
  .pricing-section-head{grid-template-columns:34px 1fr;gap:16px;margin-bottom:26px}
  .pricing-section-head>span{font-size:25px;margin-top:4px}
  .pricing-section-head :is(h1,h2){--h-size:clamp(32px,9vw,50px);line-height:1;overflow-wrap:anywhere}
  .pricing-section-head p{font-size:14px}
  .schedule-tabs{display:flex;gap:6px;margin-bottom:22px;padding:4px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
  .schedule-tabs button{flex:1;min-width:0;min-height:48px;padding:8px 2px;border:0;border-radius:11px;background:transparent;font-size:12px;font-weight:800;cursor:pointer;color:var(--muted)}
  .schedule-tabs button[aria-selected="true"]{background:var(--accent);color:#050605}
  .schedule-board{grid-template-columns:minmax(0,1fr);gap:0}
  .schedule-board.is-tabbed>.day-column{display:none}
  .schedule-board.is-tabbed>.day-column.is-selected{display:block}
  .day-column{padding:24px}.day-column h2{font-size:32px;margin-bottom:24px}
  .lesson{grid-template-columns:94px 1fr;padding:20px 0;gap:6px 16px}.lesson strong{font-size:15px}.lesson span{font-size:12px}
  .schedule-note{padding:22px;margin-top:20px}.schedule-note p{font-size:14px}
  .data-table{font-size:14px}.data-table>div{grid-template-columns:1.2fr .7fr .5fr}.table-head span:not(:first-child){text-align:right}
  .info-list{font-size:14px}.info-list>div{gap:16px}.info-list>div>*{min-width:0;flex:1}
  .contact-cards{grid-template-columns:1fr 1fr;gap:12px}
  .contact-cards article{padding:22px}.contact-cards a{overflow-wrap:anywhere}
  .map-visual{min-height:300px}.map-visual>div{padding:22px}
  .video-card video{min-height:0;max-height:65svh}

  .form-card,.form-card-wide,.enrollment-card{padding:24px}
  .form-grid{gap:18px}.form-grid input,.form-grid textarea,.form-grid select{font-size:16px}
  .form-section{grid-template-columns:38px 1fr;gap:12px}.form-section-number{width:34px;height:34px;font-size:13px}.form-section :is(h1,h2){font-size:27px;line-height:1.05;margin:0 0 8px}
  .choice-grid,.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .choice-card>span{min-height:78px;padding:15px 12px}.choice-card b{font-size:12px}.choice-card small{font-size:11px}
  .choice-card input:focus-visible+span,.plan-card input:focus-visible~div{outline:2px solid var(--accent);outline-offset:3px}
  .plan-card>div{padding:16px;min-height:165px}.plan-card small{padding-right:12px;font-size:8px}.plan-card h3{font-size:14px}.plan-card strong{font-size:20px}
  .signup-aside,.enrollment-aside{position:static;grid-column:1;grid-row:auto}
  .enrollment-progress{grid-column:1;gap:8px;margin-bottom:0}.enrollment-progress>div{gap:6px}.enrollment-progress>div b{font-size:9px;letter-spacing:.025em}
  .enrollment-card{grid-column:1}.enrollment-aside{padding:24px}
  .step-actions{flex-wrap:wrap}.step-actions>.btn{flex:1}.step-hint{width:100%;order:3;text-align:center}
  .consent-box{padding:18px}
  .cta-band{padding:48px 0}.cta-band :is(h1,h2){--h-size:clamp(36px,10vw,60px);line-height:1;overflow-wrap:anywhere}.cta-band-actions{display:flex;gap:10px}.cta-band-actions>.btn{flex:1}
  .site-footer{padding:48px 0 24px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px 20px}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}
  .footer-grid>div:not(.footer-brand){gap:0}.footer-grid a:not(.brand){display:flex;align-items:center;min-height:40px;font-size:12px}.footer-grid h3{margin-bottom:12px}.footer-bottom{display:grid;gap:8px;margin-top:28px;padding-top:22px;font-size:8px}
  .brand-footer{margin-bottom:18px}.footer-brand p{font-size:14px;margin:0}

  .mobile-dock{position:fixed;z-index:80;inset:auto 0 0;display:flex;gap:10px;align-items:center;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(9,12,9,.95);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.14)}
  .mobile-dock>a{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;font-weight:700;color:var(--muted)}
  .mobile-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .mobile-dock>a[aria-current="page"]{color:var(--accent)}
  .mobile-dock>.dock-cta{flex-direction:row;gap:18px;border-radius:13px;background:var(--accent);color:#050605;font-size:11px;font-weight:900}
  .dock-cta>span:last-child{font-size:21px;font-weight:400}
  body.nav-open .mobile-dock,body:has(input:focus,textarea:focus,select:focus) .mobile-dock{visibility:hidden;pointer-events:none}
  .lightbox{padding:20px;grid-template-rows:minmax(0,1fr) auto}
  .lightbox-stage{height:min(72dvh,760px);width:100%;min-height:0}
  .lightbox-close{right:20px;top:max(18px,env(safe-area-inset-top))}
  .lightbox-fallback{padding:24px;font-size:14px}
}

@media (max-width:560px){
  .form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .span-2{grid-column:auto}
  .contact-cards{grid-template-columns:minmax(0,1fr)}
  .contact-cards article{display:grid;grid-template-columns:1fr;gap:0}.contact-cards h3{margin-top:12px}
  .form-card>.btn{width:100%}
}
@media (max-width:359px){
  :root{--gutter:18px}
  .brand{gap:8px}.brand-copy strong{font-size:10px}.brand-copy span{font-size:8px}
  .home-hero-copy h1{font-size:9vw}.home-proof strong{font-size:12px}.home-proof span{font-size:7px}
  .hero-actions{gap:8px}.hero-actions>.btn{font-size:9px;padding-inline:10px}
  .mobile-dock{gap:8px}
  .choice-grid,.plan-grid{grid-template-columns:minmax(0,1fr)}
  .carousel-hint{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* WordPress integration */
.admin-bar .site-header{top:32px}
.nav-menu,.nav-menu ul{list-style:none;margin:0;padding:0}
.front-page-empty{min-height:calc(100vh - var(--header-h));padding-top:var(--header-h)}
.tbc-empty-builder,.tbc-component-placeholder{color:var(--muted)}
.tbc-component-placeholder{padding:24px;border:1px dashed var(--line-strong);border-radius:12px;background:rgba(255,255,255,.02)}
.tbc-copy{color:var(--muted)}
.tbc-copy p:last-child{margin-bottom:0}
.tbc-media-text-image{min-height:560px;border-radius:var(--radius)}
.tbc-media-text.is-image-left .tbc-media-text-copy{order:2}
.tbc-media-text.is-image-left .tbc-media-text-image{order:1}
.tbc-narrow{max-width:900px}
.tbc-rich-section :is(h1,h2){--h-size:clamp(48px,5vw,76px);margin:18px 0 28px}
.tbc-rich-copy{font-size:18px;line-height:1.75;color:#c4cac2}
.tbc-rich-copy p:last-child{margin-bottom:0}
.tbc-faq-list{border-top:1px solid var(--line)}
.tbc-faq-item{border-bottom:1px solid var(--line)}
.tbc-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 0;font-weight:800;font-size:18px}
.tbc-faq-item summary::-webkit-details-marker{display:none}
.tbc-faq-item summary span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:20px;transition:.2s}
.tbc-faq-item[open] summary span{transform:rotate(45deg)}
.tbc-faq-item>div{max-width:850px;padding:0 60px 24px 0;color:var(--muted)}
.tbc-form-embed .gform_wrapper,.tbc-form-embed form{margin:0}
.tbc-form-embed input:not([type="checkbox"]):not([type="radio"]),.tbc-form-embed select,.tbc-form-embed textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#090b09;color:#fff;padding:14px 15px;min-height:50px}
.tbc-form-embed input[type="submit"],.tbc-form-embed button[type="submit"]{min-height:52px;padding:0 20px;border:0;border-radius:10px;background:var(--accent);color:#080a07;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.045em;cursor:pointer}
.price-card-grid h3{margin:14px 0 0;font-size:18px}

.footer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-menu li{margin:0;padding:0}
:root{--photo:none}

/* Core-only TBC form component */
.tbc-core-form{position:relative}
.tbc-honeypot{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* Lean Forms Builder in the form component: same look as the core form. Fields are full width; CSS class "half" puts two side by side. */
.tbc-lean-form .lfb-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tbc-lean-form .lfb-form>*{grid-column:1/-1;min-width:0}
.tbc-lean-form .lfb-form>.half{grid-column:auto}
.tbc-lean-form .lfb-form [hidden]{display:none!important}
.tbc-lean-form .lfb-form .lfb-field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.tbc-lean-form .lfb-form fieldset.lfb-field{display:block}
.tbc-lean-form .lfb-form .lfb-field>label,.tbc-lean-form .lfb-form .lfb-field>legend{display:block;margin:0;padding:0;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#dce0da}
.tbc-lean-form .lfb-form fieldset.lfb-field>legend{margin-bottom:12px}
.tbc-lean-form .lfb-form .lfb-required{color:var(--accent)}
.tbc-lean-form .lfb-form textarea{resize:vertical}
.tbc-lean-form .lfb-form .lfb-field [aria-invalid="true"],.tbc-lean-form .lfb-form .lfb-field [aria-invalid="true"]:focus{border-color:#ff8a8a;box-shadow:0 0 0 3px rgba(255,138,138,.2)}
.tbc-lean-form .lfb-form input[type="checkbox"],.tbc-lean-form .lfb-form input[type="radio"]{width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;accent-color:var(--accent)}
.tbc-lean-form .lfb-form .lfb-field>.lfb-choice{display:flex;gap:11px;align-items:flex-start;margin:0 0 10px;color:#c7cdc5;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;cursor:pointer}
.tbc-lean-form .lfb-form .lfb-field--checkbox{grid-template-columns:18px minmax(0,1fr);column-gap:11px;row-gap:4px;align-items:start}
.tbc-lean-form .lfb-form .lfb-field--checkbox>input{grid-column:1;grid-row:1}
.tbc-lean-form .lfb-form .lfb-field--checkbox>label{grid-column:2;grid-row:1;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);cursor:pointer}
.tbc-lean-form .lfb-form .lfb-field--checkbox>.lfb-help,.tbc-lean-form .lfb-form .lfb-field--checkbox>.lfb-error{grid-column:2}
.tbc-lean-form .lfb-form .lfb-help{display:block;margin:0;color:var(--muted);font-size:12px}
.tbc-lean-form .lfb-form .lfb-error{display:block;margin:0;color:#ff8a8a;font-size:12px;font-weight:700}
.tbc-lean-form .lfb-form .lfb-submit{justify-self:start;margin:6px 0 0;border:1px solid transparent}
.tbc-lean-form .lfb-form .lfb-status{margin:0;color:var(--accent);font-size:13px;font-weight:700}
.tbc-lean-form .lfb-form .lfb-status.lfb-status--error{color:#ff8a8a}

/* Form fields (core and Lean forms): lighter field, clear edge and focus ring on the dark card. */
.form-grid input:not([type="checkbox"]):not([type="radio"]),.form-grid select,.form-grid textarea,.tbc-form-embed input:not([type="checkbox"]):not([type="radio"]),.tbc-form-embed select,.tbc-form-embed textarea,.tbc-select-trigger{background-color:#1e231d;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:var(--text);transition:border-color .2s,box-shadow .2s}
.form-grid input:not([type="checkbox"]):not([type="radio"]):hover,.form-grid select:hover,.form-grid textarea:hover,.tbc-form-embed input:not([type="checkbox"]):not([type="radio"]):hover,.tbc-form-embed select:hover,.tbc-form-embed textarea:hover,.tbc-select-trigger:hover{border-color:rgba(255,255,255,.36)}
.form-grid input:not([type="checkbox"]):not([type="radio"]):focus,.form-grid select:focus,.form-grid textarea:focus,.tbc-form-embed input:not([type="checkbox"]):not([type="radio"]):focus,.tbc-form-embed select:focus,.tbc-form-embed textarea:focus,.tbc-select-trigger:focus-visible,.tbc-select.is-open .tbc-select-trigger{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(117,196,71,.22)}
.form-grid ::placeholder,.tbc-form-embed ::placeholder{color:#7f877e;opacity:1}
.form-grid input[type="checkbox"],.form-grid input[type="radio"],.tbc-form-embed input[type="checkbox"],.tbc-form-embed input[type="radio"]{accent-color:var(--accent)}
/* Without JavaScript the native select gets the same look and a theme chevron. */
.form-grid select,.tbc-form-embed select{-webkit-appearance:none;appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2375c447' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:18px}

/* Custom dropdown (site.js): the native select stays in the form for value and validation. */
.tbc-select{position:relative;min-width:0}
.form-grid .tbc-select-native,.tbc-form-embed .tbc-select-native{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;margin:0;padding:0;opacity:0!important;pointer-events:none!important}
.tbc-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:13px 15px;font:inherit;line-height:1.3;text-align:left;cursor:pointer}
.tbc-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbc-select-trigger.is-placeholder .tbc-select-value{color:#7f877e}
.tbc-select-chevron{flex:0 0 18px;width:18px;height:18px;color:var(--accent);transition:transform .2s}
.tbc-select.is-open .tbc-select-chevron{transform:rotate(180deg)}
.tbc-select-native[aria-invalid="true"]~.tbc-select-trigger{border-color:#ff8a8a;box-shadow:0 0 0 3px rgba(255,138,138,.2)}
.tbc-select-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;max-height:288px;overflow-y:auto;overscroll-behavior:contain;background:#171b17;border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.tbc-select-list[hidden]{display:none!important}
.tbc-select.is-up .tbc-select-list{top:auto;bottom:calc(100% + 6px)}
.tbc-select-option{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:11px 12px;border-radius:8px;color:#dce0da;line-height:1.3;cursor:pointer}
.tbc-select-option.is-active{background:rgba(255,255,255,.08);color:#fff}
.tbc-select-option[aria-selected="true"]{color:var(--accent);font-weight:700}
.tbc-select-option[aria-selected="true"]:after{content:"";flex:0 0 16px;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.tbc-select-chevron{transition:none}}
@media (max-width:860px){.tbc-select-trigger,.tbc-select-option{font-size:16px}}
@media (max-width:560px){
  .tbc-lean-form .lfb-form{grid-template-columns:minmax(0,1fr)}
  .tbc-lean-form .lfb-form .lfb-submit{justify-self:stretch;width:100%}
}

/* v0.5: adapt the static mobile design to native WordPress markup. */
:root{--tbc-admin-offset:0px}
body.admin-bar{--tbc-admin-offset:32px}
.admin-bar .site-header{top:var(--tbc-admin-offset)}
.tbc-submenu-toggle{display:none}

/* Homepage Hero on desktop follows the prototype's home hero. */
.page-home .landing-copy :is(h1,h2){--h-size:clamp(62px,6vw,86px);margin:26px 0 28px}
.page-home .landing-copy>.landing-intro{max-width:620px;color:#c2c8c0;font-size:18px;line-height:1.7}
@media (max-width:860px){
  /* The same existing Hero fields serve home and landing pages. */
  .page-home .landing-hero{min-height:max(660px,calc(100svh - var(--dock-h) - env(safe-area-inset-bottom)))}
  .page-home .landing-hero-bg{filter:saturate(.65) contrast(1.08)}
  .page-home .landing-hero-shade{background:linear-gradient(180deg,rgba(5,6,5,.35),rgba(5,6,5,.16) 25%,rgba(5,6,5,.75) 55%,#050605 100%),linear-gradient(90deg,rgba(5,6,5,.64),transparent 100%)}
  .page-home .landing-hero-inner{padding-top:calc(var(--header-h) + 92px);padding-bottom:26px}
  .page-home .landing-copy :is(h1,h2){--h-size:clamp(30px,9vw,68px);line-height:.98;letter-spacing:-.055em;margin:20px 0}
  .page-home .landing-copy>.landing-intro{max-width:500px;font-size:14px;line-height:1.65;color:#cbd0c7;margin-bottom:0}
  .landing-copy :is(h1,h2),.landing-stat,.metric-grid>div{overflow-wrap:anywhere}
  .hero-actions>.btn{white-space:normal;min-width:0}
  .tbc-media-text.is-image-left .tbc-media-text-copy,.tbc-media-text.is-image-left .tbc-media-text-image{order:initial}
  .tbc-media-text-image{min-height:340px}
  .tbc-rich-section :is(h1,h2){--h-size:clamp(34px,9.5vw,58px);line-height:.99;letter-spacing:-.055em;margin:16px 0 20px;overflow-wrap:anywhere}
  .tbc-rich-copy{font-size:17px;line-height:1.65;overflow-wrap:anywhere}
  .tbc-faq-item summary{font-size:16px;gap:16px;padding:20px 0}
  .tbc-faq-item summary span{flex:0 0 32px}
  .tbc-faq-item>div{padding:0 0 20px}
  .tbc-core-form>label,.tbc-core-form .span-2{min-width:0}
  .tbc-form-embed input:not([type="checkbox"]):not([type="radio"]),.tbc-form-embed select,.tbc-form-embed textarea{font-size:16px}
  .tbc-core-form input[type="hidden"]{display:none}
  .tbc-form-embed .checkbox input{flex:0 0 18px}
  .hours div{gap:16px}.hours div>*{min-width:0;overflow-wrap:anywhere}
  .cta-band-actions>.btn{min-width:0}
  .mobile-dock>.dock-cta{padding:8px 12px;min-width:0;overflow-wrap:anywhere}
  .mobile-dock>.dock-cta:after{content:"";flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat}
  .footer-menu{gap:0}
  .footer-grid a,.footer-grid span{overflow-wrap:anywhere}
  .tbc-builder-preview .tbc-preview-edit-tip{max-width:calc(100% - 24px)}
}
@media (max-width:782px){
  body.admin-bar{--tbc-admin-offset:46px}
}
@media (max-width:600px){
  /* Core makes the toolbar absolute here; keep the menu aligned while scrolling. */
  body.admin-bar #wpadminbar{position:fixed}
}
@media (max-width:359px){
  .page-home .landing-copy :is(h1,h2){--h-size:9vw}
}

/* Lightbox navigation between photos of one gallery */
.lightbox-stage{width:min(1100px,calc(100vw - 200px))}
.lightbox-nav{position:absolute;top:50%;z-index:1;width:52px;height:52px;display:grid;place-items:center;margin-top:-26px;border:1px solid var(--line-strong);border-radius:50%;background:#0d100d;color:var(--text);font-size:20px;cursor:pointer;transition:background .2s,border-color .2s}
.lightbox-nav:hover{border-color:var(--accent)}
.lightbox-prev{left:24px}
.lightbox-next{right:24px;background:var(--accent);border-color:var(--accent);color:#050605}
.lightbox.is-single .lightbox-nav{display:none}
/* Browsing slides the photos sideways (site.js): the leaving copy shares the grid cell, the screen edge clips both */
.lightbox{overflow:hidden}
.lightbox-stage>*{grid-area:1/1}
.lightbox-count{margin-right:12px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.lightbox-count:empty{display:none}

/* Tekst + video without a video: the poster photo fills the card */
.video-card>img{display:block;width:100%;min-height:480px;object-fit:cover;background:#0a0b0a}

@media (max-width:860px){
  .lightbox-stage{width:100%}
  .lightbox-nav{top:auto;bottom:max(16px,env(safe-area-inset-bottom));width:44px;height:44px;margin-top:0;font-size:18px}
  .lightbox-prev{left:20px}
  .lightbox-next{right:20px}
  .lightbox>p{padding:0 56px;text-align:center}
  .video-card>img{min-height:0;max-height:65svh}
}

/* Tagline under the heading (Intro + foto, Tekst + beeld), as in the design's detail pages. */
/* Lead under a heading: the same size and line height as the other lead texts, a little brighter than body text. */
.lead-accent{font-weight:500;color:var(--text);margin:0 0 22px}

/* Arrow icons: SVG instead of the ↗ character, which iOS shows as an emoji. */
:root{--icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tbc-icon-arrow{display:inline-block;flex:0 0 auto;width:1.05em;height:1.05em;margin-left:.3em;vertical-align:-.15em}
.tbc-nowrap{white-space:nowrap}
.mobile-dock>.dock-cta>.tbc-label{font-size:inherit;font-weight:inherit}
.btn .tbc-icon-arrow{width:1.25em;height:1.25em}

@media (max-width:860px){
  /* Intro + foto: the photo label moves to the top so it never runs under the price note. */
  .editorial-main .photo-label{top:16px;bottom:auto;left:16px;max-width:calc(100% - 32px)}
  /* Weekrooster: day cards in a horizontal swipe row, like the other card components. */
  .schedule-board[data-carousel]{gap:14px}
  .lead-accent{margin-bottom:16px}
  /* Button pairs share the row by label length, so "Gratis proefles ↗" fits on one line. */
  .hero-actions>.btn{flex:1 1 auto}
}

/* News cards (based on the related cards) */
.news-card{display:flex;flex-direction:column;color:inherit}
.news-card .related-media{height:220px}
.news-card-meta{font-variant-numeric:tabular-nums}
.news-card-placeholder{display:grid;place-items:center;background:radial-gradient(circle at 70% 30%,rgba(117,196,71,.16),transparent 55%),linear-gradient(145deg,#1a2513,#080a08)}
.news-card-placeholder span{font-family:var(--display);font-size:44px;letter-spacing:-.05em;color:var(--accent);opacity:.35}
.news-card h3{font-size:22px;line-height:1.05;margin:10px 0 12px;overflow-wrap:anywhere}
.news-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 22px}
.news-card b{margin-top:auto;color:var(--accent)}
.news-list-section .news-grid{row-gap:28px}
@media (max-width:1120px){.news-list-section .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pagination */
.tbc-pagination{margin-top:52px}
.tbc-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.tbc-pagination .page-numbers{min-width:48px;height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:10px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.tbc-pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.tbc-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#050605}
.tbc-pagination .page-numbers.dots{border-color:transparent;min-width:24px;padding:0}

/* News detail */
.news-hero .utility-hero-inner h1{font-size:clamp(44px,5.4vw,84px);max-width:1040px}
.news-back{color:inherit}
.news-back:hover{color:var(--accent)}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.news-meta>*+*:before{content:"";display:inline-block;width:5px;height:5px;margin-right:12px;vertical-align:middle;border-radius:50%;background:var(--accent)}
.news-lead{max-width:760px;margin:28px 0 0;color:#c2c8c0;font-size:20px;line-height:1.6}
.news-body{padding:64px 0 120px}
/* Article header with featured image: title and meta left, photo card right. */
.news-hero.has-image .news-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.news-hero.has-image .utility-hero-inner h1{font-size:clamp(40px,4.4vw,72px)}
.news-hero-media{margin:0}
.news-hero-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.news-hero-media figcaption{margin-top:12px;color:var(--muted);font-size:12px}
.news-content{max-width:760px;color:#c4cac2;font-size:18px;line-height:1.8;overflow-wrap:break-word}
.news-content>*{margin-top:0;margin-bottom:1.2em}
.news-content>:last-child{margin-bottom:0}
.news-content h2{font-size:clamp(32px,3.4vw,46px);line-height:1;color:var(--text);margin:1.6em 0 .55em}
.news-content h3{font-size:22px;line-height:1.2;color:var(--text);margin:1.5em 0 .4em}
.news-content strong{color:var(--text)}
.news-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.news-content ul,.news-content ol{padding-left:1.3em}
.news-content li{margin-bottom:.4em}
.news-content li::marker{color:var(--accent)}
.news-content blockquote{margin:1.8em 0;padding:4px 0 4px 26px;border-left:2px solid var(--accent);color:var(--text);font-size:22px;line-height:1.5}
.news-content blockquote p{margin:0}
.news-content blockquote cite{display:block;margin-top:10px;color:var(--muted);font-size:13px;font-style:normal}
.news-content img{max-width:100%;height:auto;border-radius:14px}
.news-content figure{margin:1.8em 0}
.news-content figcaption{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}
.news-content hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.news-footer{max-width:760px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}

@media (max-width:860px){
  .news-card .related-media{height:190px}
  .news-card h3{font-size:20px}
  .news-list-section .news-grid{grid-template-columns:minmax(0,1fr)}
  .tbc-pagination{margin-top:34px}
  .tbc-pagination .page-numbers{min-width:44px;height:44px;padding:0 12px}
  .news-hero .utility-hero-inner h1{font-size:clamp(32px,9vw,54px);line-height:1}
  .news-lead{margin-top:20px;font-size:16px}
  .news-body{padding:32px 0 64px}
  .news-hero.has-image .news-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .news-hero.has-image .utility-hero-inner h1{font-size:clamp(32px,9vw,54px)}
  .news-hero-media img{border-radius:16px}
  .news-content{font-size:16px;line-height:1.75}
  .news-content h2{font-size:clamp(28px,8vw,38px)}
  .news-content blockquote{font-size:18px;padding-left:18px}
  .news-footer{margin-top:40px;padding-top:24px}
  .news-footer .btn{width:100%}
}

/* Contact + kaart: OpenStreetMap embed in dark style. The map is not draggable
   (no scroll trap on phones); the iframe is larger than the panel so OSM's
   zoom buttons fall outside, and the attribution is shown in .map-credit. */
.map-visual.has-map{position:relative;overflow:hidden;isolation:isolate}
.map-frame{position:absolute;z-index:-3;top:-60px;left:-60px;width:calc(100% + 120px);height:calc(100% + 120px);border:0;pointer-events:none;filter:grayscale(1) invert(1) contrast(.9) brightness(1.18)}
.map-visual.has-map:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--accent);mix-blend-mode:color;opacity:.14;pointer-events:none}
.map-visual.has-map:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 50%,transparent 50%,rgba(5,6,5,.35) 100%);pointer-events:none}
.map-visual.has-map>.map-pin{position:relative;transform:translateY(calc(-50% - 26px))}
.map-visual.has-map>.map-pin:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;background:inherit;border-right:1px solid rgba(200,255,23,.4);border-bottom:1px solid rgba(200,255,23,.4);transform:rotate(45deg)}
.map-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(117,196,71,.28),0 0 26px 4px rgba(117,196,71,.6)}
.map-dot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);animation:tbc-map-pulse 2.4s ease-out infinite}
@keyframes tbc-map-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
.map-open{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(5,6,5,.82);color:var(--text);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.map-open:hover{border-color:var(--accent);color:var(--accent)}
.map-open span{font:inherit;color:inherit}
.map-visual .map-credit{position:absolute;right:12px;bottom:10px;font-size:10px;color:rgba(244,246,241,.55)}
.map-credit a{text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.map-dot:after{animation:none;opacity:0}}
@media (max-width:860px){
  .map-visual.has-map{min-height:360px}
  .map-open{left:12px;bottom:12px;min-height:44px}
}

/* Article components (news posts): a reading column; full-width components
   (CTA band, gallery, FAQ…) keep their own sections in between. */
.article-block{margin-bottom:32px}
.article-block .news-content>:first-child{margin-top:0}
.article-text>*{margin:0 0 1.2em}
.article-text>:last-child{margin-bottom:0}
.article-figure{max-width:760px;margin:0}
.article-figure.is-wide{max-width:none}
.article-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.article-figure figcaption{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.5}
.article-quote{margin:0}
.article-quote blockquote{margin:0}
.article-quote figcaption{margin-top:12px;padding-left:28px;color:var(--muted);font-size:13px}
.article-quote figcaption:before{content:"— "}
.article-video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius)}
.article-figure-empty{display:grid;place-items:center;min-height:220px;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);font-size:13px}
@media (max-width:860px){
  .article-block{margin-bottom:24px}
  .article-figure img,.article-video iframe{border-radius:16px}
}

/* Formatted body text (visual editor): headings, lists and links in body texts. */
.tbc-prose>*{margin-top:0;margin-bottom:1em}
.tbc-prose>:last-child{margin-bottom:0}
.article-text.tbc-prose>*{margin-bottom:1.2em}
.article-text.tbc-prose>:last-child{margin-bottom:0}
.tbc-prose h2,.tbc-prose h3,.tbc-prose h4{margin:1.6em 0 .55em;color:var(--text);overflow-wrap:anywhere}
.tbc-prose>:first-child{margin-top:0}
.tbc-prose h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.045em;text-transform:uppercase}
.tbc-prose h3{font-family:var(--body);font-size:clamp(19px,1.6vw,22px);font-weight:800;line-height:1.25;letter-spacing:-.01em;text-transform:none}
.tbc-prose h4{font-family:var(--body);font-size:13px;font-weight:900;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.tbc-prose ul,.tbc-prose ol{padding-left:1.35em}
.tbc-prose li{margin:.35em 0;padding-left:.25em}
.tbc-prose li>ul,.tbc-prose li>ol{margin:.35em 0 0}
.tbc-prose ul>li::marker{color:var(--accent)}
.tbc-prose ol>li::marker{color:var(--accent);font-weight:800}
.tbc-prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s}
.tbc-prose a:hover{color:var(--text)}
.tbc-prose strong,.tbc-prose b{color:var(--text);font-weight:700}
@media (prefers-reduced-motion:reduce){.tbc-prose a{transition:none}}

/* Balanced grids: every row fills the full width, whatever the number of cards.
   Rows of three on a 12-column grid: a remainder of two shares the last row (2 × 6),
   a remainder of one turns the last row into four (4 × 3) instead of leaving one card alone.
   Rows of two on a 6-column grid: an odd remainder turns the last row into three. */
@media (min-width:861px){
  .benefit-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .benefit-grid>*{grid-column:span 4}
  .benefit-grid>:is(:nth-last-child(2):nth-child(3n+1),:last-child:nth-child(3n+2)){grid-column:span 6}
  .benefit-grid>:is(:last-child:nth-child(3n+4),:nth-last-child(2):nth-child(3n+3),:nth-last-child(3):nth-child(3n+2),:nth-last-child(4):nth-child(3n+1)){grid-column:span 3}
  .benefit-grid>:only-child,.price-card-grid>:only-child,.discipline-grid>:only-child{grid-column:1/-1}
}
@media (min-width:1121px){
  .price-card-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .price-card-grid>*{grid-column:span 4}
  .price-card-grid>:is(:nth-last-child(2):nth-child(3n+1),:last-child:nth-child(3n+2)){grid-column:span 6}
  .price-card-grid>:is(:last-child:nth-child(3n+4),:nth-last-child(2):nth-child(3n+3),:nth-last-child(3):nth-child(3n+2),:nth-last-child(4):nth-child(3n+1)){grid-column:span 3}
  /* Media cards: a wide first card next to one normal card, then rows of three. */
  .discipline-grid>:is(:last-child:nth-child(3n+4),:nth-last-child(2):nth-child(3n+3)){grid-column:span 6}
  .discipline-grid>:is(:last-child:nth-child(3n+6),:nth-last-child(2):nth-child(3n+5),:nth-last-child(3):nth-child(3n+4),:nth-last-child(4):nth-child(3n+3)){grid-column:span 3}
  .discipline-grid>.discipline-large:nth-last-child(3){grid-column:1/-1}
  .discipline-grid>.discipline-large:nth-last-child(3)~*{grid-column:span 6}
}
@media (min-width:861px) and (max-width:1120px){
  .price-card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .price-card-grid>*{grid-column:span 3}
  .price-card-grid>:is(:last-child:nth-child(2n+3),:nth-last-child(2):nth-child(2n+2),:nth-last-child(3):nth-child(2n+1)){grid-column:span 2}
  /* Media cards: a full-width first card, then rows of two. */
  .discipline-grid>:is(:last-child:nth-child(2n+4),:nth-last-child(2):nth-child(2n+3),:nth-last-child(3):nth-child(2n+2)){grid-column:span 4}
  .discipline-grid>.discipline-large:nth-last-child(2),.discipline-grid>.discipline-large:nth-last-child(2)~*{grid-column:span 6}
}
/* Contact cards sit two by two; an odd last card takes the whole row. */
.contact-cards>:last-child:nth-child(odd){grid-column:1/-1}
/* Metrics always share one row on desktop; on mobile an odd last metric takes the whole row. */
@media (min-width:861px){
  .metric-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .metric-grid>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
  .metric-grid>div:nth-last-child(2):nth-child(even){border-bottom:1px solid var(--line)}
}

/* List cards: 1–4 cards with a heading and a checklist. One row on desktop (four cards
   become 2 × 2 on tablet), a swipeable carousel on mobile. A single card splits its list in two columns. */
:root{--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.list-card{display:flex;flex-direction:column;min-width:0;padding:34px;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel)}
.list-card-number{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}
.list-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(24px,2.2vw,30px);margin:18px 0 0}
.list-card-intro{color:var(--muted);font-size:15px;margin:12px 0 0}
.list-card-points{list-style:none;margin:22px 0 0;padding:0}
.list-card-points li{position:relative;padding:12px 0 12px 38px;border-top:1px solid var(--line);font-weight:700;line-height:1.45}
.list-card-points li:last-child{border-bottom:1px solid var(--line)}
.list-card-points li:before{content:"";position:absolute;left:0;top:11px;width:25px;height:25px;border-radius:50%;background:rgba(117,196,71,.15)}
.list-card-points li:after{content:"";position:absolute;left:6px;top:17px;width:13px;height:13px;background:var(--accent);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.list-card-note{margin:auto 0 0;padding-top:24px;color:var(--accent);font-weight:800;line-height:1.5}
.list-card:only-child .list-card-number{display:none}
.list-card:only-child .list-card-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.list-card:only-child .list-card-points li{border-top:0;border-bottom:1px solid var(--line)}
.list-card:only-child .list-card-points li:nth-child(-n+2){border-top:1px solid var(--line)}
.list-card.featured{border-color:var(--accent);background:var(--accent);color:var(--black)}
.list-card.featured :is(.list-card-number,h3,.list-card-note){color:var(--black)}
.list-card.featured .list-card-intro{color:rgba(2,3,2,.72)}
.list-card.featured .list-card-points li{border-color:rgba(2,3,2,.18)}
.list-card.featured .list-card-points li:before{background:var(--black)}
@media (min-width:861px){
  .list-card-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
}
@media (min-width:861px) and (max-width:1120px){
  .list-card-grid:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .list-card{padding:26px;border-radius:18px}
  .list-card-grid[data-carousel]>.list-card{flex-basis:min(82vw,340px)}
  .list-card h3{font-size:24px}
  .list-card:only-child .list-card-points{grid-template-columns:minmax(0,1fr)}
  .list-card:only-child .list-card-points li:nth-child(2){border-top:0}
}

/* Price cards: a Toelichting of several lines is a checklist with the list-card check, compact. */
.price-card-points{display:grid;gap:10px;margin:18px 0;padding:0;list-style:none}
.price-card-points li{position:relative;padding-left:32px;color:#dfe3dc;font-size:15px;line-height:22px}
.price-card-points li:before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(117,196,71,.15)}
.price-card-points li:after{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;background:var(--accent);-webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat}
.price-card-grid article.featured .price-card-points li{color:var(--black)}
.price-card-grid article.featured .price-card-points li:before{background:var(--black)}

/* 404: "4 [weight plate] 4". The green plate rolls in, the fours drop next to it with a thud,
   then the plate keeps rocking gently. Top spacing comes from the first-component rule. */
.not-found-hero{padding-bottom:110px;background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(117,196,71,.11),transparent 70%);overflow:hidden}
.not-found-hero.has-components{padding-bottom:0}
.not-found-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.not-found-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:.04em;padding:0 .1em .05em;font-family:var(--display);font-size:clamp(116px,23vw,300px);line-height:.78;letter-spacing:-.05em;color:var(--text);user-select:none}
.not-found-visual:after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 22%,var(--line-strong) 78%,transparent)}
.nf-digit{display:block;transform-origin:50% 100%}
.nf-plate{position:relative;display:block;flex:0 0 auto;width:.74em;height:.74em;margin:0 .02em .015em}
.nf-plate svg{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .06em .12em rgba(117,196,71,.22))}
.nf-plate-shadow{position:absolute;left:14%;right:14%;bottom:-.04em;height:.07em;border-radius:50%;background:rgba(0,0,0,.75);filter:blur(5px)}
.nf-plate-rim{fill:#5e9f39}
.nf-plate-face{fill:var(--accent)}
.nf-plate-groove{fill:none;stroke:rgba(2,3,2,.24);stroke-width:3}
.nf-plate-text{font-family:var(--body);font-weight:800;font-size:8.6px;letter-spacing:.16em;fill:rgba(2,3,2,.55)}
.nf-plate-kg{font-family:var(--display);font-size:13px;letter-spacing:.03em;text-anchor:middle;fill:var(--black)}
.nf-plate-hub{fill:#d6dbd3;stroke:#8d948b;stroke-width:3}
.nf-plate-hole{fill:var(--bg)}
.not-found-copy{max-width:640px;margin-top:52px}
.not-found-copy h1{--h-size:clamp(44px,5.2vw,74px);margin:18px 0 18px}
.not-found-copy p{color:var(--muted);margin:0 auto;max-width:520px}
.not-found-copy .hero-actions{justify-content:center}
@media (max-width:860px){
  .not-found-hero{padding-bottom:72px}
  .not-found-copy{margin-top:36px}
  .not-found-copy h1{--h-size:clamp(34px,10vw,52px)}
}
@media (prefers-reduced-motion:no-preference){
  .nf-plate{animation:nf-roll 1.2s cubic-bezier(.2,.75,.3,1) .15s both}
  .nf-plate svg{animation:nf-spin 1.2s cubic-bezier(.2,.75,.3,1) .15s both,nf-rock 5s ease-in-out 2.6s infinite}
  .nf-digit-left{animation:nf-drop .6s 1.05s both}
  .nf-digit-right{animation:nf-drop .6s 1.3s both}
  .not-found-visual{animation:nf-thud-a .32s ease-out 1.48s,nf-thud-b .32s ease-out 1.73s}
  .not-found-copy{animation:nf-rise .7s cubic-bezier(.2,.7,.3,1) 1.9s both}
}
@keyframes nf-roll{0%{transform:translateX(75vw)}80%{transform:translateX(-.05em)}100%{transform:none}}
@keyframes nf-spin{0%{transform:rotate(560deg)}80%{transform:rotate(-10deg)}100%{transform:none}}
@keyframes nf-rock{0%,100%{transform:none}50%{transform:rotate(-7deg)}}
@keyframes nf-drop{
  0%{transform:translateY(-1.5em);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.5)}
  25%{opacity:1}
  72%{transform:none;animation-timing-function:ease-out}
  84%{transform:scale(1.07,.9)}
  100%{transform:none;opacity:1}
}
@keyframes nf-thud-a{0%,100%{transform:none}30%{transform:translateY(6px)}65%{transform:translateY(-2px)}}
@keyframes nf-thud-b{0%,100%{transform:none}30%{transform:translateY(6px)}65%{transform:translateY(-2px)}}
@keyframes nf-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Aanbod-animatie: an explainer-style 16:9 "film" of 55.5 s that loops. Every scene runs on
   one shared timeline (--d) and is placed with an animation-delay in seconds:
   0 intro (plate + name) · 4.5 "Jouw club. Jouw ritme." + heartbeat · 8 "Wat wil jij?" + chips ·
   11.5 nine offers of 4.1 s, each with its own line illustration · 48.4 "Alles onder één dak." ·
   52.1 end card, fading to black for the loop.
   The dotted background is static on purpose: moving 1px dots shimmer.
   Keyframe percentages are generated from these seconds; change a time and all keyframes must
   be recalculated. The play/pause button (site.js) toggles .is-paused, which pauses every
   animation at once so the timeline stays in sync. Sizes are in cqw, so it scales like a video. Paused until in view (.reveal);
   with reduced motion only the end card shows. */
.film{--d:55.5s;position:relative;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;isolation:isolate;border:1px solid var(--card-line);border-radius:var(--radius);background:#050605;color:var(--text)}
.film:after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42))}
.film-scene{--dots:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/3cqw 3cqw;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:7cqw;background:var(--dots),#050605;clip-path:inset(0 0 100% 0)}
.film-line{display:block;overflow:hidden;margin-top:-.16em;padding:.16em 0 .05em}
.film-line>span{display:block}
.film svg{display:block;width:100%;height:auto;overflow:visible}

.film-intro{z-index:1;clip-path:none;flex-direction:row;align-items:center;justify-content:center;gap:4cqw;background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(117,196,71,.14),transparent 70%),var(--dots),#050605}
.film-plate{flex:0 0 auto;width:20cqw}
.film-plate svg{filter:drop-shadow(0 1.5cqw 3cqw rgba(117,196,71,.25))}
.film-intro-text{display:flex;flex-direction:column;font-family:var(--display);font-size:8.6cqw;line-height:.9;letter-spacing:-.05em;text-transform:uppercase}
.film-intro-b{color:var(--accent)}
.film-intro-sub{margin-top:1.6cqw;font-family:var(--body);font-size:max(10px,1.4cqw);font-weight:900;letter-spacing:.3em;color:var(--muted)}

.film-club{z-index:2;font-family:var(--display);font-size:11.5cqw;line-height:.9;letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap}
.film-club-b{color:var(--accent)}
.film-pulse{position:absolute;left:0;right:0;bottom:7cqw;height:9cqw;fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 .8cqw rgba(117,196,71,.6))}
.film-pulse polyline{stroke-dasharray:1;stroke-dashoffset:0}

.film-want{z-index:3}
.film-want-title{font-family:var(--display);font-size:10cqw;line-height:.9;letter-spacing:-.06em;text-transform:uppercase}
.film-want-title em{font-style:normal;color:var(--accent)}
.film-chips{display:flex;flex-wrap:wrap;gap:1.4cqw;margin-top:3.4cqw;max-width:80cqw}
.film-chip{padding:1.1cqw 2.2cqw;border:2px solid var(--accent);border-radius:999px;font-size:max(11px,2.1cqw);font-weight:800;color:var(--text);background:rgba(117,196,71,.08)}
.film-chip:nth-child(even){background:var(--accent);color:var(--black)}
.film-want-sub{margin-top:3cqw;font-size:max(12px,1.9cqw);font-weight:700;color:var(--muted)}

.film-offer{--start:calc(11.5s + var(--i) * 4.1s);z-index:calc(4 + var(--i));flex-direction:row;align-items:center;justify-content:space-between;gap:4cqw}
.film-offer.is-green{background:var(--accent);color:var(--black)}
.film-offer-text{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.film-offer-count{position:absolute;left:3cqw;bottom:-8cqw;font-family:var(--display);font-size:30cqw;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);will-change:transform;backface-visibility:hidden}
.film-offer.is-green .film-offer-count{-webkit-text-stroke-color:rgba(2,3,2,.14)}
.film-offer-label{margin-bottom:2.2cqw;font-size:max(10px,1.4cqw);font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.film-offer.is-green .film-offer-label{color:var(--black)}
.film-offer-title{font-family:var(--display);font-weight:400;font-size:7.2cqw;line-height:.88;letter-spacing:-.06em;text-transform:uppercase;transform-origin:0 100%}
.film-offer-fact{max-width:44cqw;margin-top:2.2cqw;font-size:max(12px,1.9cqw);font-weight:700;line-height:1.35;color:#c4cac2}
.film-offer.is-green .film-offer-fact{color:rgba(2,3,2,.75)}

/* Offer illustrations */
.film-art{--art-accent:var(--accent);position:relative;flex:0 0 27cqw;color:var(--text)}
.film-offer.is-green .film-art{--art-accent:#f4f6f1;color:var(--black)}
.film-art .ln{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.film-art .ln.ac{stroke:var(--art-accent)}
.film-art .ln.thin{stroke-width:3}
.film-art .fl{fill:currentColor}
.film-art .acf{fill:var(--art-accent)}
.film-art .tx{font-family:var(--display);fill:currentColor;letter-spacing:.02em}
.film-art .tx.acf{fill:var(--art-accent)}
.film-art .draw,.film-art .draw-late{stroke-dasharray:1;stroke-dashoffset:0}
.film-art .art-pop{transform-box:fill-box;transform-origin:50% 100%}
.film-art .art-shadow{fill:currentColor;opacity:.16;transform-box:fill-box;transform-origin:center}
.film-art .art-ring{fill:none;stroke:var(--art-accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;transform:rotate(-90deg);transform-origin:100px 106px}
.film-art .art-hand{transform-origin:100px 106px}
.film-art .belt{fill:none;stroke:currentColor;stroke-width:18}
.film-art .belt-tip{stroke:var(--art-accent);stroke-width:18}
.film-art .art-tails{transform-origin:100px 104px}
.film-art .art-runner{fill:none;stroke:var(--art-accent);stroke-width:11;stroke-linecap:round;stroke-dasharray:.06 .94;stroke-dashoffset:0}
.film-art .art-swing{transform-origin:100px 16px}
.film-art .art-impact,.film-art .art-hit{opacity:0;transform-box:fill-box;transform-origin:center}

.film-roof{z-index:20}
.film-rows{position:absolute;inset:-20% -10%;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;transform:rotate(-8deg)}
.film-row{display:flex;width:max-content;font-family:var(--display);font-size:7cqw;line-height:1;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.film-row span{padding-right:.5em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14)}
.film-row span:nth-child(4n+1){-webkit-text-stroke-color:rgba(117,196,71,.4)}
.film-roof-title{position:relative;align-self:flex-start;font-family:var(--display);font-weight:400;font-size:11cqw;line-height:.88;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 0 4cqw #050605}
.film-roof-b{color:var(--accent)}
.film .film-roof-shape{width:68cqw;margin:0 0 1.2cqw 5cqw;fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 .8cqw rgba(117,196,71,.5))}
.film-roof-shape polyline{stroke-dasharray:1;stroke-dashoffset:0}

.film-end{z-index:21;clip-path:none;align-items:center;text-align:center;background:radial-gradient(ellipse 55% 60% at 50% 45%,rgba(117,196,71,.16),transparent 70%),var(--dots),#050605}
.film-end-plate{width:10cqw;margin-bottom:2.2cqw}
.film-end-title{font-family:var(--display);font-weight:400;font-size:7cqw;line-height:.9;letter-spacing:-.05em;text-transform:uppercase}
.film-end-tagline{margin-top:1.4cqw;font-family:var(--display);font-size:3cqw;letter-spacing:-.03em;text-transform:uppercase;color:var(--accent)}
.film-end-pill{display:inline-flex;align-items:center;gap:1cqw;margin-top:2.4cqw;padding:1.1cqw 2.4cqw;border-radius:999px;background:var(--accent);color:var(--black);font-size:max(11px,1.6cqw);font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 0 rgba(117,196,71,.5)}
.film-end-pill .dot{background:var(--black);box-shadow:none}
.film-end-list{margin-top:2.2cqw;font-size:max(10px,1.2cqw);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.film-bug{position:absolute;top:2.6cqw;right:3cqw;z-index:50;display:inline-flex;align-items:center;gap:8px;font-size:max(9px,1cqw);font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.film-frames{position:absolute;inset:0}
.film-toggle{position:absolute;left:2.4cqw;bottom:calc(2.4cqw + 3px);z-index:60;display:none;place-items:center;width:max(38px,3.8cqw);height:max(38px,3.8cqw);padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(5,6,5,.55);color:var(--text);cursor:pointer;opacity:.75;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .2s,border-color .2s,background .2s}
.js .film-toggle{display:grid}
.film-toggle:hover,.film-toggle:focus-visible{opacity:1;border-color:var(--accent)}
.film-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.film .film-toggle svg{width:44%;height:44%;fill:currentColor}
.film .film-icon-play,.film.is-paused .film-icon-pause{display:none}
.film.is-paused .film-icon-play{display:block}
.film.is-paused .film-toggle{opacity:1;background:#050605;border:2px solid var(--accent);color:var(--accent)}
.film-progress{position:absolute;left:0;bottom:0;z-index:50;width:100%;height:3px;background:rgba(244,246,241,.85);transform-origin:0 50%;transform:scaleX(1)}

@media (prefers-reduced-motion:no-preference){
  .film-plate{animation:film-plate var(--d) cubic-bezier(.2,.8,.25,1) infinite both}
  .film-intro-a{animation:film-intro-a var(--d) cubic-bezier(.2,.8,.2,1) infinite both}
  .film-intro-b{animation:film-intro-b var(--d) cubic-bezier(.2,.8,.2,1) infinite both}
  .film-intro-sub{animation:film-intro-sub var(--d) ease-out infinite both}
  .film-club{animation:film-club var(--d) cubic-bezier(.7,0,.2,1) 4.5s infinite both}
  .film-club-a{animation:film-club-a var(--d) cubic-bezier(.2,.8,.2,1) 4.5s infinite both}
  .film-club-b{animation:film-club-b var(--d) cubic-bezier(.2,.8,.2,1) 4.5s infinite both}
  .film-pulse polyline{animation:film-pulse var(--d) cubic-bezier(.4,0,.2,1) 4.5s infinite both}
  .film-want{animation:film-want var(--d) cubic-bezier(.7,0,.2,1) 8s infinite both}
  .film-want-title{animation:film-want-title var(--d) cubic-bezier(.2,.8,.2,1) 8s infinite both}
  .film-chip{animation:film-chip var(--d) cubic-bezier(.2,.8,.25,1) calc(8s + var(--n) * .3s) infinite both}
  .film-want-sub{animation:film-want-sub var(--d) ease-out 8s infinite both}
  .film-offer{animation:film-offer-up var(--d) cubic-bezier(.7,0,.2,1) var(--start) infinite both}
  .film-offer:not(.is-green){animation-name:film-offer-side}
  .film-offer-label{animation:film-offer-label var(--d) ease-out var(--start) infinite both}
  .film-offer-title{animation:film-offer-title var(--d) cubic-bezier(.2,.8,.2,1) var(--start) infinite both}
  .film-offer-fact{animation:film-offer-fact var(--d) ease-out var(--start) infinite both}
  .film-offer-count{animation:film-offer-count var(--d) linear var(--start) infinite both}
  .film-art{animation:film-art-in var(--d) cubic-bezier(.2,.8,.25,1) var(--start) infinite both}
  .film-art .draw{animation:art-draw var(--d) cubic-bezier(.45,0,.2,1) var(--start) infinite both}
  .film-art .draw-late{animation:art-draw-late var(--d) cubic-bezier(.45,0,.2,1) var(--start) infinite both}
  .film-art .art-pop{animation:art-pop var(--d) cubic-bezier(.2,.8,.25,1) calc(var(--start) + var(--n, 0) * .18s) infinite both}
  .film-art .art-fade{animation:art-fade var(--d) ease-out var(--start) infinite both}
  .film-art .art-slide{animation:art-slide var(--d) cubic-bezier(.2,.8,.25,1) var(--start) infinite both}
  /* Looping actions, visible while their scene is on screen */
  .film-art .art-lift{animation:art-lift 1.8s ease-in-out infinite}
  .film-art .art-shadow{animation:art-shadow 1.8s ease-in-out infinite}
  .film-art .art-ring{animation:art-ring 2.4s linear infinite}
  .film-art .art-hand{animation:art-spin 2.4s linear infinite}
  .film-art .art-punch{animation:art-punch 1.4s cubic-bezier(.3,0,.2,1) infinite}
  .film-art .art-impact{animation:art-impact 1.4s ease-out infinite}
  .film-art .art-bob{animation:art-bob 1.1s ease-in-out var(--b, 0s) infinite}
  .film-art .art-tails{animation:art-tails 2.2s ease-in-out infinite}
  .film-art .art-runner{animation:art-runner 2.6s linear infinite}
  .film-art .art-swing{animation:art-swing 2.2s ease-in-out infinite}
  .film-art .art-hit{animation:art-hit 2.2s ease-out infinite}
  .film-art .art-press{animation:art-press 1.8s ease-in-out infinite}
  .film-roof{animation:film-roof var(--d) cubic-bezier(.7,0,.2,1) 48.4s infinite both}
  .film-roof-a{animation:film-roof-a var(--d) cubic-bezier(.2,.8,.2,1) 48.4s infinite both}
  .film-roof-b{animation:film-roof-b var(--d) cubic-bezier(.2,.8,.2,1) 48.4s infinite both}
  .film-roof-shape polyline{animation:film-roof-shape var(--d) cubic-bezier(.45,0,.2,1) 48.4s infinite both}
  .film-row{animation:film-row 12s linear infinite}
  .film-row:nth-child(2){animation-duration:16s;animation-direction:reverse}
  .film-end{animation:film-end var(--d) ease 52.1s infinite both}
  .film-end-plate{animation:film-end-plate var(--d) cubic-bezier(.2,.8,.25,1) 52.1s infinite both}
  .film-end-plate svg{animation:art-spin 8s linear infinite}
  .film-end-title{animation:film-end-a var(--d) ease-out 52.1s infinite both}
  .film-end-tagline{animation:film-end-b var(--d) ease-out 52.1s infinite both}
  .film-end-pill{animation:film-end-pill var(--d) cubic-bezier(.2,.8,.25,1) 52.1s infinite both,film-glow 1.6s ease-out infinite}
  .film-end-list{animation:film-end-c var(--d) ease-out 52.1s infinite both}
  .film-progress{animation:film-progress var(--d) linear infinite both}
  .js .film:not(.is-visible),.js .film:not(.is-visible) *,.film.is-paused,.film.is-paused *{animation-play-state:paused}
}
@keyframes film-plate{0%{transform:translateX(75cqw) rotate(560deg);opacity:1}2.252%{transform:translateX(-.8cqw) rotate(-10deg)}2.703%{transform:none}8.919%{transform:none;opacity:1}8.955%,100%{transform:none;opacity:0}}
@keyframes film-intro-a{0%,2.162%{transform:translateY(110%);opacity:1}3.063%,8.919%{transform:none;opacity:1}8.955%,100%{transform:none;opacity:0}}
@keyframes film-intro-b{0%,2.613%{transform:translateY(110%);opacity:1}3.514%,8.919%{transform:none;opacity:1}8.955%,100%{transform:none;opacity:0}}
@keyframes film-intro-sub{0%,3.964%{transform:translateY(.5em);opacity:0}4.775%,8.919%{transform:none;opacity:1}8.955%,100%{opacity:0}}
@keyframes film-club{0%{clip-path:inset(0 100% 0 0);visibility:visible}0.721%,7.027%{clip-path:inset(0);visibility:visible}7.063%,100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes film-club-a{0%,0.541%{transform:translateY(110%);opacity:1}1.441%,100%{transform:none;opacity:1}}
@keyframes film-club-b{0%,1.802%{transform:translateY(110%);opacity:1}2.703%,100%{transform:none;opacity:1}}
@keyframes film-pulse{0%,2.342%{stroke-dashoffset:1}5.405%,100%{stroke-dashoffset:0}}
@keyframes film-want{0%{clip-path:inset(100% 0 0 0);visibility:visible}0.721%,7.027%{clip-path:inset(0);visibility:visible}7.063%,100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes film-want-title{0%,0.541%{transform:translateY(110%);opacity:1}1.441%,100%{transform:none;opacity:1}}
@keyframes film-chip{0%,1.802%{transform:scale(.4);opacity:0}2.342%{transform:scale(1.08);opacity:1}2.559%,100%{transform:none;opacity:1}}
@keyframes film-want-sub{0%,4.685%{transform:translateY(.5em);opacity:0}5.495%,100%{transform:none;opacity:1}}
@keyframes film-offer-up{0%{clip-path:inset(100% 0 0 0);visibility:visible}0.721%,8.108%{clip-path:inset(0);visibility:visible}8.144%,100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes film-offer-side{0%{clip-path:inset(0 0 0 100%);visibility:visible}0.721%,8.108%{clip-path:inset(0);visibility:visible}8.144%,100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes film-offer-label{0%,0.45%{transform:translateY(.5em);opacity:0}1.261%,100%{transform:none;opacity:1}}
@keyframes film-offer-title{0%,0.631%{transform:translateY(30%) skewY(4deg);opacity:0}1.532%,100%{transform:none;opacity:1}}
@keyframes film-offer-fact{0%,1.351%{transform:translateY(.5em);opacity:0}2.162%,100%{transform:none;opacity:1}}
@keyframes film-offer-count{0%{transform:translate3d(8%,0,0)}8.108%,100%{transform:translate3d(-4%,0,0)}}
@keyframes film-art-in{0%,0.36%{transform:translateY(6%) scale(.92);opacity:0}1.081%,100%{transform:none;opacity:1}}
@keyframes art-draw{0%,0.541%{stroke-dashoffset:1}2.342%,100%{stroke-dashoffset:0}}
@keyframes art-draw-late{0%,1.802%{stroke-dashoffset:1}3.063%,100%{stroke-dashoffset:0}}
@keyframes art-pop{0%,1.081%{transform:scale(0)}1.622%{transform:scale(1.12)}1.892%,100%{transform:none}}
@keyframes art-fade{0%,1.802%{opacity:0}2.523%,100%{opacity:1}}
@keyframes art-slide{0%,1.261%{transform:translateX(var(--from));opacity:0}2.072%,100%{transform:none;opacity:1}}
@keyframes film-roof{0%{clip-path:inset(100% 0 0 0);visibility:visible}0.721%,7.568%{clip-path:inset(0);visibility:visible}7.604%,100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes film-roof-a{0%,0.631%{transform:translateY(110%);opacity:1}1.532%,100%{transform:none;opacity:1}}
@keyframes film-roof-b{0%,1.261%{transform:translateY(110%);opacity:1}2.162%,100%{transform:none;opacity:1}}
@keyframes film-roof-shape{0%,1.982%{stroke-dashoffset:1}3.423%,100%{stroke-dashoffset:0}}
@keyframes film-end{0%{opacity:0}0.901%,5.405%{opacity:1}6.126%,100%{opacity:0}}
@keyframes film-end-plate{0%{transform:scale(.4) rotate(-90deg);opacity:0}1.081%,100%{transform:none;opacity:1}}
@keyframes film-end-a{0%,0.721%{transform:translateY(.5em);opacity:0}1.532%,100%{transform:none;opacity:1}}
@keyframes film-end-b{0%,1.441%{transform:translateY(.5em);opacity:0}2.252%,100%{transform:none;opacity:1}}
@keyframes film-end-pill{0%,2.162%{transform:scale(.6);opacity:0}2.703%{transform:scale(1.06);opacity:1}2.973%,100%{transform:none;opacity:1}}
@keyframes film-end-c{0%,2.883%{transform:translateY(.5em);opacity:0}3.694%,100%{transform:none;opacity:1}}
@keyframes film-row{to{transform:translateX(-50%)}}
@keyframes film-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes film-glow{0%{box-shadow:0 0 0 0 rgba(117,196,71,.55)}100%{box-shadow:0 0 0 2.4cqw rgba(117,196,71,0)}}
@keyframes art-spin{to{transform:rotate(360deg)}}
@keyframes art-lift{0%,100%{transform:translateY(14px)}50%{transform:translateY(-16px)}}
@keyframes art-shadow{0%,100%{transform:scaleX(1);opacity:.2}50%{transform:scaleX(.7);opacity:.08}}
@keyframes art-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes art-punch{0%,55%,100%{transform:translateX(-14px)}68%{transform:translateX(18px)}80%{transform:translateX(10px)}}
@keyframes art-impact{0%,62%{opacity:0;transform:scale(.6)}72%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1.15)}}
@keyframes art-bob{0%,100%{transform:none}50%{transform:translateY(-8px)}}
@keyframes art-tails{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
@keyframes art-runner{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes art-swing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes art-hit{0%,8%{opacity:0;transform:scale(.6)}16%{opacity:1;transform:scale(1)}34%,100%{opacity:0;transform:scale(1.1)}}
@keyframes art-press{0%,100%{transform:translateY(10px)}50%{transform:translateY(-26px)}}
/* Phones: square and edge to edge; offers stack the illustration above the text. */
@media (prefers-reduced-motion:reduce){.js .film-toggle{display:none}}
@media (max-width:600px){
  .film{aspect-ratio:1/1;margin-inline:calc(-1*var(--gutter));border-radius:0;border-inline:0}
  .film-scene{padding:6cqw}
  .film-intro{flex-direction:column;gap:5cqw}
  .film-plate{width:28cqw}
  .film-intro-text{align-items:center;font-size:12cqw;text-align:center}
  .film-club{font-size:12cqw}
  .film-pulse{bottom:10cqw;height:14cqw}
  .film-want-title{font-size:13cqw}
  .film-chips{gap:2cqw;margin-top:5cqw}
  .film-chip{padding:1.8cqw 3.4cqw;font-size:3.6cqw}
  .film-want-sub{font-size:3.6cqw}
  .film-offer{flex-direction:column-reverse;align-items:flex-start;justify-content:center;gap:5cqw}
  .film-art{flex-basis:auto;width:36cqw}
  .film-offer-title{font-size:12cqw}
  .film-offer-label{margin-bottom:3cqw}
  .film-offer-fact{max-width:none;font-size:3.6cqw}
  .film-offer-count{left:auto;right:3cqw;bottom:-12cqw;font-size:52cqw}
  .film-roof-title{font-size:11cqw}
  .film .film-roof-shape{width:66cqw;margin-left:6cqw}
  .film-row{font-size:10cqw}
  .film-end-plate{width:16cqw}
  .film-end-title{font-size:10cqw}
  .film-end-tagline{font-size:5cqw}
  .film-end-pill{padding:2cqw 4cqw;font-size:3.4cqw}
  .film-end-list{line-height:1.6;font-size:2.6cqw}
}

/* Keuzehulp: one question at a time with large answer tiles, then the best matching result
   (primary card + up to two alternatives). site.js runs it; without JavaScript only the results
   show, as a plain overview. */
.flow-problems{margin-bottom:24px;padding:16px 20px;border:1px solid #e5484d;border-radius:12px;background:rgba(229,72,77,.1);color:#ffd6d7;font-size:14px}
.flow-problems ul{margin:8px 0 0;padding-left:18px}
.flow-panel{display:none;padding:clamp(24px,4vw,48px);border:1px solid var(--card-line);border-radius:var(--radius);background:radial-gradient(ellipse 55% 60% at 100% 0%,rgba(117,196,71,.1),transparent 70%),var(--panel)}
.js .flow-panel{display:block}
.flow-bar{display:flex;align-items:center;gap:16px;min-height:40px;margin-bottom:28px}
.flow-back,.flow-restart{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--text);font:inherit;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.flow-back:hover,.flow-restart:hover{border-color:var(--accent);color:var(--accent)}
.flow-back:focus-visible,.flow-restart:focus-visible,.flow-option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.flow-count{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.flow-progress{flex:1;height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.08)}
.flow-progress span{display:block;width:6%;height:100%;border-radius:inherit;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.flow-trail,.flow-summary{display:flex;flex-wrap:wrap;gap:8px}
.flow-trail{margin:-10px 0 24px}
.flow-trail:empty,.flow-summary:empty{display:none}
.flow-trail span,.flow-summary span{padding:6px 12px;border-radius:999px;background:rgba(117,196,71,.12);color:var(--accent);font-size:12px;font-weight:800}
.flow-question{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,56px);line-height:.95;letter-spacing:-.04em;text-transform:uppercase;outline:0}
.flow-hint{max-width:620px;margin:12px 0 0;color:var(--muted)}
/* Tiles always fill their rows: 3 per row on a 12-column grid, 2 and 4/8 side by side,
   5 = 3 + 2 wide, 7 = 4 + 3. */
.flow-options{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:32px}
.flow-option{grid-column:span 4}
.flow-options[data-count="1"] .flow-option{grid-column:1/-1}
.flow-options[data-count="2"] .flow-option,.flow-options[data-count="5"] .flow-option:nth-child(n+4){grid-column:span 6}
.flow-options:is([data-count="4"],[data-count="7"],[data-count="8"]) .flow-option{grid-column:span 3}
.flow-options[data-count="7"] .flow-option:nth-child(n+5){grid-column:span 4}
.flow-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:184px;padding:22px;border:1px solid var(--card-line);border-radius:18px;background:rgba(255,255,255,.02);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s}
.flow-option:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(117,196,71,.06)}
.flow-option-key{position:absolute;top:18px;right:20px;color:var(--muted-2);font-size:10px;font-weight:900;letter-spacing:.14em}
.flow-option-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(117,196,71,.12);color:var(--accent);transition:background .2s,color .2s}
.flow-option-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-option-label{margin-top:auto;padding-right:24px;font-family:var(--display);font-size:clamp(20px,1.7vw,26px);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.flow-option-text{color:var(--muted);font-size:14px;line-height:1.45}
.flow-option-arrow{position:absolute;right:20px;bottom:22px;color:var(--accent);opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s}
.flow-option-arrow svg{display:block;width:18px;height:18px}
.flow-option:hover .flow-option-arrow{opacity:1;transform:none}
.flow-option.is-chosen{border-color:var(--accent);background:var(--accent);color:var(--black);transform:none}
.flow-option.is-chosen :is(.flow-option-key,.flow-option-text){color:rgba(2,3,2,.65)}
.flow-option.is-chosen .flow-option-icon{background:rgba(2,3,2,.12);color:var(--black)}
.flow-option.is-chosen .flow-option-arrow{color:var(--black);opacity:1;transform:none}

.flow-result-head{display:none;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:22px}
.js .flow-result-head{display:flex}
.flow-result-head .eyebrow{margin-right:auto}
.flow-result-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.flow-result{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel)}
.flow-result-photo{aspect-ratio:16/10;background:var(--photo) center/cover no-repeat,#0b0d0b}
.flow-result-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:26px}
.flow-result-label{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.flow-result-title{margin:12px 0 0;font-family:var(--display);font-weight:400;font-size:28px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase;outline:0}
.flow-result-text{margin:14px 0 0;color:#c4cac2}
.flow-result .hero-actions{margin-top:auto;padding-top:22px}
.flow-alt-heading{grid-column:1/-1;order:1;margin-top:18px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.flow-restart{display:none;margin-top:24px}
.js .flow-restart{display:inline-flex}
.js .flow:not(.is-done) .flow-results,.js .flow.is-done .flow-panel{display:none}
.js .flow-result-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.js .flow-result{display:none}
.js .flow-result.is-primary{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);order:0;border-color:var(--accent);box-shadow:0 30px 80px rgba(117,196,71,.1)}
.js .flow-result.is-primary:not(:has(.flow-result-photo)){grid-template-columns:minmax(0,1fr)}
.js .flow-result.is-primary .flow-result-photo{aspect-ratio:auto;min-height:340px}
.js .flow-result.is-primary .flow-result-body{justify-content:center;padding:clamp(28px,4vw,52px)}
.js .flow-result.is-primary .flow-result-title{font-size:clamp(36px,4.6vw,64px)}
.js .flow-result.is-primary .flow-result-text{max-width:520px;font-size:17px;line-height:1.65}
.js .flow-result.is-alt{display:flex;order:2}
.js .flow-result.is-alt .flow-result-photo,.js .flow-result.is-alt .btn-secondary{display:none}
.js .flow-result-list[data-alts="1"] .flow-result.is-alt{grid-column:1/-1}
@media (prefers-reduced-motion:no-preference){
  .flow-step.is-entering{animation:flow-in .45s cubic-bezier(.2,.8,.2,1)}
  .flow-step.is-entering.is-back{animation-name:flow-in-back}
  .flow-step.is-entering .flow-option{animation:flow-pop .45s cubic-bezier(.2,.8,.25,1) calc(var(--k,0) * 60ms + 80ms) both}
  .flow.is-done .flow-results{animation:flow-rise .6s cubic-bezier(.2,.8,.2,1)}
  .flow.is-done .flow-result.is-alt{animation:flow-rise .6s cubic-bezier(.2,.8,.2,1) .15s both}
}
@keyframes flow-in{from{opacity:0;transform:translateX(32px)}}
@keyframes flow-in-back{from{opacity:0;transform:translateX(-32px)}}
@keyframes flow-pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes flow-rise{from{opacity:0;transform:translateY(20px)}}
@media (min-width:861px) and (max-width:1120px){
  .flow-options:is([data-count="4"],[data-count="7"],[data-count="8"]) .flow-option,.flow-options[data-count="7"] .flow-option:nth-child(n+5){grid-column:span 6}
  .flow-options[data-count="7"] .flow-option:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  .flow-bar{gap:12px;margin-bottom:22px}
  .flow-question{font-size:clamp(28px,8vw,40px)}
  .flow-options{gap:10px;margin-top:24px}
  .flow-options .flow-option,.flow-options[data-count] .flow-option:nth-child(n){grid-column:1/-1}
  .flow-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon label arrow" "icon text arrow";align-items:center;column-gap:14px;row-gap:4px;min-height:0;padding:16px 18px}
  .flow-option:hover{transform:none}
  .flow-option-key{display:none}
  .flow-option-icon{grid-area:icon;width:42px;height:42px}
  .flow-option-label{grid-area:label;margin:0;padding:0;font-size:19px}
  .flow-option-text{grid-area:text;font-size:13px}
  .flow-option-arrow{grid-area:arrow;position:static;opacity:1;transform:none}
  .flow-result-list,.js .flow-result-list{grid-template-columns:minmax(0,1fr)}
  .js .flow-result.is-primary{grid-template-columns:minmax(0,1fr)}
  .js .flow-result.is-primary .flow-result-photo{min-height:220px}
  .flow-result-body{padding:22px}
}

/* Opening hours: live open/closed pill next to the logo, with a week overview. */
.open-status{position:relative;--status:#e5484d;--status-ring:rgba(229,72,77,.2)}
.open-status.is-open{--status:var(--accent);--status-ring:rgba(117,196,71,.22)}
.open-status-toggle{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:rgba(5,6,5,.5);color:var(--text);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s}
.open-status-toggle:hover,.open-status.is-expanded .open-status-toggle{border-color:var(--line-strong);background:rgba(255,255,255,.04)}
.open-status-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.open-status-dot{position:relative;flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--status);box-shadow:0 0 0 3px var(--status-ring)}
.open-status.is-open .open-status-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--status);animation:open-status-pulse 2.4s ease-out infinite}
@keyframes open-status-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
.open-status-short{display:none}
.open-status-detail{color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:none;font-size:12px}
.open-status-detail:empty{display:none}
.open-status-panel{position:absolute;z-index:5;top:calc(100% + 14px);left:0;width:300px;padding:18px 18px 14px;background:#0b0e0b;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.open-status-panel>strong{display:block;margin-bottom:8px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.open-status-week{margin:0}
.open-status-week>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.open-status-week>div:last-child{border-bottom:0}
.open-status-week dt{color:var(--muted)}
.open-status-week dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.open-status-week .is-today dt,.open-status-week .is-today dd{color:var(--text);font-weight:800}
.open-status-week .is-today dt:before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-radius:50%;background:var(--accent)}
.open-status-exceptions{margin-top:10px;padding-top:12px;border-top:1px solid var(--line-strong)}
.open-status-exceptions>span{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.open-status-exceptions ul{margin:6px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.open-status-exceptions li{padding:3px 0}.open-status-exceptions b{color:var(--text);font-weight:700}
@media (max-width:1279px){.open-status-detail{display:none}}
@media (max-width:1023px){
  .header-shell{gap:10px}
  .open-status{margin-left:auto}
  .open-status-toggle{min-height:40px;padding:0 12px}
  .open-status-panel{position:fixed;top:calc(var(--header-h) + var(--tbc-admin-offset) + 6px);left:auto;right:24px;width:min(340px,calc(100vw - 48px))}
}
@media (max-width:1023px) and (min-width:640px){.open-status-detail{display:inline}}
@media (max-width:479px){
  .open-status-label{display:none}.open-status-short{display:inline}
  .open-status-toggle{gap:7px;padding:0 11px;font-size:10px}
}
@media (max-width:359px){
  .open-status-short{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .open-status-toggle{width:40px;padding:0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.open-status.is-open .open-status-dot:after{animation:none;opacity:0}}

/* Knoppen & plaatsing (TBC instellingen): call buttons and a mobile bar with a variable number of items. */
.header-phone{display:inline-flex;align-items:center;gap:7px}
.header-phone svg,.nav-call svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
@media (max-width:860px){
  .mobile-dock>.dock-icon{flex:0 0 54px;min-width:0}
  .mobile-dock>.dock-icon>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-dock:not(:has(.dock-cta))>.dock-icon{flex:1 1 0}
  .mobile-dock>.dock-cta{flex:1 1 auto;min-width:0;min-height:56px;gap:10px}
  .mobile-dock>.dock-call svg{color:var(--accent)}
}
@media (max-width:359px){.mobile-dock>.dock-icon{flex-basis:46px}}

/* Mobile bar hides while scrolling down and slides back in when scrolling up (site.js). */
@media (max-width:860px){
  .mobile-dock{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .mobile-dock.is-hidden{transform:translateY(calc(100% + 1px))}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.mobile-dock{transition:none}}

/* Menu: one fold-out menu at every width, opened with the "Menu" button in the header.
   Mobile: one column. Desktop (≥ 1024 px): big links left, extra links, opening hours,
   contact and buttons in a column on the right. */
.menu-toggle{display:flex;align-items:center;justify-content:center;gap:12px;width:auto;min-width:94px;height:44px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(5,6,5,.5);cursor:pointer;transition:border-color .2s}
.menu-label{font-size:11px;font-weight:800;letter-spacing:.04em}
.site-nav{position:fixed;inset:var(--header-h) 0 0;width:100%;height:calc(100dvh - var(--header-h));justify-self:stretch;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:22px max(24px,calc((100vw - 720px)/2)) calc(28px + env(safe-area-inset-bottom));background:#080a08;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .22s ease,transform .28s ease,visibility .28s;isolation:isolate}
.site-nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.nav-links{display:flex;flex-direction:column}
.nav-link,.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:clamp(23px,6.5vw,36px);letter-spacing:-.045em;text-align:left;white-space:normal;line-height:1.15;color:#f4f6f1}
.nav-link:after,.nav-group:after,.nav-group:before{display:none}
.nav-link{justify-content:flex-start}
.nav-link.is-active,.nav-group.is-active>.nav-group-toggle{color:var(--accent)}
.nav-link.is-active:after{content:"";position:static;display:block;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--accent)}
.nav-group-toggle{justify-content:flex-start}
.nav-group-toggle>span{margin-left:auto;font-family:var(--body);font-size:26px;font-weight:400;transition:transform .2s;color:var(--accent)}
.nav-group.is-open .nav-group-toggle>span{transform:rotate(45deg)}
.nav-dropdown{position:static;transform:none!important;min-width:0;padding:8px 0 10px;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;visibility:visible;display:none}
.nav-group.is-open .nav-dropdown{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.nav-dropdown a{display:flex;align-items:center;min-height:48px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--line);border-radius:0}
.nav-footer{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;padding-top:28px;margin-top:auto}
.nav-footer .btn{padding-inline:12px;min-height:52px;width:100%;font-size:11px;border-radius:12px}
.site-nav{top:calc(var(--header-h) + var(--tbc-admin-offset));height:calc(100dvh - var(--header-h) - var(--tbc-admin-offset))}
.nav-menu{display:block;width:100%}
.nav-menu>li{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;border-bottom:1px solid var(--line)}
.nav-menu>li:before{display:none}
.nav-menu>li>a{grid-column:1/-1;display:flex;align-items:center;min-height:52px;padding:13px 0;border:0;font-family:var(--body);text-transform:uppercase;font-size:clamp(23px,6.5vw,36px);font-weight:800;letter-spacing:-.045em;line-height:1.15;white-space:normal;overflow-wrap:anywhere;color:#f4f6f1}
.js .nav-menu>.menu-item-has-children>a{grid-column:1}
.nav-menu>li>a:after{display:none}
.nav-menu>.current-menu-item>a,.nav-menu>.current_page_item>a,.nav-menu>.current-menu-ancestor>a{color:var(--accent)}
.nav-menu>.current-menu-item>a:after,.nav-menu>.current_page_item>a:after{content:"";position:static;display:block;flex:0 0 7px;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--accent)}
.js .tbc-submenu-toggle{display:flex;grid-column:2;justify-content:center;align-self:stretch;align-items:center;width:44px;min-height:52px;padding:0;border:0;background:transparent;color:var(--accent)}
.tbc-submenu-toggle:before{display:none}
.tbc-submenu-toggle>span{margin:0}
.nav-menu .sub-menu{grid-column:1/-1;position:static;transform:none!important;min-width:0;margin:0;padding:8px 0 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;visibility:visible}
.js .nav-menu .sub-menu{display:none}
.js .nav-menu .is-open>.sub-menu{display:grid}
.nav-menu .sub-menu a{display:flex;align-items:center;min-height:48px;padding:9px 0;border-bottom:1px solid var(--line);border-radius:0;font-size:13px;overflow-wrap:anywhere}
.tbc-submenu-toggle:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-footer>:only-child,.nav-footer>:first-child:has(+ .nav-call){grid-column:1/-1}
.nav-footer>.nav-call{grid-column:1/-1;gap:10px;text-transform:none;letter-spacing:.01em;font-size:14px}
.site-header.is-menu-open .open-status{display:none}
.nav-aside{display:contents}
.nav-cta{display:none}
.nav-extra{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.nav-extra a{display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:15px;font-weight:600;transition:color .18s}
.nav-extra a:hover,.nav-extra .current-menu-item>a{color:var(--accent)}
@media (max-width:359px){.menu-toggle{min-width:84px;padding-inline:12px}}
@media (min-width:1024px){
  .header-actions{margin-left:auto}
  .menu-toggle{min-width:112px;height:46px;gap:14px;border-color:var(--line-strong)}
  .menu-toggle:hover{border-color:var(--accent)}
  .site-nav{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);grid-template-rows:minmax(100%,auto);column-gap:clamp(48px,8vw,140px);padding:clamp(32px,6vh,72px) max(32px,calc((100vw - 1240px)/2))}
  .nav-menu{grid-column:1;grid-row:1;align-self:center}
  .nav-menu>li>a{min-height:68px;padding:12px 0;font-size:clamp(32px,3.3vw,48px)}
  .js .tbc-submenu-toggle{min-height:68px;font-size:22px}
  .nav-menu .sub-menu{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:16px}
  /* The green block sits exactly on the vertical centre, level with the menu; extra links stack above it. */
  .nav-aside{grid-column:2;grid-row:1;display:grid;grid-template-rows:1fr auto 1fr;align-self:stretch}
  .nav-aside>.nav-extra{grid-row:1;align-self:end;margin-bottom:32px}
  .nav-aside>.nav-cta{grid-row:2}
  .nav-extra{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:0}
  .nav-extra a{min-height:38px;font-size:16px}
  .nav-cta{display:block;padding:clamp(26px,2.4vw,36px);border-radius:var(--radius);background:var(--accent);color:#050505}
  .nav-cta strong{display:block;max-width:15ch;font-family:var(--display);font-size:clamp(26px,2.3vw,34px);line-height:1;letter-spacing:-.045em;text-transform:uppercase}
  .nav-cta p{margin:12px 0 0;max-width:36ch;color:#1e260c;font-size:15px;line-height:1.55}
  .nav-cta .btn{margin-top:22px;min-height:48px;border-radius:12px;font-size:11px}
  /* The header keeps its button(s) next to "Sluiten"; no second set in the menu. */
  .nav-footer{display:none}
}


/* Hero and Intro + foto: optional muted background video over the photo (the photo is its poster) */
.bg-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.photo.has-video:before{z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(4,5,4,.7)),linear-gradient(125deg,transparent 65%,rgba(200,255,23,.12))}
.photo.has-video .photo-label{z-index:2}
/* Hero with video: a lighter shade (video is darker than a photo); the text side stays dark enough to read */
.landing-hero.has-video .landing-hero-shade{background:linear-gradient(90deg,#050605 0 36%,rgba(5,6,5,.78) 48%,rgba(5,6,5,.08) 76%,transparent),linear-gradient(0deg,rgba(5,6,5,.55),transparent 35%)}
@media (max-width:860px){
  .landing-hero-bg .bg-video{object-position:60% center}
  .landing-hero.has-video .landing-hero-shade{background:linear-gradient(180deg,rgba(5,6,5,.12),rgba(5,6,5,.12) 25%,rgba(5,6,5,.72) 65%,#050605)}
  .page-home .landing-hero.has-video .landing-hero-shade{background:linear-gradient(180deg,rgba(5,6,5,.22),rgba(5,6,5,.06) 25%,rgba(5,6,5,.62) 55%,#050605 100%),linear-gradient(90deg,rgba(5,6,5,.42),transparent 100%)}
}
/* Hero "Uitlijning beeld op mobiel": a landscape photo or video fills the tall phone hero by its height, so only the
   top of the image is in view above the text. Midden/Onder slide the image up to bring its middle or lower part into
   view; its bottom edge fades out into the dark shade behind the text. Desktop is unchanged. */
@media (max-width:860px){
  .landing-hero:is(.media-mobile-center,.media-mobile-bottom) .landing-hero-bg{transform:translateY(var(--media-shift));-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .landing-hero.media-mobile-center{--media-shift:-22%}
  .landing-hero.media-mobile-bottom{--media-shift:-42%}
}

/* Quote: quotes of members or trainers. Large: one big quote; several become a slider with arrows
   on every screen (data-carousel-always). Cards: 1–6 quote cards in rows that fill the width
   (as the price cards), a swipeable carousel on mobile. Background dark, soft or green. */
.quote{display:flex;flex-direction:column;min-width:0;margin:0}
.quote blockquote,.quote blockquote p{margin:0}
.quote-mark{display:block;height:.4em;font-family:var(--display);line-height:.78;color:var(--accent);user-select:none}
.quote figcaption{display:grid;gap:3px}
.quote figcaption strong{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.quote figcaption span{color:var(--muted);font-size:14px}
.quote-actions{margin-top:44px}
/* The width limit is on the text, so in the slider every slide still fills the track. */
.is-large .quote blockquote{max-width:1040px}
.is-large .quote-mark{font-size:clamp(120px,12vw,180px);margin-bottom:8px}
.is-large .quote blockquote p{font-size:clamp(26px,3.1vw,44px);font-weight:700;line-height:1.2;letter-spacing:-.025em;text-wrap:pretty}
.is-large .quote figcaption{position:relative;margin-top:34px;padding-left:52px}
.is-large .quote figcaption:before{content:"";position:absolute;left:0;top:8px;width:36px;height:2px;background:var(--accent)}
.quote-list[data-carousel-always]{display:flex;gap:48px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.quote-list[data-carousel-always]::-webkit-scrollbar{display:none}
.quote-list[data-carousel-always]>.quote{flex:0 0 100%;scroll-snap-align:start}
.quote-list[data-carousel-always]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.quote-list[data-carousel-always]+.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1040px;margin-top:40px;min-height:48px}
.is-cards .quote{padding:34px;border:1px solid var(--card-line);border-radius:var(--radius);background:var(--panel)}
.is-cards .quote-mark{font-size:96px;margin-bottom:14px}
.is-cards .quote blockquote{margin-bottom:28px}
.is-cards .quote blockquote p{color:#dfe3dc;font-size:17px;line-height:1.65}
.is-cards .quote:only-child blockquote p{max-width:760px;font-size:20px}
.is-cards .quote figcaption{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.is-cards .quote-actions{display:flex;justify-content:center}
/* Green: dark text on the accent colour, black cards and buttons; the *accent* part of the heading
   becomes green on black, as on a dark button. */
.quote-section.is-green{background:var(--accent);color:var(--black)}
.is-green .eyebrow{color:#182006}
.is-green .dot{background:var(--black);box-shadow:0 0 0 5px rgba(5,5,5,.08)}
.is-green .section-head>.section-intro{color:#1e260c}
.is-green .tbc-mark{padding:0 .08em;background:var(--black);color:var(--accent);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-green.is-large .quote-mark{color:var(--black)}
.is-green.is-large .quote figcaption:before{background:var(--black)}
.is-green.is-large .quote figcaption span{color:rgba(2,3,2,.7)}
.is-green.is-cards .quote{border-color:var(--black);background:var(--black);color:var(--text)}
.is-green :focus-visible{outline-color:var(--black)}
.is-green .carousel-status,.is-green .carousel-hint{color:rgba(2,3,2,.62)}
.is-green .carousel-count{color:var(--black)}
.is-green .carousel-button{border-color:rgba(2,3,2,.35);color:var(--black)}
.is-green .carousel-button:last-child{border-color:var(--black);background:var(--black);color:var(--accent)}
@media (min-width:861px){
  .quote-list[data-carousel-always]+.carousel-controls .carousel-hint{display:none}
  .is-cards .quote-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
  .is-cards .quote{grid-column:span 4}
  .is-cards .quote:only-child{grid-column:1/-1}
}
@media (min-width:1121px){
  .is-cards .quote:is(:nth-last-child(2):nth-child(3n+1),:last-child:nth-child(3n+2)){grid-column:span 6}
  .is-cards .quote:is(:last-child:nth-child(3n+4),:nth-last-child(2):nth-child(3n+3),:nth-last-child(3):nth-child(3n+2),:nth-last-child(4):nth-child(3n+1)){grid-column:span 3}
}
@media (min-width:861px) and (max-width:1120px){
  .is-cards .quote{grid-column:span 6}
  .is-cards .quote:is(:last-child:nth-child(2n+3),:nth-last-child(2):nth-child(2n+2),:nth-last-child(3):nth-child(2n+1)){grid-column:span 4}
}
@media (max-width:860px){
  .is-large .quote-mark{font-size:104px;margin-bottom:4px}
  .is-large .quote blockquote p{font-size:clamp(22px,6.2vw,30px);line-height:1.25}
  .is-large .quote figcaption{margin-top:26px;padding-left:44px}
  .is-large .quote figcaption:before{width:30px}
  .quote-list[data-carousel-always]+.carousel-controls{margin-top:22px}
  .is-cards .quote{padding:26px;border-radius:18px}
  .is-cards .quote-mark{font-size:80px}
  .is-cards .quote blockquote p,.is-cards .quote:only-child blockquote p{font-size:16px}
  .quote-actions{margin-top:28px}.quote-actions>.btn{width:100%}
}

/* Facebook/Instagram from TBC instellingen: icon + text, at the bottom of the footer contact column and in Contact + kaart */
.social-link{display:inline-flex;align-items:center;gap:9px}
.social-icon{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-social{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px}
.contact-social{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:11px}
.contact-cards .social-icon{width:20px;height:20px}

/* Intro fields (simple editor: bold, bullet list, links) are a div with tbc-prose; it can hold several
   paragraphs and a list. The intro keeps the colour and size of its wrapper; the hero and video intro keep
   the space below them that their single <p> had. */
.tbc-intro :is(p,ul,li){color:inherit}
.split .tbc-intro p{color:inherit}
.landing-intro,.lead.tbc-intro{margin-bottom:1em}
.is-green .tbc-intro :is(a,strong,b){color:#050605}

/* Homepage pop-up (Pop-ups in the admin, inc/popup.php): a green card (like the CTA band, .is-green) over the
   dimmed page, photo left and text right; a narrow text card without a photo. On a phone it is a sheet from the
   bottom with the photo on top. Hidden until site.js opens it. */
.tbc-popup{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:32px;background:rgba(2,3,2,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.tbc-popup.is-open{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
.tbc-popup-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 64px);display:grid;overflow:auto;overscroll-behavior:contain;background:var(--accent);color:var(--black);border-radius:var(--radius);box-shadow:0 0 0 1px rgba(117,196,71,.35),0 40px 120px rgba(0,0,0,.6),0 0 90px rgba(117,196,71,.18);transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tbc-popup.is-open .tbc-popup-card{transform:none}
.tbc-popup-card.has-media{width:min(920px,100%);min-height:min(500px,calc(100dvh - 64px));grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
.tbc-popup-media{position:relative;min-height:100%;background:var(--bg-soft)}
.tbc-popup-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tbc-popup-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:52px 46px 44px}
.tbc-popup-body .eyebrow{margin-bottom:20px}
/* Without a photo the close button sits over the text: keep the first line clear of it. */
.tbc-popup-card:not(.has-media) .tbc-popup-body>:first-child{padding-right:48px}
.tbc-popup-title{margin:0;font-size:clamp(34px,4.2vw,52px);overflow-wrap:anywhere}
.tbc-popup-subtitle{margin:16px 0 0;font-size:18px;font-weight:700;line-height:1.4}
.tbc-popup-text{margin-top:14px;color:#1e260c;font-size:15px}
.tbc-popup-text :is(strong,b,a){color:var(--black)}
.tbc-popup-text a{text-decoration:underline;text-underline-offset:3px}
.tbc-popup-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.tbc-popup-actions .btn-line-dark{background:transparent}
.tbc-popup-actions .btn-line-dark:hover{border-color:var(--black)}
.tbc-popup-close{position:absolute;right:14px;top:14px;z-index:1;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--black);color:var(--accent);font-size:24px;line-height:1;cursor:pointer;transition:transform .2s}
.tbc-popup-close:hover{transform:rotate(90deg)}
@media (max-width:700px){
  .tbc-popup{place-items:end stretch;padding:0}
  .tbc-popup-card,.tbc-popup-card.has-media{width:100%;min-height:0;max-height:92dvh;grid-template-columns:minmax(0,1fr);border-radius:var(--radius) var(--radius) 0 0;transform:translateY(40px)}
  .tbc-popup-media{min-height:0;aspect-ratio:16/10}
  .tbc-popup-body{padding:26px 22px max(22px,env(safe-area-inset-bottom))}
  .tbc-popup-card:not(.has-media) .tbc-popup-body{padding-top:30px}
  .tbc-popup-body .eyebrow{margin-bottom:14px}
  .tbc-popup-title{font-size:clamp(30px,9vw,40px)}
  .tbc-popup-subtitle{font-size:16px}
  .tbc-popup-actions{width:100%;margin-top:24px}
  .tbc-popup-actions>.btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .tbc-popup,.tbc-popup-card{transition:none}
  .tbc-popup-card,.tbc-popup-card.has-media{transform:none}
}