/* ==========================================================================
   Valerie Woo Consulting — global stylesheet
   Design tokens are lifted from the live Duda site's computed styles so the
   rebuild matches it: see _baseline/live/dom/*.json for the source values.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Same stack as halfnester.com so the two brands read as one family:
   Cooper for headings, Quicksand for body, Sora for small labels. Quicksand
   and Sora are variable, so one file each covers every weight.

   These files are copied from the Half Nester site rather than re-sourced, so
   both brands render identically. NOTE: Cooper Lt BT is a Bitstream commercial
   face — see PROJECT.md, it needs a licence check.                            */
@font-face {
  font-family: 'Cooper';
  src: url('/fonts/cooper-600.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/quicksand-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Fallback metrics — keeps CLS at 0 while the web fonts load. */
@font-face {
  font-family: 'Quicksand Fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 103%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Cooper Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 97%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Palette — Duda theme variables --color_1..8 from the live site */
  --black: #000000;
  --coral: #ff9785;          /* --color_2  primary button / accent      */
  --coral-strong: #ff573a;   /* --color_8  active nav, emphasis         */
  --white: #ffffff;
  --blue: #67aee5;           /* --color_4  secondary button / accent    */
  --blue-pale: #b3d6f2;      /* --color_6                               */
  --blue-tint: #eff5f9;      /* --color_7  alternating section band     */
  --slate: #373e44;          /* --color_5                               */
  /* The old site's link blue is #0081e4, which is only 3.99:1 on white and
     fails AA for 16px text. This is the same hue 9% darker: 4.72:1, passes,
     and reads as the same blue. */
  --link: #0075cf;
  --btn-text: #000000;       /* black: AAA on coral (10.02:1) and blue (8.76:1).
                                White is 2.10:1 / 2.40:1 and fails AA.   */
  --ink: #000000;            /* body copy                               */
  --ink-soft: #666666;
  --rule: #e1e1e1;
  --grey-bar: #666666;       /* top announcement bar                    */
  --footer-bar: #93a5b0;     /* copyright strip                         */

  /* Type */
  --font-body: 'Quicksand', 'Quicksand Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Cooper', 'Cooper Fallback', Georgia, 'Times New Roman', serif;
  --font-label: 'Sora', system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 40px;
  --radius: 10px;
  --section-y: 72px;

  /* Elevation. Tinted with the brand slate rather than pure black so shadows
     sit in the palette instead of greying it. */
  --shadow-sm: 0 1px 2px rgba(55, 62, 68, .06), 0 2px 6px rgba(55, 62, 68, .06);
  --shadow-md: 0 2px 4px rgba(55, 62, 68, .06), 0 8px 20px rgba(55, 62, 68, .09);
  --shadow-lg: 0 6px 12px rgba(55, 62, 68, .08), 0 18px 40px rgba(55, 62, 68, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .38em;
  color: var(--black);
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .3em;
}
/* Space belongs ABOVE a heading that follows content, not below it — that is
   what made every section header look bottom-heavy. */
* + h2 { margin-top: 1.7em; }
* + h3 { margin-top: 1.5em; }
* + h4, * + h5, * + h6 { margin-top: 1.6em; }
/* A heading that opens a column or card needs no top gap. */
.card > :first-child, .container > :first-child, article > :first-child,
.split > div > :first-child, .blog-article > :first-child { margin-top: 0; }
/* A sub-heading directly under its heading stays tight to it. */
h1 + h2, h2 + h3, h3 + h4, h2 + h2, h4 + h2 { margin-top: .25em; }
h1 { font-size: 40px; }
h2 { font-size: 38px; }
h3 { font-size: 26px; }
h4 { font-size: 18px; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* An accent word inside a heading — the live site colours one phrase blue. */
.accent { color: var(--blue); }
.accent-coral { color: var(--coral-strong); }

/* --- Links ---------------------------------------------------------------- */
/* Content links use --link (the old site's blue, AA-compliant). Chrome, buttons
   and cards opt out because they carry their own colour. */
/* `:not(.btn)` is load-bearing. Without it these rules outrank `.btn` on
   specificity and repaint any button that sits inside a <p> — which is most of
   them — as an underlined blue link on a coral background. */
/* Scoped to main. Without it these rules also catch the footer's Quick Links
   (which are <li><a> inside a .container) and paint the whole list blue and
   underlined, when live has them black with only the current page coloured. */
.blog-article a:not(.btn),
main .container p a:not(.btn),
main .container li a:not(.btn),
.faq__a a:not(.btn) {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Keep a visible underline for anyone who prefers reduced motion — the
   animated version below only replaces it when motion is allowed. */
.blog-article a:not(.btn):hover,
main .container p a:not(.btn):hover,
main .container li a:not(.btn):hover,
.faq__a a:not(.btn):hover { color: var(--black); }
.post-card a, .nav a, .footer-links a { text-decoration: none; }

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tint { background: var(--blue-tint); }
.section--tight { padding-block: 48px; }
/* Rows rendered from the captured layout are each their own .section, so two
   adjacent ones stacked 72px + 72px of padding and the pages ran ~30% taller
   than live. Collapse the join. Sections that change background keep their
   full padding, because there the band edge needs the breathing room. */
.section + .section { padding-top: 26px; }
.section + .section--tint,
.section--tint + .section { padding-top: var(--section-y); }
.center { text-align: center; }
.lede { max-width: 860px; margin-inline: auto; }

.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split--wide { align-items: stretch; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--coral);
  color: var(--btn-text);
  font: 400 16px/1.35 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease);
}
.btn:hover {
  filter: brightness(.96);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.btn--blue { background: var(--blue); }
.btn--white { background: var(--white); }
.btn--outline {
  /* Coral-on-white is 2.06:1 and fails AA outright, so the label is ink and
     the coral carries the border instead. */
  background: transparent;
  border-color: var(--coral);
  color: var(--ink);
}
.btn--outline:hover { background: var(--coral); color: var(--btn-text); filter: none; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 900px) { .btn-row .btn { width: 100%; } }

/* --- Announcement bar ----------------------------------------------------- */
.topbar {
  background: var(--grey-bar);
  color: var(--white);
  text-align: center;
  padding: 4px 16px;
  font-size: 14px;
}
.topbar p { margin: 0; }
.topbar a { color: var(--white); text-decoration: underline; }

/* --- Header / nav --------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 60;
  background: var(--white);
}
.site-header--overlay {
  position: absolute;
  inset-inline: 0;
  z-index: 70;
  background: transparent;
}
/* The hero sits under the overlay header, so it must not open its own
   stacking context below it — hence z-index on the header, not the hero. */
.has-overlay-header .hero { margin-top: 0; }
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 24px var(--gutter);
}
.nav__drawer { display: contents; }
.nav__group { display: flex; align-items: center; gap: 26px; }
.nav__logo { flex: 0 0 auto; order: 2; }
.nav__logo img { width: 200px; height: auto; }
.nav__group--left  { order: 1; }
.nav__group--right { order: 3; }
.nav__link {
  position: relative;
  font-size: 16px;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--black);
  white-space: nowrap;
  padding-block: 6px;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width .25s var(--ease);
}
.nav__link:hover { color: var(--link); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-active::after { width: 0; }
.nav__link--mobile-only { display: none; }
.nav__link.is-active {
  font-weight: 700;
  color: var(--link);
  border-bottom: 1px solid currentColor;
}
/* On the transparent overlay header the nav sits on a photo. `:not(.is-active)`
   matters: without it this rule outranks .nav__link.is-active on specificity and
   silently repaints the active link black. */
.site-header--overlay .nav__link:not(.is-active) { color: var(--black); }
/* On a DARK photo hero the link blue is close to invisible — the active item
   and the dropdown toggle both went missing on /dental-CEO-Academy. Light text
   with a light underline reads against the scrim. */
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__link,
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__toggle { color: var(--white); }
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__link.is-active,
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__toggle.is-active {
  color: var(--white);
  border-bottom-color: var(--white);
}
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__link:hover,
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__toggle:hover { color: var(--blue-pale); }
/* The dropdown panel is white, so its own links stay dark. */
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__menu a { color: var(--black); }

/* The signature logo follows the nav: white mark wherever the links are white.
   The asset is pure #000 on transparent (verified — every opaque pixel is
   0,0,0), so brightness(0) invert(1) yields pure white and keeps the
   anti-aliasing. That beats shipping a second file, which would need either a
   duplicate <img> or a CSS background, and a background would cost the logo its
   alt text. */
.site-header--overlay:has(+ main > .hero--photo:first-child) .nav__logo img {
  filter: brightness(0) invert(1);
}
@media (max-width: 900px) {
  .site-header--overlay:has(+ main > .hero--photo:first-child) .nav__link,
  .site-header--overlay:has(+ main > .hero--photo:first-child) .nav__toggle { color: var(--black); }
  /* Mobile drops the overlay for a light band, so the mark goes back to black
     with the links. Without this the logo disappears into the band. */
  .site-header--overlay:has(+ main > .hero--photo:first-child) .nav__logo img {
    filter: none;
  }
}

/* Dropdown */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 16px;
  letter-spacing: .03em;
  color: inherit;
  cursor: pointer;
}
.nav__toggle.is-active {
  font-weight: 700;
  color: var(--link);
  border-bottom: 1px solid currentColor;
}
.nav__toggle svg { transition: transform .2s ease; }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  /* Animated instead of display:none so it eases in; visibility keeps it out
     of the tab order while closed. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility 0s linear .2s;
}
.nav__item.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav__menu a { transition: background .18s var(--ease), padding-left .18s var(--ease); }
.nav__menu a:hover { padding-left: 22px; }
.nav__menu a {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  text-decoration: none;
  color: var(--black);
}
.nav__menu a:hover { background: var(--blue-tint); }

/* Mobile */
.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--black);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 985px;
  padding-block: 213px 96px;
  color: var(--white);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .38);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  width: 100%;
}
.hero h1 { font-size: 50px; color: var(--white); min-height: 60px; }
.hero__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  margin: 0 0 1em;
  min-height: 32px;
  color: var(--white);
}
.hero p { color: var(--white); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.hero--photo {
  min-height: 640px;
  padding-block: 200px 88px;
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
}
.hero--photo::after { background: rgba(0, 0, 0, .34); }
.hero--photo .hero__copy { max-width: 620px; }
.hero__badge { max-width: 190px; margin-top: 18px; border-radius: 4px; }
.hero--photo h1 { font-size: 46px; }
.hero--photo li { color: var(--white); }
@media (max-width: 900px) {
  .hero--photo { min-height: 0; padding-block: 44px 48px; text-align: left; }
  .hero--photo h1 { font-size: 28px; }
  .hero--photo .hero__actions { justify-content: flex-start; }
}
.hero--plain {
  min-height: 0;
  padding-block: 72px 48px;
  color: var(--ink);
  background: var(--blue-tint);
}
.hero--plain::after { content: none; }
.hero--plain h1 { color: var(--black); }
.hero--plain p { color: var(--ink); }

/* --- Inner-page banner hero --------------------------------------------
   Every non-home page opens with a full-bleed banner and the title centred on
   it. The banners are light, so the overlay header's black nav reads fine and
   the H1 uses the slate from Duda's --color_5. Height is set per page via
   --hero-h because the live banners vary from 359px to 717px. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-h, 560px);
  padding: 200px var(--gutter) 60px;
  background-color: var(--blue-pale);
  background-size: cover;
  background-position: var(--hero-pos, 50% 50%);
  background-repeat: no-repeat;
  text-align: center;
}
.site-header:not(.site-header--overlay) + main .page-hero {
  padding-top: 60px;
}
.page-hero h1 {
  margin: 0;
  color: var(--slate);
  font-size: 52px;
  line-height: 1.15;
}
.page-hero p {
  margin: .6em auto 0;
  max-width: 760px;
  color: var(--slate);
}
@media (max-width: 900px) {
  .page-hero {
    min-height: 0;
    padding: 40px var(--gutter);
    background-position: 50% 50%;
  }
  .site-header:not(.site-header--overlay) + main .page-hero {
  padding-top: 60px;
}
.page-hero h1 { font-size: 28px; }
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease),
              border-color .28s var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.card--plain:hover { box-shadow: none; transform: none; }
.card h3 { margin-bottom: 0; }
.card .btn { margin-top: auto; }
.card--plain { border: 0; padding: 0; }

/* Icon list rows (the "What We Offer" pattern) */
.offer { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; }
.offer + .offer { margin-top: 40px; }
.offer__icon { width: 40px; height: 40px; color: var(--black); }
.offer h3 { font-size: 22px; margin-bottom: .35em; }
.offer a { color: var(--link); }

/* --- Curriculum ----------------------------------------------------------
   A 12-month programme flat on the page is a wall of text. Each quarter gets a
   titled band with its overview, and its three months become cards, so the year
   can be scanned in a few seconds and read where it matters.               */
.curriculum .lede { margin-bottom: 8px; }
.quarter { margin-top: 56px; }
.quarter:first-of-type { margin-top: 40px; }
.quarter__head {
  border-left: 3px solid var(--coral);
  padding: 4px 0 4px 22px;
  margin-bottom: 26px;
  max-width: 900px;
}
.quarter__label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-strong);
  margin-bottom: 6px;
}
.quarter__head h3 { margin: 0 0 .5em; }
.quarter__head p { color: var(--ink-soft); margin-bottom: 0; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.month-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease),
              border-color .28s var(--ease);
}
.month-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.month-card .offer__icon {
  width: 26px; height: 26px;
  color: var(--coral-strong);
  flex: 0 0 auto;
}
.month-card__label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.month-card h4 { margin: 0; font-size: 17px; }
.month-card p { font-size: .94rem; line-height: 1.6; margin: 0; color: var(--ink-soft); }

@media (max-width: 980px) { .month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .month-grid { grid-template-columns: 1fr; } }

/* --- Media ---------------------------------------------------------------- */
/* Do NOT force an aspect ratio here. Several of these clips are 4:3 or
   portrait, and boxing them into 16:9 pillarboxed them with black bars. Letting
   the file set its own height matches how the live site sizes each one. */
.video {
  width: 100%;
  /* Live never runs a video wider than ~580px. Without a cap, one sitting in a
     single-column section stretched the full 1200px container and dominated
     the page. A column in a split or grid constrains it further on its own. */
  max-width: 620px;
  height: auto;
  border-radius: 6px;
  background: #000;
  box-shadow: var(--shadow-md);
}
.hero .video { max-width: 482px; }
.media-frame { border-radius: var(--radius); overflow: hidden; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  border-radius: 14px;
  padding: 48px;
  color: var(--black);
  box-shadow: var(--shadow-md);
  background: linear-gradient(105deg, #8ea6b4 0%, #b9c8d1 45%, #93a8b6 100%);
}
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { margin-bottom: 0; max-width: 640px; }

/* --- FAQ / accordion ------------------------------------------------------ */
.faq { max-width: 900px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--rule); }
/* The question stays a real heading (live renders them as H4) with the button
   inside it, so the accordion does not cost the page 10 headings. */
.faq__h { margin: 0; font-family: var(--font-body); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: none;
  border: 0;
  padding: 20px 0;
  font: 700 18px/1.4 var(--font-body);
  color: var(--black);
  text-align: left;
  cursor: pointer;
}
.faq__h .faq__q { font-size: 18px; }
.faq__q svg { flex: 0 0 auto; transition: transform .2s ease; }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
/* Collapsed styling applies ONLY once components.js has marked the list ready.
   Without that guard a visitor with no JS gets ten questions and no answers,
   with no control that opens them. Default state is fully readable. */
.faq__a { padding-bottom: 22px; }
.faq.js-ready .faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease), opacity .25s var(--ease);
  opacity: 0;
  padding-bottom: 0;
}
.faq.js-ready .faq__a > * { overflow: hidden; min-height: 0; }
.faq.js-ready .faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 22px;
}
/* The toggle is only a control when it actually toggles. */
.faq:not(.js-ready) .faq__q { cursor: default; }
.faq:not(.js-ready) .faq__q svg { display: none; }
.faq__q:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.faq__item { transition: background .25s var(--ease); }
.faq__item.is-open { background: rgba(103, 174, 229, .05); }

/* --- Forms ---------------------------------------------------------------- */
.form-card {
  background: #cfdae2;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
input[type='text'], input[type='email'], input[type='tel'], input[type='url'],
input[type='number'], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #f0f0f0;
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
textarea { min-height: 130px; resize: vertical; }
.choice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.choice input { width: auto; margin-top: 5px; }
.choice label { margin: 0; font-weight: 400; font-size: 15px; }
.form-note { font-size: 13px; color: var(--ink-soft); }

.form-success { display: none; text-align: center; padding: 2rem 0; }
.form-success.show { display: block; }
.form-success .success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--coral);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: var(--white);
}
.form-error {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fdecea;
  border: 1px solid #f5b5ae;
  color: #8a2417;
  font-size: 14px;
}
.form-error.show { display: block; }
.grecaptcha-badge { visibility: hidden; }

/* --- Blog ----------------------------------------------------------------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.filter-btn {
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  font: 400 14px/1.3 var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.filter-btn.active { background: var(--coral); border-color: var(--coral); color: var(--btn-text); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease),
              border-color .28s var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
/* flex: 0 0 auto + overflow:hidden are load-bearing. As a plain flex item the
   thumb takes its base size from the image's intrinsic ratio, so portrait
   thumbnails grew to 565px tall and broke the grid; aspect-ratio alone lost. */
.post-card-thumb {
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-tint);
}
.post-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-excerpt {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.post-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.post-card-cat {
  align-self: flex-start;
  font-family: var(--font-label);
  letter-spacing: .04em;
  background: var(--blue-tint);
  color: var(--slate);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
}
.post-card-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.25; }
.post-card-meta { font-size: 13px; color: var(--ink-soft); }

.blog-post-hero { max-width: 1100px; margin-inline: auto; padding: 56px var(--gutter) 24px; }
.blog-post-hero img { width: 100%; max-height: 450px; object-fit: cover; border-radius: 12px; margin-bottom: 2rem; }
.blog-post-hero-content { max-width: 900px; }
.blog-post-cat {
  display: inline-block;
  font-family: var(--font-label);
  letter-spacing: .04em; padding: .25rem .9rem; border-radius: 999px;
  background: var(--blue-tint); color: var(--slate);
  font-size: .8rem; font-weight: 600; margin-bottom: 1rem;
}
.blog-post-hero-content h1 { font-size: 2.6rem; line-height: 1.2; margin-bottom: 1.25rem; }
.post-deck {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: -.4rem 0 1.1rem;
  max-width: 780px;
}
.post-meta { font-size: .95rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; color: var(--ink-soft); }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; }

.blog-post-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  max-width: 1100px;
  margin-inline: auto;
  padding: 2rem var(--gutter) 72px;
}
.blog-article { font-size: 1.05rem; line-height: 1.75; }
.blog-article h2 { font-size: 1.7rem; margin: 2.5rem 0 1rem; }
.blog-article h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.blog-article p { margin-bottom: 1.25rem; }
.blog-article ul, .blog-article ol { margin: 0 0 1.25rem 1.5rem; }
.blog-article img { border-radius: 8px; margin: 1.5rem 0; }
.blog-article blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--coral);
  font-style: italic;
}
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card { border-radius: 12px; padding: 1.25rem; border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.sidebar-head { font-weight: 700; margin-bottom: .75rem; }
.sidebar-body { display: flex; flex-direction: column; }
.sidebar-link { display: block; padding: .5rem 0; font-size: .9rem; border-bottom: 1px solid rgba(0,0,0,.06); text-decoration: none; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-cta { border-radius: 12px; padding: 1.5rem; text-align: center; background: var(--blue-tint); }
.sidebar-cta-title { font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { padding-block: 64px 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 48px;
}
.footer-logo { width: 190px; margin-bottom: 18px; }
.footer-badge { width: 190px; margin-bottom: 20px; }
.site-footer h3 { font-size: 26px; }
.footer-contact { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; align-items: center; gap: 12px; }
.footer-contact a { color: var(--ink); }
.footer-contact a:hover { color: var(--link); }
.footer-contact svg { color: var(--blue); flex: 0 0 auto; }
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { color: var(--blue); }
.footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; text-align: center; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--link); }
.footer-links .is-active { color: var(--link); font-weight: 700; }
.footer-legal { margin-top: 22px; font-size: 15px; }
.footer-legal a { color: var(--link); }
.footer-bar {
  margin-top: 56px;
  background: var(--footer-bar);
  color: var(--white);
  text-align: center;
  padding: 18px 16px;
  font-size: 14px;
}
.footer-bar a { color: var(--white); font-weight: 700; }


/* --- Landing page bits ---------------------------------------------------- */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue);
  margin-bottom: .4em;
}
.ticks { list-style: none; margin: 0 0 1.2em; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: .7em;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--coral-strong);
  border-bottom: 2px solid var(--coral-strong);
  transform: rotate(-45deg);
}

/* Images in a two-up gain the same quiet lift as cards. */
.split img, .grid img { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.split > div:hover > img, .grid > div:hover > img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Content links draw their underline in on hover. */
main .container p a:not(.btn), main .container li a:not(.btn), .blog-article a:not(.btn) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .28s var(--ease), color .2s var(--ease);
  text-decoration: none;
  padding-bottom: 1px;
}
main .container p a:not(.btn):hover, main .container li a:not(.btn):hover,
.blog-article a:not(.btn):hover { background-size: 100% 1px; }

/* --- Motion ---------------------------------------------------------------
   Scroll reveal. The hidden state is scoped to `.reveal`, a class only
   components.js adds — so if the script fails or never runs, every element
   renders normally instead of staying invisible. The hero is deliberately
   excluded: animating the LCP element delays it. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Children of a revealed grid come in one after another. */
.reveal-stagger > * { transition-delay: var(--d, 0ms); }

/* --- Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--white); color: var(--black);
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { gap: 18px; }
  .nav__group { gap: 16px; }
  .nav__link, .nav__toggle { font-size: 15px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --section-y: 52px; }
  h1 { font-size: 28px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }

  /* Duda drops the announcement bar on mobile — the link is in the menu. */
  .topbar { display: none; }

  .nav {
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 12px var(--gutter);
  }
  /* Logo centred, burger hard right — matches the live mobile header. */
  .nav__burger { display: inline-flex; order: 3; margin-left: auto; }
  .nav__logo { order: 2; margin-inline: auto; }
  .nav__logo img { width: 140px; }
  .nav__link--mobile-only { display: block; }
  .nav__drawer {
    display: none;
    order: 4;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0 16px;
  }
  .nav.is-open .nav__drawer { display: flex; }
  .nav__group { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__link, .nav__toggle {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--rule);
    justify-content: space-between;
  }
  .nav__link.is-active { border-bottom-color: var(--coral-strong); }
  .nav__menu {
    position: static;
    transform: none;
    display: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 0 16px;
  }
  .nav__item.is-open .nav__menu { display: block; }

  /* On mobile the live site drops the overlay and gives the header its own
     blue-grey band above the hero (sampled from the live mobile capture).
     Left as an overlay it would print the nav straight over the hero copy. */
  .site-header--overlay {
    position: relative;
    background: linear-gradient(90deg, #879aa5 0%, #b9c8d1 50%, #879aa5 100%);
  }
  .site-header--overlay .nav.is-open { background: var(--white); }

  .hero { min-height: 0; padding-block: 40px 48px; text-align: center; }
  .site-header--overlay + main .hero { padding-top: 40px; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 28px; min-height: 0; }
  .hero__sub { min-height: 0; font-size: 20px; }
  .hero__actions { justify-content: center; }
  .video { margin-inline: auto; }

  .split, .grid--2, .grid--3, .blog-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 32px 24px; text-align: left; }
  .blog-post-wrap { grid-template-columns: 1fr; }
  .blog-post-hero-content h1 { font-size: 1.9rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-links { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Show reveal targets outright rather than transitioning them fast. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .card:hover, .post-card:hover, .btn:hover { transform: none !important; }
  .post-card:hover .post-card-thumb img { transform: none !important; }
  .split > div:hover > img, .grid > div:hover > img { transform: none !important; }
  .nav__menu a:hover { padding-left: 18px !important; }
  main .container p a:not(.btn), main .container li a:not(.btn),
  .blog-article a:not(.btn) {
    background-image: none !important;
    text-decoration: underline !important;
  }
  .faq__a { transition: none !important; }
}

/* --- Split hero (copy | video) -------------------------------------------- */
/* Duda builds some programme heroes as two columns. Flattened they stacked the
   player below the copy, which on a 640px-tall hero pushed it under the fold. */
.hero--split .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
}
.hero--split .hero__copy { max-width: none; }
.hero--split .hero__media { min-width: 0; }
.hero--split .hero__media .video,
.hero--split .hero__media img {
  width: 100%;
  max-width: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .hero--split .container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* --- Read More ------------------------------------------------------------ */
/* Duda collapsed this copy behind a toggle; flat it was a stray label sitting
   over a wall of text. */
.readmore { margin-top: 8px; }
.readmore > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--link);
  padding: 10px 0;
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.readmore[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.readmore[open] > summary { color: var(--ink-soft); }
.readmore__body { animation: readmore-in .35s var(--ease) both; }
@keyframes readmore-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .readmore__body { animation: none; }
}

/* --- Icon cards ----------------------------------------------------------- */
.icard-grid {
  display: grid;
  gap: 28px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.icard-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icard-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icard {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.icard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-pale);
}
.icard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--coral-strong);
  flex: none;
}
.icard__icon .ui-icon { width: 26px; height: 26px; }
.icard h3, .icard h4 { font-size: 21px; margin: 0 0 .5em; }
.icard p { color: var(--ink-soft); margin-bottom: .9em; }
.icard p:last-child { margin-bottom: 0; }
.icard .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) {
  .icard-grid, .icard-grid--2, .icard-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Course modules ------------------------------------------------------- */
.modules .container > h2 { margin-bottom: .4em; }
.modules .container > p { max-width: 70ch; color: var(--ink-soft); }
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
  counter-reset: module;
}
.module-card {
  position: relative;
  padding: 32px 32px 30px 92px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-pale);
}
.module-card__n {
  position: absolute;
  top: 28px;
  left: 30px;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1;
  color: var(--blue-pale);
}
.module-card__label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-strong);
  margin-bottom: 6px;
}
.module-card h3 { font-size: 22px; margin: 0 0 .5em; }
.module-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
@media (max-width: 900px) {
  .module-grid { grid-template-columns: minmax(0, 1fr); }
  .module-card { padding: 26px 24px 24px 76px; }
  .module-card__n { top: 24px; left: 24px; font-size: 28px; }
}

/* --- Download callout ----------------------------------------------------- */
/* A CTA Duda stranded in its own row, folded back under the copy it belongs
   to. Boxed so it still reads as an offer, not a stray heading. */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--blue-tint);
  border-radius: var(--radius);
}
.callout:only-child { margin-top: 0; }
.callout__art {
  width: 120px;
  height: auto;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}
.callout__body > :first-child { margin-top: 0; }
.callout__body h2, .callout__body h3, .callout__body h4 {
  font-size: 21px;
  margin: 0 0 .6em;
}
.callout__body p { color: var(--ink-soft); }
.callout__body .btn { margin-top: 4px; }
@media (max-width: 700px) {
  .callout { grid-template-columns: minmax(0, 1fr); }
  .callout__art { width: 96px; }
}

/* --- Banner hero with the copy in the right half -------------------------- */
/* The keynote banner is shot with Valerie on the left and empty frame beside
   her — centred copy landed on top of her. */
.page-hero--left,
.page-hero--right { text-align: left; justify-content: flex-start; }
.page-hero--left .container,
.page-hero--right .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  width: 100%;
}
.page-hero--right .page-hero__copy { grid-column: 2; }
.page-hero--left .page-hero__copy { grid-column: 1; }
.page-hero--left .page-hero__copy p,
.page-hero--right .page-hero__copy p { margin-left: 0; max-width: 52ch; }
.page-hero--left .page-hero__copy > p:first-of-type,
.page-hero--right .page-hero__copy > p:first-of-type {
  font-family: var(--font-head);
  font-size: 23px;
  line-height: 1.3;
  margin-top: .5em;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 900px) {
  .page-hero--left .container,
  .page-hero--right .container { grid-template-columns: minmax(0, 1fr); }
  .page-hero--left .page-hero__copy,
  .page-hero--right .page-hero__copy { grid-column: 1; }
  .page-hero--left .page-hero__copy > p:first-of-type,
  .page-hero--right .page-hero__copy > p:first-of-type { font-size: 19px; }
}

/* --- Info box (booking contact) ------------------------------------------- */
.info-box {
  margin-top: 32px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.info-box h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700;
               margin: 0 0 .5em; }
.info-box p { margin: 0 0 .35em; }
.info-box p:last-child { margin-bottom: 0; }
.info-box a { color: var(--link); }

/* --- Photo with an overlaid detail card ----------------------------------- */
.media-overlay { position: relative; align-self: stretch; min-height: 420px; }
.media-overlay > img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.media-overlay__card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 24px 26px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.media-overlay__card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 .6em;
}
.media-overlay__card ul { margin: 0 0 .9em; padding-left: 20px; }
.media-overlay__card li { margin-bottom: .3em; }
.media-overlay__card a { color: var(--link); font-weight: 600; }
@media (max-width: 900px) {
  .media-overlay, .media-overlay > img { min-height: 340px; }
  .media-overlay__card { left: 14px; right: 14px; bottom: 14px; padding: 18px 20px; }
}

/* --- Multi-step forms ----------------------------------------------------- */
.step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;                 /* fieldset defaults to min-content and breaks grid children */
  animation: step-in .3s var(--ease) both;
}
.step[hidden] { display: none; }
.step > legend {
  padding: 0;
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}
.step__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.step__nav .btn { flex: 1 1 auto; }
@keyframes step-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

.btn--ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, .22);
  color: var(--ink);
  flex: 0 0 auto;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .55); filter: none; }

.stepbar { margin-bottom: 26px; }
.stepbar__track {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
  margin: 0 0 14px;
}
.stepbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--coral-strong);
  transition: width .35s var(--ease);
}
.stepbar__dots {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stepbar__dot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .55;
  transition: opacity .3s var(--ease);
}
.stepbar__dot span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 700;
}
.stepbar__dot.is-done { opacity: 1; }
.stepbar__dot.is-done span { background: var(--coral); color: var(--btn-text); }

.label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.choice-pill:hover { background: rgba(255, 255, 255, .95); }
.choice-pill input { width: auto; margin: 0; accent-color: var(--coral-strong); }
.choice-pill:has(input:checked) {
  background: var(--white);
  border-color: var(--coral-strong);
  font-weight: 600;
}
.choice-pill:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 700px) {
  .stepbar__dot { font-size: 0; gap: 0; }
  .stepbar__dot span { font-size: 12px; }
  .stepbar__dots { justify-content: flex-start; gap: 10px; }
  .step__nav .btn { width: 100%; }
}