/* ==========================================================================
   KarakterAkademiet – styles
   Tokens first, then base, then components in page order.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-300-800.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  /* colour */
  --paper: #F7F6F2;
  --paper-deep: #EFEDE6;
  --white: #FFFFFF;
  --ink: #171F2E;
  --ink-2: #3B4453;
  --muted: #5E6674;
  --line: #DDDAD1;
  --line-strong: #C9C5B9;
  --teal: #1C7A6A;
  --teal-deep: #145A4E;
  --teal-tint: #E3F0EC;
  --grid: rgba(23, 31, 46, 0.075);
  --focus: #1C7A6A;

  /* type */
  --serif: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;   /* display face (kept the old token name) */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --lh-body: 1.6;
  --fw-body: 400;
  --fw-display: 600;
  --fw-quote: 500;

  /* rhythm */
  --wrap: 1120px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8rem);
  --radius: 6px;
  --radius-lg: 14px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 480ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--fw-display); margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); line-height: 1.1; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.22; letter-spacing: -0.015em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--teal-tint); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-head { max-width: 40rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); margin-top: 1rem; }
.prose p { color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--white); padding: 0.6rem 1rem; border-radius: var(--radius);
  z-index: 100; transition: top 150ms;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out), color 180ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-secondary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-secondary:hover { background: #000; border-color: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn-lg { min-height: 3.5rem; padding: 0.9rem 1.8rem; font-size: 1.0625rem; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 2rem; height: 2rem; overflow: visible; }
.brand-mark text { font-family: var(--serif); fill: currentColor; }
.brand-mark line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.brand-name { font-family: var(--serif); font-weight: 650; font-size: 1.2rem; letter-spacing: -0.03em; }
.brand-mark text { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; }
.footer-brand strong { font-family: var(--serif); font-weight: 650; letter-spacing: -0.02em; }
.label-short { display: none; }
@media (max-width: 559px) {
  .header-inner { gap: 0.75rem; min-height: 3.75rem; }
  .brand-name { font-size: 1.25rem; }
  .label-long { display: none; }
  .label-short { display: inline; }
}
.site-nav { display: none; gap: 1.6rem; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: 0.9375rem; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .site-nav { display: flex; } }

/* ---------- Hero ---------- */
/* One markup, two modes, chosen by main.js and set on <html>:
   .scrub  wide screens with a mouse. The hero is the first frame of the film; the text fades out as the camera starts
           to move, and the rest of the page rides on the film (see "Film" below).
   .still  phones, portrait tablets, small landscape phones, reduced motion, or no JavaScript: the same frame as a
           still picture, and the page below it is the plain paper layout. */
.hero { position: relative; background: #0B0C0E; color: var(--white); }
.hero-stage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end;
}
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: 0; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.64) 28%, rgba(8, 10, 14, 0.34) 52%, rgba(8, 10, 14, 0.08) 72%, rgba(8, 10, 14, 0) 80%);
}
.hero-content { position: relative; z-index: 2; padding-top: clamp(7rem, 20vh, 11rem); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.hero-content::before { /* a soft dark cloud behind the words: they stay readable whatever the film shows behind them.
  The box is much larger than the ellipse, so the gradient has faded to nothing well before any edge of the box. */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -55%; right: -5%; top: -45%; bottom: -35%;
  background: radial-gradient(ellipse 38% 44% at 55% 62%, rgba(8, 10, 14, 0.8) 0%, rgba(8, 10, 14, 0.66) 30%, rgba(8, 10, 14, 0.38) 60%, rgba(8, 10, 14, 0.12) 85%, rgba(8, 10, 14, 0) 100%);
}
.hero-title {
  font-size: clamp(2.25rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; max-width: 15ch;
  color: var(--white); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero-title .line { display: block; }
.hero-quote { margin: 1.4rem 0 1.9rem; max-width: 42rem; }
.hero-lead {
  margin: 0; font-size: clamp(1.05rem, 1.55vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hero-lead p { margin: 0; }
.hero-by {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.85rem;
  font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hero-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.8); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.hero .btn-primary { box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7); }
.hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.hero .btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.hero ::selection { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 720px) {
  .hero-stage { min-height: 100vh; min-height: 100svh; }
  .hero-poster { object-position: 62% 40%; }
  .hero-content { padding-top: 10.5rem; padding-bottom: 2rem; }
  .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero-quote { margin: 0.9rem 0 1.3rem; }
  .hero-lead { font-size: 0.98rem; }
  .hero-by { margin-top: 0.6rem; font-size: 0.9rem; }
  .hero-avatar { width: 2.1rem; height: 2.1rem; }
  .hero .btn { min-height: 2.9rem; }
}
/* Short windows: a tighter stack so the headline stays below the faces in the picture. */
@media (min-width: 721px) and (max-height: 800px) {
  .hero-title { font-size: clamp(2rem, 4.3vw, 3.2rem); }
  .hero-lead { font-size: 1.05rem; margin: 1rem 0 1.4rem; max-width: 32rem; }
  .scrub .hero-content { padding-bottom: 3.2rem; }
  .scrub .hero-facts .wrap { padding-bottom: 3.3rem; }
  .scrub .fact-num { font-size: clamp(2rem, 3.6vw, 3rem); }
}
/* Very short windows (a small preview pane): the numbers row gives way so the headline never slides under the header. */
@media (min-width: 721px) and (max-height: 620px) {
  .hero-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
  .hero-lead { font-size: 1rem; margin: 0.8rem 0 1.2rem; }
  .scrub .hero-content { padding-bottom: 2.6rem; }
  .scrub .hero-facts { display: none; }
  .scrub .scroll-hint { bottom: 0.4rem; }
}

/* The key numbers. A paper strip under the picture on phones; on wide screens they sit in the film's bottom edge. */
.hero-facts { background: var(--white); color: var(--ink); border-top: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; padding: 1.25rem 0 2.5rem; }
.fact { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem 0.9rem 0; }
.fact dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.fact dd { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.fact-num { font-family: var(--serif); font-weight: 650; font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.1; letter-spacing: -0.03em; }
.fact-desc { font-size: 0.875rem; color: var(--muted); }
@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact + .fact { border-left: 1px solid var(--line); padding-left: 1.25rem; }
}

/* The scroll cue: "SCROLL" over two chevrons that nod downwards. The chevrons draw in while the film downloads
   (--load), the whole cue turns green and nods faster as soon as the visitor scrolls, then fades out. Wide screens only. */
.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 0.1rem;
  color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  transition: color 260ms var(--ease-out);
}
.hint-label { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.28em; text-transform: uppercase; padding-left: 0.28em; }
.hint-chevrons { width: 40px; height: 28px; overflow: visible; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5)); }
.hint-chev {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 44; stroke-dashoffset: calc(44 * (1 - var(--load, 0))); transition: stroke-dashoffset 300ms linear;
  animation: chev 2s ease-in-out infinite;
}
.hint-chev-2 { animation-delay: 0.22s; }
@keyframes chev { 0%, 100% { opacity: 0.38; transform: translateY(-2px); } 45% { opacity: 1; transform: translateY(2px); } }
.scrub .hero.is-scrolling .scroll-hint { color: #7EE2C9; }
.scrub .hero.is-scrolling .hint-chev { animation-duration: 0.8s; }

/* ---------- Film (html.scrub): the page rides the hero video ----------
   The video is a fixed layer behind everything and is spooled by main.js from the scroll position:
   0 → the wide shot with the hero text; the first 210vh of scrolling arcs the camera round the desk and into the pen;
   the sections are paper cards on the black pen barrel while the camera travels down it; the tip meets the paper just
   before the booking form, and the footer rests on the blank graph paper at the end. */
.film { position: fixed; inset: 0; z-index: 0; background: #0B0C0E; display: none; }
.scrub .film { display: block; }
.film-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 700ms var(--ease-out); will-change: transform; transform: translateZ(0);
}
.film-video.is-ready { opacity: 1; }
.scrub body { background: #0B0C0E; }
.scrub main, .scrub .site-footer { position: relative; z-index: 1; }
.scrub .site-header { position: fixed; left: 0; right: 0; top: 0; } /* out of the flow, so the film starts at the very top */

/* The hero: the stage stays pinned for the whole intro (the arc round the desk and the push-in on the pen). The
   headline, the lead and the buttons stay for the ride; the four numbers take turns bottom right (main.js switches
   them by scroll position); --hero-k (0 → 1 at the end of the intro) fades everything out just before the barrel fills
   the frame, and --hint-k retires the scroll hint as soon as the page moves. */
.scrub .hero { --intro: 230vh; height: calc(100vh + var(--intro)); background: transparent; }
.scrub .hero-stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
.scrub .hero-poster { transition: opacity 700ms var(--ease-out); }
.scrub .hero-poster.is-hidden { opacity: 0; }
.scrub .hero-scrim { opacity: calc(1 - var(--hero-k, 0)); }
.scrub .hero-content { padding-bottom: 4rem; opacity: calc(1 - var(--hero-k, 0)); transform: translate3d(0, calc(var(--hero-k, 0) * -36px), 0); }
.scrub .scroll-hint { display: flex; opacity: calc(1 - var(--hint-k, 0)); }
.scrub .hero.is-gone .hero-content, .scrub .hero.is-gone .hero-facts, .scrub .hero.is-gone .scroll-hint { visibility: hidden; }
.scrub .hero-facts {
  position: sticky; top: 0; z-index: 1; height: 100vh; margin-top: -100vh;
  display: flex; align-items: flex-end; pointer-events: none;
  background: transparent; border: 0; color: var(--white);
  opacity: calc(1 - var(--hero-k, 0)); transform: translate3d(0, calc(var(--hero-k, 0) * -24px), 0);
}
.scrub .hero-facts .wrap { display: flex; justify-content: flex-end; padding-bottom: 4.1rem; }
.scrub .hero-facts .stat-stack { flex: none; max-width: 40%; }
/* The four numbers share one spot and take turns: the current one is up, the ones before it have gone up and out. */
.scrub .facts { display: grid; grid-template-columns: 1fr; padding: 0; border: 0; text-align: right; justify-items: end; }
.scrub .fact {
  grid-area: 1 / 1; padding: 0; border: 0; gap: 0.1rem; align-items: flex-end;
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity 300ms var(--ease-out), transform 460ms var(--ease-out);
}
.scrub .fact.is-on { opacity: 1; transform: none; }
.scrub .fact.is-past { transform: translate3d(0, -26px, 0); }
.scrub .fact dd { align-items: flex-end; gap: 0.1rem; }
.scrub .fact dt { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45); }
.scrub .fact-num { font-size: clamp(2.3rem, 4.2vw, 3.7rem); letter-spacing: -0.035em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45); }
.scrub .fact-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.45); }
.fact-dots { display: none; }
.scrub .fact-dots { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.85rem; }
.scrub .fact-dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.34); transition: background-color 240ms, transform 240ms var(--ease-out); }
.scrub .fact-dots i.is-on { background: var(--white); transform: scale(1.3); }
.scrub .hero-facts .stat-stack { display: grid; justify-items: end; }

/* The sections as paper cards over the film. */
.scrub .section {
  --card-pad: clamp(1.25rem, 4vw, 3.5rem);
  width: min(calc(var(--wrap) + 2 * var(--card-pad)), calc(100% - 2 * var(--gutter)));
  margin: 0 auto clamp(2.5rem, 12vh, 7rem);
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--card-pad);
  background: rgba(247, 246, 242, 0.97);
  border: 0; border-radius: 22px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  scroll-margin-top: 5.5rem;
}
.scrub .section > .wrap { width: 100%; }
.scrub .contact { margin-top: 46vh; }        /* room for the pen tip to meet the paper */

/* The footer on the paper at the end of the film. */
.scrub .site-footer {
  margin-top: clamp(4rem, 14vh, 9rem); padding-top: clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(to bottom, rgba(247, 246, 242, 0) 0%, rgba(247, 246, 242, 0.8) 28%, rgba(247, 246, 242, 0.92) 100%);
  color: var(--ink-2);
}
.scrub .footer-brand .brand-mark, .scrub .footer-brand strong { color: var(--ink); }
.scrub .footer-links a:hover { color: var(--ink); }
.scrub .footer-label, .scrub .footer-bottom { color: var(--muted); }
.scrub .footer-bottom { border-top-color: var(--line); }

/* ---------- Byline (David's small portrait) and outbound links ---------- */
.byline { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.byline .avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--white); box-shadow: 0 8px 18px -10px rgba(23, 31, 46, 0.6);
}
.link-out { color: #1D4ED8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.16em; }
.link-out:hover { color: #1E3A8A; }

/* ---------- Split layout (heading left, body right) ---------- */
.split { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .split-head { position: sticky; top: 6rem; }
}

/* ---------- Problem ---------- */
.problem { border-top: 1px solid var(--line); }
.recognise li {
  font-family: var(--serif); font-weight: var(--fw-quote); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; letter-spacing: -0.01em;
  padding: 1rem 0 1rem 1.4rem; border-bottom: 1px solid var(--line); position: relative;
}
.recognise li::before {
  content: ""; position: absolute; left: 0; top: 1.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--teal);
}
.recognise li:first-child { border-top: 1px solid var(--line); }
.recognise-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .recognise-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.bridge { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 40rem; }
/* One student's words, small, with her picture: a first taste before the full row of testimonials further down. */
.spot-voice {
  margin: 1.5rem 0 0; padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -30px rgba(23, 31, 46, 0.4);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 0.35rem 1rem; align-items: start;
}
.spot-voice-photo { grid-column: 2; grid-row: 1 / span 2; width: 5.5rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 10px; }
.spot-voice-name { grid-column: 1; margin: 0; font-family: var(--serif); font-weight: 650; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--teal-deep); }
.spot-voice blockquote { grid-column: 1; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.spot-voice blockquote p { margin: 0; }
.spot-voice .btn { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
@media (max-width: 400px) {
  .spot-voice { grid-template-columns: 1fr; }
  .spot-voice-photo { grid-column: 1; grid-row: auto; width: 4.5rem; }
}

/* ---------- Two paths ---------- */
.paths { background: var(--paper-deep); }
.path-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .path-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.path {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg);
}
.path h3 { margin-top: 0.25rem; }
.path > p { color: var(--ink-2); }
.path-label { font-size: 0.9375rem; font-weight: 600; margin: 0; color: var(--teal); }
.path-dark { background: var(--ink); color: var(--white); }
.path-dark > p, .path-dark .checks li { color: rgba(255, 255, 255, 0.82); }
.path-dark .path-label { color: #8FD3C4; }
.path-dark .path-note { color: rgba(255, 255, 255, 0.7); }
.path-light { background: var(--white); border: 1px solid var(--line); }
.checks { display: grid; gap: 0.6rem; margin: 0.25rem 0 0.5rem; }
.checks li { position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.95rem; height: 0.55rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  opacity: 0.9;
}
.path-dark .checks li::before { color: #8FD3C4; }
.path-light .checks li::before { color: var(--teal); }
.path-cta { margin-top: auto; padding-top: 0.75rem; display: grid; gap: 0.6rem; }
.path-cta .btn { justify-self: start; }
.path-light .btn-ghost { border-color: var(--ink); }
.path-note { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.paths-help { text-align: center; max-width: 40rem; margin: clamp(2rem, 4vw, 2.75rem) auto 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }
.paths-help a { color: var(--teal-deep); font-weight: 600; }

/* ---------- How it works ---------- */
.steps { display: grid; gap: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .step { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0 0; border-top: 2px solid var(--line); }
  .step:last-child { border-bottom: 0; }
}
.how-figure { max-width: none; }
.step-num { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--teal); letter-spacing: -0.03em; }
.step h3 { font-size: 1.2rem; }
.step p { color: var(--ink-2); margin: 0.35rem 0 0; }
.how-figure { margin: 0; }
.how-figure img { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); }
figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.75rem; line-height: 1.45; }

/* ---------- Proof / story ---------- */
.proof { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-top { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .proof-top { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } .proof-top h2 { position: sticky; top: 6rem; } }
.proof-top h2 { max-width: 14ch; }
.proof-text { max-width: 36rem; font-size: 1.1rem; }
/* Picture hierarchy: the diploma is the proof and gets the big column; the two social pictures sit small beside it. */
.proof-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.proof-figure { margin: 0; }
.proof-figure-main { grid-column: 1 / -1; }
.proof-figure-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proof-figure-side .img-venner { aspect-ratio: auto; object-position: 50% 50%; } /* its own crop, shown whole */
.proof-figure-side .img-tiktok { object-position: 50% 0; }
@media (min-width: 720px) {
  .proof-figures { grid-template-columns: 8fr 5fr; grid-template-rows: auto 1fr; gap: 1.5rem; align-items: stretch; }
  .proof-figure-main { grid-column: 1; grid-row: 1 / span 2; }
  /* The russ photo shows its whole crop (a little above the head down to the russ trousers); the TikTok picture
     below it stretches to fill what is left of the diploma's height. */
  .proof-figure-side { display: flex; flex-direction: column; min-height: 0; }
  .proof-figure-side .figure-link { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .proof-figure-side img { flex: 1 1 auto; min-height: 0; aspect-ratio: 4 / 3; }
  .proof-figure-side .img-venner { flex: none; aspect-ratio: auto; height: auto; }
  .proof-figure-side .img-tiktok { flex: 1 1 0; min-height: 7rem; aspect-ratio: auto; }
  .proof-figure-side figcaption { flex: none; }
}
.figure-link { display: block; border-radius: var(--radius-lg); }
.figure-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.zoomable { cursor: zoom-in; }

/* Lightbox: the image grows smoothly from where it sits on the page to most of the screen. */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none; opacity: 0;
  background: rgba(23, 31, 46, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 320ms var(--ease-out);
}
.lightbox.is-open { display: block; }
.lightbox.is-visible { opacity: 1; }
.lightbox-img {
  position: fixed; left: 0; top: 0; display: block; background: var(--white);
  border-radius: 10px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  transform-origin: top left; will-change: transform; cursor: zoom-out;
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms var(--ease-out);
}
.lightbox-close {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; z-index: 91;
  border: 0; background: var(--white); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}
.lightbox-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-img { transition: none; } }
.proof-figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 24px 48px -32px rgba(23, 31, 46, 0.35); }
.proof-figure figcaption a { color: var(--teal-deep); }

/* Recognise: two groups (elev / forelder) */
.recognise-label { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--teal-deep); }
.faq-group-label { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--teal-deep); }
.faq-list + .faq-group-label { margin-top: 2.5rem; }

/* ---------- Testimonials: an endless roll ---------- */
/* main.js doubles the list and slides it from right to left; the roll stops under the pointer, while a finger holds
   it, when it is off screen, and for people who prefer reduced motion (they get a plain row to scroll sideways).
   Without JavaScript the single list is that same plain row. */
.marquee { --slide-gap: 1.25rem; }
.voice-track {
  display: flex; gap: var(--slide-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 14px; margin-bottom: -14px;          /* room for the cards' shadow */
  scrollbar-width: thin;
}
.voice-slide { flex: none; width: min(24rem, 84vw); display: flex; scroll-snap-align: start; }
.marquee.is-rolling {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee.is-rolling .voice-track { flex: none; overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; }
.marquee-inner {
  display: flex; gap: var(--slide-gap); width: max-content; padding: 4px 0 14px;
  animation: marquee 80s linear infinite; will-change: transform;
}
@keyframes marquee { to { transform: translate3d(calc(-50% - var(--slide-gap) / 2), 0, 0); } }
.marquee:hover .marquee-inner, .marquee:focus-within .marquee-inner,
.marquee.is-held .marquee-inner, .marquee.is-offscreen .marquee-inner { animation-play-state: paused; }
.voice {
  margin: 0; width: 100%; padding: 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 1rem;
}
.voice-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.875rem; }
.tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; letter-spacing: 0.01em; }
.voice-topic { font-weight: 600; color: var(--ink); }
.voice-quote { font-family: var(--serif); font-weight: 450; font-size: 1.0625rem; line-height: 1.55; margin: 0; flex: 1; color: var(--ink); }
.voice footer { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.voice footer div { display: grid; gap: 0.05rem; }
.voice cite { font-style: normal; font-weight: 600; }
.voice footer span { color: var(--muted); }
.voice-avatar { width: 2.75rem; height: 2.75rem; flex: none; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .marquee-inner { animation: none; } }

/* ---------- FAQ ---------- */
.faq { background: var(--white); border-top: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.1rem 0; font-family: var(--serif); font-weight: 550; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.4; letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 0.85rem; height: 0.85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--teal); transition: transform 220ms var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 1.25rem; max-width: 40rem; color: var(--ink-2); }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact { background: var(--paper-deep); }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 4.5rem; align-items: start; } }
.contact-figure { margin: 2rem 0 0; display: none; max-width: 20rem; }
.contact-figure img { border-radius: var(--radius-lg); }
@media (min-width: 900px) { .contact-figure { display: block; } }

.lead-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem;
}
.field { display: grid; gap: 0.4rem; }
.field label, .field-group legend { font-weight: 600; font-size: 0.9375rem; }
.field-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--white);
  transition: border-color 150ms;
}
textarea { resize: vertical; min-height: 6.5rem; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline-offset: 0; }
::placeholder { color: #8A909B; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.6rem;
}
.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice { display: inline-flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; line-height: 1.4; }
.choice-row .choice {
  border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 0.55rem 1rem 0.55rem 0.8rem; align-items: center;
  transition: border-color 150ms, background-color 150ms;
}
.choice-row .choice:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); }
.choice input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--teal); flex: none; }
.field-consent .choice input { margin-top: 0.2rem; }
.field-consent span { font-size: 0.9375rem; color: var(--ink-2); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B42318; }
.field-error { font-size: 0.875rem; color: #B42318; }
.form-note { font-size: 0.9rem; color: var(--muted); margin: -0.4rem 0 0; }
.form-status { display: none; padding: 0.9rem 1rem; border-radius: var(--radius); font-weight: 500; }
.form-status.is-error { display: block; background: #FBEAE7; color: #8A1C12; }
.form-status.is-success { display: block; background: var(--teal-tint); color: var(--teal-deep); }
.lead-form.is-sent > *:not(.form-status) { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.85); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer-brand { display: grid; gap: 1rem; }
.footer-brand .brand-mark { width: 2.4rem; height: 2.4rem; color: var(--white); }
.footer-brand p { margin: 0; line-height: 1.6; }
.footer-brand strong { color: var(--white); font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.footer-links { display: grid; gap: 0.5rem; align-content: start; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.footer-label { margin: 0 0 0.25rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.footer-bottom { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.footer-bottom p { margin: 0; }

/* ---------- Hover ---------- */
/* A faint, soft dip in the background under the pointer: multiply-blended so it slightly deepens whatever
   surface it is over instead of glowing on top of it. Mouse devices only; never on touch. */
.cursor-depth {
  position: fixed; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 90, 78, 0.18) 0%, rgba(20, 90, 78, 0.08) 40%, transparent 66%);
  mix-blend-mode: multiply; pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity 500ms; display: none; will-change: transform;
}
@media (hover: hover) and (pointer: fine) { .cursor-depth { display: block; } }
.cursor-depth.is-on { opacity: 1; }

/* Scroll progress: a thin line along the very top that fills from left to right as the page is read. */
.scroll-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--teal);
  transform-origin: left center; transform: scaleX(0); z-index: 70; pointer-events: none;
}

/* Images pop a little on hover: lift, thin teal outline, deeper shadow. */
.proof-figure img, .how-figure img, .voice-avatar, .spot-voice-photo, .contact-figure img {
  outline: 2px solid transparent; outline-offset: 4px;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), outline-color 260ms var(--ease-out), border-color 260ms;
}
@media (hover: hover) {
  .proof-figure img:hover, .how-figure img:hover, .voice-avatar:hover, .spot-voice-photo:hover, .contact-figure img:hover {
    transform: translateY(-3px) scale(1.015);
    outline-color: var(--teal);
    box-shadow: 0 22px 44px -24px rgba(23, 31, 46, 0.5);
  }
}

/* Offer panels: the one being hovered or chosen lifts and gets a teal edge; the other recedes. */
.path { outline: 2px solid transparent; outline-offset: 0; }
.js .path-grid .path.is-visible { transition: transform 460ms cubic-bezier(0.2, 0.9, 0.3, 1.08), box-shadow 460ms var(--ease-out), opacity 420ms var(--ease-out), outline-color 300ms; }
.js .path-grid .path.is-active { transform: translateY(-6px) scale(1.02); outline-color: var(--teal); box-shadow: 0 34px 64px -34px rgba(23, 31, 46, 0.55); z-index: 1; }
.js .path-grid .path.is-passive { transform: scale(0.975); opacity: 0.72; }
.voice, .lead-form { transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.voice:hover { border-color: var(--line-strong); box-shadow: 0 10px 30px -22px rgba(23, 31, 46, 0.35); }
.faq-list summary { transition: color 160ms; }
.faq-list summary:hover { color: var(--teal-deep); }
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 1.5px; background: var(--teal);
  transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

/* ---------- Motion ---------- */
.hero-title .line, .hero-quote, .hero-actions, .facts {
  animation: rise var(--dur) var(--ease-out) both;
}
.hero-title .line:nth-child(2) { animation-delay: 90ms; }
.hero-quote { animation-delay: 180ms; }
.hero-actions { animation-delay: 260ms; }
.facts { animation-delay: 380ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Reveal-on-scroll only engages when main.js has run (html.js), so content is never hidden without JS. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title .line, .hero-quote, .hero-actions, .facts { animation: none; }
  .hint-chev { animation: none; }
  .scroll-hint { transition: none; }
  .scrub .fact, .scrub .fact-dots i { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .faq-list summary::after { transition: none; }
}