/* ==========================================================================
   ICTOB Craft-style redesign — base, components, sections, motion (spec §4–§7)
   Requires tokens.css first.
   ========================================================================== */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Component classes that set `display` (e.g. `.btn { display: inline-flex }`)
   silently beat the `hidden` attribute, because the UA rule
   `[hidden] { display: none }` is only a normal declaration. Project-wide guard
   so `el.hidden = true` always actually hides — JS relies on this.
   Do not remove without auditing every `hidden` toggle in app.js / pages.js /
   team.js / events.js / syllabus.js / winners.js. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
:target { scroll-margin-top: 92px; }

::selection { background: rgba(112, 40, 192, .18); }

/* Bangla (spec §9.3) */
:lang(bn) { line-height: 1.75; letter-spacing: 0; }

/* Skip link */
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font: 600 14px var(--sans);
  transform: translateY(-64px); transition: transform var(--t-fast) var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---------- Typography (spec §4.2) ---------- */
h1, h2, h3, .h-serif {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3,
h1 :lang(bn), h2 :lang(bn), h3 :lang(bn) { letter-spacing: 0; line-height: 1.4; }
em, .it { font-style: italic; font-weight: 400; }

.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow--brand { color: var(--brand); }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.caption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.quote-serif { font: italic 400 clamp(20px, 2.2vw, 30px)/1.3 var(--serif); }

/* ---------- Layout ---------- */
.wrap { width: var(--content); margin-inline: auto; }
.section { padding-block: calc(var(--section-y) / 2); }
.section--cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.stack > * + * { margin-top: var(--stack, 20px); }

/* Grain utility — pre-rendered 128px tile, no feTurbulence (spec §4.7) */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: url('../img/grain.png'); background-size: 128px;
  opacity: .045; pointer-events: none;
}

/* Halftone dots (spec §4.7) */
.halftone {
  background-image: radial-gradient(rgba(12, 10, 20, .14) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
}

/* ---------- Buttons (spec §4.3) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px;
  border-radius: var(--r-pill);
  font: 600 15.5px/1.2 var(--sans);
  text-align: center; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--light { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: var(--sh-1); }
.btn--white { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 14.5px; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { background: #1b1b1d; }
  .btn--light:hover { background: #fff; }
}
.btn:active { transform: scale(.98); }

/* Visually hidden but available to assistive tech (live regions, labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Standalone arrow links: the hit area is padded out to 44 px without moving the
   text, so card/footer rhythm is unchanged but the target meets spec §9.2. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-block: 12px; margin-block: -12px;
  font: 500 15px var(--sans); color: var(--ink);
}
.link-arrow .ic { transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) { .link-arrow:hover .ic { transform: translateX(3px); } }

/* ---------- Icons (spec §4.5) ---------- */
.ic { width: 24px; height: 24px; flex: none; }
.ic use { pointer-events: none; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Focus (spec §9.2) ---------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (forced-colors: active) {
  .btn--primary { border: 1px solid ButtonText; }
  .card, .panel { border: 1px solid CanvasText; }
}

/* ==========================================================================
   Navigation pill (spec §4.6)
   ========================================================================== */
.nav { position: fixed; inset: 12px 0 auto 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: min(1120px, calc(100% - 32px));
  height: 56px; padding: 0 8px 0 20px;
  border-radius: var(--r-pill);
  background: rgba(250, 248, 246, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-nav);
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex: none; }

/* ------------------------------------------------------------------ *
 * Brand lockup — the supplied raster logo had a hairline "BANGLADESH"
 * and an all-but-invisible "beta" / tagline. The mark is kept as an image
 * (it is a shape, not type) and the wordmark is typeset so weights and
 * contrast are ours to control. Colours sampled from the original file.
 * ------------------------------------------------------------------ */
.brandmark {
  --bm-blue: #3a5aa8;      /* darkened from the source #536fb3 for AA contrast */
  --bm-green: #1e8039;     /* darkened from the source #2ea24b */
  --bm-ink: #4a4556;
  display: inline-flex; align-items: center; gap: 9px;
  flex: none; text-decoration: none;
}
.brandmark__sym { height: 34px; width: auto; display: block; flex: none; }
.brandmark__type { display: grid; gap: 1px; line-height: 1; }
.brandmark__name { display: flex; align-items: flex-start; gap: 2px; }
.brandmark__ict {
  font: 800 15.5px / 1 var(--sans);
  letter-spacing: .055em; color: var(--bm-blue);
  white-space: nowrap;
}
.brandmark__r { font: 700 7.5px / 1 var(--sans); color: #d0342c; font-style: normal; margin-top: -1px; }
.brandmark__bd { display: flex; align-items: center; gap: 4px; }
.brandmark__bdword {
  font: 700 12.5px / 1 var(--sans);
  letter-spacing: .17em; color: var(--bm-green);
  white-space: nowrap;
}
.brandmark__beta {
  font: 700 7.5px / 1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: #5b3f96;
  padding: 3px 5px; border-radius: 3px;
}
.brandmark__tag {
  font: 600 7.5px / 1 var(--sans);
  letter-spacing: .045em; color: var(--bm-ink);
  white-space: nowrap; margin-top: 1px;
}

/* The footer logo sits on its own white chip (see .footer__logo), NOT directly
   on the dark panel — so it keeps the light-ramp colours from .brandmark and
   must not inherit a white-on-white override. */
.footer .brandmark__sym { height: 32px; }
.footer .brandmark__ict { font-size: 17px; }
.footer .brandmark__bdword { font-size: 13.5px; }
.footer .brandmark__tag { font-size: 8px; }

@media (max-width: 900px) {
  /* below the breakpoint the nav collapses to a sheet; the mark alone reads
     better than a 3-line lockup squeezed against the burger */
  .nav .brandmark__tag { display: none; }
}
@media (max-width: 520px) {
  .nav .brandmark__bdword { font-size: 11px; letter-spacing: .12em; }
  .nav .brandmark__ict { font-size: 13.5px; }
  .nav .brandmark__sym { height: 30px; }
}
.nav__links { display: flex; align-items: center; gap: 4px; font: 500 15px/1 var(--sans); list-style: none; margin: 0; padding: 0; }
.nav__links > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 10px 14px; border-radius: var(--r-pill);
  color: var(--ink); opacity: .85;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
@media (hover: hover) { .nav__link:hover { opacity: 1; background: rgba(12, 10, 20, .05); } }
.nav__link .ic { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.nav__links [aria-expanded="true"] > .nav__link .ic { transform: rotate(180deg); }
.nav__cta { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__login {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px; border-radius: var(--r-pill);
  font: 500 15px var(--sans); opacity: .85;
}
@media (hover: hover) { .nav__login:hover { opacity: 1; background: rgba(12, 10, 20, .05); } }

/* Dropdown cards */
.nav__drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 240px; padding: 10px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 20px; box-shadow: var(--sh-2);
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease), visibility 160ms;
  list-style: none;
}
.nav__links li:hover > .nav__drop,
.nav__links li:focus-within > .nav__drop,
.nav__links [aria-expanded="true"] > .nav__drop {
  transform: translate(-50%, 0); opacity: 1; visibility: visible;
}
.nav__drop a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 12px;
  font: 500 14px/1.3 var(--sans); color: var(--ink);
}
@media (hover: hover) { .nav__drop a:hover { background: rgba(12, 10, 20, .05); } }
.nav__drop .ic { width: 13px; height: 13px; color: var(--ink-3); }
.nav__sub {
  display: none; list-style: none; padding: 2px 0 4px 14px; margin: 0 6px 4px;
  border-left: 1px solid var(--line);
}
.nav__sub a { font-size: 13.5px; color: var(--ink-2); padding-block: 6px; }
.nav__group:hover .nav__sub, .nav__group:focus-within .nav__sub { display: block; }
.nav__grouphead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font: 600 13px/1.3 var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  border-radius: 12px; cursor: default;
}

/* Mobile menu button + sheet */
.nav__burger { display: none; }
.sheet { display: none; }

/* ==========================================================================
   S1 — Hero (spec §6 S1)
   ========================================================================== */
.hero { margin: 12px var(--gutter) 0; }
.hero__panel {
  position: relative; overflow: clip;
  border-radius: var(--r-xl);
  background: var(--panel-sky);
  box-shadow: var(--sh-2);
  padding: clamp(96px, 12vh, 148px) clamp(20px, 4vw, 48px) 0;
  isolation: isolate;
}
.hero__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.hero__inner { position: relative; width: min(880px, 100%); margin-inline: auto; text-align: center; }
.hero__eyebrow { margin-bottom: 18px; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero .lede { margin: 22px auto 0; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero__note { margin-top: 14px; }
.hero__media {
  position: relative; width: min(960px, 100%);
  margin: clamp(36px, 6vh, 64px) auto -2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: clip;
  box-shadow: var(--sh-2);
}
.hero__media img { width: 100%; }

/* Notice card (real site announcement — kept verbatim) */
.notice { margin-top: 22px; }
.notice__card {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 840px; margin-inline: auto;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 18px 22px;
}
.notice__card .ic { color: var(--brand); margin-top: 3px; }
.notice__label {
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; margin-top: 6px;
}
.notice__text { font-size: 15px; line-height: 1.8; color: var(--ink-2); }

/* ==========================================================================
   S2 — Value statement + audience row (spec §6 S2)
   ========================================================================== */
.value h2 { max-width: 19ch; margin-inline: auto; }
.value .lede { margin-top: 18px; }
.audience {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 54px);
  margin-top: clamp(36px, 5vw, 64px); padding: 0; list-style: none;
}
.audience a { display: grid; justify-items: center; gap: 12px; min-width: 88px; }
.audience .ic-wrap {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-1);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.audience b { font: 600 14px/1.25 var(--sans); }
@media (hover: hover) {
  .audience a:hover .ic-wrap { transform: translateY(-4px); box-shadow: var(--sh-2); }
}

/* Stats band (real counters; M12 count-up) */
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  width: var(--content); margin-inline: auto; padding: 0; list-style: none;
  text-align: center;
}
.stats li { padding: 22px 8px; border-radius: var(--r-md); }
.stats b {
  display: block; font: 400 clamp(30px, 3.4vw, 46px)/1.05 var(--serif);
  letter-spacing: -0.015em;
}
.stats span { font: 500 13.5px var(--sans); color: var(--ink-2); }

/* ==========================================================================
   Strips (spec §7 M8)
   ========================================================================== */
.strip {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-inline: max(20px, calc((100vw - 1200px) / 2));
  scroll-padding-inline: max(20px, calc((100vw - 1200px) / 2));
  padding-block: 8px 22px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: none; scroll-snap-align: start; }
.strip-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  width: var(--content); margin-inline: auto;
}
.strip-nav { display: flex; gap: 8px; }
.strip-nav button {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) { .strip-nav button:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } }
.strip-nav .ic { width: 18px; height: 18px; }
@media (hover: none) { .strip-nav { display: none; } }

/* Photo cards (S3) — one shared card width, each photo cropped to a uniform ratio */
.photo-card { position: relative; width: 300px; max-width: 88vw; }
.photo-card .frame {
  border-radius: var(--r-md); overflow: clip; box-shadow: var(--sh-1);
  height: clamp(210px, 24vw, 300px);
}
.photo-card picture { display: block; height: 100%; width: 100%; }
/* cover so mixed-ratio source photos fill the frame evenly instead of leaving dead space */
.photo-card img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.photo-card figcaption { padding: 14px 6px 0; }
.photo-card .tag {
  display: block; font: 600 12px/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.photo-card .cap { display: block; margin-top: 8px; font: italic 400 17px/1.35 var(--serif); color: var(--ink); }

/* ==========================================================================
   Carousel (S3, S10) — one flat card cycles horizontally under its heading.
   Replaces the scroll strips: a strip cannot guarantee the active card sits
   under its own heading, and mixed-ratio posters inside fixed frames lose
   their right edge to `overflow: clip`.

   Geometry contract with the JS:
     --car-w      card width in px (inline, set by JS)
     --car-h      track height in px — the tallest card, so captions are never
                  clipped by the viewport (inline, set by JS)
     --car-pitch  card width + gap (inline, set by JS)
   The track is nudged left by one pitch per step; JS writes the transform.
   ========================================================================== */
.carousel {
  /* Defaults so the row is usable before JS boots and with JS disabled:
     a snap-scrolling strip of cards at the same width the carousel will use.
     JS flips [data-ready] on when it takes over the geometry. */
  --car-w: 320px;
  --car-h: auto;
  --car-gap: 20px;
  width: var(--content); margin-inline: auto;
  display: grid; gap: 16px;
  /* clear the heading block above — the track is absolutely tall, so without
     this the first row of posters rides up under the h2 */
  margin-top: clamp(18px, 2.4vw, 30px);
}
.carousel:not([data-ready]) .carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel:not([data-ready]) .carousel__viewport::-webkit-scrollbar { display: none; }
.carousel:not([data-ready]) .carousel__track { height: auto; transition: none; }
.carousel:not([data-ready]) .carousel__item { scroll-snap-align: start; }
.carousel:not([data-ready]) .carousel__nav,
.carousel:not([data-ready]) .carousel__dots { display: none; }
.carousel__viewport {
  position: relative; overflow: hidden;
}
.carousel__track {
  display: flex; align-items: flex-start;
  height: var(--car-h);
  /* the viewport is a block, but a flex track collapses to the container width
     without this — cards would be squashed into the visible strip */
  width: max-content;
  transition: transform 620ms var(--ease);
}
/* JS turns the transition off for the instant snap-back between steps */
.carousel__track[data-armed='1'] { transition-duration: 0s; }

.carousel__item {
  flex: none;
  width: var(--car-w);
  margin-inline: calc(var(--car-gap, 20px) / 2);
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: clip;
  display: flex; flex-direction: column;
  transition: opacity 320ms var(--ease), box-shadow 300ms var(--ease);
}
/* during a step the outgoing card fades so its text never fights the incoming one */
.carousel__track[data-leaving='1'] .carousel__item[data-pos='-1'] { opacity: 0; }

.carousel__item > .frame {
  position: relative;
  aspect-ratio: var(--car-ratio, 4 / 3);
  /* min-height: 0 matters: as a flex item the frame defaults to min-height:
     auto, so an <img> carrying width/height attributes could force it taller
     than its aspect ratio — one row measured 240 / 247 / 320px. */
  min-height: 0;
  overflow: clip; border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--panel-sky);
}
/* Wide banner artwork (summits are 1.91:1) loses too much of its left/right
   headline when forced into 4:3, so those carousels opt into a wider frame and
   use `contain` — the whole poster stays readable, letterboxed on its own bg. */
.carousel[data-fit='contain'] .carousel__item > .frame {
  aspect-ratio: var(--car-ratio, 16 / 9);
  background: #1c0f2e;
}
/* Media is taken out of flow so its intrinsic ratio can never set the frame's
   height. The frame's aspect-ratio is the single source of truth, which is what
   makes every card in a row identical. */
.carousel__item .frame picture { position: absolute; inset: 0; display: block; }
.carousel__item .frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.carousel[data-fit='contain'] .carousel__item .frame img { object-fit: contain; }

.carousel__cap { padding: 15px 17px 17px; display: grid; gap: 5px; align-content: start; }
.carousel__tag {
  font: 600 11.5px/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
/* A 1-line name next to a 2-line name made neighbouring cards different heights
   even once the frames matched. Reserving two lines for every name keeps the
   whole row level. */
.carousel__name {
  font: 550 15.5px/1.4 var(--sans); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.carousel__hint {
  margin-top: 3px; font: 450 13px/1 var(--sans); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* arrows — INSIDE the viewport. They used to sit at -23px on a viewport with
   overflow: hidden, which cut each 46px circle clean in half. Sitting them
   just inside the edge keeps the full circle visible over the photo. */
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  box-shadow: var(--sh-2), 0 0 0 1px rgba(12, 10, 20, .06);
  backdrop-filter: blur(8px);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.carousel__nav--prev { left: 12px; }
.carousel__nav--next { right: 12px; }
@media (hover: hover) { .carousel__nav:hover { transform: translateY(-50%) scale(1.06); } }
.carousel__nav .ic { width: 18px; height: 18px; }
.carousel__nav[disabled] { opacity: .35; pointer-events: none; }

/* progress dots — the visual dot stays 9 px; the hit area is a full 44 px
   (spec §9.2 touch targets). Spacing is owned by the button, not a gap. */
.carousel__dots { display: flex; justify-content: center; gap: 0; }
.carousel__dots button {
  width: 44px; height: 44px; display: grid; place-items: center; background: none;
}
.carousel__dots button::before {
  content: ''; width: 9px; height: 9px; border-radius: var(--r-pill);
  background: rgba(12, 10, 20, .16);
  transition: width 300ms var(--ease), background-color 300ms var(--ease);
}
.carousel__dots button[aria-current='true']::before { width: 26px; background: var(--brand); }

/* click-to-zoom affordance, only while hovering the photo */
.carousel__zoom {
  font: 450 13px/1 var(--sans); color: var(--ink); pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); box-shadow: var(--sh-1);
  backdrop-filter: blur(6px);
  position: absolute; left: 50%; bottom: 14px;
  transform: translate(-50%, 10px); opacity: 0;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.carousel__zoom .ic { width: 14px; height: 14px; }
.carousel__item .frame { position: relative; }
.carousel__item[data-pos='0'] .frame { cursor: zoom-in; }
@media (hover: hover) {
  .carousel__track:not([data-leaving='1']) .carousel__item[data-pos='0']:hover .carousel__zoom {
    opacity: 1; transform: translate(-50%, 0);
  }
}

/* caption cross-fade, driven by --i from JS */
.carousel__cap > * {
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.carousel__track[data-slide] .carousel__cap > * { opacity: 1; transform: none; }

@media (hover: none) { .carousel__nav { display: none; } }

/* Fallback: no motion → plain grid, same uniform frames, nothing cropped */
.carousel[data-static='1'] .carousel__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-block: 0; }
.carousel[data-static='1'] .carousel__track {
  flex-wrap: wrap; height: auto; justify-content: center; transform: none !important; gap: 20px;
}
.carousel[data-static='1'] .carousel__item { margin-inline: 0; }
.carousel[data-static='1'] .carousel__nav,
.carousel[data-static='1'] .carousel__dots,
.carousel[data-static='1'] .carousel__zoom { display: none; }

/* ==========================================================================
   Feature panels (S4–S6)  (spec §4.4)
   ========================================================================== */
.panel {
  width: calc(100% - 2 * var(--gutter)); max-width: 1280px; margin-inline: auto;
  border-radius: var(--r-xl);
  padding: clamp(28px, 4.5vw, 64px);
  box-shadow: var(--sh-2);
}
.panel--lilac { background: var(--panel-lilac); }
.panel--mint { background: var(--panel-mint); }
.panel--butter { background: var(--panel-butter); }
.panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.panel__grid--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.panel__grid > * { min-width: 0; }
.panel__text { max-width: 46ch; }
.panel__text .eyebrow { margin-bottom: 16px; }
.panel__text p { margin-top: 16px; color: rgba(18, 14, 26, .72); }
.panel__text .btn, .panel__text .link-arrow { margin-top: 24px; }
.panel__disclaim { margin-top: 20px !important; font-size: 13px; color: rgba(18, 14, 26, .6) !important; }

/* Segments grid (S4) */
.seg-stage { position: relative; }
.seg-ghost {
  position: absolute; inset: 24px 10px -14px 30px;
  border-radius: var(--r-md); background: rgba(255, 255, 255, .5);
  box-shadow: var(--sh-1);
}
.seg-card {
  position: relative; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--sh-2); padding: 22px;
}
.seg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.seg-grid li, .seg-grid a { min-width: 0; }
.seg-grid a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm); background: #f6f4f1;
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.seg-grid b { font: 550 12.5px/1.35 var(--sans); letter-spacing: .005em; }
.seg-grid .ic { color: var(--ink); opacity: .8; transition: opacity var(--t-fast); }
@media (hover: hover) {
  .seg-grid a:hover { transform: translateY(-2px); background: #f6f3f0; }
  .seg-grid a:hover .ic { opacity: 1; }
}

/* Rounds stepper (S5) */
.timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 26px; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px;
  background: rgba(18, 14, 26, .14); border-radius: 2px;
}
.timeline__line {
  position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px;
  background: var(--ink); border-radius: 2px;
  transform-origin: top; transform: scaleY(0);
}
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -24px; top: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--ink);
  transform: translateX(-50%);
}
.round {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 18px 22px;
}
.round b { font: 400 clamp(19px, 1.6vw, 24px)/1.2 var(--serif); }
.round .chip {
  flex: none; font: 600 12.5px/1 var(--sans);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(18, 14, 26, .07);
}
.round .chip--soon { background: rgba(18, 14, 26, .04); color: rgba(18, 14, 26, .6); }

/* Benefits list-cards (S6) — white card, item count, icon chips */
.stack { display: grid; gap: 16px; align-content: start; }
.listcard {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: clamp(20px, 2.6vw, 30px);
}
.listcard__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.listcard__head h4 { margin: 0; font: 500 19px/1.25 var(--serif); letter-spacing: .01em; }
.listcard__count { flex: none; font: 550 12.5px/1 var(--sans); color: var(--ink-3); }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.chipset li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 550 13px/1.25 var(--sans);
  padding: 9px 15px; border-radius: var(--r-pill); background: #f2efec;
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.chipset .ic { width: 15px; height: 15px; opacity: .7; }
@media (hover: hover) { .chipset li:hover { background: #ebe7e3; transform: translateY(-1px); } }

/* ==========================================================================
   S8 — Syllabus explorer (spec §6 S8)
   ========================================================================== */
.explorer {
  width: var(--content); margin-inline: auto;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: clamp(22px, 3.4vw, 44px);
}
.explorer__head { max-width: 640px; }
.tabs {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 20px 2px 18px; margin: 0; list-style: none;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center;
  min-height: 44px; font: 550 14px/1 var(--sans);
  padding: 11px 18px; border-radius: var(--r-pill);
  background: #f2efec; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (hover: hover) { .tab:not([aria-selected="true"]):hover { background: #e9e5e1; color: var(--ink); } }
.explorer__body { border-top: 1px solid var(--line); padding-top: 22px; }
.segpicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.segpick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--r-sm); background: #f7f5f2;
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.segpick b { font: 550 13.5px/1.35 var(--sans); }
.segpick .ic { opacity: .75; }
.segpick[aria-pressed="true"] { background: var(--panel-lilac); }
.segpick[aria-pressed="true"] b { color: var(--ink); }
@media (hover: hover) { .segpick:hover { transform: translateY(-2px); background: #f0ece8; } .segpick[aria-pressed="true"]:hover { background: var(--panel-lilac); } }
.explorer__meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.explorer__count { font: 550 13.5px var(--sans); color: var(--ink-2); }
/* The way out of the explorer and onto the full syllabus page. It used to be a
   small "Full syllabus page →" arrow link sitting at the end of the meta row,
   which read as a collapse/minimise control rather than a link. It is now a
   proper button with its own small title, on its own row. */
.explorer__cta {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  justify-content: space-between;
}
.explorer__cta-title { font: 600 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--ink-2); margin: 0; }
.explorer__cta .btn { flex: none; }
.explorer__cta .btn .ic { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .explorer__cta { flex-direction: column; align-items: stretch; }
  .explorer__cta .btn { justify-content: center; }
}

/* ==========================================================================
   S9 — Mentors (spec §6 S9)
   ========================================================================== */
.mentor-card {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--sh-1); padding: 22px;
  display: flex; align-items: center; gap: 16px;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
@media (hover: hover) { .mentor-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } }
.mentor-card .avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  overflow: clip; box-shadow: var(--sh-1);
  display: grid; place-items: center;
  font: 600 22px var(--serif); color: var(--ink);
}
.mentor-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.mentor-card b { display: block; font: 600 15.5px/1.3 var(--sans); }
.mentor-card span { display: block; margin-top: 4px; font: 450 13px/1.4 var(--sans); color: var(--ink-2); }

/* Initials avatars — pastel cycle */
.av-lilac { background: var(--panel-lilac); } .av-mint { background: var(--panel-mint); }
.av-butter { background: var(--panel-butter); } .av-sky { background: var(--panel-sky); }
.av-peach { background: var(--panel-peach); }

/* ==========================================================================
   S10 — Events / summits / courses (spec §6 S10)
   ========================================================================== */
.poster {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1);
  overflow: clip; display: flex; flex-direction: column;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
@media (hover: hover) { .poster:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } }
.poster { width: 320px; max-width: 88vw; }
/* one uniform 4:3 frame for every poster — 1:1 and 16:9 sources both fill it via object-fit */
.poster .frame { aspect-ratio: 4 / 3; overflow: clip; }
.poster picture { display: block; height: 100%; width: 100%; }
.poster img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.poster__body { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.poster__date { font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.poster__title { font: 550 15px/1.4 var(--sans); }
.poster__title a::after { content: ""; position: absolute; inset: 0; }
.poster { position: relative; }
.poster .link-arrow { margin-top: 6px; font-size: 14px; }

/* ==========================================================================
   S11 — Recognition (spec §6 S11)
   ========================================================================== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); width: var(--content); margin-inline: auto; }
.trio-card {
  display: flex; flex-direction: column; gap: 14px;
  border-radius: var(--r-lg); padding: 24px 24px 0; overflow: clip;
  box-shadow: var(--sh-2); color: var(--ink);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
@media (hover: hover) { .trio-card:hover { transform: translateY(-4px); } }
.trio-card h3 { font-size: clamp(22px, 2vw, 28px); }
.trio-card p { color: rgba(18, 14, 26, .66); font-size: 14.5px; margin-top: -8px; }
.trio-card .shot { border-radius: var(--r-sm) var(--r-sm) 0 0; overflow: clip; box-shadow: var(--sh-1); border: 1px solid var(--line); border-bottom: 0; }
.trio-card .shot img { width: 100%; }
.trio-card--lilac { background: var(--panel-lilac); }
.trio-card--mint { background: var(--panel-mint); }
.trio-card--butter { background: var(--panel-butter); }

.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: var(--content); margin-inline: auto; }
.press {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; display: grid; gap: 14px; align-content: start;
  box-shadow: var(--sh-1);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.press__logo { height: 30px; display: flex; align-items: center; }
.press__logo img { max-height: 30px; width: auto; max-width: 170px; filter: grayscale(1); opacity: .75; transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.press time { font: 550 12px/1 var(--sans); letter-spacing: .08em; color: var(--ink-3); }
.press__head {
  font: 550 15px/1.5 var(--sans); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.press__head :lang(bn) { line-height: 1.8; }
.press a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) {
  .press:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
  .press:hover .press__logo img { filter: none; opacity: 1; }
}

.collab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  width: var(--content); margin-inline: auto; padding: 0; list-style: none;
}
.collab-grid a {
  display: grid; place-items: center; height: 84px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px;
}
.collab-grid img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .7; transition: filter var(--t-fast), opacity var(--t-fast); }
@media (hover: hover) { .collab-grid a:hover img { filter: none; opacity: 1; } }

/* ==========================================================================
   S13 — Contact (spec §6 S13)
   ========================================================================== */
.contact {
  width: var(--content); margin-inline: auto;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: clamp(24px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 64px);
}
.cinfo { display: grid; gap: 14px; align-content: start; padding: 0; list-style: none; margin-top: 26px; }
.cinfo li { display: flex; gap: 14px; align-items: flex-start; }
.cinfo .ic { flex: none; margin-top: 2px; color: var(--brand); }
.cinfo b { display: block; font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.cinfo a, .cinfo span.v { font: 500 15.5px/1.5 var(--sans); }
.cinfo a:hover { color: var(--brand); }
/* The inner column must be minmax(0, 1fr) and the field itself shrinkable, or a
   <select> whose longest <option> is a full sentence ("Workshop On Self
   Confidence & Career Development") sizes the column to its min-content and
   pushes the page past the viewport at 390px. */
.field {
  display: grid; gap: 8px; margin-bottom: 18px;
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}
.field label { font: 500 14px var(--sans); color: var(--ink-2); }
/* Text-like controls only. Without the :not() guards this also matched radio
   and checkbox inputs, stretching them to 100% width and 48px tall inside a
   label — which blew the control up to fill the whole row. */
.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.field select,
.field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fdfcfa; font: 450 15.5px/1.5 var(--sans);
  transition: border-color var(--t-fast);
}
.field input[type="file"] {
  width: 100%; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: #fdfcfa; font: 450 14px/1.5 var(--sans); color: var(--ink-3);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 2px; border-color: transparent;
}

/* ==========================================================================
   S14 — Footer (spec §6 S14)
   ========================================================================== */
.footer { margin: calc(var(--section-y) / 2) var(--gutter) var(--gutter); }
.footer__panel {
  border-radius: var(--r-xl); background: #0b0b0c; color: #fff;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4.5vw, 64px) clamp(24px, 3vw, 36px);
  box-shadow: var(--sh-2);
}
.footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__logo { background: #fff; border-radius: var(--r-sm); padding: 8px 12px; display: inline-flex; }
.footer__logo img { height: 30px; width: auto; }
.footer__tag { font: italic 400 18px/1.4 var(--serif); color: rgba(255, 255, 255, .85); max-width: 40ch; }
.footer__cta { margin-left: auto; }
.footer__cols {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
  padding: clamp(28px, 4vw, 44px) 0;
}
.footer__col h4 {
  font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a {
  font: 450 14px/1.4 var(--sans); color: rgba(255, 255, 255, .7);
  transition: color var(--t-fast);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-block: 12px; margin-block: -12px;   /* 44 px hit area, same rhythm */
}
@media (hover: hover) { .footer__col a:hover { color: #fff; } }
.status {
  flex: none; font: 600 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill);
}
.status--on { background: rgba(162, 222, 168, .18); color: #a2dea8; }
.status--end { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12);
  font: 450 13px/1.6 var(--sans); color: rgba(255, 255, 255, .55);
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) { .footer__social a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); } }
.footer__social .ic { width: 18px; height: 18px; }

/* ==========================================================================
   S12 — Modals (spec §6 S12, M11)
   ========================================================================== */
.dialog {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 20px; visibility: hidden;
}
.dialog[open], .dialog.is-open { visibility: visible; }
.dialog__veil {
  position: absolute; inset: 0;
  background: rgba(11, 11, 12, .45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.dialog.is-open .dialog__veil { opacity: 1; }
.dialog__card {
  position: relative; width: min(560px, 100%);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: clamp(26px, 4vw, 40px);
  opacity: 0; transform: scale(.96);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  max-height: min(760px, calc(100dvh - 40px)); overflow: auto;
}
.dialog.is-open .dialog__card { opacity: 1; transform: none; }
.dialog__close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #f2efec; transition: background var(--t-fast);
}
@media (hover: hover) { .dialog__close:hover { background: #e9e5e1; } }
.dialog__close .ic { width: 18px; height: 18px; }
.dialog__title { font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); letter-spacing: -0.01em; padding-right: 40px; }
.dialog__text { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); }
.dialog__note {
  margin-top: 18px; display: flex; gap: 10px; align-items: center;
  font: 500 14px var(--sans); color: var(--ink-2);
  background: #f6f3f0; border-radius: var(--r-sm); padding: 12px 16px;
}
.dialog__note .ic { width: 18px; height: 18px; color: var(--brand); }
.dialog__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--panel-lilac); margin-bottom: 18px;
}
.dialog__actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.dialog__media { border-radius: var(--r-sm); overflow: clip; margin-bottom: 18px; box-shadow: var(--sh-1); }
dialog::backdrop { background: transparent; }
body[data-lock] { overflow: hidden; }

/* ==========================================================================
   Motion (spec §7)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* M1 — load sequence */
  .js .nav__pill { animation: navIn 500ms var(--ease) both; }
  .js .hero__eyebrow, .js .hero h1, .js .hero .lede, .js .hero__actions, .js .hero__note {
    animation: heroLineIn 700ms var(--ease) both;
  }
  .js .hero__eyebrow { animation-delay: 60ms; }
  .js .hero h1 { animation-delay: 140ms; }
  .js .hero .lede { animation-delay: 260ms; }
  .js .hero__actions { animation-delay: 340ms; }
  .js .hero__note { animation-delay: 420ms; }
  .js .hero__media { animation: heroMediaIn 900ms var(--ease) 300ms both; }
  @keyframes navIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
  @keyframes heroLineIn {
    from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
  @keyframes heroMediaIn { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }

  /* M2 — scroll reveal (gated on .js; content visible without JS) */
  .js [data-reveal] {
    opacity: 0; transform: translate3d(0, 28px, 0);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* M4 — scroll-drawn rounds line */
  @supports (animation-timeline: view()) {
    .timeline__line {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 20% exit 60%;
    }
    @keyframes draw { to { transform: scaleY(1); } }

    /* M5 — layered rise for the segments panel cards */
    .rise-front { animation: rise-front linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .rise-back { animation: rise-back linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes rise-front { from { transform: translate3d(0, 80px, 0) scale(.97); } to { transform: none; } }
    @keyframes rise-back { from { transform: translate3d(0, 20px, 0); } to { transform: none; } }

    /* M6 — hero relaxation (subtle parallax as hero leaves, desktop only) */
    @media (min-width: 768px) and (hover: hover) {
      .hero__media { animation: heroRelax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
      @keyframes heroRelax { to { transform: translateY(10%) scale(.985); } }
    }
  }

  /* M10 — hover lifts are applied component-wise above, hover-gated */

  /* M13 — sheet link stagger */
  .js .sheet.is-open li { animation: sheetLink 400ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes sheetLink { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* No JS → all content visible (nothing hidden without .js gate) */

/* Reduced motion — spec §7.4 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .timeline__line { transform: none !important; }
}

/* ==========================================================================
   Mobile nav sheet (spec §4.6) — styles live here to keep nav block small
   ========================================================================== */
@media (max-width: 860px) {
  .nav__links, .nav__login { display: none; }
  .nav__burger {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
  }
  .nav__burger .ic { width: 20px; height: 20px; }
  .sheet {
    display: block; position: fixed; z-index: 60;
    inset: 76px 12px auto 12px; max-height: calc(100dvh - 96px);
    overflow: auto; padding: 12px;
    background: rgba(252, 250, 248, .96);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
            backdrop-filter: blur(18px) saturate(1.4);
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  }
  .sheet.is-open { opacity: 1; transform: none; visibility: visible; }
  .sheet ul { list-style: none; margin: 0; padding: 0; }
  .sheet a, .sheet__grouphead {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 14px 12px; border-radius: var(--r-sm);
    font: 550 16px/1.3 var(--sans);
  }
  .sheet__grouphead { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .sheet__sub { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 12px; }
  .sheet__sub a { font-size: 14.5px; color: var(--ink-2); padding-block: 11px; }
  .sheet .acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-inout); }
  .sheet .acc[data-open="true"] { grid-template-rows: 1fr; }
  .sheet .acc__inner { overflow: hidden; min-height: 0; }
  .sheet__chev { transition: transform var(--t-fast) var(--ease); width: 16px; height: 16px; }
  .acc[data-open="true"] > button .sheet__chev { transform: rotate(180deg); }
  .sheet__actions { display: flex; gap: 10px; padding: 14px 6px 6px; position: sticky; bottom: 0; background: inherit; }
  .sheet__actions .btn { flex: 1; }
}

/* ==========================================================================
   Responsive (spec §9.1)
   ========================================================================== */
@media (max-width: 1024px) {
  .panel__grid, .panel__grid--wide { grid-template-columns: minmax(0, 1fr); }
  .panel__text { max-width: 60ch; }
  .press-grid, .trio { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .hero__panel { border-radius: 24px; }
  .panel { border-radius: 24px; }
  .footer__panel { border-radius: 24px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-grid, .trio { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .bene-grid { grid-template-columns: 1fr; }
  .notice__card { flex-direction: column; gap: 8px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero__actions .btn { width: 100%; }
}
/* Carousel: keep the pitch in px so JS and CSS never disagree, and keep the
   card a comfortable portrait-ish shape on phones */
@media (max-width: 520px) {
  .carousel { --car-w: 268px; --car-pitch: 284px; --car-h: 200px; }
  .carousel__nav { width: 44px; height: 44px; }
  .carousel__nav--prev { left: 2px; }
  .carousel__nav--next { right: 2px; }
  .carousel__zoom { display: none; }
}