/* ==========================================================================
   Dr. Stephen T. Doyle — site stylesheet
   --------------------------------------------------------------------------
   One file, no build step, no preprocessor.

   ALL brand colours live in the :root block below. To retune the palette to
   match the book jacket or printed collateral, change only those values —
   everything else reads from them.

   Contents:
     1.  Design tokens
     2.  Reset
     3.  Accessibility primitives
     4.  Layout primitives
     5.  Buttons
     6.  Prose
     7.  Header + navigation
     8.  Mobile menu
     9.  Footer
     10. Hero
     11. Section headings
     12. Book card
     13. Hub cards
     14. Testimonials
     15. Reviews
     16. Video embeds
     17. Chapters
     18. Page headers + breadcrumbs
     19. Forms
     20. CTA
     21. 404
     22. Motion system
   ========================================================================== */

/* -- 1. Design tokens ----------------------------------------------------- */

:root {
  /* Colour */
  --navy: #17384f;
  --navy-deep: #0f2837;
  --navy-tint: #2c536e;
  --gold: #b8842b;
  --gold-deep: #97691d;
  --gold-soft: #e8c87a;

  --ink: #22303c;
  --ink-soft: #55636f;
  --paper: #ffffff;
  --paper-warm: #f7f4ee;
  --paper-deep: #efe9de;
  --line: #e2dcd1;

  --focus: #1f6feb;
  --error: #b3261e;
  --error-bg: #fdeceb;
  --success: #1e7d43;
  --success-bg: #e7f4ec;

  /* Type — system stacks only: no webfont request, no flash of unstyled text */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
    'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.65rem, 1.38rem + 1.3vw, 2.45rem);
  --step-4: clamp(1.95rem, 1.5rem + 2.2vw, 3.25rem);

  /* Editorial display sizes — rev. 2. --step-hero is reserved for the
     homepage hero H1 only; --step-feature is for in-column feature
     headlines (e.g. .feature-split__title) where a full hero size would
     wrap too aggressively in a narrower column. */
  --step-hero: clamp(2.75rem, 1.8rem + 5.2vw, 5.75rem);
  --step-feature: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);

  /* Space and shape */
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.15rem, 0.8rem + 1.8vw, 2.5rem);
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  /* Reserved for page-opening compositions (currently: the hero) — a
     deliberately bigger pause than ordinary section rhythm. */
  --section-y-lg: clamp(4.5rem, 3rem + 7vw, 9rem);

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgb(23 56 79 / 0.06), 0 2px 8px rgb(23 56 79 / 0.05);
  --shadow-md: 0 2px 6px rgb(23 56 79 / 0.07), 0 12px 28px rgb(23 56 79 / 0.09);

  --header-h: 4.5rem;
}

/* -- 2. Reset ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--navy);
}

p, li { text-wrap: pretty; }

a {
  color: var(--navy);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover { color: var(--gold-deep); }

/* -- 3. Accessibility primitives ------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus { top: 0.5rem; color: #fff; }
.skip-link:hover { color: var(--gold-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- 4. Layout primitives ------------------------------------------------- */

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--warm { background: var(--paper-warm); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
/* Extra breathing room where a page-hero hands off straight into content
   with no intermediate heading (e.g. Interviews) — reuses the hero's own
   pause token rather than inventing a one-off value. */
.section--lead-in { padding-top: var(--section-y-lg); }

.grid { display: grid; gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }

@media (min-width: 40rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -- 5. Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;              /* keeps a 44px tap target */
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.btn:hover { transform: translateY(-3px); }

.btn--primary { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn--primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn--secondary { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }

.btn--on-dark { background: transparent; border-color: var(--gold-soft); color: var(--gold-soft); }
.btn--on-dark:hover { background: var(--gold-soft); color: var(--navy-deep); }

.btn:disabled, .btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* -- 6. Prose ------------------------------------------------------------- */

.prose { max-width: 64ch; }
.prose > * + * { margin-top: 1.05em; }
.prose--center { margin-inline: auto; text-align: center; }

/* Underline-draw: a tasteful line-in effect for inline links inside running
   copy, where the header/footer/nav's own underline-free treatments don't
   apply. Built from a background gradient so nothing but background-size
   (a compositor-friendly property) animates. */
.prose a,
.contact__note a,
.field__hint a,
.page-head__lede a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  text-decoration: none;
  transition: background-size 0.25s ease, color 0.18s ease;
}

.prose a:hover,
.contact__note a:hover,
.field__hint a:hover,
.page-head__lede a:hover {
  background-size: 100% 1px;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.signoff {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--gold-deep);
}

/* -- 7. Header + navigation ----------------------------------------------- */

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-block: 0.5rem;
  text-decoration: none;
}

.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}

.brand__role {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.brand:hover .brand__name { color: var(--gold-deep); }

.primary-nav { display: none; }

@media (min-width: 62rem) {
  .primary-nav { display: block; }
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav__list > li { position: relative; }

.primary-nav__link {
  display: block;
  padding: 0.6rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

.primary-nav__link.is-active { border-bottom-color: var(--gold); }

/* Submenus open on hover AND on keyboard focus — no JavaScript involved. */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.15s;
}

.has-children:hover .submenu,
.has-children:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}

.submenu a:hover,
.submenu a:focus-visible { background: var(--paper-warm); color: var(--gold-deep); }

/* -- 8. Mobile menu ------------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 62rem) {
  .menu-toggle, .menu-panel { display: none !important; }
}

.menu-toggle__bars { position: relative; display: block; width: 1.15rem; height: 0.7rem; }

.menu-toggle__bars span,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s ease;
  content: '';
}

.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars span { top: 50%; margin-top: -1px; }
.menu-toggle__bars::after { bottom: 0; }

.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { transform: translateY(0.34rem) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars span { opacity: 0; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after { transform: translateY(-0.34rem) rotate(-45deg); }

.menu-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem var(--gutter) 3rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.menu-panel[hidden] { display: none; }

.menu-panel__list, .menu-panel__sublist { list-style: none; margin: 0; padding: 0; }
.menu-panel__list > li + li { border-top: 1px solid var(--line); }

.menu-panel__link {
  display: block;
  padding: 0.95rem 0.25rem 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
}

.menu-panel__link.is-active { color: var(--gold-deep); }

.menu-panel__sublist {
  padding: 0 0 0.85rem 0.9rem;
  margin-left: 0.25rem;
  border-left: 2px solid var(--line);
}

.menu-panel__sublist a {
  display: block;
  padding: 0.5rem 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.menu-panel__sublist a:hover { color: var(--gold-deep); }

/* -- 9. Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--navy-deep);
  color: #d3dde4;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) 1.5rem;
  font-size: var(--step--1);
}

.site-footer__grid { display: grid; gap: 2.25rem; }

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .site-footer__grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 3rem; }
}

.site-footer__heading {
  margin-bottom: 0.9rem;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer a { color: #d3dde4; text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }

.credentials__name {
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: #fff;
}

.credentials__list { display: grid; gap: 0.7rem; margin: 0; }
.credentials__item dt { font-weight: 700; color: var(--gold-soft); letter-spacing: 0.05em; }
.credentials__item dd { margin: 0; color: #b6c4ce; }

.quick-links ul { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }
.quick-links a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-contact address {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-style: normal;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.72rem;
  color: #93a5b2;
}

.site-footer__legal p { margin: 0; }

/* Social icons */
.social { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.social--light a { color: var(--navy); }
.social--light a:hover { background: var(--navy); color: #fff; }
.social--dark a { color: #9fb0bc; }
.social--dark a:hover { background: var(--gold-soft); color: var(--navy-deep); border-color: var(--gold-soft); }

/* -- 10. Hero ------------------------------------------------------------- */

.hero {
  padding-block: var(--section-y-lg);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: 0.65fr 1.35fr; }
}

@media (min-width: 70rem) {
  .hero__inner {
    grid-template-columns: minmax(34rem, 0.9fr) minmax(36rem, 1.1fr);
    column-gap: clamp(4rem, 6vw, 8rem);
  }
}

.hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.hero__title {
  margin-top: 0.6rem;
  /* Deliberately smaller than --step-hero (used by page-head titles
     elsewhere) — sized specifically so four short lines, including
     "Educational Coach.", fit cleanly without wrapping at desktop widths. */
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
}

/* Each hero line is its own block for controlled stacking. On mobile
   the lines stack naturally; on desktop the tight line-height and
   display:block keeps four clean rows — all flush-left. */
.hero__title-line {
  display: block;
}

/* Gold period: each line's trailing dot is recolored via a data-attribute
   driven ::after, keeping the editorial palette consistent. */
.hero__title-line[data-p]::after {
  content: attr(data-p);
  color: var(--gold);
}

@media (min-width: 70rem) {
  .hero__title-line { white-space: nowrap; }
}

.hero__lede {
  margin-top: 1.5rem;
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__media { display: flex; justify-content: center; }

@media (min-width: 56rem) {
  .hero__media { justify-content: flex-end; }
}

@media (min-width: 70rem) {
  .hero__media {
    justify-self: end;
    transform: translateX(clamp(2rem, 4vw, 5rem));
  }
}

.hero__media img {
  width: 100%;
  max-width: clamp(19rem, 7rem + 30vw, 40rem);
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgb(23 56 79 / 0.18));
}

/* -- 11. Section headings ------------------------------------------------- */

.heading { display: flex; flex-direction: column; gap: 0.65rem; }
.heading--center { align-items: center; text-align: center; }
.heading--left { align-items: flex-start; text-align: left; }

.heading__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.heading__title { margin: 0; font-size: var(--step-3); }

.heading__subtitle { font-weight: 400; font-style: italic; color: var(--ink-soft); }

/* Signature device: a short brass rule interrupted by a small diamond. */
.heading__rule {
  position: relative;
  display: block;
  width: 5.5rem;
  height: 1px;
  margin-top: 0.35rem;
  background: var(--gold);
}

.heading__rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* -- 12. Book card -------------------------------------------------------- */

.book-card { display: grid; gap: clamp(1.75rem, 1rem + 3.5vw, 3.25rem); align-items: center; }

@media (min-width: 56rem) {
  .book-card:not(.book-card--text-only) { grid-template-columns: 0.95fr 1.05fr; }
  .book-card--reverse .book-card__media { order: 2; }
}

.book-card--text-only .book-card__body { max-width: 44rem; margin-inline: auto; text-align: center; }
.book-card--text-only .book-card__rule { margin-inline: auto; }
.book-card--text-only .book-card__actions { justify-content: center; }

.book-card__media { display: flex; justify-content: center; }

.book-card__media img {
  width: 100%;
  max-width: clamp(20rem, 10rem + 18vw, 30rem);
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgb(23 56 79 / 0.15));
}

.book-card__title { margin: 0; font-size: var(--step-3); }
.book-card__subtitle { font-style: italic; font-weight: 400; color: var(--ink-soft); }

.book-card__rule {
  display: block;
  width: 4rem;
  height: 2px;
  margin: 1.15rem 0;
  background: var(--gold);
}

.book-card__body p + p { margin-top: 1rem; }

.book-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.book-card__actions:not(:empty) { margin-top: 1.75rem; }

/* -- 12b. Feature split ----------------------------------------------------
   Editorial two-column pairing (rev. 2) — used where two related ideas need
   to sit side by side without card chrome. A single hairline rule does the
   separating a bordered card would otherwise do. */

.feature-split {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

@media (min-width: 58rem) {
  .feature-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-split__col + .feature-split__col {
    padding-left: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  }
}

/* Signature scroll effect: a quiet rule between the Book and About columns
   that fills gold as the visitor scrolls through the section, tying the two
   halves of the story together. See "5. Signature scroll" in motion.js —
   --fill is a 0–1 scroll fraction set on scroll/resize via requestAnimationFrame. */
.feature-split__rule { display: none; }

@media (min-width: 58rem) {
  .feature-split__rule {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
  }

  .feature-split__rule::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleY(var(--fill, 0));
    transform-origin: top;
  }
}

.feature-split__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.feature-split__title {
  margin-top: 0.5rem;
  font-size: var(--step-feature);
  line-height: 1.05;
}

/* Two-line heading control for the About teaser. Both lines are block-
   level so they stack vertically. The heading is sized and the column
   is wide enough that "A Lifelong Commitment" fits on one line naturally;
   no nowrap or overflow tricks needed. On mobile the spans stack freely. */
.feature-split__title-line1,
.feature-split__title-line2 {
  display: block;
}

.feature-split__body { margin-top: 1.25rem; }
.feature-split__body > * + * { margin-top: 1.05em; }

.feature-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* -- 13. Hub cards -------------------------------------------------------- */

.hub { margin: 2.5rem 0 0; padding: 0; list-style: none; }

.hub__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.75rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-align: center;
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.hub__card:hover, .hub__card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  color: var(--gold-deep);
}

.hub__card img { width: 4.5rem; height: 4.5rem; }

/* -- 14. Testimonials ----------------------------------------------------- */

.testimonial-grid {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.testimonial-grid__action { margin-top: 2.25rem; text-align: center; }

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 2.4rem 1.75rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease;
}

.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 0.15rem;
  left: 1.15rem;
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
  pointer-events: none;
}

.testimonial__quote { flex: 1; margin: 0; overflow-wrap: break-word; }
.testimonial__quote p { margin: 0; line-height: 1.7; }

/* Homepage cards clamp so the grid stays even; the testimonials page does not. */
.testimonial--compact .testimonial__quote p {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial__source {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.testimonial__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
}

.testimonial__line {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.testimonial__link {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* -- 15. Reviews ---------------------------------------------------------- */

.reviews { display: grid; gap: 1.75rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

@media (min-width: 52rem) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.review {
  height: 100%;
  padding: 2rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease;
}

.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.review__headline { margin-bottom: 0.9rem; font-size: var(--step-1); }
.review__body > * + * { margin-top: 0.9rem; }

.review__source {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.review__name { font-family: var(--font-display); font-weight: 700; color: var(--navy); }

.review__line {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* -- 16. Video embeds ----------------------------------------------------- */

.video { margin: 0; }

/* Fixed 16:9 box reserves space before load — no layout shift, no overflow. */
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--navy-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.video__frame iframe,
.video__frame video,
.video__button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__button { display: grid; place-items: center; padding: 0; background: transparent; }

.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease;
}

.video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding-left: 0.2rem;
  border-radius: 50%;
  background: rgb(23 56 79 / 0.85);
  color: #fff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.video__button:hover .video__poster { transform: scale(1.03); opacity: 0.85; }
.video__button:hover .video__play,
.video__button:focus-visible .video__play { background: var(--gold); transform: scale(1.06); }

.video__caption {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}

.video__caption a { color: var(--ink-soft); }
.video__caption a:hover { color: var(--gold-deep); }

/* Fallback shown if a self-hosted MP4 referenced in content/book.js is ever missing at build time. */
.video__frame--pending {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #e7ebee, #e7ebee 12px, #dfe4e8 12px, #dfe4e8 24px);
  border: 2px dashed #b9c2cb;
}

.video__pending {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 1rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-soft);
}

.video__pending strong { font-size: 0.95rem; color: var(--navy); }

/* -- 17. Chapters --------------------------------------------------------- */

.chapter__inner { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; }

@media (min-width: 56rem) {
  .chapter__inner { grid-template-columns: 0.9fr 1.1fr; }
  /* Alternate sides so the page reads as a sequence, not a list. */
  .chapter:nth-of-type(even) .chapter__media { order: -1; }
}

.chapter__eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.chapter__title { margin-top: 0.4rem; font-size: var(--step-3); }

.chapter__rule {
  display: block;
  width: 4rem;
  height: 2px;
  margin: 1.15rem 0;
  background: var(--gold);
}

.pull-quote {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.35rem;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.section--warm .pull-quote { background: var(--paper-deep); }

.pull-quote blockquote { margin: 0; }

.pull-quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--navy);
}

.pull-quote figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* -- 18. Page headers + breadcrumbs --------------------------------------- */

.page-head {
  padding-block: var(--section-y-lg);
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}

.page-head--slim { padding-block: 1.25rem; background: none; }

.page-head__eyebrow {
  margin-top: 1.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.page-head__title {
  margin-top: 0.6rem;
  font-size: var(--step-hero);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.page-head__subtitle {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-soft);
}

.page-head__lede {
  max-width: 58ch;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.page-head__action { margin-top: 1.75rem; }

.breadcrumbs {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before { content: '/'; margin-right: 0.55rem; color: var(--gold); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.breadcrumbs [aria-current='page'] { color: var(--navy); font-weight: 600; }

/* Pill row used for on-page jump links and the 404 suggestions. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.pills a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}

.pills a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* -- 19. Forms ------------------------------------------------------------ */

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.form-card__heading { margin-bottom: 1.5rem; font-size: var(--step-2); }

.form { display: grid; gap: 1.15rem; }

.field { display: grid; gap: 0.35rem; }

.field__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
}

.field__required { color: var(--gold-deep); }

.field__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.field__hint { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }

.field__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--paper);
  border: 1px solid #b9c2cb;
  border-radius: var(--radius);
  font-size: 1rem;                 /* 16px stops iOS zoom-on-focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__input:hover { border-color: var(--navy-tint); }

.field__input:focus-visible {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgb(31 111 235 / 0.18);
}

textarea.field__input { resize: vertical; min-height: 8rem; }

.field__input[aria-invalid='true'] { border-color: var(--error); }

.field__error { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }

/* Hidden from people and from screen readers; tempting to bots. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.form__submit { justify-self: start; }

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
}

.form__status[hidden] { display: none; }

.form__status[data-state='success'] {
  background: var(--success-bg);
  border-left: 3px solid var(--success);
  color: #14562e;
}

.form__status[data-state='error'] {
  background: var(--error-bg);
  border-left: 3px solid var(--error);
  color: #8c1d18;
}

/* Two-column layouts used on the homepage and contact page. */
.split { display: grid; gap: clamp(2rem, 1.2rem + 3.5vw, 3.5rem); align-items: start; }

@media (min-width: 58rem) {
  .split { grid-template-columns: 0.95fr 1.05fr; }
}

.split__copy > * + * { margin-top: 1.15rem; }

.contact__heading {
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.contact__heading:not(:first-child) { margin-top: 2.25rem; }

.contact__address {
  display: grid;
  gap: 0.4rem;
  font-style: normal;
  font-size: var(--step-1);
}

.contact__address a { text-decoration: none; }
.contact__address a:hover { text-decoration: underline; }

.contact__note {
  margin-top: 2.25rem;
  padding: 1rem 1.15rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* -- 20. CTA -------------------------------------------------------------- */

.cta {
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
  background: var(--navy);
  text-align: center;
}

.cta__inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

.cta__heading { margin: 0; font-size: var(--step-3); color: #fff; }

.cta__body {
  max-width: 46ch;
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: #c9d6df;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

/* -- 21. 404 -------------------------------------------------------------- */

.notfound { text-align: center; }

.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
}

.notfound__title { margin-top: 0.5rem; font-size: var(--step-4); }

.notfound__lede {
  max-width: 48ch;
  margin: 1.15rem auto 0;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.notfound .pills { justify-content: center; margin-top: 2rem; }

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* -- Misc page-specific helpers ------------------------------------------- */

.pillar { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; }

@media (min-width: 52rem) {
  .pillar { grid-template-columns: 1fr 1fr; }
  .pillar--reverse .pillar__media { order: 2; }
}

.pillar__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.pillar__media img { width: 100%; border-radius: var(--radius-lg); }

@media (max-width: 51.99rem) {
  .pillar__media img { max-width: 40%; margin-inline: auto; }
}

@media (min-width: 52rem) {
  .pillar__media img { width: 65%; margin-inline: auto; }
}

.pillar__body > * + * { margin-top: 1.15rem; }

.bio { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); margin-top: 2.5rem; align-items: start; }

@media (min-width: 52rem) {
  .bio { grid-template-columns: 0.85fr 1.15fr; }
}

.bio__portrait {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.bio__portrait img {
  width: 100%;
  object-fit: cover;
}

.interviews { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin: 0; padding: 0; list-style: none; }

@media (min-width: 56rem) {
  .interviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.interview__meta {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.interview__name { font-size: var(--step-feature); line-height: 1.1; }

.interview__role {
  margin-top: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.center-action { margin-top: 1.75rem; text-align: center; }

/* -- Spacing utilities ----------------------------------------------------
   A deliberately tiny set. They exist so no inline `style` attribute is
   needed anywhere, which lets the Content-Security-Policy in _headers drop
   'unsafe-inline' from style-src. */

.mt-0 { margin-top: 0; }
.mt-block { margin-top: 1.75rem; }
.mt-section { margin-top: 2.25rem; }

/* -- 22. Motion system -----------------------------------------------------
   Site-wide scroll reveal, image depth/hover, cinematic hero entrance,
   section-progress navigation, and one signature scroll effect. See
   assets/js/motion.js for the JavaScript half.

   Progressive enhancement: every hidden state below is scoped under `.js`,
   a class added by an inline, render-blocking script at the very top of
   <head> (see tools/build-pages.mjs). No JS, no `.js` class, no hidden
   content — a no-JS visitor sees everything immediately. */

/* -- 22a. Scroll reveal ----------------------------------------------------- */

.js [data-reveal] { opacity: 0; }

.js [data-reveal='up'] {
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js [data-reveal='heading'] {
  transform: translateY(26px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
    clip-path 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js [data-reveal='image'] {
  transform: scale(1.035);
  transition: opacity 0.8s ease-out, transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}

/* -- 22b. Image hover / depth ------------------------------------------------
   Applied to a handful of major photographs (hero, book cover, portrait).
   JS sets --depth-x/--depth-y from pointer position; CSS alone provides the
   hover scale so the effect degrades gracefully with JS disabled. */

[data-depth] {
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}

[data-depth]:hover { transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) scale(1.025); }

.book-card__media,
.bio__portrait {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  transform: translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0);
}

/* No pointer-follow on touch/coarse pointers — only the CSS hover scale applies. */
@media (pointer: coarse) {
  [data-depth],
  [data-depth]:hover { transform: none; }
}

/* -- 22c. Cinematic hero entrance --------------------------------------------
   Pure CSS, so it plays with JS disabled and never replays on re-scroll —
   it is a load-time animation, not a scroll trigger. */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-rise-media {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

.hero__eyebrow { animation: hero-rise 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) both; }
.hero__title { animation: hero-rise 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.2s both; }
.hero__lede { animation: hero-rise 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.4s both; }
.hero__actions { animation: hero-rise 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.6s both; }
/* On the wrapper, not the img itself — the img's own transform is reserved
   for the pointer-follow depth system (data-depth) below, and a CSS
   animation with fill-mode:both would otherwise win that property forever. */
.hero__media { animation: hero-rise-media 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.8s both; }

/* -- 22d. Section progress rail -----------------------------------------
   Homepage only, desktop only (no mobile version) — hidden below 90rem
   (~1440px) so it never competes with content for space, see QA target
   widths. A single hairline with small ticks and a gold fill tracking
   scroll progress; deliberately quiet — it should read as a margin
   annotation, not a carousel pager. Only the active tick is emphasised;
   labels surface only on hover/focus, set beside the rail. */

.progress-rail { display: none; }

@media (min-width: 90rem) {
  .progress-rail {
    display: block;
    position: fixed;
    top: 50%;
    right: 2.5rem;
    z-index: 60;
    transform: translateY(-50%);
  }
}

.progress-rail ol {
  position: relative;
  display: grid;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The hairline itself, plus a gold fill tracking scroll progress through
   the marked sections — --progress (0–1) is set by motion.js. */
.progress-rail ol::before,
.progress-rail ol::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
}

.progress-rail ol::before { background: var(--line); }

.progress-rail ol::after {
  background: var(--gold);
  height: calc(var(--progress, 0) * 100%);
  transition: height 0.2s linear;
}

.progress-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0;
  text-decoration: none;
}

.progress-rail__tick {
  width: 0.6rem;
  height: 1px;
  background: var(--ink-soft);
  opacity: 0.55;
  transition: background-color 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

.progress-rail__label {
  position: absolute;
  right: calc(100% + 0.15rem);
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.progress-rail a:hover .progress-rail__label,
.progress-rail a:focus-visible .progress-rail__label {
  opacity: 1;
  transform: translateX(0);
  color: var(--gold-deep);
}

.progress-rail a:hover .progress-rail__tick,
.progress-rail a:focus-visible .progress-rail__tick,
.progress-rail a.is-active .progress-rail__tick {
  background: var(--gold);
  opacity: 1;
  width: 1.1rem;
}