/* ==========================================================================
   Cotswold Training Club: funnel styles
   Palette and type are lifted from the live theme stylesheet
   (templates/yootheme_cotswolds/css/theme.11.css). See research/BRAND.md.

   The arch is CTC's own mark: three arched panels in the logo. It is used
   here as the recurring device (hero photo, section tops, step markers) so
   the funnel reads as Cotswold Training Club and nobody else.
   ========================================================================== */

:root {
  /* brand */
  --olive: #526245;
  --olive-deep: #394430;
  --olive-soft: #6C7C5E;
  --ink: #141a0e;
  --ink-deep: #0d1208;
  --sage: #8acd8f;
  --gold: #f6bf69;
  --coral: #f16376;
  --sand: #dedcce;
  --mist: #e2e5e0;
  --paper: #f5f5f1;
  --white: #ffffff;

  --body: #24291f;
  --muted: #6e7268;
  --line: #dde0da;

  --font: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    Arial, sans-serif;

  --r: 7px;            /* uk-border-rounded on the live theme */
  --r-lg: 12px;        /* .video-gallery .uk-border-rounded, custom.css */
  --shadow: 0 3.8px 13px 0 rgba(0, 0, 0, .25);   /* .uk-box-shadow-small */
  --shadow-lg: 0 18px 44px -14px rgba(20, 26, 14, .32);

  --wrap: 1180px;
  --pad: 24px;

  /* motion kit */
  --mk-fast: 180ms;
  --mk-base: 320ms;
  --mk-slow: 560ms;
  --mk-hero: 700ms;
  --mk-settle: cubic-bezier(.22, 1, .36, 1);
  --mk-roll: cubic-bezier(.65, 0, .35, 1);
  --mk-rise: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--olive); }

h1, h2, h3, h4 { margin: 0; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - (var(--pad) * 2), 760px); margin-inline: auto; }

section { padding: clamp(56px, 8vw, 104px) 0; }

/* --------------------------------------------------------------- elements */

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--olive); margin: 0 0 14px;
}
.on-dark .eyebrow, .dark .eyebrow { color: var(--sage); }

.lede { font-size: clamp(1.05rem, 1.9vw, 1.22rem); color: var(--body); }

.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--olive); color: #fff;
  font-family: var(--font); font-size: .92rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: 18px 30px; border-radius: 0; text-align: center;
  transition: opacity var(--mk-fast) ease, transform var(--mk-fast) ease,
              box-shadow var(--mk-fast) ease;
}
.btn:hover { opacity: .88; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.big { padding: 21px 38px; font-size: 1rem; }
.btn.light { background: #fff; color: var(--ink); }
.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: #fff; }
.on-dark .btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.on-dark .btn.ghost:hover { background: #fff; color: var(--ink); }

.btn-note { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }
.on-dark .btn-note { color: rgba(255,255,255,.6); }

/* the arch: CTC's own mark, used as an image mask and a card top */
.arch { border-radius: 190px 190px var(--r) var(--r); overflow: hidden; }
.arch-sm { border-radius: 120px 120px var(--r) var(--r); overflow: hidden; }

.rule { width: 54px; height: 4px; background: var(--olive); border-radius: 2px; margin: 0 0 22px; }
.on-dark .rule { background: var(--sage); }

/* ------------------------------------------------------------------ header */

.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 245, 241, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.top .logo { height: 40px; width: auto; }
.top .spacer { flex: 1; }
.top .tel {
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: .95rem;
  white-space: nowrap;
}
.top .btn { padding: 13px 22px; font-size: .8rem; white-space: nowrap; }
@media (max-width: 560px) {
  /* "Get started" wrapped to two lines and made the bar taller than the logo */
  .top .btn { padding: 11px 14px; font-size: .74rem; letter-spacing: .04em; }
  .top .tel { font-size: .86rem; }
  .top-in { gap: 10px; }
}

/* -------------------------------------------------------------------- hero */

.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(48px, 7vw, 88px); }
/* the stat card runs straight into the marquee below it */
.hero:has(.trust) { padding-bottom: clamp(30px, 4vw, 46px); }
.hero-grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }
.hero h1 { margin: 0 0 18px; }
.hero h1 .hl, .hero h1 .mo-w__i.hl { color: var(--olive); }
.hero .lede { margin-bottom: 26px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-media { position: relative; }
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 940px) { .hero-media img { aspect-ratio: 5 / 6; } }

.scarcity {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mist); border-left: 4px solid var(--olive);
  padding: 12px 18px; border-radius: 0 8px 8px 0;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  margin: 0 0 26px;
}
.scarcity .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--olive);
  flex: 0 0 auto;
}

/* trust strip */
/* The four numbers. They were four naked figures on the page background with
   a hairline over them: no containment, and because one label wrapped to two
   lines and the others did not, the row sat at four different heights with a
   ragged hole under it. It is one card now, divided rather than spaced, with
   every cell the same height whatever its label does. */
.trust { margin-top: clamp(34px, 4.5vw, 52px); }
.trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--white); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-grid > div {
  padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
/* only interior edges get a rule, on both layouts */
.trust-grid > div:nth-child(-n+2) { border-top: 0; }
.trust-grid > div:nth-child(odd) { border-left: 0; }
@media (min-width: 760px) {
  .trust-grid > div { border-top: 0; }
  .trust-grid > div:first-child { border-left: 0; }
  .trust-grid > div:nth-child(odd) { border-left: 1px solid var(--line); }
  .trust-grid > div:first-child { border-left: 0; }
}
.trust b {
  display: block; font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: 800;
  color: var(--olive); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.trust span { font-size: .84rem; color: var(--muted); line-height: 1.35; }
/* The cells are grid items, so the row equalises them for free and the card
   keeps a flat foot however a label wraps. No reserved blank line needed. */
.trust i {
  display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--sage); margin-bottom: 12px;
}

/* ------------------------------------------------------------- dark bands */

.band { background: var(--ink); color: #fff; padding: 30px 0; }
.band-in {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-items: center; justify-content: center; text-align: center;
}
.band p {
  margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.55rem); font-weight: 800;
  letter-spacing: -.01em; color: #fff;
}
.band .btn { background: #fff; color: var(--ink); }

.dark { background: var(--ink); color: #fff; }
.dark h2, .dark h3 { color: #fff; }
.dark p { color: rgba(255,255,255,.82); }

/* ------------------------------------------------------------------- cards */

.head { max-width: 34ch; margin: 0 0 clamp(34px, 5vw, 52px); }
.head.centre { max-width: 46ch; margin-inline: auto; text-align: center; }
.head.centre h2 { max-width: 20ch; margin-inline: auto; }
.head.centre .rule { margin-inline: auto; }
.head p { margin-top: 16px; color: var(--muted); max-width: 48ch; }
.head.centre p { margin-inline: auto; max-width: 52ch; }

.cards { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .cards.two { grid-template-columns: repeat(2, 1fr); } }

.card { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card .body { padding: 24px 24px 28px; }
.card h3 { margin: 0 0 10px; }
.card p { color: var(--muted); font-size: .98rem; margin: 0; }

/* ------------------------------------------------------------------- steps */

.steps { display: grid; gap: 30px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 6px; }
.step .n {
  width: 52px; height: 52px; border-radius: 26px; background: var(--olive);
  color: #fff; font-weight: 800; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; margin: 0 0 18px;
}
.dark .step .n { background: var(--sage); color: var(--ink); }
.step h3 { margin: 0 0 8px; }
.step p { color: var(--muted); margin: 0; font-size: .98rem; }
.dark .step p { color: rgba(255,255,255,.72); }

/* ---------------------------------------------------------------- includes */

.includes {
  background: #fff; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.dark .includes { background: rgba(255,255,255,.055); box-shadow: none; }
.includes ul { list-style: none; margin: 0; padding: 0; }
.includes li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}
.dark .includes li { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.includes li:last-child { border-bottom: 0; }
.includes li::before {
  content: "✓"; color: var(--olive); font-weight: 800; flex: 0 0 auto;
  line-height: 1.5;
}
.dark .includes li::before { color: var(--sage); }

/* ------------------------------------------------------------------ videos */

.films { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .films { grid-template-columns: repeat(3, 1fr); } }
.film {
  position: relative; display: block; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r); overflow: hidden; background: var(--ink);
  text-align: left; font-family: var(--font);
  transition: transform var(--mk-fast) ease, box-shadow var(--mk-fast) ease;
}
.film:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* The source films are 9:16 with burnt-in subtitles sitting at roughly 73%
   of the frame height. A 4/5 tile shows about the top 70% of the source, so
   framing near the top keeps the speaker's face in shot and puts those
   subtitles outside the crop entirely rather than under our own caption. */
.film video, .film img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 6%;
}
/* The play disc sits in the caption bar rather than over the picture, so it
   never lands on the speaker's face. Same arrangement as the story
   thumbnails baked into the emails, so the two read as one set. */
.film .cap {
  position: absolute; inset: auto 0 0 0; padding: 58px 18px 18px 82px;
  background: linear-gradient(to top, rgba(13,18,8,.97) 46%, rgba(13,18,8,0));
  color: #fff;
}
.film .cap strong { display: block; font-size: 1rem; line-height: 1.3; font-weight: 700; }
.film .cap span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); font-weight: 700; }
.film .play {
  position: absolute; left: 18px; bottom: 20px; z-index: 2;
  width: 50px; height: 50px; border-radius: 25px; background: var(--olive);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--mk-fast) ease;
}
.film:hover .play { transform: scale(1.09); }
.film .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(13,18,8,.93); align-items: center; justify-content: center;
  padding: 20px;
}
.lb[open], .lb.on { display: flex; }
.lb video { max-height: 86vh; width: auto; border-radius: var(--r); }
.lb .x {
  position: absolute; top: 18px; right: 20px; width: 46px; height: 46px;
  border-radius: 23px; border: 0; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lb .x:hover { background: rgba(255,255,255,.26); }

/* ----------------------------------------------------------------- reviews */

.reviews { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: #fff; border-radius: var(--r); padding: 26px 26px 24px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.review .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; margin: 0 0 12px; }
.review p { font-size: .99rem; color: var(--body); margin: 0 0 16px; }
.review .who {
  margin-top: auto; font-size: .82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- team / faq */

.team-grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .team-grid { grid-template-columns: .85fr 1.15fr; } }
.team-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sig { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.sig img { width: 40px; height: 40px; aspect-ratio: 1; }
.sig b { display: block; font-size: 1.02rem; color: var(--ink); }
.dark .sig b { color: #fff; }
.sig span { font-size: .85rem; color: var(--muted); }
.dark .sig span { color: rgba(255,255,255,.62); }

.faq { border-top: 1px solid var(--line); }
.dark .faq { border-top-color: rgba(255,255,255,.14); }
.faq details { border-bottom: 1px solid var(--line); }
.dark .faq details { border-bottom-color: rgba(255,255,255,.14); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0;
  font-weight: 700; font-size: 1.06rem; color: var(--ink); position: relative;
}
.dark .faq summary { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--olive); border-bottom: 2px solid var(--olive);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--mk-fast) ease;
}
.dark .faq summary::after { border-color: var(--sage); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 0 24px; color: var(--muted); max-width: 68ch; }
.dark .faq .a { color: rgba(255,255,255,.74); }

/* ------------------------------------------------------------------- table */

.timetable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.timetable th, .timetable td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.timetable th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.timetable td b { color: var(--ink); }

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

.form-card {
  background: #fff; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow-lg);
}
/* The card is white even when it sits on a dark section, so put the text
   colours back: .dark p would otherwise paint white on white. */
.dark .form-card p, .dark .form-card label { color: var(--muted); }
.dark .form-card h3 { color: var(--ink); }
.field { margin: 0 0 18px; }
.field label {
  display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
  padding: 14px 20px; border: 0 none; border-radius: 0;
  background: var(--mist); transition: box-shadow var(--mk-fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive);
}
.two-up { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .two-up { grid-template-columns: 1fr 1fr; } }
.legal { font-size: .82rem; color: var(--muted); margin: 16px 0 0; }
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ footer */

.foot { background: var(--ink-deep); color: rgba(255,255,255,.68); padding: 56px 0 40px; font-size: .92rem; }
.foot img.logo { height: 44px; width: auto; margin: 0 0 22px; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.foot a { color: rgba(255,255,255,.68); text-decoration: none; }
.foot a:hover { color: var(--sage); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 9px; }
.foot .base {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: rgba(255,255,255,.45);
}

/* ================================================== motion kit (CTC v1)
   Weight over float: things settle like a plate being set down, they never
   drift. One move per moment. Reduced motion is a first-class build: the
   hidden states only exist under html.mo-on, which the script refuses to
   set when the reader has asked for less movement.
   ================================================================== */

/* The reveal states moved to assets/motion.css. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mk, .mk-arch { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ==========================================================================
   Room tones, numbered sections, and the devices that make the page worth
   scrolling. Added in the second pass, when the real shoot arrived.
   ========================================================================== */

/* Alternating tones, so a long page reads as rooms you walk through rather
   than one endless column. */
.tone-paper { background: var(--paper); }
.tone-mist  { background: var(--mist); }
.tone-sand  { background: var(--sand); }
.tone-ink   { background: var(--ink); color: #fff; }
.tone-ink h2, .tone-ink h3, .tone-ink h4 { color: #fff; }
.tone-ink p { color: rgba(255,255,255,.82); }

/* Numbered kicker: 01 · What this is */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--olive); margin: 0 0 16px;
}
.tone-ink .kicker, .on-dark .kicker { color: var(--sage); }
.kicker .n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 7px; border-radius: 5px;
  background: var(--olive); color: #fff; font-size: .72rem; letter-spacing: .08em;
}
.tone-ink .kicker .n, .on-dark .kicker .n { background: var(--sage); color: var(--ink); }
.head.centre .kicker { justify-content: center; }

/* Marquee of one-liners, in the founder's own words */
.marquee {
  overflow: hidden; background: var(--ink); color: #fff;
  padding: 15px 0; border-top: 3px solid var(--olive);
}
.marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: mq 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* motion.js drives the track by hand when it is running, so it can speed up
   with the scroll. The CSS keyframes stay as the no-script fallback. */
.mo-on .marquee__track { animation: none; will-change: transform; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 16px; padding: 0 26px;
  font-size: .95rem; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,.9);
}
.marquee__item::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--sage); flex: 0 0 auto;
}
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* The big film: autoplaying, muted, tap for sound */
.bigfilm { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.bigfilm video { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 860px) { .bigfilm video { aspect-ratio: 16 / 10; object-position: center 30%; } }
.bigfilm__sound {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(13,18,8,.76); backdrop-filter: blur(6px);
  color: #fff; border: 0; cursor: pointer; font-family: var(--font);
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 16px; border-radius: 999px;
  transition: background var(--mk-fast) ease;
}
.bigfilm__sound:hover { background: rgba(82,98,69,.95); }
.bigfilm__sound svg { width: 15px; height: 15px; }
.bigfilm__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--sage); transform-origin: left; transform: scaleX(0); z-index: 2;
}
.bigfilm__cap { margin-top: 16px; color: var(--muted); font-size: .95rem; }
.tone-ink .bigfilm__cap { color: rgba(255,255,255,.62); }

/* Member film wall, tall cards, built to be clicked */
/* Flex rather than grid so a row that does not fill centres itself. There
   are thirteen films and three columns, which left the last one stranded on
   the left looking like a mistake. */
.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.wall .film { flex: 0 1 calc(50% - 9px); }
@media (min-width: 900px) { .wall .film { flex: 0 1 calc(33.333% - 12px); } }
.wall .film {
  aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  position: relative; border: 0; padding: 0; cursor: pointer; background: var(--ink);
  transition: transform var(--mk-fast) ease, box-shadow var(--mk-fast) ease;
}
.wall .film img { width: 100%; height: 100%; object-fit: cover; }
.wall .film:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wall .film:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

/* Photo wall */
/* Have a look round: ten tiles filling a strict grid, two of them double.
   Tiles are sized by the grid rows, never by their own aspect ratio, so a
   double-width tile is double width and NOT double height, and the grid
   closes up instead of tearing. Ten tiles land in sixteen cells exactly. */
.roomgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(112px, 30vw, 150px);
}
@media (min-width: 860px) {
  .roomgrid { gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 13vw, 196px); }
}
.roomgrid > button:nth-child(1),
.roomgrid > button:nth-child(8) { grid-column: span 2; grid-row: span 2; }
.roomgrid button {
  position: relative; border: 0; padding: 0; cursor: pointer; background: var(--mist);
  border-radius: 10px; overflow: hidden; width: 100%; height: 100%;
  transition: transform var(--mk-fast) ease;
}
.roomgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roomgrid button:hover { transform: scale(1.012); }
.roomgrid button:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
.roomgrid__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  font-size: .82rem; font-weight: 700; line-height: 1.3; text-align: left;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  background: linear-gradient(to top, rgba(13,18,8,.86), rgba(13,18,8,0));
}
@media (min-width: 860px) {
  .roomgrid > button:nth-child(1) .roomgrid__cap,
  .roomgrid > button:nth-child(8) .roomgrid__cap { font-size: .95rem; padding: 34px 18px 14px; }
}

/* The practical facts, under the grid */
.roomfacts {
  display: grid; gap: 12px; margin-top: 22px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .roomfacts { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.roomfact {
  background: var(--white); border-radius: 10px; padding: 16px 18px;
  box-shadow: var(--shadow);
}
.roomfact b { display: block; font-size: .95rem; color: var(--ink); margin-bottom: 2px; }
.roomfact span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.roomvisit {
  margin-top: 22px; background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 34px);
  display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center;
  justify-content: space-between;
}
.roomvisit p { margin: 0; max-width: 56ch; color: rgba(255,255,255,.86); }
.roomvisit p b { color: #fff; }

/* Timeline through the thirty days */
.days { display: grid; gap: 0; }
.day {
  display: grid; gap: 4px 22px; grid-template-columns: 78px 1fr;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.tone-ink .day { border-top-color: rgba(255,255,255,.14); }
.day:last-child { border-bottom: 1px solid var(--line); }
.tone-ink .day:last-child { border-bottom-color: rgba(255,255,255,.14); }
.day .when {
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive); padding-top: 5px;
}
.tone-ink .day .when { color: var(--sage); }
.day h3 { margin: 0 0 6px; }
.day p { margin: 0; color: var(--muted); }
.tone-ink .day p { color: rgba(255,255,255,.74); }
@media (max-width: 620px) {
  .day { grid-template-columns: 1fr; gap: 6px; }
  .day .when { padding-top: 0; }
}

/* The team */
.coaches { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .coaches { grid-template-columns: repeat(4, 1fr); } }
.coach { text-align: left; }
.coach .shot {
  border-radius: 130px 130px var(--r) var(--r); overflow: hidden; margin: 0 0 16px;
  position: relative; background: var(--ink);
}
.coach .shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.coach h3 { margin: 0 0 2px; font-size: 1.12rem; }
.coach .role { font-size: .85rem; color: var(--muted); margin: 0 0 8px; }
.tone-ink .coach .role { color: rgba(255,255,255,.6); }
.coach p { font-size: .93rem; margin: 0; }
.coach .watch {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--olive); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font);
}
.tone-ink .coach .watch { color: var(--sage); }
.coach .watch:hover { text-decoration: underline; }

/* Statement */
.statement { text-align: center; }
.statement p.big {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.25; font-weight: 800;
  letter-spacing: -.02em; color: #fff; max-width: 21ch; margin: 0 auto 18px;
}
.statement .who {
  font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage);
}

/* Lightbox additions: a caption under the film */
.lb__wrap { max-width: 460px; width: 100%; }
.lb__cap {
  color: #fff; font-size: .95rem; margin: 14px 2px 0; text-align: left;
}
.lb__cap b { display: block; color: var(--sage); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px; }
.lb img { max-height: 86vh; width: auto; border-radius: var(--r); }

/* ---------------------------------------------------------------- spec
   "What you actually get". The practical facts in one block near the top of
   the page, so nobody has to read eleven sections to assemble them. Same
   content sits on the next steps page under the calendar. */
.spec {
  background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.spec__head { padding: 24px clamp(20px, 3vw, 34px) 20px; border-bottom: 1px solid var(--line); }
.spec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.spec__head h3 { font-size: 1.4rem; margin: 0; }
.spec__head p { flex: 1 1 100%; }
.spec__tick {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive); background: var(--mist); border-radius: 500px; padding: 5px 12px;
}
.spec__head p { margin: 0; color: var(--muted); font-size: .95rem; }
.spec__grid { display: grid; margin: 0; }
@media (min-width: 780px) { .spec__grid { grid-template-columns: 1fr 1fr; } }
.spec__row {
  position: relative; display: grid; grid-template-columns: 122px 1fr; gap: 3px 18px;
  padding: 17px clamp(20px, 3vw, 34px); border-top: 1px solid var(--line);
  transition: background 260ms ease;
}
/* A sage rule wipes along the foot of each row as it arrives, so the panel
   assembles itself line by line instead of appearing all at once. */
.spec__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sage); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 620ms cubic-bezier(.22,1,.36,1) 120ms;
}
.mo-on .spec__row.mo-in::after { transform: scaleX(1); }
.spec__row:hover { background: var(--paper); }
.spec__row:hover dt { color: var(--ink); }
.spec__row dt { transition: color 220ms ease; }
.spec__grid > .spec__row:first-child { border-top: 0; }
@media (min-width: 780px) {
  .spec__grid > .spec__row:nth-child(2) { border-top: 0; }
  .spec__grid > .spec__row:nth-child(odd) { border-right: 1px solid var(--line); }
}
.spec__row dt {
  font-size: .71rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--olive); padding-top: 5px;
}
.spec__row dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.45; }
.spec__row dd small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; margin-top: 2px; }
@media (max-width: 520px) {
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
  .spec__row dt { padding-top: 0; }
}
.spec__foot {
  padding: 18px clamp(20px, 3vw, 34px); border-top: 1px solid var(--line);
  background: var(--paper); color: var(--muted); font-size: .93rem;
}
.spec__foot strong { color: var(--ink); }


/* ==========================================================================
   Brand corrections, checked against the live theme stylesheet at
   cotswoldtrainingclub.co.uk/templates/yootheme_cotswolds/css/theme.11.css
   on 7 September 2026. The palette and Mona Sans already matched; these are
   the shapes that did not.
   ========================================================================== */

/* The live site runs an olive section (.uk-section-primary, #526245) as one
   of its three tones and this page had no equivalent, so olive only ever
   appeared on buttons. */
.tone-olive { background: var(--olive); }
.tone-olive, .tone-olive h1, .tone-olive h2, .tone-olive h3, .tone-olive h4 { color: #fff; }
.tone-olive p { color: rgba(255, 255, 255, .86); }
.tone-olive .kicker, .tone-olive .eyebrow { color: var(--sand); }
.tone-olive .kicker .n { background: rgba(255, 255, 255, .16); color: #fff; }
.tone-olive .rule { background: var(--sand); }
.tone-olive .btn.light { background: #fff; color: var(--olive); }

/* Photographs carry the theme's own 7px, not the 10px they had. */
.roomgrid button, .gal button, .film, .card img, .coach .shot,
.photos button, .pin__art { border-radius: var(--r); }

/* Pill shapes are for chips, badges and icon buttons on the live theme,
   which is where they are used here too. Never on a .btn. */
.badge-pill { border-radius: 500px; }

/* An inline call to action, dropped between sections so the page never runs
   more than about a screen and a half without offering the next step. */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px; padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3vw, 40px);
  background: var(--ink); border-radius: var(--r-lg); color: #fff;
}
.cta-strip.olive { background: var(--olive); }
.cta-strip.sand { background: var(--sand); color: var(--ink); }
.cta-strip h3 { color: inherit; font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 0 0 4px; }
.cta-strip p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 52ch; font-size: .95rem; }
.cta-strip.sand p { color: var(--muted); }
.cta-strip .go { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 620px) {
  /* Two buttons side by side do not fit a 390px phone, and the row was the
     one thing on the page pushing the document wider than the viewport. */
  .cta-strip { flex-direction: column; align-items: stretch; }
  .cta-strip .go { width: 100%; }
  .cta-strip .go .btn { flex: 1 1 100%; text-align: center; }
}

/* A letter from Jack.
   The short page ends its middle on somebody talking to you rather than a
   feature list, which is how the page it replaces did it too. Photograph in
   the arch on the left, the letter on the right, one column on a phone with
   the photograph first so you meet him before you read him. */
.letter {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .letter { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .letter__shot { max-width: 380px; }
}
.letter__shot {
  border-radius: 170px 170px var(--r) var(--r);
  overflow: hidden;
  background: var(--sand);
}
.letter__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.letter__body h2 { margin: 0 0 18px; }
.letter__body p { margin: 0 0 16px; max-width: 60ch; }
.letter__body p:last-of-type { margin-bottom: 0; }

/* The P.S. is the only place on the page that mentions places filling up, so
   it is set apart rather than buried in the last paragraph. */
.letter__ps {
  margin-top: 26px !important;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--olive);
  color: var(--muted);
  font-size: .96rem;
}
.letter__ps strong { color: var(--body); }

/* ==========================================================================
   The short page: the signature button, the lightbox form, the closing proof
   ========================================================================== */

/* A call to action that looks alive.
   Three things, none of them loud: a halo that breathes, a sheen that sweeps
   across on hover, and an arrow that leans forward when you point at it. Only
   the primary call to action on each screen gets it, because a page of
   pulsing buttons is a fairground. */
.btn.glow { position: relative; overflow: hidden; isolation: isolate; }

/* The sheen. Clipped by the button's own overflow, so it reads as light
   moving across the face of it rather than a shape flying past. */
.btn.glow::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform: translateX(-130%);
}
.btn.glow:hover::before { transform: translateX(130%); transition: transform .78s ease; }

/* The arrow. It is set in the pseudo-element so no markup has to carry it. */
.btn.glow::after {
  content: "\2192"; display: inline-block; margin-left: .62em;
  transition: transform var(--mk-base) var(--mk-settle);
}
.btn.glow:hover::after { transform: translateX(5px); }

/* The halo. box-shadow paints outside the border box and is not clipped by
   the button's own overflow, which is what lets the sheen and the halo share
   one element. */
@keyframes ctcGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 205, 143, 0); }
  50%      { box-shadow: 0 0 26px 2px rgba(138, 205, 143, .45); }
}
@keyframes ctcGlowLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 26px 2px rgba(255, 255, 255, .42); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn.glow { animation: ctcGlow 3.8s ease-in-out infinite; }
  .btn.light.glow { animation-name: ctcGlowLight; }
}
/* Pointing at it settles the halo into a steady one, so the button stops
   breathing at the moment somebody has decided. */
.btn.glow:hover {
  animation: none;
  box-shadow: 0 0 30px 2px rgba(138, 205, 143, .5), var(--shadow);
  opacity: 1;
}
.btn.light.glow:hover { box-shadow: 0 0 30px 2px rgba(255, 255, 255, .5), var(--shadow); }

/* ------------------------------------------------------------- lightbox */
.fx { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
/* .fx sets display, and an author class beats the user agent's [hidden] rule,
   so the closed dialog has to be told to stay closed. */
.fx[hidden] { display: none; }
.fx__back {
  position: absolute; inset: 0; background: rgba(13, 18, 8, .72);
  opacity: 0; transition: opacity var(--mk-base) ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.fx.on .fx__back { opacity: 1; }
.fx__panel {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100svh - 40px); overflow: auto;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity var(--mk-base) var(--mk-settle), transform var(--mk-base) var(--mk-settle);
}
.fx.on .fx__panel { opacity: 1; transform: none; }
.fx__panel h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.fx__panel .kicker { color: var(--sage); }
.fx__panel .kicker .n { background: rgba(255,255,255,.14); color: #fff; }
.fx__sub { color: rgba(255,255,255,.76); margin: 0 0 22px; font-size: .96rem; }
.fx__x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 500px;
  font-size: 1.3rem; line-height: 1; font-family: var(--font);
  transition: background var(--mk-fast) ease;
}
.fx__x:hover { background: rgba(255,255,255,.22); }
/* The card is the page's own form, moved in here, so it drops the panel it
   wears in the page and lets the lightbox be the panel instead. */
.fx__slot .form-card { padding: 0; background: none; box-shadow: none; border-radius: 0; }
/* The labels are set for a white card, so they need lifting off the ink. */
.fx__slot .field label { color: rgba(255, 255, 255, .68); }
.fx__slot .legal { color: rgba(255, 255, 255, .52); }
@media (prefers-reduced-motion: reduce) {
  .fx__back, .fx__panel { transition: none; }
}

/* --------------------------------------- the closing films on the short page
   Three member films rather than three written quotes, because a face saying
   it is worth more than the same sentence in a box. Arched at the top, which
   is CTC's own mark off the logo, and staggered in one after another. */
.films3 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .films3 { grid-template-columns: repeat(3, 1fr); } }
.filmcard { margin: 0; }
.films3 .film {
  width: 100%;
  /* The tile owns the ratio, not the picture. An <img> carries width and
     height attributes, and that height wins over an aspect-ratio on the image
     itself: without this the tile stood 1350px tall and cover cropped the
     quote off both sides. Same arrangement as the wall on the long page. */
  aspect-ratio: 4 / 5;
  /* The arch. The radius only touches the top, so the caption bar baked into
     the artwork keeps its square corners and stays readable. */
  border-radius: 140px 140px var(--r) var(--r);
  background: var(--olive-deep);
  transition: transform .45s var(--mk-settle), box-shadow .45s ease;
}
.films3 .film img, .films3 .film video { width: 100%; height: 100%; }
.films3 .film:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 34px -4px rgba(138, 205, 143, .55), var(--shadow-lg);
}
.films3 .film:focus-visible { outline: 3px solid var(--sand); outline-offset: 4px; }
/* A word rather than another play badge: the artwork already carries one. */
.filmcard__hint {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 7px 14px; border-radius: 500px;
  background: rgba(13, 18, 8, .58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--mk-base) ease, transform var(--mk-base) var(--mk-settle);
}
.films3 .film:hover .filmcard__hint,
.films3 .film:focus-visible .filmcard__hint { opacity: 1; transform: none; }
/* A phone has no hover, so the hint is simply there. */
@media (pointer: coarse) {
  .filmcard__hint { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .films3 .film, .filmcard__hint { transition: none; }
}

.closer { text-align: center; margin-top: clamp(30px, 4vw, 44px); }
.closer .btn { min-width: 260px; }
.closer p { margin: 14px 0 0; color: rgba(255,255,255,.72); font-size: .88rem; }