/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — homepage sections
   ───────────────────────────────────────────────────────────────────────────── */

@layer sections {

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-items: center;
    min-height: clamp(38rem, 56.25vw, 100svh);
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: calc(var(--hero-foot) * 1.35 + var(--s-6));
  }

  .hero__backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero__layer { position: absolute; inset: -18px; max-width: none; }
  .hero__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 42%; }
  /* A veil of morning light over the open side that carries the copy. */
  .hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 78% 47%, rgb(255 251 246 / 0.7), rgb(255 251 246 / 0.25) 70%, transparent),
      linear-gradient(to left, rgb(255 251 246 / 0.62), rgb(255 251 246 / 0.4) 34%, rgb(255 251 246 / 0.12) 52%, transparent 62%),
      linear-gradient(to bottom, rgb(255 251 246 / 0.35), transparent 18%, transparent 74%, var(--bg));
  }

  .hero__inner { padding-inline: clamp(var(--gutter), 8vw, 12rem) clamp(var(--gutter), 6vw, 9rem); }
  .hero__copy { width: clamp(21rem, 34vw, 38rem); display: grid; gap: var(--s-6); align-content: center; justify-items: start; }
  .hero__eyebrow { font-size: clamp(var(--fs-small), 0.5rem + 0.7vw, 1.15rem); }
  .hero__title {
    font-size: min(5.6rem, 5.4vw);
    line-height: 1.16;
    font-weight: 700;
    text-wrap: nowrap;
  }
  .hero__title-line { display: block; white-space: nowrap; }
  .hero__title-line--accent {
    color: var(--red);
    text-shadow: 0 2px 0 rgb(255 255 255 / 0.6);
  }
  .hero__lead { max-width: 36rem; color: var(--ink-2); font-size: clamp(var(--fs-lead), 0.55rem + 0.9vw, 1.4rem); line-height: 1.85; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .hero__actions .btn { min-height: clamp(3.25rem, 2.3rem + 1vw, 3.75rem); padding-inline: clamp(1.5rem, 0.8rem + 1vw, 2.25rem); font-size: clamp(var(--fs-body), 0.6rem + 0.55vw, 1.2rem); }

  /* Floating glass notes over the photograph; they drift against the pointer. */
  .hero__float {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    font-weight: 500;
    color: var(--ink);
    pointer-events: none;
    animation: enter-pop 1s var(--ease-out) 0.7s backwards, float-bob 7s ease-in-out 1.7s infinite;
  }
  .hero__float--place { left: clamp(1rem, 36vw, 40rem); top: calc(var(--header-h) + 5vw); border-radius: var(--r-lg); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); }
  .hero__float-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--red), var(--red-deeper));
    color: var(--white);
    box-shadow: 0 0 0 4px rgb(247 209 74 / 0.45), var(--shadow-red);
  }
  .hero__float-icon svg { width: 1.2rem; height: 1.2rem; }
  .hero__float-label { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }
  .hero__float-label strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
  @keyframes float-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }

  /* Cycling word with a gold marker swash */
  .word-cycle { --hl-baseline: 0.8em; display: inline-grid; vertical-align: top; }
  .word-cycle__stage { position: relative; isolation: isolate; display: grid; }
  .word-cycle__word { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
  .word-cycle__word:not(.is-current, .is-leaving) { visibility: hidden; }
  .word-cycle__swash {
    position: absolute;
    z-index: -1;
    top: calc(var(--hl-baseline) - 0.42em);
    inset-inline-start: -0.14em;
    width: calc(var(--swash-w, 100%) + 0.26em);
    height: 0.58em;
    background: rgb(247 209 74 / 0.72);
    -webkit-mask: var(--mark-highlight) center / 100% 100% no-repeat;
    mask: var(--mark-highlight) center / 100% 100% no-repeat;
    rotate: -0.8deg;
    transition: width 0.7s var(--ease-out);
    animation: swash-in 0.85s var(--ease-out) 0.6s both;
  }
  .is-cycling .word-cycle__word.is-current { animation: word-in 0.8s var(--ease-out) 0.16s both; }
  .is-cycling .word-cycle__word.is-leaving { animation: word-out 0.48s cubic-bezier(0.55, 0, 1, 0.45) both; }
  @keyframes word-in {
    from { opacity: 0; translate: 0 0.32em; filter: blur(12px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  @keyframes word-out {
    from { opacity: 1; translate: 0 0; filter: blur(0); }
    to   { opacity: 0; translate: 0 -0.26em; filter: blur(10px); }
  }
  @keyframes swash-in {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* ── Facts: glass panel rising into the hero ───────────────────────────── */
  .facts { position: relative; z-index: 2; margin-top: calc(var(--hero-foot) * var(--facts-rise, -1.35)); }
  .facts__panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: var(--r-lg);
    padding: var(--s-4);
  }
  .fact { display: grid; gap: var(--s-1); padding: var(--s-5) var(--s-6); text-align: center; justify-items: center; }
  .fact + .fact { border-inline-start: 1px solid var(--line); }
  .fact__value {
    display: flex;
    align-items: baseline;
    gap: var(--s-1);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
  }
  .fact__value .num { color: var(--red); }
  .fact__star {
    align-self: center;
    width: 0.62em;
    height: 0.62em;
    color: var(--gold);
    filter: drop-shadow(0 2px 4px rgb(233 178 58 / 0.45));
    animation: star-glint 3.6s ease-in-out infinite;
  }
  @keyframes star-glint {
    0%, 70%, 100% { scale: 1; rotate: 0deg; }
    80%           { scale: 1.2; rotate: 18deg; }
  }
  .fact__label { color: var(--ink-2); font-size: var(--fs-small); }

  /* ── Slogan ribbon ─────────────────────────────────────────────────────── */
  .ribbon {
    position: relative;
    margin-top: clamp(3.5rem, 2rem + 4vw, 6rem);
    padding-block: var(--s-6);
    overflow: clip;
  }
  /* A gold band crossing behind the red one */
  .ribbon::before {
    content: "";
    position: absolute;
    inset: 50% -4vw auto;
    height: 2.6rem;
    translate: 0 -50%;
    rotate: 1.6deg;
    background: linear-gradient(to left, #E2A52A, var(--gold-bright) 40%, #F9E08A 60%, #E2A52A);
    box-shadow: 0 10px 24px -16px rgb(150 100 10 / 0.6);
    opacity: 0.9;
  }
  .ribbon__band {
    position: relative;
    margin-inline: -4vw;
    rotate: -1.8deg;
    background: linear-gradient(to left, var(--red-deeper), var(--red) 22%, #E5262F 50%, var(--red) 78%, var(--red-deeper));
    box-shadow: 0 22px 40px -24px rgb(149 14 23 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25);
  }
  .ribbon__band::before,
  .ribbon__band::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(to left, transparent, rgb(247 209 74 / 0.85), transparent);
  }
  .ribbon__band::before { top: 6px; }
  .ribbon__band::after { bottom: 6px; }
  /* Runs continuously: no pause on hover, composited so it never stutters. */
  .ribbon__track {
    display: flex;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    animation: ribbon-run 76s linear infinite;
  }
  .ribbon__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
    padding-block: clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem);
    padding-inline-end: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  .ribbon__list svg { width: 1rem; height: 1rem; color: var(--gold-bright); }
  /* In RTL the second copy waits on the left; sliding right by one copy loops. */
  @keyframes ribbon-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
  }

  /* ── About ─────────────────────────────────────────────────────────────── */
  .about { isolation: isolate; overflow-x: clip; }
  .about .ambient { --glow-a: 18% 38%; --glow-b: 82% 64%; }
  .about__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(3rem, 1rem + 6vw, 7rem);
    align-items: center;
  }

  .about__art { position: relative; justify-self: center; width: min(100%, 31rem); padding: var(--s-6); }
  .about__rays {
    position: absolute;
    inset: -14%;
    z-index: -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 26%, transparent 74%);
    mask: radial-gradient(closest-side, #000 26%, transparent 74%);
    animation: rays-spin 90s linear infinite;
    pointer-events: none;
  }
  .arch-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px var(--r-xl) var(--r-xl);
    overflow: hidden;
    background: var(--red-mist);
    border: 10px solid var(--white);
    box-shadow: 0 0 0 1px var(--red-border), var(--shadow-lg), 0 50px 90px -50px rgb(181 18 28 / 0.45);
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .arch-frame picture, .arch-frame img { width: 100%; height: 100%; }
  .arch-frame img { object-fit: cover; object-position: 1% 50%; transition: scale 1.4s var(--ease-out); }
  .arch-frame:hover img { scale: 1.04; }
  /* Sunlight catching the glass */
  .arch-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgb(255 244 214 / 0.4), transparent 38%);
    pointer-events: none;
  }

  .about__seal {
    position: absolute;
    top: 2%;
    inset-inline-start: -3%;
    width: 8.5rem;
    height: 8.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 1px var(--red-border), 0 0 0 7px var(--red-mist), var(--shadow-md);
  }
  .about__seal img { width: 4.6rem; height: 4.6rem; border-radius: 50%; }
  .about__seal-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: rays-spin 36s linear infinite;
  }
  .about__seal-ring text {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    fill: var(--red-strong);
  }

  .about__badge {
    position: absolute;
    bottom: 9%;
    inset-inline-end: -6%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    animation: float-bob 7s ease-in-out infinite;
  }
  .about__badge-num {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--red);
  }
  .about__badge-label { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); font-weight: 500; }

  .about__copy { display: grid; gap: var(--s-6); }
  .about__quote {
    position: relative;
    padding: var(--s-5) var(--s-6);
    padding-inline-start: 3.75rem;
    border-radius: var(--r-md);
    background: linear-gradient(120deg, var(--gold-soft), rgb(255 255 255 / 0.7));
    border: 1px solid var(--gold-border);
  }
  .about__quote svg { position: absolute; inset-inline-start: 1.15rem; top: 1.2rem; width: 1.7rem; height: 1.7rem; color: var(--gold); }
  .about__quote p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    font-weight: 600;
    line-height: 1.8;
    color: var(--ink);
  }

  .values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .values > li { display: grid; }
  .value {
    display: grid;
    align-content: start;
    gap: var(--s-2);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: var(--glass-solid);
    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:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .value__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--s-1);
    border-radius: 50%;
    background: linear-gradient(150deg, var(--red-soft), var(--white));
    border: 1px solid var(--red-border);
    color: var(--red-strong);
    transition: background-color var(--dur-base) linear, color var(--dur-base) linear, rotate var(--dur-slow) var(--ease-out);
  }
  .value:hover .value__icon { rotate: -8deg; }
  .value__icon svg { width: 1.3rem; height: 1.3rem; }
  .value__title { font-size: 1.3rem; }
  .value__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }

  /* ── Programs ──────────────────────────────────────────────────────────── */
  .programs { background: var(--bg-deep); }

  .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }

  /* Pinned 3D reel */
  .programs:has(.is-reel) { padding-block: 0; }
  .course-reel.is-reel {
    --reel-body: 15.75rem;
    --reel-chrome: 25.25rem;
    --reel-card-w: min(36vw, 35rem, (100svh - var(--reel-chrome) - var(--reel-body)) * 3.13);
    height: calc(100svh + var(--reel-steps, 6.4) * 48svh);
  }
  @media (min-width: 700px) and (max-width: 1080px) {
    .course-reel.is-reel { --reel-card-w: min(54vw, 27rem, (100svh - var(--reel-chrome) - var(--reel-body)) * 3.13); }
  }
  @media (max-width: 699px) and (min-height: 721px) {
    .course-card__desc { -webkit-line-clamp: 3; }
    .is-reel .is-front .course-card__desc { max-height: 5.7em; }
  }
  @media (max-width: 699px) and (min-height: 800px) {
    .course-card__desc { -webkit-line-clamp: 4; }
    .is-reel .is-front .course-card__desc { max-height: 7.5em; }
  }
  .is-reel .course-reel__frame {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
    padding-top: var(--header-h);
  }
  .is-reel .course-reel__inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-block: clamp(1rem, 3svh, 2.5rem) clamp(1rem, 3svh, 2rem);
  }
  .is-reel .section-head { margin-bottom: 0; }
  .is-reel .course-reel__stage {
    position: relative;
    isolation: isolate; /* keeps the drum's z-index under the header */
    margin-inline: calc(var(--gutter) * -1);
  }
  .is-reel .course-reel__stage::before {
    content: "";
    position: absolute;
    inset: 10% 16% 0;
    z-index: -1;
    background:
      radial-gradient(closest-side at 50% 62%, rgb(247 209 74 / 0.32), transparent),
      radial-gradient(closest-side at 50% 80%, rgb(215 20 31 / 0.08), transparent);
    pointer-events: none;
  }
  .is-reel .courses-grid {
    display: block;
    position: relative;
    height: 100%;
    perspective: 1800px;
    perspective-origin: 50% 45%;
    transform-style: preserve-3d;
  }
  .is-reel .course-reel__item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--reel-card-w);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  /* In preserve-3d the turned-away cards sit behind the list's plane; let hits reach them. */
  .is-reel .courses-grid { pointer-events: none; }
  .is-reel .course-reel__item { pointer-events: auto; }
  .is-reel .course-card { background: var(--white); box-shadow: var(--shadow-inset), var(--shadow-md); transition: box-shadow var(--dur-slow) var(--ease-out); }
  .is-reel .course-card:hover { transform: none; }
  .is-reel .is-front .course-card { box-shadow: var(--shadow-inset), 0 40px 80px -40px rgb(149 14 23 / 0.45), 0 0 0 1px var(--gold-border); }
  .is-reel .course-reel__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgb(255 244 232 / 0.92), rgb(251 242 231 / 0.82));
    opacity: var(--reel-shade, 0);
    pointer-events: none;
  }
  .is-reel .course-card__desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear; }
  .is-reel .course-card__foot { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; border-top-color: transparent; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear, padding var(--dur-slow) var(--ease-out); }
  .is-reel .is-front .course-card__desc { max-height: 4em; opacity: 1; }
  .is-reel .is-front .course-card__foot { max-height: 4rem; padding-top: var(--s-4); border-top-color: var(--line); opacity: 1; }

  .course-reel__nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    width: min(100%, 46rem);
    margin-inline: auto;
    padding-top: var(--s-4);
  }
  /* Keep the last ticks clear of the floating WhatsApp button (inline-end = left in RTL). */
  @media (max-width: 960px) {
    .course-reel__nav { padding-inline-end: calc(3.6rem + clamp(1rem, 2.4vw, 1.75rem)); }
  }
  .course-reel__count { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; }
  .course-reel__count > .num { font-size: 1.8rem; color: var(--red); min-width: 1.2ch; text-align: center; }
  .course-reel__of { color: var(--ink-2); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; }
  .course-reel__title { justify-self: start; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .course-reel__ticks { display: flex; align-items: center; gap: var(--s-2); }
  .course-reel__tick { position: relative; width: 2.25rem; height: 1.75rem; border-radius: var(--r-pill); }
  .course-reel__tick::before {
    content: "";
    position: absolute;
    inset: 50% 0.35rem auto;
    height: 4px;
    translate: 0 -50%;
    border-radius: var(--r-pill);
    background: var(--red-border);
    transition: background-color var(--dur-base) var(--ease-out), inset var(--dur-base) var(--ease-out);
  }
  .course-reel__tick:hover::before { background: var(--gold); }
  .course-reel__tick[aria-current="true"]::before { inset-inline: 0.1rem; background: linear-gradient(to left, var(--red), var(--gold)); }
  .course-reel__tick:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

  @media (max-width: 699px) {
    .course-reel.is-reel { --reel-card-w: min(84vw, 24rem); }
    .is-reel .section-head__lead, .is-reel .section-head .text-link { display: none; }
    .course-reel__nav { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
    .course-reel__ticks { grid-column: 1 / -1; justify-content: center; }
    .course-reel__ticks { gap: 0; }
    .course-reel__tick { width: 2.4rem; height: 2.75rem; }
    .course-reel__tick::before { inset-inline: 0.6rem; }
    .course-reel__tick[aria-current="true"]::before { inset-inline: 0.35rem; }
  }
  @media (max-height: 820px) {
    .is-reel .section-head__lead { display: none; }
    .course-reel.is-reel { --reel-chrome: 19.25rem; }
  }
  @media (max-height: 720px) {
    .course-reel.is-reel { --reel-body: 12.25rem; }
    .is-reel .is-front .course-card__desc { max-height: 0; opacity: 0; }
  }

  /* ── Features ──────────────────────────────────────────────────────────── */
  .features__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .features__intro { display: grid; gap: var(--s-4); justify-items: start; }

  /* The stage: a sunlit arch holding the active 3D icon, its number engraved
     in gold behind it, a soft floor shadow and a glass caption. */
  .features__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 26rem);
    aspect-ratio: 1 / 0.96;
    margin-top: var(--s-4);
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .features__stage::before {
    content: "";
    position: absolute;
    inset: 4% 6% 0;
    border-radius: 999px 999px var(--r-xl) var(--r-xl);
    background:
      radial-gradient(closest-side at 50% 52%, rgb(247 209 74 / 0.34), transparent),
      radial-gradient(120% 60% at 50% 100%, rgb(215 20 31 / 0.07), transparent 60%),
      linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(255 243 234 / 0.78));
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-lg), 0 60px 90px -60px rgb(181 18 28 / 0.4);
  }
  /* A fine gold arch drawn inside the frame */
  .features__stage::after {
    content: "";
    position: absolute;
    inset: calc(4% + 0.85rem) calc(6% + 0.85rem) 0.85rem;
    border-radius: 999px 999px calc(var(--r-xl) - 0.85rem) calc(var(--r-xl) - 0.85rem);
    border: 1px solid rgb(233 178 58 / 0.45);
    pointer-events: none;
  }
  .features__rays {
    position: absolute;
    inset: 4% 6% 0;
    border-radius: 999px 999px var(--r-xl) var(--r-xl);
    overflow: hidden;
    pointer-events: none;
  }
  .features__rays::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(247 209 74 / 0.24) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(closest-side at 50% 50%, #000 12%, transparent 68%);
    mask: radial-gradient(closest-side at 50% 50%, #000 12%, transparent 68%);
    animation: rays-spin 60s linear infinite;
  }
  .features__num {
    position: absolute;
    top: 6%;
    inset-inline: 0;
    z-index: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(5rem, 3rem + 5vw, 8.5rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(233 178 58 / 0.55);
    background: linear-gradient(180deg, rgb(247 209 74 / 0.22), transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    user-select: none;
  }
  .features__num.is-bump { animation: num-in 0.9s var(--ease-out) both; }
  @keyframes num-in {
    from { opacity: 0; translate: 0 0.25em; filter: blur(6px); }
  }
  .features__floor {
    position: absolute;
    bottom: 21%;
    left: 50%;
    width: 44%;
    height: 7%;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(120 20 20 / 0.28), transparent);
    animation: floor-breathe 5s ease-in-out infinite;
    pointer-events: none;
  }
  .features__art {
    grid-area: 1 / 1;
    z-index: 1;
    width: 56%;
    margin-top: 6%;
    opacity: 0;
    transform: translateY(26px) scale(0.78) rotate(-8deg);
    filter: blur(6px);
    transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out), filter 0.6s var(--ease-out);
  }
  .features__art img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgb(149 14 23 / 0.22));
    animation: art-bob 5s ease-in-out infinite;
  }
  .features__art.is-active { opacity: 1; transform: none; filter: none; }
  @keyframes art-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -9px; }
  }
  @keyframes floor-breathe {
    0%, 100% { scale: 1; opacity: 1; }
    50%      { scale: 0.86; opacity: 0.7; }
  }
  .features__caption {
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 50%;
    translate: -50% 0;
    max-width: 84%;
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .features__caption .num { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--red); line-height: 1; }
  .features__caption-of { color: var(--ink-2); font-size: var(--fs-caption); }
  .features__caption-title { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }

  .features__steps { position: relative; }
  .features__track {
    position: absolute;
    z-index: 1;
    top: var(--track-top, 0px);
    height: var(--track-height, 0px);
    inset-inline-start: calc(var(--s-6) + 0.6rem);
    width: 2px;
    translate: 50% 0;
    border-radius: 2px;
    background: rgb(215 20 31 / 0.14);
    pointer-events: none;
  }
  .features__fill {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--features-progress, 0) * 100%);
    border-radius: inherit;
    background: linear-gradient(180deg, var(--gold-bright), var(--red));
    box-shadow: 0 0 10px rgb(215 20 31 / 0.4);
  }
  .features__list { display: grid; gap: var(--s-2); }
  .feature {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    padding: var(--s-6);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition:
      background-color var(--dur-slow) var(--ease-out),
      border-color var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }
  .feature.is-active {
    background: rgb(255 255 255 / 0.8);
    border-color: var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
  }
  .feature__node {
    position: relative;
    z-index: 2;
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 2px rgb(215 20 31 / 0.22);
    transition: background-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .feature.is-passed .feature__node { background: var(--gold-soft); box-shadow: 0 0 0 2px var(--gold); }
  .feature.is-active .feature__node { background: var(--red); box-shadow: 0 0 0 6px rgb(247 209 74 / 0.35), 0 0 16px rgb(215 20 31 / 0.5); }

  /* Small icon tile beside each title; it wakes up with its step. */
  .feature__thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    margin-top: -0.35rem;
    border-radius: 1rem;
    background: linear-gradient(160deg, var(--white), var(--bg-deep));
    border: 1px solid var(--white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-out);
  }
  .feature__thumb img {
    width: 84%;
    height: auto;
    opacity: 0.6;
    filter: grayscale(0.55);
    transition: opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
  }
  .feature.is-passed .feature__thumb img { opacity: 0.85; filter: grayscale(0.2); }
  .feature.is-active .feature__thumb {
    background: var(--white);
    box-shadow: 0 0 0 1px var(--gold-border), 0 0 0 5px rgb(247 209 74 / 0.18), var(--shadow-md);
    rotate: -4deg;
  }
  .feature.is-active .feature__thumb img { opacity: 1; filter: none; scale: 1.08; }
  .feature:hover .feature__thumb img { opacity: 1; filter: none; }

  .feature__body { flex: 1; min-width: 0; }
  .feature__title { font-size: var(--fs-h3); }
  .feature__more {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out), opacity var(--dur-base) linear;
  }
  .feature__text { min-height: 0; overflow: hidden; padding-top: var(--s-1); color: var(--ink-2); }

  @media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
    .features { padding-block: 0; }
    .features__scroller { height: calc(100svh + var(--features-steps, 6) * 42svh); }
    .features__frame {
      position: sticky;
      top: 0;
      height: 100svh;
      display: grid;
      align-items: center;
      padding-top: var(--header-h);
    }
    .features__stage { width: min(100%, 25rem, 46svh - 3rem); }
    .feature { padding-block: var(--s-4); }
    .feature.is-active { padding-block: var(--s-5); }
    .feature:not(.is-active) .feature__more { grid-template-rows: 0fr; opacity: 0; }
  }

  @media (min-width: 901px) and (max-height: 860px) {
    .features__caption { max-width: 94%; padding-inline: var(--s-4); }
    .features__caption-of { display: none; }
  }

  /* ── Team: appreciation rail ───────────────────────────────────────────── */
  .team { background: var(--bg-deep); isolation: isolate; }
  .team .ambient { --glow-a: 85% 20%; --glow-b: 30% 70%; --glow-red: rgb(247 209 74 / 0.16); }
  .section-head__aside { display: grid; justify-items: center; gap: var(--s-2); }
  .section-head__sun { width: 128px; height: 128px; rotate: 9deg; animation: sticker-float 6s ease-in-out infinite; }
  .rail-controls { display: flex; gap: var(--s-2); }

  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(15.5rem, 22vw, 18.5rem);
    gap: var(--s-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-1);
    padding: var(--s-4) var(--s-1) var(--s-8);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 3%, #000 92%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 3%, #000 92%, transparent);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; display: grid; }
  .rail:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red); border-radius: var(--r-md); }

  .honor-card {
    --lift: 0px;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transform: perspective(900px) 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);
  }
  .honor-card:hover { --lift: -6px; box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .honor-card__media {
    position: relative;
    aspect-ratio: 393 / 520;
    border-radius: calc(var(--r-lg) - var(--s-3));
    overflow: hidden;
    background: var(--gold-soft);
  }
  .honor-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: scale 1.2s var(--ease-out); }
  .honor-card:hover .honor-card__media img { scale: 1.04; }
  .honor-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-2) var(--s-1);
  }
  .honor-card__role { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.4; }
  .honor-card__name { font-size: 1.45rem; line-height: 1.25; }

  @media (max-width: 900px) {
    .section-head__aside { width: 100%; grid-template-columns: auto 1fr; justify-items: start; align-items: end; }
    .section-head__sun { width: 84px; height: 84px; order: 2; justify-self: end; }
  }

  /* ── Testimonials: a note on warm paper ────────────────────────────────── */
  .testimonials__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
  }
  .testimonials__intro { display: grid; gap: var(--s-8); align-content: center; }
  .notes-controls { display: flex; align-items: center; gap: var(--s-4); }
  .notes-controls__count { min-width: 3.5rem; color: var(--ink-2); font-size: var(--fs-small); }
  .notes-controls__buttons { display: flex; gap: var(--s-2); }

  .note-stage {
    display: grid;
    align-items: start;
    min-height: var(--note-stage-h, auto);
    padding: var(--s-12) var(--s-4) var(--s-12);
  }
  .note {
    --note-paper: #FDF3E4;
    --note-rule-color: #EBD2B4;
    --note-rule: 2.6rem;
    --note-hole: 0.85rem;
    position: relative;
    rotate: -1.5deg;
    padding-block: 4.5rem 3rem;
    padding-inline: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(4.5rem, 3.6rem + 2vw, 6rem);
    border-radius: 2.25rem;
    background:
      radial-gradient(120% 80% at 100% 0%, rgb(255 255 255 / 0.7), transparent 60%),
      var(--note-paper);
    box-shadow:
      0 30px 60px -34px rgb(120 32 20 / 0.4),
      0 8px 18px -10px rgb(120 32 20 / 0.16);
    translate: 0 calc(var(--note-offset, 0px) * var(--note-centred, 1));
  }
  /* Punched holes down the binding side */
  .note::before {
    content: "";
    position: absolute;
    top: 4.5rem;
    bottom: 3rem;
    inset-inline-end: clamp(1.4rem, 1rem + 1vw, 2rem);
    width: calc(var(--note-hole) * 2);
    background: radial-gradient(circle, var(--bg) 0 var(--note-hole), transparent calc(var(--note-hole) + 0.5px)) center top / 100% calc(var(--note-rule) * 2);
    background-repeat: no-repeat space;
  }
  /* A red margin rule, like a school notebook */
  .note::after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 2rem;
    inset-inline-end: calc(clamp(4.5rem, 3.6rem + 2vw, 6rem) - 1rem);
    width: 2px;
    background: rgb(215 20 31 / 0.28);
  }
  .note:has(.note__pages.is-fitted) { transition: translate 0.6s var(--ease-out); }

  .note__clip  { position: absolute; z-index: 2; width: 36px; height: 72px; top: -30px; inset-inline-end: 30px; rotate: 8deg; filter: drop-shadow(0 4px 4px rgb(120 80 10 / 0.25)); }
  .note__sun   { position: absolute; z-index: 2; width: 96px; height: 96px; top: -44px; inset-inline-start: -30px; rotate: -12deg; animation: sticker-float 6s ease-in-out infinite; }
  .note__hearts { position: absolute; z-index: 2; width: 104px; height: 88px; bottom: -40px; inset-inline-end: -24px; rotate: -10deg; animation: sticker-float 6s ease-in-out 1.5s infinite; }

  .note__pages {
    position: relative;
    display: grid;
    min-height: calc(var(--note-rule) * 3);
    background-image: linear-gradient(to bottom, transparent calc(var(--note-rule) - 1.5px), var(--note-rule-color) calc(var(--note-rule) - 1.5px), var(--note-rule-color) var(--note-rule));
    background-size: 100% var(--note-rule);
  }
  .note__pages.is-fitted { transition: height 0.6s var(--ease-out); }
  .note__page {
    grid-area: 1 / 1;
    align-self: start;
    display: grid;
    align-content: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0.6s;
  }
  .note__page.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0.15s, 0.15s, 0s;
  }
  .note__text {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
    font-weight: 500;
    line-height: var(--note-rule);
    color: var(--ink);
  }
  .note__by {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    line-height: var(--note-rule);
    font-size: var(--fs-small);
  }
  .note__by::before { content: "—"; color: var(--red); }
  .note__name { font-weight: 600; color: var(--red-strong); }
  .note__role { color: var(--ink-2); }

  /* ── Photo strip: one step every 1.25s, never stopping ────────────────── */
  .moments { overflow: clip; }
  .moments__viewport {
    --moment-size: clamp(10rem, 7rem + 9vw, 15rem);
    --moment-gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
    padding-block: var(--s-4) var(--s-8);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  }
  .moments__track {
    display: flex;
    gap: var(--moment-gap);
    width: max-content;
    padding-inline: var(--moment-gap);
    will-change: transform;
  }
  .moments__track.is-moving { transition: transform 0.75s var(--ease-out); }
  .moments__item { flex: none; width: var(--moment-size); }
  .moments__shot {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--gold-soft);
    border: 5px solid var(--white);
    box-shadow: 0 0 0 1px var(--red-border), var(--shadow-md);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  /* Alternate tiles sit a little higher and tilt, like prints on a table. */
  .moments__item:nth-child(odd) .moments__shot { rotate: -2deg; translate: 0 -0.5rem; }
  .moments__item:nth-child(even) .moments__shot { rotate: 1.5deg; translate: 0 0.5rem; }
  .moments__shot:hover { transform: scale(1.05); box-shadow: 0 0 0 1px var(--gold-border), var(--shadow-lg); }
  .moments__shot picture, .moments__shot img { width: 100%; height: 100%; }
  .moments__shot img { object-fit: cover; object-position: 50% 28%; }
  .moments__caption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--s-6) var(--s-3) var(--s-3);
    background: linear-gradient(to top, rgb(43 20 16 / 0.72), transparent);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    translate: 0 0.4rem;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-out);
  }
  .moments__shot:hover .moments__caption { opacity: 1; translate: 0 0; }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 1199px) {
    .hero { min-height: 0; align-items: start; padding-bottom: 0; }
    .hero__inner { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); padding-inline: var(--gutter); }
    .hero__copy { width: auto; max-width: 42rem; }
    .hero__title { font-size: var(--fs-display); }
    .hero__backdrop { position: relative; inset: auto; z-index: 0; grid-row: 2; aspect-ratio: 16 / 9; margin-top: var(--s-6); }
    .hero__layer { inset: -10px; }
    .hero__backdrop::after { background: linear-gradient(to bottom, var(--bg), transparent 16%, transparent 72%, var(--bg)); }
    .hero__float { display: none; }
    .facts { --facts-rise: -0.72; }
  }
  @media (min-width: 1200px) and (max-height: 800px) {
    .hero { padding-top: calc(var(--header-h) + var(--s-8)); }
    .hero__title { font-size: min(4.6rem, 4.8vw); }
    .hero__copy { gap: var(--s-4); }
    .facts { --facts-rise: -1.55; }
  }
  @media (max-width: 1080px) {
    .testimonials__grid { grid-template-columns: minmax(0, 1fr); }
    .note-stage { --note-centred: 0; }
  }
  @media (max-width: 900px) {
    .about__grid { grid-template-columns: minmax(0, 1fr); }
    .about__art { width: min(100%, 26rem); }
    .features__grid { grid-template-columns: minmax(0, 1fr); }
    .features__stage { display: none; }
    .feature__thumb { width: 4rem; height: 4rem; }
    .feature__thumb img { opacity: 0.85; filter: none; }
  }
  @media (max-width: 1080px) {
    .courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .facts__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact:nth-child(3) { border-inline-start: 0; }
    .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 640px) {
    .hero__backdrop { aspect-ratio: 5 / 4; }
    .hero__layer img { object-position: 14% 50%; }
    .hero__actions .btn { flex: 1 1 100%; }
    .fact { padding: var(--s-4) var(--s-3); }
    .values { grid-template-columns: minmax(0, 1fr); }
    .about__seal { width: 6.5rem; height: 6.5rem; inset-inline-start: 0; }
    .about__seal img { width: 3.4rem; height: 3.4rem; }
    .about__badge { inset-inline-end: 0; }
    .courses-grid { grid-template-columns: minmax(0, 1fr); }
    .feature { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-4) var(--s-3); padding: var(--s-5) var(--s-4); }
    .feature__body { display: contents; }
    .feature__node { align-self: start; margin-top: 1.1rem; }
    .feature__title { grid-column: 3; }
    .feature__more { grid-column: 2 / -1; }
    .features__track { inset-inline-start: calc(var(--s-4) + 0.6rem); }
    .feature__thumb { width: 3.4rem; height: 3.4rem; border-radius: 0.85rem; }
    .note { --note-rule: 2.3rem; padding-inline: 1.25rem 3.4rem; rotate: -1deg; }
    .note::before { inset-inline-end: 1rem; --note-hole: 0.7rem; }
    .note::after { inset-inline-end: 2.9rem; }
    .note__sun { width: 70px; height: 70px; top: -32px; inset-inline-start: -8px; }
    .note__hearts { width: 76px; height: 64px; bottom: -30px; inset-inline-end: -6px; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .ribbon__track { animation-duration: 90s; }
    .hero__float, .word-cycle__word, .word-cycle__swash, .fact__star,
    .about__rays, .about__seal-ring, .about__badge, .features__rays::before,
    .features__art img, .features__floor, .features__num.is-bump,
    .section-head__sun, .note__sun, .note__hearts { animation: none; }
    .honor-card, .value, .arch-frame,
    .feature, .feature__node, .feature__thumb, .feature__thumb img, .features__art, .features__stage, .note__page, .note__pages.is-fitted, .note,
    .honor-card__media img, .arch-frame img, .moments__shot, .moments__caption { transition-duration: 0.01ms; }
    .moments__track.is-moving { transition-duration: 0.2s; }
  }
}