/* Embrace rebuild: homepage. Tokens match brand/embrace.css. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap");

/* Fonts (owner picks, 2026-10-28): Bebas Neue headings and DM Sans text, both free on Google Fonts. Anton is the headline fallback. */
:root{ --display:'Bebas Neue','Anton',Impact,sans-serif; --display-w:400; }
:root{
  --ink:#0b0b0c;
  --panel:#141416;
  --line:#2a2a2e;
  --gold:#F5C518;
  --gold-deep:#c99f0a;
  --black:#231F20;
  --white:#FAFAF7;
  --muted:#a9a9ad;
  --bar-h:64px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--ink); color:var(--white);
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ── header: plain black like the page, a thin gold line underneath ── */
/* Logos left, links evenly spaced on the right, everything on one center line. */
.bar{
  position:sticky; top:0; z-index:20; isolation:isolate;
  height:var(--bar-h); padding-inline:clamp(16px,3vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  background:var(--ink);
  border-bottom:1px solid rgba(245,197,24,.35);
  color:var(--white);
}
.brand{ display:flex; align-items:center; gap:.9rem; justify-self:start; }
.mark img{ width:44px; height:44px; filter:drop-shadow(0 0 10px rgba(245,197,24,.35)); }
.akb{ display:flex; align-items:center; gap:.55rem; }
.akb .bee{ height:42px; width:auto; }
.akb .assoc{ height:28px; width:auto; }
@media (max-width:340px){ .akb .assoc{ display:none; } }

.bar nav{ display:contents; }
.links{ display:flex; align-items:center; gap:2rem; }
.bar nav a{
  font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:.9rem; line-height:1;
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  color:var(--white); transition:color .15s;
}
.links a{ position:relative; padding-block:.45rem; }
.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
  transform:scaleX(0); transition:transform .2s;
}
.links a:hover{ color:var(--gold); }
.links a:hover::after, .links a.trial::after{ transform:scaleX(1); }
.links a.trial:hover{ color:var(--white); }
.menu{
  display:none; background:rgba(11,11,12,.6); border:2px solid var(--gold); border-radius:4px;
  color:var(--gold); font-size:1rem; font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; letter-spacing:.08em;
  text-transform:uppercase; padding:.5rem .9rem; cursor:pointer;
}

/* Computers always show the full menu: it tightens up on smaller windows instead of collapsing. */
@media (max-width:1100px){
  .links{ gap:1.4rem; }
  .bar nav a{ font-size:.86rem; }
}
@media (max-width:920px){
  .links{ gap:1.1rem; }
  .bar nav a{ font-size:.82rem; }
}
/* Phones and small tablets get the Menu button. */
@media (max-width:760px){
  .menu{ display:block; }
  .bar nav{
    display:none; position:absolute; top:var(--bar-h); left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--ink); border-bottom:1px solid rgba(245,197,24,.35);
    padding:.5rem 16px 1rem;
  }
  .nav-open .bar nav{ display:flex; }
  .links{ flex-direction:column; align-items:stretch; gap:0; }
  .links a{ padding:1rem 0; font-size:1.2rem; border-bottom:1px solid var(--line); }
  .links a::after{ display:none; }
  .links a.trial{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:6px; }
}
@media (max-width:480px){
  :root{ --bar-h:64px; }
  .mark img{ width:40px; height:40px; }
  .akb .bee{ height:38px; }
  .akb .assoc{ height:24px; }
}

/* ── hero ── */
.hero{
  position:relative; overflow:hidden; background:var(--ink);   /* the logo on black; the video header is down for now (owner, 2026-11-03) */
  /* Full width and a little shorter than the screen, so the About heading and its free class button peek in below it. */
  height:max(380px, calc(72vh - var(--bar-h)));
  display:grid;
}
/* Logo sits dead center of the hero. */
.hero-inner{
  position:relative; z-index:1; padding:2rem 16px;
  display:grid; place-items:center;
}
.hero h1 img{ width:min(640px,84vw); height:auto; filter:drop-shadow(0 12px 32px rgba(0,0,0,.5)); }
.book{
  background:var(--gold); color:#000;
  font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:1.35rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.9rem 2.4rem; border-radius:4px;
}
.book:hover{ filter:brightness(1.08); }

/* ── call to action: gold outline, fills gold on hover. It sits above the About heading. ── */
.hero-cta{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.6rem 1.6rem; transition:background .2s, color .2s;
  border:2px solid var(--gold); color:var(--gold);
  background:rgba(11,11,12,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-cta i{ font-style:normal; transition:transform .2s; }
.hero-cta:hover{ background:var(--gold); color:#000; }
.hero-cta:hover i{ transform:translateX(5px); }
.about .hero-cta{ margin-bottom:2rem; }
.sec.about{ padding-top:2.25rem; }   /* the free class button sits close under the hero, no dead space */

/* ── sections ── */
.wrap{ width:min(1140px,100%); margin:0 auto; padding-inline:16px; }
.sec{ padding-block:clamp(3.5rem,8vw,6rem); }
.sec + .sec{ border-top:0; }   /* no gray divider lines between sections (owner, 2026-10-28); spacing separates them */
.eyebrow{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
h2{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.95; text-wrap:balance;   /* Octin College runs wide: balance the lines so no word sits alone */
    font-size:clamp(2rem,5vw,3.2rem); margin:.6rem 0 1.5rem; }
h3{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em; }
p{ color:#d8d8da; }
p + p{ margin-top:.9rem; }
.about{ position:relative; z-index:1; background:var(--ink); }
.about .wrap{ text-align:center; }
.about .lede{ max-width:640px; margin:0 auto; font-size:1.05rem; }
.about .lede b{ color:var(--white); font-weight:700; }
/* "best" in gold; home.js adds .grow each time the heading scrolls into view, so it grows and settles back.
   (Not .pop: that class is the pop-up dialogs.) */
/* Grows by font size so the words beside it get pushed out. line-height:0 keeps the line from getting taller.
   Text grows up from its baseline, so it also drops by half the growth (Anton caps are 0.87em tall) to grow from its center. */
.best{ position:relative; top:0; color:var(--gold); line-height:0; }
.best.grow{ animation:best-grow .9s ease-in-out; }
@keyframes best-grow{ 0%,100%{ font-size:1em; top:0; } 45%{ font-size:1.45em; top:.135em; } }
@media (prefers-reduced-motion: reduce){ .best.grow{ animation:none; } }
/* Class cards: two to a row, photo fills the card, name on a dark fade at the bottom. Grows on hover. */
.classes{ display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; margin-top:2.5rem; text-align:left; }
.class-card{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.class-card:last-child:nth-child(odd){ grid-column:1 / -1; aspect-ratio:32/10; }   /* the odd card out spans the row */
.class-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* the photo dims on hover so the class details read clearly */
.class-card::after{ content:""; position:absolute; inset:0; background:rgba(11,11,12,.6); opacity:0; transition:opacity .3s ease; }
.cc-label{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:.6rem;
  padding:3rem 1.5rem 1.25rem;
  background:linear-gradient(180deg,transparent 0%,rgba(11,11,12,.92) 60%);
}
.cc-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cc-label h3{ font-size:1.8rem; }
/* "Click for more info": semibold, smaller than the title, bigger than the details */
.cc-more{ display:flex; align-items:center; gap:.6rem; font:600 1.05rem 'DM Sans',system-ui,sans-serif; color:var(--gold); white-space:nowrap; }
.cc-more span{ opacity:0; transform:translateX(8px); transition:opacity .3s ease, transform .3s ease; }
.class-card i{ font-style:normal; color:var(--gold); font-size:1.6rem; transition:transform .3s ease; }
/* class details: folded away until hover, then one sentence and the ages slide up into view */
.cc-info{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .35s ease, opacity .3s ease; }
.cc-info > span{ overflow:hidden; display:flex; flex-direction:column; gap:.5rem; transform:translateY(8px); transition:transform .35s ease; }
.cc-desc{ color:#ececee; font-size:1.02rem; line-height:1.45; max-width:440px; }
.cc-meta{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.class-card:hover{ transform:scale(1.04); z-index:1; border-color:var(--gold); box-shadow:0 24px 48px rgba(0,0,0,.6); }
.class-card:hover::after{ opacity:1; }
.class-card:hover .cc-info{ grid-template-rows:1fr; opacity:1; }
.class-card:hover .cc-info > span{ transform:none; }
.class-card:hover .cc-more span{ opacity:1; transform:none; }
.class-card:hover i{ transform:translateX(6px); }
/* phones: one card per row so the class names have room */
/* phones: one full-width card per row so the class names have room; the hover details stay hidden (no hover on touch) */
@media (max-width:600px){
  .classes{ grid-template-columns:1fr; gap:1rem; margin-top:1.75rem; }
  .class-card, .class-card:last-child:nth-child(odd){ aspect-ratio:16/9; grid-column:auto; }
  .class-card:hover{ transform:none; }
  .cc-label{ padding:2.5rem 1.1rem 1rem; gap:0; }
  .cc-label h3{ font-size:1.7rem; line-height:1; }
  .cc-more span{ display:none; }
}
.cards{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* Reviews carousel: a sideways scroll that snaps card to card. Swipe, trackpad, or the arrows (home.js). */
/* heading and subtext on the left, the rating on the right, lined up on the subtext's baseline */
.rev-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; text-align:left; margin-bottom:2.5rem; }
.rev-head h2{ font-size:clamp(2.4rem,5.5vw,3.8rem); margin-bottom:.9rem; }
.rev-head .lede{ font-size:1.1rem; }
.g-link{ color:var(--gold); text-decoration:underline; text-underline-offset:4px; }
.g-link:hover{ color:var(--white); }
.rev-score{ white-space:nowrap; padding-bottom:.25rem; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.rev-star{ font-family:'DM Sans',system-ui,sans-serif; font-size:1rem; letter-spacing:0; vertical-align:-.08em; }   /* same size as the stars on the review cards */
.reviews .wrap{ text-align:center; }
.reviews .review{ text-align:left; }
.rev-nav{ display:flex; justify-content:center; gap:.6rem; margin-top:1.75rem; }
.rev-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--gold); background:none;
  color:var(--gold); font-size:1.2rem; cursor:pointer; transition:background .2s, color .2s, opacity .2s;
}
.rev-btn:hover{ background:var(--gold); color:#000; }
.rev-btn:disabled{ opacity:.3; cursor:default; background:none; color:var(--gold); }
.rev-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2.5rem) / 3); gap:1.25rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain;
  scrollbar-width:none; padding-bottom:.25rem;
}
.rev-track::-webkit-scrollbar{ display:none; }
.rev-track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.rev-track .review{ scroll-snap-align:start; }
@media (max-width:900px){ .rev-track{ grid-auto-columns:calc((100% - 1.25rem) / 2); } }
@media (max-width:600px){ .rev-track{ grid-auto-columns:85%; } }
.review{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.stars{ color:var(--gold); letter-spacing:.15em; }
.review blockquote{ color:#e4e4e6; font-size:.98rem; flex:1; }
.review figcaption{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.more{ display:inline-block; margin-top:1.75rem; color:var(--gold); font-weight:600; border-bottom:1px solid currentColor; }

.band{ background:var(--gold); color:#000; text-align:center; padding-block:clamp(3rem,7vw,4.5rem); }
.band h2{ color:var(--black); margin-top:0; }
.band .book{ background:var(--black); color:var(--gold); }
.band .link{ display:block; margin:1.25rem auto 0; color:var(--black); }

/* Common questions: a black band, gold heading and questions, white answers. Native dropdowns, gold + turns to × when open. */
.faq{ background:var(--ink); color:var(--white); border-block:1px solid rgba(245,197,24,.35); }
.faq h2{ color:var(--gold); }
.faq p{ color:#d8d8da; }
.faq .lede{ max-width:640px; }
.faq-list{ margin-top:2rem; border-top:1px solid rgba(245,197,24,.3); }
.faq details{ border-bottom:1px solid rgba(245,197,24,.3); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem .25rem; font-weight:700; font-size:1.15rem; color:var(--gold);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; color:var(--gold); font-size:2rem; font-weight:400; line-height:1;
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ text-decoration:underline; text-underline-offset:5px; }
.faq summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.faq details p{ max-width:760px; padding:0 .25rem 1.5rem; font-size:1.02rem; line-height:1.7; }
.faq-more{ margin-top:2rem; }
.faq-more a{ color:var(--gold); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.coach{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; color:inherit; text-decoration:none; transition:border-color .2s; }
a.coach:hover{ border-color:var(--gold); }   /* each card opens that coach's page */
.coach .photo{ aspect-ratio:4/3; background:var(--black); display:grid; place-items:center; overflow:hidden; position:relative; }
.coach .photo img{ width:30%; opacity:.5; }
/* a real photo in place of the logo: the headshot (home page) or card photo (class pages) fills the card, a cut-out stands in it */
.coach .photo img.shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }   /* apply.py cuts these to 4:3 around the face */
.coach .photo img.cut{ width:auto; height:100%; object-fit:contain; object-position:50% 100%; opacity:1; }
.coach h3{ padding:1.1rem 1.25rem .2rem; }
.coach .role{ padding:0 1.25rem 1.25rem; color:var(--muted); font-size:.9rem; }
.coach .role:has(+ .rank){ padding-bottom:.4rem; }
.coach .rank{ padding:0 1.25rem 1.25rem; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
/* homepage coaches: every coach in a side scroller, four on screen */
.coach-track{ grid-auto-columns:calc((100% - 3 * 1.25rem) / 4); }
.coach-track .coach{ scroll-snap-align:start; }
@media (max-width:900px){ .coach-track{ grid-auto-columns:calc((100% - 1.25rem) / 2); } }
@media (max-width:600px){ .coach-track{ grid-auto-columns:70%; } .rev-head{ flex-direction:column; align-items:flex-start; gap:.5rem; } }
.coaches .book{ display:inline-block; margin-top:2rem; }
.coach-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.75rem; }
.coach-foot .rev-nav{ margin-top:0; }
.coach-foot .book{ margin-top:0; }

.loc{ background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:10px; padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.loc p + p{ margin-top:0; }
.loc a{ color:var(--gold); }
.loc .note{ color:var(--muted); font-size:.92rem; flex:1; }
.loc .dir{ align-self:flex-start; margin-top:.5rem; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gold); padding:.55rem 1rem; border-radius:4px; }

/* Locations: each room is a full-width bar, photo left, address right */
.loc-bar{
  display:grid; grid-template-columns:1.35fr 1fr; margin-top:1.5rem;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.loc-photo{ position:relative; min-height:430px; }
.loc-photo img, .loc-photo iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }   /* fills the frame, never sets its height */
/* the whole map is one link to Google Maps directions; a small gold tag says so on hover */
.loc-go{ position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; justify-content:flex-end; padding:1rem; }
.loc-go span{
  background:var(--gold); color:#000; font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.5rem .85rem; border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s;
}
.loc-go:hover span, .loc-go:focus-visible span{ opacity:1; transform:none; }
.loc-info{ padding:2.25rem 2.5rem; display:flex; flex-direction:column; justify-content:center; gap:.55rem; border-left:3px solid var(--gold); }
.loc-info h3{ font-size:2.4rem; line-height:1; margin-bottom:.4rem; }
.loc-info p + p{ margin-top:0; }
.loc-addr{ font-size:1.15rem; color:var(--white); line-height:1.45; }
.loc-info a{ color:var(--gold); }
.loc-meta{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:.4rem; }
.loc-info .note{ color:var(--muted); }
.loc-club{ font-size:.9rem; color:var(--muted); }
.loc-ig{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }   /* each room's own Instagram */
.loc-ig svg{ width:18px; height:18px; flex:none; }
.loc-ig:hover span{ text-decoration:underline; }
.loc-actions{ display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.loc-actions .book{ color:#000; }
.loc-actions .dir{ font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gold); padding:.6rem 1rem; border-radius:4px; }
/* phones: the two buttons side by side wrap their words, so give each the full width */
@media (max-width:480px){ .loc-actions{ flex-direction:column; align-items:stretch; } .loc-actions > *{ text-align:center; white-space:nowrap; } }
@media (max-width:860px){ .loc-bar{ grid-template-columns:1fr; } .loc-photo{ min-height:220px; } .loc-info{ border-left:0; border-top:3px solid var(--gold); } }
/* footer: logos and legal links, then the text messaging disclosure, then the business identity.
   The SMS wording and the legal name have to match /privacy/, /terms/ and /sms-opt-in/ for carrier verification. */
.foot{ border-top:1px solid rgba(245,197,24,.35); padding-block:3rem 2.5rem; background:var(--ink); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1.2fr 1fr; gap:2.5rem; align-items:start; }
/* the two marks sized to look equal: Embrace is wide and light, the AKB bee is compact and heavy */
.foot-logos{ display:flex; align-items:center; gap:2rem; }
.foot-logos > *{ flex:none; }   /* never squeeze a logo */
.foot-embrace{ height:56px; width:auto; max-width:none; }
.foot-akb{ height:80px; width:auto; max-width:none; }
.foot-div{ width:1px; height:64px; background:rgba(245,197,24,.35); }
.foot-col{ display:flex; flex-direction:column; gap:.6rem; }
.foot-col h4{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:400; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.foot-col a{ color:#d8d8da; font-weight:600; font-size:.92rem; width:fit-content; white-space:nowrap; }
.foot-col a:hover{ color:var(--gold); }
.foot-ig{ display:inline-flex; align-items:center; gap:.5rem; }
.foot-ig svg{ width:18px; height:18px; }
/* email opt-in under the logos */
.foot-email{ margin-top:1.75rem; display:grid; gap:.5rem; max-width:380px; }
.foot-email label{ color:var(--white); font-weight:700; font-size:.95rem; }
.foot-email-row{ display:flex; }
.foot-email input{ flex:1; min-width:0; padding:.75rem .9rem; border:1px solid var(--line); border-right:0; border-radius:6px 0 0 6px; background:var(--panel); color:var(--white); font:inherit; font-size:.92rem; }
.foot-email input:focus{ outline:2px solid var(--gold); outline-offset:-1px; }
.foot-email button{ border:0; border-radius:0 6px 6px 0; padding:0 1.2rem; background:var(--gold); color:#000; font-size:1rem; font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.foot-email button:hover{ filter:brightness(1.08); }
.foot-email-note{ color:var(--muted); font-size:.78rem; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1 / -1; } }
/* phones: the two marks at their full size are wider than the screen, so shrink them together */
@media (max-width:560px){ .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .foot-col a{ white-space:normal; } .foot-logos{ gap:1rem; } .foot-embrace{ height:32px; } .foot-akb{ height:46px; } .foot-div{ height:40px; } }
.foot-sms{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:900px; color:var(--muted); font-size:.82rem; line-height:1.6; }
.foot-sms b{ color:#d8d8da; }
.foot-legal{ margin-top:1.25rem; display:grid; gap:.2rem; }
.foot-legal p{ color:#8a8a90; font-size:.8rem; }
.foot-legal p + p{ margin-top:0; }
.foot-legal a{ color:#a9a9ad; }
.foot-legal a:hover{ color:var(--gold); }

/* ── buttons ── */
.book{ display:inline-block; border:0; cursor:pointer; }
.book.small{ font-size:1rem; padding:.7rem 1.4rem; }
.book.ghost{ background:none; color:var(--gold); border:1px solid var(--gold); }
.book:disabled{ opacity:.4; cursor:default; }
.link{ background:none; border:0; color:var(--gold); font:600 .95rem 'DM Sans',system-ui,sans-serif; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

/* ── pop-ups ── */
/* pop-ups (owner, 2026-11-03): a photo along the top that fades into the card, a gold top edge, a round close button over the
   photo. On phones each one is a sheet that slides up from the bottom of the screen. */
.pop{
  margin:auto; width:min(540px,calc(100% - 32px)); max-height:calc(100svh - 32px); overflow:auto;
  background:var(--ink); color:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:14px;
  padding:0; position:fixed; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.pop[open]{ animation:pop-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes pop-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.pop::backdrop{ background:rgba(0,0,0,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.pop-photo{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.pop-photo.short{ aspect-ratio:16/5; }
.pop-photo img{ width:100%; height:100%; object-fit:cover; }
.pop-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,0) 40%, var(--ink) 100%); }
.pop-body{ padding:.5rem 1.6rem 1.6rem; }
.pop h2{ font-size:clamp(1.7rem,5vw,2.3rem); margin-bottom:.8rem; }
.pop .x{ position:absolute; top:.75rem; right:.75rem; z-index:2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,11,12,.7); border:1px solid rgba(255,255,255,.18); color:var(--white); font-size:1.3rem; line-height:1; cursor:pointer; }
.pop .x:hover{ background:var(--ink); border-color:var(--gold); }
@media (max-width:600px){
  .pop{ margin:auto 0 0; width:100%; max-width:100%; max-height:88svh; border-radius:16px 16px 0 0; border-left:0; border-right:0; border-bottom:0; }
  .pop[open]{ animation:pop-up .35s cubic-bezier(.2,.7,.2,1); }
  .pop-body{ padding:.25rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom)); }
}
@keyframes pop-up{ from{ transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce){ .pop[open]{ animation:none; } }
.pop form{ display:grid; gap:1rem; margin-top:1.25rem; }
.pop label{ display:grid; gap:.4rem; font-size:.9rem; color:var(--muted); }
.pop input[type=email]{ padding:.8rem .9rem; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--white); font:inherit; }
.pop input:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.pop .book{ justify-self:start; font-size:1.1rem; padding:.75rem 1.8rem; }
.hidden{ display:none; }

.pop .q{ color:var(--white); font-weight:600; margin-bottom:.25rem; }
.pop .sub{ color:var(--muted); font-size:.9rem; margin-bottom:.5rem; }
.opts{ display:grid; gap:.6rem; margin-top:1rem; }
.opt{
  text-align:left; background:var(--panel); color:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:.9rem 1rem; font:600 .95rem 'DM Sans',system-ui,sans-serif; cursor:pointer;
}
.opt:hover{ border-color:var(--gold-deep); }
.opt.on{ border-color:var(--gold); background:rgba(245,197,24,.12); }
.qnav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
.step{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; letter-spacing:.15em; color:var(--muted); }
.picks{ display:grid; gap:1rem; margin-top:1rem; }
.pick{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px; padding:1rem 1.1rem; }
.pick h3{ font-size:1.15rem; margin-bottom:.5rem; }
.pick ul{ list-style:none; display:grid; gap:.25rem; margin-bottom:.9rem; font-size:.9rem; color:#d8d8da; }
.pick li small{ color:var(--muted); font-size:.8rem; }
.pick b{ color:var(--gold); font-weight:600; margin-right:.4rem; }
.pick p{ font-size:.9rem; margin-bottom:.9rem; }
.pick.club{ border-left-color:var(--white); }
/* quiz, simplified (owner, 2026-11-03): a progress bar, one class card for the room they picked, or the talk to someone form */
.qbar{ height:3px; background:var(--line); border-radius:2px; margin-top:.9rem; overflow:hidden; }
.qbar i{ display:block; height:100%; background:var(--gold); transition:width .3s ease; }
.pop .ages{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:-.4rem 0 .6rem; }
.times{ list-style:none; display:grid; gap:.1rem; margin:1rem 0 1.25rem; border-top:1px solid var(--line); }
.times li{ display:grid; grid-template-columns:6.5rem 1fr; column-gap:.75rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--white); }
.times b{ color:var(--gold); font-weight:600; }
.times li span{ grid-column:2; color:var(--muted); font-size:.82rem; }
.result-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.pop .result-actions .book{ justify-self:auto; }
.pop .fine{ color:var(--muted); font-size:.82rem; margin-top:.9rem; }
.pop .talk input[type=text], .pop .talk input[type=tel], .pop .talk textarea{ padding:.8rem .9rem; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--white); font:inherit; resize:vertical; }
.pop .talk .consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.78rem; line-height:1.5; }
.pop .talk .consent input{ margin-top:.2rem; width:18px; height:18px; flex:none; accent-color:var(--gold); }
.pop .talk .consent a{ color:var(--gold); }
.form-error{ color:#ff8a80; font-size:.85rem; }
.pick .when{ font-size:.95rem; color:var(--white); margin-bottom:.9rem; }
.pick .when b{ color:var(--gold); font-weight:600; margin-right:.2rem; }
.pick .when span{ display:block; color:var(--muted); font-size:.82rem; margin-top:.15rem; }
.pop .fine a{ color:var(--gold); }
.still{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; padding:1rem 1.1rem; border:1px dashed var(--line); border-radius:8px; }
.still p{ color:var(--white); font-weight:600; margin:0; }
#about,#coaches,#locations{ scroll-margin-top:var(--bar-h); }
@media (max-width:480px){
  .hero-cta{ font-size:1.15rem; padding:.9rem 1.5rem; }
}
@media (max-width:700px){
  .hero{ height:auto; aspect-ratio:1/1; }
  .hero h1 img{ width:min(320px,78vw); }
}


/* Class rows: photo on one side, name, summary and times on the other, swapping sides down the page.
   Behind each photo, home.js adds a blurred copy of it (.cr-glow) that drifts slower than the page, for depth.
   Each photo slides inside its frame as you scroll. On the row nearest the middle of the screen (home.js adds .on),
   the class name slides out from behind the photo in big gold outline; home.js sets --type so long names fit. */
.sec.about{ overflow-x:clip; }   /* the blur can reach past the screen edge; this stops sideways scrolling */
.class-rows{ display:grid; gap:clamp(3.5rem,8vw,6.5rem); margin-top:clamp(5rem,8vw,7rem); text-align:left; }
.cr{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2.25rem,5vw,4.5rem); align-items:center; color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.cr:nth-of-type(even){ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.cr:nth-of-type(even) .cr-media{ order:2; }
.cr-media{ display:block; position:relative; }
.cr-glow{
  position:absolute; inset:-6%; width:112%; height:112%; max-width:none; object-fit:cover; z-index:0; pointer-events:none;
  filter:blur(44px) saturate(1.5); opacity:.22; transform:translate3d(0,var(--drift,0),0); transition:opacity .7s ease;
}
.cr-photo{
  display:block; position:relative; z-index:1; aspect-ratio:3/2; overflow:hidden; border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease;
}
.cr-photo img{ width:100%; height:100%; object-fit:cover; transform:translate3d(0,calc(var(--drift,0px) * 1.2),0) scale(1.22); transition:filter .7s ease; }
.cr-media::after{
  content:attr(data-t); position:absolute; z-index:0; top:-.62em; left:-.04em; white-space:nowrap; pointer-events:none;
  font-family:var(--display); font-size:var(--type,clamp(4.4rem,10vw,8rem)); line-height:1; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px rgba(245,197,24,.5); opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.cr:nth-of-type(even) .cr-media::after{ left:auto; right:-.04em; }
.cr-text{ display:block; position:relative; z-index:2; }
.cr-ages{ display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.cr h3{ font-size:clamp(2.6rem,5vw,4rem); line-height:1; margin:.6rem 0 .9rem; transition:color .7s ease; }
.cr-desc{ display:block; color:#d8d8da; font-size:1.05rem; line-height:1.55; }
.cr-times{ margin-top:1.25rem; }
.cr-times div{ display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; padding:.2rem 0; font-size:.98rem; }
.cr-times dt{ color:var(--muted); }
.cr-times dd{ font-weight:600; }
.cr-more{ display:inline-block; margin-top:1.25rem; color:var(--gold); font-weight:600; }
.cr-more i{ font-style:normal; display:inline-block; transition:transform .4s ease; }
.cr-note{ margin-top:clamp(3rem,6vw,4.5rem); color:var(--muted); }
/* with the script, photos rest a little dim so the one that lifts stands out */
.cr-anim .cr-photo img{ filter:brightness(.8) saturate(.9); }
.cr.on .cr-photo{ box-shadow:0 28px 60px rgba(0,0,0,.6); }
.cr.on .cr-media::after{ opacity:1; transform:none; }
.cr.on .cr-photo img{ filter:none; }
.cr.on .cr-glow{ opacity:.6; }
.cr.on h3{ color:var(--gold); }
.cr.on .cr-more i{ transform:translateX(6px); }
/* tablets: even columns and a squarer photo, so the times stay on one line and the photo keeps up with the text */
@media (min-width:761px) and (max-width:960px){
  .cr, .cr:nth-of-type(even){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
  .cr-photo{ aspect-ratio:1/1; }
  .cr-times div{ grid-template-columns:6.5rem 1fr; gap:.5rem; }
}
@media (max-width:760px){
  .class-rows{ gap:5.5rem; margin-top:5rem; }
  .cr, .cr:nth-of-type(even){ grid-template-columns:1fr; gap:1.1rem; }
  .cr:nth-of-type(even) .cr-media{ order:0; }
  .cr-photo{ aspect-ratio:4/3; }
  .cr-photo img{ transform:translate3d(0,calc(var(--drift,0px) * .6),0) scale(1.22); }
  .cr-glow{ filter:blur(30px) saturate(1.5); }
  /* the outline title starts at the photo's left edge on every row and shows most of its height above the photo */
  .cr-media::after, .cr:nth-of-type(even) .cr-media::after{ top:-.68em; left:0; right:auto; -webkit-text-stroke:.75px rgba(245,197,24,.7); }
  .cr h3{ font-size:2.6rem; margin:.45rem 0 .6rem; }
  .cr-desc{ font-size:1rem; line-height:1.5; }
  .cr-times{ margin-top:.9rem; }
  .cr-more{ margin-top:.9rem; padding:.35rem 0; }
  .cr-times div{ grid-template-columns:6.5rem 1fr; }
}
/* the smallest phones: the label sits above its times so nothing wraps mid-line */
@media (max-width:360px){
  .cr-times div{ grid-template-columns:1fr; gap:0; padding:.35rem 0; }
}