/* ==========================================================================
   Brigade Fitness: the skin over the shared funnel styles (base.css).
   Brigade is strict monochrome: off-black ink, bone type, black and white
   photography's palette, sharp corners. Emphasis comes from brightness,
   weight and scale, never a colour. Outfit for type, IBM Plex Mono for
   labels, as on the Brigade redesign.
   ========================================================================== */
:root {
  --olive: #0e0f10;        /* primary: ink */
  --olive-deep: #000;
  --olive-soft: #6b6c6e;
  --ink: #0e0f10;
  --ink-deep: #070808;
  --sage: #f4f2ed;         /* accent on dark: bone */
  --gold: #f4f2ed;
  --sand: #e8e6e0;
  --mist: #ebe9e4;
  --paper: #f4f2ed;
  --body: #1c1d1f;
  --muted: #5d5f62;
  --line: #d9d7d1;
  --coal: #16181a;
  --ash: #a7a6a1;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --r: 0px;
  --r-lg: 2px;
}
body { background: var(--paper); }
h1, h2 { text-transform: uppercase; font-weight: 900; letter-spacing: -.01em; line-height: .98; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-weight: 700; }
.hero h1 .hl, .hero h1 .mo-w__i.hl { color: #8b8a86; }

/* labels in mono, as the redesign does for drill labels and addresses */
.eyebrow, .kicker, .q__n, .book__steps li, .trust span, .spec__row dt, .journey .tag,
.nsquiz__done .kicker, .legal, .filmcard__hint {
  font-family: var(--mono); letter-spacing: .12em;
}
.eyebrow, .kicker { font-weight: 500; }
.kicker .n, .book__steps li, .book__steps li b { border-radius: 0; }

/* buttons: ink on light, bone on dark */
.btn { font-family: var(--font); font-weight: 800; letter-spacing: .08em; }
.on-dark .btn:not(.ghost), .tone-ink .btn:not(.ghost), .dark .btn:not(.ghost),
.fx__panel .btn:not(.ghost), .band .btn { background: var(--paper); color: var(--ink); }
@keyframes ctcGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 15, 16, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(14, 15, 16, .12); }
}
.on-dark .btn.glow, .tone-ink .btn.glow, .fx__panel .btn.glow { animation-name: ctcGlowLight; }
.btn.glow:hover { box-shadow: 0 0 0 6px rgba(14, 15, 16, .14), var(--shadow); }
.on-dark .btn.glow:hover, .tone-ink .btn.glow:hover, .fx__panel .btn.glow:hover { box-shadow: 0 0 30px 2px rgba(244, 242, 237, .35); }

/* header: the wordmark on bone */
.top { background: var(--paper); }
.top .logo { height: 30px; width: auto; }
.foot .logo { height: 34px; width: auto; }

/* dark sections and the lightbox: ink and coal, not olive */
.tone-ink { background: var(--ink); }
.tone-olive { background: var(--coal); }
.tone-olive .kicker, .tone-olive .eyebrow { color: var(--ash); }
.foot { background: var(--ink); }
.fx__panel { background: var(--coal); }
.fx__back { background: rgba(7, 8, 8, .78); }

/* the trust strip */
.trust b { font-weight: 900; }
.trust i { background: var(--ink); }

/* booking card */
.book__steps li.done { background: #e9e7e1; color: var(--ink); }
.book__time[aria-pressed="true"] { background: #e9e7e1; color: var(--ink); }
.fx__slot .book__steps li.done { background: rgba(244, 242, 237, .12); color: var(--paper); }
.book__day, .book__time, .form-card label.opt, .heard li,
.form-card input:not([type="radio"]):not([type="checkbox"]) { border-radius: 0; }

/* quiz */
.form-card label.opt:has(input:checked) { background: #ecebe6; }
.heard li { background: #f0eee9; border-left-color: var(--ink); }
.form-card .q__reply { background: #f0eee9; border-left-color: var(--ink); }
.nsquiz__bar i { border-radius: 0; }
.nsquiz__bar i.now { background: #8b8a86; }
.nsquiz__title { text-transform: uppercase; font-weight: 900; letter-spacing: 0; }

/* films: dark tile behind the poster */
.films3 .film { background: var(--coal); }

/* the demo strip: says plainly that nothing goes anywhere */
.demo-pill {
  margin: 0; text-align: center;
  font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--ash); padding: 7px 12px;
}