/* ==========================================================================
   Scrabble with Sid — shared design system (v2, vibrant)
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f2;
  --paper: #ffffff;
  --ink: #1c1a16;
  --ink-soft: #4a4640;
  --muted: #837d70;
  --line: #e7e5dd;

  /* core brand — white/blue theme */
  --primary: #1c64d1;
  --primary-dark: #0f3f8c;
  --primary-tint: #e5edfb;
  --blue-sky: #3aa0e0;
  --blue-sky-dark: #1c6ea8;
  --blue-steel: #3d5a99;
  --blue-steel-dark: #22335c;

  /* kept only because the scrabble tiles themselves still cycle through
     these — do not repurpose for other UI chrome */
  --gold: #e0972a;
  --gold-dark: #a86b12;
  --pink: #e2467a;
  --pink-dark: #a72c56;
  --teal: #1a9c8a;
  --teal-dark: #10685c;
  --red: #dd4a35;
  --red-dark: #a4321f;

  --tile: #f4dfba;
  --tile-border: #d9a94c;
  --tile-shadow: #b57c25;
  --tile-ink: #2a1e12;

  --maroon: #9c3b2e;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;

  --shadow-card: 0 10px 30px rgba(33, 28, 20, 0.07), 0 1px 2px rgba(33, 28, 20, 0.06);
  --shadow-tile: 0 2px 0 var(--tile-shadow), 0 6px 14px rgba(42, 30, 18, 0.2);

  --serif: "Fraunces", "Georgia", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { margin: 0 0 1.1em; color: var(--ink-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 0.9em;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--paper { background: var(--paper); }
/* The Player section: photo lives as a washed-out backdrop, not a visible
   image box. No image file yet? The wash alone renders as a plain light
   section — nothing looks broken either way. Uses the hero video thumbnail
   (images/hero-video-thumbnail.jpg) so the two sections feel connected. */
.section--photo-player {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(rgba(255,255,255,0.87), rgba(255,255,255,0.87)),
    url('images/hero-video-thumbnail.jpg');
  background-size: cover;
  background-position: center 20%;
}
.section--dark {
  background: linear-gradient(135deg, var(--primary-dark), #081d47 70%);
  color: #f3ece0;
}
.section--dark h2, .section--dark h3, .section--dark .eyebrow { color: #ffe9a8; }
.section--dark p { color: #cfe3d5; }

.center { text-align: center; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Highlight marker ---------- */
/* Soft blue background chips — a few tonal variants for a little rhythm,
   all within the blue family to match the white/blue theme. */
.hl {
  position: relative;
  font-weight: 700;
  padding: 0.05em 0.35em;
  border-radius: 5px;
  white-space: normal;
  background: var(--primary-tint);
  color: var(--primary-dark);
}
.hl--gold  { background: #dce8fa; color: #163f7a; }
.hl--pink  { background: #dceefb; color: var(--blue-sky-dark); }
.hl--blue  { background: var(--primary-tint); color: var(--primary-dark); }
.hl--teal  { background: #dde4f3; color: var(--blue-steel-dark); }
.hl--red   { background: var(--primary-tint); color: var(--primary-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Shadow matches the same subtle weight as nearby cards (var(--shadow-card))
   instead of a saturated blue glow that read as an oversized border. */
.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--primary-dark); }

.btn--accent {
  background: linear-gradient(135deg, var(--blue-sky), var(--primary));
  color: #fff;
  box-shadow: var(--shadow-card);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn--light {
  background: #fff;
  color: var(--primary-dark);
}

.btn--block { width: 100%; justify-content: center; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}
.nav .wrap .nav-cta {
  margin-left: auto;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}
.nav-logo-text-img {
  height: 38px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.nav-links a { padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { border-color: var(--primary); color: var(--primary-dark); }
.nav-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-cta .btn--primary { padding: 13px 20px; font-size: 0.92rem; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: 0.2s;
}

@media (max-width: 1280px) {
  .nav-links {
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-140%);
    transition: transform 0.25s ease;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .nav-cta .btn--ghost { display: none; }
}
/* On phones, the logo + "Book a Workshop" button + hamburger together are
   wider than the screen (nav has no flex-wrap), which was pushing content
   off-screen. Shrink the button first, then hide it below ~420px so the
   nav always fits — booking is still reachable from the hero and page CTAs. */
@media (max-width: 600px) {
  .nav-cta .btn--primary { padding: 10px 16px; font-size: 0.85rem; }
}
@media (max-width: 420px) {
  .nav-cta .btn--primary { display: none; }
}

/* ---------- Scrabble tiles ---------- */
.tile-word {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}
.tile-word.tile-word--center { justify-content: center; }

.tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.98em;
  height: 0.98em;
  min-width: 34px;
  min-height: 34px;
  background: linear-gradient(180deg, #fff2d9, var(--tile));
  border: 1px solid var(--primary);
  border-radius: 5px;
  box-shadow: var(--shadow-tile);
  color: var(--tile-ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.62em;
  transform: rotate(var(--tilt, 0deg));
}
/* A single blue border (matching the site palette) instead of the old
   pink/teal/gold cycle, which read as a bit childish. Each tile still gets
   a slight alternating tilt for character. */
.tile:nth-child(3n+1) { --tilt: -4deg; }
.tile:nth-child(3n+2) { --tilt: 3deg; }
.tile:nth-child(3n+3) { --tilt: -2deg; }

.tile .pt {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 0.32em;
  font-weight: 700;
  font-family: var(--sans);
}
/* lg tiles (page headings like "Meet Sid") use fixed px width/height/font,
   same fix as xl below — the base .tile's width/height are in em, so left
   alone they scale with the h1's own font-size (which ranges up to 4.4rem),
   letting the tile size and letter run away independently of each other at
   certain viewport widths. That's what let a wide glyph like "M" crowd out
   the small point-value number in the corner. Fixed px keeps the box,
   letter and point number in a locked, predictable ratio at every size. */
/* "Option B" sizing — smaller, calmer tiles now that each page heading is
   the only heading in the block (no separate eyebrow sitting above it). */
.tile-word--lg { gap: 6px; }
.tile-word--lg .tile { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 21px; border-radius: 7px; }
.tile-word--lg .tile .pt { right: 4px; bottom: 2px; }
@media (max-width: 900px) {
  .tile-word--lg { gap: 5px; }
  .tile-word--lg .tile { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 18px; }
}
@media (max-width: 700px) {
  .tile-word--lg { gap: 4px; }
  .tile-word--lg .tile { width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 15px; }
}
@media (max-width: 420px) {
  .tile-word--lg { gap: 3px; }
  .tile-word--lg .tile { width: 26px; height: 26px; min-width: 26px; min-height: 26px; font-size: 12px; }
}

/* "Fit" variants — for page-hero h1s where the word (or phrase) is too long
   to sit next to a right-side image at .tile-word--lg size without wrapping
   to a second line. Sized with clamp() so the tiles shrink fluidly with the
   viewport instead of jumping between fixed breakpoints, and calibrated so
   the whole word stays on one line even at the tightest point of the
   two-column hero (just above the 860px stacking breakpoint, where the left
   text column is only ~393px wide). Pick --fit-9 for a single long word
   (9-10 letters, e.g. "Workshops"), --fit-3w for a short multi-word phrase
   (e.g. "Teach with Sid").
*/
.tile-word--fit-9 { gap: clamp(3px, 0.6vw, 6px); }
.tile-word--fit-9 .tile {
  width: clamp(20px, 4vw, 46px);
  height: clamp(20px, 4vw, 46px);
  min-width: clamp(20px, 4vw, 46px);
  min-height: clamp(20px, 4vw, 46px);
  font-size: clamp(11px, 2vw, 22px);
}

.tile-word--fit-3w { gap: clamp(3px, 0.6vw, 6px); }
.tile-word--fit-3w .tile {
  width: clamp(16px, 2.6vw, 34px);
  height: clamp(16px, 2.6vw, 34px);
  min-width: clamp(16px, 2.6vw, 34px);
  min-height: clamp(16px, 2.6vw, 34px);
  font-size: clamp(9px, 1.3vw, 17px);
}
.tile-word--fit-3w .tile-gap { width: clamp(4px, 0.8vw, 6px); }
/* Below the hero's 860px stacking breakpoint (see .hero-grid above), the
   heading no longer sits next to a video/photo — it gets the full-width
   single column, same as a .page-hero title. The vw-based clamp above was
   tuned for the tightest two-column squeeze and keeps shrinking well past
   that point, leaving these headings noticeably smaller than every other
   page's .tile-word--lg heading once stacked. Fixed, larger sizes here
   restore that consistency without risking a wrap back to a second line
   (checked against the longest word/phrase in each class at 375-420px). */
@media (max-width: 860px) {
  .tile-word--fit-9 .tile { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 18px; }
  .tile-word--fit-3w .tile { width: 34px; height: 34px; min-width: 34px; min-height: 34px; font-size: 16px; }
  .tile-word--fit-3w .tile-gap { width: 6px; }
}
@media (max-width: 420px) {
  .tile-word--fit-9 .tile { width: 26px; height: 26px; min-width: 26px; min-height: 26px; font-size: 12px; }
  .tile-word--fit-3w .tile { width: 23px; height: 23px; min-width: 23px; min-height: 23px; font-size: 11px; }
  .tile-word--fit-3w .tile-gap { width: 4px; }
}

/* xl tiles use a fixed px font-size (not em) so the letters scale with the
   tile box itself, rather than with whatever font-size happens to be
   ambient where the tile-word sits. */
.tile-word--xl { gap: 10px; }
.tile-word--xl .tile { min-width: 92px; min-height: 92px; font-size: 44px; border-radius: 10px; }
.tile-word--xl .tile .pt { right: 6px; bottom: 4px; }
.tile-word--sm .tile { min-width: 26px; min-height: 26px; font-size: 0.55em; }
/* Step down in size at each breakpoint so even an 8-letter word never wraps
   to a second line, on any viewport, while staying as large as the
   available width allows (checked against the narrowest viewport in each
   range, including the ~28px of .wrap padding on each side). */
@media (max-width: 900px) {
  .tile-word--xl { gap: 6px; }
  .tile-word--xl .tile { min-width: 72px; min-height: 72px; font-size: 34px; }
}
@media (max-width: 700px) {
  .tile-word--xl { gap: 4px; }
  .tile-word--xl .tile { min-width: 40px; min-height: 40px; font-size: 19px; }
}
@media (max-width: 420px) {
  .tile-word--xl { gap: 3px; }
  .tile-word--xl .tile { min-width: 27px; min-height: 27px; font-size: 13px; }
}

/* Small single-letter accent tile, sat next to a plain-text heading (used
   on the Workshops page hero) — fixed px sizing like the other tile-word
   variants, so it's never at risk of the em-relative overlap bug and the
   heading itself can never wrap just because the word is long. */
.tile-word--accent .tile { width: 50px; height: 50px; min-width: 50px; min-height: 50px; font-size: 24px; border-radius: 8px; }
.tile-word--accent .tile .pt { right: 4px; bottom: 2px; }
.page-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 0.3em; }
.page-title-row h1 { margin: 0; }
@media (max-width: 420px) {
  .tile-word--accent .tile { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 19px; }
}

.tile-gap { width: 12px; }

/* colourful icon tiles, cycling through board-square accents */
.icon-tile {
  width: 46px; height: 46px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700;
  margin-bottom: 16px;
  border: 1px solid var(--tile-border);
  background: var(--tile);
  color: var(--tile-ink);
}
.grid-2 .card:nth-child(3n+1) .icon-tile,
.grid-3 .card:nth-child(3n+1) .icon-tile,
.grid-4 .card:nth-child(3n+1) .icon-tile { background: #dceefb; border-color: var(--blue-sky); color: var(--blue-sky-dark); }
.grid-2 .card:nth-child(3n+2) .icon-tile,
.grid-3 .card:nth-child(3n+2) .icon-tile,
.grid-4 .card:nth-child(3n+2) .icon-tile { background: #dde4f3; border-color: var(--blue-steel); color: var(--blue-steel-dark); }
.grid-2 .card:nth-child(3n+3) .icon-tile,
.grid-3 .card:nth-child(3n+3) .icon-tile,
.grid-4 .card:nth-child(3n+3) .icon-tile { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }

/* Icon tile sitting inline next to its heading instead of stacked above it
   (used on the workshops page's format cards). */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.card-title-row .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.card-title-row h3 { margin: 0; }

/* ---------- Banner (client-supplied promo image, edge-to-edge, no overlay
   text since the artwork already carries the branding) ---------- */
.banner-hero {
  width: 100%;
  line-height: 0;
}
.banner-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  padding: 44px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 520px;
}
.text-pop {
  position: relative;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
.text-pop::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 1px;
  height: 0.4em;
  background: var(--gold);
  opacity: 0.35;
  z-index: -1;
  border-radius: 2px;
}
.hero-cta { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.hero-media {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--radius-l);
  background: linear-gradient(150deg, var(--primary-dark), #081d47 120%);
  border: 1px solid var(--line);
  position: relative;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  object-fit: cover;
}
/* Darkening scrim (stronger at the bottom, where the label sits) layered
   under the diagonal texture, so the white play button/label text stays
   readable no matter how bright the underlying poster photo is. */
.hero-media::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 18, 42, 0.32) 0%, rgba(6, 18, 42, 0.32) 55%, rgba(6, 18, 42, 0.72) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 22px);
}
.hero-media { display: block; text-decoration: none; }
.hero-media-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
  padding: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.play-button {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-sky), var(--primary));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(28,100,209,0.4);
  transition: transform 0.2s ease;
}
.hero-media:hover .play-button { transform: scale(1.08); }
.play-button svg { width: 26px; height: 26px; margin-left: 4px; }
.hero-media-label { font-weight: 700; font-size: 1rem; }
.hero-media-sub { font-size: 0.82rem; color: #cfe3d5; }
/* Static-photo variant of .hero-media (no play button/click target) — just
   a real photo with a caption anchored to the bottom instead of dead center. */
.hero-media--photo { cursor: default; }
.hero-media-inner--caption { justify-content: flex-end; padding-bottom: 22px; }
.yt-badge {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}

/* ---------- Proof strip (compact testimonials near top) ---------- */
.proof-strip {
  padding: 8px 0 12px;
}
.proof-strip .carousel { max-width: 780px; margin: 0 auto; }
/* Wider variant: each carousel slide holds a 3-up grid of testimonial
   cards (see .testimonial-grid below) instead of one big quote, so the
   carousel itself needs to use the full page width, not the 780px cap
   sized for a single card. */
.proof-strip--grid .carousel { max-width: none; }
.proof-slide {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px 36px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.proof-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background-color: var(--primary-tint);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}
.proof-slide .stars { color: var(--gold); letter-spacing: 3px; font-size: 1rem; margin-bottom: 10px; }
.proof-slide p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 14px;
}
.proof-slide .author { font-weight: 700; font-size: 0.92rem; }
.proof-slide .author span { display: block; font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* ---------- Stats row ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px 18px;
  text-align: center;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--primary);
}
.stat:nth-child(4n+1) { border-top-color: var(--blue-sky); }
.stat:nth-child(4n+2) { border-top-color: var(--primary); }
.stat:nth-child(4n+3) { border-top-color: var(--blue-steel); }
.stat:nth-child(4n+4) { border-top-color: var(--primary-dark); }
.stat .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--primary-dark);
  display: block;
}
.stat .label {
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Impact strip: dark icon-led variant of the stats row, used as
   a deliberate change of pace between the two carousel sections ---------- */
.impact-strip {
  background: linear-gradient(135deg, var(--primary-dark), #081d47 70%);
}
.impact-strip .stat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.impact-strip .stat:nth-child(4n+1),
.impact-strip .stat:nth-child(4n+2),
.impact-strip .stat:nth-child(4n+3),
.impact-strip .stat:nth-child(4n+4) {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.stat-icon {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 8px;
}
.impact-strip .stat .num { color: #ffe9a8; }
.impact-strip .stat .label { color: #cfe3d5; }

/* ---------- Word of the Day (homepage-v3 style: bordered card, tiles
   left / text right, tiles forced to one line via flex-shrink:0) ---------- */
.word-of-day {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--primary);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 32px 44px;
  display: flex;
  gap: 40px;
  align-items: center;
}
/* Fixed min-width sized for the longest word in the bank (8 letters) so
   the card never resizes/shifts when "Try another word" swaps in a
   shorter or longer word — shorter words just leave quiet space at the
   right of the tile row instead of the whole card narrowing. */
.word-of-day .tile-word--xl { flex-shrink: 0; flex-wrap: nowrap; min-width: 438px; }
.word-of-day .tile-word--xl .tile { min-width: 46px; min-height: 46px; font-size: 21px; }
.word-of-day .wod-right { flex: 1; min-width: 0; }
.word-of-day .wod-right .eyebrow { margin-bottom: 0.4em; }
.wod-def {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 10px 0 14px;
  text-align: center;
  /* Reserve 2 lines' worth of height so a short definition doesn't sit in
     a shorter card than a long one — keeps "Try another word" from
     shifting the tip/button below it up and down. */
  min-height: 3.75rem;
}
.word-of-day .wod-def::before,
.word-of-day .wod-def::after { content: none; }
.wod-tip {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  background: var(--primary-tint);
  border: 1px solid #c9dbf5;
  border-radius: var(--radius-m);
  padding: 14px 18px;
  /* Sid's Tip text length varies with which word is showing (~110-141
     characters); reserving space for 3 lines keeps the card from
     growing/shrinking as visitors click through words. */
  min-height: 92px;
  box-sizing: border-box;
}
.wod-tip-avatar {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.wod-tip p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.wod-tip strong { color: var(--primary-dark); }
.wod-next {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 16px;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.88rem;
  font-family: var(--sans);
  text-decoration: underline;
  cursor: pointer;
}
.wod-next:hover { color: var(--primary); }
.word-of-day-cta { text-align: center; margin-top: 26px; }
@media (max-width: 860px) {
  .word-of-day { flex-direction: column; text-align: center; padding: 30px 28px; gap: 20px; }
  .word-of-day .tile-word--xl { min-width: 0; justify-content: center; }
  .word-of-day .tile-word--xl .tile { min-width: 42px; min-height: 42px; font-size: 19px; }
  .word-of-day .wod-def { text-align: center; }
  .word-of-day .wod-tip { text-align: left; }
}
@media (max-width: 420px) {
  .word-of-day .tile-word--xl .tile { min-width: 30px; min-height: 30px; font-size: 14px; }
}
/* ---------- Partners & Clients logo strip ----------
   Simple wrapping row of white cards, each holding one partner/client
   logo at a consistent height via object-fit:contain so very wide
   (LIFTR) and very tall (school crest) logos all read at the same visual
   size regardless of their original aspect ratio. */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 18px 26px;
  height: 96px;
  width: 176px;
}
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  .partner-logo { height: 78px; width: 140px; padding: 12px 18px; }
}

/* ---------- Gallery carousel (achievements / moments) ----------
   Photo and caption are stacked, never overlapping, so captions can
   never cover a face no matter how a photo is cropped. */
.gallery-slide {
  border-radius: var(--radius-l);
  border: 1px solid var(--tile-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.gallery-slide-photo {
  aspect-ratio: 16/9;
  background-color: var(--tile);
  background-image: linear-gradient(135deg, var(--tile), #fff6e4);
  background-size: cover;
  background-position: center 18%;
}
.gallery-caption {
  padding: 12px 18px 16px;
  text-align: center;
}
/* Title/description kept small and quiet so the photo stays the visual
   focus of the card, not the text underneath it. */
.gallery-slide h4 {
  font-family: var(--serif);
  font-size: 0.98rem;
  margin: 0;
  color: var(--tile-ink);
}
.gallery-slide p { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.4; }
@media (max-width: 700px) {
  .gallery-slide-photo { aspect-ratio: 4/3; }
}

/* ---------- Moments strip: horizontal scroll, fixed-size cards ----------
   Every card is the same fixed width (320px) regardless of the source
   photo's own dimensions — background-size:cover on .gallery-slide-photo
   crops each one to the same aspect-ratio, so the row stays perfectly
   even no matter how differently the original photos were shot. */
.scroll-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 14px;
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
}
.scroll-gallery .gallery-slide {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.scroll-gallery::-webkit-scrollbar { height: 8px; }
.scroll-gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
@media (max-width: 560px) {
  .scroll-gallery .gallery-slide { width: 260px; min-width: 260px; max-width: 260px; }
}

/* ---------- Generic carousel ---------- */
.carousel {
  position: relative;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius-l);
}
.carousel-track {
  display: flex;
  transition: transform 0.45s ease;
}
.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 4px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--primary-dark);
  z-index: 5;
}
.carousel-arrow--prev { left: -14px; }
.carousel-arrow--next { right: -14px; }
@media (max-width: 700px) {
  .carousel-arrow--prev { left: -6px; }
  .carousel-arrow--next { right: -6px; }
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.carousel-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  cursor: pointer;
  padding: 0;
}
.carousel-dots button.active {
  background: var(--primary);
  width: 22px;
  border-radius: 100px;
}

/* ---------- Photo slots (auto-fill from /images, graceful fallback) ---------- */
.photo-slot {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.photo-slot .slot-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: 100px;
  font-family: var(--sans);
}

/* ---------- Two column / bio ---------- */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

.sidebar-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.sidebar-card h4 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--primary-dark);
  margin-bottom: 14px;
}
.sidebar-card ul { list-style: none; margin: 0; padding: 0; }
.sidebar-card li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.sidebar-card li:first-child { border-top: none; }
.sidebar-card li strong { display: block; color: var(--ink); }
.sidebar-card li span { color: var(--muted); font-size: 0.85rem; }

/* ---------- Timeline ---------- */
.timeline {
  border-left: 3px solid var(--tile-border);
  margin-left: 6px;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blue-sky);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--tile-border);
}
.timeline-item:nth-child(4n+2)::before { background: var(--primary); }
.timeline-item:nth-child(4n+3)::before { background: var(--blue-steel); }
.timeline-item:nth-child(4n+4)::before { background: var(--primary-dark); }
.timeline-year {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-list li {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
/* First bullet keeps the row's leading emoji as its marker; any further
   points split out from the same milestone get a plain dot instead, so
   multi-point milestones read as a clean list rather than repeating an
   emoji down the column. */
.timeline-list li:not(:first-child) {
  position: relative;
  padding-left: 20px;
}
.timeline-list li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary);
}
.timeline-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

/* Role badges — used on the unified master timeline to show which "lens"
   (Player / Builder / Coach) a milestone belongs to. Multiple badges can
   sit on one milestone (e.g. Player + Coach). */
.role-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.role-badge {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid transparent;
}
.role-badge--player { background: #fdf1de; border-color: #f0d8a8; color: var(--gold-dark); }
.role-badge--builder { background: #dde4f3; border-color: var(--blue-steel); color: var(--blue-steel-dark); }
.role-badge--coach { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }

.narrow--wide { max-width: 960px; margin-left: auto; margin-right: auto; }

/* ---------- Zigzag photo timeline (master timeline) ----------
   A center vertical line with alternating photo / text rows, one real
   photo per milestone. Each row flips side via nth-child(even). On
   mobile the line and node disappear and rows stack: photo above text. */
.timeline-zigzag { position: relative; }
.timeline-zigzag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--tile-border);
  transform: translateX(-50%);
}
.tz-row {
  display: flex;
  align-items: center;
  gap: 36px;
  position: relative;
  margin-bottom: 52px;
}
.tz-row:last-child { margin-bottom: 0; }
.tz-row:nth-child(even) { flex-direction: row-reverse; }
.tz-media { flex: 1; min-width: 0; }
.tz-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.tz-node {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--tile-border);
  z-index: 1;
}
.tz-row:nth-child(4n+2) .tz-node { background: var(--blue-sky); }
.tz-row:nth-child(4n+3) .tz-node { background: var(--blue-steel); }
.tz-row:nth-child(4n+4) .tz-node { background: var(--gold); }
.tz-content { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .timeline-zigzag::before { display: none; }
  .tz-row, .tz-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 40px; }
  .tz-node { display: none; }
}

/* ---------- Pull quote ---------- */
.pull-quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.pull-quote::before { content: "\201C"; color: var(--primary); }
.pull-quote::after { content: "\201D"; color: var(--primary); }

/* ---------- Cards / grid ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* .grid-4--nowrap: stays 4-across at every width (homepage "Formats" teaser)
   instead of collapsing like the plain .grid-4 above — cards shrink their
   padding/type instead of wrapping, so they never break to a second line. */
.grid-4--nowrap {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px;
}
@media (max-width: 860px) {
  .grid-4--nowrap { gap: 8px; }
  .grid-4--nowrap .card { padding: 14px 10px; }
  .grid-4--nowrap .icon-tile { width: 32px; height: 32px; margin-bottom: 8px; }
  .grid-4--nowrap .icon-tile svg { width: 18px; height: 18px; }
  .grid-4--nowrap .stat-card h3 { font-size: 0.82rem; line-height: 1.2; min-height: 2.6em; }
  .grid-4--nowrap .stat-card .audience-tag { font-size: 0.56rem; padding: 3px 6px; }
  .grid-4--nowrap .stat-card .stat-headline { font-size: 1.25rem; margin: 6px 0 2px; }
  .grid-4--nowrap .stat-card .stat-caption { font-size: 0.6rem; margin-bottom: 6px; }
  .grid-4--nowrap .stat-card ul.mini-list li { font-size: 0.64rem; padding: 2px 0; line-height: 1.3; }
}
@media (max-width: 520px) {
  .grid-4--nowrap { gap: 4px; }
  .grid-4--nowrap .card { padding: 8px 5px; }
  .grid-4--nowrap .icon-tile { width: 24px; height: 24px; margin-bottom: 5px; }
  .grid-4--nowrap .icon-tile svg { width: 14px; height: 14px; }
  .grid-4--nowrap .stat-card h3 { font-size: 0.62rem; min-height: 2.6em; }
  .grid-4--nowrap .stat-card .audience-tag { display: none; }
  .grid-4--nowrap .stat-card .stat-headline { font-size: 0.95rem; margin: 4px 0 1px; }
  .grid-4--nowrap .stat-card .stat-caption { font-size: 0.5rem; margin-bottom: 4px; }
  .grid-4--nowrap .stat-card ul.mini-list { display: none; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 30px;
  box-shadow: var(--shadow-card);
}

/* ---------- Stat-forward cards (homepage Workshops teaser) — a leaner
   sibling of the format-card: one headline number instead of a paragraph,
   a small audience-tag pill instead of "Who it's for:", and 2 short
   fragments instead of a full highlight-list. Ported as-is from the
   formats-concepts-preview review (Concept A). ---------- */
.stat-card { text-align: left; display: flex; flex-direction: column; }
/* h3 and audience-tag each reserve enough height for 2 lines so the stat
   number below always starts at the same Y position across all 4 cards,
   regardless of how long an individual title or tag happens to be
   (e.g. "Workshops & Tournaments" wrapping while "1-1 Coaching" doesn't). */
.stat-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; min-height: 2.6em; }
.stat-card .audience-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--primary-tint);
  color: var(--primary-dark);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.stat-card .stat-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.35rem;
  color: var(--primary-dark);
  line-height: 1;
  margin: 10px 0 4px;
}
.stat-card .stat-caption { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.stat-card ul.mini-list { list-style: none; margin: 10px 0 0; padding: 0; }
.stat-card ul.mini-list li { font-size: 0.85rem; color: var(--ink-soft); padding: 3px 0; }

/* ---------- Highlight list — bullet points under a format-card's
   description (Workshops page), sourced verbatim from the client's
   offerings doc. Small check marks instead of default browser bullets, to
   read as "quick facts" rather than a plain list. ---------- */
.highlight-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.highlight-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.highlight-list li + li { margin-top: 7px; }
.highlight-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--primary);
}

/* ---------- Reveal cards — scroll-in reveal + playful hover. Started as a
   Workshops-only effect (.format-card); .reveal-card opts any other card
   into the identical animation (Role Panels + "Who it's for" cards on the
   homepage, Delivery Modes cards on Workshops) without touching plain
   .card usage elsewhere (testimonials, sidebar cards, form cards, etc). ---------- */
.format-card,
.reveal-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.format-card.is-visible,
.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.format-card:hover,
.reveal-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 20px 38px rgba(15, 45, 90, 0.16);
}
.format-card .icon-tile,
.reveal-card .icon-tile {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.format-card:hover .icon-tile,
.reveal-card:hover .icon-tile {
  transform: rotate(-8deg) scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .format-card,
  .reveal-card {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .format-card:hover,
  .reveal-card:hover { transform: none; }
  .format-card .icon-tile, .format-card:hover .icon-tile,
  .reveal-card .icon-tile, .reveal-card:hover .icon-tile { transition: none; transform: none; }
}

/* ---------- Testimonials (full grid, used further down page too) ---------- */
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  border-top: 4px solid var(--blue-sky);
}
.testimonial:nth-child(4n+2) { border-top-color: var(--primary); }
.testimonial:nth-child(4n+3) { border-top-color: var(--blue-steel); }
.testimonial:nth-child(4n+4) { border-top-color: var(--primary-dark); }
.testimonial .stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; }
.testimonial p { color: var(--ink); font-style: italic; margin: 0; flex: 1; font-size: 0.83rem; line-height: 1.48; }
/* Clamped by default to keep every card a consistent, compact height
   regardless of how long the real quote is — full text stays intact in
   the markup, "Read more" just toggles the clamp off. */
.testimonial p.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The wide 2-up slide has much more width per card, so each line already
   holds more words — allow a couple more lines before clamping kicks in. */
.testimonial-grid--partial-2 .testimonial p.is-clamped {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}
.testimonial-more {
  background: none;
  border: none;
  padding: 0;
  margin-top: -4px;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.78rem;
  font-family: var(--sans);
  font-style: normal;
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--primary-tint);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; color: var(--primary-dark);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.testimonial-author strong { font-size: 0.85rem; }
.testimonial-author span { font-size: 0.74rem; color: var(--muted); display: block; }

/* Groups of .testimonial cards inside one carousel slide (homepage
   testimonials carousel, 3 cards at a time). --partial is used for the
   last slide when the count isn't a multiple of 3, so 1-2 leftover cards
   stay a sensible width instead of stretching to fill the row. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Wide 2-column layout (not narrowed/centered like a "leftover" slide) —
   used for the longer testimonials so the extra text gets more width to
   spread across per line, instead of wrapping tall inside a narrow card. */
.testimonial-grid--partial-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.testimonial-grid--partial-1 {
  grid-template-columns: 1fr;
  max-width: 340px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .testimonial-grid,
  .testimonial-grid--partial-2 {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}
.placeholder-flag {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red-dark);
  background: #fbe3de;
  border: 1px solid #f0bcaf;
  padding: 3px 8px;
  border-radius: 100px;
  width: fit-content;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--primary-dark), #081d47 80%);
  color: #f3ece0;
  border-radius: var(--radius-l);
  padding: 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(58,160,224,0.30), transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(28,100,209,0.25), transparent 55%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2, .cta-band p { color: #f3ece0; }
.cta-band .hero-cta { justify-content: center; }
@media (max-width: 700px) {
  .cta-band { padding: 40px 24px; }
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.form-row { margin-bottom: 22px; }
.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.form-row .hint { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.choice-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  background: var(--bg-alt);
}
.choice-pill input { accent-color: var(--primary); }
.form-section-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 4px;
  padding-top: 8px;
}
.form-section-sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 18px; }
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.consent-row input { margin-top: 4px; accent-color: var(--primary); }
.form-note {
  background: var(--primary-tint);
  border: 1px solid #c9dbf5;
  border-radius: var(--radius-s);
  padding: 16px 18px;
  font-size: 0.92rem;
  color: var(--primary-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #d8d2c3;
  padding: 60px 0 30px;
}
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.footer-grid h5 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: 0.82rem;
  color: #9a917f;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-logo-img {
  height: 30px;
  width: auto;
  display: block;
}

/* ---------- Gallery page — filterable masonry (picked from the design
   review: Concept 2). Chips filter a CSS-column masonry grid of real,
   captioned event photos, grouped by event type.

   With 7 chips (All + 6 named events) there's no single-line width that
   works on a phone without either scrolling or shrinking the text past
   readable — so instead of a scroll strip, this wraps deliberately into a
   tidy, centered block. flex-wrap + centered justify + a consistent gap
   means it always reads as an intentional 2-row (sometimes 3 on very
   narrow phones) grid of pills, not a ragged overflow — every option
   stays visible at once with no scrolling or hidden items. ---------- */
.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 34px;
}
.filter-chip {
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 16px; border-radius: 100px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); color: var(--muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.masonry {
  column-count: 3;
  column-gap: 16px;
}
.masonry-item {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.masonry-item img { display: block; width: 100%; height: auto; }
.masonry-item:hover { transform: translateY(-3px); }
.masonry-item.is-hidden { display: none; }
.masonry-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 12px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.68), transparent);
  color: #fff; font-size: 0.82rem; font-weight: 600;
}
@media (max-width: 860px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 860px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } }

/* Homepage video testimonials carousel — one large 16:9 clip per slide,
   centered and capped in width so it reads as a featured video rather than
   a grid. Uses the generic .carousel engine (arrows/dots/autoplay/swipe);
   arrows and dots hide themselves via JS while there's only one slide. */
.video-carousel {
  max-width: 720px;
  margin: 0 auto;
}
.video-carousel .video-tile {
  width: 100%;
}

.video-tile {
  aspect-ratio: 16/9;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
  background-color: var(--primary-tint);
  background-image: linear-gradient(150deg, var(--primary-dark), #081d47 120%);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Portrait-shot posters (phone videos, subject centred higher in frame) —
   bias the crop toward the top so the face isn't cut off in the 16:9 tile. */
.video-tile[data-video-src="videos/testimonial-2.mp4"] {
  background-position: center 20%;
}
.video-tile[data-video-src="videos/testimonial-1.mp4"] {
  background-position: center top;
}
.video-tile[data-video-src="videos/event-video-4.mp4"] {
  background-position: center 15%;
}
.video-tile .play-button { width: 56px; height: 56px; }
.video-tile .play-button svg { width: 20px; height: 20px; }
.video-tile-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15,12,8,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 100;
}
.lightbox.open { display: flex; }
.lightbox-content {
  max-width: 960px;
  width: 100%;
  max-height: 85vh;
}
.lightbox-content img {
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-m);
}
.lightbox-content iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-m);
  border: none;
}
.lightbox-content video {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  margin: 0 auto;
  border-radius: var(--radius-m);
  background: #000;
}
.lightbox-close {
  position: absolute;
  top: 22px; right: 26px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.filter-tab {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 9px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 64px 0 40px;
  text-align: center;
}
.page-hero p { max-width: 640px; margin: 0 auto; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;}
.tag {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--tile);
  border: 1px solid var(--tile-border);
  color: var(--tile-ink);
}
.tag:nth-child(3n+1) { background: #dceefb; border-color: var(--blue-sky); color: var(--blue-sky-dark); }
.tag:nth-child(3n+2) { background: #dde4f3; border-color: var(--blue-steel); color: var(--blue-steel-dark); }
.tag:nth-child(3n+3) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }

.divider {
  height: 1px;
  background: var(--line);
  margin: 0 auto;
  max-width: var(--maxw);
}

/* ---------- WhatsApp floating button ----------
   Fixed bottom-right on every page so visitors can start a WhatsApp chat
   from wherever they are on the site, not just the Get in Touch page. */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 22px rgba(0,0,0,0.3);
}
.whatsapp-float svg { width: 30px; height: 30px; display: block; }
@media (max-width: 600px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}