/* Layout: sticky brand header, photo-led hero, concern grid, process, team band, reviews, offers, clinics; treatment page = facts rail + video + steps + FAQ, sticky book bar. */
:root{
  --paper:#FAFAF7; --surface:#FFFFFF; --mint:#E6F2F0; --ink:#16343A; --muted:#4A6266; --line:#DCE6E4;
  --teal:#17696B; --teal-ink:#0F4F51; --aqua:#8CCDCB;
  --band:#16343A; --on-band:#F1F7F6; --on-band-muted:#B9D0CE;
  --btn-bg:#17696B; --btn-fg:#FFFFFF; --warn:#9A3B2E;
  --logo-c:block; --logo-r:none;
  --f-display:"Outfit", "Segoe UI", system-ui, sans-serif; --f-body:"Outfit", "Segoe UI", system-ui, sans-serif;
  --d-weight:600; --d-track:-0.02em;
  --radius:18px; --wrap:1180px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0E2024; --surface:#142C31; --mint:#173A3E; --ink:#EAF4F2; --muted:#A9C3C1; --line:#26474B;
  --teal:#6CC3BE; --teal-ink:#8CD6D1; --aqua:#8CCDCB;
  --band:#0A171A; --on-band:#F1F7F6; --on-band-muted:#A9C3C1;
  --btn-bg:#6CC3BE; --btn-fg:#0E2024; --warn:#F0A493;
  --logo-c:none; --logo-r:block; color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#0E2024; --surface:#142C31; --mint:#173A3E; --ink:#EAF4F2; --muted:#A9C3C1; --line:#26474B;
  --teal:#6CC3BE; --teal-ink:#8CD6D1; --aqua:#8CCDCB;
  --band:#0A171A; --on-band:#F1F7F6; --on-band-muted:#A9C3C1;
  --btn-bg:#6CC3BE; --btn-fg:#0E2024; --warn:#F0A493;
  --logo-c:none; --logo-r:block; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; margin:0}
img,video{max-width:100%; display:block}
a{color:var(--teal)} a:hover{color:var(--teal-ink)}
:focus-visible{outline:3px solid var(--aqua); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); font-weight:var(--d-weight); letter-spacing:var(--d-track); line-height:1.08; text-wrap:balance; margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem)} h2{font-size:clamp(1.8rem,3.6vw,2.8rem)} h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--teal)}
.lead{font-size:1.12rem; color:var(--muted); max-width:34em}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:999px; font-weight:700; font-size:.98rem; text-decoration:none; border:2px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; font-family:inherit}
.btn:hover{color:var(--btn-fg); filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--teal)} .btn.ghost:hover{color:var(--teal-ink)}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
section{padding-block:clamp(56px,8vw,96px)}

.testbar{background:var(--band); color:var(--on-band); font-size:.82rem}
.testbar .wrap{display:flex; gap:12px 20px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-block:8px}
.testbar fieldset{border:0; margin:0; padding:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.testbar legend{float:left; margin-right:6px; color:var(--on-band-muted)}
.testbar label{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid #3B5A5F; cursor:pointer; min-height:32px}
.testbar input{accent-color:var(--aqua)}

header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; gap:24px; padding-block:12px}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.logo img{height:42px; width:auto}
.logo .c{display:var(--logo-c)} .logo .r{display:var(--logo-r)}
nav.main{display:flex; gap:20px; flex:1; flex-wrap:nowrap; white-space:nowrap}
nav.main a{color:var(--ink); text-decoration:none; font-weight:600; font-size:.95rem}
nav.main a:hover{color:var(--teal)}
.short{display:none}
.acct{display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; text-decoration:none; min-height:44px}
@media (max-width: 1240px){ .acct{display:none} }
@media (max-width: 1100px){ nav.main, .acct{display:none} header.site .btn{padding:0 18px; min-height:44px; font-size:.9rem} header.site .long{display:none} header.site .short{display:inline} .testbar fieldset label{padding:2px 8px; min-height:30px} .testbar legend{display:none} .logo img{height:34px} header.site .wrap{justify-content:space-between} }

.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:22px; min-width:0}
.hero h1 em{font-style:italic; color:var(--teal)}
.proof{display:flex; gap:28px; flex-wrap:wrap; padding-top:6px}
.proof div{display:flex; flex-direction:column}
.proof b{font-family:var(--f-display); font-weight:var(--d-weight); font-size:1.7rem; line-height:1.1}
.proof span{font-size:.86rem; color:var(--muted)}
.hero-media{position:relative; min-width:0}
.hero-media img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:30% 50%; border-radius:220px 220px var(--radius) var(--radius)}
.watch{position:absolute; left:-18px; bottom:28px; background:var(--surface); color:var(--ink); border-radius:16px; padding:12px 16px 12px 12px; display:flex; gap:12px; align-items:center; box-shadow:0 14px 34px rgba(10,30,34,.18); text-decoration:none; max-width:300px}
.watch img{width:56px; height:56px; border-radius:50%; object-fit:cover; aspect-ratio:1}
.watch b{display:block; font-size:.9rem} .watch span{font-size:.82rem; color:var(--muted)}
@media (max-width: 860px){ .hero .wrap{grid-template-columns:1fr} .hero-media{order:-1} .hero-media img{aspect-ratio:4/3.4; border-radius:var(--radius)} .watch{left:12px; bottom:12px} }

.concerns{background:var(--surface)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:32px}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.tile{background:var(--mint); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:8px; min-height:150px; text-decoration:none; color:var(--ink); transition:transform .2s ease}
.tile:hover{transform:translateY(-3px); color:var(--ink)}
.tile h3{font-size:1.4rem}
.tile span{font-size:.92rem; color:var(--muted)}
.tile .go{margin-top:auto; font-weight:700; font-size:.88rem; color:var(--teal)}
@media (max-width: 960px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 480px){ .grid4{grid-template-columns:1fr} .tile{min-height:0} }

.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; counter-reset:s}
.step{display:flex; flex-direction:column; gap:8px; border-top:2px solid var(--teal); padding-top:18px}
.step b{font-size:1.05rem}
.step p{color:var(--muted); font-size:.95rem}
@media (max-width: 860px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 480px){ .steps{grid-template-columns:1fr} }

.team{background:var(--band); color:var(--on-band)}
.team .sec-head a{color:var(--aqua)}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.person{display:flex; flex-direction:column; gap:10px}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius)}
.person h3{font-size:1.6rem}
.person .role{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua); font-weight:700}
.person p{color:var(--on-band-muted); font-size:.95rem}
@media (max-width: 860px){ .grid3{grid-template-columns:1fr} .person{display:grid; grid-template-columns:120px minmax(0,1fr); gap:6px 18px} .person img{grid-row:span 3; aspect-ratio:1} }

.reviews{background:var(--surface)}
.stars{color:var(--teal); letter-spacing:3px}
.review{border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px}
.review small{color:var(--muted)}
.ph{background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,var(--line) 55%,transparent) 8px 9px); border-radius:8px; padding:2px 6px}

.offers .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.offer{border-radius:24px; padding:clamp(24px,4vw,40px); display:flex; flex-direction:column; gap:12px}
.offer.dark{background:var(--teal); color:var(--btn-fg)}
.offer.dark .eyebrow, .offer.dark a{color:var(--btn-fg)}
.offer.light{background:var(--mint)}
@media (max-width: 760px){ .offers .grid2{grid-template-columns:1fr} }

.clinics{background:var(--surface)}
.clinic{display:flex; flex-direction:column; gap:6px}
.clinic p{color:var(--muted); font-size:.95rem}

footer{background:var(--band); color:var(--on-band-muted); font-size:.9rem; padding-block:44px}
footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:28px}
footer a{color:var(--aqua)}
footer .logo img{height:36px}
footer .logo .c{display:none} footer .logo .r{display:block}
.contact{user-select:all; color:var(--on-band)}
@media (max-width: 760px){ footer .wrap{grid-template-columns:1fr} }

/* treatment page */
.crumbs{font-size:.88rem; color:var(--muted); padding-top:24px}
.crumbs a{color:var(--muted)}
.t-hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:start; padding-top:18px}
.t-hero h1{font-size:clamp(2.2rem,4.8vw,3.8rem)}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.fact{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.fact span{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--teal)}
.fact b{font-weight:600}
.video{border-radius:var(--radius); overflow:hidden; background:#000; aspect-ratio:16/9}
.video video{width:100%; height:100%; object-fit:cover}
.caption{font-size:.84rem; color:var(--muted); margin-top:10px}
@media (max-width: 860px){ .t-hero .wrap{grid-template-columns:1fr} }
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.three div{display:flex; flex-direction:column; gap:10px}
.three p{color:var(--muted)}
@media (max-width: 860px){ .three{grid-template-columns:1fr} }
.timeline{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.tl{background:var(--mint); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:6px}
.tl em{font-family:var(--f-display); font-style:normal; font-size:1.6rem; color:var(--teal); line-height:1}
.tl p{font-size:.92rem; color:var(--muted)}
@media (max-width: 960px){ .timeline{grid-template-columns:1fr 1fr} }
@media (max-width: 480px){ .timeline{grid-template-columns:1fr} }
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center}
.split img{border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover}
@media (max-width: 860px){ .split{grid-template-columns:1fr} }
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line); padding-block:18px}
.faq summary{cursor:pointer; font-weight:700; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--teal); font-size:1.4rem; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted); margin-top:10px}
.bookbar{position:sticky; bottom:0; z-index:15; background:var(--band); color:var(--on-band); padding-bottom:env(safe-area-inset-bottom,0px)}
.bookbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-block:12px}
.bookbar .btn{background:var(--aqua); border-color:var(--aqua); color:#0E2024}
.small{font-size:.86rem; color:var(--muted)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; scroll-behavior:auto!important} }

</head>
<body>

/* hero video modal */
.watch{cursor:pointer}
.watch .wplay{position:relative; flex:0 0 auto; display:block}
.watch .wplay i{position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.watch .wplay i::after{content:""; position:absolute; left:10px; top:7px; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent}
.vmodal{position:fixed; inset:0; z-index:1000; background:rgba(6,18,20,.86); display:flex; align-items:center; justify-content:center; padding:16px}
.vmodal[hidden]{display:none}
.vmodal .vbox{position:relative; width:min(1100px,100%)}
.vmodal video{width:100%; aspect-ratio:16/9; background:#000; border-radius:16px; display:block}
.vmodal .vclose{position:absolute; top:-52px; right:0; background:var(--paper); color:var(--ink); border:0; border-radius:999px; min-height:44px; padding:0 18px; font:inherit; font-weight:600; cursor:pointer}
.vmodal .vmore{display:inline-block; margin-top:14px; color:#fff!important; text-decoration:underline}

/* feedback form */
.fb .fbpart{border-top:1px solid var(--line); padding-top:18px; display:grid; gap:12px}
.fb .fbpart h3{margin:0}
.form .stars{border:0; padding:0; margin:0; min-width:0}
.form .stars legend{font-weight:600; margin:0 0 6px; padding:0; letter-spacing:0; text-transform:none; color:var(--ink); font-size:1rem; float:none}
.form .starrow{display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px}
.form .starrow input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.form .starrow label{display:inline-flex!important; align-items:center; justify-content:center; font-size:2.2rem!important; line-height:1; color:#C9D6D4; cursor:pointer; min-width:46px; min-height:46px; border-radius:10px; font-weight:400; margin:0; padding:0}
.form .starrow input:checked ~ label, .form .starrow label:hover, .form .starrow label:hover ~ label{color:#E8A93B}
.form .starrow input:focus-visible + label{outline:2px solid var(--teal); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.form .check{display:flex!important; flex-direction:row; gap:10px; align-items:flex-start; font-weight:400}
.form .check input{margin-top:3px; width:20px; height:20px; accent-color:var(--teal); flex:0 0 auto}
.form .check span{flex:1}
.quickfb{margin-top:18px; background:var(--surface); border-radius:var(--radius); padding:20px}
ol.terms li{margin-bottom:.8em; line-height:1.6}
/* --- whole-site additions --- */
.nav-active{color:var(--teal)!important}
.menu-btn{display:none; background:var(--teal); border:0; color:var(--paper); border-radius:12px; min-height:44px; min-width:44px; align-items:center; justify-content:center; cursor:pointer}
@media (max-width: 1100px){ .menu-btn{display:inline-flex} }
.drawer{border-top:1px solid var(--line); background:var(--paper)}
header.site .drawer .wrap{display:grid; grid-template-columns:1fr; gap:0; padding-block:8px 16px}
.drawer a{color:var(--ink); text-decoration:none; font-weight:600; font-size:1.15rem; min-height:54px; display:flex; align-items:center; border-bottom:1px solid var(--line)} .drawer a:last-child{border-bottom:0}
.page-head{padding-block:28px 8px}
.page-head h1{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.page-head .lead{margin-top:14px}
.t-index{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.t-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .2s ease}
.t-card:hover{transform:translateY(-3px); color:var(--ink)}
.t-card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.t-card div{padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px}
.t-card h3{font-size:1.35rem}
.t-card span{color:var(--muted); font-size:.93rem}
.t-card b{color:var(--teal); font-size:.88rem; margin-top:4px}
@media (max-width: 960px){ .t-index{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .t-index{grid-template-columns:1fr} }
.split img.portrait{aspect-ratio:4/5; max-height:620px}
.journal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.journal a{display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); background:var(--surface)}
.journal a span{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--teal)}
@media (max-width: 860px){ .journal{grid-template-columns:1fr} }
.clubs-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.club{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:14px; position:relative}
.club.best{background:var(--band); color:var(--on-band); border-color:var(--band)}
.club.best p,.club.best li{color:var(--on-band-muted)}
.club .price{font-size:2.2rem; font-weight:600; line-height:1; font-family:var(--f-display)}
.club .price small{font-size:1rem; font-weight:500}
.club ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; color:var(--muted)}
.club .tag{position:absolute; top:18px; right:18px; background:var(--aqua); color:#0E2024; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px}
.club .btn{margin-top:auto}
.club.best .btn{background:var(--aqua); border-color:var(--aqua); color:#0E2024}
@media (max-width: 960px){ .clubs-grid{grid-template-columns:1fr} }
.team-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.member{display:flex; flex-direction:column; gap:10px}
.member img,.member .ini{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius)}
.member .ini{display:flex; align-items:center; justify-content:center; background:var(--mint); color:var(--teal); font-size:3rem; font-weight:600}
.member .role{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700}
.member p{color:var(--muted); font-size:.95rem}
@media (max-width: 860px){ .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 520px){ .team-grid{grid-template-columns:1fr} }
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px}
.form{display:grid; gap:14px}
.form label{font-weight:600; font-size:.92rem; display:flex; flex-direction:column; gap:6px}
.form input,.form textarea,.form select{font:inherit; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink)}
.notice{background:var(--mint); border-radius:12px; padding:12px 14px; font-weight:600}
@media (max-width: 860px){ .contact-grid{grid-template-columns:1fr} }
.b2b-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.b2b{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink); transition:transform .2s ease}
.b2b:hover{transform:translateY(-3px); color:var(--ink)}
.b2b .ic{width:46px; height:46px; border-radius:14px; background:var(--mint); color:var(--teal); display:flex; align-items:center; justify-content:center}
.b2b h3{font-size:1.3rem}
.b2b p{color:var(--muted); font-size:.95rem}
.b2b b{color:var(--teal); font-size:.88rem; margin-top:auto}
.b2b.dark{background:var(--band); border-color:var(--band); color:var(--on-band)}
.b2b.dark p{color:var(--on-band-muted)} .b2b.dark .eyebrow{color:var(--aqua)} .b2b.dark b{color:var(--aqua)} .b2b.dark .ic{background:rgba(255,255,255,.1); color:var(--aqua)}
@media (max-width: 960px){ .b2b-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .b2b-grid{grid-template-columns:1fr} }
.course-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.course{border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:6px; background:var(--surface)}
.course h3{font-size:1.15rem} .course .price{font-size:1.6rem; font-weight:600; color:var(--teal)} .course span{color:var(--muted); font-size:.9rem}
@media (max-width: 860px){ .course-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 480px){ .course-list{grid-template-columns:1fr} }
.ticks{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.ticks li{padding-left:28px; position:relative}
.ticks li::before{content:""; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:50%; background:var(--aqua)}
.gate{background:var(--band); color:var(--on-band); border-radius:var(--radius); padding:clamp(24px,4vw,44px); display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.gate p{color:var(--on-band-muted)} .gate .eyebrow{color:var(--aqua)}
.gate .lock{display:flex; flex-direction:column; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px}
.gate .btn.ghost{color:var(--on-band); border-color:rgba(255,255,255,.4)}
@media (max-width: 860px){ .gate{grid-template-columns:1fr} }
.shop-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.prod{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); position:relative}
.prod img{width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff}
.prod div{padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; flex-grow:1}
.prod h3{font-size:1.08rem} .prod p{color:var(--muted); font-size:.9rem}
.prod .price{font-weight:600; font-size:1.2rem; margin-top:auto}
.prod .btn{margin-top:8px}
.prod[hidden]{display:none}
@media (max-width: 480px){ .logo img{height:28px} header.site .wrap{gap:10px} header.site .btn{padding:0 14px} }
.prod .tag{position:absolute; top:12px; left:12px; background:var(--aqua); color:#0E2024; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips button{font:inherit; font-weight:600; font-size:.9rem; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
@media (max-width: 1040px){ .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 760px){ .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} .prod div{padding:12px 12px 14px} }
.hero{padding-block:clamp(32px,5vw,64px)}
.hero-media img{height:auto}
nav.main a, .acct, header.site .btn{white-space:nowrap}
nav.main{flex-wrap:nowrap}
@media (max-width: 1440px){ .acct{display:none} }
.navacct{color:var(--teal)!important}
@media (min-width: 1441px){ .navacct{display:none} }
@media (max-width: 1180px) and (min-width: 1101px){ nav.main{gap:14px} nav.main a{font-size:.88rem} }
@media (max-width: 1180px) and (min-width: 1041px){ nav.main{gap:16px} nav.main a{font-size:.92rem} }
@media (min-width: 861px){ .hero .wrap{align-items:center} .hero-media img{aspect-ratio:6/5; max-height:520px} }
.ce{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.06em; color:var(--teal); border:1px solid var(--line); border-radius:999px; padding:3px 10px; width:max-content}
.trade-bar{background:var(--mint); border-radius:14px; padding:12px 16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; font-weight:600}
.prod .meta{font-size:.78rem; color:var(--muted); letter-spacing:.04em}
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.post{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease}
.post:hover{transform:translateY(-3px); color:var(--ink)}
.post img{width:100%; aspect-ratio:4/3; object-fit:cover}
.post div{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px}
.post .eyebrow{font-size:.72rem}
.post h3{font-size:1.15rem; line-height:1.3}
.post p{color:var(--muted); font-size:.92rem}
.post small{color:var(--muted)}
.post[hidden]{display:none}
.post.lead-post{grid-column:span 3; display:grid; grid-template-columns:1.2fr 1fr}
.post.lead-post img{height:100%; aspect-ratio:auto; min-height:320px}
.post.lead-post div{justify-content:center; padding:32px}
.post.lead-post h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
@media (max-width: 960px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} .post.lead-post{grid-column:span 2} }
@media (max-width: 640px){ .posts{grid-template-columns:1fr} .post.lead-post{grid-column:auto; display:flex} .post.lead-post img{min-height:0; aspect-ratio:4/3} .post.lead-post div{padding:18px 20px 22px} }
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite;display:inline-block}@keyframes sp{to{transform:rotate(360deg)}}
.notice.err{background:#FDECEA;color:#8A2A1F}
.stepper{list-style:none;margin:0 0 22px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted);padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line)}
.stepper li span{width:24px;height:24px;border-radius:50%;background:var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--ink)}
.stepper li.now{color:var(--ink);border-color:var(--teal)} .stepper li.now span{background:var(--teal);color:#fff} .stepper li.done{background:var(--band);color:var(--on-band);border-color:var(--band)} .stepper li.done span{background:var(--aqua);color:#0E2024}
.book{display:flex;flex-direction:column;gap:18px;max-width:820px}
.book h3{font-size:1.05rem;margin-top:6px}
.tlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trow{font:inherit;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:60px}
.trow:hover{border-color:var(--teal)} .trow span{display:flex;flex-direction:column;gap:2px} .trow small{color:var(--muted)} .trow i{color:var(--teal);font-style:normal}
.pick{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--mint)} .pick h2{font-size:1.4rem} .pick h2 small{font-size:.9rem;font-weight:500;color:var(--muted)} .pick p{margin:0}
.daylist{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.daylist button{font:inherit;flex:0 0 64px;min-height:72px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer}
.daylist button b{font-size:1.2rem} .daylist button small{font-size:.72rem;color:var(--muted)} .daylist button[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff} .daylist button[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px}
.slotgrid button{font:inherit;font-weight:600;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}
.slotgrid button small{font-weight:500;font-size:.7rem;color:var(--muted)} .slotgrid button:hover{border-color:var(--teal);background:var(--mint)}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:560px){.grid2f{grid-template-columns:1fr} .tlist{grid-template-columns:1fr}}
.standards{background:var(--mint);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;font-size:.92rem} .standards p{margin:0;color:var(--ink)}
.form .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;font-size:.92rem} .form .check input{margin-top:4px}
.done{background:var(--band);color:var(--on-band);border-radius:var(--radius);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:12px} .done p{color:var(--on-band-muted)} .done .eyebrow{color:var(--aqua)} .done .btn.ghost{color:var(--on-band);border-color:rgba(255,255,255,.4)}
.portal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.portal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start} @media (max-width:860px){.portal{grid-template-columns:1fr}}
.club.next{grid-column:1/-1} .club.next .btn.ghost{color:var(--on-band);border-color:rgba(255,255,255,.4);background:transparent}
.card.after{text-decoration:none;color:var(--ink);background:var(--mint);border-color:var(--mint)} .card .bar{height:6px;border-radius:3px;background:rgba(0,0,0,.08)} .card .bar div{height:6px;border-radius:3px;background:var(--teal)}
.applist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .applist li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .applist li:last-child{border-bottom:0} .applist small{color:var(--muted)} .applist .row a{min-height:0}
.accred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding-block:0}
.accred .wrap{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap;padding-block:22px}
.accred span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);flex-basis:100%;text-align:center;margin-bottom:-6px}
.accred img{height:64px;width:auto;object-fit:contain} @media (max-width:560px){.accred img{height:46px}}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .accred img{background:#fff;border-radius:8px;padding:4px} } :root[data-theme="dark"] .accred img{background:#fff;border-radius:8px;padding:4px}