/* ==========================================================================
   Cassells Fitness — design system
   Built from Cassells Fitness Rebrand/ (visual reference only).
   Copy comes from CONTENT-TRUTH.md, never from the mock.

   Two sides, one standard:
     Strength = ink + Chivo + uppercase + hard rules + numbers
     Recovery = oat  + Newsreader Light + air + sentence case
     Ember is the only thing they share.
   Zero border-radius. Anywhere. No exceptions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --cf-ink:          #131110;
  --cf-raised:       #201D1A;

  /* The real Cassells orange. The rebrand prototype used #E2542B, a red-orange it
     invented; this is the brand's own colour and it wins.
     Corrected to #F99F1B on 16 Aug 2026 — the previous #F7900B was a shade off. */
  --cf-ember:        #F99F1B;

  /* Same hue and saturation, darkened, for SMALL EMBER TEXT ON LIGHT SURFACES ONLY.
     #F99F1B is a bright amber: on paper it measures 2.02:1 and on oat 1.82:1, so an
     11px eyebrow set in it is barely there — and it is FAINTER than the old orange
     on light grounds, not brighter, which is why this companion matters more now
     rather than less. This variant measures 5.21:1 on paper and 4.71:1 on oat.

     Use the brand orange for fills, rules, markers and anything on ink; use this
     only where ember is the text colour on a light background. Re-derive it if the
     brand orange ever changes again — the two are a pair. */
  --cf-ember-text:   #985C04;

  --cf-ember-deep:   #3A1A0E;

  /* ── The accent slot ──────────────────────────────────────────────────────
     Components paint with --cf-accent, never with --cf-ember directly. It defaults
     to the brand orange here, and a class page redefines it on <main> — so the nav,
     the footer and the skip link keep Cassells orange everywhere while the body of a
     class page takes that class's own colour. One override per page, no per-component
     exceptions to maintain. */
  --cf-accent:       var(--cf-ember);
  --cf-accent-text:  var(--cf-ember-text);
  --cf-clay:         #A9713F;
  --cf-oat:          #F5EEE4;
  --cf-sand:         #EDE4D7;
  --cf-paper:        #FCFAF7;

  /* Text */
  --cf-on-dark:      #FCFAF7;
  --cf-bright:       #D8D1C9;
  --cf-body-dark:    #A79E94;
  --cf-dim:          #8C8177;
  --cf-body-light:   #6E655C;
  --cf-faint:        #4A443E;
  --cf-num-light:    #C6BCAF;

  /* Rules */
  --cf-rule-light:   #E1DAD0;
  --cf-rule-oat:     #CDBEA9;
  --cf-rule-oat-2:   #D9CDBB;
  --cf-rule-dark:    rgba(252, 250, 247, 0.14);
  --cf-rule-dark-2:  rgba(252, 250, 247, 0.12);
  --cf-rule-ember:   rgba(19, 17, 16, 0.25);

  /* Type */
  --cf-display: Chivo, "Arial Black", system-ui, sans-serif;
  --cf-sans:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --cf-serif:   Newsreader, Georgia, "Times New Roman", serif;

  /* Rhythm — the mock is a fixed 1440 canvas; these are its paddings made fluid */
  --cf-gutter:   clamp(1.25rem, 3.33vw, 3rem);
  --cf-section:  clamp(3.5rem, 7.6vw, 6.875rem);
  --cf-max:      90rem;
  --cf-nav-h:    5.25rem;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Large screens. Every length in this file is in rem (hairlines aside), and the
   design is sized for a 16px root up to 1920 wide. Above that the root grows with
   the viewport, so a 4K monitor at 100% scaling gets the 1080p composition at
   twice the size rather than a 1440px column floating in ink. 1920 / 16 = 120, so
   the root is 16px at 1920, 21.3px at 2560 and 32px at 3840, where it stops.
   vh-based heights (the hero) and vw-based clamps already scale on their own;
   the rem caps inside those clamps now scale with them. Below 1920 nothing here
   applies and the rem values resolve to exactly the pixels they replaced. */
@media (min-width: 1921px) {
  html { font-size: min(calc(100vw / 120), 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cf-ink);
  color: var(--cf-on-dark);
  font-family: var(--cf-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--cf-accent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--cf-accent); color: var(--cf-on-dark); }

:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 0.1875rem;
}

.cf-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cf-skip {
  position: absolute; left: var(--cf-gutter); top: -6.25rem; z-index: 100;
  background: var(--cf-accent); color: var(--cf-ink);
  padding: 0.875rem 1.375rem;
  font-family: var(--cf-display); font-weight: 900; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: top 0.2s ease;
}
.cf-skip:focus { top: 0.75rem; color: var(--cf-ink); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.cf-display,
.cf-h1, .cf-h2, .cf-h3 {
  font-family: var(--cf-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.86;
  margin: 0;
  text-wrap: balance;
}

/* 140px at 1440 */
.cf-display { font-size: clamp(3.25rem, 9.7vw, 8.75rem); letter-spacing: -0.038em; line-height: 0.85; }

/* The 140px setting above is sized for the prototype's two-word line ("Get serious.").
   Real headlines are sentences, and at that size a 14-character word like
   ACCOUNTABILITY is ~960px wide on its own — wider than the hero's text column, so it
   overflows on every viewport below about 1400px. Long headlines get their own ceiling
   rather than the token being weakened for the short ones. */
.cf-display--long { font-size: clamp(2.25rem, 6.4vw, 5.5rem); letter-spacing: -0.03em; line-height: 0.88; }
/* 104px */
.cf-h1      { font-size: clamp(2.75rem, 7.2vw, 6.5rem); }
/* 80px */
.cf-h2      { font-size: clamp(2.25rem, 5.6vw, 5rem); line-height: 0.88; letter-spacing: -0.03em; }
/* 46–56px */
.cf-h3      { font-size: clamp(1.75rem, 3.9vw, 3.5rem); line-height: 0.92; letter-spacing: -0.03em; }

/* The ember full stop that ends a display line */
.cf-stop { color: var(--cf-accent); }

/* Micro-label — Chivo on the hard side */
.cf-eyebrow {
  font-family: var(--cf-display);
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cf-accent);
  margin: 0;
}

/* Micro-label — Instrument Sans on the soft side */
.cf-eyebrow-soft {
  font-family: var(--cf-sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cf-clay);
  margin: 0;
}

.cf-meta {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cf-dim);
}

.cf-lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--cf-bright);
  text-wrap: pretty;
  margin: 0;
}

.cf-body { font-size: 1.0625rem; line-height: 1.6; margin: 0; }

/* Recovery display — the soft side never uses Chivo */
.cf-serif {
  font-family: var(--cf-serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: none;
  margin: 0;
}
.cf-serif-xl { font-size: clamp(2.75rem, 8vw, 7.25rem); line-height: 0.98; letter-spacing: -0.035em; }
.cf-serif-lg { font-size: clamp(2rem, 4.3vw, 3.875rem); line-height: 1.05; }
.cf-serif-md { font-size: clamp(1.5rem, 2.9vw, 2.625rem); line-height: 1.05; }

.cf-quote {
  font-family: var(--cf-serif);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 2.375rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.cf-wrap {
  width: 100%;
  max-width: var(--cf-max);
  margin: 0 auto;
}

.cf-pad { padding-left: var(--cf-gutter); padding-right: var(--cf-gutter); }

.cf-section { padding-top: var(--cf-section); padding-bottom: var(--cf-section); }

.cf-stack     { display: flex; flex-direction: column; gap: 1.5rem; }
.cf-stack-lg  { display: flex; flex-direction: column; gap: 2.125rem; }
.cf-stack-sm  { display: flex; flex-direction: column; gap: 0.875rem; }

.cf-rule { height: 1px; background: var(--cf-rule-dark); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. Surfaces — the two sides
   -------------------------------------------------------------------------- */

.cf-strength { background: var(--cf-ink);   color: var(--cf-on-dark); }
.cf-raised   { background: var(--cf-raised); color: var(--cf-on-dark); }
.cf-paper    { background: var(--cf-paper); color: var(--cf-ink); }
.cf-recovery { background: var(--cf-oat);   color: var(--cf-ink); }
.cf-ember-bg { background: var(--cf-accent); color: var(--cf-ink); }

/* Any component that paints its own light background must set its text colour with
   it. body is ink with near-white text, so a light panel that only sets `background`
   inherits white-on-oat — a 1.05:1 contrast ratio, i.e. invisible. That is exactly
   what happened to the waitlist card and the Restore panel, so every light surface in
   the system is listed here rather than relying on each component to remember. */
.cf-panel,
.cf-waitband__card,
.cf-card,
.cf-pathway__item,
.cf-steps__item,
.cf-aside,
.cf-comingsoon { color: var(--cf-ink); }

/* Ember-as-text on a light surface switches to the darkened variant. Fills, rules and
   markers keep the brand orange — this only catches the cases where the accent is
   carrying words. */
.cf-paper .cf-eyebrow,
.cf-recovery .cf-eyebrow,
.cf-panel .cf-eyebrow,
.cf-waitband__card .cf-eyebrow,
.cf-paper .cf-link-hard,
.cf-recovery .cf-link-hard,
.cf-paper .cf-timeline__year,
.cf-card__go,
.cf-faq.cf-paper .cf-eyebrow,
.cf-faq.cf-recovery .cf-eyebrow { color: var(--cf-accent-text); }

.cf-strength .cf-body,
.cf-raised .cf-body   { color: var(--cf-body-dark); }
.cf-paper .cf-body,
.cf-recovery .cf-body { color: var(--cf-body-light); }

.cf-paper .cf-meta,
.cf-recovery .cf-meta { color: var(--cf-body-light); }

.cf-ember-bg .cf-body { color: var(--cf-ember-deep); }
.cf-ember-bg .cf-eyebrow { color: var(--cf-ember-deep); }

/* --------------------------------------------------------------------------
   5b. Per-class accents
   --------------------------------------------------------------------------

   The old site gave every class its own colour. That idea is kept; the colours are
   not. The originals (#c7ff3c lime, #ff5fa2 pink, #7c5cff violet) were neons drawn
   for a dark glassy interface and they fight this palette badly.

   Each one below sits in the same saturation and value band as the brand orange, so
   the set reads as one family rather than ten unrelated highlights — but the hues
   follow the old assignments, so a member who knew Turf as green still finds it
   green. Every accent clears 6:1 on ink and every text variant clears 4.5:1 on
   paper, oat and sand; the pairs were measured, not eyeballed.

   Two values per class: the accent for fills, rules and markers, and a darkened
   variant for when the accent has to carry small text on a light surface.
   -------------------------------------------------------------------------- */

.cf-class--rack        { --cf-accent: #F99F1B; --cf-accent-text: #985C04; } /* orange */
.cf-class--turf        { --cf-accent: #A9BF3E; --cf-accent-text: #5F6E1E; } /* olive  */
.cf-class--wod         { --cf-accent: #9B87E0; --cf-accent-text: #5B47A6; } /* violet */
.cf-class--track       { --cf-accent: #5FB3D4; --cf-accent-text: #2C6B85; } /* blue   */
.cf-class--run-club    { --cf-accent: #6FBF7F; --cf-accent-text: #2F6B3C; } /* green  */
.cf-class--open-gym    { --cf-accent: #D8D1C9; --cf-accent-text: #6E655C; } /* bone   */
.cf-class--fitkids     { --cf-accent: #E8B33A; --cf-accent-text: #7A5A12; } /* yellow */
.cf-class--fitstart    { --cf-accent: #E8B33A; --cf-accent-text: #7A5A12; } /* yellow */
.cf-class--fit-academy { --cf-accent: #4FB3A2; --cf-accent-text: #256A5E; } /* teal   */
.cf-class--fitteen     { --cf-accent: #D07B99; --cf-accent-text: #8A3F58; } /* rose   */

/* Open Gym's accent is bone, which is nearly the paper surface — its ember-bg bands
   would be an almost-white block with ink text. It takes ink bands instead, which
   suits a page about training on your own anyway. */
.cf-class--open-gym .cf-ember-bg { background: var(--cf-ink); color: var(--cf-on-dark); }
.cf-class--open-gym .cf-ember-bg .cf-ctaband__title { color: var(--cf-on-dark); }
.cf-class--open-gym .cf-ember-bg .cf-body { color: var(--cf-body-dark); }
.cf-class--open-gym .cf-metabar__item { border-color: var(--cf-rule-dark); }
.cf-class--open-gym .cf-metabar__label { color: var(--cf-accent); }
.cf-class--open-gym .cf-metabar__value { color: var(--cf-on-dark); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.875rem;
  padding: 0 clamp(1.25rem, 2.4vw, 2.125rem);
  font-family: var(--cf-display);
  font-weight: 900;
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-align: center;
}

.cf-btn--ember  { background: var(--cf-accent); color: var(--cf-ink); }
.cf-btn--ember:hover  { background: var(--cf-on-dark); color: var(--cf-ink); }

.cf-btn--ink    { background: var(--cf-ink); color: var(--cf-on-dark); }
.cf-btn--ink:hover    { background: var(--cf-accent); color: var(--cf-ink); }

.cf-btn--ghost  { border-color: rgba(252, 250, 247, 0.4); color: var(--cf-on-dark); }
.cf-btn--ghost:hover  { border-color: var(--cf-accent); background: var(--cf-accent); color: var(--cf-ink); }

.cf-btn--sm { min-height: 2.75rem; font-size: 0.75rem; letter-spacing: 0.12em; }

/* Soft-side link — Newsreader, never a hard button */
.cf-link-soft {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--cf-serif); font-weight: 300;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  letter-spacing: -0.01em;
  color: var(--cf-clay);
}
.cf-link-soft:hover { color: var(--cf-ink); }

.cf-link-hard {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-accent);
}
.cf-link-hard:hover { color: var(--cf-on-dark); }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.cf-nav {
  position: sticky; top: 0; z-index: 900;
  background: var(--cf-ink);
  border-bottom: 1px solid var(--cf-rule-dark-2);
}

.cf-nav__inner {
  max-width: var(--cf-max); margin: 0 auto;
  min-height: var(--cf-nav-h);
  padding: 0 var(--cf-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.cf-brand { display: flex; align-items: center; flex-shrink: 0; }
.cf-brand:hover { color: inherit; }
.cf-brand__logo {
  width: clamp(8.75rem, 16vw, 12.5rem);
  height: auto; display: block;
}

/* The footer sets the wordmark back in type deliberately — at footer scale the mark
   would be either illegibly small or dominant, and this is the one place the brand
   already reads as a line of text rather than a logo. */
.cf-brand__word {
  font-family: var(--cf-display); font-weight: 700;
  font-size: 0.5625rem; letter-spacing: 0.34em; color: var(--cf-dim);
}

.cf-nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.125rem); }
.cf-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.125rem); list-style: none; margin: 0; padding: 0; }

.cf-nav__link,
.cf-nav__trigger {
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cf-bright);
  padding: 0.375rem 0;
  border-bottom: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  white-space: nowrap;
}
.cf-nav__link:hover, .cf-nav__trigger:hover { color: var(--cf-on-dark); border-bottom-color: var(--cf-accent); }
.cf-nav__link.is-active { color: var(--cf-on-dark); border-bottom-color: var(--cf-accent); }

.cf-nav__trigger::after {
  content: ""; width: 0.375rem; height: 0.375rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.cf-nav__item { position: relative; }

.cf-nav__dropdown {
  position: absolute; top: calc(100% + 0.75rem); left: -1.25rem;
  min-width: 15rem;
  background: var(--cf-raised);
  border: 1px solid var(--cf-rule-dark);
  padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-0.375rem);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.cf-nav__item:hover .cf-nav__dropdown,
.cf-nav__item:focus-within .cf-nav__dropdown,
.cf-nav__dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.cf-nav__item--mega .cf-nav__dropdown { min-width: 26.25rem; }
.cf-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cf-nav__dropdown-link {
  display: block; padding: 0.6875rem 0.875rem;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cf-bright);
}
.cf-nav__dropdown-link:hover { background: var(--cf-ink); color: var(--cf-accent); }

.cf-nav__actions { display: flex; align-items: center; gap: 0.875rem; flex-shrink: 0; }

.cf-nav__teamup {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cf-dim); white-space: nowrap;
}
.cf-nav__teamup:hover { color: var(--cf-on-dark); }

.cf-nav__burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 0.3125rem;
}
.cf-nav__burger span { display: block; height: 2px; width: 1.5rem; background: var(--cf-on-dark); transition: transform 0.2s ease, opacity 0.2s ease; }
.cf-nav__burger span:nth-child(2) { width: 1.0625rem; }
.cf-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.cf-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cf-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); width: 1.5rem; }

/* Mobile panel */
.cf-nav__panel {
  position: fixed; inset: var(--cf-nav-h) 0 0 auto;
  width: min(26.25rem, 100%);
  background: var(--cf-ink);
  border-left: 1px solid var(--cf-rule-dark);
  padding: 1.75rem var(--cf-gutter) 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 890;
  display: none;
}
.cf-nav__panel.is-open { transform: translateX(0); }

.cf-nav__panel-link {
  display: block; padding: 1rem 0;
  border-bottom: 1px solid var(--cf-rule-dark);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 1.375rem; letter-spacing: 0.02em; text-transform: uppercase;
}

.cf-nav__accordion { border-bottom: 1px solid var(--cf-rule-dark); }
.cf-nav__accordion > summary {
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 1.375rem; letter-spacing: 0.02em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.cf-nav__accordion > summary::-webkit-details-marker { display: none; }
.cf-nav__accordion > summary::after { content: "+"; color: var(--cf-accent); font-size: 1.5rem; line-height: 1; }
.cf-nav__accordion[open] > summary::after { content: "–"; }
.cf-nav__accordion-body { padding: 0 0 0.875rem; display: flex; flex-direction: column; }
.cf-nav__accordion-body a {
  padding: 0.625rem 0; font-size: 0.875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-bright);
}

.cf-nav__overlay {
  position: fixed; inset: 0; background: rgba(19, 17, 16, 0.6);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 880;
}
.cf-nav__overlay.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.cf-hero { position: relative; min-height: clamp(32.5rem, 74vh, 47.5rem); display: flex; }

.cf-hero__media { position: absolute; inset: 0; overflow: hidden; }
.cf-hero__media img,
.cf-hero__media video { width: 100%; height: 100%; object-fit: cover; }

.cf-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(72deg, rgba(19,17,16,0.95) 0%, rgba(19,17,16,0.7) 48%, rgba(19,17,16,0.1) 100%);
}

.cf-hero__body {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--cf-max); margin: 0 auto;
  padding: clamp(2rem, 3.9vw, 3.5rem) var(--cf-gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
}

.cf-hero__tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(0.75rem, 1.25vw, 1.125rem);
  font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--cf-on-dark);
}
.cf-hero__dot { width: 0.25rem; height: 0.25rem; background: var(--cf-accent); flex-shrink: 0; }

.cf-hero__content { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.1vw, 1.875rem); max-width: 58.75rem; }
.cf-hero__lede { max-width: 33.75rem; }
.cf-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   8a. Hero slider
   -------------------------------------------------------------------------- */

/* ALL SLIDES OCCUPY ONE GRID CELL, and that solves two problems at once.

   The first attempt hid inactive slides with the `hidden` attribute, and that
   failed twice over. `hidden` only hides via `display: none` in the UA stylesheet,
   and any author rule setting `display` beats it — so `display: flex` on the slide
   silently defeated the attribute and every slide rendered at once, stacked down
   the page. Once that was fixed, the slides turned out to be 918px and 1351px
   tall, so the hero grew and shrank by 400px on every rotation and shoved the
   whole page around with it.

   Stacking them in one grid cell fixes both. Every slide is always laid out, so
   the hero is permanently as tall as the tallest and never moves, and the inactive
   ones are taken out with opacity rather than display. It also buys a real
   crossfade instead of a hard cut.

   The cost is that inactive slides stay in the layout and in the accessibility
   tree, so js/hero.js marks them `inert` and `aria-hidden` — without that a
   keyboard user tabs into buttons they cannot see. */
.cf-heroslides { position: relative; padding: 0; }
.cf-heroslides.is-slider { display: grid; min-height: clamp(32.5rem, 74vh, 47.5rem); }
/* `width: 100%` is load-bearing, and only in the SINGLE-SLIDE case.
   `.cf-hero` is `display: flex`, and before the slider existed its flex child was
   `.cf-hero__body`, which carries `width: 100%` and stretched to fill. Inserting
   `.cf-heroslide` between them put an item with `flex: 0 1 auto` and no width in
   that place, so it sized to max-content — 1036px inside a 1425px hero — and the
   media, absolutely positioned against the slide, covered only that. The banner
   video stopped short of the right-hand edge.
   `.is-slider` never showed it: grid + `grid-area: 1 / 1` stretches the slide to
   the cell. So the bug shipped with the slider and stayed invisible for as long as
   the Shred slide made it a slider — surfacing on its own the moment applications
   closed on 26 Aug and the hero fell back to one slide. */
.cf-heroslides .cf-heroslide { position: relative; display: flex; width: 100%; min-height: inherit; }
.cf-heroslides.is-slider .cf-heroslide { grid-area: 1 / 1; }

/* No JS: the server marks slide one is-active, so the rest stay invisible and the
   visitor still gets a complete, correct hero. */
.cf-heroslides.is-slider .cf-heroslide:not(.is-active) {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.cf-heroslides.is-slider .cf-heroslide.is-active { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .cf-heroslides.is-slider .cf-heroslide { transition: opacity 0.55s ease, visibility 0.55s; }
}

/* Controls sit inside the hero, bottom right, clear of the copy which is bottom
   left. On the narrowest screens they move under the buttons instead. */
.cf-heroslides__nav {
  position: absolute; right: var(--cf-gutter); bottom: clamp(0.5rem, 2vw, 1.5rem);
  z-index: 3; display: flex; align-items: center; gap: 0.375rem;
}

/* 34x4 is the BAR, not the button. Padding plus background-clip gives a 44px
   touch target while only the content box is painted — the control looks like a
   thin rule and behaves like a proper button. A 4px-tall tap target on a phone is
   a control only the lucky can hit. */
.cf-heroslides__dot {
  /* content-box on purpose: the site sets border-box globally, which folds the
     padding INTO the 4px and leaves a zero-height bar — a control you cannot see.
     Here 4px is the bar and the padding is added around it, giving 44px total. */
  box-sizing: content-box;
  width: 2.125rem; height: 0.25rem; border: 0; cursor: pointer;
  padding: 1.25rem 0;
  background: rgba(252, 250, 247, 0.34);
  background-clip: content-box;
  transition: background-color 0.2s ease;
}
/* background-COLOR, not the shorthand. `background:` resets background-clip to
   border-box, which would paint the whole 44px touch area instead of the 4px bar
   and turn a hairline control into a block. */
.cf-heroslides__dot:hover { background-color: rgba(252, 250, 247, 0.6); }
.cf-heroslides__dot.is-on { background-color: var(--cf-accent); }
.cf-heroslides__dot:focus-visible { outline: 2px solid var(--cf-on-dark); outline-offset: 0.25rem; }

/* Pause is a requirement, not a nicety: anything that moves on its own for more
   than five seconds needs a way to stop it. */
.cf-heroslides__pause {
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(252, 250, 247, 0.34);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease;
}
.cf-heroslides__pause:hover { border-color: var(--cf-on-dark); }
.cf-heroslides__pause:focus-visible { outline: 2px solid var(--cf-on-dark); outline-offset: 0.1875rem; }
.cf-heroslides__pause span {
  width: 0.5rem; height: 0.5625rem;
  border-left: 0.1875rem solid var(--cf-on-dark); border-right: 0.1875rem solid var(--cf-on-dark);
}
/* Paused shows a play triangle — the control says what it will DO, not what the
   slideshow is currently doing. */
.cf-heroslides__pause.is-paused span {
  width: 0; height: 0; border: 0;
  border-top: 0.3125rem solid transparent; border-bottom: 0.3125rem solid transparent;
  border-left: 0.5rem solid var(--cf-on-dark); margin-left: 2px;
}

/* --------------------------------------------------------------------------
   8b. Event band — a dated event sitting directly under the hero
   -------------------------------------------------------------------------- */

/* The surface is --cf-raised, not ember. The homepage already closes on a full ember
   CTA band, and two ember fields on one page leave neither of them reading as "this is
   the thing to click". Here the orange works as the top rule, the marker and the
   primary button, which is enough against a dark hero — the raised grey is a full step
   lighter than the hero's scrim, so the band separates on value alone.

   The band is rendered by index.php only while the event is still ahead or running. */
.cf-event {
  background: var(--cf-raised);
  color: var(--cf-on-dark);
  border-top: 0.1875rem solid var(--cf-accent);
}

.cf-event__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4.5rem);
  padding-top: clamp(2.5rem, 4.4vw, 4rem);
  padding-bottom: clamp(2.5rem, 4.4vw, 4rem);
}

.cf-event__lead { display: flex; flex-direction: column; align-items: flex-start; }

.cf-event__eyebrow {
  display: flex; align-items: center; gap: 0.625rem;
  margin: 0;
  font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--cf-bright);
}
.cf-event__mark { width: 0.5rem; height: 0.5rem; background: var(--cf-accent); flex-shrink: 0; }

.cf-event__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: 0.85; letter-spacing: -0.038em;
  text-transform: uppercase;
  margin: 1.125rem 0 0;
}
/* The 24 is the event's own mark — on /24 the wordmark is CASSELLS with the number in
   orange behind it, and carrying that here means the band and the page it points at
   are recognisably the same thing. */
.cf-event__n24 { color: var(--cf-accent); }

.cf-event__copy {
  font-size: 1.0625rem; line-height: 1.6; color: var(--cf-body-dark);
  max-width: 35rem; margin: 1.25rem 0 0; text-wrap: pretty;
}

.cf-event__cause {
  font-size: 0.875rem; line-height: 1.5; color: var(--cf-bright);
  margin: 1rem 0 0;
  padding-left: 0.875rem; border-left: 2px solid var(--cf-accent);
}
.cf-event__cause strong { font-weight: 700; color: var(--cf-on-dark); }

.cf-event__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.875rem; }

.cf-event__count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; margin: 0;
  min-width: clamp(9.5rem, 14vw, 13.75rem);
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--cf-rule-dark);
  text-align: center;
}
.cf-event__n {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(3rem, 6.4vw, 5.25rem);
  line-height: 0.82; letter-spacing: -0.04em;
  color: var(--cf-accent);
}
.cf-event__unit {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cf-dim);
}

/* Only while the event is actually running. A pulse that ran for the fortnight before
   the event would be decoration; for those 24 hours it is information. */
@media (prefers-reduced-motion: no-preference) {
  .cf-event__mark--live { animation: cf-event-pulse 2s ease-in-out infinite; }
}
@keyframes cf-event-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   9. The split — strength beside recovery
   -------------------------------------------------------------------------- */

.cf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.cf-split__side {
  padding: clamp(2.5rem, 3.9vw, 3.5rem) var(--cf-gutter) clamp(2rem, 3.3vw, 3rem);
  min-height: 40rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
}
.cf-split__side--hard { border-right: 1px solid var(--cf-rule-dark-2); }

.cf-split__inner { display: flex; gap: 2.5rem; justify-content: space-between; width: 100%; }
.cf-split__col { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; flex: 1 1 auto; min-width: 0; }
.cf-split__media { position: relative; width: 17.75rem; flex-shrink: 0; overflow: hidden; }
.cf-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Rule list — the hard side's index of what is in the room */
.cf-rows { display: flex; flex-direction: column; }
.cf-rows__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--cf-rule-dark);
}
.cf-rows__item:last-child { border-bottom: 1px solid var(--cf-rule-dark); }
.cf-rows__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--cf-on-dark);
}
.cf-rows__meta { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-dim); text-align: right; }
a.cf-rows__item:hover .cf-rows__name { color: var(--cf-accent); }

/* Image-led panel — a render carrying a section on its own.
   The 3D visuals are 16:9 architectural shots; forcing one into a narrow column crops
   away the whole subject. This gives the image the full panel and floats the copy over
   a bottom scrim instead. object-position sits left of centre because the arches and
   the sign are the subject, not the empty floor on the right. */
.cf-panel {
  position: relative;
  display: block;
  min-height: 40rem;
  overflow: hidden;
  background: var(--cf-oat);
}
.cf-panel:hover { color: inherit; }
.cf-panel__media { position: absolute; inset: 0; }
.cf-panel__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-panel:hover .cf-panel__media img { transform: scale(1.03); }
/* The render is bright and warm, and the copy over it is clay and Newsreader Light —
   the two are close enough in value that a gentle scrim leaves the eyebrow floating.
   This carries near-opaque oat further up the panel so the text sits on a solid field
   rather than on the floor of the room. */
.cf-panel__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(245, 238, 228, 0.99) 0%,
    rgba(245, 238, 228, 0.96) 30%,
    rgba(245, 238, 228, 0.62) 46%,
    rgba(245, 238, 228, 0) 68%);
}
.cf-panel__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.75rem, 3.2vw, 3rem) var(--cf-gutter);
  display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start;
}

/* A render sitting inside a split side */
.cf-split__shot { width: 100%; overflow: hidden; }
.cf-split__shot img { width: 100%; height: clamp(12.5rem, 22vw, 18.75rem); object-fit: cover; }

/* Waitlist band — render and form side by side, each on its own ground.
   The render sits left, the form right, and neither is laid over the other. */
.cf-waitband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--cf-oat);
  align-items: stretch;
}
.cf-waitband__media { position: relative; min-height: 100%; overflow: hidden; }
.cf-waitband__media picture { display: block; height: 100%; }
.cf-waitband__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 55% center;
}
.cf-waitband__card {
  background: var(--cf-oat);
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}

/* Chips — soft side only */
.cf-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cf-chip {
  padding: 0.5625rem 0.9375rem; border: 1px solid var(--cf-rule-oat);
  font-size: 0.8125rem; color: var(--cf-ink);
}

/* --------------------------------------------------------------------------
   10. Stat bar
   -------------------------------------------------------------------------- */

.cf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-stats__item {
  padding: clamp(1.5rem, 2.6vw, 2.375rem) clamp(1.25rem, 2.8vw, 2.5rem);
  border-right: 1px solid var(--cf-rule-light);
  border-top: 1px solid var(--cf-rule-light);
}
.cf-stats__item:last-child { border-right: 0; }
.cf-stats__n {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: -0.03em; color: var(--cf-ink); line-height: 1;
}
.cf-stats__label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cf-body-light); margin-top: 0.375rem; }

/* --------------------------------------------------------------------------
   11. Statement block
   -------------------------------------------------------------------------- */

.cf-statement { max-width: 66.25rem; }
.cf-statement__lead {
  font-size: clamp(1.375rem, 2.9vw, 2.625rem);
  line-height: 1.28; letter-spacing: -0.015em;
  color: var(--cf-on-dark); text-wrap: pretty; margin: 0;
}
.cf-statement__sub {
  font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.6;
  color: var(--cf-body-dark); max-width: 38.75rem; margin: 2.125rem 0 0;
}

/* --------------------------------------------------------------------------
   12. Numbered cards
   -------------------------------------------------------------------------- */

.cf-numbered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cf-rule-dark); }
.cf-numbered__item { background: var(--cf-ink); padding: clamp(1.75rem, 2.6vw, 2.375rem) clamp(1.25rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: 0.875rem; }
.cf-numbered__n { font-family: var(--cf-display); font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--cf-accent); }
.cf-numbered__title { font-family: var(--cf-display); font-weight: 900; font-size: clamp(1.125rem, 1.5vw, 1.375rem); text-transform: uppercase; letter-spacing: -0.01em; color: var(--cf-on-dark); margin: 0; }

/* --------------------------------------------------------------------------
   12b. Class-page components
   -------------------------------------------------------------------------- */

/* Two-column section: label on the left, prose on the right. The workhorse layout
   for every interior page. */
.cf-twocol {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* The at-a-glance strip under a class hero */
.cf-metabar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-metabar__item {
  padding: clamp(1.25rem, 2vw, 1.625rem) clamp(1rem, 2.2vw, 2rem);
  border-right: 1px solid rgba(19, 17, 16, 0.2);
}
.cf-metabar__item:last-child { border-right: 0; }
.cf-metabar__label { font-weight: 500; font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cf-ember-deep); }
.cf-metabar__value {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  letter-spacing: -0.02em; color: var(--cf-ink); margin-top: 0.5rem; line-height: 1.05;
}

/* Times against a schedule row */
.cf-times { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cf-time {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  padding: 0.4375rem 0.75rem; border: 1px solid var(--cf-rule-dark);
  color: var(--cf-on-dark); white-space: nowrap;
}

/* Tick list. The marker is an ember rule, not a bullet — round dots would be the
   only curve in the system. */
.cf-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cf-ticks li {
  position: relative;
  padding: 1rem 0 1rem 2.125rem;
  border-top: 1px solid var(--cf-rule-light);
  font-size: 1.0625rem; line-height: 1.55;
}
.cf-ticks li:last-child { border-bottom: 1px solid var(--cf-rule-light); }
.cf-ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.6875rem;
  width: 1.125rem; height: 2px; background: var(--cf-accent);
}
.cf-strength .cf-ticks li, .cf-raised .cf-ticks li { border-color: var(--cf-rule-dark); }
.cf-recovery .cf-ticks li { border-color: var(--cf-rule-oat); }
.cf-recovery .cf-ticks li::before { background: var(--cf-clay); }

/* The kids age pathway */
.cf-pathway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cf-rule-oat); margin-top: 2.5rem; }
.cf-pathway__item { background: var(--cf-oat); padding: clamp(1.5rem, 2.4vw, 2.25rem); display: block; }
.cf-pathway__item:hover { background: var(--cf-sand); color: inherit; }

/* Five-up variant of the numbered grid */
.cf-numbered--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.cf-formwrap {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start;
}

.cf-field { border: 0; margin: 0 0 2rem; padding: 0; }
.cf-field--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.cf-field__label {
  display: block; padding: 0; margin: 0 0 0.75rem;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cf-ink);
}
.cf-req { color: var(--cf-accent); }

.cf-input {
  width: 100%; min-height: 3.5rem; padding: 0.9375rem 1.125rem;
  font-family: var(--cf-sans); font-size: 1rem; color: var(--cf-ink);
  background: var(--cf-paper);
  border: 1px solid var(--cf-rule-light);
  transition: border-color 0.16s ease;
}
.cf-input:focus { border-color: var(--cf-accent); outline: none; }
.cf-textarea { min-height: 8.75rem; resize: vertical; line-height: 1.55; }

/* Choice chips. The input itself is hidden and the label carries the state, so the
   control is square like everything else — a native radio is the one round thing a
   browser will not let you restyle. */
.cf-choices { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cf-choice { position: relative; }
.cf-choice input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.cf-choice span {
  display: block; padding: 0.75rem 1.125rem;
  border: 1px solid var(--cf-rule-light); background: var(--cf-paper);
  font-size: 0.9375rem; color: var(--cf-body-light);
  transition: all 0.14s ease;
}
.cf-choice input:checked + span {
  background: var(--cf-ink); border-color: var(--cf-ink); color: var(--cf-on-dark);
}
.cf-choice input:focus-visible + span { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-choice:hover span { border-color: var(--cf-accent); }

/* Step form ---------------------------------------------------------------- */

.cf-steps {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--cf-rule-light);
  border: 1px solid var(--cf-rule-light);
}
.cf-steps__item {
  background: var(--cf-paper); padding: 0.875rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  border-top: 0.1875rem solid transparent;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cf-steps__item.is-current { border-top-color: var(--cf-accent); background: var(--cf-oat); }
.cf-steps__item.is-done { border-top-color: var(--cf-clay); }
.cf-steps__n {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--cf-dim);
}
.cf-steps__item.is-current .cf-steps__n { color: var(--cf-accent); }
.cf-steps__label { font-size: 0.8125rem; line-height: 1.3; color: var(--cf-body-light); }
.cf-steps__item.is-current .cf-steps__label { color: var(--cf-ink); }

.cf-step { display: none; border: 0; margin: 0; padding: 0; }
.cf-step.is-active { display: block; }

.cf-step__title {
  display: block; padding: 0; float: none;
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--cf-ink); margin: 0 0 0.5rem;
}
.cf-step__title:focus { outline: none; }
.cf-step__title:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.25rem; }
.cf-step__hint { font-size: 0.9375rem; color: var(--cf-body-light); margin: 0 0 1.75rem; }

.cf-stepnav {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 2.25rem; padding-top: 2rem;
  border-top: 1px solid var(--cf-rule-light);
}
.cf-stepnav [hidden] { display: none; }
/* The ghost button is designed for dark surfaces; on paper it needs ink borders. */
.cf-btn--dark { border-color: var(--cf-rule-light); color: var(--cf-ink); }
.cf-btn--dark:hover { background: var(--cf-ink); border-color: var(--cf-ink); color: var(--cf-on-dark); }

/* form-handler.js toggles these; they start hidden. */
.w-form-done, .w-form-fail { display: none; }
.cf-formnote { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--cf-oat); border-left: 0.1875rem solid var(--cf-accent); }
.cf-formnote--fail { background: var(--cf-sand); }

.cf-aside {
  background: var(--cf-oat);
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  position: sticky; top: calc(var(--cf-nav-h) + 1.5rem);
}

/* The Founding Members waitlist. Its validator toggles .is-visible / .is-hidden,
   so those class names are a contract — see partials/waitlist-form.php. */
.cf-hp { position: absolute; left: -624.9375rem; height: 0; width: 0; opacity: 0; }

.cf-err {
  display: none;
  margin-top: 0.5rem; font-size: 0.875rem; color: #B3341A;
}
.cf-err.is-visible { display: block; }

.cf-waitlist.is-hidden { display: none; }

.cf-waitlist__success { display: none; }
.cf-waitlist__success.is-visible { display: block; }

.cf-copybar { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: stretch; }
.cf-linkbox {
  flex: 1; min-width: 13.75rem;
  padding: 0.875rem 1.125rem; background: var(--cf-paper);
  border: 1px solid var(--cf-rule-oat);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; color: var(--cf-body-light);
  display: flex; align-items: center; overflow-wrap: anywhere;
}

/* Membership tiers */
.cf-tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.cf-tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cf-tier {
  background: var(--cf-raised);
  padding: clamp(1.75rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.1vw, 2rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.cf-tier--featured { background: var(--cf-accent); }

.cf-tier__head { display: flex; flex-direction: column; gap: 1.125rem; }
.cf-tier__row { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; min-height: 1.375rem; }
.cf-tier__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cf-dim);
}
.cf-tier--featured .cf-tier__name { color: var(--cf-ember-deep); }
.cf-tier__badge {
  padding: 0.3125rem 0.6875rem; background: var(--cf-ink); color: var(--cf-on-dark);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}
.cf-tier__price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.cf-tier__amount {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  letter-spacing: -0.04em; color: var(--cf-on-dark); line-height: 1;
}
.cf-tier--featured .cf-tier__amount { color: var(--cf-ink); }
.cf-tier__period { font-size: 0.875rem; color: var(--cf-dim); }
.cf-tier--featured .cf-tier__period { color: var(--cf-ember-deep); }
.cf-tier__rule { height: 1px; background: var(--cf-rule-dark); }
.cf-tier--featured .cf-tier__rule { background: var(--cf-rule-ember); }

.cf-tier__copy { font-size: 0.9375rem; line-height: 1.55; color: var(--cf-body-dark); margin: 0; }
.cf-tier--featured .cf-tier__copy { color: var(--cf-ember-deep); }

.cf-tier__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6875rem; }
.cf-tier__items li {
  position: relative; padding-left: 1.625rem;
  font-size: 0.9375rem; line-height: 1.45; color: var(--cf-body-dark);
}
.cf-tier--featured .cf-tier__items li { color: var(--cf-ember-deep); }
.cf-tier__items li::before {
  content: ""; position: absolute; left: 0; top: 0.625rem;
  width: 0.875rem; height: 2px; background: var(--cf-accent);
}
.cf-tier--featured .cf-tier__items li::before { background: var(--cf-ink); }

/* Contract terms — the commitment, the notice period and the real total, in small
   print under the card. Added 31 Aug 2026: the page advertised "£129 / month" with a
   three-month tie-in and Just Start at "£99 / month" when it is £198 over two
   payments, and said neither. Muted, but never hidden. */
.cf-tier__terms {
  font-size: 0.7813rem; line-height: 1.5;
  margin: auto 0 0; padding-top: 1.25rem;
  color: var(--cf-body-dark); opacity: 0.72;
}
.cf-tier--featured .cf-tier__terms { color: var(--cf-ember-deep); opacity: 0.78; }

.cf-tier .cf-btn { margin-top: auto; width: 100%; }
.cf-tier__terms + .cf-btn { margin-top: 1.25rem; }

/* Video library */
.cf-playlist { margin-top: clamp(2.5rem, 4vw, 3.75rem); }
.cf-playlist__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--cf-rule-light);
}
.cf-playlist__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--cf-ink); margin: 0 0 0.375rem;
}

.cf-videos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: 1.75rem;
}
.cf-video { display: flex; flex-direction: column; gap: 0.625rem; }
.cf-video__play {
  position: relative; display: block; padding: 0; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--cf-ink);
}
.cf-video__play img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
.cf-video__play:hover img { opacity: 0.72; }
.cf-video__icon {
  position: absolute; inset: 0; margin: auto;
  width: 3.375rem; height: 2.375rem; background: var(--cf-accent);
  display: flex; align-items: center; justify-content: center;
}
.cf-video__icon::after {
  content: ""; width: 0; height: 0;
  border-left: 0.8125rem solid var(--cf-ink);
  border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent;
  margin-left: 0.1875rem;
}
.cf-video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.cf-video__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.875rem; line-height: 1.25; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--cf-ink); margin: 0;
}
.cf-video__desc { font-size: 0.875rem; line-height: 1.5; color: var(--cf-body-light); margin: 0; }

/* Full-bleed film band */
.cf-film { display: block; width: 100%; overflow: hidden; background: var(--cf-ink); }
.cf-film video {
  width: 100%; height: clamp(21.25rem, 42vw, 35rem);
  object-fit: cover; display: block;
}

/* Tour video and gallery */
.cf-tour { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; }

/* An episode with no video yet. Deliberately empty rather than a fake player. */
.cf-comingsoon {
  aspect-ratio: 16 / 9; width: 100%;
  background: var(--cf-oat); border: 1px solid var(--cf-rule-oat);
  display: flex; align-items: center; justify-content: center;
}

.cf-gallery {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.5rem;
}
.cf-gallery img { width: 100%; height: clamp(12.5rem, 22vw, 20rem); object-fit: cover; }

/* Card grid — square, hairline-separated, never a rounded tile */
.cf-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--cf-rule-light); margin-top: 2.5rem;
}
.cf-card {
  background: var(--cf-paper);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 12.5rem;
}
.cf-card:hover { background: var(--cf-ink); color: var(--cf-on-dark); }
.cf-card__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  text-transform: uppercase; letter-spacing: -0.02em;
}
.cf-card__copy { font-size: 1rem; line-height: 1.55; color: var(--cf-body-light); }
.cf-card:hover .cf-card__copy { color: var(--cf-body-dark); }
.cf-card__go {
  margin-top: auto;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-accent);
}

/* Team grid. A card with no portrait shows a monogram rather than a stock photo or
   an unrelated gym shot — an honest gap reads better than a wrong face. */
.cf-team {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem); margin-top: 2.5rem;
}
.cf-team__media {
  aspect-ratio: 3 / 4; width: 100%;
  background: var(--cf-ink); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cf-team__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-team__initials {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.03em; color: var(--cf-faint);
}
.cf-team__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  text-transform: uppercase; letter-spacing: -0.015em;
  color: var(--cf-ink); margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Linear history timeline — a centre rule with alternating entries.
   Carries over the old About Us layout: vertical line, markers on it, cards left
   and right, revealed on scroll. Translated into the system — the line is a hard
   ember rule instead of a fading gradient, the markers are squares instead of
   glowing dots, and the cards are flat panels instead of blurred glass.
   -------------------------------------------------------------------------- */

.cf-vtime { position: relative; max-width: 70rem; margin: 3rem auto 0; padding: 1.25rem 0; }

/* The spine. Fades at both ends so it reads as a continuing line rather than a bar
   with two hard stops. */
.cf-vtime__line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(249, 159, 27, 0) 0%,
    var(--cf-accent) 12%,
    var(--cf-accent) 88%,
    rgba(249, 159, 27, 0) 100%);
}

.cf-vtime__item {
  position: relative; width: 50%;
  padding: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.cf-vtime__item--left  { left: 0; text-align: right; }
.cf-vtime__item--right { left: 50%; }

/* Square marker, sitting on the line. */
.cf-vtime__dot {
  position: absolute; top: 1.875rem;
  width: 0.875rem; height: 0.875rem;
  background: var(--cf-accent);
  z-index: 2;
}
.cf-vtime__item--left  .cf-vtime__dot { right: -0.4375rem; }
.cf-vtime__item--right .cf-vtime__dot { left: -0.4375rem; }

.cf-vtime__card {
  background: var(--cf-raised);
  border: 1px solid var(--cf-rule-dark);
  padding: clamp(1.375rem, 2.2vw, 1.875rem);
}
.cf-vtime__year {
  display: inline-block;
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--cf-accent);
  margin-bottom: 0.875rem;
}
.cf-vtime__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--cf-on-dark); margin: 0 0 0.625rem;
}
.cf-vtime__card p { font-size: 0.9375rem; line-height: 1.6; color: var(--cf-body-dark); margin: 0; }

/* Scroll reveal, as the original had. Items start hidden only when the script is
   there to reveal them — see js/cassells.js — so a JS failure leaves the timeline
   fully readable rather than blank. */
.cf-vtime.is-armed .cf-vtime__item {
  opacity: 0; transform: translateY(2rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cf-vtime.is-armed .cf-vtime__item.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .cf-vtime.is-armed .cf-vtime__item { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .cf-vtime__line { left: 0.4375rem; transform: none; }
  .cf-vtime__item,
  .cf-vtime__item--left,
  .cf-vtime__item--right {
    width: 100%; left: 0; text-align: left;
    padding: 0 0 0 2.25rem;
  }
  .cf-vtime__item--left .cf-vtime__dot,
  .cf-vtime__item--right .cf-vtime__dot { left: 1px; right: auto; }
}

/* History timeline — the year is set as a number, the way the stat bar sets one */
.cf-timeline { display: flex; flex-direction: column; }
.cf-timeline__item {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) 0;
  border-top: 1px solid var(--cf-rule-dark);
  align-items: start;
}
.cf-timeline__item:last-child { border-bottom: 1px solid var(--cf-rule-dark); }
.cf-timeline__year {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  letter-spacing: -0.02em; color: var(--cf-accent); line-height: 1;
}
.cf-timeline__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--cf-on-dark); margin: 0 0 0.625rem;
}

/* --------------------------------------------------------------------------
   12c. Review marquee
   -------------------------------------------------------------------------- */

.cf-reviews { padding: var(--cf-section) 0; }

.cf-reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.cf-reviews__score { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }
.cf-reviews__n {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: -0.03em; color: var(--cf-accent); line-height: 1;
}
.cf-reviews__foot { margin-top: 2.25rem; max-width: 38.75rem; }

.cf-marquee {
  position: relative; overflow: hidden; width: 100%;
  cursor: grab; touch-action: pan-y; user-select: none;
  /* Fades the ends rather than cutting them — the band should read as continuous. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.cf-marquee.is-dragging { cursor: grabbing; }

.cf-marquee__track {
  display: flex; gap: 1rem; width: max-content;
  will-change: transform;
  animation: cf-marquee-scroll 64s linear infinite;
}
.cf-marquee:hover .cf-marquee__track,
.cf-marquee.is-paused .cf-marquee__track,
.cf-marquee.is-dragging .cf-marquee__track { animation-play-state: paused; }

@keyframes cf-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 0.5rem), 0, 0); }
}

/* A band of text that never stops moving is a real accessibility problem. Under
   reduced-motion it becomes a plain scrollable row instead. */
@media (prefers-reduced-motion: reduce) {
  .cf-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .cf-marquee__track { animation: none; }
}

.cf-review {
  flex: 0 0 auto;
  width: min(22.5rem, 78vw);
  min-height: 14.375rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--cf-raised);
  border: 1px solid var(--cf-rule-dark);
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.24s ease, background 0.24s ease;
}
.cf-marquee:not(.is-dragging) .cf-review:hover {
  border-color: var(--cf-accent);
  background: var(--cf-ink);
}

.cf-review__stars { display: flex; gap: 0.1875rem; color: var(--cf-accent); font-size: 0.8125rem; letter-spacing: 0.1em; }

.cf-review__quote {
  font-family: var(--cf-serif); font-weight: 300;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.4; letter-spacing: -0.015em;
  color: var(--cf-on-dark); margin: 0;
  text-wrap: pretty;
}

.cf-review__author {
  margin: auto 0 0;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cf-dim);
}

/* --------------------------------------------------------------------------
   12d. FAQ accordion
   -------------------------------------------------------------------------- */

/* The launcher. Centred, like the original. */
.cf-faq__launch { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cf-faq__launch .cf-h3 { margin: 1.125rem 0 0.875rem; }
.cf-faq__intro { max-width: 38.75rem; }

.cf-faq__btn {
  position: relative;
  width: clamp(5rem, 9vw, 6.5rem);
  height: clamp(5rem, 9vw, 6.5rem);
  margin-top: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-accent);
  color: var(--cf-ink);
  transition: background 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
.cf-faq__btn:hover { background: var(--cf-ink); color: var(--cf-on-dark); }
.cf-faq__btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.375rem; }

.cf-faq__glyph {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1;
  position: relative; z-index: 1;
}
.cf-faq__glyph::before { content: "?"; }
.cf-faq__btn[aria-expanded="true"] .cf-faq__glyph::before { content: "\00d7"; }
.cf-faq__btn[aria-expanded="true"] { background: var(--cf-ink); color: var(--cf-on-dark); }

/* The old launcher pulsed a blurred radial glow. Same rhythm, but a hard-edged square
   ring — a blur would be the only soft edge in the system. */
.cf-faq__pulse {
  position: absolute; inset: 0;
  border: 2px solid var(--cf-accent);
  animation: cf-faq-pulse 3.2s ease-out infinite;
  pointer-events: none;
}
.cf-faq__btn[aria-expanded="true"] .cf-faq__pulse { animation: none; opacity: 0; }

@keyframes cf-faq-pulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-faq__pulse { animation: none; opacity: 0.4; }
}

/* The panel. grid 0fr -> 1fr animates to the content's real height with no JS
   measurement, so nothing needs recalculating on resize. */
.cf-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    margin-top 0.35s ease;
}
.cf-faq__panel.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 2.125rem; }
.cf-faq__panel-inner { overflow: hidden; min-height: 0; }

.cf-faq__foot { margin: 1.75rem 0 0; text-align: center; }

/* 1000px, as the original launcher panel was. At the full 1440 wrap a question sits
   alone on a very wide rule with its marker miles away from the text. */
.cf-faq__list { display: flex; flex-direction: column; max-width: 62.5rem; margin: 0 auto; }

.cf-faq__item { border-top: 1px solid var(--cf-rule-light); }
.cf-faq__item:last-child { border-bottom: 1px solid var(--cf-rule-light); }
.cf-strength .cf-faq__item, .cf-raised .cf-faq__item { border-color: var(--cf-rule-dark); }
.cf-recovery .cf-faq__item { border-color: var(--cf-rule-oat); }

.cf-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.125rem, 1.8vw, 1.5rem) 0;
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(0.9375rem, 1.4vw, 1.1875rem);
  line-height: 1.25; letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.16s ease;
}
.cf-faq__q::-webkit-details-marker { display: none; }
.cf-faq__q:hover { color: var(--cf-accent); }
.cf-faq__q:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.25rem; }

/* A square plus/minus built from two rules — the system has no round controls, and a
   rotating chevron would be the only curve on the page. */
.cf-faq__mark {
  position: relative; flex: 0 0 auto;
  width: 1rem; height: 1rem; margin-top: 0.1875rem;
}
.cf-faq__mark::before,
.cf-faq__mark::after {
  content: ""; position: absolute; background: var(--cf-accent);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.cf-faq__mark::before { top: 0.4375rem; left: 0; width: 1rem; height: 2px; }
.cf-faq__mark::after  { left: 0.4375rem; top: 0; width: 2px; height: 1rem; }
.cf-faq__item[open] .cf-faq__mark::after { transform: scaleY(0); opacity: 0; }

.cf-faq__a { padding: 0 0 clamp(1.125rem, 1.8vw, 1.5rem); max-width: 68ch; }
.cf-faq__a .cf-body { font-size: 1rem; }

/* details has no transition target, so the reveal is animated on the content. */
@media (prefers-reduced-motion: no-preference) {
  .cf-faq__item[open] .cf-faq__a { animation: cf-faq-open 0.24s ease both; }
}
@keyframes cf-faq-open {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12e. The Shred Project — /shred
   -------------------------------------------------------------------------- */

/* A campaign page, and the only page on the site whose job is a single conversion.
   It still runs on the system's tokens, type and buttons — what is bespoke here is
   the density: six weeks in a row, twenty commandments, sixteen FAQs and a
   seven-question form is more content than any interior page carries, and the
   generic card grids do not hold that much without turning into a wall.

   ACCENT: the Shred red-orange, #E2542B, taken from the design. This is the one
   place on the site that colour is correct — the tokens block at the top of this
   file rejects it for the SITE, because the rebrand mock used it as a stand-in for
   Cassells orange, which the brand already owns. As Shred's own sub-brand colour it
   is a different claim, and Shred is a sub-brand: its own wordmark, its own campaign,
   its own two streams.

   Scoped to <main>, which is exactly the mechanism the class pages use — so the nav,
   the footer and the skip link stay Cassells orange while the body of this page runs
   red. One override, no per-component exceptions. */

.cf-shred {
  --cf-accent: #E2542B;

  /* Same hue and saturation, darkened, for SMALL TEXT ON LIGHT GROUNDS ONLY — the
     same split and the same reason as --cf-ember-text upstairs. #E2542B measures
     3.29:1 on oat and 3.64:1 on paper, so a 12px label set in it is under AA on
     either. This measures 5.21:1 on paper and 4.71:1 on oat. Use --cf-accent for
     fills, rules, markers and anything on ink. */
  --cf-accent-text: #BD3E1A;

  /* The two tints the components below need. Derived from --cf-accent by hand
     because rgba() cannot take a custom property apart — named here so a future
     change to the accent has one obvious set of companions to update, instead of
     two stray rgba literals buried three hundred lines down. */
  --cf-accent-wash: rgba(226, 84, 43, 0.07);
  --cf-accent-ring: rgba(226, 84, 43, 0.55);

  /* Two points darker than the site's --cf-raised (#201D1A), and this is the only
     change made to a surface rather than to the accent.

     The Shred red is darker than Cassells orange, so where the brand colour cleared
     AA comfortably on the raised panels this one lands at 4.42:1 — 2% short, across
     the section eyebrows, the commandment numerals and the pricing eyebrow. The fix
     is the ground, not the colour: the accent is the lighter half of the pair, so
     dropping the panel two points lifts every one of those to 4.52:1 while leaving
     #E2542B exactly as the design specifies it.

     It also repairs a pairing that was already marginal before Shred existed —
     --cf-dim body copy on a raised panel was 4.41:1 and is now 4.51:1. Two points
     of grey is invisible; the panel still reads as raised against ink. */
  --cf-raised: #1E1B18;

  display: block;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* Slightly shorter than the homepage hero because the facts bar sits directly
   under it and the two are read as one block. */
.cf-shred-hero { min-height: clamp(31.25rem, 68vh, 45rem); }

/* ── Facts bar ────────────────────────────────────────────────────────────── */

.cf-shred-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--cf-raised); color: var(--cf-on-dark);
  border-top: 1px solid var(--cf-rule-dark);
}
.cf-shred-facts__item {
  padding: clamp(1.25rem, 2.2vw, 1.625rem) clamp(1.25rem, 2.4vw, 2.5rem);
  border-right: 1px solid var(--cf-rule-dark);
}
.cf-shred-facts__item:last-child { border-right: 0; }
.cf-shred-facts__label {
  margin: 0 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cf-dim);
}
.cf-shred-facts__value {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.9vw, 1.625rem);
  letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05;
}
.cf-shred-facts__value--accent { color: var(--cf-accent); }

/* ── Shared section furniture ─────────────────────────────────────────────── */

/* Heading left, standfirst right — the layout the prototype uses at the top of
   every section, and the reason the page scans as one thing rather than a stack
   of unrelated blocks. */
.cf-shred-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap;
  margin-bottom: clamp(2rem, 3.6vw, 3.25rem);
}
.cf-shred-head__aside { max-width: 28.75rem; color: var(--cf-body-dark); }

.cf-shred-h2 {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase;
  margin: 1rem 0 0;
}

.cf-shred-pick__note { color: var(--cf-body-dark); max-width: 35rem; margin: 1rem 0 2rem; }

/* ── Stream picker ────────────────────────────────────────────────────────── */

.cf-shred-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.cf-shred-pick__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: transparent; color: inherit; text-align: left;
  border: 1px solid var(--cf-rule-dark);
  font: inherit; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cf-shred-pick__card:hover { border-color: var(--cf-accent); }
/* aria-pressed is the state, so the style hangs off it rather than off a class the
   script would have to keep in sync separately. */
.cf-shred-pick__card[aria-pressed="true"] {
  border-color: var(--cf-accent);
  background: var(--cf-accent-wash);
}
.cf-shred-pick__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; width: 100%;
}
.cf-shred-pick__eyebrow {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cf-accent);
}

/* The selection box. Square, because nothing in this system is round — the FAQ
   launcher note upstairs makes the same call for the same reason. Empty when the
   side is not chosen, filled with the accent when it is, and it animates only the
   inner square so the outline never moves. */
.cf-shred-pick__box {
  position: relative; flex-shrink: 0;
  width: 1.375rem; height: 1.375rem;
  border: 1px solid var(--cf-rule-dark);
  transition: border-color 0.2s ease;
}
.cf-shred-pick__box::after {
  content: ""; position: absolute; inset: 0.25rem;
  background: var(--cf-accent);
  transform: scale(0); transition: transform 0.18s ease;
}
.cf-shred-pick__card:hover .cf-shred-pick__box { border-color: var(--cf-accent); }
.cf-shred-pick__card[aria-pressed="true"] .cf-shred-pick__box { border-color: var(--cf-accent); }
.cf-shred-pick__card[aria-pressed="true"] .cf-shred-pick__box::after { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .cf-shred-pick__box::after { transition: none; }
}
.cf-shred-pick__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 0.88; letter-spacing: -0.03em; text-transform: uppercase;
}
.cf-shred-pick__blurb { color: var(--cf-body-dark); max-width: 26.25rem; }
.cf-shred-pick__meta {
  display: flex; flex-wrap: wrap; gap: 1.625rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-dim);
}

/* ── Stream filtering ─────────────────────────────────────────────────────────
   The whole progressive-enhancement contract in four rules. shred.php renders both
   streams; without js/shred.js the root carries no data-shred-stream, none of these
   match, and everything stays visible under its own heading. The script sets the
   attribute and the page becomes a switch. */
.cf-shred-stream__label {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cf-accent);
  margin: 0 0 1.5rem;
  padding-bottom: 0.875rem; border-bottom: 1px solid var(--cf-rule-dark);
}
.cf-shred-stream + .cf-shred-stream { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

[data-shred-stream="men"]   [data-shred-only="women"],
[data-shred-stream="women"] [data-shred-only="men"] { display: none; }

/* With the switch live the label is redundant — the picker above already says which
   side you are on, and repeating it over every block reads as a stutter. */
[data-shred-stream] .cf-shred-stream__label { display: none; }
[data-shred-stream] .cf-shred-stream + .cf-shred-stream { margin-top: 0; }

/* ── The six-week arc ─────────────────────────────────────────────────────── */

.cf-shred-weeks {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--cf-rule-dark);
}
.cf-shred-week {
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.625rem 1.25rem 2rem;
  border-right: 1px solid var(--cf-rule-dark);
}
.cf-shred-week:last-child { border-right: 0; }
.cf-shred-week__n {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-accent);
}
.cf-shred-week__name {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1; text-transform: uppercase;
}
.cf-shred-week__dates { margin: 0; font-size: 0.8125rem; color: var(--cf-bright); }
.cf-shred-week__focus { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--cf-dim); }

.cf-shred-includes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin-top: clamp(2rem, 3.2vw, 3rem);
}
.cf-shred-include { border: 1px solid var(--cf-rule-dark); padding: 1.5rem; }
.cf-shred-include__title {
  margin: 0 0 0.625rem; font-family: var(--cf-display); font-weight: 900;
  font-size: 1.125rem; text-transform: uppercase;
}
.cf-shred-include__copy { font-size: 0.875rem; color: var(--cf-dim); }

/* ── Commandments ─────────────────────────────────────────────────────────── */

.cf-shred-cmds {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 3rem);
}
.cf-shred-cmd {
  display: flex; gap: 1.25rem;
  padding: 1.375rem 0; border-bottom: 1px solid var(--cf-rule-dark);
}
.cf-shred-cmd__n {
  font-family: var(--cf-display); font-weight: 900; font-size: 0.8125rem;
  letter-spacing: 0.1em; color: var(--cf-accent); padding-top: 0.25rem; min-width: 1.625rem;
}
.cf-shred-cmd__title {
  display: block; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.1; text-transform: uppercase;
}
.cf-shred-cmd__body {
  display: block; margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.55; color: var(--cf-dim);
}

/* ── Coaches ──────────────────────────────────────────────────────────────── */

/* auto-fit rather than a fixed count, because the two streams have two coaches and
   three — hard-coding either leaves the other with a hole or a squeeze. */
.cf-shred-coaches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1rem;
}
.cf-shred-coach {
  border: 1px solid var(--cf-rule-dark);
  padding: clamp(1.5rem, 2.2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.cf-shred-coach__name {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1; text-transform: uppercase;
}
.cf-shred-coach__role {
  margin: 0; font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cf-accent);
}
.cf-shred-coach__bio { font-size: 0.875rem; color: var(--cf-dim); }
.cf-shred-coach__quote {
  margin: 0.375rem 0 0; font-family: var(--cf-display); font-weight: 900;
  font-size: 1.0625rem; line-height: 1.3; color: var(--cf-on-dark);
}

/* ── Proof ────────────────────────────────────────────────────────────────── */

/* 260px minimum, not 220px. At 220 a 1440 viewport fits five across and the caption
   "101.4kg → 88.1kg" wraps to two lines in the first card only, leaving one card 40px
   taller than its neighbours. 260 gives four across with room for the figure on one
   line, so the row bottoms line up. */
.cf-shred-results {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); gap: 1rem;
}
.cf-shred-result {
  margin: 0; border: 1px solid var(--cf-rule-dark);
  display: flex; flex-direction: column;
}
/* NEVER `cover`, and this is a correctness rule rather than a taste one.
   The weights and dates are burnt into the bottom of each photograph — they ARE the
   evidence — and the set does not share one aspect ratio: the men's pairs are 1.282,
   the two She Shred pairs are 1.328 and 1.189. Cropping the tallest to a common ratio
   cuts into the very numbers the section exists to show. `contain` on a fixed 5:4 box
   fits every frame whole, keeps the card heights equal so the grid rows stay level,
   and leaves at most a few percent of margin on the odd one out. */
.cf-shred-result__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4;
  object-fit: contain;
  background: var(--cf-ink);
  border-bottom: 1px solid var(--cf-rule-dark);
}
.cf-shred-result__body { padding: 1.25rem 1.5rem 1.375rem; }
.cf-shred-result__stream {
  margin: 0.625rem 0 0; font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cf-accent);
}

/* The figures with no photograph. A quieter row under the grid rather than cards in
   it — same information, visibly a footnote, and it does not pretend to be evidence
   of the same kind. */
.cf-shred-figures { margin-top: clamp(1.75rem, 2.6vw, 2.5rem); }
.cf-shred-figures__label {
  margin: 0 0 1rem; padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--cf-rule-dark);
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-dim);
}
.cf-shred-figures__row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); }
.cf-shred-figure__n {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem); letter-spacing: -0.01em;
  color: var(--cf-bright);
}
.cf-shred-result__n {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.25rem, 2vw, 1.5625rem); letter-spacing: -0.01em;
}
.cf-shred-result__w {
  margin: 0.5rem 0 0; font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cf-dim);
}

/* ── Capacity ─────────────────────────────────────────────────────────────── */

.cf-shred-capacity {
  border: 1px solid var(--cf-accent);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 3.6vw, 3.5rem);
}
.cf-shred-capacity__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 0.94; letter-spacing: -0.025em; text-transform: uppercase;
  margin: 1rem 0 0;
}
.cf-shred-capacity__body {
  display: flex; flex-direction: column; gap: 1.125rem;
  font-size: 1rem; line-height: 1.65; color: var(--cf-bright);
}
.cf-shred-capacity__body p { margin: 0; }
.cf-shred-capacity__kicker {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 1.125rem; text-transform: uppercase; color: var(--cf-on-dark);
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */

/* .cf-tier / .cf-tier--featured come from the memberships page. Only the contents
   are Shred's — three routes rather than a monthly ladder.

   .cf-tier's ground is --cf-raised, i.e. DARK. These four rules were first written
   as though the card were paper, which put the eyebrow at 2.88:1, the body at 2.94:1
   and the footer line at 1.12:1 — black on near-black, invisible rather than merely
   low. The featured tier had the opposite fault: a near-white price on the orange
   fill at 2.25:1. Every colour below is now picked against the ground it actually
   sits on, and the featured card flips to ink because its fill is the accent. */
.cf-shred-tier__who {
  margin: 0; font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cf-accent);
}
/* Full ink on the featured card, not the translucent inks the memberships tiers use.
   Cassells orange is bright enough to carry a 70%-alpha label at AA; the Shred red is
   not — 0.72 alpha measures 3.51:1 on it and 0.82 measures 4.08:1. Hierarchy on this
   card comes from size and weight instead, which costs nothing and does not decay
   when the fill gets darker. */
.cf-tier--featured .cf-shred-tier__who { color: var(--cf-ink); }
.cf-shred-tier__price {
  margin: 0.875rem 0 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 0.9; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--cf-on-dark);
}
.cf-tier--featured .cf-shred-tier__price { color: var(--cf-ink); }
.cf-shred-tier__unit { font-size: 1.25rem; color: var(--cf-dim); }
.cf-tier--featured .cf-shred-tier__unit { color: var(--cf-ink); }
.cf-shred-tier__copy { margin: 0.875rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cf-bright); }
.cf-tier--featured .cf-shred-tier__copy { color: var(--cf-ink); }
.cf-shred-tier__foot {
  margin: 1.5rem 0 0; font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cf-bright);
}
.cf-tier--featured .cf-shred-tier__foot { color: var(--cf-ink); }

/* ── The application form ─────────────────────────────────────────────────── */

.cf-shred-form { display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.cf-shred-form[hidden] { display: none; }

.cf-shred-form__aside {
  display: flex; flex-direction: column; gap: 1.25rem;
  position: sticky; top: 6.25rem; align-self: start;
}
.cf-shred-form__badge {
  border: 1px solid var(--cf-rule-dark); padding: 1.375rem;
  display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start;
}
.cf-shred-form__badge-name {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: 1.875rem; line-height: 1; text-transform: uppercase;
}
.cf-shred-form__swap {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-accent);
}
.cf-shred-form__swap:hover { text-decoration: underline; }
.cf-shred-form__note { font-size: 0.8125rem; line-height: 1.6; color: var(--cf-dim); }

.cf-shred-form__main { max-width: 53.75rem; }

/* The site's form furniture is drawn for the light form pages — /get-started and
   /7-day-reset sit on paper, so .cf-field__label is --cf-ink. This form is the first
   one on a dark ground, where that label measured 1.1:1: black on near-black, not
   merely low-contrast but genuinely unreadable. The inputs themselves are fine — they
   carry their own paper fill, and light fields on a dark panel is the look — so only
   the labels and the error text need re-grounding. */
.cf-shred-form .cf-field__label { color: var(--cf-bright); }
.cf-shred-form .cf-err.is-visible { color: var(--cf-accent); }
.cf-shred-form .cf-choice label { color: var(--cf-on-dark); border-color: var(--cf-rule-dark); }
.cf-shred-form__legend {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-accent);
  padding: 0 0 0.75rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-rule-dark); width: 100%;
}
.cf-shred-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.cf-shred-form__submit { margin-top: 2rem; }

/* The gate gets a ring the other questions do not. It is the one answer that can
   end the application, and it should not look like question 01 of seven. */
.cf-shred-gate {
  display: flex; gap: 1rem;
  border: 1px solid var(--cf-accent-ring);
  padding: 1.625rem; margin-bottom: 1.75rem;
}
.cf-shred-gate__body { display: flex; flex-direction: column; gap: 1.125rem; flex: 1; }

.cf-shred-q { display: flex; gap: 1rem; padding-bottom: 1.625rem; margin-bottom: 1.625rem; border-bottom: 1px solid var(--cf-rule-dark); }
.cf-shred-q__body { display: flex; flex-direction: column; gap: 0.875rem; flex: 1; }
.cf-shred-q__n {
  margin: 0; font-family: var(--cf-display); font-weight: 900; font-size: 0.8125rem;
  color: var(--cf-accent); min-width: 1.5rem; padding-top: 0.25rem;
}
.cf-shred-q__text {
  display: block; font-size: 1.0625rem; line-height: 1.5;
  color: var(--cf-on-dark); max-width: 41.25rem; margin: 0;
}

.cf-shred-accept {
  display: flex; gap: 0.875rem; align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.55; color: var(--cf-bright); max-width: 45rem;
}
.cf-shred-accept input { width: 1.25rem; height: 1.25rem; margin-top: 2px; accent-color: var(--cf-accent); flex-shrink: 0; }

/* ── Yes / No choices, and the selected state you can actually see ─────────

   .cf-choice is shared with the light form pages, where `:checked` paints the
   pill INK on paper — strong and obvious. On this form the panel is already
   near-black, so ink-on-ink made the selected answer invisible: the control
   looked identical whether you had answered or not.

   Selected is now an accent fill with ink text, which is the loudest pairing on
   the page and unmistakably "on" at a glance. The tick is drawn in CSS rather
   than shipped as an icon, and only the chosen one shows it. */
.cf-shred-form .cf-choice label {
  display: flex; align-items: center; justify-content: center;
  /* Equal width so the pair reads as one control rather than two buttons that
     happen to sit together — "YES" and "NO" are different lengths and sizing to
     content left them visibly uneven. */
  padding: 0.8125rem 1.25rem; min-height: 3rem; min-width: 5.75rem;
  border: 1px solid var(--cf-rule-dark);
  background: transparent; color: var(--cf-bright);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cf-shred-form .cf-choice:hover label { border-color: var(--cf-accent); color: var(--cf-on-dark); }

.cf-shred-form .cf-choice input:checked + label {
  background: var(--cf-accent);
  border-color: var(--cf-accent);
  color: var(--cf-ink);
}
/* A NO is an answer too and must look chosen — just not celebrated. */
.cf-shred-form .cf-choice input[data-hype-no]:checked + label {
  background: var(--cf-bright);
  border-color: var(--cf-bright);
  color: var(--cf-ink);
}
.cf-shred-form .cf-choice input:focus-visible + label {
  outline: 2px solid var(--cf-accent); outline-offset: 0.1875rem;
}

/* No tick inside the Yes pill. The fill alone already says "selected" — a rotated
   tick appearing next to the word was a second thing announcing the same state,
   and it nudged the label as it grew. */

.cf-choices--yn { margin: 0.25rem 0 0.25rem; }

/* The optional follow-up under a Yes/No question. */
.cf-shred-q__follow {
  display: block; margin-top: 0.875rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cf-dim);
}
/* --cf-faint was 1.79:1 here — the badge is small and meant to be quiet, but
   quiet is not the same as unreadable. --cf-body-dark keeps it recessive and
   clears AA on the raised panel. */
.cf-shred-q__opt {
  font-size: 0.625rem; letter-spacing: 0.12em;
  color: var(--cf-body-dark); border: 1px solid var(--cf-rule-dark);
  padding: 2px 0.375rem; margin-left: 0.375rem;
}
.cf-shred-q--choice .cf-shred-q__text { margin-bottom: 0.875rem; }

/* ── Tick lists (questions 02 and 03) ──────────────────────────────────────
   Same visual language as the Yes/No pills so the whole screen reads as one
   control set: transparent when off, accent fill when on, ink text over it. A
   checkbox rather than a radio, so several can be true at once. */
.cf-shred-ticks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0; }
.cf-shred-tick { position: relative; }
.cf-shred-tick input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.cf-shred-tick label {
  display: flex; align-items: center; gap: 0.5625rem;
  padding: 0.6875rem 1rem; min-height: 2.875rem;
  border: 1px solid var(--cf-rule-dark);
  color: var(--cf-bright); font-size: 0.875rem; line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cf-shred-tick:hover label { border-color: var(--cf-accent); color: var(--cf-on-dark); }
.cf-shred-tick input:checked + label {
  background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-ink);
}
.cf-shred-tick input:focus-visible + label { outline: 2px solid var(--cf-accent); outline-offset: 0.1875rem; }

/* The box: an empty square that fills with a tick when chosen. Fixed size so
   nothing reflows as it is checked. */
.cf-shred-tick__box {
  width: 0.9375rem; height: 0.9375rem; flex-shrink: 0;
  border: 1px solid currentColor; position: relative;
}
.cf-shred-tick input:checked + label .cf-shred-tick__box::after {
  content: ""; position: absolute; left: 0.25rem; top: 0;
  width: 0.3125rem; height: 0.625rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ── The commitment meter ──────────────────────────────────────────────────

   Sits in the sticky aside, so it stays with you down the questions without a
   second fixed element. Decoration over data the form already has: aria-hidden
   internals, no field, nothing submitted, and it never gates anything. */
.cf-hype {
  margin-top: 0.5rem; padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--cf-rule-dark);
}
.cf-hype[hidden] { display: none; }

.cf-hype__label {
  display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap;
  margin: 0 0 0.875rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cf-bright);
}
.cf-hype__count {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.9375rem; letter-spacing: 0; color: var(--cf-accent);
}

.cf-hype__track {
  position: relative; height: 0.375rem; overflow: hidden;
  background: var(--cf-rule-dark);
}
.cf-hype__fill {
  position: absolute; inset: 0;
  background: var(--cf-accent);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.cf-hype__pips {
  list-style: none; margin: 0.625rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem;
}
.cf-hype__pips li {
  height: 0.1875rem; background: var(--cf-rule-dark);
  transition: background-color 0.22s ease;
}
.cf-hype__pips li.is-on { background: var(--cf-accent); }

/* All five in, and only then does it raise its voice — a bar that celebrates
   every click reads as a game, and this one is asking for six weeks. */
.cf-hype[data-hype-level="7"] { border-color: var(--cf-accent); }
.cf-hype[data-hype-level="7"] .cf-hype__label { color: var(--cf-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .cf-hype__fill, .cf-hype__pips li,
  .cf-shred-form .cf-choice label { transition: none; }
}

/* ── Form states — submitted, gated out, not open yet ─────────────────────── */

.cf-shred-state {
  border: 1px solid var(--cf-accent);
  padding: clamp(2rem, 3.6vw, 3.25rem);
  max-width: 51.25rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.cf-shred-state[hidden] { display: none; }
.cf-shred-state--closed { border-color: var(--cf-rule-dark); }
.cf-shred-state__title {
  margin: 0; font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase;
}
.cf-shred-state__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.625rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

/* Two columns of the site's own accordion. Sixteen questions in one column is a
   scroll nobody finishes. */
.cf-shred-faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 3rem); }

/* ── The closing band ─────────────────────────────────────────────────────── */

/* .cf-ember-bg fills with --cf-accent, and the band's body copy is --cf-ember-deep,
   a brown chosen against Cassells orange. On the Shred red it drops to 4.15:1, so
   the copy goes to full ink here — 4.96:1 on the same fill. The heading and the
   button are already ink and were never affected. */
.cf-shred .cf-ctaband .cf-body { color: var(--cf-ink); }

/* --------------------------------------------------------------------------
   13. The build feed — full-bleed rail of 9:16 clips, plus the cinema overlay
   --------------------------------------------------------------------------

   The rail deliberately runs past both edges of the viewport. Everything else on
   this site is bounded by .cf-wrap, and that is the point: a filmstrip that stops
   short of the edge reads as a finished row, and nobody scrolls a finished row.
   The clips are cut off because there are more of them.

   Zero border-radius here as everywhere. A 9:16 phone clip in a rounded tile is
   the single most generic thing on the web and it is not what this site is.
   -------------------------------------------------------------------------- */

.cf-feed {
  padding-top: var(--cf-section);
  padding-bottom: var(--cf-section);
  /* The track is wider than the viewport by design. Without this the PAGE gains a
     horizontal scrollbar and the whole document slides sideways. */
  overflow: hidden;
}

.cf-feed__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }

.cf-feed__eyebrow { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 2.25rem; }
.cf-feed__dash { width: 1.75rem; height: 1px; background: var(--cf-accent); flex: 0 0 auto; }

.cf-feed__title { margin-bottom: 1.5rem; }
.cf-feed__lede  { max-width: 38.75rem; }

.cf-feed__hint {
  font-family: var(--cf-sans); font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cf-dim); margin: 1.75rem 0 0;
}

/* ── The rail ─────────────────────────────────────────────────────────────── */

.cf-feed__railwrap { position: relative; }

.cf-feed__rail {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  /* `proximity`, never `mandatory`. Mandatory snapping and a mouse drag fight each
     other — you release the button and the rail yanks somewhere you did not put it.
     Proximity tidies up a near-miss and otherwise leaves the scroll where it lands.
     js/build-feed.js turns it off entirely for the duration of a drag. */
  scroll-snap-type: x proximity;

  /* Snapping aligns a tile's LEFT edge to the snapport's left edge, and by default
     the snapport is the full scrollport — so without this a snapped tile would sit
     flush against the glass while the heading above it stayed at the gutter. The
     value is the track's own padding, repeated, which is what keeps the two in step
     at every width. */
  scroll-padding-inline: max(var(--cf-gutter), calc((100% - var(--cf-max)) / 2 + var(--cf-gutter)));

  /* No scrollbar. This is a filmstrip rather than a document, and a permanent bar
     under the tiles competes with them for the eye. The affordance is carried by
     the hint line, the arrows, and the fact that the last tile is visibly cut off
     by the edge of the screen. */
  scrollbar-width: none;

  cursor: grab;
}

.cf-feed__rail::-webkit-scrollbar { display: none; }
.cf-feed__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.cf-feed__track {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  width: max-content;

  /* The first tile lines up with the heading above it, at every width. The gutter
     alone would only be right up to 1440px — past that .cf-wrap starts centring and
     the heading walks inwards while a gutter-padded rail stays pinned to the glass.
     The max() adds back exactly half the overflow beyond --cf-max. */
  padding-inline: max(var(--cf-gutter), calc((100% - var(--cf-max)) / 2 + var(--cf-gutter)));
}

/* `start`, not `center`. Centre-snapping in a scrollport several tiles wide picks
   whichever tile happens to be nearest the middle and slides the whole row to put it
   there, which reads as the rail overruling you. Aligning to the left edge keeps the
   row where you left it and only tidies the last few pixels. */
.cf-feed__item { flex: 0 0 auto; scroll-snap-align: start; }

/* ── A tile ───────────────────────────────────────────────────────────────── */

.cf-feed__card {
  position: relative; display: block;
  width: clamp(12.5rem, 21vw, 20rem);
  aspect-ratio: 9 / 16;
  padding: 0; margin: 0; border: 0;
  background: #000;
  color: var(--cf-on-dark);
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.cf-feed__card:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.1875rem; }

.cf-feed__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;

  /* `cover`, not `contain`. WhatsApp's re-encode lands on 464x832 and 576x1024 —
     0.5577 and 0.5625 — so a tile locked to a true 9:16 would letterbox one of the
     two by a hair and the rail would stop looking like a set. Cover crops those
     few pixels instead. */
  object-fit: cover;

  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

.cf-feed__card:hover .cf-feed__video,
.cf-feed__card:focus-visible .cf-feed__video { transform: scale(1.04); }

.cf-feed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 17, 16, 0.82) 0%, rgba(19, 17, 16, 0.12) 38%, rgba(19, 17, 16, 0) 62%);
  pointer-events: none;
}

/* The same ember square the video cards elsewhere on the site use, so a play
   affordance means one thing across the whole build. */
.cf-feed__play {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  width: 2.25rem; height: 2.25rem;
  background: var(--cf-accent); color: var(--cf-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.cf-feed__card:hover .cf-feed__play,
.cf-feed__card:focus-visible .cf-feed__play { background: var(--cf-on-dark); }

.cf-feed__len {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--cf-on-dark);
  background: rgba(19, 17, 16, 0.72);
  padding: 0.25rem 0.4375rem;
}

.cf-feed__cap {
  position: absolute; left: 3.625rem; right: 0.75rem; bottom: 0.75rem;
  font-family: var(--cf-sans); font-weight: 500;
  font-size: 0.8125rem; line-height: 1.25; text-align: left;
  color: var(--cf-on-dark);

  /* Two lines, then ellipsis. A long caption is the author's problem to shorten,
     not the tile's to grow for — every tile in the rail is the same height and it
     stays that way. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Rail arrows (built by js/build-feed.js, mouse only) ──────────────────── */

.cf-feed__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 2.875rem; height: 4.25rem;
  background: rgba(19, 17, 16, 0.86);
  border: 1px solid var(--cf-rule-dark);
  color: var(--cf-on-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cf-feed__arrow:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-ink); }
.cf-feed__arrow--prev { left: 0; }
.cf-feed__arrow--next { right: 0; }

/* `display: flex` above outranks the UA sheet's [hidden] rule, so an arrow hidden
   at the end of the rail would stay on screen. Same trap as .cf-cinema[hidden]. */
.cf-feed__arrow[hidden] { display: none; }

/* ── Cinema mode ──────────────────────────────────────────────────────────── */

/* Both, because iOS Safari honours the one on <body> and desktop Chrome the one on
   <html>, and a background that scrolls under a fullscreen overlay is the most
   obvious way this looks broken. */
.cf-cinema-open,
.cf-cinema-open body { overflow: hidden; }


.cf-cinema {
  position: fixed; inset: 0;

  /* The largest value a 32-bit signed integer holds, and it is not bravado.
     A fullscreen overlay has to beat everything else on the page, and everything
     else on this page includes two third parties that bid high: the cookie banner
     at 100000 (ours) and the Elfsight WhatsApp bubble at 99999999 (not ours). The
     bubble was drawing over the video — a bright green button on top of a clip,
     inert because js/build-feed.js had disabled the page behind, so it looked live
     and did nothing.

     A selector cannot reach it: Elfsight mounts through nested portals into a shadow
     tree, and the node holding the bubble is not addressable from this stylesheet by
     any class that survives their next release. Stacking order is the one contract
     they and we both honour, so this wins it outright rather than by a margin that
     the next widget erodes. */
  z-index: 2147483647;

  /* Fully opaque, deliberately. A near-opaque scrim reads as depth in a mockup and
     as a rendering fault on a real page — the nav logo and the GET STARTED button
     ghost through behind the clip and look like something failing to repaint. This
     is cinema mode; the room goes dark. */
  background: #0A0908;
  display: flex; flex-direction: column;
}

/* The UA sheet's `[hidden] { display: none }` loses to the `display: flex` above on
   specificity, so it has to be said again or the overlay is permanently open. */
.cf-cinema[hidden] { display: none; }

.cf-cinema__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(0.75rem + env(safe-area-inset-top)) var(--cf-gutter) 0.75rem;
}

.cf-cinema__count {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.2em;
  color: var(--cf-body-dark);
}

.cf-cinema__close,
.cf-cinema__nav {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19, 17, 16, 0.6);
  border: 1px solid rgba(252, 250, 247, 0.28);
  color: var(--cf-on-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cf-cinema__close:hover,
.cf-cinema__nav:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-ink); }

.cf-cinema__close:focus-visible,
.cf-cinema__nav:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.1875rem; }

/* Dimmed and inert, but NOT `pointer-events: none`. With that set, a click on the
   spent arrow passes straight through to the backdrop behind it and closes the whole
   overlay — so reaching the last clip and tapping "next" once more out of habit threw
   you back to the page. The button keeps its hit area and simply absorbs the click;
   `disabled` already stops it doing anything. */
.cf-cinema__nav[disabled] { opacity: 0.25; cursor: default; }

.cf-cinema__stage {
  position: relative;
  flex: 1 1 auto;
  /* min-height:0 is what lets a flex child actually shrink. Without it the video's
     intrinsic height sets the floor and the stage overflows the viewport on a
     landscape phone. */
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--cf-gutter);
}

.cf-cinema__video {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  background: #000;
  /* height:100% + width:auto already preserves the aspect ratio; contain is the
     backstop for the landscape case where max-width takes over and would otherwise
     stretch the frame. */
  object-fit: contain;
}

.cf-cinema__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
}

.cf-cinema__nav--prev { left: max(0.5rem, calc(var(--cf-gutter) / 2)); }
.cf-cinema__nav--next { right: max(0.5rem, calc(var(--cf-gutter) / 2)); }

.cf-cinema__caption {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.875rem var(--cf-gutter) calc(1rem + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--cf-sans);
  font-size: 0.875rem; line-height: 1.4;
  color: var(--cf-bright);
  /* Reserved height, so a clip with no caption does not resize the stage under a
     playing video the moment you step onto one that has. */
  min-height: 1.4em;
}

@media (max-width: 640px) {
  /* The arrows sit over the footage on a phone, so they lose the box and keep only
     the glyph — smaller, and less of the clip covered. */
  .cf-cinema__nav { width: 2.5rem; height: 3.5rem; border-color: transparent; background: rgba(19, 17, 16, 0.42); }
  .cf-feed__cap  { font-size: 0.75rem; }
}

/* --------------------------------------------------------------------------
   14. Quote band
   -------------------------------------------------------------------------- */

.cf-quoteband { position: relative; min-height: clamp(23.75rem, 42vw, 32.5rem); display: flex; align-items: flex-end; }
.cf-quoteband__media { position: absolute; inset: 0; overflow: hidden; }
.cf-quoteband__media img { width: 100%; height: 100%; object-fit: cover; }
.cf-quoteband__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,17,16,0.85), rgba(19,17,16,0)); pointer-events: none; }
.cf-quoteband__body { position: relative; z-index: 2; width: 100%; max-width: var(--cf-max); margin: 0 auto; padding: 0 var(--cf-gutter) clamp(2rem, 3.1vw, 2.75rem); }
.cf-quoteband__cite { display: block; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cf-bright); margin-top: 1.125rem; font-style: normal; }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cf-ctaband {
  padding: clamp(2.75rem, 5.3vw, 4.75rem) var(--cf-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 2.8vw, 2.5rem); flex-wrap: wrap;
}
.cf-ctaband__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2rem, 4.7vw, 4.25rem);
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--cf-ink); text-transform: uppercase; margin: 0;
}
.cf-ctaband__side { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; max-width: 26.25rem; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.cf-footer { background: var(--cf-ink); border-top: 1px solid var(--cf-rule-dark-2); }

.cf-footer__top {
  max-width: var(--cf-max); margin: 0 auto;
  padding: clamp(2.75rem, 4.4vw, 4rem) var(--cf-gutter);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.cf-footer__head {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cf-accent); margin: 0 0 1.125rem;
}
.cf-footer__links { display: flex; flex-direction: column; gap: 0.6875rem; list-style: none; margin: 0; padding: 0; }
.cf-footer__links a { font-size: 0.875rem; color: var(--cf-bright); }
.cf-footer__text { font-size: 0.875rem; line-height: 1.65; color: var(--cf-body-dark); margin: 0; font-style: normal; }
.cf-footer__text a { color: var(--cf-bright); }

.cf-footer__bar {
  border-top: 1px solid var(--cf-rule-dark-2);
}
.cf-footer__bar-inner {
  max-width: var(--cf-max); margin: 0 auto;
  padding: 1.75rem var(--cf-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
}
.cf-footer__mark {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(0.75rem, 1vw, 0.9375rem); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cf-faint);
}
.cf-footer__legal { display: flex; gap: 1.625rem; font-size: 0.8125rem; color: var(--cf-dim); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cf-twocol { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cf-numbered--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-pathway { grid-template-columns: minmax(0, 1fr); }
  .cf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-tiers, .cf-tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cf-formwrap { grid-template-columns: minmax(0, 1fr); }
  .cf-waitband { grid-template-columns: minmax(0, 1fr); }
  .cf-waitband__media img { height: clamp(16.25rem, 42vw, 23.75rem); }
  .cf-aside { position: static; }

  .cf-nav__menu { display: none; }
  .cf-nav__teamup { display: none; }
  .cf-nav__burger { display: flex; }
  .cf-nav__panel { display: block; }

  /* The count drops under the copy and stops being a square — a bordered box on its
     own line reads as a stray card, so it becomes a rule-topped row across the band. */
  /* Shred. The weeks go 6 → 3 (two rows of three, which still reads as an arc);
     the form loses its sticky sidebar, which has nothing to stick to once the
     column is full width. */
  .cf-shred-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-shred-week:nth-child(3n) { border-right: 0; }
  .cf-shred-week:nth-child(-n+3) { border-bottom: 1px solid var(--cf-rule-dark); }
  .cf-shred-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shred-capacity { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-form { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-form__aside { position: static; }

  /* THE METER PINS TO THE BOTTOM ON SMALL SCREENS.
     The aside goes static here, so a meter left inside it sits at the top of the
     form and scrolls away on the first question — which is the one place the
     thing is supposed to work, since most of these will be filled in on a phone.
     Sticky cannot help: the aside is its own grid row and a sticky child is
     bounded by its parent's box, so it would unstick almost immediately. Fixed
     to the viewport is the honest fix.

     It lives inside #shredBody, so the success and closed states remove it with
     everything else — a fixed bar surviving the form it belongs to would be a
     bug. The form gains bottom padding so the bar never covers the submit. */
  .cf-hype {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    margin: 0; border: 0; border-top: 1px solid var(--cf-accent);
    background: var(--cf-raised);
    padding: 0.75rem var(--cf-gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -0.625rem 1.5rem rgba(19, 17, 16, 0.5);
  }
  .cf-hype__label { margin-bottom: 0.5rem; font-size: 0.6875rem; }
  .cf-hype__pips { display: none; }
  .cf-shred-form__main { padding-bottom: 5.5rem; }

  .cf-event__inner { grid-template-columns: minmax(0, 1fr); }
  .cf-event__count {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 0.875rem; width: 100%; min-width: 0;
    border: 0; border-top: 1px solid var(--cf-rule-dark);
    padding: 1.5rem 0 0; text-align: left;
  }

  .cf-split { grid-template-columns: minmax(0, 1fr); }
  .cf-split__side--hard { border-right: 0; border-bottom: 1px solid var(--cf-rule-dark-2); }
  .cf-split__side { min-height: 0; }
  .cf-panel { min-height: 27.5rem; }

  .cf-numbered { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .cf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-stats__item:nth-child(2n) { border-right: 0; }

  .cf-metabar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-metabar__item:nth-child(2n) { border-right: 0; }
  .cf-metabar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(19, 17, 16, 0.2); }

  .cf-numbered--wide { grid-template-columns: minmax(0, 1fr); }
  .cf-times { justify-content: flex-start; }
  .cf-timeline__item { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .cf-cards { grid-template-columns: minmax(0, 1fr); }
  .cf-gallery { grid-template-columns: minmax(0, 1fr); }
  .cf-tiers, .cf-tiers--two { grid-template-columns: minmax(0, 1fr); }
  .cf-videos { grid-template-columns: minmax(0, 1fr); }
  .cf-field--grid { grid-template-columns: minmax(0, 1fr); }
  .cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-steps__label { font-size: 0.75rem; }

  .cf-split__inner { flex-direction: column; }
  .cf-split__media { width: 100%; height: 18.75rem; }

  .cf-ctaband { flex-direction: column; align-items: flex-start; }

  .cf-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Shred at tablet. The commandments and the FAQ both drop to one column —
     two columns of twenty-one-character lines is worse than a longer single run. */
  .cf-shred-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shred-facts__item:nth-child(2n) { border-right: 0; }
  .cf-shred-facts__item:nth-child(-n+2) { border-bottom: 1px solid var(--cf-rule-dark); }

  .cf-shred-pick { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-cmds { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-faqs { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-head { align-items: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }

  .cf-hero { min-height: 35rem; }
  .cf-hero__body { gap: 2rem; }
  .cf-hero__actions { flex-direction: column; align-items: stretch; }
  .cf-hero__actions .cf-btn { width: 100%; }
  .cf-hero__tags { gap: 0.5rem; font-size: 0.625rem; letter-spacing: 0.22em; }

  /* The CTAs go full width at this breakpoint, so controls pinned bottom-right
     would sit on top of them. They move below instead, still inside the hero. */
  .cf-heroslides__nav {
    position: static; justify-content: flex-start;
    padding: 0 var(--cf-gutter) 1.5rem;
  }

  /* .cf-btn goes full width at this breakpoint, so the row has to become a column or
     the two buttons stack with a gap that looks like a mistake. Same fix as the hero. */
  .cf-event__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cf-event__eyebrow { font-size: 0.625rem; letter-spacing: 0.22em; }

  /* Shred at phone width. */
  .cf-shred-facts { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-facts__item { border-right: 0; border-bottom: 1px solid var(--cf-rule-dark); }
  .cf-shred-weeks { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-week { border-right: 0; border-bottom: 1px solid var(--cf-rule-dark); }
  .cf-shred-includes { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-form__grid { grid-template-columns: minmax(0, 1fr); }
  .cf-shred-state__actions { flex-direction: column; align-items: stretch; width: 100%; }
  /* The gate's number sits above the question rather than beside it — a 26px gutter
     off a 375px screen is a quarter of the line length. */
  .cf-shred-gate, .cf-shred-q { flex-direction: column; gap: 0.75rem; }

  .cf-stats { grid-template-columns: minmax(0, 1fr); }
  .cf-stats__item { border-right: 0; }

  .cf-rows__item { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .cf-rows__meta { text-align: left; }

  .cf-footer__top { grid-template-columns: minmax(0, 1fr); }

  .cf-btn { width: 100%; }
  .cf-ctaband__side { max-width: none; width: 100%; }
  .cf-ctaband__side .cf-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   26. Episode media — the YouTube facade and the BLK BOX contact sheet
   --------------------------------------------------------------------------

   Both belong to /the-timeline. The facade is what an episode looks like when
   its film lives on YouTube rather than in /campaign; the sheet is the stills
   that came back from the same visit.
   -------------------------------------------------------------------------- */

/* The facade occupies exactly the same box as .cf-tour, so an episode with a
   YouTube film and an episode with a local <video> sit at identical size in the
   list. Swapping one for the other must not move the page. */
.cf-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* The whole poster is the target. A play button alone is a 76px hit area on a
   560px surface that plainly looks clickable. */
.cf-embed__link {
  position: absolute; inset: 0;
  display: block;
  cursor: pointer;
}

.cf-embed__link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -0.25rem; }

.cf-embed__poster {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}

.cf-embed__link:hover .cf-embed__poster,
.cf-embed__link:focus-visible .cf-embed__poster { transform: scale(1.03); }

/* Bottom-weighted so the play button and the label read against the frame without
   flattening the whole photograph the way a full-surface tint does. */
.cf-embed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.15) 0%, rgba(10, 9, 8, 0.05) 45%, rgba(10, 9, 8, 0.72) 100%);
}

.cf-embed__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4.75rem; height: 4.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--cf-accent);
  color: var(--cf-ink);
  transition: transform 0.25s ease;
}

.cf-embed__link:hover .cf-embed__play,
.cf-embed__link:focus-visible .cf-embed__play { transform: translate(-50%, -50%) scale(1.08); }

.cf-embed__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--cf-gutter);
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
}

.cf-embed__label {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cf-on-dark);
}

.cf-embed__host {
  font-family: var(--cf-sans);
  font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--cf-bright);
}

.cf-embed__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .cf-embed__poster,
  .cf-embed__play { transition: none; }
  .cf-embed__link:hover .cf-embed__poster { transform: none; }
  .cf-embed__link:hover .cf-embed__play { transform: translate(-50%, -50%); }
}


/* The contact sheet.
   Hairline separators done the way .cf-cards does them: a 1px grid gap over a
   rule-coloured ground, so the lines are the background showing through and there
   are no doubled borders to fight at the edges. */

.cf-sheet__head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.cf-sheet__eyebrow { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 2.25rem; }
.cf-sheet__dash { width: 1.75rem; height: 1px; background: var(--cf-accent); flex: 0 0 auto; }
.cf-sheet__title { margin-bottom: 1.5rem; }
.cf-sheet__lede { max-width: 38.75rem; }

.cf-sheet__hint {
  margin-top: 1.25rem;
  font-family: var(--cf-sans);
  font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--cf-body-light);
}

.cf-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--cf-rule-light);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.cf-sheet__cell { display: block; }

.cf-sheet__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0; border: 0;
  background: var(--cf-ink);
  overflow: hidden;
  cursor: pointer;
}

.cf-sheet__frame:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -0.1875rem; z-index: 1; }

.cf-sheet__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}

.cf-sheet__frame:hover .cf-sheet__img,
.cf-sheet__frame:focus-visible .cf-sheet__img { transform: scale(1.05); }

/* Only under the number, not over the whole frame. The sheet is the photography;
   a tint across all sixteen would be a design idea sitting on top of it. */
.cf-sheet__scrim {
  position: absolute; top: 0; left: 0;
  width: 50%; height: 50%;
  background: linear-gradient(135deg, rgba(10, 9, 8, 0.6) 0%, rgba(10, 9, 8, 0) 100%);
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.cf-sheet__frame:hover .cf-sheet__scrim { opacity: 1; }

/* The frame number, in the display face — the contact-sheet tell, and the thing
   that makes sixteen photographs read as one roll rather than a pile. */
.cf-sheet__num {
  position: absolute; top: 0.625rem; left: 0.75rem;
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--cf-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .cf-sheet__img { transition: none; }
  .cf-sheet__frame:hover .cf-sheet__img { transform: none; }
}


/* The lightbox.
   Deliberately the same object as .cf-cinema, down to the stacking order and the
   opaque ground — see the comments on that block for why both are what they are.
   Kept as its own class rather than sharing one: the cinema's stage is built
   around a video element with native controls, and the two would diverge at once. */

.cf-lightbox-open,
.cf-lightbox-open body { overflow: hidden; }

.cf-lightbox {
  position: fixed; inset: 0;
  z-index: 2147483647;
  background: #0A0908;
  display: flex; flex-direction: column;
}

/* Same specificity problem as .cf-cinema[hidden]: the UA sheet's display:none
   loses to the display:flex above, so it has to be said again. */
.cf-lightbox[hidden] { display: none; }

.cf-lightbox__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(0.75rem + env(safe-area-inset-top)) var(--cf-gutter) 0.75rem;
}

.cf-lightbox__count {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.2em;
  color: var(--cf-body-dark);
}

.cf-lightbox__close,
.cf-lightbox__nav {
  width: 3rem; height: 3rem;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19, 17, 16, 0.6);
  border: 1px solid rgba(252, 250, 247, 0.28);
  color: var(--cf-on-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cf-lightbox__close:hover,
.cf-lightbox__nav:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-ink); }

.cf-lightbox__close:focus-visible,
.cf-lightbox__nav:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 0.1875rem; }

.cf-lightbox__nav[hidden] { display: none; }

.cf-lightbox__stage {
  position: relative;
  flex: 1 1 auto;
  /* min-height:0 is what lets a flex child actually shrink; without it the image's
     intrinsic height sets the floor and the stage overflows on a landscape phone. */
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  /* The padding is the arrows' lane. They are positioned OUT OF FLOW below, because
     in flow they lose: an image at max-width:100% takes the stage's whole content
     box, the row overflows, and centring then pushes both arrows off screen by
     equal amounts — measured at left:-33px on a 1099px viewport. Reserving the
     space here and placing them into it is the version that cannot do that. */
  padding: 0 clamp(4rem, 9vw, 6.5rem);
}

.cf-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.cf-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.cf-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* max-height on the IMAGE rather than height:100%, because these frames are not
   all the same shape — two of the sixteen are portrait. Constraining both axes and
   letting object-fit resolve it is the only version that does not crop one
   orientation to suit the other. */
.cf-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  background: #0A0908;
}

.cf-lightbox__caption {
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 0.875rem var(--cf-gutter) calc(1.125rem + env(safe-area-inset-bottom));
  font-family: var(--cf-sans);
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--cf-bright);
  text-align: center;
  max-width: 45rem;
}

@media (max-width: 1100px) {
  .cf-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cf-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The arrows stop flanking the photo and sit over its lower corners. At 375px a
     48px lane on each side takes a quarter of the width away from the image, which
     matters more than the arrows overlapping it. */
  .cf-lightbox__stage { padding: 0 0.75rem; }
  .cf-lightbox__nav { top: auto; bottom: 0.75rem; transform: none; }
  .cf-lightbox__nav--prev { left: 0.75rem; }
  .cf-lightbox__nav--next { right: 0.75rem; }
}

/* --------------------------------------------------------------------------
   27. Shop — /shop, /shop/{product}, /shop/drop-01, /shop/checkout
   --------------------------------------------------------------------------

   Reuses the site's own vocabulary throughout (cf-strength/cf-paper/cf-ember-bg,
   cf-btn, cf-h1–3, cf-eyebrow) rather than inventing a parallel one. The hairline
   product grid is the one new shape, carried over from the Drop 01 comp
   (design/shop/Main.dc.html) because it already reads well at this catalogue size.
   -------------------------------------------------------------------------- */

/* ── Calm reveal ──────────────────────────────────────────────────────────
   Same idea as [data-vtimeline] in cassells.js: the hidden state is applied by a
   class the page's own inline script adds to <html> before paint (see the shop
   templates), and only when the visitor has not asked for reduced motion — so
   broken/blocked JS, and prefers-reduced-motion, both leave the content plainly
   visible instead of stuck at opacity:0. */
.cf-reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(1.375rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.cf-reveal-js [data-reveal].is-visible { opacity: 1; transform: none; }

.cf-shop-kicker { display: flex; align-items: center; gap: 0.875rem; }
.cf-shop-kicker__rule { width: 1.75rem; height: 1px; background: var(--cf-accent); flex-shrink: 0; }
.cf-shop-kicker span:last-child {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cf-accent-text);
}
.cf-strength .cf-shop-kicker span:last-child,
.cf-shop-drop .cf-shop-kicker span:last-child { color: var(--cf-accent); }

/* Self-contained paper surface — the page behind it defaults to ink (see body{} in
   §2 Base), and this bar is designed for the light tokens regardless of what wraps
   it, so it carries its own background rather than assuming an ancestor set one. */
.cf-shop-crumb {
  padding: 1.25rem var(--cf-gutter);
  background: var(--cf-paper);
  border-bottom: 1px solid var(--cf-rule-light);
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-body-light);
}
.cf-shop-crumb a { color: var(--cf-body-light); }
.cf-shop-crumb a:hover { color: var(--cf-accent-text); }
.cf-shop-crumb__dot { width: 3px; height: 3px; background: var(--cf-accent); flex-shrink: 0; }
.cf-shop-crumb span:last-child { color: var(--cf-ink); }

/* ── Hero ── */
.cf-shop-hero__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cf-shop-hero__image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cf-raised); }
.cf-shop-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Meta strip ── */
.cf-shop-meta__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--cf-max); margin: 0 auto; }
.cf-shop-meta__row > div { padding: 1.375rem var(--cf-gutter); border-right: 1px solid var(--cf-rule-ember); }
.cf-shop-meta__row > div:last-child { border-right: 0; }
.cf-shop-meta__label { font-weight: 500; font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cf-ember-deep); }
.cf-shop-meta__value { font-family: var(--cf-display); font-weight: 900; font-size: 1.375rem; letter-spacing: -0.02em; margin-top: 0.5rem; }

/* ── Catalogue head + filters ── */
.cf-shop-catalogue__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.cf-shop-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cf-shop-filter {
  padding: 0.75rem 1rem;
  border: 1px solid var(--cf-rule-light);
  background: transparent; color: var(--cf-ink);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cf-shop-filter:hover { border-color: var(--cf-ink); }
.cf-shop-filter.is-active { background: var(--cf-ink); color: var(--cf-on-dark); border-color: var(--cf-ink); }

/* ── Product grid ── */
.cf-shop-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--cf-rule-light); border: 1px solid var(--cf-rule-light);
}
.cf-shop-grid--three { background: var(--cf-rule-dark); border-color: var(--cf-rule-dark); }

.cf-shop-card { background: var(--cf-paper); color: var(--cf-ink); display: flex; flex-direction: column; }
.cf-shop-card--dark { background: var(--cf-raised); color: var(--cf-on-dark); }

.cf-shop-card__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cf-sand); }
.cf-shop-card__frame--contain { background: var(--cf-oat); }
.cf-shop-card--dark .cf-shop-card__frame--contain { background: var(--cf-raised); }
.cf-shop-card__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-shop-card__frame--contain img { object-fit: contain; padding: 8%; }
.cf-shop-card:hover .cf-shop-card__frame img { transform: scale(1.045); }

.cf-shop-card__tag {
  position: absolute; top: 0.875rem; left: 0.875rem;
  padding: 0.4375rem 0.625rem;
  background: var(--cf-ink); color: var(--cf-on-dark);
  font-family: var(--cf-display); font-weight: 900;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
}

.cf-shop-card__body { padding: 1.375rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1 1 auto; }
.cf-shop-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cf-shop-card__name {
  font-family: var(--cf-display); font-weight: 900;
  font-size: 1.0625rem; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.15;
  transition: color 0.2s ease;
}
.cf-shop-card:hover .cf-shop-card__name { color: var(--cf-accent-text); }
.cf-shop-card--dark:hover .cf-shop-card__name { color: var(--cf-accent); }
.cf-shop-card__price { font-family: var(--cf-display); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.cf-shop-card__meta { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-body-light); margin: 0; }
.cf-shop-card--dark .cf-shop-card__meta { color: var(--cf-body-dark); }

/* ── Drop 01 teaser band (on /shop) ── */
.cf-shop-teaser { position: relative; min-height: 26rem; display: flex; align-items: flex-end; overflow: hidden; }
.cf-shop-teaser__image { position: absolute; inset: 0; }
.cf-shop-teaser__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cf-shop-teaser__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 17, 16, 0.92) 10%, rgba(19, 17, 16, 0.35) 65%, rgba(19, 17, 16, 0.05) 100%); }
.cf-shop-teaser__content { position: relative; padding: 3rem 0 3.5rem; }

/* ── Drop 01 page ── */
.cf-shop-drop { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; }
.cf-shop-drop__image { position: absolute; inset: 0; }
.cf-shop-drop__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.cf-shop-drop__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(19, 17, 16, 0.94) 20%, rgba(19, 17, 16, 0.55) 60%, rgba(19, 17, 16, 0.2) 100%); }
.cf-shop-drop__content { position: relative; padding: var(--cf-section) 0; }

/* ── Product page ── */
.cf-shop-product__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; padding: 2.5rem 0 var(--cf-section); }
.cf-shop-product__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cf-sand); }
.cf-shop-product__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-shop-product__frame.cf-shop-card__frame--contain { background: var(--cf-oat); }
.cf-shop-product__frame.cf-shop-card__frame--contain img { object-fit: contain; padding: 6%; }

.cf-shop-product__buy { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.5rem; }
.cf-shop-product__title {
  font-family: var(--cf-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 1rem 0 0;
}
.cf-shop-product__price { font-family: var(--cf-display); font-weight: 900; font-size: 1.625rem; letter-spacing: -0.01em; }
.cf-shop-rule { height: 1px; background: var(--cf-rule-light); }

.cf-shop-product__form { display: flex; flex-direction: column; gap: 1.5rem; }
.cf-shop-option { display: flex; flex-direction: column; gap: 0.75rem; }
.cf-shop-option__label {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-body-light);
}
.cf-shop-option__label span:last-child { color: var(--cf-ink); }

.cf-shop-option__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cf-shop-pill, .cf-shop-size {
  border: 1px solid var(--cf-rule-light); background: transparent; color: var(--cf-ink);
  font-family: var(--cf-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cf-shop-pill { min-height: 2.75rem; padding: 0 1rem; }
.cf-shop-pill.is-selected, .cf-shop-size.is-selected { background: var(--cf-ink); color: var(--cf-on-dark); border-color: var(--cf-ink); }

.cf-shop-option__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 0.5rem; }
.cf-shop-size { min-height: 3rem; font-weight: 900; }

.cf-shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--cf-rule-light); width: fit-content; }
.cf-shop-qty__btn {
  width: 2.5rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--cf-ink);
  font-family: var(--cf-display); font-weight: 900; font-size: 1.125rem; cursor: pointer;
  transition: background 0.15s ease;
}
.cf-shop-qty__btn:hover { background: var(--cf-sand); }
.cf-shop-qty__value { min-width: 2.5rem; text-align: center; font-family: var(--cf-display); font-weight: 700; }

.cf-shop-product__ticks { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-body-light); }
.cf-shop-product__ticks span { display: flex; align-items: center; gap: 0.625rem; }
.cf-shop-product__tick { width: 1.125rem; height: 2px; background: var(--cf-accent); flex-shrink: 0; }

.cf-shop-product__desc-inner { max-width: 42rem; }

/* The details section carried no bottom padding, so the last line of copy stopped 20px
   short of the dark "You might also like" band and read as though it had been cut off.
   A full section's worth of space now separates them, on the same clamp every other
   section break uses — and the last block's own margin is zeroed so the gap is exactly
   that, whether the copy ends on a paragraph or a sub-heading. */
.cf-shop-product__desc { padding-bottom: var(--cf-section); }
.cf-shop-product__copy > :last-child { margin-bottom: 0; }

.cf-shop-product__copy p { font-size: 1rem; line-height: 1.65; color: var(--cf-body-light); margin: 0 0 1.25rem; }
.cf-shop-product__copy h3 {
  font-family: var(--cf-display); font-weight: 900; font-size: 1.0625rem; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 2rem 0 0.875rem;
}
.cf-shop-product__copy h3:first-child { margin-top: 0; }

/* ── Bag button + drawer ── */
/* Left, not right: the sitewide Elfsight WhatsApp button (footer.php) already owns
   the bottom-right corner on every page. */
.cf-shop-bagbtn {
  position: fixed; left: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: var(--cf-ink); color: var(--cf-on-dark);
  border: 1px solid rgba(252, 250, 247, 0.16);
  font-family: var(--cf-display); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.cf-shop-bagbtn:hover { background: var(--cf-accent); color: var(--cf-ink); }
.cf-shop-bagbtn:active { transform: scale(0.96); }
.cf-shop-bagbtn__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem;
  background: var(--cf-accent); color: var(--cf-ink);
  font-size: 0.625rem; font-weight: 900;
}
.cf-shop-bagbtn:hover .cf-shop-bagbtn__count { background: var(--cf-ink); color: var(--cf-on-dark); }
.cf-shop-bagbtn__count[hidden] { display: none; }

.cf-shop-drawer__overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(19, 17, 16, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.cf-shop-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }

.cf-shop-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
  width: min(26rem, 100vw);
  background: var(--cf-paper); color: var(--cf-ink);
  border-left: 1px solid var(--cf-rule-light);
  z-index: 80;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-shop-drawer.is-open { transform: translateX(0); }

.cf-shop-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.375rem 1.5rem; border-bottom: 1px solid var(--cf-rule-light); flex: 0 0 auto; }
.cf-shop-drawer__title { font-family: var(--cf-display); font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cf-shop-drawer__close {
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cf-rule-light); color: var(--cf-ink); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cf-shop-drawer__close:hover { background: var(--cf-ink); color: var(--cf-on-dark); border-color: var(--cf-ink); }

.cf-shop-drawer__items { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 1.5rem; }
.cf-shop-drawer__empty { font-size: 0.9375rem; color: var(--cf-body-light); padding: 1.5rem 0; margin: 0; }

.cf-shop-drawer__item, .cf-shop-checkout__item {
  display: flex; gap: 0.875rem; padding: 1.125rem 0; border-bottom: 1px solid var(--cf-rule-light);
}
.cf-shop-drawer__item:last-child, .cf-shop-checkout__item:last-child { border-bottom: 0; }
.cf-shop-drawer__item-img { width: 4rem; height: 4rem; flex-shrink: 0; object-fit: cover; background: var(--cf-sand); }
.cf-shop-drawer__item-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cf-shop-drawer__item-name { font-family: var(--cf-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; text-transform: uppercase; }
.cf-shop-drawer__item-meta { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-body-light); }
.cf-shop-drawer__item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; }
.cf-shop-drawer__item-qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.cf-shop-drawer__item-qty button {
  width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cf-rule-light); color: var(--cf-ink);
  font-family: var(--cf-display); font-weight: 900; font-size: 0.75rem; line-height: 1; cursor: pointer;
}
.cf-shop-drawer__item-price { font-family: var(--cf-display); font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
.cf-shop-drawer__item-remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-dim);
}
.cf-shop-drawer__item-remove:hover { color: var(--cf-accent-text); }

.cf-shop-drawer__foot { flex: 0 0 auto; padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--cf-rule-light); display: flex; flex-direction: column; gap: 0.875rem; }
.cf-shop-drawer__subtotal, .cf-shop-checkout__subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--cf-display); font-weight: 900; font-size: 1.0625rem;
}
.cf-shop-drawer__note { font-size: 0.75rem; line-height: 1.55; color: var(--cf-body-light); margin: 0; }

/* ── Checkout ── */
.cf-shop-checkout__list { margin-top: 2rem; }
.cf-shop-checkout__subtotal { padding: 1.125rem 0; border-top: 1px solid var(--cf-rule-light); margin-top: 0.5rem; }
.cf-shop-checkout__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }

/* JS toggles [hidden] on both of the above while the cart is empty — restated here
   because the flex/flex rules just above outrank the UA stylesheet's own [hidden]
   rule (author styles always beat user-agent ones), so without this they would stay
   visible-but-empty instead of actually hiding. */
.cf-shop-checkout__actions[hidden], .cf-shop-checkout__subtotal[hidden] { display: none; }

.cf-shop-checkout__note { font-size: 0.9375rem; line-height: 1.55; color: var(--cf-body-light); margin: 0; }
.cf-shop-checkout__fulfil { border: 1px solid var(--cf-rule-light); padding: 1rem 1.125rem; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.cf-shop-checkout__fulfil legend {
  padding: 0 0.375rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-body-light);
}
.cf-shop-checkout__fulfil label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; cursor: pointer; }
.cf-shop-checkout__fulfil input { accent-color: var(--cf-ink); }
.cf-shop-checkout__secure {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.75rem; line-height: 1.5; color: var(--cf-body-light); margin: 0; text-align: center;
}
.cf-shop-checkout__error {
  margin: 0; padding: 0.75rem 1rem;
  border: 1px solid var(--cf-accent-text); color: var(--cf-accent-text);
  font-size: 0.875rem; line-height: 1.5;
}
.cf-shop-checkout__error[hidden] { display: none; }
[data-shop-pay]:disabled { opacity: 0.6; cursor: progress; }

/* .cf-btn--ember hovers to --cf-on-dark (§6), which is made for ink sections. On the
   paper surfaces of the buy panel and checkout that is paper-on-paper, and the button
   disappears under the cursor — measured on "Pay by card". Hover to ink here instead. */
.cf-shop-product__form .cf-btn--ember:hover,
.cf-shop-checkout__actions .cf-btn--ember:hover,
.cf-shop-drawer .cf-btn--ember:hover { background: var(--cf-ink); color: var(--cf-on-dark); }

@media (max-width: 1100px) {
  .cf-shop-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cf-shop-hero__image { aspect-ratio: 16 / 9; order: -1; }
  .cf-shop-meta__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shop-meta__row > div:nth-child(2) { border-right: 0; }
  .cf-shop-meta__row > div:nth-child(1), .cf-shop-meta__row > div:nth-child(2) { border-bottom: 1px solid var(--cf-rule-ember); }
  .cf-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shop-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shop-product__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .cf-shop-grid, .cf-shop-grid--three { grid-template-columns: minmax(0, 1fr); }
  .cf-shop-meta__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-shop-catalogue__head { align-items: flex-start; }
  .cf-shop-filters { width: 100%; overflow-x: auto; padding-bottom: 0.25rem; }
  .cf-shop-bagbtn__label { display: none; }
  .cf-shop-bagbtn { padding: 0.875rem; gap: 0.375rem; }
  .cf-shop-drawer { width: 100vw; border-left: 0; }
  .cf-shop-option__grid { grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); }
}