/* MindU People, homepage P1 (faithful structural replica of the IOH capture,
   painted in MindU's client palette per design/brands/mindu.md CAPTURE LOCK).
   Reference: C:\lex\viz\ioh-ref (tokens.json computed 2026-08-26).
   Law: clone-pipeline.md. Zero box-shadows sitewide (captured shadowTokens: none).
   No em or en dashes anywhere in this file. */

:root {
  /* palette: client colours lead (kit role map, mindu.md CAPTURE LOCK) */
  --cream:      #F6EFE6; /* kit: mindu cream ground <- ref canvas #e6e6e6 */
  --paper:      #FBF7F1; /* kit: mindu paper surface <- ref surface #f1f1f1 */
  --navy:       #232B45; /* kit: mindu navy ink <- ref ink #242424 */
  --navy-deep:  #1A2136; /* kit: mindu darkest panel <- ref dark panels/footer #242424 */
  --coral:      #E8927C; /* kit: mindu coral accent <- ref accent duty #e8e2da (bars, chips, circle, underlines) */
  --coral-deep: #D97757; /* kit: mindu deeper coral (chips, underlines) */
  --coral-text: #A34A28; /* kit contrast law: darkened coral variant for text on cream (5.16:1) */
  --ink-soft:   #56618C; /* kit: mindu muted body tone (navy family) */
  --line:       rgba(35, 43, 69, 0.16);    /* kit: navy-tinted hairline on cream <- ref line #d9d9d9 */
  --line-inv:   rgba(246, 239, 230, 0.22); /* cream hairline on navy (ref light-on-dark hairlines) */

  /* type scale: ref is vw-scaled Lay Grotesk 400/500 (tokens.json type block);
     twin = Schibsted Grotesk 400/500 (substitutes.json row, flagged) */
  --fs-h1: clamp(38.25px, 4vw, 64px);        /* ref h1 57.6@1440, 51.2@1280 (4vw) */
  --fs-h2: clamp(22.5px, 3.5vw, 56px);       /* ref band h2 44.8@1280 (3.5vw), 22.5 mobile */
  --fs-cta-h2: clamp(30px, 5.4vw, 86px);     /* ref CTA band h2 69.12@1280 (5.4vw) */
  --fs-body: 14.4px;                          /* ref body 14.4px w400 */
  --fs-sub: clamp(15px, 1.2vw, 17.5px);      /* ref hero sub 15.36@1280 */
  --fs-nav: clamp(12.8px, 1vw, 14.4px);      /* ref nav links 12.8@1280 */
  --fs-btn: clamp(10.5px, 0.9vw, 12.96px);   /* ref button label 11.52@1440 */
  --fs-label: 11.52px;                        /* ref stat/bar labels 11.52 */

  /* shape roles (tokens.json shapeRoles): buttons 5px filled shadowless,
     cards flat radius 0 (media crops 6-16 inside), circles 100% */
  --r-btn: 5px;
  --r-chip: 4px;
  --r-plate: 8px;

  /* spacing rhythm: spacingBase 8 (tokens.json) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
  --pad-x: 32px;      /* ref container inset 32@1280 */
  --header-h: 74px;   /* ref header 74@1280 */
}

/* Schibsted Grotesk 400-500, self-hosted (twin for Lay Grotesk, commercial; kit type direction) */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--cream);
  color: var(--navy);
  font-family: "Schibsted Grotesk", Inter, Arial, sans-serif; /* Inter-class fallback (kit) */
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip; /* never overflow-x hidden on body (Lenis lint) */
  -webkit-font-smoothing: antialiased;
}

/* Lenis boilerplate (never ship native smooth beside Lenis) */
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; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* skip link (a11y; also the in-page anchor Lenis test target) */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 60;
  background: var(--navy); color: var(--cream);
  padding: 10px 16px; border-radius: var(--r-btn);
  font-size: var(--fs-btn);
  transform: translateY(-64px); opacity: 0;
}
.skip:focus-visible { transform: none; opacity: 1; }

:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 2px; }

/* ============ header (ref: fixed hairline nav, theme flip by covered section) ============ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 44; /* above the menu overlay (42): brand + hamburger X stay reachable while open */
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 var(--pad-x);
  background: transparent;
  transition: color 0.25s ease;
}
.header-inner { display: flex; align-items: center; width: 100%; gap: var(--s4); }
/* theme states: is-dark = navy chrome (over light sections), is-light = cream chrome (over dark).
   MindU value inversion of ref dynamic-header (M2), driven by covered-section boundaries. */
.header.is-dark { color: var(--navy); }
.header.is-light { color: var(--cream); }

.brand { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: baseline; gap: 6px; }
.brand small {
  font-size: 9.5px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--coral-text); /* kit: PEOPLE letterspaced coral caps (flyer A type lockup), darkened text variant on cream per the kit contrast law */
}
.header.is-light .brand small { color: var(--coral); }

.nav-links { display: flex; gap: var(--s3); margin-left: auto; margin-right: auto; }
.nav-links a { font-size: var(--fs-nav); letter-spacing: -0.19px; opacity: 0.92; }
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--coral-deep); } /* kit: coral underline duty */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--r-btn); /* tokens: button radius 5px, filled, no border, no shadow */
  padding: 14px 24px;          /* tokens: 14x24 */
  font-size: var(--fs-btn); font-weight: 400; letter-spacing: -0.19px;
  background: var(--navy); color: var(--cream); /* value inversion: dark fill on light canvas */
}
.btn:hover { background: var(--navy-deep); }
.btn .arr { width: 12px; height: 12px; flex: 0 0 auto; }

/* P2 nitpick (Lex's candidate, 2026-08-26): the translucent pill read quiet grey.
   Coral fill REJECTED by the kit accent law (coral duty = bars, chips, circle,
   underlines, dots, labels-on-navy; emphasis is by INVERSION, never hue).
   Navy fill IS the inversion grammar (.btn's own default), so the pill takes it:
   solid navy on light chrome, solid cream on dark chrome. */
.header-btn { background: var(--navy); color: var(--cream); }
.header-btn:hover { background: var(--navy-deep); }
.header.is-light .header-btn { background: var(--cream); color: var(--navy); }
.header.is-light .header-btn:hover { background: var(--paper); }

/* P2 nitpick 2026-08-26: 40px hamburger was under the 44px tap-target floor */
.hamburger { display: none; width: 44px; height: 44px; position: relative; z-index: 45; }
.hamburger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: currentColor; transition: transform 0.25s ease, top 0.25s ease;
}
.hamburger .line_f { top: 17px; }
.hamburger .line_s { top: 25px; }
.menu-open .hamburger .line_f { top: 21px; transform: rotate(45deg); }
.menu-open .hamburger .line_s { top: 21px; transform: rotate(-45deg); }

/* mobile menu overlay (real menu; ref forces a header theme while open) */
.menu-overlay {
  position: fixed; inset: 0; z-index: 42;
  background: var(--navy-deep); color: var(--cream);
  display: grid; align-content: center; gap: var(--s3);
  padding: var(--s8) var(--pad-x);
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu-open .menu-overlay { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.menu-overlay a { font-size: clamp(28px, 7vw, 40px); font-weight: 500; line-height: 1.2; }
.menu-overlay .menu-mail { font-size: var(--fs-sub); font-weight: 400; color: var(--coral); margin-top: var(--s4); }

/* ============ hero (ref grammar: sticky full-bleed backdrop, page covers it; ============
   3-line H1 bottom-left + sub, stat side-panel top-right, CTA card bottom-right.
   MindU: still identity illustration on cream (kit imagery stack), navy ink over it. */
.hero {
  position: sticky; top: 0; z-index: 1; /* ref: hero z7, content scrolls over at z35 */
  height: 100vh; height: 100svh;
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* contrast scrim for text zones (NG-16); soft cream, keeps the art legible */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(246, 239, 230, 0.94) 0%, rgba(246, 239, 230, 0.62) 36%, rgba(246, 239, 230, 0) 60%),
              linear-gradient(0deg, rgba(246, 239, 230, 0.88) 0%, rgba(246, 239, 230, 0.3) 30%, rgba(246, 239, 230, 0) 46%);
  /* the ref hero ships its own overlay scrim (.overlay_video); ours protects the
     H1 zone where the art's dark figure crosses it (NG-16 floor) */
}
.hero-wrap { position: relative; z-index: 1; height: 100%; }

/* stat side-panel (ref hero_list: 3 hairline blocks, count-ups; MindU slots carry the
   client's own strap words, never invented numbers) */
.hero-stats {
  position: absolute; top: 102px; right: var(--pad-x);
  width: clamp(240px, 23.75vw, 342px); /* ref 304@1280 */
  display: grid; gap: 0;
}
.stat { padding: 14px 0 22px; border-top: 1px solid var(--line); position: relative; }
.stat .stat-bar { position: absolute; top: -1px; left: 0; height: 1px; width: 0%; background: var(--coral-deep); } /* kit: coral progress duty */
.stat-head { display: flex; justify-content: space-between; align-items: center; }
.stat-label { font-size: var(--fs-label); letter-spacing: 0.12px; color: var(--ink-soft); }
.dots_flex { display: flex; gap: 5px; }
.dot_small { width: 4px; height: 4px; border-radius: 100%; background: rgba(35, 43, 69, 0.25); }
.dot_small.active { background: var(--coral-deep); } /* kit: coral dot duty */
.stat-word { font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; line-height: 1; margin-top: 18px; } /* ref number 32@1280 */

.hero-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad-x) var(--s6);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4);
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1;            /* ref 57.6/57.6 */
  font-weight: 500;
  letter-spacing: -0.216px;  /* ref h1 tracking */
  max-width: 11em;           /* holds the ref 3-line composition */
}
.hero-sub { font-size: var(--fs-sub); line-height: 1.5; max-width: 34em; margin-top: var(--s2); color: var(--navy); }

/* CTA card (ref Learn More card: plate, label top-left, arrow bottom-right) */
.cta-card {
  display: flex; flex-direction: column; justify-content: space-between;
  width: clamp(170px, 15vw, 216px); min-height: 90px;
  padding: 12px 12px 10px;
  border-radius: var(--r-btn);
  background: rgba(35, 43, 69, 0.92); color: var(--cream); /* value inversion of ref translucent light plate */
  font-size: var(--fs-btn); letter-spacing: -0.19px;
}
.cta-card .arr { align-self: flex-end; width: 14px; height: 14px; }
.cta-card:hover { background: var(--navy); }

/* ============ cover stack: everything after the hero scrolls OVER it ============ */
.cover { position: relative; z-index: 2; background: var(--cream); }

section { position: relative; }
.band { background: var(--cream); }

/* band heading block (ref: heading over band content, 3.5vw) */
.band-head { padding-top: var(--s12); padding-bottom: var(--s8); }
.band-head h2 { font-size: var(--fs-h2); line-height: 1; font-weight: 500; letter-spacing: -0.2px; max-width: 18em; }

/* ============ word-scrub band (ref [scrub-each-word] giant text, M5; used twice
   like the ref's own /about double use) ============ */
.scrub-band { min-height: 100vh; display: grid; align-items: center; }
.scrub-words {
  font-size: clamp(24.4px, 3.9vw, 62px); /* ref .bg_txt 49.92@1280, 24.375@375 */
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.2px;
  max-width: 24em;
}
.scrub-words .w { opacity: 1; } /* JS scrubs from 0.15; static/reduced = full */

/* ============ specialisms (ref /courses editorial card grammar + M4 focus scrub) ============ */
.spec-card {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: clip;
  will-change: transform, filter;
}
.spec-media { position: absolute; inset: 0; z-index: 0; }
.spec-media img { width: 100%; height: 100%; object-fit: cover; }
.spec-content { position: relative; z-index: 1; padding: calc(var(--header-h) + 24px) var(--pad-x) var(--s6); height: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.spec-tags { display: flex; gap: 8px; font-size: 12.8px; }
.spec-tags .b_txt { color: var(--ink-soft); }
.spec-headline { margin-top: var(--s2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.spec-headline h3 { font-size: var(--fs-h1); line-height: 1; font-weight: 500; letter-spacing: -0.216px; } /* ref course_heading = h1 scale */
.spec-btn { background: rgba(35, 43, 69, 0.1); color: var(--navy); } /* ref translucent Explore More, value-inverted */
.spec-btn:hover { background: rgba(35, 43, 69, 0.18); color: var(--navy); }
.spec-flex { margin-top: auto; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 44%); justify-content: space-between; gap: var(--s4); align-items: end; }
.spec-label { font-size: var(--fs-label); font-weight: 400; color: var(--ink-soft); margin-bottom: 10px; } /* weight pinned: P2 puts the class on semantic h2s (no-op for the P1 divs) */
.spec-overview p { font-size: var(--fs-body); line-height: 1.55; max-width: 30em; }
.spec-roles .divider { height: 1px; background: var(--line); margin-bottom: var(--s2); } /* ref divider_course hairline */
.spec-roles ul { display: grid; gap: 6px; }
.spec-roles li { font-size: var(--fs-body); line-height: 1.4; padding-left: 14px; position: relative; }
.spec-roles li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 100%; background: var(--coral-deep); } /* kit: coral marker duty */

/* ============ signature pinned scrub scene (proven proto, motion.md M1) ============ */
.section_scroll { position: relative; }
.fixed_scroll_section {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(35, 43, 69, 0) 0%, rgba(10, 14, 26, 0.45) 100%),
    var(--navy-deep); /* kit: navy-deep carries the ref's dark cinematic backdrop */
  color: var(--cream);
}
.number_circle {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 100%; /* tokens radii: 100% circles */
  border: 1.5px solid var(--coral); /* kit: coral number-circle duty */
  display: grid; place-items: center;
  font-size: var(--fs-body); font-weight: 500; color: var(--cream);
}
.center_stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1000px; text-align: center; padding: 0 var(--s3); }
.center_txt { grid-area: 1 / 1; opacity: 0; max-width: 880px; }
.center_txt .line_wrap { overflow: visible; perspective: 900px; }
.center_txt .line { display: block; transform-style: preserve-3d; will-change: transform, opacity, filter; }
.center_txt .line.t { font-size: var(--fs-h1); line-height: 1; font-weight: 500; letter-spacing: -0.216px; }
.center_txt .line.r { margin-top: 20px; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.35; font-weight: 400; color: rgba(246, 239, 230, 0.78); }
.central_words {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  display: flex; justify-content: space-between; padding: 0 3.5vw; pointer-events: none;
}
.tag_flex { text-align: center; opacity: 0; font-size: clamp(11px, 1.15vw, 16.5px); will-change: transform, opacity, filter; }
.tag_flex .dot { width: 4px; height: 4px; border-radius: 100%; background: var(--coral); margin: 8px auto 0; }
.bars { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); display: flex; gap: var(--s2); width: min(52vw, 560px); }
.bar { flex: 1; height: 2px; background: var(--line-inv); position: relative; }
.bar .active_bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--coral); } /* kit: coral bar duty */

/* static final storyboard state (reduced motion or noanim capture) */
.scene-static .fixed_scroll_section { position: relative; }
.scene-static .center_txt { opacity: 0; }
.scene-static .center_txt._3 { opacity: 1; }
.scene-static .center_txt .line { transform: none; filter: none; opacity: 1; }
.scene-static .bar .active_bar { width: 100%; }
.scene-static .tag_flex { opacity: 0; }

/* ============ why partner (ref .sides editorial split: heading left, list right,
   chips, dark CTA card, vertical hairline; ref band is TIGHT, 0.44vh) ============ */
.band-why { padding: 40px 0; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); position: relative; }
.why-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); } /* ref vertical divider */
.why-head { display: flex; flex-direction: column; justify-content: space-between; } /* ref sides: heading top, chips bottom */
.why-head h2 { font-size: var(--fs-h2); line-height: 1.05; font-weight: 500; letter-spacing: -0.2px; max-width: 10em; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s8); }
.chip {
  font-size: 12.8px; padding: 10px 14px;
  border-radius: var(--r-chip);
  background: rgba(232, 146, 124, 0.22); color: var(--navy); /* kit: coral chip duty on cream; ref chips are filled plates */
}
.why-right { display: flex; flex-direction: column; gap: var(--s6); }
.why-list { display: grid; }
.why-list li { padding: 18px 0; border-top: 1px solid var(--line); font-size: var(--fs-sub); line-height: 1.4; }
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-card {
  align-self: flex-end;
  display: flex; flex-direction: column; justify-content: space-between;
  width: clamp(200px, 18.3vw, 264px); min-height: 66px; /* ref About Us card 235x65@1440 */
  padding: 12px 12px 10px; border-radius: var(--r-btn);
  background: var(--navy); color: var(--cream);
  font-size: var(--fs-btn); letter-spacing: -0.19px;
}
.why-card .arr { align-self: flex-end; width: 13px; height: 13px; }
.why-card:hover { background: var(--navy-deep); }

/* ============ sectors (ref seminar center-mode infinite drag carousel, M6;
   ref band 1.05vh at 1280) ============ */
.band-sectors { padding-bottom: var(--s12); overflow: clip; }
.band-sectors .band-head { padding-top: 128px; }
.sector-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.sector-count { font-size: var(--fs-label); color: var(--ink-soft); display: flex; gap: 4px; align-items: baseline; }
.sector-count .roll { display: inline-block; overflow: clip; height: 1.2em; }
.sector-count .roll span { display: inline-block; }
.sec-carousel { cursor: grab; }
.sec-carousel.is-grabbing { cursor: grabbing; }
.sec-track { display: flex; gap: var(--s2); will-change: transform; }
.sec-slide {
  flex: 0 0 auto; width: clamp(260px, 27vw, 400px); min-height: clamp(300px, 56vh, 520px);
  border-radius: var(--r-plate); /* ref dark cards 5-8px, shadowless */
  background: var(--navy); color: var(--cream);
  padding: var(--s3);
  display: flex; flex-direction: column; justify-content: space-between;
  user-select: none;
}
.sec-slide .sec-index { font-size: var(--fs-label); color: var(--coral); } /* kit: coral accent moment */
.sec-slide .sec-name { font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.3; max-width: 11em; }
.sec-slide.is-active { background: var(--navy-deep); }
/* static fallback (reduced motion / noanim): native scroll row */
.sec-carousel.is-static { overflow-x: auto; scroll-snap-type: x mandatory; }
.sec-carousel.is-static .sec-track { width: max-content; }
.sec-carousel.is-static .sec-slide { scroll-snap-align: center; }

/* ============ closing strap + CTA (ref just_beginning full-bleed media band, 1.35vh) ============ */
.band-closing { position: relative; min-height: 135vh; display: grid; align-items: center; overflow: clip; }
.closing-media { position: absolute; inset: 0; }
.closing-media img { width: 100%; height: 100%; object-fit: cover; }
.closing-media::after { content: ""; position: absolute; inset: 0; background: rgba(246, 239, 230, 0.42); } /* cream scrim, NG-16 */
.closing-inner { position: relative; z-index: 1; padding-top: var(--s12); padding-bottom: var(--s12); }
.closing-inner h2 { font-size: var(--fs-cta-h2); line-height: 1; font-weight: 500; letter-spacing: -0.3px; max-width: 11em; }
.closing-inner p { margin-top: var(--s3); font-size: var(--fs-sub); max-width: 30em; }
.closing-inner .btn { margin-top: var(--s6); }

/* ============ footer (ref: dark ground, 3 link columns, giant wordmark moment, 0.98vh) ============ */
.footer { background: var(--navy-deep); color: var(--cream); padding-top: 200px; overflow: clip; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); padding-bottom: 200px; }
.footer-wordmark { margin-top: var(--s12); }
.f-label { font-size: var(--fs-label); color: var(--coral); margin-bottom: var(--s2); } /* kit: coral label duty on navy */
.footer-grid a, .footer-grid p { font-size: 12.96px; font-weight: 500; line-height: 2; opacity: 0.92; } /* ref footer links 11.52-12.96 w500 */
.footer-grid a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--coral); }
.footer-wordmark {
  font-size: 13.2vw; /* ref device: full-bleed wordmark moment (191.52 for a 19-char string at 1440); solved for MindU's 12-char lockup */
  line-height: 0.95; font-weight: 500; letter-spacing: -0.02em;
  white-space: nowrap; text-align: center;
  padding: 0 8px 28px; /* descender clearance above the legal row */
}
.footer-wordmark .pe { color: var(--coral); } /* flyer A lockup: PEOPLE carries the coral */
.footer-legal { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--pad-x) var(--s4); border-top: 1px solid var(--line-inv); font-size: var(--fs-label); opacity: 0.8; flex-wrap: wrap; }

/* ============ mobile (ref sections.mobile.json: single column, 64px bar, hamburger) ============ */
@media (max-width: 991px) {
  .nav-links, .header-btn { display: none; }
  .hamburger { display: block; margin-left: auto; }
  :root { --header-h: 64px; --pad-x: 16px; }
}
@media (min-width: 992px) {
  .menu-overlay { display: none; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 38.25px; line-height: 1.1; letter-spacing: -0.056px; } /* ref h1Mobile 38.25/42.075; MindU's longer verbatim headline wraps 4 lines at 375 (documented hero-diff divergence, information preservation wins over the ref's 3-line count) */
  /* the portrait cover-crop pulls the art's navy tabletop under the H1 zone;
     deepen the bottom scrim so the headline holds the 3:1 floor (NG-16) */
  .hero-media::after {
    background: linear-gradient(0deg, rgba(246, 239, 230, 0.96) 0%, rgba(246, 239, 230, 0.85) 36%, rgba(246, 239, 230, 0.5) 54%, rgba(246, 239, 230, 0) 70%),
                linear-gradient(180deg, rgba(246, 239, 230, 0.8) 0%, rgba(246, 239, 230, 0) 26%);
  }
  .hero-sub { font-size: 15px; line-height: 1.5; }
  .hero-stats { top: 96px; left: var(--pad-x); right: var(--pad-x); width: auto; }
  /* ref mobile: stat blocks absolute-stacked in ONE crossfading slot */
  .hero-stats { display: grid; }
  .hero-stats .stat { grid-area: 1 / 1; }
  .hero-bottom { flex-direction: column; align-items: flex-start; padding-bottom: var(--s4); }
  .cta-card { width: 100%; min-height: 74px; }
  .band-head { padding-top: var(--s8); padding-bottom: var(--s6); }
  .scrub-words { font-size: 24.4px; } /* ref mobile band 24.375 */
  .spec-card, .spec-content { min-height: 92vh; }
  .spec-headline h3 { font-size: 34px; }
  .spec-flex { grid-template-columns: 1fr; align-items: start; gap: var(--s4); }
  .why-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .why-grid::before { display: none; }
  .why-right { gap: var(--s4); }
  .why-list li { padding: 12px 0; }
  .chips { margin-top: var(--s4); }
  .why-card { align-self: stretch; width: 100%; min-height: 60px; }
  .sec-slide { width: 78vw; min-height: 56vh; }
  .band-closing { min-height: 100vh; } /* ref mobile just_beginning 1.0 */
  .closing-inner h2 { font-size: 34px; }
  .footer { padding-top: 112px; }
  .footer-grid { padding-bottom: var(--s8); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s4); padding-bottom: var(--s8); }
  .footer-legal { flex-direction: column; gap: 6px; }
}

/* stat static state (reduced motion / noanim): all visible, bars full, no loops */
.stats-static .stat { opacity: 1 !important; transform: none !important; }
.stats-static .stat .stat-bar { width: 100% !important; }
@media (max-width: 767px) {
  .stats-static .hero-stats .stat { position: static; grid-area: auto; } /* stack all three, no cycle */
}

/* reduced motion: real guard (the reference ships none; ours is real).
   JS also exits early; these CSS states are the belt AND braces. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================
   P2 inner pages (2026-08-26): extensions IN the locked system.
   Vocabulary reused, nothing restyled: band/container rhythm, hairline
   rows, spec-roles component, .sides split grammar, btn grammar,
   coral accent duty per the kit. No box-shadows, no new hues.
   ================================================================ */

/* Caveat: the client's own flyer-A script device (script-overlay band).
   ONE line sitewide, contact page only. Self-hosted latin subset. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* page header block: eyebrow + display title */
.page-head { padding-top: calc(var(--header-h) + var(--s8)); padding-bottom: var(--s6); }
.page-eyebrow { font-size: var(--fs-label); color: var(--ink-soft); letter-spacing: 0.12px; margin-bottom: var(--s2); }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.02; font-weight: 500; letter-spacing: -0.216px; max-width: 13em; }
.page-head h1.scrub-words { font-size: clamp(24.4px, 3.9vw, 62px); line-height: 1.3; letter-spacing: -0.2px; max-width: 24em; }

/* page frame: contained identity art (flat cards crop media 6-16px inside; 8px here) */
.frame-band { padding-bottom: var(--s8); }
.page-frame img { width: 100%; height: auto; border-radius: var(--r-plate); }

/* specialism editorial rows (the /courses editorial grammar flattened to rows;
   the role lists reuse the spec-roles component). Wayfinding icons: the four
   homepage marks recur here SMALL beside their headings, the studio wayfinding
   exemption (gate-repeats mark-* carve-out, logged in substitutes.json). */
.spec-rows { padding-bottom: var(--s12); }
.spec-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  justify-content: space-between; gap: var(--s4); align-items: start;
  border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s8);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row-head { display: flex; gap: var(--s3); align-items: flex-start; }
.way-icon { width: 64px; height: 64px; border-radius: var(--r-plate); flex: 0 0 auto; border: 1px solid var(--line); } /* hairline defines the plate on the near-same cream ground (P2 walk) */
.spec-row h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; font-weight: 500; letter-spacing: -0.2px; }
.spec-row-line { margin-top: 10px; font-size: var(--fs-body); line-height: 1.55; max-width: 26em; }

/* approach: mission split (.sides editorial split grammar) */
.mission-grid {
  display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 62%);
  justify-content: space-between; gap: var(--s4);
  border-top: 1px solid var(--line);
  padding-top: var(--s6); padding-bottom: var(--s8);
  /* explicit top/bottom, never the padding shorthand: it silently zeroes a
     container's horizontal inset (caught in the P2 walk, 2026-08-26) */
}
.mission-txt { font-size: clamp(22px, 2.6vw, 40px); line-height: 1.3; font-weight: 500; letter-spacing: -0.2px; max-width: 20em; } /* 1.3 = the system's big-statement leading (scrub-words); detect tight-leading fix */

/* approach: values rows */
.values-rows { padding-bottom: var(--s8); }
.values-head { padding-bottom: var(--s4); }
.values-head h2 { font-size: var(--fs-h2); line-height: 1.05; font-weight: 500; letter-spacing: -0.2px; }
.value-row {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 44%);
  justify-content: space-between; gap: var(--s4);
  border-top: 1px solid var(--line); padding: var(--s3) 0 var(--s4);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row h3 { font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.3; } /* matches .sec-name leading */
.value-row p { font-size: var(--fs-sub); line-height: 1.5; }

/* approach close strap */
.band-approach-close { padding: var(--s12) 0; }
.band-approach-close .container { display: flex; flex-direction: column; align-items: flex-start; }
.closing-strap { font-size: var(--fs-h2); line-height: 1.05; font-weight: 500; letter-spacing: -0.2px; max-width: 14em; }
.band-approach-close .btn { margin-top: var(--s6); }

/* contact: one action, one grace note */
.contact-hero { min-height: 92vh; min-height: 92svh; display: grid; align-items: center; }
.contact-inner { display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--header-h) + var(--s6)); padding-bottom: var(--s8); }
.contact-hero h1 { font-size: var(--fs-h1); line-height: 1.02; font-weight: 500; letter-spacing: -0.216px; max-width: 11em; }
.contact-action { margin-top: var(--s4); font-size: var(--fs-sub); padding: 18px 28px; }
.script-plate {
  margin-top: var(--s8); background: var(--navy-deep); color: var(--cream);
  border-radius: var(--r-plate); padding: var(--s4);
  max-width: 30em; /* flyer A's script-overlay band, reproduced small and quiet */
}
.script-note { font-family: "Caveat", "Schibsted Grotesk", sans-serif; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; font-weight: 500; }
.contact-reply { margin-top: var(--s3); font-size: var(--fs-body); color: var(--ink-soft); }

/* 404 */
.notfound { min-height: 88vh; min-height: 88svh; display: grid; align-items: center; }
.notfound-inner { display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--header-h) + var(--s6)); padding-bottom: var(--s8); }
.notfound h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -0.2px; }
.notfound .btn { margin-top: var(--s4); }

/* active nav state: CSS keyed off the body class so the shared shell stays
   byte-identical across pages (allpages shell-hash law); coral underline duty */
.page-specialisms .nav-links a[href="specialisms.html"],
.page-approach .nav-links a[href="approach.html"],
.page-contact .nav-links a[href="contact.html"] {
  opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--coral-deep);
}
.page-specialisms .menu-overlay a[href="specialisms.html"],
.page-approach .menu-overlay a[href="approach.html"],
.page-contact .menu-overlay a[href="contact.html"] {
  text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--coral);
}

@media (max-width: 767px) {
  .page-head { padding-top: calc(var(--header-h) + var(--s6)); }
  .spec-row { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0 var(--s6); }
  .way-icon { width: 52px; height: 52px; }
  .spec-row h2 { font-size: 28px; }
  .mission-grid { grid-template-columns: 1fr; gap: var(--s2); padding-top: var(--s4); padding-bottom: var(--s6); }
  .value-row { grid-template-columns: 1fr; gap: 8px; padding: var(--s3) 0; }
  .contact-hero { min-height: 88vh; min-height: 88svh; }
  .contact-action { width: 100%; justify-content: space-between; }
}