/* Fitness Exclusive — shared site styles (2026-11-01)
   Linked LAST in <head> on every page, so the rules here win over each page's own <style>.
   1. One spacing scale for content pages     4. Call (Viber) button in brand colours
   2. Buttons, focus ring, smoother fades     5. Footer touch-ups
   3. Document pages (Terms): contents list, "In short" notes, back to top
   6. Page-to-page transitions (Chrome / Edge / Safari 18+)
   Branch pages only pick up 2, 4, 5 and 6 — their layout is untouched. */

:root{
  --fe-red:#E31B23;
  --fe-ink:#0A0A0B;
  --fe-sec:clamp(72px,8vw,112px);        /* space above and below every content section */
  --fe-hero-top:clamp(64px,8vw,104px);
  --fe-hero-bottom:clamp(56px,7vw,88px);
  --fe-read:44rem;                       /* ≈ 70 characters a line: comfortable reading width */
}

/* ── 1. Spacing scale (marketing / content pages only) ─────────────── */
.mission,.values,.branches-strip,               /* About */
.audience,.placements,.why,.inquire,            /* Advertise */
.roles,.apply,                                  /* Careers */
.ot-perks,.faq-body,.terms-body{padding-top:var(--fe-sec);padding-bottom:var(--fe-sec)}
.ot-join{padding-bottom:var(--fe-sec)}
.about-hero,.faq-hero,.adv-hero,.careers-hero,.ot-hero{padding-top:var(--fe-hero-top);padding-bottom:var(--fe-hero-bottom)}
.ot-found{padding-top:clamp(56px,6vw,72px);padding-bottom:clamp(56px,6vw,72px)}

/* ── 2. Buttons, focus, motion ────────────────────────────────────── */
.btn{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .btn:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
  /* the older "fade-up" blocks: shorter travel and time, so a fast scroll never shows an empty screen */
  .fade-up{transform:translateY(16px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--fe-red);outline-offset:3px;border-radius:4px}
::selection{background:rgba(227,27,35,.18)}

/* ── 3. Document pages (Terms) ────────────────────────────────────── */
.doc-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--fe-red);transform-origin:0 50%;transform:scaleX(0);z-index:200;pointer-events:none}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;max-width:1080px;margin:0 auto}
@media (min-width:1024px){.doc{grid-template-columns:240px minmax(0,1fr);gap:64px}}
.doc-main{max-width:var(--fe-read);min-width:0}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:28px;font-size:14px;color:#666672}
.doc-meta__date{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:99px;padding:6px 14px;font-weight:600;color:#0A0A0B}
.doc-meta__date::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fe-red)}
.doc-note{font-size:14px;line-height:1.6;color:#666672;margin:0 0 32px}

/* contents list: sticky column on laptops, "Jump to" menu on phones */
.doc-toc{display:none}
@media (min-width:1024px){
  .doc-toc{display:block;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;padding-right:4px}
  .doc-jump{display:none!important}
}
.doc-toc__title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#666672;margin:0 0 12px}
.doc-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid rgba(0,0,0,.08)}
.doc-toc a{display:flex;gap:10px;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:#4a4a55;text-decoration:none;transition:color .2s,border-color .2s}
.doc-toc a span{flex:0 0 18px;font-weight:700;color:#9a9aa6;font-variant-numeric:tabular-nums;transition:color .2s}
.doc-toc a:hover{color:#0A0A0B}
.doc-toc a.is-active{color:#0A0A0B;font-weight:600;border-left-color:var(--fe-red)}
.doc-toc a.is-active span{color:var(--fe-red)}
.doc-jump{position:sticky;top:var(--fe-nav-h,64px);z-index:20;margin:0 -24px 28px;padding:10px 24px;background:rgba(244,241,236,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
.doc-jump label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#666672;margin-bottom:4px}
.doc-jump select{width:100%;appearance:none;-webkit-appearance:none;font:600 16px/1.2 'Barlow',sans-serif;color:#0A0A0B;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E31B23' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px 40px 12px 14px}

/* sections */
.doc-sec{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:clamp(22px,4vw,36px);margin:0 0 20px;scroll-margin-top:calc(var(--fe-nav-h,64px) + 100px)}
@media (min-width:1024px){.doc-sec{scroll-margin-top:calc(var(--fe-nav-h,64px) + 24px)}}
.doc-sec h2{display:flex;align-items:baseline;gap:12px;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(26px,3.2vw,32px);line-height:1.05;letter-spacing:.02em;color:#0A0A0B;margin:0 0 16px;border:0;padding:0}
.doc-sec h2 .doc-num{flex:0 0 auto;font-size:.8em;color:var(--fe-red)}
.doc-short{display:flex;gap:12px;align-items:flex-start;background:#fbf3f3;border-radius:12px;padding:14px 16px;margin:0 0 20px;font-size:16px;line-height:1.6;color:#2a2a31}
.doc-short b{flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fe-red);padding-top:3px}
.doc-sec p,.doc-sec li{font-size:17px;line-height:1.75;color:#33333d}
.doc-sec ul,.doc-sec ol{padding-left:22px;margin:0}
.doc-sec li{margin-bottom:10px}
.doc-sec li::marker{color:var(--fe-red)}
.doc-sec li ul{margin-top:10px}
.doc-sec a{color:#b00f15;text-underline-offset:3px}
.doc-sec strong{color:#0A0A0B}
@media (max-width:600px){.doc-sec{padding:22px 18px;border-radius:14px}.doc-sec ul,.doc-sec ol{padding-left:18px}.doc-sec p,.doc-sec li{font-size:16.5px}.doc-short{font-size:15.5px;flex-direction:column;gap:4px}.doc-short b{padding-top:0}}

/* back to top (bottom-left, clear of the call button) */
.fe-top{position:fixed;left:20px;bottom:24px;z-index:9997;width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:#fff;color:#0A0A0B;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.14);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s,border-color .2s}
.fe-top.is-on{opacity:1;pointer-events:auto;transform:none}
.fe-top:hover{border-color:var(--fe-red);color:var(--fe-red)}
@media print{.fe-top,.doc-progress,.doc-jump,.doc-toc{display:none!important}.doc{display:block}.doc-sec{border:0;padding:0}}

/* ── 4. Call (Viber) button in brand colours ─────────────────────── */
.viber-fab{background:#0A0A0B!important;box-shadow:0 0 0 2px var(--fe-red),0 10px 28px rgba(0,0,0,.30)!important}
.viber-fab:hover{box-shadow:0 0 0 2px var(--fe-red),0 12px 34px rgba(227,27,35,.40)!important}
.viber-fab svg{width:28px;height:28px}

/* ── 5. Footer touch-ups ─────────────────────────────────────────── */
.footer__grid>*{min-width:0}
.footer__col a{transition:color .2s,transform .2s;overflow-wrap:anywhere}
@media (hover:hover){.footer__col a:hover{transform:translateX(3px)}}

/* ── 6. Page-to-page transitions ─────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fe-vt-out .16s ease both}
  ::view-transition-new(root){animation:fe-vt-in .3s cubic-bezier(.22,1,.36,1) both}
  .nav{view-transition-name:fe-nav}
  ::view-transition-group(fe-nav){animation:none}
}
@keyframes fe-vt-out{to{opacity:0}}
@keyframes fe-vt-in{from{opacity:0;transform:translateY(8px)}}

/* ── 7. Branch status (driven by /assets/branches.js) ─────────────── */
[hidden]{display:none!important}
.fc-status{min-height:210px;background:linear-gradient(135deg,#161618,#2b0e10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px}
.fc-status__when{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:3px;color:#ff5a60}
.fc-status__now{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:2px;color:#fff}
.fc-status__note{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:#b4b4bd}

/* ── 8. Readability: booking widget, forms, small red text (2026-11-03 critique) ──
   Floors: functional text ≥12px; small text ≥4.5:1 on its background.
   Small red text on dark uses #ff5a60 (brand red #E31B23 is ~4:1 there); on light, #b00f15. */
.btn--red:hover,.mi-submit:hover,.bw-primary-btn:hover{background:#c8161d!important}

/* booking widget labels */
.bw-step-tab,.bw-slot-box-lbl,.bw-slot-change,.bw-addons-title,.bw-addon-note,.bw-id-label,.bw-id-label span,
.bw-pay2-lock,.bw-pay2-total-lbl,.bw-pay2-chip,.bw-pay2-foot,.bw-closed-note,.bw-hm-legend-item{font-size:12px!important}
.bw-step-tab{color:#8a8a94!important}
.bw-step-tab.active,.bw-slot-box-lbl,.bw-addon-price,.bw-agree-row a,.bw-pay2-title,.fe-rules-foot,.pricing-addl-note{color:#ff5a60!important}
.bw-slot-change,.bw-addons-title,.bw-id-label,.bw-id-drop-text,.bw-pay2-chip--more{color:#a3a3ad!important}
.bw-addon-note,.bw-id-label span{color:#8a8a94!important}
.bw-pay2-foot{color:#9a9aa6!important}
.bw-hm-legend-item{color:#c8c8d0!important}
.bw-text-input::placeholder,.bw-promo-input::placeholder,#bwPromoInput::placeholder,.bw-body input::placeholder{color:#8a8a94!important;opacity:1}
.bw-agree-row{font-size:.85rem!important;color:#b4b4bd!important;align-items:center!important;gap:10px!important}
.bw-agree-row input,#bwAgree{width:20px!important;height:20px!important;margin-top:0!important}
/* the policy line right above "Pay & Confirm Booking" */
.bw-policy{margin:14px 0 4px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#1a1a1c;font-size:.88rem;line-height:1.55;color:#c8c8d0}
.bw-policy strong{color:#fff}

/* pricing sidebar on branch pages */
.pricing-sport-title,.tier-slot,.tier-intro .unit{font-size:12px!important}
.info-key{color:#6b6b75!important}

/* homepage search + event form labels */
.search-field label{font-size:12px}
.ei-field label{font-size:12px;color:#55555f}

/* small red text on light backgrounds */
.mi-section-kicker,.faq-a__inner a{color:#b00f15!important}
.reclub-card div[style*="#E31B23"]{color:#ff5a60!important}
.mi-success h3,.mi-success p,.mi-success strong{color:#15803d!important}
.footer__col span[style*="#9a9aa6"]{color:#6b6b75!important}