/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — «عن المدرسة»
   Hero with a sunlit arch, the story emblem, vision / mission / values,
   the four-step approach, the two stages, the fanned thank-you cards,
   the numbers band and the parents' words.

   States that wait for the reader (the emblem ring, the approach line, the
   fan) are only armed once assets/js/pages/about.js adds .about-motion, so
   the page reads complete without the script or with reduced motion.
   ───────────────────────────────────────────────────────────────────────────── */

@layer sections {

  /* The waiting states are applied without animating into them. */
  .about-arming :is(.approach__node, .fan__item, .fan__card),
  .about-arming .approach__node::before { transition: none !important; }

  /* Page-only icon symbols: defined in the markup, never painted there. */
  .about-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

  @keyframes about-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }
  @keyframes about-node-pop {
    0%   { scale: 0.82; }
    55%  { scale: 1.1; }
    100% { scale: 1; }
  }
  @keyframes about-dot-pop {
    0%   { fill: var(--gold-border); scale: 0.7; }
    55%  { fill: var(--red); scale: 1.7; }
    100% { fill: var(--red); scale: 1; }
  }

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .about-hero { padding-bottom: clamp(4rem, 2.5rem + 4vw, 6.5rem); }
  .about-hero .page-hero__copy { gap: var(--s-5); }
  .about-hero .page-hero__title { font-size: clamp(2.35rem, 1.4rem + 3.3vw, 4.3rem); }
  /* The marker swash draws in once the title has landed. */
  .about-hero .highlight::before { animation: highlight-draw 0.9s var(--ease-out) 0.85s both; }

  .about-hero__marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-1);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
  }
  .about-hero__marks li { display: inline-flex; align-items: center; gap: var(--s-2); }
  .about-hero__marks svg {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.25rem;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-border);
  }

  /* The picture in its arch, with sun rays, a dashed orbit and two floating
     notes layered on the same grid cell. */
  .about-hero__stage {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(100%, 31rem);
    padding-block: var(--s-2) var(--s-4);
  }
  .about-hero__stage > * { grid-area: 1 / 1; }
  .about-hero__art { z-index: 1; }
  .about-hero__art img { object-position: 18% 50%; transition: scale 1.4s var(--ease-out); }
  .about-hero__art:hover img { scale: 1.04; }
  .about-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgb(255 244 214 / 0.42), transparent 40%);
    pointer-events: none;
  }

  /* The rays and the orbit share the arch's cell but must not size the row:
     negative block margins (a share of the column width) shrink their margin
     boxes below the arch, so the arch alone sets the height. Their translate
     is left to the parallax script. */
  .about-hero__rays {
    width: 128%;
    margin-block: -20%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.3) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 72%);
    mask: radial-gradient(closest-side, #000 22%, transparent 72%);
    animation: rays-spin 100s linear infinite;
    pointer-events: none;
  }
  .about-hero__orbit {
    position: relative;
    width: 108%;
    margin-block: -10%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed rgb(233 178 58 / 0.6);
    animation: rays-spin 48s linear infinite;
    pointer-events: none;
  }
  .about-hero__orbit-dot {
    position: absolute;
    top: 50%;
    left: -7px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgb(247 209 74 / 0.45), 0 0 16px rgb(215 20 31 / 0.55);
  }

  .about-hero__sun {
    z-index: 2;
    justify-self: end;
    align-self: start;
    width: clamp(5rem, 3.8rem + 3vw, 7.25rem);
    height: auto;
    aspect-ratio: 1;
    margin-top: 1.25rem;
    rotate: 12deg;
    filter: drop-shadow(0 10px 16px rgb(150 100 10 / 0.25));
    animation: sticker-float 6s ease-in-out infinite;
  }

  .about-hero__note {
    z-index: 2;
    justify-self: start;
    align-self: end;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: 3.5rem;
    padding-block: var(--s-2);
    padding-inline: var(--s-2) var(--s-5);
    border-radius: var(--r-pill);
    animation: about-bob 7s ease-in-out 1.2s infinite;
  }
  .about-hero__note img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 2px var(--white), 0 8px 18px -8px rgb(181 18 28 / 0.55);
  }
  .about-hero__note-text { display: grid; line-height: 1.3; }
  .about-hero__note-text strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
  .about-hero__note-text .ltr { color: var(--ink-2); font-size: 0.72rem; font-weight: 500; }

  /* ── Story ─────────────────────────────────────────────────────────────── */
  .story { isolation: isolate; overflow: clip; }
  .story .ambient { --glow-a: 24% 52%; --glow-b: 88% 22%; }
  .story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .story__copy { display: grid; gap: var(--s-6); justify-items: start; }
  .story__text { display: grid; gap: var(--s-4); max-width: 38rem; color: var(--ink-2); }
  .story__sign {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: min(100%, 38rem);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-strong);
  }
  .story__sign img {
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--gold-border), var(--shadow-sm);
  }
  .story__sign-text { display: grid; }
  .story__sign-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
  .story__sign-motto { color: var(--red-strong); font-size: var(--fs-small); line-height: 1.5; }

  /* The emblem: thirteen dots light up around the disc as the years count up. */
  .story__art { justify-self: center; width: min(100%, 32rem); }
  .emblem {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
  }
  .emblem > * { grid-area: 1 / 1; }
  /* Sun rays burst from just outside the lettered ring. */
  .emblem__rays {
    z-index: -1;
    width: 136%;
    height: 136%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgb(247 209 74 / 0.4) 0deg 4deg, transparent 4deg 12deg);
    -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 75%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 66%, #000 75%, transparent 100%);
    animation: rays-spin 110s linear infinite;
    pointer-events: none;
  }
  .emblem__halo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.92) 74%, rgb(255 246 222 / 0.7) 90%, rgb(255 244 214 / 0) 100%);
    box-shadow: inset 0 0 0 1px rgb(233 178 58 / 0.18);
  }
  .emblem__ring { width: 100%; height: 100%; overflow: visible; animation: rays-spin 90s linear infinite; }
  .emblem__ring text { font-family: var(--font-body); font-size: 5.3px; font-weight: 500; fill: var(--red-strong); }
  .emblem__dots { width: 100%; height: 100%; overflow: visible; }
  .emblem__dot { fill: var(--red); transform-box: fill-box; transform-origin: center; }
  .emblem__dot--last { filter: drop-shadow(0 0 2px rgb(247 209 74 / 0.9)); }
  .about-motion .emblem:not(.is-lit) .emblem__dot { fill: var(--gold-border); }
  .about-motion .emblem.is-lit .emblem__dot { animation: about-dot-pop 0.7s var(--ease-out) var(--d, 0ms) both; }

  .emblem__disc {
    position: relative;
    z-index: 1;
    width: 60%;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient(120% 90% at 50% 0%, var(--white), var(--bg-deep));
    box-shadow:
      0 0 0 10px rgb(255 255 255 / 0.65),
      0 0 0 11px var(--gold-border),
      var(--shadow-lg),
      0 50px 90px -40px rgb(181 18 28 / 0.45);
    line-height: 1;
  }
  .emblem__num {
    font-family: var(--font-display);
    font-size: clamp(4.75rem, 2.5rem + 7vw, 8rem);
    font-weight: 700;
    line-height: 0.95;
    background: linear-gradient(180deg, #F0444A 10%, var(--red-strong) 60%, var(--red-deeper));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 10px rgb(181 18 28 / 0.18));
  }
  .emblem__unit { margin-top: 0.1em; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--ink); }
  .emblem__caption { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4; }

  .story__chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: 0.45rem;
    padding-inline: 0.45rem 1.15rem;
    border-radius: var(--r-pill);
    animation: about-bob 7s ease-in-out infinite;
  }
  .story__chip--from { top: 7%; inset-inline-start: -3%; }
  .story__chip--to { bottom: 8%; inset-inline-end: -5%; animation-delay: -3.5s; }
  .story__chip-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 3px rgb(247 209 74 / 0.45);
  }
  .story__chip--to .story__chip-icon { background: linear-gradient(160deg, #FFE285, #E4A72A); color: var(--red-deeper); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.8); }
  .story__chip-icon svg { width: 1.1rem; height: 1.1rem; }
  .story__chip-text { display: grid; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--ink); }
  .story__chip-text small { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); }

  /* ── Vision, mission, values ───────────────────────────────────────────── */
  .pillars { isolation: isolate; overflow: clip; }
  .pillars .ambient { --glow-a: 50% 55%; --glow-b: 10% 30%; }
  .pillars__sun {
    flex: none;
    width: 7.5rem;
    height: 7.5rem;
    rotate: 10deg;
    animation: sticker-float 6s ease-in-out infinite;
  }

  .pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    align-items: stretch;
  }
  .pillars__grid > li { display: grid; }

  .pillar {
    --lift: 0px;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
    border-radius: var(--r-xl);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .pillar:hover { --lift: -6px; box-shadow: var(--shadow-inset), var(--shadow-lg); }
  /* A pool of morning light behind the medallion */
  .pillar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -35%;
    inset-inline-start: -25%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(247 209 74 / 0.28), transparent);
    pointer-events: none;
  }
  .pillar__num {
    position: absolute;
    z-index: -1;
    top: 0.75rem;
    inset-inline-end: 1.4rem;
    font-family: var(--font-display);
    font-size: clamp(4rem, 3rem + 2.5vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(233 178 58 / 0.5);
    user-select: none;
  }
  .pillar__icon {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    transition: rotate var(--dur-slow) var(--ease-out);
  }
  .pillar:hover .pillar__icon { rotate: -8deg; }
  .pillar__icon svg { width: 1.8rem; height: 1.8rem; }
  .pillar__title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem); }
  .pillar__text { color: var(--ink-2); line-height: 1.9; }
  .pillar__rule {
    width: 3rem;
    height: 3px;
    margin-top: auto;
    border-radius: 3px;
    background: linear-gradient(to left, var(--red), var(--gold-bright));
    transition: width var(--dur-slow) var(--ease-out);
  }
  .pillar:hover .pillar__rule { width: 6.5rem; }

  .pillar--vision .pillar__icon {
    background: linear-gradient(160deg, #FFE285, #E4A72A);
    color: var(--red-deeper);
    box-shadow: 0 0 0 6px rgb(247 209 74 / 0.22), 0 14px 26px -14px rgb(150 100 10 / 0.6);
  }
  .pillar--values .pillar__icon {
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 6px rgb(247 209 74 / 0.28), var(--shadow-red);
  }

  /* The mission card carries the brand crimson. */
  .pillar--mission {
    background:
      radial-gradient(110% 80% at 100% 0%, rgb(247 209 74 / 0.16), transparent 55%),
      linear-gradient(160deg, #C9161F, var(--red-strong) 45%, var(--red-deeper));
    border-color: rgb(255 255 255 / 0.22);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 40px 80px -40px rgb(149 14 23 / 0.65);
    color: var(--white);
  }
  .pillar--mission:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 50px 90px -40px rgb(149 14 23 / 0.75); }
  .pillar--mission::before { background: radial-gradient(closest-side, rgb(247 209 74 / 0.22), transparent); }
  .pillar--mission::after {
    background:
      radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.16), transparent 40%),
      radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgb(247 209 74 / 0.14), transparent 46%);
  }
  .pillar--mission .pillar__title { color: var(--white); }
  .pillar--mission .pillar__text { color: rgb(255 255 255 / 0.92); }
  .pillar--mission .pillar__num { -webkit-text-stroke-color: rgb(255 255 255 / 0.3); }
  .pillar--mission .pillar__icon {
    background: var(--white);
    color: var(--red-strong);
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.16), 0 14px 26px -12px rgb(0 0 0 / 0.35);
  }
  .pillar--mission .pillar__rule { background: linear-gradient(to left, var(--white), var(--gold-bright)); }

  .values-block { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
  .values-block__head { display: flex; align-items: center; gap: var(--s-5); margin-bottom: var(--s-8); }
  .values-block__head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, var(--gold-border), transparent);
  }
  .values-block__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
  .values-block__title span { color: var(--red); }

  .values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .values-grid > li { display: grid; }
  .value-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .value-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .value-tile .icon-tile {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    background-color: var(--red-soft);
    color: var(--red-strong);
    box-shadow: inset 0 0 0 1px var(--red-border);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) linear;
  }
  .value-tile .icon-tile svg { width: 1.35rem; height: 1.35rem; }
  .value-tile:hover .icon-tile { background-color: var(--red-strong); color: var(--white); box-shadow: 0 0 0 4px rgb(247 209 74 / 0.3); rotate: -8deg; }
  .value-tile__body { display: grid; gap: var(--s-1); min-width: 0; }
  .value-tile__title { font-size: 1.2rem; line-height: 1.4; }
  .value-tile__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }

  /* ── Approach: four steps joined by a gold line ────────────────────────── */
  .approach-sec__head { justify-content: center; text-align: center; }
  .approach-sec__head .section-head__text { justify-items: center; margin-inline: auto; }
  .approach-sec__head .section-head__lead { text-wrap: balance; }

  .approach {
    --node: 5.25rem;
    --gap: clamp(1rem, 0.2rem + 1.6vw, 2rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
  }
  .approach__step {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    gap: var(--s-6);
    text-align: center;
  }
  /* A dashed guide, and the gold line that draws over it toward the next step. */
  .approach__step:not(:last-child)::before,
  .approach__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--node) / 2 - 1.5px);
    inset-inline-start: calc(50% + var(--node) / 2 + 0.75rem);
    width: calc(100% + var(--gap) - var(--node) - 1.5rem);
    height: 3px;
    border-radius: 3px;
    pointer-events: none;
  }
  .approach__step:not(:last-child)::before {
    background: repeating-linear-gradient(to left, var(--gold-border) 0 8px, transparent 8px 14px);
  }
  .approach__step:not(:last-child)::after {
    background: linear-gradient(to left, var(--gold-bright), var(--gold) 55%, var(--red));
    box-shadow: 0 0 12px rgb(233 178 58 / 0.55);
    clip-path: inset(0 0 0 0);
  }
  .about-motion .approach__step:not(.is-lit)::after { clip-path: inset(0 0 0 100%); }
  .approach__step.is-lit::after {
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--draw-delay, 0ms) + 300ms);
  }

  .approach__node {
    position: relative;
    isolation: isolate;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    background: var(--white);
    color: var(--white);
    border: 1px solid var(--gold-border);
    box-shadow: 0 0 0 8px rgb(247 209 74 / 0.28), var(--shadow-red);
  }
  .approach__node::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
  }
  .approach__step.is-lit .approach__node { transition: color 0.5s var(--ease-out) var(--draw-delay, 0ms), box-shadow 0.6s var(--ease-out) var(--draw-delay, 0ms); }
  .approach__step.is-lit .approach__node::before { transition: opacity 0.5s var(--ease-out) var(--draw-delay, 0ms); }
  .approach__node svg { width: 1.9rem; height: 1.9rem; }
  .approach__num {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.6rem;
    display: grid;
    place-items: center;
    min-width: 2.2rem;
    height: 1.6rem;
    padding-inline: 0.45rem;
    border-radius: var(--r-pill);
    background: var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-border), var(--shadow-sm);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1;
  }
  .about-motion .approach__step:not(.is-lit) .approach__node { color: var(--red); scale: 0.82; box-shadow: 0 0 0 8px rgb(255 255 255 / 0.6), var(--shadow-md); }
  .about-motion .approach__step:not(.is-lit) .approach__node::before { opacity: 0; }
  .about-motion .approach__step.is-lit .approach__node { animation: about-node-pop 0.9s var(--ease-out) var(--draw-delay, 0ms) both; }

  /* The reveal rides on this wrapper, so the card keeps its own hover motion
     and the node is already in place when it lights up. */
  .approach__body { display: grid; width: 100%; min-width: 0; }
  .approach__card {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    width: 100%;
    height: 100%;
    padding: var(--s-6) var(--s-5);
    border-radius: var(--r-lg);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .approach__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .approach__title { font-size: var(--fs-h3); }
  .approach__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.85; }

  /* ── Stages ────────────────────────────────────────────────────────────── */
  .stages__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  }
  .stages__grid > li { display: grid; }
  .stage-card {
    --lift: 0px;
    display: flex;
    flex-direction: column;
    padding: var(--s-3);
    border-radius: var(--r-xl);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    transform: perspective(1200px) translateY(var(--lift)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .stage-card:hover { --lift: -8px; box-shadow: var(--shadow-inset), var(--shadow-lg), 0 50px 90px -50px rgb(181 18 28 / 0.4); }
  .stage-card:has(.stage-card__title a:focus-visible) { outline: 3px solid var(--red); outline-offset: 4px; }
  .stage-card__title a:focus-visible { outline: none; }

  .stage-card__media {
    position: relative;
    aspect-ratio: 1516 / 484;
    border-radius: calc(var(--r-xl) - var(--s-3));
    overflow: hidden;
    background: var(--gold-soft);
  }
  .stage-card__media picture, .stage-card__media img { width: 100%; height: 100%; }
  .stage-card__media img { object-fit: cover; transition: scale 1.2s var(--ease-out); }
  .stage-card:hover .stage-card__media img { scale: 1.04; }
  .stage-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.4) 50%, transparent 65%);
    translate: 120% 0;
    transition: translate 1.1s var(--ease-out);
    pointer-events: none;
  }
  .stage-card:hover .stage-card__media::after { translate: -120% 0; }

  .stage-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6) clamp(0.75rem, 0.3rem + 1.2vw, 1.5rem) var(--s-3);
  }
  .stage-card__head { display: flex; align-items: center; gap: var(--s-4); }
  .stage-card__icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 5px rgb(247 209 74 / 0.3), var(--shadow-red);
    transition: rotate var(--dur-slow) var(--ease-out);
  }
  .stage-card:hover .stage-card__icon { rotate: -10deg; }
  .stage-card__icon svg { width: 1.55rem; height: 1.55rem; }
  .stage-card__kicker { color: var(--gold-deep); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
  .stage-card__title { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.2; }
  .stage-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-xl); }
  .stage-card__desc { color: var(--ink-2); line-height: 1.85; }
  .stage-card__list { display: grid; gap: var(--s-2); }
  .stage-card__list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); font-weight: 500; }
  .stage-card__list svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    padding: 0.3rem;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-border);
  }
  .stage-card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .stage-card__programs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .stage-card__programs .chip { min-height: 2.1rem; transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear; }
  .stage-card__programs .chip:hover { background: var(--red-strong); color: var(--white); }
  .stage-card__cta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--red-strong); font-weight: 500; white-space: nowrap; }
  .stage-card__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .stage-card:hover .stage-card__cta svg { transform: translateX(-4px); }

  /* ── Partners: the thank-you cards held like a fan ─────────────────────── */
  .partners { isolation: isolate; overflow: clip; }
  .partners .ambient { --glow-a: 50% 70%; --glow-b: 85% 15%; --glow-red: rgb(247 209 74 / 0.14); }
  .partners__quote {
    position: relative;
    flex: none;
    width: min(100%, 22rem);
    padding: var(--s-5) var(--s-6);
    padding-inline-start: 3.6rem;
    border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--gold-soft), rgb(255 255 255 / 0.75));
    border: 1px solid var(--gold-border);
    rotate: -1.5deg;
  }
  .partners__quote svg { position: absolute; inset-inline-start: 1.1rem; top: 1.25rem; width: 1.6rem; height: 1.6rem; color: var(--gold); }
  .partners__quote p { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.75; color: var(--ink); }
  .partners__quote figcaption { margin-top: var(--s-2); color: var(--gold-deep); font-size: var(--fs-caption); font-weight: 500; }

  .fan-wrap { position: relative; display: grid; justify-items: center; gap: var(--s-2); }
  .fan-wrap__glow {
    position: absolute;
    z-index: -1;
    inset: 10% 15% 18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(247 209 74 / 0.4), transparent);
    filter: blur(10px);
    pointer-events: none;
  }
  .fan {
    --card-w: clamp(10.5rem, 17vw, 15rem);
    --step: calc(var(--card-w) * 0.7);
    --angle: 7deg;
    position: relative;
    width: 100%;
    height: calc(var(--card-w) * 1.5 + 12px + 5rem);
  }
  .fan__item {
    --open: 1;
    --shift: 0rem;
    --rise: 0rem;
    --spread: 1;
    --scale: 1;
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    width: var(--card-w);
    margin-left: calc(var(--card-w) / -2);
    z-index: var(--fz);
    transform-origin: 50% 100%;
    transform:
      translateX(calc(var(--fx) * var(--step) * var(--open) + var(--shift)))
      translateY(calc(var(--fy) * 1rem * var(--open) + var(--rise)))
      rotate(calc(var(--fr) * (var(--angle) * var(--open) + 2.5deg * (1 - var(--open))) * var(--spread)))
      scale(var(--scale));
    transition: transform 0.9s var(--ease-out), z-index 0s linear 0.3s;
  }
  /* In RTL the first card rests on the right. */
  .fan__item:nth-child(1) { --fx: 2;  --fy: 1.5; --fr: 2;  --fz: 1; --fd: 2; }
  .fan__item:nth-child(2) { --fx: 1;  --fy: 0.4; --fr: 1;  --fz: 2; --fd: 1; }
  .fan__item:nth-child(3) { --fx: 0;  --fy: 0;   --fr: 0;  --fz: 3; --fd: 0; }
  .fan__item:nth-child(4) { --fx: -1; --fy: 0.4; --fr: -1; --fz: 2; --fd: 1; }
  .fan__item:nth-child(5) { --fx: -2; --fy: 1.5; --fr: -2; --fz: 1; --fd: 2; }
  /* Keeps the hover target under the pointer while the card lifts. */
  .fan__item::before { content: ""; position: absolute; inset: -0.5rem -0.25rem -2.75rem; }

  /* A card lifts under the pointer or with keyboard focus, never merely
     because it holds focus (a mouse click, or the focus the lightbox hands
     back when it closes). */
  .fan__item:is(:hover, :has(> .fan__card:focus-visible)) {
    --rise: -2rem;
    --spread: 0.3;
    --scale: 1.05;
    z-index: 10;
    transition: transform 0.9s var(--ease-out), z-index 0s;
  }
  .fan__item:is(:hover, :has(> .fan__card:focus-visible)) ~ .fan__item { --shift: calc(var(--step) * -0.3); }
  .fan__item:has(~ .fan__item:hover, ~ .fan__item > .fan__card:focus-visible) { --shift: calc(var(--step) * 0.3); }

  /* Collapsed into a neat stack until the fan comes into view. */
  @media (min-width: 861px) {
    .about-motion .fan:not(.is-open) .fan__item { --open: 0; --scale: 0.94; }
    .fan.is-opening .fan__item { transition-delay: calc(var(--fd) * 110ms + 120ms), 0s; }
  }

  .fan__card {
    display: block;
    width: 100%;
    aspect-ratio: 393 / 590;
    padding: 0;
    border-radius: var(--r-md);
    background: var(--white);
    border: 6px solid var(--white);
    box-shadow: 0 0 0 1px var(--gold-border), 0 30px 60px -30px rgb(120 32 20 / 0.5), 0 8px 18px -10px rgb(120 32 20 / 0.2);
    cursor: zoom-in;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .fan__item:is(:hover, :has(> .fan__card:focus-visible)) .fan__card { box-shadow: 0 0 0 1px var(--gold), 0 40px 80px -30px rgb(120 32 20 / 0.6), 0 0 0 7px rgb(247 209 74 / 0.25); }
  .fan__card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
  .fan__media { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--r-md) - 6px); }
  .fan__media picture, .fan__media img { width: 100%; height: 100%; }
  .fan__media img { object-fit: cover; }

  .fan__plate {
    position: absolute;
    z-index: 1;
    inset: auto 0.45rem 0.45rem;
    display: grid;
    justify-items: center;
    padding: 0.35rem 0.5rem 0.45rem;
    border-radius: calc(var(--r-md) - 0.6rem);
    background: rgb(255 255 255 / 0.84);
    border: 1px solid rgb(255 255 255 / 0.9);
    box-shadow: 0 8px 18px -10px rgb(120 32 20 / 0.35);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    line-height: 1.3;
    text-align: center;
  }
  .fan__role { color: var(--ink-2); font-size: 0.72rem; font-weight: 500; }
  .fan__name { font-family: var(--font-display); font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem); font-weight: 700; color: var(--red-strong); }

  .fan__zoom {
    position: absolute;
    z-index: 1;
    top: 0.6rem;
    inset-inline-end: 0.6rem;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.9);
    color: var(--red-strong);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    scale: 0.6;
    transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-slow) var(--ease-out);
  }
  .fan__zoom svg { width: 1rem; height: 1rem; }
  .fan__item:is(:hover, :has(> .fan__card:focus-visible)) .fan__zoom { opacity: 1; scale: 1; }

  .fan-hint { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-small); }
  .fan-hint svg { width: 1rem; height: 1rem; color: var(--red); }

  /* ── Numbers band ──────────────────────────────────────────────────────── */
  .numbers { position: relative; background: linear-gradient(to bottom, var(--bg-deep) 50%, var(--bg) 50%); }
  .numbers__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1rem, 0.25rem + 2.5vw, 3rem);
    border-radius: var(--r-xl);
    background:
      radial-gradient(80% 120% at 85% 0%, rgb(247 209 74 / 0.2), transparent 60%),
      radial-gradient(60% 90% at 10% 100%, rgb(0 0 0 / 0.18), transparent 70%),
      linear-gradient(135deg, #C3141D, var(--red-strong) 45%, #8A0D15);
    color: var(--white);
    box-shadow: 0 40px 80px -40px rgb(149 14 23 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.25);
  }
  /* A fine gold frame inside the band */
  .numbers__panel::before {
    content: "";
    position: absolute;
    inset: 0.6rem;
    border-radius: calc(var(--r-xl) - 0.6rem);
    border: 1px solid rgb(247 209 74 / 0.4);
    pointer-events: none;
  }
  .numbers__rays {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 64rem;
    height: 64rem;
    margin: -32rem 0 0 -32rem;
    background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.06) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 70%);
    mask: radial-gradient(closest-side, #000 15%, transparent 70%);
    animation: rays-spin 140s linear infinite;
    pointer-events: none;
  }
  .numbers__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    color: var(--white);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    font-weight: 600;
    text-align: center;
  }
  .numbers__title svg { width: 0.85rem; height: 0.85rem; color: var(--gold-bright); }
  .numbers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { display: grid; justify-items: center; align-content: start; gap: var(--s-1); padding: var(--s-3) var(--s-4); text-align: center; }
  .stat + .stat { border-inline-start: 1px solid rgb(255 255 255 / 0.18); }
  .stat__value {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
  }
  .stat__value .num {
    background: linear-gradient(180deg, #FFF6D2 5%, var(--gold-bright) 55%, #EDB73C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 8px rgb(60 0 0 / 0.3));
  }
  .stat__star { width: 0.55em; height: 0.55em; color: var(--gold-bright); filter: drop-shadow(0 2px 6px rgb(60 0 0 / 0.35)); }
  .stat__label { color: rgb(255 255 255 / 0.9); font-size: var(--fs-small); line-height: 1.6; }

  /* ── Parents' words ────────────────────────────────────────────────────── */
  .voices { isolation: isolate; overflow: clip; }
  .voices .ambient { --glow-a: 68% 42%; --glow-b: 12% 72%; }
  .voices__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .voices__intro { display: grid; gap: var(--s-6); justify-items: start; }
  .praise { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .praise li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.6rem;
    padding-inline: 0.4rem 1rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.78);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    font-size: var(--fs-small);
    font-weight: 500;
  }
  .praise svg { width: 1.8rem; height: 1.8rem; padding: 0.4rem; border-radius: 50%; background: var(--red-soft); color: var(--red-strong); }

  .voices__quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-10) var(--s-5);
    align-items: center;
    padding-top: var(--s-6);
  }
  .quote-card {
    position: relative;
    display: grid;
    gap: var(--s-4);
    padding: clamp(2.5rem, 1.8rem + 2vw, 3.25rem) clamp(1.4rem, 1rem + 1.5vw, 2.5rem) clamp(1.4rem, 1rem + 1vw, 2rem);
    border-radius: var(--r-xl);
  }
  .quote-card--main { grid-column: 1 / -1; rotate: -0.8deg; }
  .quote-card--alt { grid-column: 2; grid-row: 2; rotate: 1.2deg; }
  .voices__more { grid-column: 1; grid-row: 2; justify-self: center; display: grid; }
  .quote-card__mark {
    position: absolute;
    top: -1.6rem;
    inset-inline-start: 2rem;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 5px rgb(247 209 74 / 0.35), var(--shadow-red);
  }
  .quote-card__mark svg { width: 1.45rem; height: 1.45rem; }
  .quote-card--alt .quote-card__mark { top: -1.35rem; width: 2.8rem; height: 2.8rem; background: linear-gradient(160deg, #FFE285, #E4A72A); color: var(--red-deeper); box-shadow: 0 0 0 5px rgb(255 255 255 / 0.8), var(--shadow-sm); }
  .quote-card--alt .quote-card__mark svg { width: 1.2rem; height: 1.2rem; }
  .quote-card__stars { position: absolute; top: 1.2rem; inset-inline-end: 1.75rem; display: flex; gap: 2px; color: var(--gold); }
  .quote-card__stars svg { width: 1rem; height: 1rem; }
  .quote-card__text p { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 600; line-height: 1.7; color: var(--ink); }
  .quote-card--alt .quote-card__text p { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); line-height: 1.8; }
  .quote-card__by { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .quote-card__by > span:last-child { display: grid; line-height: 1.45; }
  .quote-card__avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--gold-border);
  }
  .quote-card__avatar svg { width: 1.2rem; height: 1.2rem; }
  .quote-card__name { font-weight: 600; color: var(--red-strong); }
  .quote-card__role { color: var(--ink-2); font-size: var(--fs-caption); }

  /* An invitation to the rest of the parents' comments on Facebook */
  .voices__fb {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3);
    padding-inline-end: var(--s-5);
    border-radius: var(--r-pill);
    rotate: -1deg;
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .voices__fb:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .voices__fb:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
  .voices__fb .icon-tile {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgb(24 119 242 / 0.1), var(--shadow-sm);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear;
  }
  .voices__fb:hover .icon-tile { background-color: #1877F2; color: var(--white); }
  .voices__fb-text { display: grid; min-width: 0; line-height: 1.4; }
  .voices__fb-kicker { color: var(--ink-2); font-size: var(--fs-caption); }
  .voices__fb-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
  .voices__fb-arrow { width: 1.2rem; height: 1.2rem; flex: none; margin-inline-start: var(--s-2); color: var(--red-strong); transition: transform var(--dur-base) var(--ease-out); }
  .voices__fb:hover .voices__fb-arrow { transform: translateX(-4px); }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 1180px) {
    .approach { --node: 4.75rem; }
    .approach__card { padding: var(--s-5) var(--s-4); }
  }

  @media (max-width: 1080px) {
    .voices__grid { grid-template-columns: minmax(0, 1fr); }
    .voices__quotes { padding-top: var(--s-8); }
  }

  /* The approach turns into a vertical path. */
  @media (max-width: 960px) {
    .approach { --node: 4rem; --gap: var(--s-5); grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
    .approach__step {
      grid-template-columns: var(--node) minmax(0, 1fr);
      grid-template-rows: auto;
      justify-items: stretch;
      align-items: start;
      gap: var(--s-5);
      text-align: start;
    }
    .approach__step:not(:last-child)::before,
    .approach__step:not(:last-child)::after {
      top: calc(var(--node) + 0.6rem);
      inset-inline-start: calc(var(--node) / 2 - 1.5px);
      width: 3px;
      height: calc(100% + var(--gap) - var(--node) - 1.2rem);
    }
    .approach__step:not(:last-child)::before { background: repeating-linear-gradient(to bottom, var(--gold-border) 0 8px, transparent 8px 14px); }
    .approach__step:not(:last-child)::after { background: linear-gradient(to bottom, var(--gold-bright), var(--gold) 55%, var(--red)); }
    .about-motion .approach__step:not(.is-lit)::after { clip-path: inset(0 0 100% 0); }
    .approach__node svg { width: 1.55rem; height: 1.55rem; }
    .approach__num { top: -0.5rem; inset-inline-end: -0.9rem; min-width: 2rem; height: 1.45rem; }
    .approach__card { padding: var(--s-5); }
  }

  @media (max-width: 900px) {
    .about-hero__stage { width: min(100%, 26rem); padding-block: var(--s-4) var(--s-6); }
    .about-hero__rays { width: 110%; margin-block: -20%; }
    .about-hero__orbit { width: 96%; margin-block: -13%; }
    .about-hero__note { margin-bottom: 1.5rem; }
    .story__grid { grid-template-columns: minmax(0, 1fr); }
    .story__art { width: min(100%, 28rem); }
    .pillars__sun { display: none; }
    .pillars__grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
    .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-head:has(.partners__quote) { align-items: stretch; }
  }

  /* The fan becomes a swipeable row of cards. */
  @media (max-width: 860px) {
    .stages__grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
    .fan {
      --card-w: min(60vw, 14rem);
      display: flex;
      gap: var(--s-4);
      width: calc(100% + var(--gutter) * 2);
      height: auto;
      margin-inline: calc(var(--gutter) * -1);
      padding: var(--s-8) calc((100% + var(--gutter) * 2 - var(--card-w)) / 2);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .fan::-webkit-scrollbar { display: none; }
    /* A mouse cannot swipe: show a slim gold scrollbar to drag instead. */
    @media (hover: hover) and (pointer: fine) {
      .fan { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; padding-bottom: var(--s-6); }
      .fan::-webkit-scrollbar { display: block; height: 6px; }
      .fan::-webkit-scrollbar-track { background: transparent; }
      .fan::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 6px; }
    }
    .fan__item {
      position: relative;
      left: auto;
      bottom: auto;
      flex: none;
      margin: 0;
      scroll-snap-align: center;
      z-index: auto;
      transform: translateY(var(--rise)) rotate(calc(var(--mr, 0) * 1deg * var(--spread)));
    }
    .fan__item:nth-child(odd) { --mr: -2; }
    .fan__item:nth-child(even) { --mr: 2; }
    .fan__item:is(:hover, :has(> .fan__card:focus-visible)) { --rise: -0.5rem; --spread: 0; --scale: 1; }
    .fan__item:is(:hover, :has(> .fan__card:focus-visible)) ~ .fan__item,
    .fan__item:has(~ .fan__item:hover, ~ .fan__item > .fan__card:focus-visible) { --shift: 0rem; }
    .fan__item::before { display: none; }
  }

  @media (max-width: 760px) {
    .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-inline-start: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 0.18); padding-top: var(--s-4); }
  }

  @media (max-width: 640px) {
    .story__chip--from { inset-inline-start: 0; top: 2%; }
    .story__chip--to { inset-inline-end: 0; bottom: 2%; }
    .story__chip { padding-inline: 0.35rem 0.9rem; }
    .story__chip-icon { width: 2.1rem; height: 2.1rem; }
    .story__chip-text { font-size: 0.9rem; }
    .values-grid { grid-template-columns: minmax(0, 1fr); }
    .voices__quotes { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
    .quote-card--alt, .voices__more { grid-column: 1; grid-row: auto; }
    .voices__more { justify-self: start; margin-top: calc(var(--s-4) * -1); }
    .quote-card__stars { top: 1rem; inset-inline-end: 1.25rem; }
    .stage-card__foot { flex-direction: column; align-items: flex-start; }
    .about-hero__note { padding-inline-end: var(--s-4); }
    .about-hero__note img { width: 2.3rem; height: 2.3rem; }
  }

  @media (max-width: 420px) {
    .stat { padding-inline: var(--s-2); }
    .stat__label { font-size: var(--fs-caption); }
    .partners__quote { padding-inline-end: var(--s-4); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .about-hero .highlight::before,
    .about-hero__rays, .about-hero__orbit, .about-hero__sun, .about-hero__note,
    .emblem__rays, .emblem__ring, .emblem__dot, .story__chip,
    .pillars__sun, .numbers__rays, .approach__node { animation: none; }
    .about-hero__art img, .pillar, .pillar__icon, .pillar__rule, .value-tile, .value-tile .icon-tile,
    .approach__node, .approach__node::before, .approach__step::after, .approach__card,
    .stage-card, .stage-card__icon, .stage-card__media img, .stage-card__media::after, .stage-card__cta svg,
    .fan__item, .fan__card, .fan__zoom,
    .voices__fb, .voices__fb .icon-tile, .voices__fb-arrow { transition-duration: 0.01ms; }
  }
}