/* ==========================================================================
   ATMOS FITNESS — Master The Movement
   Design system + components. Single stylesheet, no build step.
   Palette is derived from the delivered logo files (orange / near-black),
   with ELIXIR RECOVERY's green used only inside the recovery sub-brand.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --ink:        #0a0a0b;   /* page base */
  --ink-2:      #111113;   /* raised surface */
  --ink-3:      #191a1d;   /* card */
  --bone:       #f2efe9;   /* primary text on dark */
  --bone-dim:   #a3a09b;   /* secondary text on dark */
  --hair:       rgba(242, 239, 233, .13);

  /* Open mobile menu — the header bar and the drawer share these so the two
     surfaces stay identical and the seam between them stays invisible. */
  --glass:      rgba(10, 10, 11, .72);
  --glass-blur: blur(20px) saturate(140%);

  --orange:     #f26a28;   /* ATMOS accent — CTAs, rules, numerals */
  --orange-lo:  #c85417;
  --orange-glow: rgba(242, 106, 40, .28);

  --elixir:     #4d7d51;   /* ELIXIR RECOVERY sub-brand */
  --elixir-lo:  #35583a;

  --paper:      #f6f4f0;   /* light section base */
  --paper-ink:  #131315;   /* text on light */
  --paper-dim:  #5d5c59;

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.6vw, 6rem);
  --step-5:  clamp(3.2rem, 1.6rem + 7vw, 8.5rem);

  /* Space */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 9vw, 9rem);
  --max: 1280px;
  --measure: 62ch;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 78px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* position:fixed (not just overflow:hidden) so a touch-drag on iOS Safari
   can't scroll the page behind an open drawer/lightbox — overflow:hidden
   alone is not honoured for touchmove there, which let the background
   scroll invisibly under the fixed overlay. JS sets `top` to the saved
   scroll offset before adding this class, and restores scroll on removal. */
body.is-locked { position: fixed; inset: 0; overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--orange); color: #fff; }

/* Film-grain texture — sits above backgrounds, below content. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 3; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Layout primitives ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--paper { background: var(--paper); color: var(--paper-ink); }
.section--raised { background: var(--ink-2); }
.stack > * + * { margin-top: 1.1em; }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* ---------- 4. Type ---------- */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--orange);
  display: flex; align-items: center; gap: .9rem;
}
.eyebrow::before {
  content: ""; width: clamp(20px, 4vw, 46px); height: 1px;
  background: currentColor; flex: none; opacity: .7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--elixir { color: var(--elixir); }
.section--paper .eyebrow--elixir { color: var(--elixir-lo); }

.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.d1 { font-size: var(--step-5); }
.d2 { font-size: var(--step-4); }
.d3 { font-size: var(--step-3); }
.d4 { font-size: var(--step-2); font-weight: 700; line-height: 1.1; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--bone-dim);
  font-weight: 300;
  text-wrap: pretty;
}
.section--paper .lede { color: var(--paper-dim); }
.dim { color: var(--bone-dim); }
.section--paper .dim { color: var(--paper-dim); }
.accent { color: var(--orange); }
.italic { font-style: italic; }

.rule { height: 1px; background: var(--hair); border: 0; margin-block: clamp(2rem, 5vw, 3.5rem); }
.section--paper .rule { background: rgba(19,19,21,.14); }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.02rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--btn-bg); border-radius: 2px; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #fff; transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -12px var(--orange-glow); color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--bone); border-color: var(--hair); }
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); box-shadow: none; }
.section--paper .btn--ghost { --btn-fg: var(--paper-ink); border-color: rgba(19,19,21,.22); }
.section--paper .btn--ghost::before { background: var(--paper-ink); }
.section--paper .btn--ghost:hover { color: var(--paper); border-color: var(--paper-ink); }

.btn--elixir { --btn-bg: var(--elixir); }
.btn--elixir:hover { box-shadow: 0 12px 34px -12px rgba(77,125,81,.45); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--orange);
  padding-bottom: 3px; background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease);
}
.tlink:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* The bar's tinted/blurred surface lives on a pseudo-element, NEVER on .nav
   itself. backdrop-filter turns an element into a containing block for its
   fixed-position descendants — and .nav__menu (the mobile drawer) is exactly
   that. With the filter on .nav, the drawer's `inset: var(--nav-h) 0 0`
   resolves against the 78px bar instead of the viewport and collapses to a
   ~40px sliver. Measured: 40px with the filter on .nav, 766px without.
   The pseudo-element has no fixed-position descendants, so it is safe.

   backdrop-filter is also deliberately absent from any transition list:
   animating a blur re-rasterises the region every frame, which is one of the
   most expensive things a phone GPU can be asked to do. It snaps instead. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  transition: background .4s var(--ease);
}
.nav.is-stuck::before {
  background: rgba(10,10,11,.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.nav.is-stuck { border-bottom-color: var(--hair); }
/* Drawer open: the bar takes the same translucent-black + blur as the drawer
   below it, so the two read as one continuous glass panel. Without this the
   bar stays fully transparent at scroll-top and the hero video shows through
   the header strip while the drawer beneath is filled — which looks broken.

   Declared after .is-stuck deliberately: both are (0,2,0) specificity, so
   source order is what makes this win when the page is scrolled AND open.

   The lightbox also sets body.is-locked, but it paints at z-index 200 over
   the nav (100), so this never applies visibly there. */
/* Open: the drawer's own full-viewport glass already covers the bar's area, so
   the bar's surface must clear out — otherwise it stacks a second tint over
   the drawer and the seam reappears. Declared after .is-stuck deliberately:
   both are (0,2,0), so source order is what makes this win while scrolled. */
.nav.is-menu-open::before {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav.is-menu-open { border-bottom-color: transparent; }
.nav__inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav__logo img { height: clamp(26px, 3.4vw, 34px); width: auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.nav__link {
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bone-dim);
  position: relative; padding-block: .4rem; transition: color .3s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--bone); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: none; }
@media (min-width: 1040px) { .nav__cta { display: inline-flex; padding: .78rem 1.4rem; } }
/* The CTA inside .nav__menu exists for the mobile drawer only — on desktop
   the standalone .nav__cta takes over, so hide the duplicate. */
@media (min-width: 900px) { .nav__menu > .btn { display: none; } }

.nav__toggle {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 1px solid var(--hair); border-radius: 2px; cursor: pointer;
}
.nav__toggle span { display: block; width: 19px; height: 1.5px; background: var(--bone);
  transition: transform .35s var(--ease), opacity .25s var(--ease); }
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav__menu {
    /* Spans the FULL viewport, not just below the bar, so the glass is a
       single continuous surface. Two abutting backdrop-filter elements each
       blur only their own region and cannot sample across the boundary, which
       leaves a visible hard seam at the bar's edge. One surface, no seam —
       and one blurred region instead of two is cheaper to composite.
       The bar's content still paints above this (.nav is z-100, drawer 99). */
    position: fixed; inset: 0; z-index: 99;
    flex-direction: column; justify-content: center; gap: .4rem;
    overflow-y: auto; overscroll-behavior: contain;
    /* Translucent black + blur, matching the header bar above it. The solid
       fallback for browsers without backdrop-filter lives in the @supports
       block below — without it the page would bleed straight through and the
       links would be unreadable. */
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transform: translateY(-101%);
    /* The closed drawer is translated up by 101% of its own height, which still
       leaves its bottom edge overlapping the nav bar. Without these it swallows
       clicks on the hamburger and the menu can never be opened. */
    visibility: hidden; pointer-events: none;
    transition: transform .34s var(--ease), visibility 0s linear .34s;
    /* Top padding clears the nav bar, which now overlays the drawer's top edge. */
    padding: calc(var(--nav-h) + var(--gut)) var(--gut) var(--gut);
  }
  .nav__menu.is-open {
    transform: translateY(0);
    visibility: visible; pointer-events: auto;
    transition: transform .34s var(--ease), visibility 0s;
  }
  /* The drawer is a child of .nav and now spans the whole viewport, so inside
     .nav's stacking context its z-index:99 would paint over the logo and the
     hamburger (both unpositioned, hence below any positive z-index sibling) —
     making the toggle unclickable while open. Lift them above it. */
  .nav__logo, .nav__toggle { position: relative; z-index: 100; }
  .nav__link { font-family: var(--serif); font-size: clamp(1.9rem, 8vw, 2.8rem);
    text-transform: none; letter-spacing: -.01em; color: var(--bone); padding-block: .35rem; }
  .nav__link::after { display: none; }
  .nav__menu .btn { margin-top: 1.4rem; }
  .nav__cta { display: none !important; }
}
/* No backdrop-filter (older Android WebView, Firefox with the flag off):
   fall back to opaque surfaces, or the page shows straight through and the
   menu links become unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 899px) {
    .nav__menu { background: var(--ink); }
  }
  .nav.is-stuck::before,
  .nav.is-menu-open::before { background: var(--ink); }
}
@media (min-width: 900px) { .nav__toggle { display: none; } }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding-top: calc(var(--nav-h) + 2rem); padding-bottom: clamp(3rem, 7vh, 6rem);
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  /* Source footage is low-key, so lift it before the scrim goes over the top. */
  filter: saturate(.8) contrast(1.05) brightness(1.35);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(242,106,40,.18), transparent 55%),
    linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.3) 34%, rgba(10,10,11,.9) 88%);
}
.hero__inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* Corner mark rather than part of the text stack — sits top-right, below the
   fixed nav strip, independent of the headline/CTA column. Pure CSS (no .rv,
   no JS dependency): a settle-in on load, handing off into a slow continuous
   float once it arrives. The base `opacity: 1` is a safety net for the rare
   case animations don't run at all — the `from` keyframe overrides it the
   instant they do, on every browser that actually supports them. */
.hero__lockup {
  position: absolute; z-index: 1; pointer-events: none;
  top: calc(var(--nav-h) + clamp(1.4rem, 4vw, 2.6rem)); right: var(--gut);
  width: clamp(112px, 15vw, 190px);
  opacity: 1;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.4));
  animation: heroLockupIn 1s var(--ease) .35s both,
             heroLockupFloat 6s ease-in-out 1.35s infinite;
}
@keyframes heroLockupIn {
  from { opacity: 0; transform: translate(22px, -10px) scale(.94); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes heroLockupFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lockup { animation: none; opacity: 1; transform: none; }
}
/* Below tablet width, min-height:100svh + align-items:end on .hero pins the
   (often 3-line) headline high enough to collide with a top-right corner
   mark — confirmed against real device sizes (iPhone SE/8/12/13, Pixel),
   not just a narrow edge case. The nav bar already carries the wordmark on
   every viewport, so simplest correct fix is to not compete for the same
   cramped vertical space on phones. */
@media (max-width: 640px) { .hero__lockup { display: none; } }

.hero .d1 { max-width: 15ch; }
.hero .lede { max-width: 54ch; margin-top: 1.4rem; color: rgba(242,239,233,.82); }
.hero__sub {
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-2); color: var(--orange); margin-top: .5rem; line-height: 1.2;
}
.hero__btns { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .6rem;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim);
}
.hero__scroll i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--orange), transparent); }
@media (max-width: 720px) { .hero__scroll { display: none; } }

/* Page header (interior pages) */
.phead {
  position: relative; min-height: clamp(56vh, 62vh, 78vh);
  display: grid; align-items: end;
  padding-top: calc(var(--nav-h) + 3rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden; isolation: isolate;
}
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media img, .phead__media video { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) contrast(1.06) brightness(.95); }
.phead__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,11,.74) 0%, rgba(10,10,11,.46) 42%, rgba(10,10,11,.95) 100%); }
.phead .lede { max-width: 56ch; margin-top: 1.2rem; }

/* ---------- 8. Ticker ---------- */
.ticker {
  border-block: 1px solid var(--hair);
  background: var(--ink-2); overflow: hidden; padding-block: 1.05rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; flex: none; }
.ticker__item {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  letter-spacing: .05em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap;
}
.ticker__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- 9. Pillars (TRAIN / RECOVER / FUEL) ---------- */
.pillars { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.pillar {
  display: grid; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center; position: relative;
}
@media (min-width: 900px) {
  .pillar { grid-template-columns: 1.05fr 1fr; }
  .pillar:nth-child(even) .pillar__media { order: -1; }
}
.pillar__media {
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4 / 3; background: var(--ink-3);
}
/* <picture> must fill the frame itself, otherwise the img's height:100%
   resolves against an auto-height inline box and the image collapses. */
.pillar__media picture { display: block; width: 100%; height: 100%; }
.pillar__media img, .pillar__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease); filter: saturate(.72) contrast(1.06);
}
.pillar:hover .pillar__media img, .pillar:hover .pillar__media video { transform: scale(1.045); }
.pillar__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,11,.55));
  pointer-events: none;
}
.pillar__num {
  position: absolute; top: 1rem; left: 1.1rem; z-index: 2;
  font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(242,239,233,.4);
}
.pillar__tagline {
  font-family: var(--serif); font-style: italic; font-size: var(--step-1);
  color: var(--orange); margin-top: .35rem;
}
.pillar--elixir .pillar__tagline { color: var(--elixir); }
.pillar__elixirmark { width: 108px; border-radius: 3px; margin-bottom: 1rem; }

/* Feature list */
.flist { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: 1.05rem; }
.flist li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.flist .tick {
  width: 7px; height: 7px; margin-top: .62em; flex: none;
  background: var(--orange); transform: rotate(45deg);
}
.pillar--elixir .flist .tick { background: var(--elixir); }
.flist b { color: var(--bone); font-weight: 600; }
.section--paper .flist b { color: var(--paper-ink); }
.flist span { color: var(--bone-dim); }
.section--paper .flist span { color: var(--paper-dim); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.chip {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .42rem .8rem; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--bone-dim); transition: border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover { border-color: var(--orange); color: var(--orange); }
.section--paper .chip { border-color: rgba(19,19,21,.16); color: var(--paper-dim); }

/* ---------- 10. Card grids ---------- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  position: relative; overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(242,239,233,.24); }
.card:hover::before { transform: scaleX(1); }
.section--paper .card { background: #fff; border-color: rgba(19,19,21,.1); }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.2rem;
  border: 1px solid var(--hair); border-radius: 2px; color: var(--orange);
}
.section--paper .card__icon { border-color: rgba(19,19,21,.14); }
.card__icon svg { width: 21px; height: 21px; }
.card h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; line-height: 1.12; }
.card p { color: var(--bone-dim); margin-top: .7rem; }
.section--paper .card p { color: var(--paper-dim); }

/* Numbered stat blocks */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); }
.stat { background: var(--ink); padding: clamp(1.5rem, 3.4vw, 2.4rem); }
.section--paper .stat { background: var(--paper); }
.stat__n { font-family: var(--serif); font-size: var(--step-3); color: var(--orange); line-height: 1; }
.stat__l { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-dim); margin-top: .6rem; }
.section--paper .stat__l { color: var(--paper-dim); }

/* ---------- 11. Gallery / masonry ---------- */
.masonry { columns: 1; column-gap: clamp(.8rem, 1.8vw, 1.2rem); }
@media (min-width: 640px)  { .masonry { columns: 2; } }
@media (min-width: 1040px) { .masonry { columns: 3; } }
.tile {
  break-inside: avoid; margin-bottom: clamp(.8rem, 1.8vw, 1.2rem);
  position: relative; overflow: hidden; border-radius: 3px;
  background: var(--ink-3); display: block; width: 100%;
  border: 0; padding: 0; cursor: zoom-in; text-align: left; color: inherit;
}
.tile img, .tile video {
  width: 100%; height: auto; display: block;
  transition: transform 1s var(--ease), filter .5s var(--ease);
  filter: saturate(.68) contrast(1.06) brightness(.9);
}
.tile:hover img, .tile:hover video { transform: scale(1.05); filter: saturate(.95) contrast(1.06) brightness(1); }
.tile__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  background: linear-gradient(180deg, rgba(10,10,11,.05) 30%, rgba(10,10,11,.9));
  opacity: .92; transition: opacity .4s var(--ease);
}
.tile:hover .tile__veil { opacity: 1; }
.tile__veil h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
.tile__veil p { color: var(--bone-dim); font-size: var(--step--1); margin-top: .4rem;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.tile:hover .tile__veil p, .tile:focus-visible .tile__veil p { max-height: 8rem; opacity: 1; }
.tile__tags { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); margin-bottom: .5rem; }
.tile__play {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(242,239,233,.4); border-radius: 50%;
  color: var(--bone); background: rgba(10,10,11,.4); backdrop-filter: blur(6px);
}
.tile__play svg { width: 12px; height: 12px; }

/* ---------- 11a. Video-only clip tiles ---------- */
/* ---- Raw footage grid ----
   Uniform 3-column grid on dark background, no gaps between tiles,
   play button overlay on each clip. Matches the reference layout. */
.section--raw {
  background: #080809;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3.5rem);
}
.rawgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.rawgrid__item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  aspect-ratio: 16/9;
  cursor: pointer;
}
.rawgrid__item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.92);
  transition: filter .5s var(--ease);
}
.rawgrid__item:hover video { filter: saturate(1) contrast(1.06) brightness(1); }
.rawgrid__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.rawgrid__item:hover .rawgrid__play { opacity: 1; }
.rawgrid__play svg { width: 48px; height: 48px; }

@media (max-width: 519px) {
  .rawgrid { grid-template-columns: repeat(3, 1fr); }
  .rawgrid__play svg { width: 32px; height: 32px; }
}
@media (min-width: 840px) {
  .rawgrid { gap: 5px; }
  .rawgrid__play svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .rawgrid__item video { transition: none; }
}

/* ELIXIR logo placeholder */
.elixir-logo-card {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-radius: 3px;
  background: linear-gradient(145deg, #181818 0%, #0e0e0f 100%);
}
.elixir-logo-card img { max-width: min(60%, 260px); height: auto; opacity: .85; }

/* ---------- 11b. Announcement posters ----------
   Portrait campaign creatives in a 3-up grid, each opening in the lightbox.
   Uses the same [data-lb] hook as .tile, so main.js needs no changes. */
.posters {
  display: grid; gap: clamp(1.1rem, 2.6vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.poster {
  display: block; width: 100%; text-align: left; color: inherit;
  background: none; border: 0; padding: 0; cursor: zoom-in; font: inherit;
}
.poster__shot {
  /* Must be block: aspect-ratio has no effect on a non-replaced inline box,
     and this is a <span> so the button's content model stays valid. */
  display: block;
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4 / 5; background: var(--ink-3);
  border: 1px solid var(--hair);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.poster__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.poster:hover .poster__shot { border-color: rgba(242,106,40,.5); transform: translateY(-4px); }
.poster:hover .poster__shot img { transform: scale(1.045); }
.poster__zoom {
  position: absolute; right: .8rem; bottom: .8rem;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: var(--bone);
  background: rgba(10,10,11,.55); border: 1px solid rgba(242,239,233,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.poster:hover .poster__zoom, .poster:focus-visible .poster__zoom { opacity: 1; transform: none; }
.poster__zoom svg { width: 15px; height: 15px; }
.poster__tag {
  display: block; margin-top: 1.1rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--orange);
}
.poster h3 {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 700;
  line-height: 1.1; margin-top: .5rem;
}
.poster p { color: var(--bone-dim); font-size: var(--step--1); margin-top: .55rem; }
.section--paper .poster p { color: var(--paper-dim); }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6,6,7,.94); backdrop-filter: blur(10px);
  overscroll-behavior: contain;
}
.lb.is-open { display: grid; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.lb__frame { max-width: min(1100px, 92vw); max-height: 84vh; }
.lb__frame img, .lb__frame video { max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto; border-radius: 3px; }
.lb__cap { text-align: center; margin-top: 1rem; font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.lb__x, .lb__nav {
  position: absolute; background: none; border: 1px solid var(--hair); color: var(--bone);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.lb__x:hover, .lb__nav:hover { border-color: var(--orange); background: rgba(242,106,40,.12); }
.lb__x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb__nav--prev { left: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb svg { width: 16px; height: 16px; }

/* ---------- 12. Pricing ---------- */
.plans { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); align-items: stretch; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  display: flex; flex-direction: column;
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.8rem, 3.4vw, 2.6rem); position: relative;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.plan:hover { transform: translateY(-5px); border-color: rgba(242,239,233,.26); }
.plan--feature {
  background: linear-gradient(165deg, #16171a, #0d0d0f);
  border-color: rgba(242,106,40,.4);
  box-shadow: 0 30px 70px -40px var(--orange-glow);
}
.plan--feature::after {
  content: ""; position: absolute; inset: -1px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(160deg, rgba(242,106,40,.5), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.plan__flag {
  position: absolute; top: -1px; right: 1.6rem;
  background: var(--orange); color: #fff; font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; padding: .38rem .8rem;
}
.plan__name { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
.plan__for { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-top: .6rem; }
.plan__price { font-family: var(--serif); font-size: var(--step-3); line-height: 1; margin-top: 1.3rem; }
.plan__price small { font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bone-dim); display: block; margin-top: .5rem; }
.plan .flist { margin-top: 1.5rem; margin-bottom: 2rem; }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---- 12b. Gym membership pricing (four-duration grid) ----
   Each card gets a short orange price-tag rule at the top, a big serif
   total, a small-caps per-month rate and a savings chip. The 12-month
   plan is the hero: gradient edge, glow and an enlarged price. */
.plans--four { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .plans--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .plans--four { grid-template-columns: repeat(4, 1fr); } }

.plans--four .plan { padding-top: clamp(2.3rem, 3.8vw, 3rem); }
.plans--four .plan::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(242,106,40,.85), rgba(242,106,40,.04) 85%);
}
.plans--four .plan__price { margin-top: 1.7rem; }
.plans--four .plan__meta {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bone-dim); margin-top: .6rem;
}
.plans--four .plan__save {
  align-self: flex-start; margin-top: 1.15rem;
  margin-bottom: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid rgba(242,106,40,.45); background: rgba(242,106,40,.08);
  color: var(--orange); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.plans--four .plan .btn { margin-top: clamp(1.8rem, 2.4vw, 2.6rem); }
.plans--four .plan__save--flex { border-color: var(--hair); background: transparent; color: var(--bone-dim); }

/* Hero (12-month) card: a floating "Best value" pill above the edge, an
   orange-tinted surface, a warm edge and an enlarged price. The generic
   top rule and gradient edge are dropped here so the pill is the single
   accent at the top of the card. */
.plans--four .plan--feature {
  border-color: rgba(242,106,40,.55);
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(242,106,40,.14), transparent 55%),
    linear-gradient(168deg, #191a1f, #0b0b0d);
  box-shadow: 0 28px 70px -32px var(--orange-glow);
}
.plans--four .plan--feature::before,
.plans--four .plan--feature::after { display: none; }
.plans--four .plan--feature .plan__flag {
  top: -13px; right: auto; left: 50%; transform: translateX(-50%);
  padding: .44rem 1.05rem; border-radius: 999px; white-space: nowrap;
  letter-spacing: .22em; box-shadow: 0 10px 26px -10px var(--orange-glow);
}
.plans--four .plan--feature .plan__price {
  font-size: clamp(2.5rem, 2rem + 2.4vw, 3.8rem); color: #fff;
}
.plans--four .plan--feature .plan__meta { color: var(--orange); }
.plans--four .plan--feature .plan__save {
  background: rgba(242,106,40,.18); border-color: rgba(242,106,40,.65);
}
.plans--four .plan--feature:hover { border-color: rgba(242,106,40,.8); }

/* "Every membership includes" strip under the price cards. */
.inc {
  display: grid; gap: 1.2rem; align-items: start;
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.4rem, 3vw, 2rem);
}
@media (min-width: 760px) { .inc { grid-template-columns: minmax(0, 26ch) 1fr; gap: 2rem; } }
.inc__head h3 { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.inc__list {
  list-style: none; display: grid; gap: .6rem 2rem; margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .inc__list { grid-template-columns: 1fr 1fr; } }
.inc__list li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--step--1); color: var(--bone-dim);
}
.inc__list li::before {
  content: "\25C6"; position: absolute; left: 0; top: .08em;
  font-size: .55rem; color: var(--orange);
}

/* ---- 12b. Personal training pricing ----
   Deliberately not .plan cards: PT is a different product, so it gets a
   different shape — ledger-style tables inside two dark cards. */
.pt { display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); }
@media (min-width: 880px) { .pt { grid-template-columns: repeat(2, 1fr); } }
.pt__card {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #16171a, #0d0d0f);
  border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
}
.pt__card--elite { border-color: rgba(242,106,40,.4); box-shadow: 0 30px 70px -40px var(--orange-glow); }
.pt__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--hair); padding-bottom: 1.1rem;
}
.pt__head h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
.pt__badge { font-family: var(--serif); font-size: var(--step-3); font-weight: 700; color: var(--orange); line-height: 1; }
.pt__tag { color: var(--bone-dim); font-size: var(--step--1); margin: 1.1rem 0 .4rem; }
.pt__table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.6rem; }
.pt__table th, .pt__table td {
  padding: .85rem 0; border-bottom: 1px solid var(--hair);
  text-align: left; vertical-align: baseline;
}
.pt__table tr:last-child th, .pt__table tr:last-child td { border-bottom: 0; }
.pt__table th {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-dim);
}
.pt__table td { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; white-space: nowrap; }
.pt__table .pt__save {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500;
  color: var(--bone-dim); text-align: right; white-space: normal;
}
.pt__card .btn { margin-top: auto; justify-content: center; }

/* ---- 12c. ELIXIR Wellness pricing ----
   Runs in the ELIXIR sub-brand green, not the site orange, so it reads as
   a different world. Stations list like a menu in grouped sections; the
   Value Package sits below as one glowing all-access band. */
.well__menu {
  display: grid; gap: 1.6rem;
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: clamp(1.8rem, 3.8vw, 2.8rem);
}
@media (min-width: 860px) { .well__menu { grid-template-columns: minmax(0, 28ch) 1fr; gap: 2.6rem; } }
.well__logo { width: 128px; border-radius: 3px; margin-bottom: 1.4rem; }
.well__menu-head h3 { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.well__menu-head p { color: var(--bone-dim); font-size: var(--step--1); margin-top: .55rem; }
.well__list {
  list-style: none; margin: 0; display: grid; gap: .95rem 2.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .well__list { grid-template-columns: 1fr 1fr; } }
.well__group { grid-column: 1 / -1; }
.well__group span {
  display: inline-block; font-size: .62rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--elixir);
  padding-bottom: .4rem; border-bottom: 1px solid var(--hair);
}
.well__group:not(:first-child) { margin-top: 1.1rem; }
.well__list li:not(.well__group) {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--step--1);
  transition: color .3s var(--ease);
}
.well__list li:not(.well__group):hover { color: #fff; }
.well__dots { flex: 1; border-bottom: 1px dotted rgba(242,239,233,.28); transform: translateY(-.28em); }
.well__price {
  font-family: var(--serif); font-size: var(--step-1); font-weight: 700;
  color: var(--elixir); white-space: nowrap;
}

/* Value Package — one wide all-access band in ELIXIR green. */
.well__pack {
  margin-top: clamp(1.5rem, 3.6vw, 2.75rem);
  border: 1px solid rgba(77,125,81,.45); border-radius: 3px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(77,125,81,.16), transparent 55%),
    linear-gradient(168deg, #191a1f, #0b0b0d);
  box-shadow: 0 30px 70px -40px rgba(77,125,81,.38);
  padding: clamp(1.8rem, 3.8vw, 2.8rem);
}
.well__pack-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.well__pack-eyebrow {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--elixir);
}
.well__pack-top h3 { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; margin-top: .55rem; }
.well__worth {
  font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  color: #fff; font-weight: 700; margin-top: .9rem; line-height: 1.1;
}
.well__worth-note {
  display: block; font-family: var(--sans); font-size: var(--step--1);
  font-weight: 500; color: var(--bone-dim); margin-top: .45rem;
}
.well__terms {
  display: grid; gap: 0; margin-top: 1.7rem;
  border-top: 1px solid var(--hair); padding-top: .5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .well__terms { grid-template-columns: repeat(3, 1fr); } }
.well__term {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.15rem 0; position: relative;
}
.well__term + .well__term { border-top: 1px solid var(--hair); }
@media (min-width: 640px) {
  .well__term { padding: 1.15rem 1.35rem; justify-content: center; }
  .well__term + .well__term { border-top: 0; border-left: 1px solid var(--hair); }
  .well__term:first-child { padding-left: 0; }
  .well__term:last-child { padding-right: 0; }
}
.well__term-flag {
  align-self: flex-start; margin-bottom: .15rem;
  display: inline-flex; padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid rgba(77,125,81,.55); background: rgba(77,125,81,.14);
  color: var(--elixir); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.well__term-dur {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-dim);
}
.well__term-price {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 700;
  color: var(--elixir); line-height: 1;
}
.well__term-per { font-size: var(--step--1); color: var(--bone-dim); }
.well__pack-note {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair);
  font-size: var(--step--1); color: var(--bone-dim);
}

/* ---------- 13. Forms ---------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim);
}
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.05rem;
  background: rgba(242,239,233,.035); color: var(--bone);
  border: 1px solid var(--hair); border-radius: 2px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); background: rgba(242,106,40,.05);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(163,160,155,.55); }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3a09b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 12px;
  padding-right: 2.6rem; }
.field select option { background: var(--ink-2); color: var(--bone); }
.field--error input, .field--error select, .field--error textarea { border-color: #e0533f; }
.field__err { font-size: .74rem; color: #f08a78; display: none; }
.field--error .field__err { display: block; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .78rem; color: var(--bone-dim); }
.form__ok {
  display: none; padding: 1.1rem 1.3rem; border-radius: 2px;
  border: 1px solid rgba(77,125,81,.5); background: rgba(77,125,81,.12); color: #b7d9ba;
  font-size: var(--step--1);
}
.form__ok.is-visible { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- 14. Contact ---------- */
.info { display: grid; gap: 2rem; }
.info__block { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.info__ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 2px; color: var(--orange);
}
.info__ico svg { width: 18px; height: 18px; }
.info h3 { font-size: var(--step--1); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone); margin-bottom: .5rem; }
.info a { color: var(--bone-dim); transition: color .3s var(--ease); }
.info a:hover { color: var(--orange); }
.info p { color: var(--bone-dim); }

.hours { list-style: none; padding: 0; display: grid; gap: .1rem; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .65rem; border-bottom: 1px solid var(--hair); color: var(--bone-dim); }
.hours li:last-child { border-bottom: 0; }
.hours b { color: var(--bone); font-weight: 500; }

.map {
  position: relative; border: 1px solid var(--hair); border-radius: 3px; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--ink-3);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }

/* ---------- 15. CTA band ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 8rem); text-align: center;
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.35) brightness(.4); }
.cta__scrim { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 100% at 50% 100%, rgba(242,106,40,.22), transparent 62%), rgba(10,10,11,.72); }
.cta .d2 { max-width: 18ch; margin-inline: auto; }

/* ---------- 16. Footer ---------- */
.foot { background: #060607; border-top: 1px solid var(--hair); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.foot__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.foot__logo { width: clamp(160px, 20vw, 210px); margin-bottom: 1.2rem; }
.foot h4 { font-size: var(--step--1); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone); margin-bottom: 1.1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.foot a { color: var(--bone-dim); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.foot a:hover { color: var(--orange); }
.foot li > a:hover { padding-left: 5px; }
.foot p { color: var(--bone-dim); font-size: var(--step--1); }
.foot__bar {
  margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--hair);
  padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  font-size: .76rem; color: rgba(163,160,155,.75);
}
.foot__disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
}
.foot__disclaimer h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--orange); margin-bottom: .8rem;
}
.foot__disclaimer ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.foot__disclaimer li {
  font-size: .74rem; line-height: 1.5; color: rgba(163,160,155,.8);
  padding-left: 1rem; position: relative;
}
.foot__disclaimer li::before {
  content: "•"; position: absolute; left: 0; color: var(--orange); opacity: .7;
}
.foot__social { display: flex; gap: .6rem; }
.foot__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 50%;
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.foot__social a:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
.foot__social svg { width: 16px; height: 16px; }

/* Floating action buttons — booking above WhatsApp.
   A flex column owns the positioning so the stack stays aligned and correctly
   spaced whether a page carries both buttons or only one (contact/404 have no
   WhatsApp button, since those pages already lead with contact routes). */
.fabs {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: scale(1.08); }

/* Book your seat — brand orange, sits above WhatsApp */
.fab--book { background: var(--orange); box-shadow: 0 10px 30px -8px var(--orange-glow); }
.fab--book:hover { box-shadow: 0 14px 34px -8px rgba(242,106,40,.55); }

/* WhatsApp — positioning now comes from .fabs */
.wa { background: #22a04b; box-shadow: 0 10px 30px -8px rgba(34,160,75,.6); }
.wa:hover { box-shadow: 0 14px 34px -8px rgba(34,160,75,.55); }
@media (max-width: 600px) { .fabs { bottom: 0.5rem; } }

/* Slide-left page transition (booking hand-off).
   The panel starts off-screen right and travels left across the viewport, so
   the outgoing page reads as being pushed aside. Injected by main.js rather
   than sitting in every page's markup — with JS off the link just navigates
   normally, which is the correct fallback. */
.wipe {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
}
.wipe.is-active {
  transform: translateX(0);
  transition: transform .5s var(--ease);
  /* Swallow clicks while the wipe plays — the outgoing page is still live
     underneath, and a stray click there would race the pending navigation. */
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .wipe { display: none; }
}

/* ---------- 17. Notices ---------- */
.note {
  border-left: 2px solid var(--orange); padding: 1rem 0 1rem 1.3rem;
  color: var(--bone-dim); font-size: var(--step--1);
}
.quote {
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-2); line-height: 1.35; color: var(--bone);
  border-left: 2px solid var(--orange); padding-left: clamp(1.2rem, 3vw, 2.2rem);
  max-width: 46ch;
}
.section--paper .quote { color: var(--paper-ink); }

/* ---------- 18. Reveal on scroll ----------
   Scoped to .js (set by an inline script in <head>). If JavaScript is off,
   blocked, or main.js fails to load, every .rv element stays fully visible
   instead of the page rendering blank.

   .js .rv is two class selectors (specificity 0,2,0), which outranks any
   single-class component rule like .card / .plan (0,1,0) regardless of
   source order — so its `transition` shorthand doesn't just add the reveal's
   opacity/transform transition, it silently REPLACES the whole transition
   list on every element that carries both classes, which is effectively
   every .card and .plan on the site. The border-color/background durations
   they declare for their own :hover states were being discarded, making
   those hover transitions instant instead of smooth. Rather than fight that
   with even higher specificity, this rule just owns the full list itself. */
.js .rv {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease),
              border-color .4s var(--ease), background .4s var(--ease),
              box-shadow .4s var(--ease), color .3s var(--ease);
}
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv[data-d="1"] { transition-delay: .08s; }
.js .rv[data-d="2"] { transition-delay: .16s; }
.js .rv[data-d="3"] { transition-delay: .24s; }
.js .rv[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn, .card, .plan, .tile img { transition: none !important; }
}

/* ---------- 19. Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: var(--gut); z-index: 300;
  background: var(--orange); color: #fff; padding: .8rem 1.2rem; border-radius: 2px;
  transition: top .3s var(--ease);
}
.skip:focus { top: .8rem; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ==========================================================================
   20. Engagement — tilt, magnetic buttons, hero cursor-glow, live badge, quiz
   Opt-in via markup (.tilt / .btn--magnetic / .hero__glow) rather than a
   blanket site-wide behavior — only elements that carry these classes react.
   All pointer-tracking effects are skipped outright on touch devices and
   under prefers-reduced-motion (see main.js, which checks both before
   attaching any listener); the CSS here only needs to cover the resulting
   states, not guard the motion itself.
   ========================================================================== */

/* ---- 20.1 Tilt + 20.2 Magnetic buttons ----
   JS sets the full `transform` inline (perspective + rotateX/rotateY, with
   the hover lift folded in) so it always wins over the element's own
   `:hover` transform rule without fighting CSS specificity. Deliberately no
   `transition` declared here: .card / .plan / .quiz__opt already transition
   `transform` themselves, and `transition` is a shorthand — a second rule
   setting it (even to the same effect) would silently replace their whole
   list rather than merge with it, killing the border-color/background
   transitions on hover for anything tilted. */
/* will-change is scoped to `pointer: fine` because the JS only attaches these
   effects there. Unscoped, it permanently promoted ~16 elements to their own
   compositor layers on phones for effects that can never fire — GPU memory and
   compositing overhead spent on nothing. */
@media (pointer: fine) {
  .tilt { will-change: transform; }
  .btn--magnetic { will-change: transform; }
}

/* ---- 20.3 Hero cursor-glow ----
   A soft radial highlight that tracks the pointer across the hero. Sits
   above the scrim, below the text (same z-index as the scrim; DOM order
   after it wins the paint order within that stacking context). */
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(480px 480px at var(--mx, 50%) var(--my, 50%),
              rgba(242,106,40,.20), transparent 68%);
}
.hero:hover .hero__glow { opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .hero__glow { display: none; } }

/* ---- 20.4 Find Your ATMOS Path (quiz) ---- */
.quiz { max-width: 900px; }
.quiz__q {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 1.3rem;
}
.quiz__opts {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.quiz__opt {
  display: grid; gap: .5rem; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px;
  padding: 1.4rem 1.5rem;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.quiz__opt:hover { border-color: rgba(242,106,40,.5); transform: translateY(-3px); }
.quiz__opt.is-selected { border-color: var(--orange); background: rgba(242,106,40,.09); }
.quiz__opt-t { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; }
.quiz__opt-d { font-size: var(--step--1); color: var(--bone-dim); }

.quiz__back {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--bone-dim);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.quiz__back:hover { color: var(--orange); }

.quiz__card {
  background: linear-gradient(165deg, #16171a, #0d0d0f);
  border: 1px solid rgba(242,106,40,.4); border-radius: 3px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: 0 30px 70px -40px var(--orange-glow);
}
.quiz__tier { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; line-height: 1.15; }
.quiz__reason { color: var(--bone-dim); margin-top: .8rem; max-width: 54ch; }

.quiz__step, .quiz__result { animation: quizIn .5s var(--ease); }
@keyframes quizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz__step, .quiz__result { animation: none; } }