/* The Beast Inside — bold, grounded strength-training site for Sam Barker.
   Near-black + white + a warm tan accent. Flat, high-contrast. */

/* Self-hosted Oswald (variable weight, OFL) — no external font request */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Self-hosted Caveat (variable weight, OFL) - the handwritten "writing" font.
   Self-hosted so it renders identically on every device (a bare system-font
   stack fell back to a different cursive per OS). Latin subset only. */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/caveat-latin.woff2') format('woff2');
}

:root {
  --bg:       #141516;   /* page (near black)          */
  --panel:    #1d1f21;   /* cards / surfaces (flat)     */
  --panel-2:  #25282b;   /* slightly raised             */
  --line:     #2c2f31;   /* borders, dividers           */
  --muted:    #9aa0a4;   /* secondary text              */
  --text:     #f1f1ef;   /* primary text                */
  --white:    #ffffff;
  --accent:   #cba867;   /* light yellowish-brown (tan) accent */
  --accent-2: #ddba7c;   /* accent hover (lighter tan)         */
  --ink:      #1c1405;   /* text on accent                     */

  /* hero day-circles: closed diameter, open size, centres.
     Open box is square so the SVG (preserveAspectRatio="none") renders the
     barbell / kettlebell / human silhouettes at their true proportions. */
  --dia: 48%;
  --ow:  62%;   /* open width  */
  --oh:  62%;   /* open height */

  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --script: "Caveat", "Segoe Script", "Snell Roundhand", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* kill the mobile browser's blue/grey tap-highlight flash on tappable elements
   (header, buttons, links). Inherited, so html covers everything; our own
   :active / :hover states still give branded feedback. */
html { -webkit-tap-highlight-color: transparent; }

/* Text selection: dark chip + white text everywhere, so highlighting never
   flashes the browser's default blue/white. */
::selection      { background: #33373a; color: #ffffff; }
::-moz-selection { background: #33373a; color: #ffffff; }

/* skip-to-content link — off-screen until keyboard focus */
.skip-link {
  position: fixed; left: 0.6rem; top: 0.6rem; z-index: 100;
  transform: translateY(-180%);
  background: var(--accent); color: var(--ink); text-decoration: none;
  font-family: var(--head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8rem; padding: 0.6rem 1rem; border-radius: 4px;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--text); outline-offset: 2px; }
#main:focus { outline: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  color-scheme: dark;   /* native selects / form controls render dark */
}
img { max-width: 100%; display: block; }

/* ===========================================================================
   THICK HEADER BAR + STRAPLINE (flush top)
   =========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;   /* stays pinned to the top on scroll */
  overflow: hidden; cursor: pointer;        /* click anywhere (but the Apply chip) -> back to top */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.9rem, 2.4vmin, 1.5rem) clamp(1.25rem, 4vmin, 2.75rem);
  background: var(--bg);
  border-bottom: 3px solid var(--accent);
}
/* pixelated gradient shader, right-hand side, behind the nav text */
.header-shader {
  position: absolute; top: 0; right: 0;
  width: 56%; height: calc(100% - 3px);   /* explicit: canvas is a replaced element */
  display: block; z-index: 0; pointer-events: none;
  /* fallback shown if WebGL is unavailable */
  background: linear-gradient(90deg, transparent, rgba(203, 168, 103, 0.32));
}
.topbar-brand, .topbar-apply { position: relative; z-index: 1; }
.topbar-brand {
  margin: 0;
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.2vmin, 2.9rem); letter-spacing: 0.03em; line-height: 1;
  color: var(--text); text-decoration: none; cursor: pointer;
}
.topbar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* "never left" appended to the wordmark in the handwritten script font, so the
   bar reads "THE BEAST INSIDE never left". em-sized to track the brand. */
.topbar-addendum {
  font-family: var(--script); font-weight: 600; text-transform: uppercase;
  font-size: 0.66em; letter-spacing: 0.01em; color: var(--accent-2);
  margin-left: 0.45em; white-space: nowrap;
}
/* right-side Apply chip: a dark pill that colour-blends with the fog. A multiply
   ::before darkens the drifting fog beneath the chip (so the fog still moves
   through it) while the label stays in normal compositing - white, then accent
   on hover - so the CTA reads cleanly over the moving header. */
.topbar-apply {
  align-self: center; overflow: hidden;   /* clip the sheen sweep to the chip */
  font-family: var(--head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: clamp(0.72rem, 1.7vmin, 0.92rem);
  color: var(--white); text-decoration: none; white-space: nowrap;
  padding: 0.55rem 1.3rem; border-radius: 4px;   /* match the hero "Apply for a spot" button */
  transition: color .2s ease, transform .12s ease;
}
.topbar-apply::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(8, 9, 10, 0.55); mix-blend-mode: multiply; pointer-events: none;
}
.topbar-apply:hover, .topbar-apply:focus-visible {
  color: var(--accent-2); outline: none;
}
.topbar-apply:hover::before { background: rgba(8, 9, 10, 0.78); }
.topbar-apply:active { transform: translateY(1px); }
/* an occasional sheen sweeps across the chip - a little life in the header,
   especially on mobile where the WebGL fog is lighter. Subtle + infrequent;
   the global reduced-motion rule disables it (band rests off-screen). */
.topbar-apply::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.40), transparent);
  pointer-events: none;
  animation: chip-sheen 8s ease-in-out infinite;
}
@keyframes chip-sheen {
  0%   { left: -40%; }
  14%  { left: 135%; }
  100% { left: 135%; }
}

.strap {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.7rem clamp(1.25rem, 4vmin, 2.75rem);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.strap-list {
  margin: 0;
  font-family: var(--head); font-weight: 400; text-transform: uppercase;
  font-size: clamp(0.72rem, 1.7vmin, 0.9rem); letter-spacing: 0.16em; color: var(--muted);
}
.strap-list b { color: var(--text); font-weight: 600; }
.strap-cta {
  font-family: var(--head); font-weight: 600; text-transform: uppercase;
  font-size: 0.78rem; letter-spacing: 0.14em; text-decoration: none;
  color: var(--ink); background: var(--accent); border-radius: 3px; padding: 0.5rem 1rem;
  transition: background-color .2s ease;
}
.strap-cta:hover, .strap-cta:focus-visible { background: var(--accent-2); outline: none; }

/* ===========================================================================
   HERO — the three day-circles are the centrepiece
   =========================================================================== */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(1rem, 2.6vmin, 1.8rem);
  padding: clamp(2rem, 5vmin, 3.5rem) 1.25rem clamp(3rem, 7vmin, 5rem);
}

/* hero lead — the plain offer, stated up front */
.hero-lead { max-width: 56rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.hero-eyebrow {
  margin: 0; font-family: var(--head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(0.7rem, 1.5vmin, 0.84rem); letter-spacing: 0.22em; color: var(--accent);
}
.hero-title {
  margin: 0; font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 6vmin, 3.4rem); line-height: 1.05; letter-spacing: 0.01em;
  color: var(--text); max-width: 16ch;
}
.hero-sub {
  margin: 0.2rem 0 0; max-width: 46ch; color: var(--muted);
  font-size: clamp(0.98rem, 2vmin, 1.18rem); line-height: 1.5;
}
.hero-sub a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color .2s ease;
}
.hero-sub a:hover, .hero-sub a:focus-visible { color: var(--accent-2); }
.hero-kicker {
  margin: 0.45rem 0 0; font-family: var(--head); font-weight: 600; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-2);
  font-size: clamp(0.8rem, 1.7vmin, 0.96rem);
}
.hero-cta {
  margin-top: 0.9rem; font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: 0.12em; text-decoration: none; color: var(--ink);
  background: var(--accent); border-radius: 4px; padding: 0.85rem 1.7rem; transition: background-color .2s ease;
}
.hero-cta:hover, .hero-cta:focus-visible { background: var(--accent-2); outline: none; }
.hero-rail {
  margin: 0.5rem 0 -0.4rem; font-family: var(--head); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.72rem; color: var(--muted);
}

.ring-field { position: relative; width: min(72vmin, 560px); aspect-ratio: 1; }

/* a jagged shape that morphs from a rough circle to a rough squircle on hover /
   select. drawn as a crisp SVG polygon — straight lines between perturbed points —
   so the edge stays sharp. preserveAspectRatio="none" stretches it with the box;
   vector-effect:non-scaling-stroke keeps the outline a constant, crisp width. */
.circle {
  position: absolute;
  left: var(--cx); top: var(--cy);
  transform: translate(-50%, -50%);
  width: var(--dia); height: var(--dia);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(1rem, 3vmin, 1.75rem);
  cursor: pointer;
  z-index: 1;
  transition:
    width  .42s cubic-bezier(.2,.7,.2,1),
    height .42s cubic-bezier(.2,.7,.2,1),
    left   .42s cubic-bezier(.2,.7,.2,1),
    top    .42s cubic-bezier(.2,.7,.2,1);
}
.day-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.day-shape .shp {
  fill: rgba(13, 14, 15, 0.55);
  /* closed = a faint, translucent accent ring; on open it firms up to the solid
     accent (see the open rule below). */
  stroke: rgba(203, 168, 103, 0.38);
  stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  fill-rule: evenodd;   /* lets the kettlebell's grip hole punch through on open */
  /* Closed = a pristine circle, identical for all three, so the resting Venn /
     triquetra overlap in the middle is clean and symmetric. Each path is two
     sub-paths: a 90-point outline + an 18-point inner loop (collapsed to the
     centre here, invisible). On open the outline morphs into that day's object
     and the inner loop opens into the kettlebell's grip hole. Same structure
     across all four shapes, so `d` interpolates 1:1. */
  d: path("M50.00,3.50 L53.24,3.61 L56.47,3.95 L59.67,4.52 L62.82,5.30 L65.90,6.30 L68.91,7.52 L71.83,8.94 L74.64,10.57 L77.33,12.38 L79.89,14.38 L82.30,16.55 L84.56,18.89 L86.64,21.37 L88.55,24.00 L90.27,26.75 L91.79,29.62 L93.11,32.58 L94.22,35.63 L95.12,38.75 L95.79,41.93 L96.24,45.14 L96.47,48.38 L96.47,51.62 L96.24,54.86 L95.79,58.07 L95.12,61.25 L94.22,64.37 L93.11,67.42 L91.79,70.38 L90.27,73.25 L88.55,76.00 L86.64,78.63 L84.56,81.11 L82.30,83.45 L79.89,85.62 L77.33,87.62 L74.64,89.43 L71.83,91.06 L68.91,92.48 L65.90,93.69 L62.82,94.70 L59.67,95.48 L56.47,96.05 L53.24,96.39 L50.00,96.50 L46.76,96.39 L43.53,96.05 L40.33,95.48 L37.18,94.70 L34.10,93.69 L31.09,92.48 L28.17,91.06 L25.36,89.43 L22.67,87.62 L20.11,85.62 L17.70,83.45 L15.44,81.11 L13.36,78.63 L11.45,76.00 L9.73,73.25 L8.21,70.38 L6.89,67.42 L5.78,64.37 L4.88,61.25 L4.21,58.07 L3.76,54.86 L3.53,51.62 L3.53,48.38 L3.76,45.14 L4.21,41.93 L4.88,38.75 L5.78,35.63 L6.89,32.58 L8.21,29.62 L9.73,26.75 L11.45,24.00 L13.36,21.37 L15.44,18.89 L17.70,16.55 L20.11,14.38 L22.67,12.38 L25.36,10.57 L28.17,8.94 L31.09,7.52 L34.10,6.30 L37.18,5.30 L40.33,4.52 L43.53,3.95 L46.76,3.61 Z M50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 Z");
  transition: d .42s cubic-bezier(.2,.7,.2,1), fill .3s ease, stroke .3s ease;
}

/* Faint blurred backing behind the open circle's text. The day name / tool /
   tagline sit over the busy morphing silhouette and the overlapping circle
   outlines, which made them hard to read - this calms the detail directly
   behind the words. Only shown when the circle is open; radial-masked so there
   is no hard disc edge. Sits above the shape (z 0) but below the text (z 1). */
.circle::before {
  content: ""; position: absolute; inset: 14%;
  z-index: 0; border-radius: 50%;
  background: rgba(13, 14, 15, 0.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.circle:hover::before, .circle:focus::before, .circle:focus-within::before, .circle.is-open::before {
  opacity: 1;
}

/* closed centres (mild Venn overlap). --tx nudges the top-row labels outward,
   away from the centre overlap, so the closed text doesn't read as colliding
   with the neighbouring circle (reset to 0 when the circle opens). */
.c-tl { --cx: 33%; --cy: 33%; --tx: -1.6rem; }
.c-tr { --cx: 67%; --cy: 33%; --tx:  1.6rem; }
.c-b  { --cx: 50%; --cy: 66%; }

/* open: the same boulder grows + lifts. The box width/height transition pushes
   the polygon's points outward (it fills the box via preserveAspectRatio="none").
   .is-open is toggled by the auto-cycle script when nothing is hovered. */
.circle:hover, .circle:focus, .circle:focus-within, .circle.is-open {
  width: var(--ow); height: var(--oh);
  z-index: 5; outline: none;
}
.circle:hover .shp, .circle:focus .shp, .circle:focus-within .shp, .circle.is-open .shp {
  fill: rgba(22, 18, 8, 0.95); stroke: var(--accent);
}
/* Open = the circle conforms to the thing each day references. Same two-sub-path
   structure (90-pt outline + 18-pt inner loop) as the closed circle, so `d`
   interpolates the circle straight into the object. Generated by the scratchpad
   gen-icons.js. c-tl -> barbell, c-tr -> kettlebell, c-b -> human. */
.c-tl:hover .shp, .c-tl:focus .shp, .c-tl:focus-within .shp, .c-tl.is-open .shp { d: path("M50.00,16.00 L52.10,16.11 L54.18,16.44 L56.22,16.98 L58.19,17.73 L60.06,18.69 L61.83,19.83 L63.47,21.15 L64.97,22.64 L66.30,24.27 L67.45,26.03 L68.41,27.90 L69.18,29.86 L69.73,31.90 L70.07,33.97 L70.20,36.08 L70.10,38.18 L69.78,40.26 L69.25,42.30 L68.51,44.27 L69.48,45.98 L70.63,47.74 L71.63,49.60 L72.45,51.53 L73.11,53.53 L73.59,55.59 L73.88,57.67 L74.00,59.77 L73.92,61.88 L73.67,63.97 L73.23,66.03 L72.61,68.04 L71.82,69.99 L70.86,71.87 L69.74,73.65 L68.46,75.33 L67.05,76.89 L65.50,78.32 L63.84,79.61 L62.06,80.75 L60.20,81.72 L58.25,82.54 L56.25,83.17 L54.19,83.63 L52.10,83.91 L50.00,84.00 L47.89,83.91 L45.81,83.63 L43.75,83.17 L41.74,82.53 L39.80,81.72 L37.93,80.74 L36.16,79.61 L34.49,78.32 L32.95,76.89 L31.53,75.33 L30.26,73.65 L29.14,71.87 L28.18,69.99 L27.39,68.04 L26.77,66.02 L26.33,63.96 L26.08,61.87 L26.00,59.77 L26.12,57.67 L26.41,55.58 L26.89,53.53 L27.55,51.53 L28.38,49.59 L29.37,47.74 L30.53,45.98 L31.49,44.27 L30.75,42.30 L30.22,40.26 L29.90,38.18 L29.80,36.08 L29.93,33.97 L30.27,31.90 L30.82,29.86 L31.59,27.90 L32.55,26.03 L33.70,24.27 L35.03,22.64 L36.53,21.15 L38.17,19.83 L39.94,18.69 L41.81,17.73 L43.78,16.98 L45.82,16.44 L47.90,16.11 Z M62.01,41.67 L63.13,37.55 L62.87,33.28 L61.26,29.32 L58.47,26.08 L54.80,23.91 L50.61,23.02 L46.37,23.51 L42.50,25.34 L39.43,28.30 L37.46,32.10 L36.80,36.32 L37.53,40.53 L41.22,40.53 L45.37,41.60 L49.64,42.00 L53.92,41.71 L58.10,40.75 Z"); }
.c-tr:hover .shp, .c-tr:focus .shp, .c-tr:focus-within .shp, .c-tr.is-open .shp { d: path("M51.06,48.94 L52.54,50.41 L54.01,51.89 L55.48,53.36 L56.96,54.84 L58.43,56.31 L59.91,57.79 L61.38,59.26 L62.86,59.77 L64.33,58.30 L65.80,59.44 L65.95,60.92 L65.93,62.39 L67.40,63.86 L68.87,65.34 L70.35,66.81 L71.82,68.29 L73.30,69.76 L74.77,71.24 L76.25,72.71 L77.72,74.19 L79.09,75.75 L79.18,77.76 L77.76,79.18 L75.75,79.09 L74.19,77.72 L72.71,76.25 L71.24,74.77 L69.76,73.30 L68.29,71.82 L66.81,70.35 L65.34,68.87 L63.86,67.40 L62.39,65.93 L60.92,65.95 L59.44,65.80 L58.30,64.33 L59.77,62.86 L59.26,61.38 L57.79,59.91 L56.31,58.43 L54.84,56.96 L53.36,55.48 L51.89,54.01 L50.41,52.54 L48.94,51.06 L47.46,49.59 L45.99,48.11 L44.52,46.64 L43.04,45.16 L41.57,43.69 L40.09,42.21 L38.62,40.74 L37.14,40.23 L35.67,41.70 L34.20,40.56 L34.05,39.08 L34.07,37.61 L32.60,36.14 L31.13,34.66 L29.65,33.19 L28.18,31.71 L26.70,30.24 L25.23,28.76 L23.75,27.29 L22.28,25.81 L20.91,24.25 L20.82,22.24 L22.24,20.82 L24.25,20.91 L25.81,22.28 L27.29,23.75 L28.76,25.23 L30.24,26.70 L31.71,28.18 L33.19,29.65 L34.66,31.13 L36.14,32.60 L37.61,34.07 L39.08,34.05 L40.56,34.20 L41.70,35.67 L40.23,37.14 L40.74,38.62 L42.21,40.09 L43.69,41.57 L45.16,43.04 L46.64,44.52 L48.11,45.99 L49.59,47.46 Z M50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 Z"); }
/* Day Three — beast head, an alternative kept here in case we want it back:
.c-b:hover  .shp, .c-b:focus  .shp, .c-b:focus-within  .shp, .c-b.is-open  .shp { d: path("M46.00,8.13 L47.94,10.57 L49.89,13.01 L51.83,15.46 L53.78,17.90 L55.72,20.35 L57.92,18.71 L60.21,16.41 L62.33,14.04 L64.46,11.67 L66.75,9.37 L67.13,11.97 L67.38,15.12 L67.63,18.27 L67.63,21.52 L67.88,24.66 L66.91,26.72 L68.43,29.31 L69.49,32.12 L69.88,35.21 L69.88,38.25 L69.13,41.19 L67.75,43.87 L65.81,46.32 L63.44,48.44 L60.77,49.85 L59.11,52.27 L56.91,54.46 L54.35,56.13 L51.41,56.88 L48.37,56.88 L45.45,56.67 L42.80,58.13 L39.76,58.63 L36.65,58.97 L33.57,59.38 L30.53,59.88 L27.42,60.21 L24.34,60.63 L21.36,60.48 L19.06,58.18 L16.99,55.89 L20.02,55.36 L22.97,54.63 L24.39,51.99 L25.80,49.32 L27.22,51.59 L29.19,53.13 L32.23,52.63 L34.47,50.90 L35.89,48.24 L37.30,50.67 L39.91,50.88 L39.13,48.19 L39.13,45.14 L38.17,43.13 L34.92,43.13 L32.89,44.99 L31.63,47.72 L30.38,47.30 L29.38,44.47 L26.75,43.63 L24.65,43.88 L25.13,45.66 L23.77,48.35 L22.54,48.66 L21.63,45.79 L19.78,43.88 L17.03,42.66 L14.31,42.88 L11.70,41.83 L11.13,39.03 L13.43,37.13 L15.86,36.51 L17.88,34.10 L20.56,32.88 L23.35,31.77 L26.13,30.63 L28.90,29.47 L31.90,28.88 L35.05,28.63 L38.20,28.38 L41.44,28.38 L43.55,26.32 L45.85,24.03 L44.13,23.60 L44.38,20.45 L44.88,17.41 L45.13,14.26 L45.63,11.22 Z M52.00,28.80 L53.09,29.01 L54.05,29.56 L54.76,30.41 L55.13,31.45 L55.15,32.55 L54.76,33.59 L54.05,34.44 L53.09,35.00 L52.00,35.18 L50.91,35.00 L49.95,34.44 L49.24,33.59 L48.85,32.55 L48.87,31.45 L49.24,30.41 L49.95,29.56 L50.91,29.01 Z"); }
*/
.c-b:hover  .shp, .c-b:focus  .shp, .c-b:focus-within  .shp, .c-b.is-open  .shp { d: path("M58.92,16.50 L61.48,17.31 L63.34,19.08 L64.29,21.43 L63.87,24.09 L62.31,26.14 L60.31,27.94 L61.33,30.38 L63.78,30.69 L65.60,29.26 L66.77,26.84 L67.95,24.42 L69.47,22.75 L71.71,23.67 L71.42,26.35 L71.13,29.03 L70.83,31.70 L70.54,34.38 L70.20,37.03 L68.02,38.61 L65.38,38.55 L62.69,38.34 L60.01,38.12 L58.63,40.09 L57.55,42.56 L56.48,45.03 L55.40,47.50 L55.77,49.26 L58.38,49.93 L60.99,50.60 L63.60,51.27 L65.49,53.06 L66.88,55.25 L66.61,57.93 L65.64,60.43 L64.60,62.92 L63.57,65.40 L62.53,67.89 L61.50,70.38 L60.46,72.86 L58.76,74.72 L56.62,74.21 L55.86,71.88 L56.06,69.19 L56.26,66.51 L56.46,63.82 L56.66,61.13 L55.24,59.62 L52.63,58.96 L50.02,58.30 L47.61,59.40 L45.90,61.40 L44.38,63.63 L42.86,65.86 L41.20,67.96 L39.38,69.95 L37.56,71.94 L35.74,73.92 L33.92,75.91 L32.10,77.90 L29.86,79.03 L27.91,77.53 L28.59,75.04 L29.51,72.51 L30.44,69.98 L31.36,67.45 L32.29,64.92 L33.21,62.39 L34.63,60.12 L36.19,57.93 L37.75,55.73 L38.24,53.11 L39.12,50.62 L40.49,48.30 L41.85,45.97 L41.40,43.81 L39.65,41.77 L38.50,39.53 L38.88,36.93 L41.23,35.61 L43.58,34.30 L45.93,32.98 L48.09,31.47 L49.46,29.15 L50.95,26.98 L53.46,26.00 L54.51,24.22 L54.01,21.57 L54.51,19.15 L56.38,17.36 Z M50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 L50.00,50.00 Z"); }
.c-tl:hover, .c-tl:focus, .c-tl:focus-within, .c-tl.is-open { --cx: 31%; --cy: 31%; --tx: 0rem; }
.c-tr:hover, .c-tr:focus, .c-tr:focus-within, .c-tr.is-open { --cx: 69%; --cy: 31%; --tx: 0rem; }
.c-b:hover,  .c-b:focus,  .c-b:focus-within,  .c-b.is-open  { --cx: 50%; --cy: 69%; }

/* text rides above the blurred backing (z 1 > the ::before's z 0) */
.c-day, .c-tool, .c-info { position: relative; z-index: 1; }
/* closed top-row labels shift out by --tx (set per-circle above); animates back
   to centre as the circle opens. */
.c-day, .c-tool { transform: translateX(var(--tx, 0rem)); transition: transform .42s cubic-bezier(.2,.7,.2,1); }
.c-day {
  font-family: var(--head); font-weight: 600; font-size: clamp(0.6rem, 1.5vmin, 0.72rem);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent);
}
.c-tool {
  font-family: var(--head); font-weight: 700; font-size: clamp(1.3rem, 4.2vmin, 2.2rem);
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--text);
  line-height: 1; margin-top: 0.3rem;
}
.c-info {
  margin: 0; max-width: 26ch;
  max-height: 0; opacity: 0; overflow: hidden;
  color: var(--muted); font-size: clamp(0.82rem, 1.7vmin, 0.95rem); line-height: 1.45;
  transition: max-height .42s ease, opacity .3s ease, margin-top .42s ease;
}
.circle:hover .c-info, .circle:focus .c-info, .circle:focus-within .c-info, .circle.is-open .c-info {
  max-height: 9rem; opacity: 1; margin-top: 0.7rem;
}

.hero-hint {
  margin: 0;
  font-family: var(--head); font-weight: 400; font-size: 0.74rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

.scroll-cue {
  display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-family: var(--head); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--accent); }
.scroll-cue:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.cue-arrow { font-size: 1rem; }

/* ===========================================================================
   DETAIL PANEL (phase) — reused .day-card styles
   =========================================================================== */
.detail-slot { width: 100%; max-width: 680px; margin: 0 auto; }
.detail-slot:empty { display: none; }
.day-card {
  position: relative; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  border-left: 3px solid var(--accent);
  padding: clamp(1.5rem, 4vmin, 2.25rem);
  margin-top: 1.5rem;
}
.day-card .marker {
  font-family: var(--head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.4rem;
}
.day-card .name {
  font-family: var(--head); font-weight: 700; font-size: clamp(1.6rem, 4.5vmin, 2.2rem);
  text-transform: uppercase; margin: 0; color: var(--text);
}
.day-card .tagline { margin: 0.6rem 0 0; max-width: 48ch; color: var(--muted); }
.blocks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.blocks li {
  display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 1rem;
  align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--line);
}
.blocks li:last-child { border-bottom: 1px solid var(--line); }
.blocks .bname {
  font-family: var(--head); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
}
.blocks .bdetail { color: var(--muted); }
.day-note { margin: 1.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
/* footnote under the weekly phases (Sam's definition of progress) */
.weeks-note { margin: 2rem 0 0; font-size: 0.9rem; font-style: italic; color: var(--muted); }
.day-soon {
  margin: 1.5rem 0 0; padding: 1rem 0; border-top: 1px solid var(--line);
  font-family: var(--head); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--muted);
}
.day-close {
  position: absolute; top: clamp(1.2rem, 3vmin, 1.6rem); right: clamp(1.2rem, 3vmin, 1.6rem);
  background: none; border: 1px solid var(--line); border-radius: 3px; color: var(--muted);
  font-family: var(--head); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; cursor: pointer;
}
.day-close:hover, .day-close:focus-visible { color: var(--text); border-color: var(--muted); outline: none; }

/* ===========================================================================
   SECTIONS — bands alternate tone for definition
   =========================================================================== */
.band {
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 10vmin, 6.5rem);
  padding-inline: max(1.25rem, calc((100% - 980px) / 2));
}
.band.trainer { background: var(--panel); }
.band-head { max-width: 48ch; margin-bottom: clamp(1.75rem, 4vmin, 3rem); }
.band-eyebrow {
  font-family: var(--head); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.8rem;
}
.band-title {
  font-family: var(--head); font-weight: 700; font-size: clamp(2rem, 6vmin, 3.4rem);
  line-height: 1.02; text-transform: uppercase; margin: 0; color: var(--text);
}
.band-lede { margin: 1rem 0 0; max-width: 58ch; color: var(--muted); font-size: 1.05rem; }

/* phases */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.phase-item { display: flex; }
.phase {
  flex: 1; display: flex; flex-direction: column; gap: 0.45rem; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  border-top: 3px solid var(--accent);
  padding: clamp(1.2rem, 3vmin, 1.7rem); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.phase:hover, .phase:focus-visible {
  background: var(--panel-2); border-color: rgba(203, 168, 103, 0.45);
  transform: translateY(-3px); outline: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(203, 168, 103, 0.12);
}
.phase-weeks {
  font-family: var(--head); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.phase-name {
  font-family: var(--head); font-weight: 700; font-size: clamp(1.25rem, 3vmin, 1.7rem);
  text-transform: uppercase; color: var(--text); transition: color .2s ease;
}
.phase:hover .phase-name, .phase:focus-visible .phase-name { color: var(--accent-2); }
.phase-tag { color: var(--muted); font-size: 0.95rem; }
.phase-item:last-child { grid-column: 1 / -1; }
/* selected phase (its inline panel is open) */
.phase.is-active { background: var(--panel-2); border-color: var(--accent); }
.phase.is-active .phase-name { color: var(--accent-2); }
/* inline phase panels: hidden until their button is clicked */
.phase-pane[hidden] { display: none; }
.phase-pane { margin-top: 1.4rem; }
/* form submit error */
.form-error, .avail-error { margin: 0.9rem 0 0; color: #e3937c; font-size: 0.95rem; }

/* trainer */
.trainer-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vmin, 3.5rem); align-items: center; }
.portrait {
  aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #0e0f10;
}
/* Anchor the crop near the top: Sam's face is in the upper third, so when cover
   trims vertically (e.g. the wider 3/2 box on mobile) we keep his head, not the
   chest. Harmless on desktop where the 4/5 box matches the image and nothing is
   cropped. */
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.trainer-copy .band-eyebrow { margin-top: 0; }
.trainer-body { margin: 1rem 0 0; max-width: 58ch; color: var(--muted); }
/* Sam's personal note: a soft frosted panel (not another bordered card) - a
   translucent, lightly-blurred backing echoing the day-circle text backing. */
.trainer-quote {
  position: relative; margin: 1.6rem 0 0; max-width: 60ch;
  padding: 1.35rem 1.5rem 1.3rem 2.7rem; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.trainer-quote::before {
  content: "\201C"; position: absolute; left: 0.75rem; top: 0.5rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 3rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.trainer-quote p { margin: 0 0 0.8rem; color: var(--text); font-style: italic; line-height: 1.6; }
.trainer-quote p:last-of-type { margin-bottom: 0; }
.trainer-quote cite {
  display: block; margin-top: 0.9rem; font-style: normal; font-family: var(--head);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--accent);
}

/* details */
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 5vmin, 3.5rem); }
.spec { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.spec dt { font-family: var(--head); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.spec dd { margin: 0; color: var(--text); }
.spec-note { color: var(--muted); font-size: 0.9em; white-space: nowrap; }

/* location map */
.map-embed {
  margin: clamp(1.6rem, 4vmin, 2.6rem) 0 0;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0e0f10;
}
.map-embed iframe { display: block; width: 100%; height: clamp(240px, 36vmin, 400px); border: 0; }
.map-embed figcaption {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; justify-content: space-between;
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
}
.map-embed figcaption a {
  font-family: var(--head); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.map-embed figcaption a:hover, .map-embed figcaption a:focus-visible { color: var(--accent-2); text-decoration: underline; }

/* commitment */
.commit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.commit-grid li {
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 4px; padding: clamp(1.3rem, 3vmin, 1.9rem);
}
.commit-grid h3 {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vmin, 1.45rem); margin: 0 0 0.55rem; color: var(--text);
}
.commit-grid p { margin: 0; color: var(--muted); }

/* faq — native details/summary accordions, tan plus→minus marker */
.faq-list { max-width: 50rem; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding: 1.15rem 0.25rem; font-family: var(--head); font-weight: 600;
  font-size: clamp(1rem, 2.4vmin, 1.2rem); color: var(--text);
  transition: color .18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--accent-2); outline: none; }
.faq-item summary:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.faq-mark { position: relative; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.faq-mark::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-mark::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-mark::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-a {
  padding: 0 0.25rem 1.25rem;
  opacity: 1; transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
/* fade + ease the answer in when the panel opens (it still pops, the text eases) */
.faq-item[open] .faq-a {
  @starting-style { opacity: 0; transform: translateY(-0.45rem); }
}
.faq-a p { margin: 0; max-width: 60ch; color: var(--muted); line-height: 1.6; }

/* what you get */
.get-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.get-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(1.3rem, 3vmin, 1.8rem);
  transition: border-color .2s ease, transform .2s ease;
}
.get-card:hover { border-color: rgba(203, 168, 103, 0.4); transform: translateY(-3px); }
.get-icon {
  display: inline-flex; width: 2.7rem; height: 2.7rem; align-items: center; justify-content: center;
  border: 1.5px solid rgba(203, 168, 103, 0.5); border-radius: 8px; margin-bottom: 0.95rem;
}
.get-icon svg { width: 1.55rem; height: 1.55rem; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.get-card h3 {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.4vmin, 1.3rem); margin: 0 0 0.5rem; color: var(--text);
}
.get-card p { margin: 0; color: var(--muted); }

/* get in touch */
.cta { text-align: center; background: var(--panel); }
.cta.band { background: var(--panel); }
/* M W F meter, centred at the foot of the availability box. Each letter is grey
   until its training day has a time, then it flips to accent (with a bop each
   time one of that day's slots is ticked on). When all three are covered, the
   whole block gives one bigger pop - no colour invert, just the scale. */
.mwf {
  display: flex; width: fit-content; margin: 1.2rem auto 0;
  justify-content: center; gap: 0.6rem; pointer-events: none;
  font-family: var(--head); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.14em;
  transition: gap .3s cubic-bezier(.2, .8, .2, 1), letter-spacing .3s cubic-bezier(.2, .8, .2, 1);
}
/* three colour stages: grey (off) -> muted accent (on, still disparate) ->
   full accent (locked in, all three clumped) */
.mwf span { display: inline-block; color: #5b6065; transition: color .25s ease; }
.mwf span.is-lit { color: color-mix(in srgb, var(--accent) 52%, var(--muted)); }
.mwf.is-complete span.is-lit { color: var(--accent); }
/* per-letter bop each time one of its slots is ticked on */
@keyframes mwf-bop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.mwf span.bop { animation: mwf-bop .32s cubic-bezier(.3, 1.5, .5, 1); }
/* all three covered (after the last letter's bop settles): the letters slide
   together, overshooting to touching, then landing a pixel or two apart. */
.mwf.is-complete { gap: 0.1rem; letter-spacing: -0.005em; animation: mwf-clump .34s cubic-bezier(.3, .75, .35, 1); }
@keyframes mwf-clump {
  0%   { gap: 0.6rem; letter-spacing: 0.14em; }
  60%  { gap: 0;      letter-spacing: -0.02em; }
  100% { gap: 0.1rem; letter-spacing: -0.005em; }
}
.cta-inner { max-width: 44rem; margin: 0 auto; }
.cta-title { font-family: var(--head); font-weight: 700; font-size: clamp(2.2rem, 7vmin, 3.8rem); text-transform: uppercase; line-height: 1.02; margin: 0.4rem 0 0; color: var(--text); }
.cta .band-lede { margin-left: auto; margin-right: auto; }

/* scarcity: 8 spot pips (remaining glow tan, taken are empty) */
.spots { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-top: 3rem; }
.spots-pipwrap { position: relative; --pip: 0.95rem; --pgap: 0.5rem; }
.spots-pips { display: inline-flex; gap: var(--pgap); }
.pip { width: var(--pip); height: var(--pip); border-radius: 2px; }
.pip.taken { background: var(--accent); }                 /* spot taken (filled, accent) */
.pip.open  { background: #34383b; }                       /* still open (grey) */
/* the spot the callout points at: a subtle accent-border pulse */
.pip.next  { animation: pip-pulse 1.9s ease-in-out infinite; }
@keyframes pip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(203, 168, 103, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(203, 168, 103, 0.5); }
}

/* hand-written "this one could be yours" callout. The arrow TIP is anchored over
   the 6th pip (the first open one): its centre is a fixed 5*(pip+gap)+pip/2 from
   the left, so the arrow always lands on an open spot, any screen size.
   (tip is at viewBox x=46 of 56 in a 3rem-wide svg -> 2.46rem from the svg left) */
.spots-callout-arrow {
  position: absolute; bottom: calc(100% + 0.18rem);
  left: calc(5 * (var(--pip) + var(--pgap)) + var(--pip) / 2 - 2.46rem);
  width: 3rem; height: 2.57rem; overflow: visible; pointer-events: none;
}
.spots-callout-arrow path { fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spots-callout-text {
  position: absolute; bottom: calc(100% + 1.75rem);
  right: calc(8 * var(--pip) + 7 * var(--pgap) - 5.4rem);
  padding-right: 0.6rem;   /* a little breathing room on the right before the arrow */
  font-family: var(--script); font-weight: 600;
  font-size: 1.32rem; line-height: 1; color: var(--accent-2);
  white-space: nowrap; transform: rotate(-4deg); transform-origin: right bottom;
  pointer-events: none;
}

.spots-line {
  font-family: var(--head); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

.lead-form { max-width: 40rem; margin: 1.6rem auto 0; text-align: left; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field > span {
  font-family: var(--head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.field input, .field select, .field textarea {
  width: 100%; background: rgba(13, 14, 15, 0.6); border: 1.5px solid var(--line); border-radius: 4px;
  color: var(--text); font-family: var(--body); font-size: 1.02rem; padding: 0.85rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(203, 168, 103, 0.5); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent); background-color: rgba(13, 14, 15, 0.85);
  box-shadow: 0 0 0 3px rgba(203, 168, 103, 0.18);
}
/* custom dropdown chevron (tan) */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cba867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 0.85rem;
}
/* The native option list can't be styled much, but give it a solid background +
   explicit colours so it doesn't render with the select's see-through bg or odd
   default text. The placeholder reads muted until a real option is chosen. */
.field select option { background-color: var(--panel-2); color: var(--text); }
.field select option:disabled { color: var(--muted); }
.field select:has(option[value=""]:checked) { color: var(--muted); }

.commitments {
  border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 1.25rem 1rem;
  margin-top: 1.6rem;
}
.commitments legend {
  font-family: var(--head); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding: 0 0.5rem;
}
/* juiced custom commitment checkboxes — native input hidden but accessible,
   a bold tan "stamp" mark that forges a check in when ticked */
.check {
  display: flex; gap: 0.85rem; align-items: center;
  padding: 0.55rem 0.5rem; cursor: pointer; border-radius: 4px;
  transition: background-color .15s ease;
}
.check:hover { background: rgba(203, 168, 103, 0.07); }
.check input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;   /* hidden, still focusable */
}
.check-mark {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem;
  border: 2px solid rgba(203, 168, 103, 0.6); border-radius: 4px;
  background: rgba(13, 14, 15, 0.5);
  display: grid; place-items: center;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.check-mark::after {
  content: ""; width: 0.45rem; height: 0.85rem; margin-top: -0.18rem;
  border: solid var(--ink); border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.check input:checked + .check-mark {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 18px rgba(203, 168, 103, 0.35);
  animation: stamp .26s ease;
}
.check input:checked + .check-mark::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check-mark { outline: 2px solid var(--accent); outline-offset: 3px; }
.check-label { color: var(--text); font-size: 0.98rem; line-height: 1.4; }
@keyframes stamp { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* rough-availability grid — coarse toggle pads, submit as `availability` */
.avail { border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 1.25rem 1.1rem; margin-top: 1.6rem; }
.avail legend {
  font-family: var(--head); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding: 0 0.5rem;
}
.avail-hint { margin: 0.2rem 0 1rem; color: var(--muted); font-size: 0.9rem; }
.avail-grid {
  display: grid; grid-template-columns: minmax(4.5rem, auto) repeat(3, 1fr);
  gap: 0.45rem; align-items: stretch;
}
.avail-col {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  align-self: end; padding-bottom: 0.25rem; color: var(--muted);
}
.avail-col-icon {
  width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.avail-col-text {
  font-family: var(--head); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.avail-row {
  font-family: var(--head); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text); align-self: center;
}
.avail-cell { display: block; cursor: pointer; }
.avail-cell input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.avail-face {
  display: grid; place-items: center; height: 2.5rem;
  border: 1.5px solid var(--line); border-radius: 4px; background: rgba(13, 14, 15, 0.5);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.avail-cell:hover .avail-face { border-color: rgba(203, 168, 103, 0.6); }
.avail-face::after {
  content: ""; width: 0.4rem; height: 0.72rem; margin-top: -0.16rem;
  border: solid var(--ink); border-width: 0 0.18rem 0.18rem 0;
  transform: rotate(45deg) scale(0); transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.avail-cell input:checked + .avail-face {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px rgba(203, 168, 103, 0.3);
}
.avail-cell input:checked + .avail-face::after { transform: rotate(45deg) scale(1); }
.avail-cell input:focus-visible + .avail-face { outline: 2px solid var(--accent); outline-offset: 2px; }

.lead-form button {
  width: 100%; margin-top: 1.6rem;
  background: var(--accent); border: 1.5px solid var(--accent); border-radius: 4px; color: var(--ink);
  font-family: var(--head); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 1.05rem 1.6rem; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lead-form button:hover, .lead-form button:focus-visible {
  background: var(--accent-2); border-color: var(--accent-2); outline: none;
  transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(203, 168, 103, 0.35);
}
.lead-form button:active { transform: translateY(0); }

.enquire-thanks {
  max-width: 40rem; margin: 2.25rem auto 0; text-align: left;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 1.5rem;
}
.enquire-thanks .marker {
  font-family: var(--head); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.4rem;
}
.thanks-line { color: var(--text); margin: 0; font-size: 1.1rem; line-height: 1.5; }

/* footer */
.page-foot { border-top: 3px solid var(--accent); padding: 2.5rem 1.25rem; text-align: center; }
.foot-brand { margin: 0 0 0.4rem; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.3rem; color: var(--text); }
.page-foot p:last-child { margin: 0; font-family: var(--head); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* section reveal-on-scroll (JS adds .reveal then .in; skipped under reduced-motion) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ===========================================================================
   reduced motion / responsive
   =========================================================================== */
html { scroll-behavior: smooth; }

/* Sticky-header offset: in-page anchor jumps (#start, #weeks, #trainer) stop
   BELOW the pinned header instead of tucking the section's top edge under it -
   so the target's own top padding reads as breathing room, not congestion. */
.band, #main { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 760px) {
  .phases { grid-template-columns: 1fr; }
  .phase-item:last-child { grid-column: auto; }
  .trainer-grid { grid-template-columns: 1fr; }
  .portrait { aspect-ratio: 3 / 2; }
  .specs { grid-template-columns: 1fr; }
  .commit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ring-field { width: min(94vmin, 460px); }
  .blocks li, .spec { grid-template-columns: 1fr; gap: 0.25rem; }
  .strap { justify-content: center; }
  .field-grid { grid-template-columns: 1fr; }
  /* small phones: drop the "never left" flourish so the wordmark + Apply chip
     have room and the header stays clean. */
  .topbar-addendum { display: none; }
  /* availability header goes icon-only to keep the four-column grid legible */
  .avail-col-text { display: none; }
  .avail-col-icon { width: 1.35rem; height: 1.35rem; }
}