/* ==========================================================================
   Absolute Training & Nutrition: the skin over the shared funnel styles (base.css).
   From their logo and their lead nurture emails: black #0A0A0A carries the
   dark rooms and the header of every email, logo red (#FF0000, #F40909 on the
   email buttons) is the one accent and the button colour, white and a warm
   off-white #F4F4F2 for the light rooms. Lato, the face on their website, in
   bold for headings. The photography supplies the rest: red light on black walls.
   ========================================================================== */
:root {
  --olive: #0a0a0a;        /* primary: black */
  --olive-deep: #000000;
  --olive-soft: #5b5b5b;
  --ink: #0a0a0a;
  --ink-deep: #000000;
  --sage: #ff3b30;         /* accent on dark: logo red, lifted a touch */
  --gold: #f40909;         /* review stars */
  --sand: #ecebe8;
  --mist: #e9e8e5;
  --paper: #f4f4f2;
  --body: #1b1b1b;
  --muted: #5b5b5b;
  --line: #dcdbd7;
  --ice: #f40909;          /* the button and accent: Absolute red */
  --ice-deep: #f40909;
  --coal: #161616;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --r: 6px;
  --r-lg: 12px;
  --shadow: 0 4px 14px 0 rgba(0, 0, 0, .16);
  --shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, .4);
}
body { background: var(--paper); font-weight: 400; }
h1, h2 { font-weight: 900; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: 1.08; }
h3 { font-weight: 700; }
.hero h1 .hl, .hero h1 .mo-w__i.hl { color: var(--ice-deep); }
.eyebrow, .kicker { font-weight: 700; letter-spacing: .14em; }

/* buttons: red everywhere, white text, upper case as on the emails */
.btn { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r); background: var(--ice); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); }
.on-dark .btn.ghost, .tone-ink .btn.ghost { color: #fff; }
.btn.big { font-size: 1.02rem; }
.on-dark .btn:not(.ghost):not(.light), .tone-ink .btn:not(.ghost):not(.light), .dark .btn:not(.ghost):not(.light),
.fx__panel .btn:not(.ghost), .cta-strip:not(.sand) .btn, .tone-olive .btn:not(.ghost) {
  background: var(--ice); color: #fff;
}
.btn.light { background: var(--ice); color: #fff; }
.cta-strip.sand .btn { background: var(--ice); color: #fff; }
@keyframes ctcGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 9, 9, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(244, 9, 9, .16); }
}
@keyframes ctcGlowLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 9, 9, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(244, 9, 9, .3); }
}
.on-dark .btn.glow, .tone-ink .btn.glow, .fx__panel .btn.glow, .cta-strip:not(.sand) .btn.glow,
.btn.light.glow { animation-name: ctcGlowLight; }
.on-dark .btn.glow:hover, .tone-ink .btn.glow:hover, .fx__panel .btn.glow:hover,
.cta-strip:not(.sand) .btn.glow:hover { box-shadow: 0 0 32px 2px rgba(244, 9, 9, .5); }

/* header: black, with the red wordmark, as on their website */
.top { background: rgba(10, 10, 10, .96); }
.top .btn.ghost { color: #fff; }
.top .logo { height: 40px; width: auto; }
.top .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.top .brand .word { height: 34px; width: auto; }
.foot .logo { height: 54px; width: auto; }

/* dark rooms: black, and a lifted black for the "olive" ones */
.tone-ink { background: var(--ink); }
.tone-olive { background: var(--coal); }
.tone-olive .kicker, .tone-olive .eyebrow { color: var(--ice); }
.tone-olive .kicker .n { background: var(--ice); color: #fff; }
.foot { background: var(--ink-deep); }
.fx__panel { background: var(--ink); }
.fx__back { background: rgba(0, 0, 0, .8); }
.cta-strip { background: var(--ink); }
.cta-strip.olive { background: var(--coal); }

/* the trust strip and the spec panel */
.trust i { background: var(--ice-deep); }
.spec__row dt { color: var(--muted); }

/* booking card and quiz */
.book__steps li.on { background: var(--ice); }
.book__steps li.on b { color: var(--ice); }
.book__steps li.done { background: #fde7e7; color: var(--ink); }
.book__day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.book__time[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.book__type:hover { border-color: var(--ice); }
.fx__slot .book__steps li.done { background: rgba(244, 9, 9, .18); color: var(--paper); }
.form-card label.opt:has(input:checked) { background: #fde7e7; }
.heard li, .form-card .q__reply { background: #fdf0f0; border-left-color: var(--ice-deep); }
.nsquiz__bar i.now { background: var(--ice-deep); }

/* films: black behind the poster */
.films3 .film, .wall .film { background: var(--coal); }

/* the coaches strip */
.coaches { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
@media (min-width: 640px) { .coaches { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .coaches { grid-template-columns: repeat(5, 1fr); } }
.coaches figure { margin: 0; }
.coaches img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r); display: block; }
.coaches figcaption { margin-top: 10px; font-size: .92rem; line-height: 1.35; }
.coaches figcaption b { display: block; color: #fff; font-weight: 600; }
.coaches figcaption span { color: rgba(255, 255, 255, .6); font-size: .8rem; }
.tone-paper .coaches figcaption b, .tone-sand .coaches figcaption b { color: var(--ink); }
.tone-paper .coaches figcaption span, .tone-sand .coaches figcaption span { color: var(--muted); }

/* the window title clears the close button */
.fx__panel #fx-title { padding-right: 46px; }

/* in the window (black panel) the chosen day and time go red, or they'd vanish into it */
.fx__slot .book__day[aria-pressed="true"], .fx__slot .book__time[aria-pressed="true"] {
  background: var(--ice); border-color: var(--ice); color: #fff;
}
.fx__slot .book__day[aria-pressed="true"] small { color: #fff; }

/* the review cards are white, so on a dark room their words stay dark */
.on-dark .review p, .tone-ink .review p { color: var(--body); }
.on-dark .review .who, .tone-ink .review .who { color: var(--muted); }
.on-dark .review .stars, .tone-ink .review .stars { color: var(--gold); }
.top .brand .word { height: 40px; }