/* =========================================================
   STUDIO WELLNESS PERSONAL — Bold Athletic revamp
   Palette: deep navy-charcoal ground, vibrant orange accent
   Type: Big Shoulders Display + Hanken Grotesque
   ========================================================= */

:root{
  --ink:    #150F11;
  --ink-2:  #1E1518;
  --ink-3:  #281C20;
  --paper:  #F3F0EC;
  --paper-2:#FFFFFF;
  --accent: #E12B2B;   /* studio red */
  --accent-2:#FF5A36;  /* warm red-orange for energy gradients */
  --muted:  #9C8B8E;
  --muted-d:#6A5559;
  --line:   rgba(255,255,255,.10);
  --line-d: rgba(21,15,17,.12);

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --r: 18px;

  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Hanken Grotesque", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

/* film grain + drops texture overlay */
.grain{ position:fixed; inset:0; z-index:300; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion:reduce){ .grain{ display:none; } }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  line-height:1.55;
  font-size:17px;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:200; transition:width .1s linear;
}

/* ---------- shared layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }
.eyebrow{
  font-family:var(--f-body);
  font-weight:700; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent); display:inline-block; }
.display{
  font-family:var(--f-display); font-weight:800; line-height:.92;
  letter-spacing:-.01em; text-transform:uppercase;
}

/* ---------- reveal animation primitives ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ animation:none !important; }
}

/* line clip reveal for headlines */
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{
  display:block; transform:translateY(110%);
  transition:transform 1s var(--ease);
}
.in .line-mask > span,
.line-mask.in > span{ transform:none; }
.line-mask[data-delay="1"] > span{ transition-delay:.1s; }
.line-mask[data-delay="2"] > span{ transition-delay:.2s; }
.line-mask[data-delay="3"] > span{ transition-delay:.3s; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s;
}
.nav.shrink{
  padding:10px var(--pad);
  background:rgba(14,20,27,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800; letter-spacing:.02em; font-size:1.18rem; text-transform:uppercase; white-space:nowrap; }
.brand .mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; color:#fff; font-size:1.1rem;
  box-shadow:0 6px 20px rgba(225,43,43,.4);
}
.brand small{ font-family:var(--f-body); font-weight:600; font-size:.58rem; letter-spacing:.34em; color:var(--muted); display:block; margin-top:-2px; }
.brand-logo{ height:42px; width:auto; display:block; transition:height .4s var(--ease); filter:brightness(0) invert(1); }
.nav.shrink .brand-logo{ height:34px; }
.foot-logo{ height:52px; margin-bottom:18px; filter:brightness(0) invert(1); }
@media (max-width:560px){ .brand-logo{ height:34px; } }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-weight:600; font-size:.92rem; color:var(--paper); opacity:.85; position:relative; transition:opacity .25s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition:width .3s var(--ease); }
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:16px; }
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang button{ padding:6px 13px; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--muted); transition:.25s; }
.lang button.active{ background:var(--paper); color:var(--ink); }
.lang a{ padding:6px 13px; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--muted); transition:.25s; display:block; text-decoration:none; }
.lang a.active{ background:var(--paper); color:var(--ink); }
.nav-login-icon{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--paper); opacity:.85; transition:opacity .25s, background .25s; }
.nav-login-icon:hover{ opacity:1; background:rgba(255,255,255,.1); }
.nav-login-tip{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); font-size:.72rem; font-weight:600; white-space:nowrap; padding:5px 10px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity .2s; }
.nav-login-tip::before{ content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--ink); }
.nav-login-icon:hover .nav-login-tip{ opacity:1; }
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  background:var(--accent); color:#fff; font-weight:700;
  padding:13px 24px; border-radius:999px; font-size:.92rem;
  position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s;
  box-shadow:0 10px 30px -8px rgba(225,43,43,.55);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -8px rgba(225,43,43,.7); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn.ghost{ background:transparent; color:var(--paper); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn.dark{ background:var(--ink); color:var(--paper); box-shadow:0 10px 30px -10px rgba(14,20,27,.5); }
.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; }

/* =========================================================
   HERO  (3 variants toggled via [data-hero] on body)
   ========================================================= */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding-top:120px; padding-bottom:60px; overflow:hidden; }
/* immersive hero fills exactly one viewport height so scroll-cue stays in frame */
[data-hero="immersive"] .hero{ height:100svh; min-height:unset; }
.hero-bg-grad{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(225,43,43,.22), transparent 55%),
    radial-gradient(80% 60% at 0% 110%, rgba(255,90,54,.12), transparent 60%),
    var(--ink);
}
.hero-grid-lines{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px; mask-image:radial-gradient(120% 90% at 60% 30%,#000,transparent 80%); }

.hero .wrap{ position:relative; z-index:2; width:100%; }

/* ---- shared hero pieces ---- */
.hero h1{ font-size:clamp(3.2rem, 9vw, 8.6rem); margin:.18em 0 .32em; }
.hero h1 .accent{ color:var(--accent); }
.hero .sub{ font-size:clamp(1.05rem,1.6vw,1.32rem); color:var(--muted); max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; align-items:center; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:34px; margin-top:54px; }
.hero-stats .stat .n{ font-family:var(--f-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--paper); }
.hero-stats .stat .n .accent{ color:var(--accent); }
.hero-stats .stat .l{ font-size:.82rem; color:var(--muted); margin-top:4px; max-width:18ch; }
.hero-photo{ position:relative; }
.hero-photo img, .hero-photo image-slot{ width:100%; height:100%; object-fit:cover; border-radius:var(--r); }
.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; }
.scroll-cue .dot{ width:24px; height:38px; border:2px solid var(--line); border-radius:14px; position:relative; }
.scroll-cue .dot::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:7px; border-radius:3px; background:var(--accent); animation:scrolly 1.6s infinite; }
@keyframes scrolly{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,14px);} }

/* hidden by default; each variant shows itself */
.hero-variant{ display:none; }
body[data-hero="split"]   .hero-variant.v-split{ display:block; }
body[data-hero="immersive"] .hero-variant.v-immersive{ display:block; }
body[data-hero="editorial"] .hero-variant.v-editorial{ display:block; }

/* VARIANT A — kinetic split */
.v-split .split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px); align-items:center; }
.v-split .hero-photo{ aspect-ratio:4/5; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.v-split .hero-photo .badge{ position:absolute; bottom:-22px; left:-22px; background:var(--accent); color:#fff; padding:18px 22px; border-radius:14px; box-shadow:0 20px 40px -12px rgba(225,43,43,.6); }
.v-split .hero-photo .badge b{ font-family:var(--f-display); font-size:2rem; display:block; line-height:.9; }
.v-split .hero-photo .badge span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }

/* VARIANT B — immersive full-bleed */
.v-immersive .immersive-photo{ position:absolute; inset:0; z-index:1; }
.v-immersive .immersive-photo img, .v-immersive .immersive-photo image-slot{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:0; }
.v-immersive .immersive-photo::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 50% 42%, rgba(21,15,17,.40), rgba(21,15,17,.78) 92%),
  linear-gradient(180deg, rgba(21,15,17,.70) 0%, rgba(21,15,17,.50) 38%, rgba(21,15,17,.97) 100%); }
.v-immersive .immersive-inner{ position:relative; z-index:2; text-align:center; max-width:min(1000px,92vw); margin-inline:auto; }
.v-immersive .immersive-inner .eyebrow{ justify-content:center; }
.v-immersive .immersive-inner h1{ text-shadow:0 2px 30px rgba(0,0,0,.55); }
.v-immersive .immersive-inner .sub{ margin-inline:auto; color:#EBE3E2; text-shadow:0 1px 16px rgba(0,0,0,.7); }
.v-immersive .immersive-inner .eyebrow{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
.v-immersive .hero-stats .stat .l{ color:#D8CDCD; }
.v-immersive .hero-cta{ justify-content:center; }
.v-immersive .hero-stats{ justify-content:center; }
.v-immersive h1{ font-size:clamp(2.6rem,7.6vw,7rem); }
.line-mask{ overflow:hidden; display:block; padding-inline:.06em; margin-inline:-.06em; }

/* VARIANT C — editorial overlap */
.v-editorial .ed{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:0 clamp(20px,4vw,56px); align-items:end; }
.v-editorial .ed-type{ grid-column:1 / 3; grid-row:1; position:relative; z-index:3; pointer-events:none; }
.v-editorial .ed-type h1{ font-size:clamp(3.4rem,13vw,12rem); }
.v-editorial .ed-type h1 .o{ -webkit-text-stroke:2px var(--accent); color:transparent; }
.v-editorial .ed-photo{ grid-column:2 / 3; grid-row:1 / 3; aspect-ratio:3/4; margin-top:-6%; z-index:1; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.v-editorial .ed-meta{ grid-column:1 / 2; grid-row:2; z-index:2; padding-bottom:8px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{ background:var(--accent); color:#fff; padding:18px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:marq 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .item{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; padding:0 28px; display:inline-flex; align-items:center; gap:28px; }
.marquee-track .item::after{ content:"●"; font-size:.6rem; color:rgba(255,255,255,.7); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.sec{ padding:clamp(80px,11vw,150px) 0; }
.sec.light{ background:var(--paper); color:var(--ink); }
.sec.light .eyebrow{ color:var(--accent); }
.sec.light .muted{ color:var(--muted-d); }
.sec.light .bigstat .n{ color:var(--ink); }
.sec.light .bigstat .n .accent{ color:var(--accent); }
.sec.light .bigstat .l{ color:var(--muted-d); }
.sec-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(44px,6vw,76px); }
.sec-head h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:-.01em; font-size:clamp(2.4rem,5.5vw,4.6rem); }
.sec-head .lead{ font-size:clamp(1rem,1.3vw,1.18rem); max-width:46ch; align-self:end; }
.muted{ color:var(--muted); }
.idx{ font-family:var(--f-display); font-size:1rem; color:var(--accent); font-weight:700; }

/* =========================================================
   ABOUT / PILLARS
   ========================================================= */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }
.pillar{ background:var(--paper-2); border:1px solid var(--line-d); border-radius:var(--r); padding:34px 30px; position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.pillar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); }
.pillar:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(14,20,27,.28); }
.pillar:hover::before{ transform:scaleY(1); }
.pillar .pnum{ font-family:var(--f-display); font-size:3.4rem; font-weight:800; color:var(--paper); -webkit-text-stroke:1.5px rgba(14,20,27,.18); line-height:.8; }
.pillar h3{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.5rem; margin:18px 0 12px; letter-spacing:.01em; }
.pillar p{ color:var(--muted-d); font-size:.98rem; }
.pillar p b{ color:var(--ink); }

/* =========================================================
   SERVICES
   ========================================================= */
.svc-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.svc{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:32px; position:relative; overflow:hidden; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:.5s var(--ease); }
.svc:hover{ background:var(--ink-3); border-color:rgba(225,43,43,.4); transform:translateY(-6px); }
.svc .svc-ic{ width:54px; height:54px; border-radius:13px; background:rgba(225,43,43,.14); color:var(--accent); display:grid; place-items:center; transition:.4s var(--ease); }
.svc:hover .svc-ic{ background:var(--accent); color:#fff; transform:rotate(-6deg) scale(1.06); }
.svc h3{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.6rem; margin-top:22px; }
.svc p{ color:var(--muted); font-size:.95rem; margin-top:8px; }
.svc .tag{ position:absolute; top:24px; right:26px; font-family:var(--f-display); font-size:1.3rem; color:var(--line); font-weight:800; }
.svc.lg{ grid-column:span 6; }
.svc.md{ grid-column:span 4; }
.svc.sm{ grid-column:span 4; }
.svc-feature{ grid-column:span 6; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.svc-feature .svc-ic{ background:rgba(255,255,255,.2); color:#fff; }
.svc-feature p{ color:rgba(255,255,255,.9); }
.svc-feature:hover{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.svc-feature .tag{ color:rgba(255,255,255,.35); }

/* training type chips */
.types{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.type-chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:.95rem; transition:.35s var(--ease); }
.type-chip .d{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.type-chip:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }
.type-chip:hover .d{ background:#fff; }

/* =========================================================
   SPECIAL GROUPS
   ========================================================= */
.special{ background:var(--ink-2); }
.special-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.special-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sg{ background:var(--ink); border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:.45s var(--ease); }
.sg:hover{ transform:translateY(-6px); border-color:rgba(225,43,43,.45); }
.sg .sg-ic{ font-size:1.6rem; color:var(--accent); margin-bottom:14px; }
.sg h4{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.25rem; }
.sg p{ color:var(--muted); font-size:.86rem; margin-top:6px; }

/* =========================================================
   STATS BAND
   ========================================================= */
.statband{ background:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statband .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-block:clamp(50px,7vw,84px); }
.bigstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.bigstat .n{ font-family:var(--f-display); font-weight:800; font-size:clamp(3rem,5vw,4.6rem); line-height:.9; color:var(--paper); }
.bigstat .n .accent{ color:var(--accent); }
.bigstat .l{ color:var(--muted); margin-top:8px; font-size:.92rem; max-width:20ch; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ background:var(--ink); }
.gal-grid{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(150px,15vw,200px); gap:14px; }
.gal-item{ position:relative; overflow:hidden; border-radius:14px; background:var(--ink-2); border:1px solid var(--line); cursor:pointer; grid-column:span 4; grid-row:span 1; }
.gal-item img{ width:100%; height:100%; display:block; object-fit:cover; object-position:50% 15%; transition:transform 1s var(--ease), filter .5s; filter:saturate(.9) brightness(.92); }
.gal-item:hover img{ transform:scale(1.08); filter:saturate(1.05) brightness(1); }
.gal-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(transparent,rgba(14,20,27,.92)); transform:translateY(8px); opacity:0; transition:.45s var(--ease); }
.gal-item:hover .cap{ transform:none; opacity:1; }
.gal-item .cap b{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.05rem; }
.g-a{ grid-column:span 6; grid-row:span 2; }
.g-b{ grid-column:span 3; grid-row:span 1; }
.g-c{ grid-column:span 3; grid-row:span 1; }
.g-d{ grid-column:span 3; grid-row:span 2; }
.g-e{ grid-column:span 3; grid-row:span 1; }
.g-f{ grid-column:span 3; grid-row:span 1; }
.g-g{ grid-column:span 4; grid-row:span 1; }
.g-h{ grid-column:span 4; grid-row:span 1; }
.g-i{ grid-column:span 4; grid-row:span 1; }

/* =========================================================
   VIDEOS
   ========================================================= */
.videos{ background:var(--ink-2); overflow:hidden; }
.vid-rail-wrap{ margin-top:clamp(28px,4vw,46px); }
.vid-rail{ display:flex; gap:16px; overflow-x:auto; padding:6px 0 14px; scroll-snap-type:x proximity; cursor:grab; scrollbar-width:none; -ms-overflow-style:none; }
.vid-rail::-webkit-scrollbar{ display:none; }
.vid-rail.drag{ cursor:grabbing; }
.vid-card{ position:relative; flex:0 0 auto; width:clamp(216px,23vw,288px); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--line); scroll-snap-align:center; box-shadow:0 26px 56px -28px rgba(0,0,0,.85); }
.vid-card video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.vid-card .vid-glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .35s var(--ease); }
.vid-card.sound .vid-glow{ box-shadow:inset 0 0 0 3px var(--accent); }
.vid-card .vsound{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(8,10,12,.55); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .25s, transform .2s var(--ease); }
.vid-card .vsound:hover{ transform:scale(1.08); }
.vid-card.sound .vsound{ background:var(--accent); }
.vid-card .vsound .ic-on{ display:none; }
.vid-card.sound .vsound .ic-mute{ display:none; }
.vid-card.sound .vsound .ic-on{ display:block; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(8,12,16,.94); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:5vw; }
.lightbox.open{ display:flex; animation:fade .3s var(--ease); }
.lightbox img{ max-width:90vw; max-height:86vh; border-radius:14px; box-shadow:0 40px 100px rgba(0,0,0,.6); }
.lightbox .lb-cap{ position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); color:var(--paper); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em; }
.lightbox .lb-close{ position:absolute; top:26px; right:30px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; color:#fff; font-size:1.4rem; display:grid; place-items:center; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* =========================================================
   CONTACT / LOCATION
   ========================================================= */
.contact{ background:var(--paper); color:var(--ink); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); }
.info-card{ background:var(--paper-2); border:1px solid var(--line-d); border-radius:var(--r); padding:36px; min-width:0; }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-d); min-width:0; }
.info-row > div{ min-width:0; overflow-wrap:anywhere; }
.info-row:last-child{ border-bottom:none; }
.info-row .ic{ width:44px; height:44px; flex:none; border-radius:11px; background:rgba(225,43,43,.12); color:var(--accent); display:grid; place-items:center; }
.info-row h4{ font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-d); margin-bottom:3px; }
.info-row p{ font-weight:500; }
.info-row a{ color:var(--ink); font-weight:600; overflow-wrap:anywhere; word-break:break-word; }
.info-row a:hover{ color:var(--accent); }
.map-card{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line-d); min-height:340px; position:relative; min-width:0; }
.map-card iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.3) contrast(1.05); }
.hours-pill{ display:inline-flex; gap:8px; align-items:center; background:rgba(225,43,43,.12); color:var(--accent); padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:700; }

/* big CTA band */
.cta-band{ background:var(--ink); position:relative; overflow:hidden; }
.cta-band .wrap{ padding-block:clamp(70px,9vw,120px); text-align:center; position:relative; z-index:2; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, rgba(225,43,43,.22), transparent 60%); }
.cta-band h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.6rem,7vw,6rem); line-height:.92; }
.cta-band h2 .accent{ color:var(--accent); }
.cta-band p{ color:var(--muted); max-width:48ch; margin:18px auto 36px; font-size:1.08rem; }
.cta-band .hero-cta{ justify-content:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding:60px 0 36px; }
.footer .wrap{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.footer .brand{ margin-bottom:16px; }
.footer p{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer h5{ font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-d); margin-bottom:16px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ color:var(--paper); opacity:.8; font-size:.94rem; transition:.25s; }
.footer ul a:hover{ opacity:1; color:var(--accent); padding-left:4px; }
.foot-bottom{ border-top:1px solid var(--line); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted-d); font-size:.82rem; }
.foot-lang-row{ flex-basis:100%; display:flex; justify-content:flex-start; }
.foot-bottom > span:last-of-type{ white-space:nowrap; }

/* =========================================================
   TWEAKS PANEL
   ========================================================= */
.tweaks{ position:fixed; right:20px; bottom:20px; z-index:400; width:300px; background:rgba(19,29,38,.96); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.7); padding:20px; display:none; color:var(--paper); }
.tweaks.show{ display:block; animation:tw .35s var(--ease); }
@keyframes tw{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.tweaks-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tweaks-head h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.2rem; }
.tweaks-head button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); color:var(--muted); }
.tw-group{ margin-bottom:18px; }
.tw-group > label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; display:block; margin-bottom:9px; }
.tw-seg{ display:flex; gap:6px; background:var(--ink); padding:4px; border-radius:11px; border:1px solid var(--line); }
.tw-seg button{ flex:1; padding:9px 4px; border-radius:8px; font-size:.74rem; font-weight:600; color:var(--muted); transition:.25s; }
.tw-seg button.active{ background:var(--accent); color:#fff; }
.tw-swatches{ display:flex; gap:10px; }
.tw-sw{ width:34px; height:34px; border-radius:9px; border:2px solid transparent; cursor:pointer; transition:.2s; }
.tw-sw.active{ border-color:var(--paper); transform:scale(1.08); }
.tw-toggle{ display:flex; align-items:center; justify-content:space-between; }
.tw-switch{ width:46px; height:26px; border-radius:999px; background:var(--ink); border:1px solid var(--line); position:relative; transition:.3s; }
.tw-switch.on{ background:var(--accent); }
.tw-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.3s var(--ease); }
.tw-switch.on::after{ transform:translateX(20px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .svc.lg,.svc-feature{ grid-column:span 12; }
  .svc.md,.svc.sm{ grid-column:span 6; }
  .g-a{ grid-column:span 12; }
  .g-b,.g-c,.g-d,.g-e,.g-f{ grid-column:span 6; }
  .g-g,.g-h,.g-i{ grid-column:span 6; }
  .statband .wrap{ grid-template-columns:repeat(2,1fr); }
  .bigstats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .v-split .split{ grid-template-columns:1fr; }
  .v-split .hero-photo{ aspect-ratio:16/11; max-height:46vh; }
  .v-editorial .ed{ grid-template-columns:1fr; }
  .v-editorial .ed-photo{ grid-column:1; grid-row:auto; margin-top:24px; aspect-ratio:16/11; }
  .v-editorial .ed-type{ grid-column:1; }
  .v-editorial .ed-meta{ grid-column:1; }
  .pillars{ grid-template-columns:1fr; }
  .special-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .sec-head{ grid-template-columns:1fr; }
  .footer .wrap{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:560px){
  .sec{ padding:58px 0; }
  .sec-head{ margin-bottom:30px; }
  .svc-grid{ grid-template-columns:1fr; gap:14px; }
  .svc.lg,.svc.md,.svc.sm,.svc-feature{ grid-column:auto; }
  .svc{ min-height:0; padding:26px 24px; }
  .svc h3{ margin-top:16px; font-size:1.5rem; }
  .gal-grid{ columns:2 140px; }
  .manifesto{ padding:72px 0; }
  .statband .wrap{ grid-template-columns:1fr; }
  .bigstats{ grid-template-columns:1fr; }
  .special-cards{ grid-template-columns:1fr; }
  .hero-stats{ gap:22px; }
  .tweaks{ width:calc(100vw - 32px); right:16px; }
}

/* small phones — Galaxy A-series, iPhone SE, etc. (≤430px) */
@media (max-width:430px){
  :root{ --pad: clamp(16px, 5.5vw, 80px); --r:15px; }

  /* hero fits without clipping long PT words like "PERSONALIZADO" */
  .hero{ padding-top:100px; padding-bottom:46px; min-height:auto; }
  .hero h1{ font-size:clamp(2.5rem, 13vw, 8.6rem); margin:.14em 0 .3em; }
  .v-immersive h1{ font-size:clamp(2.4rem, 12.5vw, 7rem); }
  .v-editorial .ed-type h1{ font-size:clamp(2.7rem, 16vw, 12rem); }
  .hero .sub{ font-size:1.02rem; max-width:none; }
  .hero-cta{ gap:12px; margin-top:30px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-stats{ gap:18px 26px; margin-top:38px; }
  .hero-stats .stat .n{ font-size:2.1rem; }

  /* marquee a touch smaller so it doesn't dominate */
  .marquee{ padding:14px 0; }
  .marquee-track .item{ font-size:1.2rem; padding:0 18px; gap:18px; }

  /* section heads + display sizes */
  .sec-head h2{ font-size:clamp(2rem, 9vw, 4.6rem); }
  .pillar{ padding:28px 22px; }
  .pillar .pnum{ font-size:2.8rem; }
  .bigstat .n{ font-size:clamp(2.6rem, 13vw, 4.6rem); }
  .cta-band h2{ font-size:clamp(2.2rem, 10.5vw, 6rem); }

  .gal-grid{ columns:1; }
  .gal-item .cap{ opacity:1; transform:none; padding:12px; }
  .gal-item .cap b{ font-size:.9rem; }

  /* contact + footer */
  .info-card{ padding:26px 22px; }
  .map-card{ min-height:240px; }
  .map-card iframe{ min-height:240px; }
  .footer{ padding:48px 0 30px; }
  .footer .wrap{ gap:32px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:130; background:var(--ink); transform:translateY(-100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; justify-content:safe center; padding:var(--pad); gap:8px; overflow-y:auto; }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.5rem,7vw,2.2rem); font-weight:700; padding:10px 0; border-bottom:1px solid var(--line); }
.mobile-menu .mclose{ position:absolute; top:20px; right:var(--pad); width:48px; height:48px; border:1px solid var(--line); border-radius:12px; font-size:1.6rem; }

/* =========================================================
   DROPS MOTIF (brand nod — floating water drops in hero)
   ========================================================= */
.drops{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.drops span{ position:absolute; border-radius:50% 50% 50% 0; transform:rotate(45deg); border:1.5px solid rgba(225,43,43,.22); animation:float-drop linear infinite; }
.drops span:nth-child(1){ width:120px; height:120px; left:8%;  top:22%; animation-duration:13s; }
.drops span:nth-child(2){ width:64px;  height:64px;  left:78%; top:14%; animation-duration:17s; border-color:rgba(255,90,54,.22); }
.drops span:nth-child(3){ width:200px; height:200px; left:62%; top:54%; animation-duration:21s; }
.drops span:nth-child(4){ width:44px;  height:44px;  left:30%; top:68%; animation-duration:15s; border-color:rgba(255,90,54,.2); }
.drops span:nth-child(5){ width:90px;  height:90px;  left:88%; top:70%; animation-duration:19s; }
@keyframes float-drop{ 0%{ transform:rotate(45deg) translateY(0); opacity:.5; } 50%{ transform:rotate(55deg) translateY(-26px); opacity:1; } 100%{ transform:rotate(45deg) translateY(0); opacity:.5; } }
body.no-motion .drops{ display:none; }

/* =========================================================
   ROTATED SIDE LABEL
   ========================================================= */
.side-label{ position:fixed; left:14px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; z-index:110; font-size:.66rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:18px; mix-blend-mode:difference; }
.side-label .ln{ width:1px; height:54px; background:currentColor; }
@media (max-width:1100px){ .side-label{ display:none; } }

/* =========================================================
   MANIFESTO (word-by-word scroll reveal)
   ========================================================= */
.manifesto{ background:var(--ink-2); padding:clamp(90px,16vh,200px) 0; position:relative; overflow:hidden; }
.manifesto::before{ content:""; position:absolute; right:-10%; top:-30%; width:60vmax; height:60vmax; background:radial-gradient(circle, rgba(225,43,43,.10), transparent 62%); }
.manifesto .wrap{ position:relative; z-index:2; }
.manifesto .eyebrow{ margin-bottom:34px; }
.manifesto p{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:1.02; letter-spacing:-.005em; font-size:clamp(2rem,5.4vw,4.8rem); max-width:20ch; }
.manifesto .word{ color:rgba(243,240,236,.13); transition:color .5s var(--ease); }
.manifesto p{ word-spacing:.04em; }
.manifesto .word.lit{ color:var(--paper); }
.manifesto .word.key.lit{ color:var(--accent); }
.manifesto .word.key2.lit{ color:var(--accent-2); }

/* =========================================================
   TRAINING RAIL (horizontal scroll cards)
   ========================================================= */
.rail-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.rail-head .hint{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; }
.rail-head .hint svg{ animation:nudge 1.8s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }
.rail{ display:flex; gap:18px; overflow-x:auto; padding:6px 0 24px; scroll-snap-type:x mandatory; cursor:grab; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
.rail::-webkit-scrollbar{ display:none; }
.rail.drag{ cursor:grabbing; scroll-snap-type:none; }
.rail-card{ flex:0 0 clamp(260px,30vw,360px); aspect-ratio:3/4; border-radius:18px; overflow:hidden; position:relative; scroll-snap-align:start; background:var(--ink-3); border:1px solid var(--line); }
.rail-card img{ width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(1.05); transition:transform 1.1s var(--ease), filter .5s; }
.rail-card:hover img{ transform:scale(1.07); filter:brightness(.74); }
.rail-card .rc-body{ position:absolute; inset:auto 0 0 0; padding:26px; z-index:2; }
.rail-card .rc-num{ position:absolute; top:22px; left:24px; font-family:var(--f-display); font-weight:800; font-size:1.1rem; color:var(--accent); z-index:2; }
.rail-card h3{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.7rem; line-height:.95; }
.rail-card p{ color:rgba(243,240,236,.78); font-size:.88rem; margin-top:8px; max-width:26ch; opacity:0; transform:translateY(10px); transition:.45s var(--ease); }
.rail-card:hover p{ opacity:1; transform:none; }
.rail-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 38%, rgba(6,24,27,.92)); z-index:1; }

/* duotone-ish accent ring used as section marker */
.kicker-num{ font-family:var(--f-display); font-weight:800; font-size:1rem; color:var(--accent); letter-spacing:.05em; }

/* ── Announcement bar ── */
.announcement-bar{ background:var(--accent); color:var(--ink); text-align:center; padding:10px 0; font-size:.88rem; font-weight:600; }
.announcement-bar a{ color:inherit; text-decoration:underline; }

/* ── Maintenance gate ── */
.maintenance-gate{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px var(--pad); text-align:center; }
.maintenance-gate-inner{ max-width:560px; }
.maintenance-gate-inner h1{ font-family:var(--f-display); font-size:2.4rem; font-weight:800; text-transform:uppercase; margin-bottom:16px; }
.maintenance-gate-inner p{ color:var(--muted); font-size:1rem; line-height:1.6; }

/* ── Back to top ── */
.back-to-top{ position:fixed; bottom:32px; right:32px; width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:1.4rem; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s,transform .3s,visibility .3s; z-index:90; }
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }