/* ============================================================
   PETITE INK ACADEMY — foundation
   Brand board is source of truth.
   Colours: #FFFFFD #EFEAE4 #8E8D79 #354135 #37251A
   Type (per brand board — corrects the brief's reversed labels):
     Emilea  = high-contrast DISPLAY SERIF (headings + "petite" wordmark)
     Miltona = flowing SCRIPT signature ("ink" + sparing accents)
     Hanken Grotesk = body (Agenda not web-licensable)
   ============================================================ */

/* ---- her real brand fonts (converted .otf → .woff2) ---- */
@font-face {
  font-family: "Miltona";
  src: url("fonts/Miltona.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Emilea";
  src: url("fonts/Emilea.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --white:      #FFFFFD;
  --cream:      #EFEAE4;
  --cream-deep: #E4DDD2;   /* derived warm step for panels */
  --sage:       #8E8D79;
  --sage-soft:  #B6B4A2;   /* derived light sage for lines/motif on dark */
  --sage-ink:   #63624C;   /* darker sage for SMALL text on cream — clears WCAG AA (5.2:1 cream / 4.6:1 cream-deep). --sage stays for decorative/large only */
  --forest:     #354135;
  --forest-deep:#2A332A;   /* derived darker step */
  --ink:        #37251A;   /* warm near-black, brand brown */
  --ink-soft:   #6A5B4E;   /* derived muted brown for secondary text */

  /* semantic on cream */
  --bg:           var(--cream);
  --text:         var(--ink);
  --text-muted:   var(--ink-soft);
  --line:         #D7CFC2;            /* hairline on cream */
  --line-strong:  #C3B9A9;

  /* semantic on forest */
  --on-dark:        #EDE9DF;
  --on-dark-muted:  #B9BAA8;
  --line-dark:      rgba(237,233,223,0.18);

  /* type — her real brand fonts (per brand board, which corrects the brief):
     Emilea = high-contrast DISPLAY SERIF (headings + the "petite" wordmark)
     Miltona = flowing SCRIPT signature ("ink" + sparing accents)
     Agenda (body) isn't web-licensable → Hanken Grotesk */
  --serif: "Emilea", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --script:"Miltona", "Emilea", cursive;

  /* rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(80px, 11vh, 168px);

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

* { box-sizing: border-box; }

/* skip-to-content (keyboard/screen-reader) — hidden until focused */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 2px; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* social icon links (footer + mobile drawer) */
.footer__social { display: flex; gap: 12px; margin-top: 26px; }
.nav-drawer__social { display: flex; gap: 12px; margin-top: 30px; }
.social-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.social-ico svg { width: 20px; height: 20px; }
.social-ico:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* footer is dark — invert */
.footer .social-ico { color: var(--on-dark-muted); border-color: var(--line-dark); }
.footer .social-ico:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* brand text-selection + keyboard focus */
::selection { background: var(--sage); color: var(--white); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* faint "pi" monogram watermark — her real brand mark */
.closing, .faq { position: relative; }
.closing::after, .faq::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: url("assets/img/pi-mark.png?v=2") no-repeat center / contain;
}
.closing::after { background-image: url("assets/img/pi-mark-light.png?v=2"); width: min(440px, 54vw); height: min(440px, 54vw); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .14; }
.faq::before { width: 250px; height: 250px; top: 36px; right: 3%; opacity: .08; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* explicit canvas colour: without this, zoomed-out / overscrolled views in
     some browsers paint the surround with the theme-color meta (forest) and
     the page looks like it floats on a dark green board */
  background: #F7F4EF; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.002em;
  /* Pan guard with fallback chain. hidden makes body a scroll container and
     silently breaks every position:sticky on the page (price panel, asides) -
     clip does not. But engines older than Safari 16 / Chrome 90 do not know
     clip and drop the declaration, so hidden FIRST as their fallback (sticky
     never worked there anyway), clip second wins on modern engines. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--forest); color: var(--white); }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: radial-gradient(120% 130% at 80% 8%, #3e4c3e 0%, #354135 55%, #2b352b 100%); color: var(--on-dark); }
.section--cream-deep { background: var(--cream-deep); }

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, 0.86vw, 13px);
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0;
}
.section--dark .eyebrow { color: var(--sage-soft); }

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

.h-xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h-lg {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.h-md {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
}
.serif-em { font-style: italic; }

/* Emilea ships as a single weight (400) — no bold cut exists, so font-weight can't
   thicken it (it would faux-bold a high-contrast serif, which looks ugly). Instead we
   thicken the strokes uniformly with text-stroke for scannability. paint-order keeps
   the fill crisp so only the outer edge grows. Applies on cream and dark via currentColor. */
h1, h2, h3,
.display, .h-xl, .h-lg, .h-md,
.hero__title, .hero__subtitle,
.kayleigh__title, .closing__title, .stay__title, .footer__tagline,
.whatis__li-title, .why__title, .why__stat b,
.proof__num, .price-card__price, .price-card__quote p,
.voices__quote p, .society__text,
.nav-drawer__links a {
  -webkit-text-stroke: 0.9px currentColor;
  paint-order: stroke fill;
}
.script {
  font-family: var(--script);
  font-weight: 400;
  font-style: normal;
}

.lead {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
}
.section--dark .lead { color: var(--on-dark-muted); }
.measure { max-width: 52ch; }
.measure-sm { max-width: 38ch; }

/* ---------- buttons & links ---------- */
.btn {
  /* CTA rule: full contrast with its background. On light sections this is the dark (forest)
     button; on dark sections use .btn--on-dark (cream). So every CTA pops off what it sits on. */
  --btn-bg: var(--forest);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 18px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), transform .45s var(--ease);
}
.btn .btn__arrow { transition: transform .45s var(--ease); }
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn--on-dark {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
}
.btn--on-dark:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* quiet text link with rule + arrow */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink); }
.section--dark .link-quiet { color: var(--on-dark-muted); border-color: var(--line-dark); }
.section--dark .link-quiet:hover { color: var(--on-dark); border-color: var(--on-dark); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.link-arrow .la__line {
  display: inline-block;
  width: 30px; height: 1px;
  background: currentColor;
  transition: width .45s var(--ease);
}
.link-arrow:hover .la__line { width: 46px; }
.section--dark .link-arrow { color: var(--on-dark); }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}
.site-header.is-stuck {
  background: rgba(239,234,228,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.site-header.is-stuck .site-header__inner { padding-block: 14px; }

/* logo lockup */
.logo { display: inline-flex; align-items: baseline; gap: .14em; line-height: 1; user-select: none; }
.logo__petite { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: 0.01em; color: var(--ink); }
.logo__ink { font-family: var(--script); font-size: 38px; line-height: 0; color: var(--ink); margin-left: .04em; position: relative; top: 2px; }
.logo__sub { display: block; font-family: var(--sans); font-size: 8.5px; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--sage); margin-top: 5px; }
.logo-wrap { display: inline-flex; flex-direction: column; }

/* real logo image (her brand mark) */
.logo-img { height: 56px; width: auto; display: block; }
.site-header.is-stuck .logo-img { height: 48px; transition: height .5s var(--ease); }
.nav-drawer__top .logo-img { height: 54px; }
.footer__logo-img { height: 76px; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
  padding-block: 4px;
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

/* training dropdown */
.nav__item--menu { position: relative; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav__caret { transition: transform .35s var(--ease); margin-top: 1px; }
.nav__submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 232px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 44px -28px rgba(55,37,26,0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  z-index: 5;
}
/* hover bridge so the menu doesn't close in the gap */
.nav__item--menu::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
.nav__item--menu:hover .nav__submenu,
.nav__item--menu:focus-within .nav__submenu,
.nav__submenu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__item--menu:hover .nav__caret,
.nav__item--menu:focus-within .nav__caret { transform: rotate(180deg); }
.nav__submenu a {
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink); padding: 11px 14px; border-radius: 2px; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav__submenu a:hover { background: var(--cream); }

/* mobile drawer sub-links (indented under Training) */
.nav-drawer__sub { display: flex; flex-direction: column; }
.nav-drawer__sub a {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  color: var(--ink-soft) !important;
  padding-block: 5px !important;
  padding-left: 18px;
  border-bottom: none !important;
}

.nav__toggle { display: none; }

/* mobile drawer */
.nav-drawer { display: none; }

/* nav switches to the mobile header at 1100px: below this the longest CTA
   ("Apply for a free Clarity Call") + 6 links + logo start to compress.
   Switch before the header is ever cramped, not after. */
@media (max-width: 1100px) {
  .nav__links, .nav .btn { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
    background: none; border: none; cursor: pointer; padding: 6px 0;
  }
  /* fine-line hamburger that morphs to an X on open (echoes the brand's hairline rules) */
  .nav__toggle .bars { position: relative; width: 24px; height: 13px; display: inline-block; }
  .nav__toggle .bars span { position: absolute; left: 0; width: 24px; height: 1px; background: var(--ink); transition: transform .42s var(--ease), opacity .25s var(--ease); }
  .nav__toggle .bars span:nth-child(1) { top: 0; }
  .nav__toggle .bars span:nth-child(2) { top: 6px; }
  .nav__toggle .bars span:nth-child(3) { top: 12px; }
  .nav__toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
  .nav__toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-drawer {
    display: block;
    position: fixed; inset: 0; z-index: 70;
    background: var(--cream);
    transform: translateY(-100%);
    visibility: hidden;            /* guarantee no peeking when closed */
    overflow-y: auto;              /* scroll if links exceed viewport height */
    transition: transform .6s var(--ease), visibility .6s var(--ease);
    padding: clamp(100px,15vh,120px) var(--gutter) 40px;
  }
  .nav-drawer.is-open { transform: translateY(0); visibility: visible; }
  /* the real header (logo + morphing toggle) sits above the drawer, so its own top is hidden */
  .nav-drawer__top { display: none; }
  .nav-drawer__close { background: none; border: none; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
  .nav-drawer__links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
  .nav-drawer__links a { font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--ink); padding-block: 9px; border-bottom: 1px solid var(--line); }
  .nav-drawer .btn { margin-top: 40px; display: inline-flex; }
}

/* ---------- video lightbox ---------- */
.vbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(42,51,42,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: clamp(20px, 5vw, 64px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.vbox.is-open { opacity: 1; visibility: visible; }
.vbox__inner { width: auto; max-width: 92vw; }
/* her footage is all 9:16 portrait — size by height so it stays phone-shaped with no letterboxing */
.vbox__inner video { height: 84vh; width: auto; max-width: 92vw; border-radius: 3px; background: #000; display: block; box-shadow: 0 40px 120px -40px rgba(0,0,0,.7); }
.vbox__close {
  position: absolute; top: clamp(16px,3vw,28px); right: clamp(16px,3vw,28px);
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark);
}

/* floating mobile CTA pill (desktop hidden; primary action always reachable on mobile).
   Floating pill (not an edge bar) + light ring + strong shadow so it stays visible on BOTH
   the cream and the dark-green sections it scrolls over. */
.mcta { display: none; }
@media (max-width: 860px) {
  /* matches the site .btn (2px radius, arrow, tracking) but floats + flips for contrast */
  .mcta {
    display: flex; align-items: center; justify-content: center; gap: 0.7em;
    position: fixed; left: 16px; right: 16px; z-index: 65;
    bottom: calc(16px + env(safe-area-inset-bottom));
    background: var(--forest); color: var(--white);
    border: 1px solid var(--forest); border-radius: 2px;
    font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .04em; line-height: 1;
    text-decoration: none; padding: 18px 24px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(200%);
    transition: transform .5s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .mcta.is-visible { transform: translateY(0); }
  /* flips to the cream inverse when it scrolls over a dark section (full contrast either way) */
  .mcta.is-over-dark { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .mcta .btn__arrow { width: 15px; height: 11px; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- media placeholders ---------- */
.media {
  position: relative;
  background: var(--cream-deep);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.section--dark .media { background: var(--forest-deep); border-color: var(--line-dark); }
.media__label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; padding: 24px;
  color: var(--ink-soft);
}
.section--dark .media__label { color: var(--on-dark-muted); }
.media__icon { width: 40px; height: 40px; stroke: currentColor; opacity: .75; }
.media__tag {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.media__sub { font-family: var(--sans); font-size: 12.5px; letter-spacing: .01em; opacity: .8; max-width: 26ch; }
/* play affordance — sits inside the label column, above the tag */
.play-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
  color: inherit; margin-bottom: 4px;
  transition: background .4s var(--ease);
}
.media:hover .play-ring { background: rgba(255,255,253,0.45); }
.section--dark .media:hover .play-ring { background: rgba(42,51,42,0.4); }
.play-ring svg { width: 17px; height: 17px; margin-left: 3px; }

/* real photos filling media frames */
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gallery__slide > img { width: 100%; height: 100%; object-fit: cover; }

.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-169 { aspect-ratio: 16 / 10; }

/* signature "fine line" double-keyline frame on key photography (matted-print feel).
   --frame-gap matches each section's background so the inner margin reads as a mat. */
.hero__media .media,
.whatis__media .media,
.voices__video .media,
.gallery__frame {
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 9px var(--frame-gap, var(--cream)), 0 0 0 10px var(--line-strong);
}
.gallery__frame { border: none; }
#stories { --frame-gap: var(--cream-deep); }

/* corner caption tag (founder presence) */
.cap-tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); color: var(--ink);
  padding: 9px 14px; border-radius: 2px;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em;
}
.cap-tag b { font-weight: 600; }
.cap-tag { white-space: nowrap; }
.cap-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* clickable video poster (Student Voices) — poster img + scrim + white play affordance */
.media--video { cursor: pointer; text-decoration: none; }
.media--video::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(55,37,26,.10) 0%, rgba(55,37,26,.28) 52%, rgba(55,37,26,.55) 100%);
  transition: background .4s var(--ease);
}
.media--video:hover::before { background: linear-gradient(180deg, rgba(55,37,26,.16) 0%, rgba(55,37,26,.34) 52%, rgba(55,37,26,.6) 100%); }
.media__label--over { position: relative; z-index: 2; color: var(--white); }
.media--video:hover .play-ring { background: rgba(255,255,253,0.22); transform: scale(1.05); }
.media--video .play-ring { transition: background .4s var(--ease), transform .4s var(--ease); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: clamp(132px, 17vh, 188px); padding-bottom: var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 30px; }
.hero__subtitle { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(23px, 1.9vw, 28px); line-height: 1.25; color: var(--text-muted); margin: 0 0 38px; max-width: 32ch; }
.hero__title { margin-bottom: 28px; }
.hero__emotion {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px); color: var(--text-muted);
  margin: 0 0 38px; line-height: 1.3;
}
.hero__cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__support {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.03em; color: var(--text-muted);
}
.hero__support .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); }
.hero__support > span:not(.sep) { white-space: nowrap; }
.hero__reassure { font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: -24px 0 34px; max-width: 44ch; }
.hero__media { position: relative; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { order: -1; }
}

/* ============================================================
   PROOF band
   ============================================================ */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .section { padding-block: clamp(46px, 6vh, 76px); }
.proof__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.proof__item { padding-inline: clamp(16px, 3vw, 48px); text-align: center; }
.proof__item + .proof__item { border-left: 1px solid var(--line); }
.proof__num { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.proof__num .u { color: var(--sage); }
.proof__label { font-family: var(--sans); font-size: 14.5px; color: var(--text-muted); margin: 12px auto 0; max-width: 22ch; }
.proof__dots { display: none; }
.proof__dot { width: 30px; height: 3px; background: var(--line-strong); border: none; padding: 0; cursor: pointer; transition: background .4s var(--ease); }
.proof__dot.is-active { background: var(--ink); }
@media (max-width: 760px) {
  .proof .section { padding-block: clamp(40px, 6vh, 60px); }
  .proof__grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .proof__grid::-webkit-scrollbar { display: none; }
  .proof__item {
    flex: 0 0 100%; scroll-snap-align: center;
    padding: 4px 0 !important; border: none !important; text-align: center;
  }
  .proof__num { font-size: clamp(60px, 19vw, 88px); }
  .proof__label { margin-inline: auto; }
  .proof__dots { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
}

/* ============================================================
   EMOTIONAL HOOK (dark scene)
   ============================================================ */
.hook__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.hook__title { margin-bottom: 0; }
.hook__title em { font-style: italic; color: var(--sage-soft); }
.hook__body { }
.hook__body p { color: var(--on-dark-muted); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.66; margin: 0 0 26px; }
.hook__body p .em { color: var(--on-dark); font-style: italic; font-family: var(--serif); }
@media (max-width: 860px) { .hook__grid { grid-template-columns: 1fr; gap: 36px; align-items: start; } }

/* ============================================================
   WHAT IT IS (light scene — photo beside list)
   ============================================================ */
.whatis__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.whatis__media { position: relative; }
.whatis__head { margin-bottom: 40px; }
.whatis__list { list-style: none; margin: 0; padding: 0; }
.whatis__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: baseline;
  padding-block: 24px; border-top: 1px solid var(--line);
}
.whatis__list li:last-child { border-bottom: 1px solid var(--line); }
.whatis__idx { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--sage); }
.whatis__li-title { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 1.7vw, 25px); line-height: 1.15; color: var(--ink); }
.whatis__li-desc { font-family: var(--sans); font-size: 15.5px; color: var(--text-muted); margin-top: 6px; max-width: 44ch; }
@media (max-width: 860px) {
  .whatis__grid { grid-template-columns: 1fr; gap: 40px; }
  .whatis__media { order: -1; max-width: 480px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: radial-gradient(120% 130% at 85% 0%, #3e4c3e 0%, #354135 55%, #2b352b 100%); color: var(--on-dark); padding-block: clamp(64px, 9vh, 110px) 40px; position: relative; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.footer__tagline { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.008em; max-width: 16ch; margin: 0; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__col h4 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-soft); margin: 0 0 18px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__col a { font-size: 15px; color: var(--on-dark); opacity: .82; transition: opacity .35s var(--ease); }
.footer__col a:hover { opacity: 1; }
.footer__logo { margin-bottom: 26px; }
.footer__logo .logo__petite, .footer__logo .logo__ink { color: var(--on-dark); }
.footer__logo .logo__sub { color: var(--sage-soft); }
.footer__rule { height: 1px; background: var(--line-dark); margin-block: clamp(40px, 6vh, 72px) 28px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__legal { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.02em; color: var(--on-dark-muted); display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal .star { color: var(--on-dark); opacity: .85; }
@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr; gap: 44px; }
}
/* footer newsletter (lurker capture, site-wide). ⚠ form action → wire to Kajabi opt-in at port. */
.footer__news { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 5vw, 90px); align-items: center; margin-top: clamp(40px, 6vh, 72px); }
.footer__news-k { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.14; color: var(--cream); margin: 0 0 7px; }
.footer__news-d { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--on-dark-muted); margin: 0; max-width: 44ch; }
.footer__news-form { display: flex; gap: 10px; }
.footer__news-input { flex: 1 1 auto; min-width: 0; background: rgba(255,255,253,.06); border: 1px solid var(--line-dark); border-radius: 2px; padding: 13px 15px; font-family: var(--sans); font-size: 15px; color: var(--on-dark); }
.footer__news-input::placeholder { color: var(--on-dark-muted); }
.footer__news-input:focus-visible { outline: none; border-color: var(--sage-soft); }
.footer__news-btn { flex: none; background: var(--cream); color: var(--ink); border: none; border-radius: 2px; padding: 13px 22px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background .35s var(--ease); }
.footer__news-btn:hover { background: var(--white); }
@media (max-width: 760px) { .footer__news { grid-template-columns: 1fr; gap: 18px; } }

/* ============================================================
   MEET KAYLEIGH — cutout figure overlapping a colour block
   ============================================================ */
.kayleigh { overflow: visible; padding-top: clamp(150px, 16vh, 230px); padding-bottom: clamp(80px, 11vh, 150px); }
.kayleigh__wrap { position: relative; }
.kayleigh__panel {
  position: relative;
  background: var(--forest);
  color: var(--on-dark);
  border-radius: 2px;
  padding: clamp(48px, 5vw, 80px);
  padding-right: clamp(44px, 42%, 540px);
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: center;
}
.kayleigh__eyebrow { color: var(--sage-soft); margin-bottom: 22px; }
.kayleigh__title {
  font-family: var(--serif); font-weight: 500; color: var(--on-dark);
  font-size: clamp(54px, 6.6vw, 96px); line-height: 0.94; letter-spacing: -0.018em;
  margin-bottom: 32px; max-width: 12ch;
}
.kayleigh__story { color: var(--on-dark-muted); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.66; max-width: 42ch; margin: 0 0 18px; }
.kayleigh__story:first-of-type { margin-top: 0; }
.kayleigh__story .em { color: var(--on-dark); font-style: italic; font-family: var(--serif); }
/* Kayleigh's name in her Miltona script — a signed-off, founder-personal touch */
.kayleigh__sign { font-family: var(--script); font-weight: 400; color: var(--on-dark); font-size: clamp(40px, 4.4vw, 58px); line-height: 1; margin: 18px 0 26px; }
.kayleigh__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 16px; }
.kayleigh__panel .link-arrow { color: var(--on-dark); }
.kayleigh__watch {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--on-dark);
  white-space: nowrap;
}
.kayleigh__watch .pr {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center; transition: background .4s var(--ease);
}
.kayleigh__watch:hover .pr { background: rgba(237,233,223,0.12); }
.kayleigh__watch .pr svg { width: 12px; height: 12px; margin-left: 2px; }

/* the cutout figure: anchored to panel bottom, rises above its top edge */
.kayleigh__figure {
  position: absolute;
  right: clamp(0px, 3%, 56px);
  bottom: 0;
  width: clamp(300px, 41%, 470px);
  margin: 0;
  z-index: 2;
}
.kayleigh__img { display: block; width: 100%; height: auto; }
/* click-to-play overlay on the founder cutout (her intro video is the strongest asset) */
.kayleigh__figure--video { cursor: pointer; }
.kayleigh__play {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 3;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); background: rgba(55, 37, 26, 0.42);
  border: 1.5px solid rgba(255, 255, 253, 0.92);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.kayleigh__play svg { width: 26px; height: 26px; margin-left: 4px; }
.kayleigh__figure--video:hover .kayleigh__play,
.kayleigh__figure--video:focus-visible .kayleigh__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(55, 37, 26, 0.62); }
.kayleigh__figure--video:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.figure-cutout {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; gap: 14px; padding-bottom: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 200px 200px 4px 4px;
  background:
    repeating-linear-gradient(135deg, rgba(142,141,121,0.06) 0 10px, transparent 10px 20px),
    var(--cream);
  color: var(--ink-soft);
}
.figure-cutout svg.silhouette { width: 56%; max-width: 200px; height: auto; stroke: var(--sage); fill: none; opacity: .5; }
.figure-cutout .media__tag { color: var(--ink-soft); }
.figure-cutout .media__sub { color: var(--ink-soft); max-width: 22ch; margin-bottom: 6px; }

@media (max-width: 860px) {
  .kayleigh__panel { padding-right: clamp(44px, 5vw, 76px); padding-bottom: 0; min-height: 0; }
  .kayleigh__figure {
    position: static; width: min(78%, 360px); height: auto;
    margin: -28px auto -8px; right: auto;
  }
}

/* ---------- fine-line motif ---------- */
.motif {
  /* HIDDEN 2026-06-02 — these are claude.ai/design placeholder fine-line drawings.
     Kept in markup to swap for Kayleigh's real tattoo line-art / pi monogram later.
     Remove this display:none (and restore the line below) to bring motifs back. */
  display: none;
  position: absolute; pointer-events: none; z-index: 0;
  stroke: var(--sage); fill: none; opacity: 0.16;
}
/* clip decorative motifs so they never create horizontal scroll */
.hero, .footer, .section--dark { overflow: clip; }
.section--dark .motif, .footer .motif { stroke: var(--sage-soft); opacity: 0.12; }
.section > .container, .hero > .container, .footer > .container { position: relative; z-index: 1; }

/* ============================================================
   WHY PETITE INK — editorial matrix (no icon cards)
   ============================================================ */
.why__head { max-width: 60ch; margin-bottom: clamp(36px, 4vw, 60px); }
.why__head .eyebrow { margin-bottom: 22px; }
.why__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(40px, 5vw, 96px); row-gap: 0; }
.why__item { padding-block: clamp(30px, 3.4vw, 46px); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: baseline; }
.why__idx { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--sage); }
.why__title { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2vw, 30px); line-height: 1.1; color: var(--ink); }
.why__text { font-family: var(--sans); font-size: 15.5px; color: var(--text-muted); margin-top: 10px; max-width: 38ch; }
.why__stats { display: flex; gap: 28px; margin-top: 16px; }
.why__stat b { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--ink); display: block; line-height: 1; }
.why__stat span { font-family: var(--sans); font-size: 12.5px; color: var(--text-muted); letter-spacing: .02em; }
@media (max-width: 760px) { .why__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CHOOSE YOUR PATH — two-path fork (beginner vs PMU artist)
   ============================================================ */
.paths__head { max-width: 60ch; margin-bottom: clamp(34px, 4vw, 52px); }
.paths__head .eyebrow { margin-bottom: 20px; }
.paths__head .lead { margin-top: 16px; }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
.path-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(28px, 2.8vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.path-card__tag {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.path-card__tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage); flex: none;
}
.path-card__title { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }
.path-card__desc { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; max-width: 40ch; }
.path-card__meta { list-style: none; margin: 0 0 28px; padding: 0; }
.path-card__meta li { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: .01em; color: var(--ink); }
.path-card__tick { width: 15px; height: 15px; stroke: var(--sage); fill: none; flex: none; }
.path-card .btn { margin-top: auto; }
@media (max-width: 760px) { .paths__grid { grid-template-columns: 1fr; } }

/* ============================================================
   THE BEGINNERS TRAINING — offer + price card (dark)
   ============================================================ */
.offer__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 5vw, 88px); align-items: center; }
.offer__head .eyebrow { margin-bottom: 22px; }
.offer__title { color: var(--on-dark); max-width: 18ch; margin-bottom: 30px; }
.offer__incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.offer__incl li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding-block: 16px; border-top: 1px solid var(--line-dark); color: var(--on-dark); font-size: clamp(15px, 1.15vw, 17px); }
.offer__incl li:last-child { border-bottom: 1px solid var(--line-dark); }
.offer__incl .tick { width: 16px; height: 16px; margin-top: 3px; stroke: var(--sage-soft); fill: none; flex: none; }
.offer__incl b { font-weight: 600; }
.offer__incl small { display: block; color: var(--on-dark-muted); font-size: 13.5px; margin-top: 2px; }

.price-card { background: var(--cream); color: var(--ink); border-radius: 2px; padding: clamp(32px, 3vw, 46px); }
.price-card__label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-ink); }
.price-card__price { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5vw, 68px); line-height: 1; letter-spacing: -0.015em; margin: 14px 0 4px; }
.price-card__price .vat { font-size: 0.42em; color: var(--text-muted); letter-spacing: 0; }
.price-card__terms { font-family: var(--sans); font-size: 14.5px; color: var(--text-muted); margin: 0 0 24px; }
.price-card .btn { width: 100%; justify-content: center; }
.price-card__deposit { font-family: var(--sans); font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 14px; }
.price-card__quote { margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.price-card__quote p { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink); margin: 0 0 10px; }
.price-card__quote cite { font-family: var(--sans); font-style: normal; font-size: 12.5px; letter-spacing: .04em; color: var(--sage-ink); }
.price-card__proof { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em; color: var(--ink-soft); }
.price-card__proof .stars { color: var(--ink); letter-spacing: 2px; }
.offer__cohort { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--on-dark-muted); }
.offer__cohort .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-soft); }
@media (max-width: 860px) { .offer__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   THE STUDIO — cycling gallery
   ============================================================ */
.studio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(30px, 3.4vw, 50px); }
.studio__head .eyebrow { margin-bottom: 18px; }
.gallery { position: relative; }
.gallery__frame { position: relative; aspect-ratio: 16 / 9; background: var(--cream-deep); border: 1px solid var(--line); overflow: hidden; }
.gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); display: flex; align-items: center; justify-content: center; }
.gallery__slide.is-active { opacity: 1; }
.gallery__slide .media__label { color: var(--ink-soft); }
.gallery__caption { position: absolute; left: 18px; bottom: 16px; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 2px; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; z-index: 3; }
.gallery__dots { display: flex; gap: 10px; margin-top: 22px; }
.gallery__dot { width: 34px; height: 3px; background: var(--line-strong); border: none; padding: 0; cursor: pointer; transition: background .4s var(--ease); }
.gallery__dot.is-active { background: var(--ink); }

/* ============================================================
   STUDENT VOICES — text quotes + video testimonial
   ============================================================ */
.voices__head { max-width: 52ch; margin-bottom: clamp(34px, 4vw, 56px); }
.voices__head .eyebrow { margin-bottom: 20px; }
.voices__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.voices__video .media { height: 100%; }
.voices__quotes { display: flex; flex-direction: column; }
.voices__quote { margin: 0; padding-block: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--line); }
.voices__quote:first-child { padding-top: 0; border-top: none; }
.voices__quote p { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 1.7vw, 26px); line-height: 1.32; color: var(--ink); margin: 0 0 14px; text-wrap: pretty; }
.voices__quote cite { font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .04em; color: var(--sage-ink); }
.voices__dots { display: none; gap: 9px; margin-top: 24px; justify-content: center; }
.voices__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--line-strong); cursor: pointer; transition: background .3s var(--ease); }
.voices__dot.is-active { background: var(--ink); }
@media (max-width: 860px) {
  .voices__grid { grid-template-columns: 1fr; gap: 40px; }
  .voices__video .media { aspect-ratio: 4/5; }
  /* reviews become a swipeable one-at-a-time carousel */
  .voices__quotes {
    flex-direction: row; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .voices__quotes::-webkit-scrollbar { display: none; }
  .voices__quote { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border-top: none; }
  .voices__quote.reveal { opacity: 1; transform: none; }  /* never leave a carousel slide blank */
  .voices__quote p { font-size: clamp(21px, 6vw, 27px); }
  .voices__dots { display: flex; }
}

/* ============================================================
   FAQ — objection handling (native <details> accordion)
   ============================================================ */
.faq__head { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 50px); }
.faq__head .eyebrow { margin-bottom: 20px; }
.faq__list { max-width: 840px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 2px;
  font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.35; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ink-soft); }
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--sage-ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.faq__icon::before { top: 8.25px; left: 0; width: 18px; height: 1.5px; }
.faq__icon::after  { left: 8.25px; top: 0; width: 1.5px; height: 18px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { padding: 0 40px 26px 2px; }
.faq__a p { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 66ch; }
.faq__foot { margin-top: 34px; font-family: var(--sans); font-size: 15px; color: var(--text-muted); }
.faq__foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   STUDIO SUCCESS SOCIETY — distinct contained callout (different audience)
   ============================================================ */
.society { padding-block: clamp(22px, 4vh, 56px); }
.society__card {
  position: relative; overflow: hidden;
  background: var(--forest); color: var(--on-dark);
  border-radius: 4px;
  padding: clamp(34px, 4.6vw, 64px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.society__motif { top: -46px; right: -34px; width: 280px; height: 280px; stroke: var(--sage-soft); opacity: .12; }
.society__body { position: relative; z-index: 1; }
.society__label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-soft); white-space: nowrap; }
.society__title { font-family: var(--serif); font-weight: 500; color: var(--on-dark); font-size: clamp(28px, 3vw, 44px); line-height: 1.02; letter-spacing: -0.01em; margin: 14px 0 12px; }
.society__text { font-family: var(--sans); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--on-dark-muted); max-width: 46ch; margin: 0; }
.society__cta { position: relative; z-index: 1; white-space: nowrap; }
@media (max-width: 760px) {
  .society__card { grid-template-columns: 1fr; gap: 26px; }
  .society__cta { justify-self: start; }
}

/* ============================================================
   STAY CLOSE — newsletter (secondary)
   ============================================================ */
.stay { background: var(--cream-deep); }
.stay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.stay__title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; color: var(--ink); margin: 0 0 14px; max-width: 16ch; }
.stay__sub { font-family: var(--sans); font-size: 16px; color: var(--text-muted); margin: 0; max-width: 42ch; }
.stay__form { display: flex; gap: 12px; flex-wrap: wrap; }
.stay__input { flex: 1; min-width: 220px; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: 2px; padding: 16px 18px; }
.stay__input::placeholder { color: var(--ink-soft); opacity: .7; }
.stay__input:focus { outline: none; border-color: var(--ink); }
.stay__note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; }
@media (max-width: 760px) { .stay__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   CLOSING — final push (dark)
   ============================================================ */
.closing { text-align: center; }
.closing .container { display: flex; flex-direction: column; align-items: center; }
.closing__eyebrow { margin-bottom: 28px; }
.closing__title { font-family: var(--serif); font-weight: 500; color: var(--on-dark); font-size: clamp(38px, 5vw, 76px); line-height: 1.04; letter-spacing: -0.012em; max-width: 18ch; margin: 0 0 14px; text-wrap: balance; }
.closing__title em { font-style: italic; color: var(--sage-soft); }
.closing__sub { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 19px); color: var(--on-dark-muted); max-width: 44ch; margin: 0 0 42px; }
.closing .btn { font-size: 16px; padding: 20px 38px; }
.closing__quiet { margin-top: 22px; }

/* ============================================================
   MOBILE CHOREOGRAPHY — title → image → body per section.
   Lead with the headline, break the page up with imagery,
   then the supporting copy. (overrides earlier media rules)
   ============================================================ */
@media (max-width: 900px) {
  /* HERO: eyebrow + headline first, then the video, then emotion + CTA */
  .hero { padding-top: clamp(116px, 18vh, 140px); padding-bottom: clamp(34px, 6vh, 54px); }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  /* value + action ABOVE the image so the first fold has a CTA, not just a headline */
  .hero__eyebrow { order: 1; margin-bottom: 16px; }
  .hero__title { order: 2; margin-bottom: 18px; }
  .hero__subtitle { order: 3; margin-bottom: 22px; }
  .hero__cta-row { order: 4; margin-bottom: 14px; }
  .hero__reassure { order: 5; margin: 0 0 28px; }
  .hero__media { order: 6; margin: 4px 0 30px; }
  .hero__support { order: 7; }
}

@media (max-width: 860px) {
  /* WHAT IT IS: heading first, then photo, then the list */
  .whatis__grid { display: flex; flex-direction: column; gap: 0; }
  .whatis__copy { display: contents; }
  .whatis__head { order: 1; margin-bottom: 24px; }
  .whatis__media { order: 2; max-width: none; margin: 0 0 28px; }
  .whatis__list { order: 3; }

  /* MEET KAYLEIGH: portrait leads and OVERLAPS the green block, then title + story */
  .kayleigh { padding-top: clamp(40px, 6vh, 70px); padding-bottom: clamp(56px, 8vh, 80px); overflow: visible; }
  .kayleigh__wrap { display: flex; flex-direction: column; }
  .kayleigh__figure {
    order: 1; position: relative; right: auto; z-index: 2;
    width: 84%; max-width: 360px; height: auto;
    /* green rises to just below the shoulders — head + shoulders float above into the cream */
    margin: 0 auto -258px; background: transparent;
    display: block;
  }
  .kayleigh__img { width: 100%; max-width: none; }
  .kayleigh__panel {
    order: 2; min-height: 0;
    display: flex; flex-direction: column;
    /* clears the overlapping figure (258px) + breathing room before the eyebrow */
    padding: 290px 26px 40px;
  }
  .kayleigh__eyebrow { order: 0; }
  .kayleigh__title { order: 0; font-size: clamp(46px, 13vw, 60px); margin-bottom: 22px; max-width: none; }
  .kayleigh__story { order: 0; max-width: none; }
  .kayleigh__actions { order: 0; }

  /* STUDENT VOICES: head → video → quotes (DOM already orders this) */
  .voices__video { margin-bottom: 4px; }

  /* ---- centered alignment on mobile where it reads better ---- */
  .hero__eyebrow, .hero__title, .hero__subtitle { text-align: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__cta-row, .hero__support { justify-content: center; }

  .whatis__head, .why__head, .voices__head { text-align: center; }
  .why__head, .voices__head { margin-left: auto; margin-right: auto; }
  .studio__head { flex-direction: column; align-items: center; text-align: center; }
  .studio__head .lead { margin-left: auto; margin-right: auto; }

  .kayleigh__eyebrow, .kayleigh__title { text-align: center; }
  .kayleigh__story { text-align: center; }
  .kayleigh__actions { justify-content: center; }

  .stay__grid { text-align: center; }
  .stay__title, .stay__sub { margin-left: auto; margin-right: auto; }
  .stay__form { justify-content: center; }
  .stay__note { text-align: center; }

  .society__row { text-align: center; justify-items: center; }
  .society__text { margin-left: auto; margin-right: auto; }

  /* core-programme head centred to match every other section head on mobile (checklist stays left) */
  .offer__head .eyebrow, .offer__title { text-align: center; }
  .offer__title { margin-left: auto; margin-right: auto; }

  /* studio gallery: taller frame on mobile so the room isn't cropped to a thin strip */
  .gallery__frame { aspect-ratio: 4 / 3; }
}

/* ============================================================
   BEGINNERS PAGE — page-specific sections
   (reuses tokens + shared components; light/dark variants only)
   ============================================================ */

/* shared section head (method / curriculum / included / outcomes) */
.method__head { max-width: 62ch; margin-bottom: clamp(34px, 4vw, 54px); }
.method__head .lead { margin-top: 16px; }

/* "By the end you'll have" intro line above the checklist */
.whatis__pre { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--sage-ink); margin: 0 0 14px; }

/* offer checklist on a LIGHT background (base .offer__incl is tuned for dark) */
.offer__incl--light li { border-top-color: var(--line); color: var(--ink); }
.offer__incl--light li:last-child { border-bottom-color: var(--line); }
.offer__incl--light .tick { stroke: var(--sage); }
.offer__incl--light small { color: var(--text-muted); }

/* THE PETITE INK METHOD */
.method__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 44px) clamp(40px, 5vw, 80px); }
.method__item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.method__num { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--sage); }
.method__title { font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin: 6px 0 11px; }
.method__desc { font-family: var(--sans); font-size: 15.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
@media (max-width: 760px) { .method__grid { grid-template-columns: 1fr; gap: 30px; } }

/* WHAT YOU'LL LEARN */
.learn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 2.6vw, 44px); }
.learn__group h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-ink); padding-bottom: 14px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.learn__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.learn__group li { position: relative; padding-left: 22px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); }
.learn__group li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.learn__foot { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.7vw, 24px); line-height: 1.4; color: var(--ink); max-width: 44ch; margin: clamp(34px, 4vw, 50px) 0 0; }
@media (max-width: 820px) { .learn__grid { grid-template-columns: 1fr; gap: 32px; } }

/* WHAT'S INCLUDED (dark) */
.included__list { max-width: 760px; }
.included__foot { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.7vw, 24px); line-height: 1.4; color: var(--on-dark); margin: clamp(28px, 3vw, 40px) 0 0; }

/* WHO IT'S FOR / NOT FOR */
.fornot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); align-items: start; }
.fornot__col { border: 1px solid var(--line); border-radius: 2px; padding: clamp(28px, 2.8vw, 44px); }
.fornot__col--yes { background: var(--white); }
.fornot__col--no { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.fornot__label { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.fornot__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 16px; }
.fornot__list li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.fornot__mark { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.fornot__col--yes .fornot__mark { stroke: var(--sage); fill: none; }
.fornot__mark--x { position: relative; }
.fornot__mark--x::before { content: ""; position: absolute; top: 7px; left: 1px; width: 14px; height: 0; border-top: 1.5px solid var(--sage-ink); }
.fornot__note { font-family: var(--sans); font-size: 14.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
@media (max-width: 760px) { .fornot__grid { grid-template-columns: 1fr; } }

/* WHAT STUDENTS HAVE GONE ON TO DO */
.outcomes__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.outcomes__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin-bottom: clamp(26px, 3vw, 38px); }
.outcomes__stat b { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 5vw, 60px); line-height: 1; letter-spacing: -0.015em; color: var(--ink); display: block; }
.outcomes__stat span { font-family: var(--sans); font-size: 13.5px; letter-spacing: .02em; color: var(--text-muted); display: block; margin-top: 8px; max-width: 16ch; }
.outcomes__wins { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.outcomes__wins li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.outcomes__wins .tick { width: 16px; height: 16px; margin-top: 3px; stroke: var(--sage); fill: none; flex: none; }
.outcomes__close { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.6vw, 24px); line-height: 1.45; color: var(--ink); max-width: 46ch; margin: 0; }
.outcomes__media { position: sticky; top: 96px; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 860px) { .outcomes__grid { grid-template-columns: 1fr; gap: 36px; } .outcomes__media { position: static; } }

/* A NOTE FROM ME */
.note__wrap { max-width: 60ch; margin: 0 auto; }
.note__body p { font-family: var(--sans); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.72; color: var(--ink); margin: 0 0 18px; }
.note__sign { color: var(--ink); margin: 26px 0 0; }

/* Beginners page — CRO/SEO pass additions */
.hero__trust { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--sans); font-size: 13.5px; letter-spacing: .02em; color: var(--ink-soft); }
.hero__trust .stars { color: var(--ink); letter-spacing: 2px; }
.included__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(28px, 3vw, 40px); }
.outcomes__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.learn__aside { font-family: var(--sans); font-size: 14.5px; color: var(--text-muted); margin: 18px 0 0; }
.note__link { margin-top: 22px; }

/* Beginners page — hero trust order fix + visual-break sections */
/* .hero__trust had no mobile order so it floated above the eyebrow (same class of bug
   as the old .hero__reassure). Pin it to the end of the hero stack. */
@media (max-width: 900px) {
  .hero__trust { order: 8; margin-top: 10px; }
}

/* Editorial pull-quote — a calm, large-type break in the text-heavy middle */
.pullquote { padding-block: clamp(20px, 4vw, 48px); }
.pullquote .container { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.pullquote__q { margin: 0 auto; text-align: center; }
.pullquote__q p { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.14; letter-spacing: -0.012em; color: var(--ink); margin: 0 auto; max-width: 24ch; }
.pullquote__q em { font-style: italic; color: var(--sage-ink); }
.pullquote__by { display: block; margin-top: clamp(20px, 2.4vw, 30px); font-family: var(--script); font-style: normal; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--ink); }

/* Full-width studio photo band — a scene break between the text sections */
.photoband { position: relative; width: 100%; height: clamp(240px, 42vh, 480px); overflow: hidden; background: var(--cream-deep); }
.photoband img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.photoband__cap { left: clamp(18px, 4vw, 44px); bottom: clamp(18px, 3vw, 30px); }

/* Beginners page — mobile layout/alignment fixes (scoped by section id) */
@media (max-width: 900px) {
  /* "What the course covers": the shared .whatis__copy{display:contents} reorders flex
     children by `order`; my added lead/pre/checklist had none and scattered above the head,
     stranding the image. Cancel the contents-reorder so copy flows normally, image first. */
  #what-it-is .whatis__copy { display: block; }
  #what-it-is .whatis__media { order: -1; width: 100%; max-width: 520px; align-self: stretch; margin: 0 0 28px; }
  /* Consistent LEFT-aligned heads on mobile (the pull-quote stays centered as the one accent). */
  #what-it-is .whatis__head { text-align: left; }
  #included .offer__title,
  #investment .offer__head .eyebrow,
  #investment .offer__title { text-align: left; margin-left: 0; margin-right: 0; }
}

/* Outcomes — graduate certificate image + watch-a-story play link (light section variant) */
.outcomes__watch { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.outcomes__watch .pr { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex: none; transition: background .3s var(--ease); }
.outcomes__watch:hover .pr { background: rgba(53,65,53,0.06); }
.outcomes__watch .pr svg { width: 12px; height: 12px; margin-left: 2px; color: var(--forest); }

/* Investment — purchase module (payment options + reassurance bar) on the dark section */
.payplan { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.payplan__opt { border: 1px solid var(--line-dark); border-radius: 2px; padding: 22px 22px 24px; }
.payplan__tag { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-soft); }
.payplan__amt { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--on-dark); margin: 14px 0 10px; }
.payplan__amt span { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--on-dark-muted); }
.payplan__note { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--on-dark-muted); margin: 0; }
.reassure-bar { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.reassure-bar li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; font-family: var(--sans); font-size: 14.5px; color: var(--on-dark); }
.reassure-bar .tick { width: 15px; height: 15px; stroke: var(--sage-soft); fill: none; flex: none; }
@media (max-width: 560px) { .payplan { grid-template-columns: 1fr; } }
.outcomes__media .media { width: 100%; }

/* Critique fixes (2026-06-04) */
/* #3 — enlarge the tappable area of quiet underline links to >=44px without moving the underline */
.link-quiet { position: relative; }
.link-quiet::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 100%; min-height: 44px; }

/* #5 — "What you'll learn": finished-work image beside the grouped syllabus */
.learn__layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(34px, 4vw, 72px); align-items: start; }
.learn__layout .learn__grid { grid-template-columns: 1fr; gap: 30px; }
.learn__media { position: sticky; top: 96px; }
.learn__media .media { width: 100%; }
@media (max-width: 820px) {
  .learn__layout { grid-template-columns: 1fr; gap: 30px; }
  .learn__media { position: static; }
}

/* ===== Lenis smooth-scroll support (premium motion via pi-motion.js) =====
   Replaces the old CSS scroll-snap (Lenis now owns the scroll feel).
   scroll-padding-top still clears the fixed header for reduced-motion / no-JS / anchor users. */
html { scroll-padding-top: clamp(72px, 9vh, 100px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===== smooth cross-document page transitions (View Transitions API) =====
   Native, progressive: a gentle crossfade between pages where supported (Chrome/Edge/Safari),
   a normal navigation everywhere else. Off for reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===== editorial frame: a fine line traces itself around a [data-frame] section =====
   The brand's "fine line" as motion. pi-v2.js injects the SVG + adds .is-in on view.
   It FLOATS inside the panel with symmetric breathing room on all four sides, so every
   edge reads against the background - a contained, special editorial box (not a panel
   border). Centred and balanced, so it never looks lopsided against the margin spine. */
.pi-frame { position: absolute; inset: clamp(30px, 4.5vh, 54px) clamp(36px, 4.2vw, 68px); pointer-events: none; z-index: 0; }
.pi-frame__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pi-frame__rect { fill: none; stroke: var(--frame-stroke, var(--sage)); stroke-width: 1; opacity: var(--frame-opacity, .42); vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.35s cubic-bezier(.22, 1, .36, 1); }
.pi-frame.is-in .pi-frame__rect { stroke-dashoffset: 0; }
/* on dark (forest) sections, trace in warm oat so the hairline reads */
.pi-frame--light { --frame-stroke: var(--oat); --frame-opacity: .6; }
@media (prefers-reduced-motion: reduce) { .pi-frame__rect { transition: none; stroke-dashoffset: 0; } }

/* On small screens the trace-frame keeps its desktop inset minimums and
   crosses the text column. Pull it tight to the section edge instead so the
   border survives on mobile with the text clear inside it. (Overrides the
   display:none in beginners-v3.css via the later rule there being edited
   the same way; this copy covers pages without the v3 layer.) */
@media (max-width: 760px) { .pi-frame { inset: 18px 12px; } }

/* agency credit (V1) - same colour family as footer text, dofollow */
.stc-credit { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.stc-credit:hover { opacity: 1; }

/* inline form success state (Netlify Forms) */
.form-success { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: inherit; padding: 14px 0; margin: 0; }


/* footer "more info" link (replaces the old newsletter form) */
.footer__news-link { display:inline-flex; align-items:center; gap:9px; align-self:start; justify-self:start; text-decoration:none; }
.footer__news-link .btn__arrow { transition: transform .35s var(--ease); }
.footer__news-link:hover .btn__arrow { transform: translateX(4px); }


/* ====== Legal-page tables (cookie policy): scroll horizontally on mobile so all columns stay reachable, instead of being clipped ====== */
.legal table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; margin:22px 0; }
.legal table td, .legal table th { border:1px solid var(--line); padding:10px 14px; vertical-align:top; min-width:130px; }
.legal table h3 { font-family:var(--sans); font-size:14px; font-weight:600; margin:0; color:var(--ink); }
.legal table p { margin:0; font-size:14px; line-height:1.5; }
.legal table tr:first-child { background:rgba(142,141,121,.12); }


/* ====== Student login in mobile menu — deliberately subtle/plain vs the main nav links ====== */
.nav-drawer__login { font-size:15px !important; font-weight:400 !important; color:var(--ink-soft) !important; -webkit-text-stroke:0 !important; opacity:.85; margin-top:4px; }