/* ============ Fonts ============ */
/* Avenir Next: Latin subsets of the licensed OTFs kept in design-source/ (git-ignored). */
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/fonts/avenir-next-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/fonts/avenir-next-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/fonts/avenir-next-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/fonts/avenir-next-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../assets/fonts/avenir-next-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
  src: url("../assets/fonts/crimson-text-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ms Madi";
  src: url("../assets/fonts/ms-madi.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ Tokens (from Figma: Partner Poster - SEWA Ahmedabad) ============ */
:root {
  --ink: #1c1972;          /* display headlines */
  --purple: #412287;       /* body, tabs, tags, buttons */
  --violet: #4900a3;       /* script accent */
  --coral: #f93725;        /* inline emphasis */
  --yellow: #fcaf1f;       /* sparkles, swoosh, banner highlight */
  --teal: #5fd0b6;
  --peach: #fdd9c6;        /* callout bubble */
  --glow: #f8b39e;         /* blurred peach glow */
  --blob: #e6dae6;         /* lavender blob behind cut-outs */
  --cream: #fcf3ee;
  --lav: #f7eefc;
  --tile: #fcf3ee;
  --grey: #9f9f9f;
  --line: rgba(65, 34, 135, 0.2);
  --lilac: #8f73cf;        /* dotted connector paths */
  --wash: linear-gradient(160deg, var(--cream) 47%, var(--lav) 100%);

  --shadow-card: -16px 16px 40px rgba(32, 9, 60, 0.1);
  --shadow-tag: -2px 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-tile: 3px 4px 0 rgba(65, 34, 135, 0.1);

  --r-card: 16px;
  --r-tab: 20px 30px 30px 0;
  --r-banner: 24px 24px 0 0;
  --r-tag: 16px;

  --serif: "Crimson Text", Georgia, serif;
  --serif-tracking: -0.015em;   /* letter-spacing for every Crimson title; tweak here */
  --sans: "Avenir Next", "Avenir", system-ui, sans-serif;
  --script: "Ms Madi", cursive;

  /* Type scale: five steps, the only font sizes used on the page.
     1 hero statement / 2 section titles / 3 sub-headings and card titles
     4 body copy and item titles / 5 labels, chips, nav, meta */
  --fs-1: 72px;
  --fs-2: 56px;
  --fs-3: 24px;
  --fs-4: 18px;
  --fs-5: 15px;

  --section-pad: 112px;
  --title-gap: 32px;     /* section title -> content */

  /* Motion: one slow-out curve and three durations for every transition on the page */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-1: 0.6s;   /* small things: hovers, badges, nav */
  --t-2: 1s;     /* text and block reveals */
  --t-3: 1.4s;   /* images, writing, paths */

  --nav-h: 68px;
  --gutter: 60px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--purple);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
b, strong { font-weight: 700; }

.wrap { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; overflow: clip; padding-block: var(--section-pad); }
/* Sections alternate: gradient wash, then plain white */
main > section:nth-of-type(odd) { --section-bg: var(--cream); background: var(--wash); }
main > section:nth-of-type(even) { --section-bg: #fff; background: #fff; }
main > section, .footer { isolation: isolate; }
/* Printed-paper grain over the wash backgrounds */
main > section:nth-of-type(odd)::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.13 0 0 0 0 0.53 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  pointer-events: none;
}
/* Each section fades into the colour the next one starts with */
main > section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(160px, var(--section-pad));
  z-index: -1;
  pointer-events: none;
}
main > section:nth-of-type(odd)::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
main > section:nth-of-type(even)::after { background: linear-gradient(to bottom, rgba(252, 243, 238, 0), var(--cream)); }

.display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: var(--serif-tracking);
  font-size: var(--fs-1);
  line-height: 1;
  color: var(--ink);
}
.line { display: block; }
.balance { text-wrap: balance; }
.body { font-size: var(--fs-4); line-height: 1.64; }
.em { color: var(--coral); font-weight: 700; }
.caption { font-size: var(--fs-5); line-height: 1; color: var(--grey); letter-spacing: 0.02em; }

/* Script accent: always the trailing word(s) of a title ("Ready" in the poster).
   Ms Madi, tilted, stroked in its own colour to thicken it, yellow swish below + earmarks top-right. */
.script {
  position: relative;
  display: inline-block;
  margin-left: 0.04em;
  padding: 0 0.08em;
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: normal;
  font-size: var(--fs-1);
  line-height: 1;
  color: var(--violet);
  -webkit-text-stroke: 0.022em currentColor;
  paint-order: stroke fill;
  transform: rotate(-7deg);
  transform-origin: 0 78%;   /* pivot on the first letter's baseline so it sits on the line */
  white-space: nowrap;
}
.display .script { margin-bottom: 0.2em; }
/* Long words tilt less so they don't climb too far */
.milestones__title .script,
.programs .display .script { transform: rotate(-4deg); }
.hero .script { transform: rotate(-3.5deg); }
.script__swish {
  position: absolute;
  z-index: -1;
  left: 8%;
  top: 80%;
  width: 79%;
  aspect-ratio: 89 / 17;
  background: var(--yellow);
  -webkit-mask: url("../assets/Motifs/slash.svg") center / 100% 100% no-repeat;
  mask: url("../assets/Motifs/slash.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.script--long .script__swish {
  left: 4%;
  width: 92%;
  aspect-ratio: 159 / 9;
  -webkit-mask-image: url("../assets/Motifs/slash-2.svg");
  mask-image: url("../assets/Motifs/slash-2.svg");
}
.milestones__title .script__swish,
.programs .display .script__swish {
  left: 4%;
  width: 92%;
  aspect-ratio: 235 / 12;
  -webkit-mask-image: url("../assets/Motifs/slash-3.svg");
  mask-image: url("../assets/Motifs/slash-3.svg");
}
.script__end { position: relative; }
.script__end--tall .script__earmarks { top: 0.02em; }   /* last letter has an ascender (k) */
.script__earmarks {
  position: absolute;
  left: calc(100% - 0.02em);
  top: 0.34em;               /* just above x-height of the last letter */
  width: 0.4em;
  height: auto;
  pointer-events: none;
}

/* Purple number highlight ("10,000+") */
.pill-hl {
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--purple);
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
}

/* Decorations */
.sparkle { position: absolute; width: 22px; height: auto; pointer-events: none; }
.glow {
  position: absolute;
  border-radius: 50%;
  background: var(--glow);
  filter: blur(120px);
  opacity: 0.8;
  pointer-events: none;
}
.blob {
  position: absolute;
  background: var(--blob);
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  pointer-events: none;
}

/* Motifs: decorative pieces from the poster kit. Each one is absolutely placed by its
   section rule, sized with --w and tilted with --rot; --py is the scroll parallax offset. */
.motif {
  position: absolute;
  z-index: var(--z, 0);
  display: block;
  width: calc(var(--w, 24px) * var(--ws, 1));
  height: auto;
  rotate: var(--rot, 0deg);
  transform: translateY(var(--py, 0px));
  pointer-events: none;
  user-select: none;
}
/* Glows, blobs and sparkles drift with scroll too (translate keeps their own transforms intact) */
[data-parallax]:not(.motif) { translate: 0 var(--py, 0px); }
/* Black source SVGs recoloured through a mask; --c sets the colour */
.m-mask {
  background: var(--c, var(--yellow));
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}
.m-star { --src: url("../assets/Motifs/star-01.svg"); aspect-ratio: 13 / 14; }
.m-star2 { --src: url("../assets/Motifs/star-02.svg"); aspect-ratio: 21 / 25; --c: var(--purple); }
.m-dot { --src: url("../assets/Motifs/star-03.svg"); aspect-ratio: 7 / 8; --w: 11px; }
.m-path1 { --src: url("../assets/Motifs/dotted-lines-01.svg"); aspect-ratio: 83 / 13; }
.m-path2 { --src: url("../assets/Motifs/dotted-lines-02.svg"); aspect-ratio: 88 / 98; }
.m-path3 { --src: url("../assets/Motifs/dotted-lines-03.svg"); aspect-ratio: 79 / 11; }
.m-path1, .m-path2, .m-path3 { --c: var(--lilac); opacity: 0.55; }
.m-shape { --src: url("../assets/Motifs/bg-shape-01.svg"); aspect-ratio: 340 / 349; --c: var(--purple); opacity: 0.06; }
/* Dotted trail drawn as a stretchable stroke (dots keep their shape at any width) */
.m-trail {
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: var(--lilac);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.5 9;
  opacity: 0.6;
}
/* Poster-style speech bubble ("80% Action!") */
.sticker {
  --z: 2;
  width: auto;
  padding: 7px 14px 8px;
  border-radius: 14px;
  background: var(--peach);
  color: var(--purple);
  font-size: var(--fs-5);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-tile);
}
.sticker::after {
  content: "";
  position: absolute;
  left: 16px;
  top: calc(100% - 1px);
  border: 7px solid transparent;
  border-top-color: var(--peach);
  border-left-color: var(--peach);
}
/* Yellow pill-tiny bubble with a label inside */
.m-bubble {
  --z: 2;
  aspect-ratio: 42 / 28;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  background: var(--yellow);
  -webkit-mask: url("../assets/graphics/pill-tiny.svg") center / 100% 100% no-repeat;
  mask: url("../assets/graphics/pill-tiny.svg") center / 100% 100% no-repeat;
  color: var(--purple);
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* White card with a purple folder-tab header ("Your Beneficiaries will ✦") */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.card--tabbed { margin-top: 26px; border-top-left-radius: 0; }
.card__tab {
  position: absolute;
  left: -1px;
  bottom: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border-radius: var(--r-tab);
  background: var(--purple);
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.64;
  white-space: nowrap;
}
.card__tab img { width: 20px; height: auto; }
.card__body { padding: 24px; }

/* White card with a full-width purple banner ("40 Hour learning journey…") */
.card--banner { border-radius: var(--r-banner); border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); overflow: hidden; }
.card__banner { padding: 14px 24px; background: var(--purple); color: #fff; text-align: center; }


/* Outlined skill chip with a circular icon badge ("Prompting") */
.chips { display: flex; flex-wrap: wrap; gap: 16px 18px; padding-left: 8px; }
.chip {
  position: relative;
  padding: 10px 18px 10px 24px;
  border: 1px solid var(--line);
  border-radius: 30px;
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1;
  color: rgba(65, 34, 135, 0.6);
  white-space: nowrap;
}
.chip::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--purple) url("../assets/img/poster/sparkle.svg") center / 12px auto no-repeat;
}

/* Tilted tile with offset shadow (Claude / ChatGPT cards) */
.tile {
  display: block;
  padding: 12px;
  background: var(--tile);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-tile);
}

/* Filled circle badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--fs-3);
  line-height: 1;
  color: #fff;
}
.badge--purple { background: var(--purple); }
.badge--yellow { background: var(--yellow); color: var(--purple); }
.badge--teal { background: var(--teal); color: var(--purple); }
.badge--coral { background: var(--coral); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 48px;
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: transform var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), translate var(--t-1) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--filled { background: var(--purple); color: #fff; box-shadow: var(--shadow-tag); }
.btn--outline { color: var(--purple); border: 1.5px solid var(--purple); }

.lottie { position: absolute; inset: 0; }
.lottie svg { display: block; }

/* ============ Navigation ============ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
  transition: height var(--t-1) var(--ease), background-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--coral);
  transform-origin: 0 50%;
  scale: var(--progress, 0) 1;
}
.nav__logo img { transform-origin: 0 50%; transition: scale var(--t-1) var(--ease); }
@media (min-width: 901px) {
  .nav.is-scrolled { height: 56px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 28px rgba(32, 9, 60, 0.06); }
  .nav.is-scrolled .nav__logo img { scale: 0.86; }
}
.nav__inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo img { width: auto; height: 37px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-size: var(--fs-5); line-height: 1; color: var(--purple); white-space: nowrap; }
.nav__links a:hover { color: var(--coral); }
.nav__links a.is-active { color: var(--coral); font-weight: 600; }

main { padding-top: var(--nav-h); }

/* ============ Landing ============ */
.hero { padding-block: 32px 72px; }
.hero__glow { left: -140px; top: -120px; width: 420px; height: 420px; opacity: 0.6; }
.hero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  min-height: 640px;
}
.hero__info { position: relative; }
.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: var(--serif-tracking);
  font-size: var(--fs-2);
  line-height: 1;
  color: var(--ink);
}
.hero__naari { font-size: var(--fs-1); }
.hero__title .line + .line { margin-top: 0.16em; }
.hero__sub {
  margin-top: 36px;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--purple);
}
.hero__programs {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.hero__programs p { font-size: var(--fs-4); line-height: 1.64; }
.hero__pill { padding: 4px 14px; border-radius: 8px; }
.rotator { position: relative; width: 252px; height: 26px; overflow: hidden; }
.rotator.is-fitted { transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.rotator span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 26px;
  color: #fff;
  white-space: nowrap;
}
.hero__desc { margin-top: 16px; max-width: 500px; }
.hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__watch { gap: 10px; }
/* Accreditation: who governs and who awards the programs' credit */
.hero__accredit {
  margin-top: 32px;
  padding-top: 22px;
  max-width: 560px;
  border-top: 1.5px dashed var(--line);
}
.accredit__text { font-size: var(--fs-5); line-height: 1.5; color: var(--purple); }
.accredit__text b { color: var(--ink); }
.accredit__logos { margin-top: 14px; display: flex; align-items: flex-end; gap: 28px; }
.accredit__item { display: flex; flex-direction: column; gap: 8px; }
.accredit__item + .accredit__item { padding-left: 28px; border-left: 1px solid var(--line); }
.accredit__logo { height: 48px; width: auto; }
.accredit__ncvet {
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.hero__media { position: relative; display: flex; justify-content: flex-end; }
.hero__blob { right: -40px; top: -30px; width: 88%; height: 112%; }
.hero__media-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1244 / 1050;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.hero__media-box img { width: 100%; height: 100%; object-fit: cover; }
.hero__sparkle--a { left: 4%; top: -4%; width: 30px; }
.hero__sparkle--b { right: -12px; bottom: 6%; width: 22px; opacity: 0.7; }

/* ============ Our Why ============ */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
}
.why__media { position: relative; display: flex; justify-content: center; }
.why__glow { left: 10%; top: 20%; width: 300px; height: 300px; opacity: 0.5; }
.why__blob { left: 50%; top: 50%; width: 480px; height: 460px; transform: translate(-50%, -50%); }
.why__collage { position: relative; width: 444px; height: 440px; }
.why__collage img { width: 100%; height: 100%; object-fit: contain; }
.why__hot { position: absolute; height: 97px; opacity: 0; }
.why__info .display { margin-bottom: var(--title-gap); }
.why__lead {
  margin-top: var(--title-gap);
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--coral);
}
.why__lead + .body { margin-top: 6px; }
.why__card { margin-top: 64px; }
.why__mission { margin-top: 12px; font-weight: 600; color: var(--ink); }

/* ============ Milestones ============ */
.milestones__title { text-align: center; }
.milestones { position: relative; }
.milestones__intro { max-width: 560px; margin: 14px auto 0; text-align: center; }
/* Giant index of the milestone in the centre, behind the arc */
.milestones__num {
  position: absolute;
  right: 3%;
  top: -4%;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(160px, 18vw, 260px);
  line-height: 1;
  color: var(--purple);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--t-1) var(--ease);
}
.milestones__num.is-swapping { opacity: 0; }
/* Journey progress: one dot per milestone, filled as it reaches the centre */
.journey { display: none; }
.pin.is-pinned .journey { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: -16px; }
@media (max-width: 900px) { .milestones__num { display: none; } }
.journey__dots { position: relative; display: flex; gap: 34px; list-style: none; }
.journey__dots::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  border-top: 1.5px dashed var(--line);
}
.journey__dots li {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--lilac);
  transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), scale var(--t-1) var(--ease);
}
.journey__dots li.is-lit { background: var(--coral); border-color: var(--coral); }
.journey__dots li.is-now { scale: 1.5; }
.journey__label { font-size: var(--fs-5); color: var(--purple); letter-spacing: 0.04em; }
.journey__label b { color: var(--coral); }
.slider { position: relative; margin: 0 auto; max-width: 1300px; }
.slider__viewport {
  overflow: hidden;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.slider__track {
  --item: 300px;
  display: flex;
  gap: 28px;
  padding-left: 50px;
  will-change: transform;
}
.stat {
  flex: 0 0 var(--item);
  width: var(--item);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.stat__media {
  position: relative;
  width: 100%;
  height: 230px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat__media > img { height: 210px; width: auto; object-fit: contain; }
.stat__lottie { position: relative; inset: auto; width: 290px; height: 230px; flex: none; }
.stat__title { font-size: var(--fs-3); font-weight: 600; line-height: 1.25; color: var(--ink);; transition: color var(--t-1) var(--ease); }
.stat.is-lit .stat__title { color: var(--coral); }
.stat__title .pill-hl { font-size: var(--fs-4); }
.stat__desc { font-size: var(--fs-5); line-height: 1.5; color: var(--purple); white-space: pre-wrap; }
.slider__arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: var(--shadow-tag);
  z-index: 2;
}
.slider__arrow img { width: 40px; height: 40px; }
.slider__arrow--prev { left: 0; }
.slider__arrow--next { right: 0; }

/* ============ Partners ============ */
.partners__title { text-align: center; font-size: var(--fs-4); font-weight: 700; color: var(--purple); letter-spacing: 0.08em; text-transform: uppercase; }
.ticker {
  margin-top: 24px;
  height: 104px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.ticker__list {
  display: flex;
  align-items: center;
  gap: 72px;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.ticker__list li { position: relative; flex: none; }
.ticker__list li::after {
  content: "";
  position: absolute;
  right: -36px;
  top: 50%;
  height: 64px;
  margin-top: -32px;
  border-right: 1px solid rgba(159, 159, 159, 0.5);
}
.ticker__list img { height: 73px; width: auto; object-fit: cover; }
.ticker__list img[height="72"] { height: 72px; }

/* ============ Our Programs ============ */
.programs__head { max-width: 640px; }
.programs__head .body { margin-top: var(--title-gap); }
.programs__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: var(--title-gap);
}
.programs__cards > div { display: flex; }
.program { display: flex; flex-direction: column; width: 100%; }
.program__label { font-size: var(--fs-5); font-weight: 700; line-height: 1.64; color: var(--yellow); letter-spacing: 0.04em; text-transform: uppercase; }
.program__name { font-size: var(--fs-3); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.program .card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 24px 28px 32px; }
.program__img { width: 100%; aspect-ratio: 700 / 254; border-radius: 12px; overflow: hidden; }
.program__img img { width: 100%; height: 100%; object-fit: cover; }
.program .chips { margin-top: 4px; }
.program .btn { margin-top: auto; }

/* ============ How We Work ============ */
.work__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--title-gap);
}
.work__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.work__step .badge { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--section-bg, #fff); }
.work__text { margin-top: 18px; min-height: 96px; }
.work__text h3 { font-size: var(--fs-4); font-weight: 600; line-height: 1.24; color: var(--purple); }
.work__text p { margin-top: 6px; font-size: var(--fs-5); line-height: 1.4; color: rgba(65, 34, 135, 0.75); }
.work__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-top: 12px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.work__img img { width: 100%; height: 100%; object-fit: cover; }
.work__img--contain img { object-fit: contain; }

/* ============ Watch Us In Action ============ */
.watch__title { text-align: center; }
.watch__videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  margin-top: var(--title-gap);
}
.watch__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.watch__thumb { width: 100%; max-width: 600px; }
/* The source thumbnails carry the old chamfered gradient frame; crop it away */
.watch__frame { display: block; aspect-ratio: 803 / 516; border-radius: 10px; overflow: hidden; }
.watch__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.24); }
.watch__thumb--l { --tilt-base: -2deg; }
.watch__thumb--r { --tilt-base: 2deg; }
.watch__thumb:hover { --tilt-base: 0deg; }
.watch__frame img { transition: scale var(--t-3) var(--ease); }
.watch__thumb:hover .watch__frame img { scale: 1.05; }
.watch__name {
  max-width: 520px;
  margin-top: 32px;
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.watch__desc { max-width: 520px; margin-top: 12px; }

/* ============ Listen to our Naaris ============ */
.voices { text-align: center; }
.voices__intro { max-width: 640px; margin: 16px auto 0; }
.voices__row { display: flex; justify-content: center; gap: 32px; margin-top: var(--title-gap); }
.voices__card { position: relative; width: 280px; }
.voices__card:nth-child(odd) .voices__thumb { --tilt-base: -1.5deg; }
.voices__card:nth-child(even) .voices__thumb { --tilt-base: 1.5deg; }
.voices__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 439 / 719;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card);
}
.voices__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: 35% 65%; }
.voices__thumb:hover { --tilt-base: 0deg; }
.voices__thumb:hover .voices__preview { scale: 1.05; }
.voices__thumb::after {
  content: "";
  position: absolute;
  inset: 62% 0 0;
  background: linear-gradient(180deg, rgba(22, 11, 49, 0) 0%, rgba(22, 11, 49, 0.9) 100%);
  pointer-events: none;
}
/* Name sits outside the thumbnail so it overhangs the card edge */
.voices__name {
  position: absolute;
  left: -0.1em;
  bottom: -0.3em;
  z-index: 2;
  pointer-events: none;
  /* Inverts what is behind it: light over the photo, dark over the page */
  mix-blend-mode: difference;
  font-family: var(--script);
  font-size: var(--fs-1);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.022em currentColor;
  paint-order: stroke fill;
  white-space: nowrap;
  transform: rotate(-7deg);
  transform-origin: 0 100%;
}

/* ============ Footer ============ */
.footer { background: var(--wash); border-top: 1px solid var(--line); }
.footer__invite {
  padding-top: var(--title-gap);
  font-size: var(--fs-4);
  line-height: 1.64;
  color: var(--purple);
}
.footer__invite b { color: var(--coral); }
.footer__inner {
  padding-top: var(--title-gap);
  padding-bottom: var(--title-gap);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.footer__left { display: flex; flex-direction: column; align-items: flex-start; }
.footer__logo img { width: 190px; height: auto; }
.footer__copy { margin-top: 20px; max-width: 560px; font-size: var(--fs-5); line-height: 1.5; color: rgba(65, 34, 135, 0.75); }
.footer__legal { margin-top: 14px; display: flex; gap: 20px; }
.footer__legal a { font-size: var(--fs-5); font-weight: 600; line-height: 1.5; color: var(--purple); }
.footer__social a { display: block; color: var(--purple); transition: color 0.2s ease; }
.footer__social svg { display: block; width: var(--fs-3); height: var(--fs-3); }
.footer__legal a:hover, .footer__social a:hover { color: var(--coral); }
.footer__social { display: flex; gap: 24px; }

/* ============ Motif placements ============ */
/* One large, faint star per section that drifts with scroll */
.m-big { --c: var(--purple); --w: 240px; opacity: 0.06; }
.why__big { right: 2%; top: -90px; --rot: 12deg; }
.milestones__big { left: 4%; top: -70px; --rot: -10deg; --w: 200px; }
.work__big { right: 3%; top: -80px; --rot: 8deg; }
.watch__big { left: 3%; top: -90px; --rot: -14deg; }

/* Hero: outline star on the headline, tool cards + skill badges orbiting the photo */
.hero__star { left: -52px; top: -34px; --w: 40px; --rot: -10deg; }
.hero__media-box { z-index: 1; }
.hero__path--top { left: -2%; top: -44px; --w: 58%; }
.hero__path--side { left: -92px; top: 34%; --w: 66px; --rot: 8deg; }
.hero__claude { --z: 2; left: -44px; top: 12%; --w: 76px; --rot: -9deg; }
.hero__gpt { --z: 2; left: -26px; bottom: 10%; --w: 70px; --rot: 7deg; }
.hero__skill { --z: 2; filter: drop-shadow(var(--shadow-tag)); }
.hero__skill--a { left: 56%; top: -40px; --w: 58px; --rot: 8deg; }
.hero__skill--b { right: -26px; bottom: 26%; --w: 54px; --rot: -6deg; }

/* Our Why */
.why__star { --z: 1; right: -14px; top: -22px; --w: 36px; --rot: 6deg; }
.why__quote { --z: 1; right: 28px; top: -46px; --w: 88px; scale: -1 1; }

/* Milestones: one dotted trail behind the row, a tiny star between items */
.slider__viewport { position: relative; }
.slider__track { position: relative; z-index: 1; }
.milestones__trail { left: 0; top: 119px; --w: 100%; opacity: 0.32; }
.stat__sticker { right: 0; top: 2px; --rot: 8deg; }

/* Partners: kept quiet, one star either side of the label */
.partners__title { display: flex; align-items: center; justify-content: center; gap: 14px; }
.partners__star { display: block; width: 16px; }

/* Programs */
.programs__shape { left: -60px; bottom: -80px; --w: 360px; --rot: 160deg; }
.programs__head, .programs__cards { position: relative; z-index: 1; }
.programs__star { position: relative; display: inline-block; vertical-align: top; --w: 0.42em; margin-left: 0.6em; --rot: 10deg; }
.programs__cards > div { position: relative; }
.program__sticker { right: -18px; top: -30px; --w: 104px; --rot: 8deg; }
.program__sticker--r { --rot: -7deg; }

/* How We Work: dotted curves between the badges, a star on each badge */
.work__trail { left: 28px; top: 8px; --w: calc((100% + 20px) * 5 / 6); }
.work__step .badge::after {
  content: "";
  position: absolute;
  right: -7px;
  top: -7px;
  width: 16px;
  aspect-ratio: 13 / 14;
  background: var(--yellow);
  -webkit-mask: url("../assets/Motifs/star-01.svg") center / contain no-repeat;
  mask: url("../assets/Motifs/star-01.svg") center / contain no-repeat;
  animation: motif-twinkle 3s ease-in-out infinite;
}
.work__step .badge--yellow::after { background: var(--purple); }
.work__step:nth-child(3n + 1) .badge::after { animation-delay: -1s; animation-duration: 3.6s; }
.work__step:nth-child(3n + 2) .badge::after { animation-delay: -2.2s; animation-duration: 2.7s; }

/* Watch Us In Action */
.watch__item { position: relative; }
.watch__sticker { left: 4%; top: -24px; --rot: -8deg; }
.watch__star { --z: 2; right: -12px; top: -26px; --w: 34px; --rot: 12deg; }

/* Listen to our Naaris */
.voices__row { position: relative; }
.voices__blob { left: calc(50% - 330px); top: 14%; width: 660px; height: 76%; opacity: 0.45; }
.voices__quote { left: calc(50% - 360px); top: -44px; --w: 124px; --rot: -6deg; }
/* Closing mark: the same glyph turned upside down */
.voices__quote--end { left: auto; top: auto; right: calc(50% - 360px); bottom: -44px; --rot: 174deg; }
.voices__star { --z: 2; right: -12px; top: -16px; --w: 30px; --rot: 8deg; }

/* Footer */
.footer { position: relative; overflow: clip; }
.footer__path { right: 3%; top: 12px; --w: 150px; --rot: -4deg; }
.footer__star--a { right: calc(3% + 156px); top: 6px; --w: 22px; }

/* ============ Media overlay ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(22, 11, 49, 0.9);
  user-select: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay__frame {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.86);
  z-index: 21;
  overflow: hidden;
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.overlay__frame.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.overlay__frame--youtube { width: 80%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.overlay__frame--video { height: 80%; aspect-ratio: 0.5778 / 1; border-radius: 16px; background: #000; }
.overlay__frame iframe,
.overlay__frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
html.is-locked { overflow: hidden; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  :root { --section-pad: 96px; --gutter: 40px; --fs-1: 64px; --fs-2: 48px; --fs-3: 22px; }
  .nav__links { gap: 18px; }
  .work__trail { display: none; }
  .work__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
}

@media (max-width: 900px) {
  .nav { height: auto; }
  .nav__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .nav__links {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a:last-child { padding-right: 32px; }
  main { padding-top: 108px; }
  .pin.is-pinned .pin__stage { padding-top: 108px; }
  .hero__wrap, .why { grid-template-columns: minmax(0, 1fr); }
  .hero__wrap { min-height: 0; }
  .hero__media { justify-content: center; }
  .why__media { order: 2; }
  .programs__cards, .watch__videos { grid-template-columns: minmax(0, 1fr); }
  .slider__track { --item: 300px; padding-left: 24px; }
}

@media (max-width: 600px) {
  :root { --section-pad: 72px; --title-gap: 24px; --gutter: 16px; --fs-1: 44px; --fs-2: 36px; --fs-3: 20px; --fs-4: 16px; --fs-5: 14px; }
  .hero__wrap { padding-top: 32px; }
  .hero__sub { margin-top: 24px; }
  /* Hotspot offsets are in collage pixels, so drop them once the collage scales down */
  .why__collage { width: 300px; height: 297px; }
  .why__hot { display: none; }
  .why__blob { width: 320px; height: 310px; }
  .card__body { padding: 20px; }
  .program .card__body { padding: 20px; }
  .slider__track { --item: 78vw; padding-left: 16px; }
  .slider__arrow { display: none; }
  .work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .work__text { min-height: 124px; }
  .voices__row { gap: 16px; }
  .voices__card { width: calc(50% - 8px); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  /* Motifs: connectors and shapes off, a couple of sparkles per section, cards at 70% */
  .m-trail, .m-shape, .hero__path, .footer__path, .motif--desk { display: none; }
  .m-big { --w: 150px; }
  .motif--card { --ws: 0.7; }
  .hero__claude { left: -14px; top: 2%; }
  .hero__gpt { left: -6px; }
  .hero__skill--b { right: -8px; }
  .hero__star { left: -4px; top: -40px; --w: 30px; }
  .why__quote { --w: 64px; top: -36px; }
  .voices__quote { left: -6px; top: -14px; --w: 60px; }
  .voices__quote--end { left: auto; top: auto; right: -6px; bottom: -14px; }
  .voices__blob { left: -10%; width: 120%; }
  .program__sticker { right: -6px; --w: 92px; }
  .footer__star--a { right: 16px; }
}

/* ============ Motion (hidden states only apply when JS runs) ============ */
/* Blocks: soft fade-up */
.js [data-reveal] {
  opacity: 0;
  translate: 0 32px;
  transition: opacity var(--t-2) var(--ease) var(--d, 0s), translate var(--t-2) var(--ease) var(--d, 0s);
}
.js [data-reveal="fade"] { translate: none; }
.js [data-reveal="left"] { translate: -48px 0; }
.js [data-reveal="right"] { translate: 48px 0; }
.js [data-reveal].is-in { opacity: 1; translate: none; }

/* Titles: each line rises from behind its own baseline. The clip lifts once the
   rise has finished so swishes and earmarks can overhang again. */
.rise, .rise__in { display: block; }
.js .rise { clip-path: inset(-50% -50% -0.14em -50%); }
.js .rise__in { translate: 0 125%; }
.js .is-risen .rise { animation: rise-unclip var(--t-2) linear var(--d, 0s) forwards; }
.js .is-risen .rise__in { translate: none; transition: translate var(--t-2) var(--ease) var(--d, 0s); }
@keyframes rise-unclip {
  0%, 99% { clip-path: inset(-50% -50% -0.14em -50%); }
  100% { clip-path: none; }
}

/* Images: the photo opens out of a smaller window and settles from a slight zoom */
.js [data-unmask] img {
  clip-path: inset(10% 8% round 16px);
  scale: 1.12;
  transition: clip-path var(--t-3) var(--ease) var(--d, 0s), scale var(--t-3) var(--ease) var(--d, 0s);
}
.js [data-unmask].is-in img { clip-path: inset(0 round 0); scale: 1; }
.js [data-unmask] .lottie,
.js .voices__thumb[data-unmask]::after { opacity: 0; transition: opacity var(--t-2) var(--ease) calc(var(--d, 0s) + 0.6s); }
.js [data-unmask].is-in .lottie,
.js .voices__thumb[data-unmask].is-in::after { opacity: 1; }
.js .watch__thumb:hover .watch__frame.is-in img,
.js .voices__thumb:hover.is-in img { scale: 1.05; }

/* Hero entrance: headline rises, photo opens, the word is written, cards pop in, paths draw */
.hero__media-box { --d: 0.35s; }
.hero .script { --write-delay: 0.75s; }
.js .hero__blob,
.js .hero__glow { opacity: 0; scale: 0.92; transition: opacity var(--t-3) var(--ease) 0.2s, scale var(--t-3) var(--ease) 0.2s; }
.js .hero.is-in .hero__blob { opacity: 1; scale: 1; }
.js .hero.is-in .hero__glow { opacity: 0.6; scale: 1; }
.js .hero .motif--card { opacity: 0; scale: 0.6; transition: opacity var(--t-1) var(--ease) var(--d, 0s), scale var(--t-2) var(--ease) var(--d, 0s); }
.js .hero.is-in .motif--card { opacity: 1; scale: 1; }
.hero__claude { --d: 0.9s; }
.hero__skill--a { --d: 1s; }
.hero__skill--b { --d: 1.1s; }
.hero__gpt { --d: 1.2s; }

/* Pinned chapters (desktop): the stage sticks while scroll drives its content */
.pin.is-pinned { padding-block: 0; }
.pin.is-pinned .pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pin.is-pinned .slider__arrow { display: none; }
/* Milestones ride an arc (main.js sets --arc and each card's translate/rotate) */
.pin.is-pinned .slider__viewport { padding-bottom: calc(24px + var(--arc, 0px)); }
.pin.is-pinned .stat { transform-origin: 50% 120px; }
.pin.is-pinned .work__trail { clip-path: inset(-50% calc(100% - var(--trail, 0) * 100%) -50% -50%); }
.pin.is-pinned .work__text { opacity: 0.28; transition: opacity var(--t-1) var(--ease); }
.pin.is-pinned .work__step .badge { scale: 0.82; filter: grayscale(1) opacity(0.45); transition: scale var(--t-1) var(--ease), filter var(--t-1) var(--ease); }
.pin.is-pinned .work__step.is-on .work__text { opacity: 1; }
.pin.is-pinned .work__step.is-on .badge { scale: 1; filter: none; }
/* Each step's photo rises into its frame as the step lights up */
.js .pin.is-pinned .work__img { opacity: 0.45; transition: opacity var(--t-1) var(--ease); }
.js .pin.is-pinned .work__step.is-on .work__img { opacity: 1; }
.js .pin.is-pinned .work__img[data-unmask]:not(.is-in) img { clip-path: inset(100% 0 0 0 round 16px); scale: 1.18; }

/* Cards lean toward the cursor (main.js sets --rx/--ry on fine pointers) */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt-base, 0deg));
  transition: transform var(--t-1) var(--ease);
}

/* Video hover preview (testimonials) */
.voices__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-1) var(--ease), scale var(--t-3) var(--ease);
}
.voices__thumb.is-previewing .voices__preview { opacity: 1; }

/* "Play" cursor over videos */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: var(--fs-5);
  font-weight: 700;
  box-shadow: var(--shadow-tag);
  pointer-events: none;
  opacity: 0;
  scale: 0.3;
  transition: opacity var(--t-1) var(--ease), scale var(--t-1) var(--ease);
}
.cursor.is-on { opacity: 1; scale: 1; }
.has-cursor [data-youtube],
.has-cursor [data-video] { cursor: none; }

/* Script draw-in: the word is "written" left to right along its tilt (clip-path wipe, in the
   element's own rotated space), then the swish draws, then the earmarks pop. Negative insets
   keep the swish and earmarks, which sit outside the word's box, inside the visible area. */
.js .script,
.js .voices__name {
  clip-path: inset(-60% 100% -60% -20%);
  transition: clip-path var(--t-3) var(--ease) var(--write-delay, 0.45s);
}
.js .script.is-drawn,
.js .voices__name.is-drawn { clip-path: inset(-60% -60% -60% -20%); }
.js .script__swish {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-1) var(--ease) calc(var(--write-delay, 0.45s) + 0.7s);
}
.js .is-drawn .script__swish { clip-path: inset(0 0 0 0); }
.js .script__earmarks {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 0 100%;
  transition: opacity var(--t-1) var(--ease) calc(var(--write-delay, 0.45s) + 1s), transform var(--t-1) var(--ease) calc(var(--write-delay, 0.45s) + 1s);
}
.js .is-drawn .script__earmarks { opacity: 1; transform: none; }

/* Sparkles: slow looping swing around their resting tilt */
@keyframes sparkle-swing {
  from { rotate: calc(var(--rot, 0deg) - 14deg); }
  to { rotate: calc(var(--rot, 0deg) + 14deg); }
}
/* Stars twinkle; main.js gives each its own --dur/--delay so they never pulse together */
@keyframes motif-twinkle {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 0.85; opacity: 0.5; }
}
[data-twinkle] {
  animation:
    sparkle-swing 3s ease-in-out var(--delay, 0s) infinite alternate,
    motif-twinkle var(--dur, 3.2s) ease-in-out var(--delay, 0s) infinite;
}
/* Cards and stickers bob gently */
@keyframes motif-float {
  from { translate: 0 -5px; rotate: calc(var(--rot, 0deg) - 2deg); }
  to { translate: 0 5px; rotate: calc(var(--rot, 0deg) + 2deg); }
}
[data-float] { animation: motif-float var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate; }
/* Dotted paths draw in once they scroll into view */
.js [data-draw] {
  clip-path: inset(-20% 100% -20% -20%);
  transition: clip-path var(--t-3) var(--ease) 0.2s;
}
.js [data-draw="down"] { clip-path: inset(-20% -20% 100% -20%); }
.js [data-draw].is-drawn { clip-path: inset(-20%); }
.js .hero [data-draw] { transition-delay: 1.25s; }
/* The arced milestone trail bows well outside its 40px box */
.js .pin.is-pinned .milestones__trail { clip-path: inset(-400% 100% -400% -20%); }
.js .pin.is-pinned .milestones__trail.is-drawn { clip-path: inset(-400% -20%); }
.sparkle,
.card__tab img,
.chip::before { animation: sparkle-swing 2.8s ease-in-out infinite alternate; }
.hero__sparkle--a { animation-delay: -0.9s; }
.hero__sparkle--b { animation-delay: -1.8s; animation-duration: 3.4s; }
.chip:nth-child(even)::before { animation-delay: -1.4s; }

@media (prefers-reduced-motion: reduce) {
  .sparkle, .card__tab img, .chip::before,
  [data-twinkle], [data-float], .work__step .badge::after { animation: none; }
  .js [data-draw] { transition: none !important; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; }
  .js .rise { clip-path: none; }
  .js .rise__in { translate: none; }
  .js [data-unmask] img { clip-path: none; scale: 1; }
  .js .hero .motif--card, .js .hero__blob, .js .hero__glow { opacity: 1; scale: 1; }
  .btn, [data-tilt], .nav, .cursor { transition: none; }
  .js .script, .js .voices__name, .js .script__swish, .js .script__earmarks { transition: none !important; }
}