/* australiawidefirstaid.com — homepage styles. Mobile-first; breakpoints at
   48rem (tablet) and 64rem (desktop). Palette from the AWFA brand kit
   (australiawidefirstaid.com.au/resources/brand-kit): primary #CE1443 /
   #000 / #F9FFFF; secondary #457B9D / #ECF2F6 / #EADCE5 / #F9DA04. */

:root {
  --red: var(--accent);
  --red-dark: #a80f36;
  --red-tint: #eadce5;
  --blue: #457b9d;
  --navy: #1e1e1e;
  --ink: #1e1e1e;
  --muted: #5a6472;
  --bg: #ffffff;
  --bg-soft: #ecf2f6;
  /* Themeable surfaces. Hoisted so a theme bundle's tokens reach them —
     see docs/theming.md. --accent aliases the brand red: themes vary it
     within an approved range; the brand value itself is not themeable. */
  --surface: #ffffff;
  --hero-from: #fdfdfd;
  --hero-to: #eef2f5;
  /* Hero backdrop. `none` keeps the plain gradient; a theme sets a url()
     and the gradient becomes a scrim over it, so headline contrast never
     depends on the picture. --hero-veil tunes that scrim per theme. */
  --hero-image: none;
  --hero-veil: 0.55;
  --accent: #ce1443;
  --on-dark-muted: #c3cad4;
  --on-dark-dim: #9aa3ad;
  /* Section colour-coding. --tint washes the icon circles and list bullets,
     --wash the flat cards and soft sections, --panel the final CTA. A theme
     carries its hue past the hero into the whole page. */
  --tint: #eadce5;
  --wash: #ecf2f6;
  --panel: #1e1e1e;
  --line: #dfe7ee;
  --radius: 14px;
  --radius-sm: 9px;
  --container: 72rem;
}

/* Self-hosted brand faces matching the primary site and checkout:
   Radio Canada Big for headlines, Geist for body (both OFL, variable
   latin subsets from Google Fonts), and the brush script for the hero
   accent word (vendored from the marketing site's library, same file
   checkout serves). font-weight:800 usages clamp to Radio Canada Big's
   700 axis maximum — the same weight the primary site's headers wear. */
@font-face {
  font-family: "Radio Canada Big";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/radio-canada-big.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/geist.woff2") format("woff2");
}
@font-face {
  font-family: "brush";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/static/fonts/brush.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  /* Checkout's stack, with both faces actually served here. */
  font-family: "Geist", "Radio Canada Big", Roboto, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

h1, h2, h3 {
  font-family: "Radio Canada Big", "Geist", Roboto, system-ui, -apple-system, sans-serif;
}
h1, h2 { line-height: 1.15; letter-spacing: -0.01em; }

/* Brush-script accent word inside a headline — the marketing site's
   span.handwritten hero style, numbers matched to checkout's. */
.handwritten {
  font-family: "brush", serif;
  font-weight: normal;
  letter-spacing: 0;
  position: relative;
  top: 0.09em;
  font-size: 98%;
  margin: 0 0.5%;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

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

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.logo img { height: 2.75rem; width: auto; }

.main-nav { display: none; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.phone svg { width: 1.1rem; height: 1.1rem; fill: var(--ink); }

.btn-book { padding: 0.6rem 1.1rem; }

/* Mobile nav (checkbox toggle, no JS) */
.nav-toggle { display: none; }

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.nav-toggle-label span {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem 1.25rem 1rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.mobile-nav > a,
.mobile-nav summary {
  display: block;
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.mobile-nav > a:last-child { border-bottom: 0; }
.mobile-nav summary { list-style: none; position: relative; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 1.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.mobile-nav details[open] summary::after { transform: rotate(-135deg); }
.mobile-sub {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.mobile-sub a {
  padding: 0.55rem 0;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
}
.mobile-sub a small { color: var(--on-dark-dim); font-size: 0.75rem; }
.mobile-nav-phone { color: var(--red) !important; }

.nav-toggle:checked ~ .mobile-nav { display: flex; }

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

.hero {
  background-color: var(--hero-to);
  /* The scrim runs inverse to the art: these backdrops are bright at the top
     and deep at the foot, while the copy runs the whole height. So it opens
     up where the picture is luminous and the headline sits, and closes down
     over the badges where the ground is darkest. Measured, not guessed —
     every band clears AA against --ink at the theme's --hero-veil. */
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--hero-from) calc(var(--hero-veil) * 45%), transparent) 0%,
      color-mix(in srgb, var(--hero-from) calc(var(--hero-veil) * 80%), transparent) 35%,
      color-mix(in srgb, var(--hero-to)   calc(var(--hero-veil) * 155%), transparent) 100%),
    var(--hero-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  padding: 2.5rem 0 3rem;
}

.hero-grid { display: grid; gap: 2rem; }

.eyebrow {
  color: var(--red);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 9vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.hero-sub {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--muted);
}

.reviews {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-weight: 600;
}

/* Per-platform ratings (Google / Trustpilot / ProductReview) — unbound per
   the design: no card boxes, just generous spacing. */
.trust-ratings {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin-top: 1.5rem;
}
.trust-ratings li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.trust-ratings .rating-stars { height: 1.05rem; width: auto; }
.trust-ratings .rating-logo { height: 1.15rem; width: auto; }
.trust-ratings .rating-meta {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}
.trust-ratings .rating-meta strong {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 800;
}
.stars { color: var(--red); letter-spacing: 0.1em; font-size: 1.1rem; }
.google-g {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: #4285f4;
  font-weight: 800;
  font-size: 0.85rem;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.badges li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
}
.badge-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.badge-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile hero: centred, with the heading flowing across the full width —
   the h1's <br>s are a desktop affordance for the three-line lockup
   beside the photo. */
@media (max-width: 47.9375rem) {
  /* Tighter above the fold: the finder is the action and it sits below this
     whole column, so every rem saved here brings it closer. Type scale and
     tap targets are unchanged — only the gaps are. */
  .hero { padding: 1.5rem 0 1.75rem; }
  .hero h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-sub { margin-top: 0.6rem; font-size: 1rem; }
  .trust-ratings { margin-top: 1rem; }
  .badges { margin-top: 1.25rem; }
  .hero-copy { text-align: center; }
  .hero h1 br { display: none; }
  /* One centred row per platform: stars, score, logo inline. */
  /* Two per row rather than one, which reclaims roughly a third of the
     block's height without shrinking anything. */
  .trust-ratings { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.7rem 1.25rem; }
  .trust-ratings li { flex-direction: row; align-items: center; gap: 0.45rem; }
  .trust-ratings .rating-meta { font-size: 0.8rem; }
  .trust-ratings .rating-logo { height: 1rem; }
  /* Three even columns, icon above label. */
  .badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem 0.4rem;
    justify-items: center;
  }
  .badges li span:last-child { font-size: 0.78rem; line-height: 1.25; }
  .badges li { flex-direction: column; text-align: center; gap: 0.5rem; }
}

/* Floats edge-to-edge under the heading like the mock — absolutely
   positioned against the hero's right/top/bottom edges, no frame; the
   photo's white studio backdrop dissolves leftwards into the hero
   background via the mask. Hidden on mobile (the mobile mock leads with
   text + finder). */
.hero-photo { display: none; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
  display: block;
  -webkit-mask-image: linear-gradient(to left, #000 72%, transparent 100%);
  mask-image: linear-gradient(to left, #000 72%, transparent 100%);
}

/* ── Course pages ────────────────────────────────────────────────────── */

/* Interior pages share the hero's backdrop machinery — they carry both
   classes — so they need only a picture. One shared image rather than a
   themed one: themes are homepage-scoped, and these pages are outside
   EXP-03, so giving them a backdrop is a design change rather than a change
   to the experiment's control. Veil measured with
   `go run ./cmd/veil -file internal/web/static/img/hero-interior.jpg`. */
.course-hero {
  padding: 2.5rem 0 3rem;
  --hero-image: url("/static/img/hero-interior.jpg");
  --hero-veil: 0.45;
}
.course-hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; }
.course-hero .hero-sub { max-width: 44rem; }

.course-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.course-price { font-size: 2.2rem; font-weight: 800; color: var(--red); }
.course-price-note { color: var(--muted); font-weight: 600; font-size: 0.9rem; }

.badge-official span {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  max-width: 16rem;
}

.course-content { padding: 2.5rem 0 1rem; }
.course-content h2, .course-details h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.learn-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.learn-list li { padding-left: 1.6rem; position: relative; }
.learn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--tint);
}
.learn-list li::after {
  content: "";
  position: absolute;
  left: 0.22rem;
  top: 0.52rem;
  width: 0.42rem;
  height: 0.24rem;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

.course-details { padding: 1.5rem 0 2.5rem; }
.course-details details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  background: var(--surface);
}
.course-details summary {
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.course-details summary::-webkit-details-marker { display: none; }
.course-details summary::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.course-details details[open] summary::after { transform: rotate(-135deg); }
.detail-body { padding: 0 1.1rem 1rem; color: var(--muted); }
.detail-body p + p { margin-top: 0.5rem; }

@media (min-width: 48rem) {
  .learn-list { grid-template-columns: 1fr 1fr; }
}

/* ── Corporate & About ───────────────────────────────────────────────── */

.hp-field { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

.enquiry-fields {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}
.enquiry-form label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.45rem; }
.enquiry-form label small { color: var(--muted); font-weight: 500; }
.enquiry-form input,
.enquiry-form select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 3rem;
}
.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.enquiry-alt { color: var(--muted); font-size: 0.9rem; }
.enquiry-alt a { color: var(--red); font-weight: 700; }
.enquiry-thanks { margin-top: 0.75rem; color: var(--muted); }
.enquiry-thanks a { color: var(--red); font-weight: 700; }

.workplace-price { font-weight: 700; color: var(--red); margin-top: 0.5rem; font-size: 0.9rem; }

.about-story p { margin-bottom: 1rem; line-height: 1.7; color: var(--ink); }

@media (min-width: 48rem) {
  .enquiry-fields { grid-template-columns: repeat(2, 1fr); }
  .enquiry-message { grid-column: 1 / -1; }
}

/* ── Policy & contact pages ──────────────────────────────────────────── */

.policy-doc { margin-top: 2rem; }
.policy-doc h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.75rem; }
/* Needs the compound selector: .map-frame is declared later, so a bare
   .policy-frame would lose the aspect-ratio to it. */
.map-frame.policy-frame { aspect-ratio: 3 / 4; max-height: 44rem; margin-top: 1rem; background: var(--bg-soft); }
.contact-cards { margin-bottom: 1.5rem; }
.contact-details p { color: var(--muted); margin-bottom: 0.4rem; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }

/* ── Resource library & glossary ─────────────────────────────────────── */

.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.genre-chips a {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.genre-chips a.active,
.genre-chips a:hover { background: var(--red); border-color: var(--red); color: #fff; }

.library { padding: 2.5rem 0; }

.article-grid {
  display: grid;
  gap: 1.25rem;
}
.article-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease;
}
.article-tile:hover { box-shadow: 0 10px 30px rgba(30, 30, 30, 0.1); }
.article-tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-tile-body { padding: 1rem 1.1rem 1.25rem; }
.article-tile h2 { font-size: 1.05rem; font-weight: 700; margin-top: 0.35rem; }
.article-tile p { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }

.article-genre {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}

.library-empty { color: var(--muted); }

/* Article + glossary term pages */
.article-page { padding: 2.5rem 0 1rem; }
.article-container { max-width: 46rem; }
.breadcrumb { font-size: 0.85rem; margin-bottom: 1rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.article-page h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.article-meta { color: var(--muted); margin-top: 0.5rem; }
.term-outline { font-size: 1.05rem; }
.article-hero { border-radius: var(--radius); margin-top: 1.5rem; width: 100%; }

.term-video { margin-top: 2rem; }
.video-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.article-caption { color: var(--muted); font-size: 0.8rem; margin-top: 0.5rem; }
.article-body { margin-top: 1.5rem; }
.article-body p { margin-bottom: 1rem; line-height: 1.7; }
.article-body h2 { font-size: 1.4rem; font-weight: 800; margin: 1.75rem 0 0.75rem; }
.article-body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 0.6rem; }
.article-body ul, .article-body ol { margin: 0 0 1rem 1.4rem; line-height: 1.7; }
.article-body img { border-radius: var(--radius-sm); margin: 1rem 0; }
.article-body a { color: var(--red); }
.term-callout {
  background: var(--tint);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

/* Glossary index */
.letter-group { margin-bottom: 2rem; }
.letter-group h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--red);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
}
.term-list {
  list-style: none;
  columns: 1;
  column-gap: 2rem;
}
.term-list a {
  display: block;
  padding: 0.3rem 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.term-list a:hover { color: var(--red); }

/* Course-page trust fragments */
.key-terms { padding: 2rem 0 0.5rem; }
.key-terms h2, .helpful-reading h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.term-cards, .article-cards { display: grid; gap: 1rem; }
.term-card, .article-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.article-card:hover { box-shadow: 0 10px 30px rgba(30, 30, 30, 0.1); }
.term-card h3, .article-card h3 { font-size: 1rem; font-weight: 700; margin-top: 0.3rem; }
.term-card p, .article-card p { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.helpful-reading { padding: 2rem 0; }

@media (min-width: 48rem) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
  .term-cards, .article-cards { grid-template-columns: repeat(3, 1fr); }
  .term-list { columns: 3; }
}

/* ── Hub (location) pages ────────────────────────────────────────────── */

.hub-map { padding: 1rem 0 2.5rem; }
.hub-map h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 7;
  min-height: 16rem;
  /* aspect-ratio transfers min-height into a min-width (16rem × 16/7 ≈
     585px), pushing the frame past narrow viewports — cap it. */
  max-width: 100%;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Course finder ───────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16, 26, 44, 0.08);
}

.card-flat { box-shadow: none; background: var(--wash); }

/* Overlaps the hero (negative margin), so it must stack above the hero's
   absolutely-positioned floating photo. */
.finder-wrap { margin-top: -1.5rem; padding-bottom: 1rem; position: relative; z-index: 2; }

.finder { padding: 1.5rem 1.25rem; }

.finder h2 { font-size: 1.5rem; font-weight: 800; }
.finder h2 em { font-style: normal; color: var(--red); }

.finder-fields {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.finder-field label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}

/* Marks a geo-suggested "Where?" so the preselection reads as helpful, not
   accidental. */
.geo-hint {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.3rem;
}

.step-num {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.finder-field select,
.finder-field input,
.finder-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 3rem;
}

.finder-field textarea { resize: vertical; }

/* Native selects ignore the padding that sizes the text input, leaving the
   three controls at different heights. Drawing our own chevron lets the
   selects share the input's exact box. */
.finder-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235c5f66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.85rem;
  padding-right: 2.4rem;
  text-overflow: ellipsis;
}
.finder-field ::placeholder { color: var(--muted); }

.btn-find { width: 100%; min-height: 3rem; align-self: end; }

.finder-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.finder-note svg { width: 0.95rem; height: 0.95rem; fill: var(--muted); }

/* ── Corporate strip ─────────────────────────────────────────────────── */

.corporate { padding: 1.5rem 0; }

.corporate-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
}

.corp-icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--surface);
  flex-shrink: 0;
}
.corp-icon svg { width: 1.6rem; height: 1.6rem; fill: var(--navy); }

.corp-copy h2 { font-size: 1.25rem; font-weight: 800; }
.corp-copy p { color: var(--muted); margin-top: 0.2rem; }

/* ── Trusted by ──────────────────────────────────────────────────────── */

.trusted { padding: 2rem 0; text-align: center; }

.trusted h2 { font-size: 1.05rem; font-weight: 700; }

.logo-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 1.25rem;
}
.logo-row li {
  color: var(--on-dark-dim);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.logo-row a { display: block; }
.logo-row img {
  height: 2.1rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.logo-row a:hover img { filter: none; opacity: 1; }
.logo-row .logo-more { font-weight: 500; font-size: 0.85rem; }

/* ── Stats ───────────────────────────────────────────────────────────── */

.stats { padding: 2rem 0 2.5rem; border-top: 1px solid var(--line); background: var(--wash); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  text-align: center;
}

.stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.stat strong { font-size: 1.5rem; font-weight: 800; margin-top: 0.6rem; }
.stat > span:last-child { color: var(--muted); font-size: 0.9rem; }

.stat-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--tint);
}
.stat-icon svg { width: 1.6rem; height: 1.6rem; fill: var(--red); }

/* ── Final CTA ───────────────────────────────────────────────────────── */

.final-cta { padding: 0 0 2.5rem; }

.cta-panel {
  background: var(--panel);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cta-panel h2 { font-size: 1.6rem; font-weight: 800; }
.cta-panel p { margin-top: 0.5rem; color: var(--on-dark-muted); }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; }

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.footer-inner a, .footer-inner span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  text-decoration: none;
}
.footer-inner svg { width: 1rem; height: 1rem; fill: var(--muted); flex-shrink: 0; }
.footer-inner a:hover { color: var(--ink); }

/* ── Tablet ≥ 48rem ──────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .phone { display: flex; }

  .hero { padding: 3.5rem 0 4.5rem; position: relative; overflow: hidden; }
  /* Copy stays in the grid's left column; the photo leaves the flow and
     floats against the hero's top/right/bottom edges, sliding under the
     heading (the left-fade mask keeps the text legible). */
  .hero-grid { grid-template-columns: minmax(0, 34rem) 1fr; align-items: center; }
  .hero-copy { position: relative; z-index: 1; }
  .hero-photo {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
  }

  .finder-wrap { margin-top: -3rem; }
  .finder { padding: 2rem; }
  .finder-fields {
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: end;
  }
  /* Variant arms drop the "When?" column, so the row is one narrower. */
  form.finder[data-variant]:not([data-variant="grouped_dates"]) .finder-fields {
    grid-template-columns: repeat(2, 1fr) auto;
  }
  /* guided's course cards are a stacked list, not a field: give them the
     whole row so they do not sit in a narrow column beside "Where?". */
  form.finder[data-variant="guided"] .finder-fields {
    grid-template-columns: 1fr auto;
  }
  form.finder[data-variant="guided"] .finder-field:has(.vs-course-cards) {
    grid-column: 1 / -1;
  }
  .btn-find { width: auto; }

  .corporate-inner {
    flex-direction: row;
    align-items: center;
    padding: 1.75rem 2rem;
  }
  .corp-copy { margin-right: auto; }

  .stats-grid { grid-template-columns: repeat(4, 1fr); }

  .cta-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 3rem;
  }

  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
  }
  .rto { margin-left: auto; }
}

/* ── Desktop ≥ 64rem ─────────────────────────────────────────────────── */

@media (min-width: 64rem) {
  .main-nav {
    display: flex;
    gap: 1.75rem;
    margin-right: auto;
  }
  .main-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .main-nav a:hover { color: var(--red); }
  .main-nav a.has-menu::after {
    content: "";
    display: inline-block;
    margin-left: 0.35rem;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
  }

  .main-nav { align-items: center; }

  /* Dropdown menus (hover + keyboard :focus-within; no JS). The nav item
     fills the header height so the hover path from link to panel has no
     dead zone (which would make the menu flicker shut). */
  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 4rem;
  }
  .nav-item .dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(30, 30, 30, 0.12);
    display: none;
    min-width: 15rem;
    z-index: 20;
  }
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown { display: block; }
  .nav-item .dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
  }
  .nav-item .dropdown a:hover { background: var(--bg-soft); color: var(--ink); }
  .nav-item .dropdown a small { color: var(--on-dark-dim); font-size: 0.72rem; }
  .dropdown-locations {
    columns: 2;
    column-gap: 0.25rem;
    min-width: 24rem;
  }
  .dropdown-locations a { break-inside: avoid; }

  .logo { margin-right: 2.5rem; }
  .nav-toggle-label, .mobile-nav { display: none; }
}

/* ── Workshop selector variants ──────────────────────────────────────── */

/* The native "When?" field stays in the form as the value submit reads — it
   is simply not the thing the visitor touches in a variant arm. Hidden from
   the first paint, keyed off the server-rendered data-variant rather than
   the class JavaScript adds later: an arm that only diverges once sessions
   load is identical to the control for the whole first impression, which is
   the part being tested.

   Hidden rather than removed, so the no-JavaScript path and the
   a-variant-threw path both fall back to the real control. */
form.finder[data-variant]:not([data-variant="grouped_dates"]) .finder-when { display: none; }
.finder-variant #f-when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* guided — course as tappable cards, replacing the select rather than
   sitting beside it. */
form.finder[data-variant="guided"] .finder-field:has(#f-course) > select { display: none; }
.vs-course-cards { display: grid; gap: 0.5rem; }
.vs-course-cards button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: inherit;
}
.vs-course-cards button:hover { border-color: var(--accent); }
.vs-course-cards button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vs-chev { color: var(--accent); font-weight: 800; }

/* Told plainly what is still needed, rather than an empty box. */
.vs-prompt { color: var(--muted); font-size: 0.9rem; padding: 0.35rem 0; }

.variant-stage { margin-top: 1.25rem; }
.vs-heading { font-size: 1rem; font-weight: 800; margin-bottom: 0.75rem; }

/* Session rows, shared by every arm. Tall enough to be a comfortable
   thumb target on a phone, which the native picker never was. */
.vs-stack { display: grid; gap: 0.5rem; }
/* A display value beats the UA's [hidden] rule, so every element the
   variants toggle has to opt back out explicitly. Without this the
   "other dates" list renders open and the disclosure does nothing. */
.variant-stage[hidden], .vs-stack[hidden], .vs-times[hidden] { display: none; }
.vs-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 3.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.vs-session:hover { border-color: var(--accent); }
.vs-session[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vs-session-main { display: flex; flex-direction: column; gap: 0.15rem; }
.vs-session-main strong { font-weight: 700; }
.vs-session-main small { color: var(--muted); font-size: 0.82rem; }
.vs-session b { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* fastest — one session carries the decision, the rest fold away. */
.vs-featured {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--tint);
}
.vs-next-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.vs-featured-when { font-size: 1.15rem; font-weight: 800; }
.vs-seats { color: var(--muted); font-size: 0.85rem; }
.vs-price { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.vs-action { margin-top: 0.5rem; width: 100%; }

/* browse_dates — days first, then the times on the chosen day. Scrolls
   horizontally, but the first day is selected on load so the times below
   are never an empty box waiting to be discovered. */
.vs-date-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.vs-day {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  min-width: 4.25rem;
  padding: 0.6rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.vs-day small { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.vs-day strong { font-size: 1.15rem; font-weight: 800; }
.vs-day span { font-size: 0.72rem; color: var(--muted); }
.vs-day[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); }
.vs-day[aria-pressed="true"] small,
.vs-day[aria-pressed="true"] span { color: var(--accent); }
/* Paging through the next few session days. */
.vs-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.vs-week-label { font-weight: 700; font-size: 0.9rem; }
.vs-week-step {
  padding: 0.35rem 0.7rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}
.vs-week-step:hover:not(:disabled) { border-color: var(--accent); }
.vs-week-step:disabled { color: var(--muted); opacity: 0.45; cursor: default; }

.vs-times { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.vs-selected { font-weight: 800; font-size: 0.95rem; }

/* Disclosures — "See other dates", "Show more dates". */
.vs-disclosure {
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  width: 100%;
}
.vs-disclosure:hover { border-color: var(--accent); }

/* ── QA layout switcher ──────────────────────────────────────────────── */

/* Preview-only, and deliberately unlike the site: a tester should never
   mistake it for part of the page they are reviewing. */
.qa-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 0.85rem;
  background: #14161a;
  color: #e6e9ee;
  font: 500 0.78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.25);
  /* Clear of the iOS home indicator. */
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}
.qa-meta { color: #8d97a5; }
.qa-meta strong { color: #e6e9ee; font-weight: 700; }
.qa-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.qa-links + .qa-links { margin-left: 0.5rem; }
.qa-bar a {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #2c313a;
  color: #cfd6e0;
  text-decoration: none;
  white-space: nowrap;
}
.qa-bar a:hover { border-color: #4a525f; }
.qa-bar a[aria-current="true"] { background: #e6e9ee; border-color: #e6e9ee; color: #14161a; font-weight: 700; }
.qa-index { margin-left: auto; color: #8d97a5 !important; }

/* The bar covers the foot of the page; give the content room to clear it. */
body:has(.qa-bar) { padding-bottom: 4.5rem; }

/* ── EXP-02 · booking entry position ─────────────────────────────────── */

/* The proof blocks moved below the finder. They keep the hero's centred
   mobile treatment, so the arm changes where the reassurance sits and
   nothing about how it reads. */
.hero-proof-below {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}
.hero-proof-below .trust-ratings { margin-top: 0; justify-content: center; }
.hero-proof-below .badges { margin-top: 1.25rem; }

@media (min-width: 48rem) {
  .hero-proof-below { text-align: left; }
  .hero-proof-below .trust-ratings { justify-content: flex-start; }
}

/* split_proof's single leading line sits tighter than the full stack. */
.trust-lead { margin-top: 1rem; }