/* ===========================================================
   UCC — TOKENS
=========================================================== */
:root{
  --ink-black:#000000;
  --paper-white:#F4F1EA;
  --pure-white:#FFFFFF;
  --concrete-900:#0A0A0A;
  --concrete-800:#161616;
  --concrete-700:#1F1F1F;
  --concrete-600:#2A2A2A;
  --concrete-500:#3a3a3a;
  --concrete-400:#5a5a5a;
  --bruise:#3B0A0A;
  --blood:#A11212;

  --f-display:"Anton","Archivo Black",Impact,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --nav-h:72px;
  --rule-w:1px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-stamp:cubic-bezier(.16,.84,.27,1);

  /* Mobile-first additions */
  --tap:44px;                              /* min touch target */
  --pad-x-mobile:18px;
  --pad-x-tablet:22px;
  --pad-x-desktop:56px;
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --section-py:clamp(56px, 12vw, 120px);   /* fluid section padding */
  --section-py-lg:clamp(72px, 16vw, 160px);
  --focus-ring:var(--blood);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  background:var(--ink-black); color:var(--paper-white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  background:var(--ink-black);
  color:var(--paper-white);
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
/* :where() gives this reset ZERO specificity so any classed button wins —
   the site's own buttons already override it, and native app pages dressed in
   this chrome (e.g. the booking-confirmation waiver form's shadcn buttons,
   loaded before this stylesheet) keep their borders/fills instead of being
   stripped to a borderless blob. Unclassed buttons still get the reset. */
:where(button){ font:inherit; color:inherit; background-color:transparent; border-width:0; padding:0; cursor:inherit; }

::selection{ background:var(--blood); color:var(--paper-white); }

/* ===========================================================
   TYPE PRIMITIVES
=========================================================== */
.display{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.86;
  color:var(--paper-white);
}
.mono{
  font-family:var(--f-mono);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
}
.mono-sm{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.body-lg{ font-size:18px; line-height:1.5; font-weight:300; color:var(--paper-white); opacity:.86; }
.body{ font-size:15px; line-height:1.6; font-weight:300; color:var(--paper-white); opacity:.78; }

/* hairline rule under section eyebrows */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  color:var(--paper-white); opacity:.7;
  margin-bottom:48px;
}
.eyebrow::before{
  content:""; display:block; width:42px; height:1px; background:var(--paper-white); opacity:.5;
}

/* ===========================================================
   LAYOUT
=========================================================== */
.wrap{
  width:100%;
  max-width:1640px;
  margin:0 auto;
  padding-left:max(var(--pad-x-mobile), var(--safe-l));
  padding-right:max(var(--pad-x-mobile), var(--safe-r));
}
@media (min-width:601px){ .wrap{ padding-left:max(var(--pad-x-tablet), var(--safe-l)); padding-right:max(var(--pad-x-tablet), var(--safe-r)); } }
@media (min-width:901px){ .wrap{ padding-left:max(var(--pad-x-desktop), var(--safe-l)); padding-right:max(var(--pad-x-desktop), var(--safe-r)); } }

section{ position:relative; }

/* ===========================================================
   GLOBAL OVERLAYS — grain, scanline, vignette, subliminal
=========================================================== */
.grain{
  position:fixed; inset:-50%;
  z-index:80;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1100ms steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-4%,3%)}
  40%{transform:translate(2%,-2%)}
  60%{transform:translate(-3%,-4%)}
  80%{transform:translate(4%,2%)}
  100%{transform:translate(-2%,3%)}
}

.scanline{
  position:fixed; inset:0; z-index:79; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.018) 3px, rgba(255,255,255,.018) 4px);
  mix-blend-mode:overlay;
}
/* (moving scanpass gradient removed) */

.vignette{
  position:fixed; inset:0; z-index:78; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* (subliminal / slice-glitch / invert-flash removed per direction —
   the only remaining glitch is the per-word outline glitch on the hero h1) */

/* ===========================================================
   NAV
=========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled{
  background:rgba(10,10,10,.78);
  border-bottom-color:rgba(255,255,255,.10);
}
.nav > *{ pointer-events:auto; }
/* Header grid: 1fr | auto | 1fr keeps the CENTER nav mathematically centered
   no matter what loads on either side. The header-actions buttons hydrate
   from the feed a beat after first paint — with flex space-between their
   arrival shoved the nav sideways; with this grid the middle column never
   moves. min-height on the right cell reserves the buttons' height so the
   bar doesn't grow when they pop in. */
.nav-inner{
  width:100%;
  max-width:1640px;
  margin:0 auto;
  padding:18px 56px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:24px;
  pointer-events:auto;
}
@media (max-width:900px){ .nav-inner{ padding:14px 22px; } }
@media (max-width:480px){ .nav-inner{ padding:12px 18px; } }

.brand{ display:flex; align-items:center; gap:14px; }
.badge{
  width:86px; height:86px;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  animation:heartbeat 3.4s ease-in-out infinite;
  overflow:hidden;
}
/* Shrink the badge on mobile so the nav header actually equals --nav-h.
   At 86px the badge alone makes the nav ~114px tall, which pushed the
   first item of the slide-out mobile menu behind the header. */
@media (max-width:900px){ .badge{ width:48px; height:48px; } }
@media (max-width:380px){ .badge{ width:42px; height:42px; } }
.badge img{ width:100%; height:100%; object-fit:contain; display:block; }
/* WIDE Branding logo (stamped data-bxi-logo-variant="long"): widen the badge
   box and hide the text wordmark — the wide logo carries the name itself. */
.brand:has(img[data-bxi-logo-variant="long"]) .badge{ width:260px; }
.brand:has(img[data-bxi-logo-variant="long"]) .brand-meta{ display:none; }
body.over-hero .badge{ background:transparent; }
@keyframes heartbeat{
  0%,90%,100%{ transform:scale(1); }
  92%{ transform:scale(1.06); }
  95%{ transform:scale(.99); }
}
.brand-meta{ display:flex; flex-direction:column; gap:2px; line-height:1; min-width:0; }
.brand-meta b{ font-family:var(--f-display); font-weight:400; font-size:24px; line-height:1; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.brand-meta i{ font-style:normal; font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; white-space:nowrap; }
@media (max-width:380px){
  .brand-meta b{ font-size:12px; }
  .brand-meta{ display:none; }
}

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ position:relative; font-family:var(--f-mono); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--paper-white);
  transition:right .25s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ right:0; }

/* Nav single source of truth: in-HTML links are only a no-JS fallback —
   bxi-nav.js swaps in the saved navigation then adds .bxi-nav-ready to reveal it,
   so stale/duplicate links never flash. Failsafe reveal after 1.5s if JS is off. */
[data-bxi-nav]{ opacity:0; animation:bxiNavReveal 0s linear 1.5s forwards; }
[data-bxi-nav].bxi-nav-ready{ opacity:1; animation:none; }
@keyframes bxiNavReveal{ to{ opacity:1; } }

/* Right-side actions: Free Trial + Cart grouped top-right. */
.nav-actions{ display:flex; align-items:center; gap:18px; justify-self:end; min-height:44px; }
.nav-inner > .brand{ justify-self:start; }
.nav-cart{ display:inline-flex; align-items:center; color:#F4F1EA; }
.nav-cart .bxi-cart-trigger{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid #F4F1EA; border-radius:0; background:transparent; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#F4F1EA; line-height:1; cursor:pointer; white-space:nowrap; transition:background .2s cubic-bezier(.22,1,.36,1), color .2s cubic-bezier(.22,1,.36,1); }
.nav-cart .bxi-cart-trigger:hover{ background:#F4F1EA; color:#000; }
.nav-cart .bxi-cart-trigger svg{ width:16px; height:16px; }
.nav-cart .bxi-cart-tbadge{ background:#A11212; color:#F4F1EA; border-radius:0; font-family:"JetBrains Mono",ui-monospace,monospace; }
.nav-cart .bxi-cart-trigger-text::before{ content:""; width:6px; height:6px; background:#A11212; display:inline-block; transition:background .2s cubic-bezier(.22,1,.36,1); }
.nav-cart .bxi-cart-trigger-text:hover::before{ background:#000; }
.nav-actions{ flex-shrink:0; }
@media (max-width:640px){ .nav-actions > .cta:not([data-bxi-hdr-login]){ display:none; } }

.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px;
  border:1px solid var(--paper-white);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-white);
  position:relative; overflow:hidden;
  transition:color .2s var(--ease);
  white-space:nowrap;
  flex-shrink:0;
}
@media (max-width:480px){ .cta{ padding:13px 14px; font-size:11px; letter-spacing:.18em; gap:8px; min-height:var(--tap); } }
.cta::before{
  content:""; position:absolute; inset:0;
  background:var(--paper-white);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .35s var(--ease);
  z-index:-1;
}
.cta:hover{ color:var(--ink-black); }
.cta:hover::before{ transform:scaleX(1); transform-origin:left center; }
.cta:active{ background:var(--blood); border-color:var(--blood); color:var(--paper-white); }
.cta:active::before{ background:var(--blood); }
.cta .dot{ width:6px; height:6px; background:var(--blood); display:inline-block; transition:background .2s var(--ease); }
.cta:hover .dot{ background:var(--ink-black); }

/* Two-row nav before hamburger (641-1100px): logo spans both rows on the left;
   brand text + Free Trial on the top row; links spread across a second row.
   display:contents promotes the badge + brand text to grid items so the logo
   can span both rows. (Same behavior as the homepage.) */
@media (max-width:1100px) and (min-width:641px){
  .nav-inner{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"logo brand cta" "logo links links"; align-items:center; column-gap:20px; row-gap:10px; }
  .brand{ display:contents; }
  .badge{ grid-area:logo; align-self:center; }
  .brand-meta{ grid-area:brand; align-self:center; }
  .nav .cta{ grid-area:cta; align-self:center; justify-self:end; }
  .nav-actions{ grid-area:cta; align-self:center; justify-self:end; }
  .nav-links{ grid-area:links; display:flex; align-items:center; justify-content:flex-start; gap:32px; }
}

/* ===========================================================
   HAMBURGER + MOBILE MENU
=========================================================== */
.hamburger{
  display:none;
  width:var(--tap); height:var(--tap);
  margin-left:8px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  cursor:pointer;
  background:transparent;
  border:1px solid rgba(244,241,234,.4);
}
.hamburger span{
  display:block; width:20px; height:1.5px;
  background:var(--paper-white);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
body.over-hero .hamburger{ border-color:rgba(0,0,0,.45); }
body.over-hero .hamburger span{ background:#000; }
.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media (max-width:640px){
  /* Links got too cramped for the two-row layout — fall back to the hamburger. */
  .nav-links{ display:none; }
  .hamburger{ display:inline-flex; }
  /* nav-links is display:none here → the base 3-col grid's auto-placement would
     drop .nav-actions into the empty CENTRE track, sliding the hamburger to the
     middle. Pin the actions to the right column so it stays top-RIGHT. */
  .nav-inner > .nav-actions{ grid-column: 3; }
  .nav-actions > .cta:not([data-bxi-hdr-login]){ display:none; }
}

.mobile-menu{
  position:fixed; inset:0;
  z-index:85;
  background:rgba(0,0,0,.97);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--nav-h) + 24px) 32px 32px;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:20px; }
.mobile-menu nav a{
  font-family:var(--f-display);
  font-size:clamp(32px, 9vw, 56px);
  line-height:1;
  text-transform:uppercase;
  color:var(--paper-white);
  letter-spacing:.005em;
  border-bottom:1px solid rgba(244,241,234,.1);
  padding-bottom:18px;
  transform:translateX(-24px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.mobile-menu nav a:nth-child(1){ transition-delay:.05s; }
.mobile-menu nav a:nth-child(2){ transition-delay:.10s; }
.mobile-menu nav a:nth-child(3){ transition-delay:.15s; }
.mobile-menu nav a:nth-child(4){ transition-delay:.20s; }
.mobile-menu nav a:nth-child(5){ transition-delay:.25s; }
.mobile-menu nav a:nth-child(6){ transition-delay:.30s; }
.mobile-menu.open nav a{ transform:translateX(0); opacity:1; }
.mobile-menu .mm-cta{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  border:none !important;
  padding:18px 22px;
  background:var(--paper-white); color:var(--ink-black);
  margin-top:8px;
  align-self:flex-start;
}
.mobile-menu .mm-cta .dot{ width:8px; height:8px; background:var(--blood); display:inline-block; }
.mobile-menu .mm-foot{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.55;
  padding-top:24px; border-top:1px solid rgba(244,241,234,.12);
}

/* ===========================================================
   HERO
=========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding:calc(var(--nav-h) + 56px) 0 70px;
  display:flex; align-items:flex-end;
  background:var(--paper-white);
  overflow:hidden;
  isolation:isolate;
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  /* color video, dimmed so the brightest strobe frames don't blow the letters out to white */
  filter:contrast(1.2) brightness(.62) saturate(1.2);
  background:#000;
  pointer-events:none;
  animation:heroKB 36s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKB{
  0%{ transform:scale(1.04) translate(0,0); }
  100%{ transform:scale(1.14) translate(-2%,1.5%); }
}
/* Pure-white overlay screened over video.
   screen(white, video) = white  -> video hidden on the page background.
   screen(black,  video) = video -> letters reveal full-color video.        */
.hero-mask{
  position:absolute; inset:0; z-index:1;
  background:#ffffff;
  /* lighten() with white = white everywhere; with the black letters = video. */
  mix-blend-mode:lighten;
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 56px) 0 70px;
  pointer-events:none;
  /* Use clip-path to leave a hole in the bottom-right where the CTA lives so
     the blend mode CANNOT touch the button area. */
}
.hero-mask .wrap{ width:100%; }

.hero-inner{ position:relative; width:100%; pointer-events:none; }
.hero-inner > *{ pointer-events:auto; }

.hero-meta{
  display:flex; gap:28px; align-items:center;
  margin-bottom:48px;
  color:#000; opacity:.7;
  flex-wrap:wrap;
}
@media (max-width:900px){
  .hero-meta{ gap:12px; margin-bottom:28px; font-size:10px; }
  .hero-meta .sep{ display:none; }
}
.hero-meta .pill{ display:inline-flex; align-items:center; gap:8px; }
.hero-meta .pill::before{
  content:""; width:6px; height:6px; background:var(--blood); display:inline-block;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ===========================================================
   MOBILE-DEDICATED HERO
   The cinematic cutout hero (.hero) is a desktop composition.
   Below 760px we hide it and show .hero-m — brand + tagline + CTAs.
=========================================================== */
.hero-m{ display:none; }

@media (max-width:900px){
  .hero{ display:none; }
  .hero-m{
    display:flex; flex-direction:column;
    position:relative;
    min-height:100vh;
    min-height:100svh;
    padding:calc(var(--nav-h) + 18px) max(var(--pad-x-tablet), var(--safe-l)) calc(26px + var(--safe-b)) max(var(--pad-x-tablet), var(--safe-r));
    background:var(--ink-black);
    overflow:hidden;
    isolation:isolate;
    color:var(--paper-white);
  }
}

.hero-m .hm-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(40%) contrast(1.15) brightness(.85) saturate(1.05);
  opacity:.78;
  pointer-events:none;
}
.hero-m::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.82) 100%),
    radial-gradient(ellipse at 70% 20%, rgba(0,0,0,.0), rgba(0,0,0,.25));
  pointer-events:none;
}

/* Mobile-only top-center logo — transparent PNG, no mask. */
.hm-logo{
  position:absolute;
  top:calc(var(--nav-h) + 6px);
  left:50%;
  transform:translateX(-50%);
  width:min(86vw, 420px);
  max-height:42vh;
  object-fit:contain;
  pointer-events:none;
  opacity:1;
  z-index:2;
}
.hero-m > *:not(.hm-video):not(.hm-logo){ position:relative; z-index:3; }

.hm-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  opacity:.78;
  margin:0 0 auto;
}
.hm-eyebrow::before{
  content:""; width:7px; height:7px; background:var(--blood); display:inline-block;
  animation:pulse 1.6s ease-in-out infinite;
}

.hm-title{
  margin:24px 0 18px;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(64px, 19vw, 130px);
  line-height:.85;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--paper-white);
}
.hm-title span{ display:block; will-change:transform, opacity; }
.hm-title .l2{ padding-left:7vw; }
.hm-title .period{ color:var(--blood); display:inline; }

/* Mobile wordmark RGB glitch — beefier offsets + transform jitter so the
   effect is unmistakable on Android Chrome and survives any GPU quirks
   that drop subtle text-shadows. */
.hm-title span.glitching{
  animation:wordGlitchMobile 520ms steps(10,end);
  will-change:transform, text-shadow;
}
@keyframes wordGlitchMobile{
  0%,100%{ text-shadow:none; transform:translate(0,0); }
  8%   { text-shadow:-14px 0 0 #ff003c, 14px 0 0 #00d9ff; transform:translate(-2px, 1px); }
  20%  { text-shadow: 10px 2px 0 #ff003c, -10px -2px 0 #00d9ff; transform:translate(3px, -1px); }
  32%  { text-shadow:-7px 0 0 #ff003c, 7px 0 0 #00d9ff;  transform:translate(-1px, 0); }
  48%  { text-shadow:18px 0 0 #ff003c, -18px 0 0 #00d9ff; transform:translate(2px, 2px); }
  62%  { text-shadow:-9px 1px 0 #ff003c, 9px -1px 0 #00d9ff; transform:translate(-3px, 0); }
  78%  { text-shadow: 6px 0 0 #ff003c, -6px 0 0 #00d9ff; transform:translate(1px, -1px); }
  92%  { text-shadow:-3px 0 0 #ff003c, 3px 0 0 #00d9ff;  transform:translate(0, 0); }
}

.hm-tag{
  font-family:var(--f-display);
  font-size:22px; line-height:1.15; text-transform:uppercase;
  margin:0 0 22px;
  letter-spacing:.005em;
  color:var(--paper-white);
}
.hm-tag .mk{ color:var(--blood); }

.hm-cta-stack{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }

.hm-cta-primary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px;
  background:var(--paper-white);
  color:var(--ink-black);
  font-family:var(--f-mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--paper-white);
  min-height:56px;
  position:relative; overflow:hidden;
}
.hm-cta-primary .hm-left{ display:inline-flex; align-items:center; gap:10px; }
.hm-cta-primary .hm-dot{ width:8px; height:8px; background:var(--blood); display:inline-block; }
.hm-cta-primary .hm-arrow{ display:inline-block; transition:transform .25s var(--ease); }
.hm-cta-primary:active{ background:var(--blood); border-color:var(--blood); color:var(--paper-white); }
.hm-cta-primary:active .hm-arrow{ transform:translateX(6px); }

.hm-cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hm-cta-secondary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 12px;
  border:1px solid rgba(244,241,234,.4);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-white);
  min-height:48px;
  text-align:center;
}
.hm-cta-secondary:active{ background:rgba(244,241,234,.08); border-color:var(--paper-white); }
.hm-cta-secondary svg{ width:14px; height:14px; flex-shrink:0; }

.hm-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(244,241,234,.15);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.7;
  flex-wrap:wrap; gap:6px;
}
.hm-meta .seps{ opacity:.4; }

.hero h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(82px, 17vw, 320px);
  line-height:.84;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
  color:#000;
}
.hero h1 .line{ display:block; }
.hero h1 .l2{ padding-left:9vw; }
.hero h1 .l3{ color:#000; }
.hero h1 .period{ color:var(--blood); display:inline-block; }

/* New hero wrap: hero + hoisted overlays (CTA, logo) all share this positioning context. */
.hero-wrap{ position:relative; }

/* Hoisted hero logo — FIXED to viewport top-right; sits at low z so the next
   section's solid background covers it as you scroll into it. */
.hero-logo-out{
  position:fixed;
  top:104px;
  right:calc(max(0px, (100vw - 1640px) / 2) + 56px);
  width:min(20vw, 280px);
  max-height:30vh;
  object-fit:contain;
  pointer-events:none;
  opacity:.5;
  z-index:1;
  transition:opacity .45s var(--ease);
}
.hero-logo-out.gone{ opacity:0; transition:opacity .4s var(--ease); }
.hero-logo-out{ transition:none; }
@media (max-width:900px){ .hero-logo-out{ display:none; } }

/* Hoisted CTA — sits in the bottom-right of .hero-wrap, outside .hero's blend mask. */
.hero-cta-fixed{
  position:absolute;
  bottom:74px;
  right:calc(max(0px, (100vw - 1640px) / 2) + 56px);
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:16px 24px;
  background:#000;
  color:var(--paper-white);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid #000;
  min-height:54px;
  min-width:320px;
  z-index:80;
  overflow:hidden;
  transition:color .25s var(--ease), background .25s var(--ease);
  opacity:0; animation:fadeUp 1s var(--ease) forwards; animation-delay:1.5s;
}
.hero-cta-fixed::before{
  content:""; position:absolute; inset:0;
  background:var(--blood);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .4s var(--ease);
  z-index:0;
}
.hero-cta-fixed > *{ position:relative; z-index:1; }
.hero-cta-fixed:hover::before{ transform:scaleX(1); transform-origin:left center; }
.hero-cta-fixed:hover{ border-color:var(--blood); }
.hero-cta-fixed .hc-left{ display:inline-flex; align-items:center; gap:12px; }
.hero-cta-fixed .hc-dot{ width:8px; height:8px; background:var(--blood); display:inline-block; transition:background .25s var(--ease); }
.hero-cta-fixed:hover .hc-dot{ background:var(--paper-white); }
.hero-cta-fixed .hc-arrow{ display:inline-block; transition:transform .3s var(--ease); }
.hero-cta-fixed:hover .hc-arrow{ transform:translateX(8px); }
@media (max-width:900px){ .hero-cta-fixed{ display:none; } }

/* Hero logo — absolute, top-right of hero, scrolls with the hero.
   Inside .hero's stacking context so button z-index can win. */
.hero-logo-inset{
  position:absolute;
  top:104px;
  right:56px;
  width:min(20vw, 280px);
  max-height:30vh;
  object-fit:contain;
  pointer-events:none;
  opacity:.5;
  z-index:2;
}
@media (max-width:900px){ .hero-logo-inset{ display:none; } }

/* Brand mark fixed in the top-right — aligned to the 1640px container so it
   never drifts to a giant monitor's edge. Visible only over light sections. */
.hero-logo{
  position:fixed;
  top:104px;
  right:calc(max(0px, (100vw - 1640px) / 2) + 56px);
  width:min(20vw, 280px);
  max-height:30vh;
  object-fit:contain;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease);
  z-index:70;
}
.hero-logo.visible{ opacity:.45; }
@media (max-width:900px){
  .hero-logo{ display:none; }
}

.hero-inner{ z-index:3; }

/* Repeat brand mark on the trial closer — inverted to white so it sits cleanly on the dark canvas */
.trial-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(58vw, 700px);
  max-height:78%;
  object-fit:contain;
  pointer-events:none;
  opacity:.10;
  filter:invert(1);
  z-index:0;
}

/* Per-letter explode chars */
.hero h1 .word .char,
.hero h1 .period{
  display:inline-block;
  will-change:transform, opacity;
}

/* RGB chromatic outline glitch — occurs on a random word every few seconds */
.hero h1 .word.glitching{
  animation:wordGlitch 460ms steps(9,end);
}
@keyframes wordGlitch{
  0%,100%{ text-shadow:none; }
  10%{ text-shadow: -8px 0 0 #ff003c, 8px 0 0 #00d9ff; }
  22%{ text-shadow:  6px 1px 0 #ff003c, -6px -1px 0 #00d9ff; }
  35%{ text-shadow: -4px 0 0 #ff003c, 4px 0 0 #00d9ff; }
  50%{ text-shadow: 10px 0 0 #ff003c, -10px 0 0 #00d9ff; }
  65%{ text-shadow: -5px 1px 0 #ff003c, 5px -1px 0 #00d9ff; }
  80%{ text-shadow:  4px 0 0 #ff003c, -4px 0 0 #00d9ff; }
  92%{ text-shadow: -2px 0 0 #ff003c, 2px 0 0 #00d9ff; }
}

/* Same chromatic glitch applied to the logo via drop-shadow (image equivalent of text-shadow) */
.hero-logo.glitching,
.hero-logo-out.glitching{
  animation:logoGlitch 460ms steps(9,end);
}
@keyframes logoGlitch{
  0%,100%{ filter:none; }
  10%{ filter:drop-shadow(-8px 0 0 #ff003c) drop-shadow(8px 0 0 #00d9ff); }
  22%{ filter:drop-shadow(6px 1px 0 #ff003c) drop-shadow(-6px -1px 0 #00d9ff); }
  35%{ filter:drop-shadow(-4px 0 0 #ff003c) drop-shadow(4px 0 0 #00d9ff); }
  50%{ filter:drop-shadow(10px 0 0 #ff003c) drop-shadow(-10px 0 0 #00d9ff); }
  65%{ filter:drop-shadow(-5px 1px 0 #ff003c) drop-shadow(5px -1px 0 #00d9ff); }
  80%{ filter:drop-shadow(4px 0 0 #ff003c) drop-shadow(-4px 0 0 #00d9ff); }
  92%{ filter:drop-shadow(-2px 0 0 #ff003c) drop-shadow(2px 0 0 #00d9ff); }
}

/* Mobile logo glitch — larger drop-shadows + transform jitter so it's
   visible at phone screen sizes and survives mobile GPU shortcuts. */
.hm-logo.glitching{
  animation:logoGlitchMobile 520ms steps(10,end);
  will-change:transform, filter;
}
@keyframes logoGlitchMobile{
  0%,100%{ filter:none; transform:translateX(-50%) translate3d(0,0,0); }
  8%   { filter:drop-shadow(-14px 0 0 #ff003c) drop-shadow(14px 0 0 #00d9ff); transform:translateX(-50%) translate3d(-3px, 2px, 0); }
  20%  { filter:drop-shadow(10px 2px 0 #ff003c) drop-shadow(-10px -2px 0 #00d9ff); transform:translateX(-50%) translate3d(4px, -1px, 0); }
  32%  { filter:drop-shadow(-7px 0 0 #ff003c) drop-shadow(7px 0 0 #00d9ff);  transform:translateX(-50%) translate3d(-2px, 1px, 0); }
  48%  { filter:drop-shadow(18px 0 0 #ff003c) drop-shadow(-18px 0 0 #00d9ff); transform:translateX(-50%) translate3d(3px, 3px, 0); }
  62%  { filter:drop-shadow(-9px 1px 0 #ff003c) drop-shadow(9px -1px 0 #00d9ff); transform:translateX(-50%) translate3d(-4px, 0, 0); }
  78%  { filter:drop-shadow(6px 0 0 #ff003c) drop-shadow(-6px 0 0 #00d9ff); transform:translateX(-50%) translate3d(2px, -2px, 0); }
  92%  { filter:drop-shadow(-3px 0 0 #ff003c) drop-shadow(3px 0 0 #00d9ff);  transform:translateX(-50%) translate3d(0, 0, 0); }
}

/* Simple per-word entrance stamp */
.word{ display:inline-block; }
/* Words are visible immediately (no fade-in stamp) — the page-load entrance is now silent. */
.hero h1 .word, .hero h1 .period{ display:inline-block; }
.hero h1 .word{
  display:inline-block;
}

.hero-foot{
  margin-top:46px;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.hero-sub{
  margin:0;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#000;
  opacity:0; animation:fadeUp 1s var(--ease) forwards; animation-delay:1.3s;
}
/* CTA wrapper — lives OUTSIDE the hero-mask stacking by being painted ABOVE
   the entire hero on its own layer. Solid white painter behind a solid black
   button so no blend mode can ever reach it. */
.hero-cta-shell{
  display:inline-block;
  position:relative;
  z-index:50;
  background:#fff;
  padding:0;
}
.hero-cta-shell::before{
  content:""; position:absolute; inset:-2px; background:#fff; z-index:-1;
}
.hero-cta{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:16px 24px;
  background:#000 !important;
  color:var(--paper-white);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid #000;
  min-height:54px;
  min-width:320px;
  position:relative; overflow:hidden;
  mix-blend-mode:normal;
  isolation:isolate;
  transition:color .25s var(--ease), background .25s var(--ease);
  opacity:0; animation:fadeUp 1s var(--ease) forwards; animation-delay:1.5s;
}
.hero-cta::before{
  content:""; position:absolute; inset:0;
  background:var(--blood);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .4s var(--ease);
  z-index:0;
}
.hero-cta > *{ position:relative; z-index:1; }
.hero-cta:hover::before{ transform:scaleX(1); transform-origin:left center; }
.hero-cta:hover{ border-color:var(--blood); }
.hero-cta .hc-left{ display:inline-flex; align-items:center; gap:12px; }
.hero-cta .hc-dot{ width:8px; height:8px; background:var(--blood); display:inline-block; transition:background .25s var(--ease); }
.hero-cta:hover .hc-dot{ background:var(--paper-white); }
.hero-cta .hc-arrow{ display:inline-block; transition:transform .3s var(--ease); }
.hero-cta:hover .hc-arrow{ transform:translateX(8px); }
@media (max-width:900px){ .hero-cta{ display:none; } }
.hero-sub::before{ content:"—"; opacity:.45; }
.hero-sub span{ opacity:.78; }
.hero-sub .sep{ opacity:.3; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:.86; transform:translateY(0)} }

.scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase; opacity:.6;
  z-index:2;
  color:#000;
}
.scroll-cue .tick{
  width:1px; height:42px; background:#000; opacity:.6;
  animation:tick 2.4s var(--ease) infinite;
  transform-origin:top center;
}
@keyframes tick{ 0%,100%{transform:scaleY(.3); opacity:.2} 50%{transform:scaleY(1); opacity:.8} }

.corner-marks{ position:absolute; inset:18px; pointer-events:none; z-index:2; }
.corner-marks span{ position:absolute; width:18px; height:18px; border:1px solid #000; opacity:.35; }
.corner-marks .tl{ top:0; left:0; border-right:none; border-bottom:none; }
.corner-marks .tr{ top:0; right:0; border-left:none; border-bottom:none; }
.corner-marks .bl{ bottom:0; left:0; border-right:none; border-top:none; }
.corner-marks .br{ bottom:0; right:0; border-left:none; border-top:none; }

/* ===========================================================
   MANIFESTO
=========================================================== */
.manifesto{
  padding:110px 0 110px;
  background:var(--concrete-900);
  border-top:1px solid var(--concrete-600);
}
.manifesto-grid{
  display:grid; grid-template-columns:1fr 1.25fr; gap:80px;
  align-items:start;
}
@media (max-width:980px){ .manifesto-grid{ grid-template-columns:1fr; gap:48px; } }

.manifesto-left{
  position:sticky; top:120px;
}
@media (max-width:980px){ .manifesto-left{ position:static; } }

.manifesto-left h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(48px, 6vw, 92px);
  line-height:.9; letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 0 24px;
}
.manifesto-left h2 .period{ color:var(--blood); }
.manifesto-left p{
  font-family:var(--f-body); font-weight:300;
  font-size:15px; line-height:1.65;
  color:var(--paper-white); opacity:.74;
  max-width:42ch; margin:0 0 32px;
}
.manifesto-left .ctas{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.manifesto-left .ctas .cta-big{
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 22px;
  border:1px solid var(--paper-white);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .3s var(--ease);
}
.manifesto-left .ctas .cta-big::before{
  content:""; position:absolute; inset:0; background:var(--paper-white);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .4s var(--ease); z-index:-1;
}
.manifesto-left .ctas .cta-big:hover{ color:var(--ink-black); }
.manifesto-left .ctas .cta-big:hover::before{ transform:scaleX(1); transform-origin:left center; }
.manifesto-left .ctas .cta-big .dot{ width:7px; height:7px; background:var(--blood); display:inline-block; }
.manifesto-left .ctas a.text{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; }
.manifesto-left .ctas a.text:hover{ opacity:1; color:var(--blood); }
.manifesto-left .stamp{
  margin-top:40px;
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--blood);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--blood);
  transform:rotate(-2deg);
}
.manifesto-left .stamp::before{ content:"◼"; font-size:8px; }

.rules{ display:grid; gap:0; }
.rule{
  display:grid; grid-template-columns:54px 1fr;
  align-items:baseline; gap:18px;
  padding:18px 0;
  border-top:1px solid var(--concrete-600);
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.rule.in{ opacity:1; transform:translateY(0); }
.rule:last-child{ border-bottom:1px solid var(--concrete-600); }
.rule .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--paper-white); opacity:.4;
}
.rule .txt{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.18; letter-spacing:-.01em;
  color:var(--paper-white);
}
.rule .txt s{ text-decoration:line-through; text-decoration-thickness:.04em; opacity:.4; }

/* PUNCH STAMP reveal — each rule lands like an inkstamp:
   slight rotation, scale, blur → sharp, plus a red hairline that draws underneath. */
.rule{ position:relative; overflow:visible; }
.rule .num,
.rule .txt{
  display:inline-block;
  transform:translateX(28px) scale(1.06) rotate(-1.2deg);
  filter:blur(6px);
  opacity:0;
  transition:transform .55s var(--ease-stamp), filter .4s var(--ease), opacity .5s var(--ease);
}
.rule.in .num,
.rule.in .txt{
  transform:translateX(0) scale(1) rotate(0);
  filter:blur(0);
  opacity:1;
}
/* stagger num vs txt for a 1-2 punch */
.rule.in .num{ transition-delay:.05s; }
.rule.in .txt{ transition-delay:.18s; }

/* The impact bar that draws under each rule — red, flashes on reveal. */
.rule::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px;
  background:var(--blood);
  transform:scaleX(0); transform-origin:left center;
}
.rule.in::after{
  animation:ruleBarFlash 1s var(--ease) .25s forwards;
}
@keyframes ruleBarFlash{
  0%   { transform:scaleX(0);    box-shadow:0 0 0 0 rgba(161,18,18,0); }
  55%  { transform:scaleX(1.02); box-shadow:0 0 14px 1px rgba(161,18,18,.7); }
  85%  { transform:scaleX(1);    box-shadow:0 0 4px 0 rgba(161,18,18,.25); }
  100% { transform:scaleX(1);    box-shadow:0 0 0 0 rgba(161,18,18,0); }
}

/* Red impact flash that briefly washes the rule on entry */
.rule::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0; right:0;
  background:linear-gradient(90deg, rgba(161,18,18,.18), rgba(161,18,18,0) 60%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
}
.rule.in::before{
  animation:ruleFlash .9s var(--ease) .15s forwards;
}
@keyframes ruleFlash{
  0%   { opacity:0; transform:translateX(-10%); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translateX(0); }
}

@media (max-width:760px){
  .rule{ grid-template-columns:46px 1fr; gap:12px; padding:13px 0; }
  .rule .txt{
    font-size:clamp(14px, 4vw, 22px);
    line-height:1.2;
    letter-spacing:-.018em;
  }
  .rule .num{ font-size:10px; opacity:.5; letter-spacing:.15em; white-space:nowrap; }
}
@media (max-width:380px){
  .rule .txt{ font-size:13.5px; letter-spacing:-.025em; }
  .rule{ grid-template-columns:42px 1fr; gap:10px; }
}

/* ===========================================================
   PROGRAMS
=========================================================== */
.programs{ background:var(--ink-black); border-top:1px solid var(--concrete-600); }
.programs-head{ padding-top:80px; padding-bottom:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.programs-head h2{
  font-family:var(--f-display); font-size:clamp(44px, 6.4vw, 96px); line-height:.9; margin:0; text-transform:uppercase;
}
.programs-head .right{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; max-width:34ch; text-align:right; line-height:1.6; }
@media (max-width:760px){ .programs-head .right{ text-align:left; } }
.programs-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--concrete-600);
}
@media (max-width:1000px){ .programs-grid{ grid-template-columns:1fr; } }

.program{
  position:relative;
  min-height:58vh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:30px 28px;
  border-right:1px solid var(--concrete-600);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  --p-idx:0;
}
.programs-grid .program:nth-child(2){ --p-idx:1; }
.programs-grid .program:nth-child(3){ --p-idx:2; }

/* Curtain reveal — a discipline-colored panel covers each tile and slides
   up to expose it, staggered across the three tiles. Colors match the
   schedule legend: Boxing = paper, Muay Thai = lime, Kids MMA = blood. */
.programs-grid .program::before{
  content:"";
  position:absolute; inset:0;
  background:var(--paper-white);
  transform:translateY(0);
  transition:transform .9s cubic-bezier(.65,0,.35,1);
  transition-delay:calc(0.05s + var(--p-idx) * 0.18s);
  z-index:6;
  pointer-events:none;
}
.programs-grid .program.in::before{ transform:translateY(-101%); }
.programs-grid .program:nth-child(1)::before{ background:var(--paper-white); }
.programs-grid .program:nth-child(2)::before{ background:#84cc16; }
.programs-grid .program:nth-child(3)::before{ background:var(--blood); }

/* Content cascade — h3, body, CTA settle in after the curtain leaves */
.programs-grid .program h3,
.programs-grid .program p,
.programs-grid .program .enter{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.programs-grid .program.in h3{
  opacity:1; transform:translateY(0);
  transition-delay:calc(.78s + var(--p-idx) * 0.18s);
}
.programs-grid .program.in p{
  opacity:1; transform:translateY(0);
  transition-delay:calc(.92s + var(--p-idx) * 0.18s);
}
.programs-grid .program.in .enter{
  opacity:1; transform:translateY(0);
  transition-delay:calc(1.06s + var(--p-idx) * 0.18s);
}

/* The lbl + stat fade in once the curtain has cleared */
.programs-grid .program .program-head,
.programs-grid .program .stat{
  opacity:0;
  transition:opacity .55s var(--ease);
}
.programs-grid .program.in .program-head,
.programs-grid .program.in .stat{
  opacity:1;
  transition-delay:calc(.72s + var(--p-idx) * 0.18s);
}

@media (prefers-reduced-motion:reduce){
  .programs-grid .program::before{ transition:none; transform:translateY(-101%); }
  .programs-grid .program h3,
  .programs-grid .program p,
  .programs-grid .program .enter,
  .programs-grid .program .program-head,
  .programs-grid .program .stat{
    opacity:1; transform:none; transition:none;
  }
}
.program:last-child{ border-right:none; }
@media (max-width:1000px){
  .program{ min-height:42vh; border-right:none; border-bottom:1px solid var(--concrete-600); }
  .program:last-child{ border-bottom:none; }
}

.program-img{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  filter:grayscale(100%) contrast(1.25) brightness(.55);
  opacity:.32;
  transition:opacity .6s var(--ease), filter .6s var(--ease), transform .8s var(--ease);
  transform:scale(1.04);
}
.program:hover .program-img{ opacity:.55; transform:scale(1); filter:grayscale(100%) contrast(1.4) brightness(.7); }
.program::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.85) 100%);
}

.program-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.program-head .lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; opacity:.7; text-transform:uppercase; }
.program-head .lbl::before{ content:"— "; opacity:.5; }

.program-body{ display:flex; flex-direction:column; gap:22px; }
.program h3{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px,4.2vw,58px); line-height:.92; margin:0; text-transform:uppercase;
}
.program p{
  font-family:var(--f-body); font-weight:300;
  font-size:14px; line-height:1.5; color:var(--paper-white); opacity:.74;
  max-width:36ch;
}
.program .enter{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  align-self:flex-start;
  padding-bottom:6px;
  border-bottom:1px solid var(--paper-white);
  opacity:.9;
  transition:padding .3s var(--ease), opacity .3s var(--ease);
}
.program:hover .enter{ padding-bottom:10px; opacity:1; }
.program .enter .arr{ display:inline-block; transition:transform .3s var(--ease); }
.program:hover .enter .arr{ transform:translateX(8px); }

.program .stat{
  position:absolute; top:30px; right:28px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; opacity:.4;
}

.programs-storefront{
  --bxi-sf-accent:var(--blood);
  --bxi-sf-display:var(--f-display);
  --bxi-sf-mono:var(--f-mono);
  --bxi-sf-page-pad:clamp(24px,5vw,72px);
  --bxi-sf-card-gap:clamp(22px,2.4vw,34px);
  padding-bottom:clamp(64px,7vw,112px);
}
.programs-storefront .bxi-sf-section{ margin:0; padding:0 0 54px; }
.programs-storefront .bxi-sf-section:last-child{ padding-bottom:0; }
.programs-storefront .bxi-sf-title{
  margin:0;
  padding:18px var(--bxi-sf-page-pad);
  border-top:1px solid var(--concrete-600);
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.62;
}
.programs-storefront .bxi-sf-title::before{ content:"— "; opacity:.6; }
.programs-storefront .bxi-sf-grid{
  width:min(1280px, calc(100vw - (var(--bxi-sf-page-pad) * 2)));
  margin:0 auto;
  gap:var(--bxi-sf-card-gap);
  justify-content:center;
}
.programs-storefront .bxi-sf-grid:not(.bxi-sf-grid--mono):not(.bxi-sf-grid--impact):not(.bxi-sf-grid--plans){
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),380px));
}
.programs-storefront .bxi-sf-grid--impact{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),370px));
}
.programs-storefront .bxi-sf-grid--mono{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),380px));
  gap:var(--bxi-sf-card-gap);
  border:0;
}
.programs-storefront .bxi-sfm{
  min-height:420px;
  border:1px solid var(--concrete-600);
  background:var(--ink-black);
}
.programs-storefront .bxi-sfm__body{ padding:clamp(22px,2.4vw,30px); }
.programs-storefront .bxi-sfm__name{ font-size:clamp(30px,3vw,44px); }
.programs-storefront .bxi-sfm__desc{ font-weight:300; color:var(--paper-white); opacity:.74; }
.programs-storefront .bxi-sfm__btn--book{
  background:var(--blood);
  background-image:none;
  border-color:var(--blood);
}
.programs-storefront .bxi-sfi,
.programs-storefront .bxi-sf-card{
  min-height:560px;
}
.programs-storefront .bxi-sf-card{
  border-radius:0;
  background:#fff;
  color:#111827;
  border-color:#d8dde6;
}
.programs-storefront .bxi-sfi{
  position:relative;
  isolation:isolate;
  border-radius:12px;
  border-color:rgba(244,241,234,.16);
  background:#0b0d0d;
  box-shadow:none;
  overflow:hidden;
}
.programs-storefront .bxi-sfi::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--bxi-sf-accent) 13%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 48%);
}
.programs-storefront .bxi-sfi > *{
  position:relative;
  z-index:1;
}
.programs-storefront .bxi-sfi__img{
  aspect-ratio:16/11;
}
.programs-storefront .bxi-sfi__body{
  padding:clamp(22px,2.1vw,28px);
  gap:13px;
}
.programs-storefront .bxi-sfi__name{
  font-size:clamp(34px,3.2vw,48px);
  line-height:.92;
  max-width:11ch;
}
.programs-storefront .bxi-sfi__desc{
  color:var(--paper-white);
  opacity:.72;
  font-size:15px;
}
.programs-storefront .bxi-sfi__specs{
  color:var(--paper-white);
  opacity:.82;
  border-top-color:rgba(244,241,234,.13);
  padding-top:16px;
}
.programs-storefront .bxi-sfi__book{
  color:#0A0A0A;
  background:
    linear-gradient(135deg, var(--bxi-sf-accent) 0%, color-mix(in srgb, var(--bxi-sf-accent) 62%, #16C9A6) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bxi-sf-accent) 44%, transparent),
    0 0 22px color-mix(in srgb, var(--bxi-sf-accent) 34%, transparent);
}
.programs-storefront .bxi-sfi__details{
  border-color:rgba(244,241,234,.26);
}
@media (max-width:1000px){
  .programs-storefront .bxi-sf-grid,
  .programs-storefront .bxi-sf-grid--impact,
  .programs-storefront .bxi-sf-grid--mono{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),380px));
  }
}
@media (max-width:560px){
  .programs-storefront{
    --bxi-sf-page-pad:16px;
    --bxi-sf-card-gap:16px;
  }
  .programs-storefront .bxi-sfm,
  .programs-storefront .bxi-sfi,
  .programs-storefront .bxi-sf-card{ min-height:0; }
}

/* ===========================================================
   COACHES
=========================================================== */
.coaches{ padding:160px 0 120px; background:var(--ink-black); border-top:1px solid var(--concrete-600); }
.coaches-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; gap:40px; }
.coaches-head h2{ font-family:var(--f-display); font-size:clamp(54px,9vw,160px); line-height:.9; margin:0; text-transform:uppercase; }
.coaches-head h2 .period{ color:var(--blood); }
.coaches-head .right{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.coaches-head .right a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--paper-white);
}
.coaches-head .right a:hover{ color:var(--blood); border-color:var(--blood); }

.coach-row{
  display:flex; gap:0;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  will-change:transform;
}
.coach-row.dragging{ cursor:grabbing; }
.coach-row img,
.coach-row a,
.coach-row .coach{ -webkit-user-drag:none; user-drag:none; }
.coach-row img{ pointer-events:none; }

.coach-row-wrap{
  position:relative;
  margin:0 calc(50% - 50vw);
  overflow:hidden;
  border-top:1px solid var(--concrete-600);
  border-bottom:1px solid var(--concrete-600);
}
.coach-row-wrap::before,
.coach-row-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.coach-row-wrap::before{ left:0; background:linear-gradient(to right, var(--ink-black), transparent); }
.coach-row-wrap::after{ right:0; background:linear-gradient(to left, var(--ink-black), transparent); }

.coach{
  flex:0 0 320px;
  position:relative;
  border-right:1px solid var(--concrete-600);
}
@media (max-width:760px){ .coach{ flex-basis:260px; } }
.coach .frame{
  position:relative; width:100%; aspect-ratio:3/4;
  background:var(--concrete-800);
  overflow:hidden;
  border:1px solid var(--concrete-600);
}
.coach .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.8));
}
.coach .frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%) contrast(1.15);
  transition:transform 1s var(--ease), filter .55s var(--ease);
}
.coach:hover .frame img{ transform:scale(1.04); filter:grayscale(0%) contrast(1.05) brightness(1); }
.coach .meta{
  position:absolute; bottom:14px; left:14px; right:14px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.coach .meta .name{
  font-family:var(--f-display);
  font-size:clamp(22px,1.8vw,28px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:0;
  min-width:0;
}
.coach .meta .disc{ font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; opacity:.72; }
.coach .cred{ margin-top:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.coach .stat{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; opacity:.6;
  padding:4px 8px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18);
}

/* ===========================================================
   WHY UCC — editorial split + testimonials
=========================================================== */
.why{
  padding:120px 0;
  background:var(--concrete-900);
  border-top:1px solid var(--concrete-600);
  position:relative;
}
.why::before{
  content:""; position:absolute; right:6%; top:14%; width:200px; height:200px;
  border:1px solid var(--blood); opacity:.22; transform:rotate(-3deg);
  pointer-events:none;
}
.why-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:start;
}
@media (max-width:1000px){ .why-grid{ grid-template-columns:1fr; gap:40px; } }

.quote{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(36px,4.6vw,68px);
  line-height:1.02; letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--paper-white);
  margin:0;
}
.quote .mark{ color:var(--blood); }
.quote-attr{
  margin-top:28px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; opacity:.5; text-transform:uppercase;
}
.why-body p{
  font-family:var(--f-body); font-weight:300;
  font-size:15px; line-height:1.65; color:var(--paper-white); opacity:.78;
  margin:0 0 18px;
}
.why-body p:first-child::first-letter{
  font-family:var(--f-display); font-size:58px; line-height:.8;
  float:left; padding:6px 12px 0 0; color:var(--blood);
}

.testimonials{
  margin-top:88px;
  padding-top:48px;
  border-top:1px solid var(--concrete-600);
}
.testimonials-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  margin-bottom:36px; flex-wrap:wrap;
}
.testimonials-head .title{
  font-family:var(--f-display); font-size:clamp(28px,3.4vw,44px);
  line-height:.95; text-transform:uppercase; margin:0;
}
.testimonials-head .meta{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; opacity:.45; text-transform:uppercase; }

.t-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--concrete-600);
}
@media (max-width:900px){ .t-grid{ grid-template-columns:1fr; } }
.t-card{
  padding:32px 28px 28px;
  border-right:1px solid var(--concrete-600);
  border-bottom:1px solid var(--concrete-600);
  display:flex; flex-direction:column; gap:18px;
  position:relative;
}
.t-card:last-child{ border-right:none; }
@media (max-width:900px){ .t-card{ border-right:none; } }
.t-card .qm{
  font-family:var(--f-display); font-size:62px; line-height:.7;
  color:var(--blood); opacity:.7;
  height:24px;
}
.t-card .q{
  font-family:var(--f-body); font-weight:300;
  font-size:16px; line-height:1.5;
  color:var(--paper-white); opacity:.92;
  margin:0;
}
.t-card .who{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:16px;
  border-top:1px dashed var(--concrete-600);
}
.t-card .who .name{ font-family:var(--f-display); font-size:18px; letter-spacing:.02em; text-transform:uppercase; }
/* === Testimonials: paged horizontal swipe layout === */
.testimonials-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:36px; flex-wrap:wrap;
}
.t-rating{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.t-rating .stars{
  position:relative;
  display:inline-block; width:96px; height:14px;
  background:
    repeating-linear-gradient(to right,
      transparent 0 1px,
      transparent 19px 20px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 1l1.8 3.7 4.1.6-3 2.9.7 4.1L7 10.4 3.4 12.3l.7-4.1-3-2.9 4.1-.6L7 1z' fill='%23000000' fill-opacity='.18'/></svg>") repeat-x left center;
  background-size:auto, 18px 14px;
}
.t-rating .s-fill{
  position:absolute; inset:0;
  width:98%; /* 4.9/5 */
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 1l1.8 3.7 4.1.6-3 2.9.7 4.1L7 10.4 3.4 12.3l.7-4.1-3-2.9 4.1-.6L7 1z' fill='%23A11212'/></svg>") repeat-x left center;
  background-size:18px 14px;
}
.t-rating .r-num{ color:#000; font-weight:600; }
.t-rating .r-sep{ opacity:.4; }
.t-rating .r-count{ color:#000; padding-bottom:2px; border-bottom:1px solid #000; }
.t-rating .r-count:hover{ color:var(--blood); border-color:var(--blood); }

.t-viewport{
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,.15);
  position:relative;
  touch-action:pan-y;
}
.t-pages{
  display:flex;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.t-page{
  flex:0 0 100%;
  min-width:0;
}
.t-page-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-left:1px solid rgba(0,0,0,.15);
}
@media (max-width:900px){
  .t-page-grid{ grid-template-columns:1fr; border-left:none; }
}
.t-page-grid .t-card{
  padding:32px 28px 28px;
  border-right:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
  display:flex; flex-direction:column; gap:18px;
  position:relative;
  background:transparent;
}
@media (max-width:900px){
  .t-page-grid .t-card{ border-right:none; }
}
.t-page-grid .t-card .q{
  font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.5;
  color:#000; opacity:.92; margin:0;
}
.t-page-grid .t-card .who{
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:16px;
  border-top:1px dashed rgba(0,0,0,.2);
}
.t-page-grid .t-card .who .name{ font-family:var(--f-display); font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:#000; }
.t-page-grid .t-card .who .tag{ font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; color:#000; }
.t-page-grid .t-card .qm{ font-family:var(--f-display); font-size:62px; line-height:.7; color:var(--blood); opacity:.7; height:24px; }

.t-foot{
  display:flex; justify-content:space-between; align-items:center; padding:32px 0 0;
  gap:24px; flex-wrap:wrap;
}
.t-dots{ display:flex; gap:10px; align-items:center; }
.t-dot{
  width:24px; height:2px; background:rgba(0,0,0,.25); display:inline-block;
  transition:background .25s var(--ease), width .25s var(--ease);
  cursor:pointer;
}
.t-dot.active{ background:var(--blood); width:42px; }

.t-card .who .tag{ font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; }
.t-card.hidden{ display:none !important; }

.t-foot{
  display:flex; justify-content:center; align-items:center; padding:40px 0 0;
}
.load-more{
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 24px;
  border:1px solid var(--paper-white);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-white);
  position:relative; overflow:hidden;
  background:transparent;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.load-more::before{
  content:""; position:absolute; inset:0; background:var(--paper-white);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .35s var(--ease); z-index:0;
}
.load-more > *{ position:relative; z-index:1; }
.load-more:hover{ color:var(--ink-black); }
.load-more:hover::before{ transform:scaleX(1); transform-origin:left center; }
.load-more .dot{ width:6px; height:6px; background:var(--blood); display:inline-block; }
.load-more .lm-count{ opacity:.5; }
.load-more:disabled{ opacity:.5; cursor:not-allowed; }
.testimonials-section .load-more{ border-color:#000; color:#000; }
.testimonials-section .load-more::before{ background:#000; }
.testimonials-section .load-more:hover{ color:var(--paper-white); }

/* ===========================================================
   SCHEDULE — day-column layout
=========================================================== */
.schedule{ padding:90px 0 110px; background:var(--ink-black); border-top:1px solid var(--concrete-600); }
.sched-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px; gap:32px; flex-wrap:wrap; }
.sched-head h2{ font-family:var(--f-display); font-size:clamp(42px,6.4vw,92px); line-height:.9; margin:0; text-transform:uppercase; }
.sched-head .week{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; }

.sched-meta{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin:8px 0 32px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--concrete-600);
}
.sched-meta .lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; opacity:.55; text-transform:uppercase; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--concrete-600); color:var(--paper-white); opacity:.7;
  background:transparent; cursor:pointer;
  transition:opacity .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter:hover{ opacity:1; }
.filter.active{ opacity:1; border-color:var(--paper-white); }
.filter.f-b.active{ border-color:var(--paper-white); }
.filter.f-m.active{ border-color:#84cc16; }
.filter.f-k.active{ border-color:var(--blood); color:var(--blood); }

/* Weekday row */
.sched-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.sched-weekend{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-top:12px; }
@media (max-width:980px){
  .sched-days{ grid-template-columns:1fr 1fr 1fr; }
  .sched-weekend{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .sched-days{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
  .sched-days{ grid-template-columns:1fr; }
}

.day-col{
  display:flex; flex-direction:column;
  border:1px solid var(--concrete-600);
  background:var(--concrete-900);
  min-height:200px;
  position:relative;
  transition:opacity .25s var(--ease);
}
.day-col[data-filter-out="1"]{ opacity:.25; }
.day-col.today{ outline:none; }
.day-col.today::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:var(--blood); z-index:2;
}
.day-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 16px;
  border-bottom:1px solid var(--concrete-600);
  font-family:var(--f-mono);
}
.day-head .name{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.85; }
.day-head .date{ font-size:9px; letter-spacing:.18em; opacity:.45; }
.day-col.today .day-head .name{ color:var(--blood); opacity:1; }
.day-col.today .day-head .date{ color:var(--blood); opacity:.85; }

.day-body{ display:flex; flex-direction:column; padding:4px 0; }

.cls{
  display:grid; grid-template-columns:3px 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--concrete-700);
  transition:background .2s var(--ease), opacity .2s var(--ease);
  cursor:pointer;
  text-align:left;
  background:transparent;
}
.cls:first-child{ border-top:none; }
.cls:hover{ background:var(--concrete-800); }
.cls .bar{ width:3px; height:100%; min-height:24px; background:var(--paper-white); align-self:stretch; }
.cls.b .bar{ background:var(--paper-white); }
.cls.m .bar{ background:#84cc16; }
.cls.k .bar{ background:var(--blood); }
.cls.o .bar{ background:transparent; border-left:1px dashed var(--concrete-500); margin-left:1px; width:0; }
.cls .nm{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cls .nm .name{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-white); line-height:1.2; }
.cls .nm .sub{ font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; opacity:.5; text-transform:uppercase; }
.cls .time{ font-family:var(--f-display); font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--paper-white); white-space:nowrap; }
.cls[data-disc-out="1"]{ opacity:.18; }

/* Weekend cards use a slightly different layout */
.day-col.weekend{ min-height:140px; }

/* Now-playing chip */
.now-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blood);
}
.now-chip::before{
  content:""; width:7px; height:7px; background:var(--blood); display:inline-block; border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}

.sched-foot{ margin-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.legend{ display:flex; gap:18px; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:8px; }
.legend i{ font-style:normal; display:inline-block; width:12px; height:2px; background:var(--paper-white); }
.legend .m i{ background:#84cc16; }
.legend .k i{ background:var(--blood); }
.legend .o i{ background:transparent; border-top:1px dashed var(--concrete-500); }
=========================================================== */
.schedule{ padding:90px 0 100px; background:var(--ink-black); border-top:1px solid var(--concrete-600); }
.sched-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:32px; flex-wrap:wrap; }
.sched-head h2{ font-family:var(--f-display); font-size:clamp(42px,6.4vw,92px); line-height:.9; margin:0; text-transform:uppercase; }
.sched-head .week{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; opacity:.55; text-transform:uppercase; }

/* (legacy grid-week / .cls.empty / .sched-hint CSS removed — replaced by day-column layout above) */

/* ===========================================================
   TRIAL CTA
=========================================================== */
.trial{
  padding:200px 0;
  background:var(--ink-black);
  border-top:1px solid var(--concrete-600);
  position:relative; overflow:hidden;
  text-align:center;
}
.trial::before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:90vmin; height:90vmin;
  border:1px solid var(--concrete-600);
  border-radius:50%;
  pointer-events:none;
  opacity:.5;
}
.trial::after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:55vmin; height:55vmin;
  border:1px solid var(--concrete-600);
  border-radius:50%;
  pointer-events:none;
  opacity:.4;
}
.trial-inner{ position:relative; z-index:2; }
.trial .eye{
  display:inline-block; margin-bottom:42px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.32em; opacity:.5; text-transform:uppercase;
}
.trial h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(56px, 9vw, 168px);
  line-height:.9; letter-spacing:.005em;
  text-transform:uppercase;
  margin:0 auto;
  max-width:14ch;
}
.trial h2 .period{ color:var(--blood); }
.trial .sub{
  margin:34px auto 56px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  opacity:.6; max-width:60ch;
}
.trial .cta-big{
  display:inline-flex; align-items:center; gap:18px;
  padding:22px 32px;
  border:1px solid var(--paper-white);
  font-family:var(--f-mono); font-size:13px; letter-spacing:.32em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .3s var(--ease);
}
.trial .cta-big::before{
  content:""; position:absolute; inset:0; background:var(--paper-white);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease); z-index:-1;
}
.trial .cta-big:hover{ color:var(--ink-black); }
.trial .cta-big:hover::before{ transform:scaleX(1); transform-origin:left center; }
.trial .cta-big .dot{ width:8px; height:8px; background:var(--blood); }

/* ===========================================================
   FOOTER
=========================================================== */
.foot,
footer{
  padding:80px 0 36px;
  border-top:1px solid var(--concrete-600);
  background:var(--concrete-900);
}
.foot .foot-grid,
.foot-grid{
  display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:48px;
  margin-bottom:80px;
}
@media (max-width:560px){ .foot .foot-grid,.foot-grid{ grid-template-columns:1fr; gap:28px; } }
@media (min-width:561px) and (max-width:1119px){ .foot .foot-grid,.foot-grid{ grid-template-columns:1fr 1fr; gap:32px 40px; } }
/* Only go to the full 5-column row once there's genuinely room — otherwise the
   headings (e.g. "THE CLUB") cram together (as on the narrower /book + /account
   pages). Below 1120px it stays a clean 2-column layout. */
@media (min-width:1120px){ .foot .foot-grid,.foot-grid{ grid-template-columns:minmax(240px,1.4fr) repeat(4,minmax(150px,1fr)); align-items:start; gap:40px; } }
.foot-grid .col,
.foot .col{ min-width:0; }
/* Typography marked !important so the app's injected theme styles (which set
   h1–h6 sizes + body/p/a font-family with !important on native /book + /account
   pages) can't blow up the footer headings. */
.foot-grid .col h4,
.foot .col h4{
  font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.24em !important; text-transform:uppercase !important;
  opacity:.5; margin:0 0 16px;
}
.foot-grid .col p, .foot-grid .col a,
.foot .col p, .foot .col a{
  font-family:var(--f-body) !important; font-weight:300; font-size:14px !important; line-height:1.6; opacity:.85; display:block;
}
.foot-grid .col a:hover,.foot .col a:hover{ color:var(--blood); }
.foot-brand{ display:flex; flex-direction:column; gap:18px; }
.foot-brand .badge,.foot .foot-brand .badge{ width:108px; height:108px; animation:none; }
.foot-brand p,.foot .foot-brand p{ font-family:var(--f-display) !important; font-size:20px !important; line-height:1.1; text-transform:uppercase !important; opacity:.86; }

.foot .foot-bottom,
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:36px; border-top:1px solid var(--concrete-600);
  font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.22em !important; text-transform:uppercase !important; opacity:.4;
  flex-wrap:wrap; gap:16px;
}

/* ===========================================================
   REVEAL UTILITIES
=========================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-img{ opacity:0; transform:scale(1.04); transition:opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.reveal-img.in{ opacity:1; transform:scale(1); }

/* letter-by-letter */
.chars .ch{ display:inline-block; opacity:0; transform:translateY(.4em); }
.chars.in .ch{ animation:ch .5s var(--ease-stamp) forwards; }
.chars.in .ch{ animation-delay:calc(var(--i) * 18ms); }
@keyframes ch{ from{ opacity:0; transform:translateY(.4em); filter:blur(2px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  /* Blanket motion-kill removed: phones that enable "reduce motion" (often via
     battery saver) were getting the scroll reveals flattened on mobile. The brand
     reveals now play regardless (owner's call); only the heavy looping bg below
     stays calm. */
  .hero-bg{ animation:none; }
  .grain{ display:none; }
  .scanline::after{ display:none; }
  .subliminal{ display:none; }
}

/* Nav adapts when over the light hero */
body.over-hero .nav{
  background:rgba(244,241,234,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(0,0,0,.08);
}
body.over-hero .nav.scrolled{ background:rgba(244,241,234,.82); border-bottom-color:rgba(0,0,0,.14); }
body.over-hero .nav-links a,
body.over-hero .brand-meta b,
body.over-hero .brand-meta i{ color:#000; }
body.over-hero .badge{ background:transparent; }
body.over-hero .cta{ color:#000; border-color:#000; }
body.over-hero .cta::before{ background:#000; }
body.over-hero .cta:hover{ color:var(--paper-white); }

/* ===========================================================
   LIGHT SECTIONS — paper-white background variant
=========================================================== */
.light-section{
  background:var(--paper-white) !important;
  color:#000;
  border-top-color:rgba(0,0,0,.12) !important;
}
.light-section .eyebrow{ color:#000; opacity:.7; }
.light-section .eyebrow::before{ background:#000; opacity:.5; }
.light-section h2,
.light-section h3,
.light-section .quote{ color:#000; }
.light-section p{ color:#000; opacity:.78; }
.light-section .stamp{ border-color:var(--blood); color:var(--blood); }

/* TESTIMONIALS as its own section */
.testimonials-section{
  padding:90px 0 100px;
  background:var(--paper-white);
  border-top:1px solid var(--concrete-600);
}
.testimonials-section .eyebrow{ margin-bottom:32px; }
.testimonials-section .testimonials{ margin:0; padding:0; border-top:none; }

/* MANIFESTO on light */
.manifesto.light-section .rule{ border-top-color:rgba(0,0,0,.18); }
.manifesto.light-section .rule:last-child{ border-bottom-color:rgba(0,0,0,.18); }

/* TESTIMONIALS on light — block sits inside its own section */
.testimonials.light-section{
  margin:0;
  padding:0;
  border-top:none;
}
.testimonials.light-section .testimonials-head .title{ color:#000; }
.testimonials.light-section .testimonials-head .meta{ color:#000; opacity:.55; }
.testimonials.light-section .t-grid{ border-top-color:rgba(0,0,0,.15); }
.testimonials.light-section .t-card{
  border-right-color:rgba(0,0,0,.15);
  border-bottom-color:rgba(0,0,0,.15);
}
.testimonials.light-section .t-card .q{ color:#000; opacity:.92; }
.testimonials.light-section .t-card .who{ border-top-color:rgba(0,0,0,.2); }
.testimonials.light-section .t-card .who .name{ color:#000; }
.testimonials.light-section .t-card .who .tag{ color:#000; opacity:.55; }
@media (max-width:900px){
  .testimonials.light-section{ padding-left:22px; padding-right:22px; }
}
.manifesto.light-section .rule .num{ color:#000; opacity:.45; }
.manifesto.light-section .rule .txt{ color:#000; }
.manifesto.light-section .rule::after{ background:var(--blood); }
.manifesto.light-section .manifesto-left p{ color:#000; opacity:.78; }
.manifesto.light-section .manifesto-left .ctas .cta-big{
  border-color:#000; color:#000;
}
.manifesto.light-section .manifesto-left .ctas .cta-big::before{ background:#000; }
.manifesto.light-section .manifesto-left .ctas .cta-big:hover{ color:var(--paper-white); }
.manifesto.light-section .manifesto-left .ctas a.text{ color:#000; opacity:.55; }

/* TRIAL on light */
.trial.light-section::before,
.trial.light-section::after{ border-color:rgba(0,0,0,.15); }
.trial.light-section .eye{ color:#000; opacity:.55; }
.trial.light-section .sub{ color:#000; opacity:.6; }
.trial.light-section .cta-big{
  background:#000; color:var(--paper-white);
  border-color:#000;
}
.trial.light-section .cta-big::before{ background:var(--blood); }
.trial.light-section .cta-big:hover{ color:var(--paper-white); border-color:var(--blood); }

/* ===========================================================
   MEMBERSHIPS (home page)
=========================================================== */
.memberships-home{ padding:90px 0 100px; background:var(--concrete-900); border-top:1px solid var(--concrete-600); }
.memberships-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:48px; }
.memberships-head h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(42px, 6.4vw, 92px); line-height:.9; margin:0; text-transform:uppercase;
}
.memberships-head h2 .period{ color:var(--blood); }
.memberships-head .text-link{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding-bottom:6px; border-bottom:1px solid var(--paper-white);
  white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease), padding .2s var(--ease);
}
.memberships-head .text-link:hover{ color:var(--blood); border-color:var(--blood); padding-bottom:10px; }

.mh-plans{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--concrete-600); border-left:1px solid var(--concrete-600);
}
@media (max-width:1000px){ .mh-plans{ grid-template-columns:1fr; } }
.mh-plan{
  position:relative;
  border-right:1px solid var(--concrete-600);
  border-bottom:1px solid var(--concrete-600);
  padding:36px 30px 32px;
  display:flex; flex-direction:column;
  background:var(--concrete-900);
  min-height:520px;
}
.mh-plan.featured{ background:#0d0d0d; border-color:var(--blood); z-index:1; }
.mh-plan.featured::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--blood); }
.mh-tag{
  position:absolute; top:12px; right:12px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--blood); border:1px solid var(--blood); padding:5px 9px;
}
.mh-num{ font-family:var(--f-mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.5; margin-bottom:16px; }
.mh-plan h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(36px, 4.2vw, 56px); line-height:.94; text-transform:uppercase; margin:0 0 10px; letter-spacing:.005em; }
.mh-plan h3 .period{ color:var(--blood); }
.mh-sub{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; margin:0 0 26px; }
.mh-price{
  display:flex; align-items:baseline; gap:12px;
  border-top:1px solid var(--concrete-600); padding-top:22px; margin-bottom:6px;
}
.mh-price .c{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; opacity:.5; }
.mh-price .v{ font-family:var(--f-display); font-size:clamp(56px, 7vw, 84px); line-height:.86; color:var(--paper-white); }
.mh-price .per{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; opacity:.6; }
.mh-reg{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; margin:6px 0 28px; }
.mh-plan ul{
  list-style:none; padding:0; margin:0 0 28px;
  border-top:1px solid var(--concrete-600); padding-top:22px;
  display:flex; flex-direction:column; gap:11px;
}
.mh-plan ul li{
  font-family:var(--f-body); font-weight:300; font-size:14px; line-height:1.5;
  opacity:.86; padding-left:18px; position:relative;
}
.mh-plan ul li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--blood); font-family:var(--f-mono); }
.mh-join{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 20px;
  background:var(--paper-white); color:var(--ink-black);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--paper-white);
  position:relative; overflow:hidden;
  isolation:isolate;
  transition:color .25s var(--ease);
}
.mh-join::before{ content:""; position:absolute; inset:0; background:var(--blood); transform:scaleX(0); transform-origin:right center; transition:transform .35s var(--ease); z-index:0; }
.mh-join > *{ position:relative; z-index:1; }
.mh-join:hover{ color:var(--paper-white); }
.mh-join:hover::before{ transform:scaleX(1); transform-origin:left center; }
.mh-join .dot{ width:7px; height:7px; background:var(--blood); display:inline-block; transition:background .25s var(--ease); }
.mh-join:hover .dot{ background:var(--paper-white); }

.memberships-storefront,
.packs-storefront{
  --bxi-sf-accent:var(--blood);
  --bxi-sf-display:var(--f-display);
  --bxi-sf-mono:var(--f-mono);
}
.memberships-storefront .bxi-sf-section,
.packs-storefront .bxi-sf-section{ margin:0; }
.memberships-storefront .bxi-sf-title,
.packs-storefront .bxi-sf-title{ display:none; }
.memberships-storefront .bxi-sf-grid--plans,
.packs-storefront .bxi-sf-grid--plans{
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--concrete-600);
  border-left:1px solid var(--concrete-600);
}
.memberships-storefront .bxi-sfpm,
.packs-storefront .bxi-sfpm{
  min-height:520px;
  border:0;
  border-right:1px solid var(--concrete-600);
  border-bottom:1px solid var(--concrete-600);
  background:var(--concrete-900);
}
.memberships-storefront .bxi-sfpm--featured,
.packs-storefront .bxi-sfpm--featured{
  background:#0d0d0d;
  box-shadow:inset 0 2px 0 var(--blood);
}
.memberships-storefront .bxi-sfpm__name,
.packs-storefront .bxi-sfpm__name{ font-size:clamp(36px,4.2vw,56px); }
.memberships-storefront .bxi-sfpm__price b,
.packs-storefront .bxi-sfpm__price b{ font-size:clamp(56px,7vw,84px); }
@media (max-width:1000px){
  .memberships-storefront .bxi-sf-grid--plans,
  .packs-storefront .bxi-sf-grid--plans{ grid-template-columns:1fr; }
}

/* Extras */
.mh-extras{ margin-top:70px; padding-top:48px; border-top:1px solid var(--concrete-600); }
.mh-extras-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:28px; gap:24px; flex-wrap:wrap; }
.mh-stamp{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 12px; border:1px solid var(--blood);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--blood);
}
.mh-stamp::before{ content:""; width:6px; height:6px; background:var(--blood); display:inline-block; }
.mh-extras-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--concrete-600); border-left:1px solid var(--concrete-600);
}
@media (max-width:760px){ .mh-extras-grid{ grid-template-columns:1fr; } }
.mh-extra{
  padding:28px 28px;
  border-right:1px solid var(--concrete-600);
  border-bottom:1px solid var(--concrete-600);
  display:flex; flex-direction:column; gap:12px;
}
.mh-extras-num{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; opacity:.45; text-transform:uppercase; }
.mh-extras-name{ font-family:var(--f-display); font-size:28px; line-height:1; text-transform:uppercase; }
.mh-extras-price{ display:flex; align-items:baseline; gap:10px; }
.mh-extras-price .c{ font-family:var(--f-mono); font-size:10px; opacity:.5; }
.mh-extras-price .v{ font-family:var(--f-display); font-size:42px; line-height:.9; }
.mh-extras-price .u{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; opacity:.55; }
.mh-extra p{ font-family:var(--f-body); font-weight:300; font-size:14px; line-height:1.55; opacity:.74; margin:0; max-width:42ch; }

/* ===========================================================
   TRIAL MODAL
=========================================================== */
.trial-modal{
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:stretch; justify-content:center;
}
.trial-modal.open{ display:flex; }
.tm-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.tm-panel{
  position:relative;
  margin:auto;
  width:min(960px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  background:var(--paper-white);
  color:var(--ink-black);
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  overflow:hidden;
  animation:tmIn .35s var(--ease);
}
@keyframes tmIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

.tm-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 28px;
  border-bottom:1px solid rgba(0,0,0,.15);
  flex-shrink:0;
}
.tm-step{ font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.6; }
.tm-step b{ color:var(--blood); font-weight:600; }
.tm-close{
  width:36px; height:36px;
  font-size:24px; line-height:1;
  font-family:var(--f-mono);
  color:#000; background:transparent;
  border:1px solid rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tm-close:hover{ background:#000; color:var(--paper-white); }

.tm-body{ flex:1; overflow-y:auto; padding:32px 32px 8px; }
.tm-screen{ display:flex; flex-direction:column; gap:18px; }
.tm-screen[hidden]{ display:none; }
.tm-screen h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px, 5vw, 56px); line-height:.95;
  text-transform:uppercase; letter-spacing:.005em;
  margin:0;
}
.tm-screen h2 .period{ color:var(--blood); }
.tm-screen .lede{
  font-family:var(--f-body); font-weight:300; font-size:15px; line-height:1.55;
  opacity:.74; margin:0 0 8px; max-width:60ch;
}

/* People list */
.tm-people{ display:flex; flex-direction:column; gap:18px; }
.tm-person{
  position:relative;
  border:1px solid rgba(0,0,0,.18);
  padding:22px 22px 20px;
  background:#fff;
}
.tm-person .tm-p-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px;
}
.tm-person .tm-p-head .lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; opacity:.55; }
.tm-person .tm-remove{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blood); background:transparent; border:none; cursor:pointer; padding:4px;
}
.tm-person .tm-remove:hover{ text-decoration:underline; }
.tm-person[data-i="0"] .tm-remove{ display:none; }

.tm-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
@media (max-width:640px){ .tm-fields{ grid-template-columns:1fr; } }
.tm-field{
  display:flex; flex-direction:column;
  position:relative;
}
.tm-field label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.55; margin-bottom:6px;
}
.tm-field label .req{ color:var(--blood); }
.tm-field input{
  font-family:var(--f-body); font-size:15px; padding:10px 0 8px;
  background:transparent; border:none; border-bottom:1px solid rgba(0,0,0,.25);
  color:#000; outline:none;
  transition:border-color .2s var(--ease);
}
.tm-field input:focus{ border-color:#000; }
.tm-field.full{ grid-column:1 / -1; }
.tm-motiv{ margin-top:8px; }
.tm-motiv textarea{
  font-family:var(--f-body); font-size:15px; padding:12px 14px;
  background:#fff; border:1px solid rgba(0,0,0,.25);
  color:#000; outline:none; resize:vertical; min-height:80px;
  transition:border-color .2s var(--ease);
}
.tm-motiv textarea:focus{ border-color:#000; }
.tm-motiv.invalid textarea{ border-color:var(--blood); }
.tm-motiv.invalid .err{ opacity:1; }
.tm-field .err{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--blood); opacity:0; margin-top:6px; }
.tm-field.invalid input{ border-color:var(--blood); }
.tm-field.invalid .err{ opacity:1; }

.tm-add{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:transparent;
  border:1px dashed rgba(0,0,0,.35);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#000;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tm-add:hover:not(:disabled){ border-color:var(--blood); color:var(--blood); }
.tm-add:disabled{ opacity:.35; cursor:not-allowed; }

/* Step 2 — calendar + class picker */
.tm-cal-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:10px;
  align-items:start;
}
@media (max-width:760px){ .tm-cal-grid{ grid-template-columns:1fr; } }

.tm-cal{ border:1px solid rgba(0,0,0,.18); padding:16px; }
.tm-cal-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.tm-cal-head button{
  width:30px; height:30px; border:1px solid rgba(0,0,0,.2); background:transparent;
  cursor:pointer; font-size:14px; line-height:1;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tm-cal-head button:hover{ background:#000; color:#fff; }
.tm-cal-head button:disabled{ opacity:.3; cursor:not-allowed; }
.tm-cal-month{ font-weight:600; }

.tm-cal-grid-dow,
.tm-cal-grid-days{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.tm-cal-grid-dow{ margin-bottom:6px; }
.tm-cal-grid-dow span{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  text-align:center; padding:4px 0; opacity:.55;
}
.tm-day{
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13px;
  background:transparent; border:1px solid transparent;
  cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.tm-day:hover:not(:disabled){ border-color:#000; }
.tm-day.today{ color:var(--blood); }
.tm-day.selected{ background:#000; color:var(--paper-white); border-color:#000; }
.tm-day.empty{ visibility:hidden; }
.tm-day:disabled{ opacity:.3; cursor:not-allowed; }

.tm-classes{
  border:1px solid rgba(0,0,0,.18);
  padding:16px;
  min-height:240px;
}
.tm-classes h3{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 14px; opacity:.6;
}
.tm-classes .empty-msg{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.45; padding:48px 0; text-align:center;
}
.tm-class{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.15);
  margin-bottom:6px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  width:100%;
  font:inherit;
  color:#000;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.tm-class:hover{ background:rgba(0,0,0,.04); }
.tm-class.active{ background:#000; color:#fff; border-color:#000; }
.tm-class.active .tm-c-sub{ color:#fff; opacity:.8; }
.tm-class .tm-c-nm{ display:flex; flex-direction:column; gap:2px; }
.tm-class .tm-c-name{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.tm-class .tm-c-sub{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; opacity:.55; text-transform:uppercase; }
.tm-class .tm-c-time{ font-family:var(--f-display); font-size:18px; letter-spacing:.02em; }

/* Footer */
.tm-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px 24px;
  border-top:1px solid rgba(0,0,0,.15);
  flex-shrink:0;
  gap:16px;
  flex-wrap:wrap;
}
.tm-foot .tm-progress{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; opacity:.55; text-transform:uppercase;
}
.tm-foot .tm-actions{ display:flex; gap:12px; align-items:center; }

.tm-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer;
  position:relative; overflow:hidden;
  isolation:isolate;
  border:1px solid #000;
}
.tm-btn-primary{
  background:#000; color:var(--paper-white);
}
.tm-btn-primary::before{ content:""; position:absolute; inset:0; background:var(--blood); transform:scaleX(0); transform-origin:right center; transition:transform .35s var(--ease); z-index:0; }
.tm-btn-primary > *{ position:relative; z-index:1; }
.tm-btn-primary:hover:not(:disabled)::before{ transform:scaleX(1); transform-origin:left center; }
.tm-btn-primary:hover:not(:disabled){ border-color:var(--blood); }
.tm-btn-primary:disabled{ opacity:.4; cursor:not-allowed; background:#444; border-color:#444; }
.tm-btn-secondary{
  background:transparent; color:#000;
}
.tm-btn-secondary:hover{ background:#000; color:var(--paper-white); }
.tm-btn .dot{ width:7px; height:7px; background:var(--blood); display:inline-block; }

/* Success */
.tm-success{
  text-align:center; padding:60px 24px;
}
.tm-success .stamp{
  display:inline-block;
  font-family:var(--f-display); font-size:clamp(48px, 7vw, 96px);
  line-height:1; text-transform:uppercase; letter-spacing:.005em;
  color:var(--blood);
  padding:18px 32px; border:3px solid var(--blood);
  transform:rotate(-3deg);
  margin-bottom:32px;
}
.tm-success p{ font-family:var(--f-body); font-weight:300; font-size:17px; line-height:1.6; opacity:.84; max-width:48ch; margin:0 auto 12px; }

/* ============================================================
   TRIAL MODAL — MOBILE LAYOUT
   Full-screen panel, stacked full-width buttons (so Back / Next /
   Submit / Done can never run off the side), tighter padding, and a
   visible scroll cue when the body overflows. The "scroll for more"
   chip auto-hides once the user is at the bottom.
============================================================ */
@media (max-width:760px){
  .trial-modal{ align-items:stretch; }
  .tm-panel{
    margin:0;
    width:100%;
    max-width:100%;
    height:100vh;
    height:100svh;
    max-height:none;
    border:none;
  }

  .tm-header{
    padding:12px 16px calc(12px + 0px);
    padding-top:calc(12px + var(--safe-t));
  }
  .tm-step{ font-size:10px; letter-spacing:.2em; }
  .tm-close{ width:var(--tap); height:var(--tap); font-size:22px; }

  .tm-body{
    padding:18px 16px 12px;
    /* Soft inner shadow at the bottom hints there's more to scroll */
    background:
      linear-gradient(var(--paper-white) 30%, rgba(244,241,234,0)) center top,
      linear-gradient(rgba(244,241,234,0), var(--paper-white) 70%) center bottom,
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), transparent) center top,
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), transparent) center bottom;
    background-repeat:no-repeat;
    background-size:100% 24px, 100% 24px, 100% 8px, 100% 8px;
    background-attachment:local, local, scroll, scroll;
  }

  .tm-screen{ gap:14px; }
  .tm-screen h2{ font-size:clamp(28px, 8vw, 38px); }
  .tm-screen .lede{ font-size:14px; }

  .tm-person{ padding:16px 14px 14px; }
  .tm-person .tm-p-head{ margin-bottom:12px; }
  .tm-fields{ gap:12px; }
  .tm-field input{ font-size:16px; /* prevent iOS zoom on focus */ padding:10px 0 8px; }
  .tm-motiv textarea{ min-height:64px; font-size:16px; padding:10px 12px; }
  .tm-motiv label{ font-size:10px; }

  .tm-add{ width:100%; justify-content:center; padding:12px 16px; }

  /* Calendar (step 2) — make the day buttons big enough to tap */
  .tm-cal{ padding:12px; }
  .tm-day{ font-size:14px; }
  .tm-classes{ padding:12px; min-height:180px; }
  .tm-class{ padding:14px 12px; }
  .tm-class .tm-c-time{ font-size:16px; }

  /* Footer: vertical stack, full-width buttons, all visible at once.
     Order matters — the primary action sits on top of the back action. */
  .tm-foot{
    flex-direction:column-reverse;
    align-items:stretch;
    padding:12px 16px calc(12px + var(--safe-b));
    gap:10px;
  }
  .tm-foot .tm-actions{
    display:flex;
    flex-direction:column-reverse;   /* primary above secondary */
    gap:8px;
    width:100%;
  }
  .tm-foot .tm-btn{
    width:100%;
    justify-content:center;
    padding:14px 18px;
    min-height:50px;
    font-size:12px;
    letter-spacing:.2em;
  }
  .tm-foot .tm-progress{
    text-align:center;
    font-size:10px;
  }

  /* Subtle "scroll for more" cue on step 1 — pulses down then fades when
     the user scrolls. CSS-only via :has() where supported. */
  .tm-screen[data-step="1"]{ position:relative; }
  .tm-screen[data-step="1"]::after{
    content:"↓ scroll for more";
    position:sticky; bottom:0;
    display:block;
    margin:8px -16px 0;
    padding:8px 16px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
    text-transform:uppercase; opacity:.55; text-align:center;
    background:linear-gradient(to top, var(--paper-white) 30%, rgba(244,241,234,0));
    pointer-events:none;
    animation:tmScrollHint 1.6s ease-in-out infinite;
  }
  @keyframes tmScrollHint{
    0%,100%{ transform:translateY(0); opacity:.55; }
    50%    { transform:translateY(3px); opacity:.85; }
  }

  /* Success screen padding tighter on phone */
  .tm-success{ padding:36px 16px; }
  .tm-success .stamp{ padding:14px 24px; margin-bottom:24px; font-size:clamp(40px, 12vw, 64px); }
  .tm-success p{ font-size:15px; }
}

/* When success screen is showing, drop the scroll hint */
.tm-screen.tm-success::after{ display:none !important; }
.tm-success .summary{
  margin:32px auto 0; max-width:50ch; padding:20px;
  background:#fff; border:1px solid rgba(0,0,0,.15); text-align:left;
}
.tm-success .summary dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.55; }
.tm-success .summary dd{ font-family:var(--f-body); font-size:15px; margin:2px 0 12px; }

/* a11y skip */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--paper-white); color:var(--ink-black); padding:10px 14px; font-family:var(--f-mono); }

/* ===========================================================
   ============== MOBILE-FIRST IMPROVEMENTS ==================
   Performance, tap targets, a11y, fluid spacing.
   Loaded last so it overrides any conflicting rule above.
=========================================================== */

/* --- A11y: focus rings -------------------------------------- */
:focus{ outline:none; }
a:focus-visible,
button:focus-visible,
.cta:focus-visible,
.hamburger:focus-visible,
.hero-cta:focus-visible,
.hero-cta-fixed:focus-visible,
.hm-cta-primary:focus-visible,
.hm-cta-secondary:focus-visible,
.mh-join:focus-visible,
.mh-extras a:focus-visible,
.filter:focus-visible,
.cls:focus-visible,
.load-more:focus-visible,
.t-dot:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

/* --- Min touch targets -------------------------------------- */
.nav-links a{ padding:8px 0; }              /* expand hit box without changing look */
.t-dot{ padding:14px 6px; height:auto; background-clip:content-box; }
.filter{ min-height:var(--tap); display:inline-flex; align-items:center; }
.mobile-menu nav a{ min-height:var(--tap); display:flex; align-items:center; }

/* --- Reduced motion: kill heavy looping animations -----------
   Note: we intentionally leave the brief word/logo glitch (≤480ms) and
   scroll-driven motion intact. Android battery saver and "Remove
   animations" accessibility toggles flip this signal, and the brief
   glitch is part of the brand experience the operator explicitly wants
   on phones. Continuous loops (heartbeat, grain, scanline) are still
   silenced. */
@media (prefers-reduced-motion:reduce){
  .badge{ animation:none; }
  .hero-video{ animation:none; }
  .grain{ display:none; }
  .scanline{ display:none; }
  .vignette{ display:none; }
  .scroll-cue .tick{ animation:none; }
  .hero-meta .pill::before,
  .hm-eyebrow::before,
  .now-chip::before{ animation:none; }
}

/* --- Mobile (≤760px): trim heavy effects, scale spacing ----- */
@media (max-width:760px){
  /* Battery / perf: kill decorative loops on small screens */
  .badge{ animation:none; }
  .grain{ display:none; }
  .scanline{ display:none; }
  .vignette{ background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%); }
  .hero-video{ animation:none; }

  /* Fluid section padding */
  .manifesto,
  .programs,
  .coaches,
  .why,
  .schedule,
  .memberships-home,
  .testimonials-section,
  .light-section.testimonials,
  .light-section.manifesto{
    padding-top:var(--section-py);
    padding-bottom:var(--section-py);
  }
  .trial{ padding-top:var(--section-py-lg); padding-bottom:var(--section-py-lg); }
  .coaches{ padding-top:var(--section-py); padding-bottom:var(--section-py); }
  .programs-head{ padding-top:48px; padding-bottom:28px; gap:18px; }
  .testimonials{ margin-top:48px; padding-top:32px; }
  .coaches-head{ margin-bottom:36px; gap:24px; }

  /* Tighter eyebrow rhythm */
  .eyebrow{ margin-bottom:28px; }

  /* Readable micro type — bump 9-10px mono captions to 11px */
  .mono-sm,
  .programs-head .right,
  .day-head .date,
  .cls .nm .sub,
  .legend,
  .foot-bottom,
  .meta-disc,
  .mh-extras-num,
  .brand-meta i{ font-size:11px; }

  /* Memberships cards: don't force 520px tall on phone */
  .mh-plan{ min-height:0; padding:28px 22px 26px; }
  .mh-plan h3{ font-size:clamp(34px, 9.5vw, 48px); }
  .mh-plans{ border-left:none; }
  .mh-plan{ border-right:none; }
  .mh-plan .mh-price .v{ font-size:48px; }

  /* Schedule: tap targets on filter pills + class rows */
  .cls{ padding:14px 16px; min-height:var(--tap); }
  .day-head{ padding:14px 14px; }

  /* Programs: keep min-height reasonable on phone */
  .program{ min-height:54vh; padding:28px 22px; }
  .program p{ font-size:14px; }

  /* Trial CTA: bigger tap target, breathing room */
  .trial .cta-big{ padding:18px 24px; min-height:54px; gap:14px; font-size:12px; letter-spacing:.24em; }
  .trial .sub{ margin:24px auto 40px; }

  /* Coach row gradient fade lighter on phone */
  .coach-row-wrap::before,
  .coach-row-wrap::after{ width:32px; }

  /* Footer breathing */
  footer{ padding:56px 0 calc(28px + var(--safe-b)); }
  .foot-grid{ margin-bottom:48px; gap:28px; }
}

/* --- Very small screens (≤420px) ---------------------------- */
@media (max-width:420px){
  .hero-meta{ font-size:9.5px; gap:8px; }
  .hm-cta-secondary{ font-size:10.5px; }
  .programs-head h2,
  .sched-head h2,
  .memberships-head h2{ font-size:clamp(36px, 12vw, 56px); }
}

/* --- Safe-area-inset for fixed nav -------------------------- */
.nav-inner{
  padding-left:max(var(--pad-x-mobile), var(--safe-l));
  padding-right:max(var(--pad-x-mobile), var(--safe-r));
}
@media (min-width:601px){
  .nav-inner{ padding-left:max(var(--pad-x-tablet), var(--safe-l)); padding-right:max(var(--pad-x-tablet), var(--safe-r)); }
}
@media (min-width:901px){
  .nav-inner{ padding-left:max(var(--pad-x-desktop), var(--safe-l)); padding-right:max(var(--pad-x-desktop), var(--safe-r)); }
}

/* Mobile menu: respect safe-area-bottom + top.
   The extra 48px buffer above --nav-h prevents the first menu item from
   slipping behind the actual nav (which can be a bit taller than --nav-h
   if the badge or any nav-inner item is larger). */
.mobile-menu{
  padding-top:calc(var(--nav-h) + 48px + var(--safe-t));
  padding-bottom:calc(32px + var(--safe-b));
  padding-left:max(32px, var(--safe-l));
  padding-right:max(32px, var(--safe-r));
}

/* --- Pointer / hover capabilities --------------------------- */
@media (hover:none){
  /* Disable hover-driven scale/shifts on touch — they trigger on tap and feel buggy */
  .coach:hover .frame img{ transform:none; filter:grayscale(100%) contrast(1.15); }
  .program:hover .enter{ padding-bottom:6px; }
  .program:hover .enter .arr{ transform:none; }
}

/* --- Mobile / touch: program tiles permanently in "hover" state ----
   The hover reveal never fires on touch, so the program images read as
   washed-out dark on phones. Anchor them to the brighter state by default
   on mobile and touch devices. */
@media (max-width:900px), (hover:none){
  .program-img{
    opacity:.62;
    filter:grayscale(100%) contrast(1.4) brightness(.78);
    transform:scale(1);
  }
  .program::after{
    background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%);
  }
}

/* --- Print: hide nav/footer chrome -------------------------- */
@media print{
  .nav, .mobile-menu, .hamburger, .grain, .scanline, .vignette, .hero-video, .hm-video,
  .hero-cta-fixed, .hero-logo-out, .hm-logo, .scroll-cue{ display:none !important; }
  body{ background:#fff; color:#000; }
  *{ color:#000 !important; background:#fff !important; }
}


/* ===========================================================
   Experience / service DETAIL-PAGE layout (.xp-*)
   Shared so the NATIVE /services/[slug] page (which links this
   stylesheet via the injected chrome) gets the same layout as the
   bucket experience.html (which also has these inline).
=========================================================== */
.xp-wrap{ max-width:1180px; margin:0 auto; padding:calc(var(--nav-h,72px) + 56px) 24px 96px; color:var(--paper-white); }
.xp-crumb{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; display:flex; gap:10px; flex-wrap:wrap; }
.xp-crumb a{ color:inherit; text-decoration:none; }
.xp-crumb a:hover{ opacity:1; }
.xp-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:end; margin-top:28px; padding-bottom:clamp(42px,6vw,72px); border-bottom:1px solid var(--concrete-700); }
@media (max-width:880px){ .xp-hero{ grid-template-columns:1fr; } }
.xp-hero h1{ font-family:var(--f-display); font-weight:400; font-size:clamp(48px,6.6vw,92px); line-height:.9; text-transform:uppercase; margin:0 0 18px; }
.xp-lead{ font-size:17px; line-height:1.65; opacity:.85; max-width:560px; }
.xp-specs{ display:flex; gap:0; margin-top:30px; border:1px solid var(--concrete-600); max-width:560px; }
.xp-spec{ flex:1; padding:14px 18px; border-right:1px solid var(--concrete-600); }
.xp-spec:last-child{ border-right:0; }
.xp-spec .k{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.5; margin-bottom:6px; }
.xp-spec .v{ font-family:var(--f-display); font-size:22px; text-transform:uppercase; }
.xp-media{ aspect-ratio:4/3; background:var(--concrete-800) center/cover no-repeat; border:1px solid var(--concrete-600); }
.xp-ctas{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.xp-book{ display:inline-flex; align-items:center; gap:12px; padding:18px 30px; background:var(--blood); color:var(--paper-white); font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:0; }
.xp-book:hover{ filter:brightness(1.15); }
.xp-book .dot{ width:8px; height:8px; border-radius:999px; background:var(--paper-white); }
.xp-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(34px,5vw,70px); align-items:stretch; margin-top:clamp(48px,6vw,72px); }
@media (max-width:980px){ .xp-layout{ grid-template-columns:1fr; } }
.xp-main{ min-width:0; }
.xp-sec{ margin-bottom:clamp(54px,7vw,86px); max-width:760px; }
.xp-sec h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(34px,5vw,64px); line-height:.96; text-transform:uppercase; margin:0 0 20px; }
.xp-sec .accent{ color:var(--blood); }
.xp-eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--blood); display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.xp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--blood); }
.xp-desc{ font-size:16px; line-height:1.85; opacity:.84; }
.xp-desc h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(22px,2.6vw,30px); line-height:1.05; text-transform:uppercase; letter-spacing:.01em; color:var(--paper-white); opacity:1; margin:36px 0 14px; }
.xp-desc h3:first-child{ margin-top:0; }
.xp-desc h4{ font-family:var(--f-mono); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood); opacity:1; margin:28px 0 10px; }
.xp-desc p{ margin:0 0 16px; }
.xp-desc p:last-child{ margin-bottom:0; }
.xp-desc strong{ color:var(--paper-white); opacity:1; font-weight:600; }
.xp-desc ul{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:8px; }
.xp-desc li{ position:relative; padding-left:20px; }
.xp-desc li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:6px; border-left:2px solid var(--blood); border-bottom:2px solid var(--blood); transform:rotate(-45deg); }
.xp-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:680px){ .xp-cards{ grid-template-columns:1fr; } }
.xp-info-card{ display:flex; gap:14px; min-height:124px; padding:22px; border:1px solid var(--concrete-700); background:rgba(255,255,255,.035); }
.xp-info-card::before{ content:""; width:12px; height:8px; margin-top:7px; flex:none; border-left:2px solid var(--blood); border-bottom:2px solid var(--blood); transform:rotate(-45deg); }
.xp-info-card h4{ margin:0 0 8px; font-size:17px; line-height:1.25; }
.xp-info-card p{ margin:0; color:var(--paper-white); opacity:.68; font-size:14px; line-height:1.6; }
.xp-bullets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; }
@media (max-width:680px){ .xp-bullets{ grid-template-columns:1fr; } }
.xp-bullet{ display:flex; align-items:flex-start; gap:13px; min-width:0; padding:6px 0; color:var(--paper-white); opacity:.76; font-size:15px; line-height:1.55; }
.xp-bullet::before{ content:""; width:10px; height:7px; margin-top:8px; flex:none; border-left:2px solid var(--blood); border-bottom:2px solid var(--blood); transform:rotate(-45deg); }
.xp-bullet p{ margin:0; color:inherit; }
.xp-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.xp-gallery__item{ aspect-ratio:1; border:1px solid var(--concrete-700); background:var(--concrete-800) center/cover no-repeat; }
.xp-gallery__item:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:680px){ .xp-gallery{ grid-template-columns:repeat(2,1fr); } .xp-gallery__item:first-child{ grid-column:span 2; } }
.xp-booking{ position:sticky; top:calc(var(--nav-h,72px) + 22px); border:1px solid var(--concrete-700); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); padding:28px; box-shadow:0 22px 70px rgba(0,0,0,.32); }
@media (max-width:980px){ .xp-booking{ position:static; } }
.xp-booking__price{ font-family:var(--f-display); font-size:clamp(44px,5vw,64px); line-height:.9; margin:14px 0 20px; text-transform:uppercase; }
.xp-booking__price small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; opacity:.56; }
.xp-booking__specs{ display:grid; margin:0 0 24px; }
.xp-booking__spec{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--concrete-700); }
.xp-booking__spec .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.48; }
.xp-booking__spec .v{ text-align:right; font-size:14px; font-weight:600; }
.xp-booking .xp-book{ width:100%; justify-content:center; }
.xp-fine{ margin:14px auto 0; max-width:28ch; text-align:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; opacity:.38; line-height:1.55; }

/* ===========================================================
   NATIVE /blog — BRUTALIST SKIN
   The app's native /blog index renders app markup with .blog-* hook classes.
   This stylesheet is already loaded on /blog (via the injected
   account-chrome.html), so these rules give that page the Unity look. Scoped to
   .blog-root (set on the native blog page root) so they never leak elsewhere.
=========================================================== */
.blog-root, .blog-root *{ border-radius:0 !important; }
.blog-root{ color:var(--paper-white); }

/* hero (page.tsx: eyebrow + display title + lede) */
.blog-root .blog-link{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--blood); text-decoration:none; }
.blog-root .blog-post-title{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; color:var(--paper-white); line-height:.98; }
.blog-root .blog-body{ font-family:var(--f-body); font-weight:300; color:var(--paper-white); opacity:.72; }

/* search */
.blog-root .blog-search{ background:var(--concrete-900); border:1px solid var(--concrete-600) !important; color:var(--paper-white); font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; }
.blog-root .blog-search::placeholder{ color:var(--paper-white); opacity:.4; text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.blog-root .blog-search-icon{ color:var(--paper-white); opacity:.4; }

/* filter chips */
.blog-root .blog-filter{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--concrete-600) !important; color:var(--paper-white); opacity:.6; background:transparent; }
.blog-root .blog-filter:hover{ opacity:1; }
.blog-root .blog-filter.active{ opacity:1; border-color:var(--paper-white) !important; }

/* card */
.blog-root .blog-card{ border:1px solid var(--concrete-600) !important; background:var(--concrete-900); box-shadow:none !important; transition:border-color .25s var(--ease); }
.blog-root .blog-card:hover{ border-color:var(--concrete-500) !important; transform:none !important; }
.blog-root .bc-media{ border-bottom:1px solid var(--concrete-600); background:#0d0d0d; }
.blog-root .bc-media img{ filter:grayscale(100%) contrast(1.1); transition:transform .9s var(--ease), filter .5s var(--ease); }
.blog-root .blog-card:hover .bc-media img{ transform:scale(1.05); filter:grayscale(0%) contrast(1.05); }
.blog-root .bc-media-empty{ color:var(--concrete-500); }

/* category tag (top-left) + Featured stamp (top-right) */
/* All category tags are neutral (white on translucent black) — the real blog
   categories as plain words, no per-discipline color coding. Only the
   "Featured" stamp is colored (blood red). */
.blog-root .b-tag{ font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; padding:5px 10px; border:1px solid rgba(244,241,234,.4) !important; background:rgba(0,0,0,.6); color:var(--paper-white); opacity:1; }
.blog-root .b-feat{ font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; padding:5px 10px; color:var(--paper-white); background:var(--blood); border:1px solid var(--blood) !important; }

/* body */
.blog-root .bc-body{ padding:22px 22px 24px; }
.blog-root .bc-eyebrow, .blog-root .blog-meta-text{ font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-white); opacity:.55; }
.blog-root .bc-title{ font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2vw,26px); line-height:1; text-transform:uppercase; letter-spacing:.005em; color:var(--paper-white); margin:0 0 10px; }
.blog-root .bc-excerpt{ font-family:var(--f-body); font-weight:300; font-size:13.5px; line-height:1.55; color:var(--paper-white); opacity:.7; margin:0; }
.blog-root .bc-foot{ border-top:1px solid var(--concrete-600); margin-top:20px; padding-top:18px; }
.blog-root .bc-meta{ opacity:.5; }
.blog-root .bc-read{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--blood); transition:letter-spacing .2s var(--ease); }
.blog-root .blog-card:hover .bc-read{ letter-spacing:.32em; }

/* empty state */
.blog-root .blog-empty{ border:1px solid var(--concrete-600) !important; background:var(--concrete-900); }