/* ==========================================================================
   Primal Fitness: the skin over the shared funnel styles (base.css).
   From their website and logo (research/BRAND.md): Primal red #BD3232 (the
   claw in the logo, every button on primalfitnessuk.com), near-black #0C1115
   and charcoal #1F1F1F for the dark rooms, white and a light grey for the
   light ones. Raleway for the words, Poppins in capitals for the buttons, as on
   their site. Their wordmark is white, so the header is dark. The photography
   (black walls, red rigs, the PRIMAL floor lettering) supplies the rest.
   ========================================================================== */
:root {
  --olive: #1f1f1f;        /* primary dark: charcoal */
  --olive-deep: #0c1115;
  --olive-soft: #5a5f66;
  --ink: #0c1115;
  --ink-deep: #07090c;
  --sage: #e37b7b;         /* accent on dark: a lighter Primal red */
  --gold: #f6b93b;         /* review stars */
  --sand: #ececec;
  --mist: #e9e9ea;
  --paper: #f6f6f6;
  --body: #232323;
  --muted: #5e6166;
  --line: #dcdcde;
  --ice: #bd3232;          /* the button and accent: Primal red */
  --ice-deep: #bd3232;
  --coal: #1f1f1f;
  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --btn-font: 'Poppins', var(--font);
  --r: 2px;
  --r-lg: 6px;
  --shadow: 0 4px 14px 0 rgba(12, 17, 21, .14);
  --shadow-lg: 0 18px 44px -14px rgba(12, 17, 21, .45);
}
body { background: var(--paper); font-weight: 500; }
h1, h2 { font-weight: 800; letter-spacing: -.01em; }
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, white Poppins capitals, square corners, as on their website */
.btn { font-family: var(--btn-font); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--r); background: var(--ice); color: #fff; }
.btn:hover { background: #d03c3c; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: transparent; }
.on-dark .btn.ghost, .tone-ink .btn.ghost { color: #fff; }
.btn.big { font-size: .98rem; }
.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(189, 50, 50, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(189, 50, 50, .2); }
}
@keyframes ctcGlowLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 123, 123, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(227, 123, 123, .32); }
}
.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(227, 123, 123, .45); }

/* header: near-black, for the white wordmark */
.top { background: rgba(12, 17, 21, .97); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.top .btn.ghost { color: #fff; }
.top .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.top .brand .word { height: 44px; width: auto; }
.foot .logo { height: 58px; width: auto; }

/* dark rooms: near-black, and charcoal for the "olive" ones */
.tone-ink { background: var(--ink); }
.tone-olive { background: var(--coal); }
.tone-olive .kicker, .tone-olive .eyebrow { color: var(--sage); }
.tone-olive .kicker .n { background: var(--ice); color: #fff; }
.on-dark .kicker, .tone-ink .kicker, .on-dark .eyebrow, .tone-ink .eyebrow { color: var(--sage); }
.foot { background: var(--ink-deep); }
.fx__panel { background: var(--ink); }
.fx__back { background: rgba(7, 9, 12, .82); }
.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: #f6e3e3; 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; }
.fx__slot .book__steps li.done { background: rgba(227, 123, 123, .2); color: var(--paper); }
.form-card label.opt:has(input:checked) { background: #f6e3e3; }
.heard li, .form-card .q__reply { background: #f8eded; border-left-color: var(--ice-deep); }
.nsquiz__bar i.now { background: var(--ice-deep); }

/* films: charcoal behind the poster */
.films3 .film, .wall .film { background: var(--coal); }
/* four films: two by two on a tablet, four across on a desktop */
@media (min-width: 700px) { .films3.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .films3.four { grid-template-columns: repeat(4, 1fr); } }

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

/* in the window (dark 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); }

/* the intro film in a hero (here, not pages.css: /next-steps has it too). Its poster keeps
   its own shape: the img's height attribute would otherwise win over the hero's 4:5 */
.introfilm { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; background: var(--coal); position: relative; }
.introfilm img { width: 100%; height: auto; display: block; max-height: 80vh; }
.introfilm:hover .filmcard__hint, .introfilm:focus-visible .filmcard__hint { opacity: 1; transform: none; }

/* a hero picture with its size given (for a steady first paint) keeps the hero's shape */
.hero-media img[height] { height: auto; }