/* ==========================================================================
   Riad al-Jannah — visual effects layer (2026-10-11)
   Loaded after styles.min.css. Only adds depth, glass and motion on top of
   the approved design; remove the <link> to restore the original look.
   ========================================================================== */

:root {
  /* Layered, emerald-tinted shadows (small contact shadow + soft ambient) */
  --shadow-tint: 18 63 56;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-tint) / .06), 0 2px 6px rgb(var(--shadow-tint) / .05);
  --shadow-sm: 0 1px 2px rgb(var(--shadow-tint) / .05), 0 4px 10px rgb(var(--shadow-tint) / .05), 0 12px 28px rgb(var(--shadow-tint) / .06);
  --shadow-md: 0 2px 4px rgb(var(--shadow-tint) / .05), 0 8px 18px rgb(var(--shadow-tint) / .07), 0 24px 48px rgb(var(--shadow-tint) / .09);
  --shadow-lg: 0 3px 6px rgb(var(--shadow-tint) / .06), 0 14px 30px rgb(var(--shadow-tint) / .10), 0 40px 80px rgb(var(--shadow-tint) / .14);
  --shadow-dark: 0 2px 4px rgb(0 0 0 / .12), 0 10px 24px rgb(0 0 0 / .16), 0 28px 56px rgb(0 0 0 / .18);
  --glass-dark: rgb(12 50 44 / .8);
  /* Menus live inside the blurred header, where a nested backdrop blur cannot see the page —
     so they stay almost opaque to keep text behind them from showing through. */
  --glass-light: rgb(255 253 248 / .97);
  --glass-edge: rgb(255 255 255 / .18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   Header — frosted glass
   -------------------------------------------------------------------------- */
.site-header.is-scrolled {
  background: var(--glass-dark);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--glass-edge);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .06), 0 10px 30px rgb(4 28 24 / .22);
  animation: header-drop .45s var(--ease-out) both;
}
@keyframes header-drop { from { translate: 0 -100%; } to { translate: 0 0; } }

/* Inner pages: header stays on top as glass while scrolling */
.site-header.inner-header {
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--emerald) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--glass-edge);
  box-shadow: 0 10px 30px rgb(4 28 24 / .18);
}

/* --------------------------------------------------------------------------
   Buttons — quiet lift and soft depth
   -------------------------------------------------------------------------- */
/* Calm and refined: ~1px rise on hover, softer and deeper shadow beneath.
   No sideways movement, no scaling, no glow rings that spill onto neighbours. */
.donate-button,
.whatsapp-button,
.button,
.menu-button {
  transition:
    transform .45s var(--ease-out),
    background-color .35s ease,
    color .35s ease,
    box-shadow .45s var(--ease-out),
    border-color .35s ease;
}

.donate-button {
  background: linear-gradient(180deg, #f1e2bd, var(--gold-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 1px 2px rgb(0 0 0 / .10), 0 6px 16px rgb(0 0 0 / .14);
}
.donate-button:hover,
.donate-button[aria-expanded="true"] {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #f6ead0, #ecdab0);
  /* last layer: a small soft pool of warm gold light just beneath the button */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .7),
    0 2px 4px rgb(0 0 0 / .10),
    0 10px 24px rgb(0 0 0 / .16),
    0 12px 20px -8px rgb(230 210 165 / .75);
}

.whatsapp-button {
  background: rgb(255 255 255 / .06);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-color: rgb(255 255 255 / .32);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .08), 0 6px 16px rgb(0 0 0 / .12);
}
.whatsapp-button:hover {
  transform: translateY(-1px);
  background: rgb(255 255 255 / .12);
  color: var(--white);
  border-color: rgb(255 255 255 / .5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 4px rgb(0 0 0 / .10), 0 12px 28px rgb(0 0 0 / .18);
}

/* Thin chevron icon instead of the "⌄" character, which some fonts render as a plain "v" */
.donate-button > b { display: inline-grid; place-items: center; }
.donate-button .chev { width: 14px; height: 14px; stroke-width: 2; }

/* WhatsApp logo instead of a plain dot, so the button reads as WhatsApp at a glance (esp. icon-only on mobile) */
.whatsapp-button span:first-child { display: inline-grid; place-items: center; color: #25d366; font-size: 1rem; }
.wa-icon { display: block; width: 1.2em; height: 1.2em; fill: currentColor; }
@media (max-width: 1100px) {
  .whatsapp-button .wa-icon { width: 21px; height: 21px; }
}

.menu-button {
  background: rgb(255 255 255 / .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.button:hover { transform: translateY(-1px); }
.button:active,
.donate-button:active,
.whatsapp-button:active { transform: translateY(0); transition-duration: .15s; }
.button-primary {
  background: linear-gradient(180deg, #f1e2bd, var(--gold-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 1px 2px rgb(0 0 0 / .10), 0 8px 20px rgb(0 0 0 / .16);
}
.button-primary:hover {
  background: linear-gradient(180deg, #f6ead0, #ecdab0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 2px 4px rgb(0 0 0 / .10), 0 14px 32px rgb(0 0 0 / .22);
}
.button > span,
.card-link b { display: inline-block; transition: transform .45s var(--ease-out); }
.button:hover > span { transform: translateX(-2px); }
.button-light { box-shadow: 0 1px 2px rgb(0 0 0 / .10), 0 8px 20px rgb(0 0 0 / .16); }
.button-light:hover { box-shadow: 0 2px 4px rgb(0 0 0 / .10), 0 14px 32px rgb(0 0 0 / .22); }

.text-link,
.story-contact { transition: border-color .25s ease, color .25s ease; }
.text-link:hover,
.story-contact:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }

/* Keyboard focus — clear gold ring */
:where(a, button):focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 999px;
}
:where(.program-card, .course-card, .button, .donate-menu a):focus-visible { border-radius: inherit; }
.program-card:focus-visible { outline-offset: 4px; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   Logo — the client's file is used unmodified (2480×1853 with wide transparent
   margins). This frame shows only the logo area (x 307–1814, y 208–1600) so it
   can be sized properly; the image itself is not cropped or edited.
   -------------------------------------------------------------------------- */
.brand-logo {
  position: relative;
  display: block;
  height: 72px;
  aspect-ratio: 1508 / 1393;
  overflow: hidden;
}
.brand-logo img {
  position: absolute;
  top: -14.932%;
  left: -20.358%;
  width: 164.456%;
  max-width: none;
  height: auto;
}
.footer-brand .brand-logo { height: 84px; }
/* Soft ivory halo that follows the logo's own outline, so the teal lettering reads on the dark
   green without a visible shape behind it. Applied to the frame (not the image) so the glow is
   not clipped; the logo artwork itself is untouched. */
.brand-logo {
  filter:
    drop-shadow(0 0 .5px rgb(255 252 242 / .4))
    drop-shadow(0 0 6px rgb(255 248 230 / .06));
}
@media (max-width: 1100px) {
  .header-inner .brand-logo { height: 58px; }
}
@media (max-width: 640px) {
  .header-inner .brand-logo { height: 52px; }
  .footer-brand .brand-logo { height: 72px; }
}

/* --------------------------------------------------------------------------
   Header order for RTL: logo at the start (right), actions at the end (left)
   -------------------------------------------------------------------------- */
.header-inner > .brand { order: 1; }
.header-inner > .menu-button,
.header-inner > .main-nav { order: 2; }
.header-inner > .header-actions { order: 3; justify-self: end; }
/* The donate button now sits on the left, so its menu opens toward the page centre */
.donate-menu { inset-inline-start: auto; inset-inline-end: 0; }
@media (max-width: 640px) {
  .donate-menu { inset-inline: auto .75rem; }
}

/* --------------------------------------------------------------------------
   Donate dropdown & mobile nav — light glass
   -------------------------------------------------------------------------- */
.donate-menu {
  background: var(--glass-light);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-color: rgb(255 255 255 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 4px 10px rgb(4 32 27 / .1), 0 30px 70px rgb(4 32 27 / .3);
}
.donate-menu.is-open { animation: menu-in-soft .35s var(--ease-out) both; }
@keyframes menu-in-soft {
  from { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.donate-menu a { transition: color .2s, background-color .25s, transform .3s var(--ease-out), box-shadow .3s; }
.donate-menu a:hover,
.donate-menu a:focus-visible { box-shadow: var(--shadow-md); transform: none; }
.donate-icon { box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), var(--shadow-xs); }

@media (max-width: 1100px) {
  .main-nav {
    background: var(--glass-light);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 30px 70px rgb(4 32 27 / .28);
  }
  .main-nav.is-open { animation: menu-in-soft .35s var(--ease-out) both; }
  .main-nav a { border-radius: .7rem; transition: background-color .2s, opacity .2s; }
  .main-nav a:hover { background: rgb(18 63 56 / .06); }
}

/* --------------------------------------------------------------------------
   Hero — slow settle-in of the image, soft glow behind the title
   -------------------------------------------------------------------------- */
.hero-media img { animation: hero-settle 2.4s var(--ease-out) both; }
@keyframes hero-settle { from { scale: 1.06; } to { scale: 1; } }
.hero h1 { text-shadow: 0 2px 30px rgb(0 0 0 / .25); }
/* A little more room between the two title lines so the dot under "رحاب" and the hamza of "الأرواح" don't crowd */
.hero h1 { line-height: 1.14; }
@media (max-width: 640px) {
  .hero h1 { line-height: 1.22; }
}
.hero-content > * { animation: hero-rise .9s var(--ease-out) both; }
.hero-content > :nth-child(2) { animation-delay: .08s; }
.hero-content > :nth-child(3) { animation-delay: .16s; }
.hero-content > :nth-child(4) { animation-delay: .24s; }
@keyframes hero-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   Cards — layered depth, quiet lift
   -------------------------------------------------------------------------- */
.program-card,
.course-card,
.principle-card {
  box-shadow: var(--shadow-sm);
  transition:
    transform .6s var(--ease-out),
    box-shadow .6s var(--ease-out),
    border-color .4s ease;
}
/* :is(.js, html) lifts specificity above ".js .reveal.is-visible { transform: none }" */
:is(.js, html) .program-card:hover {
  transform: translateY(-3px);
  border-color: rgb(189 149 80 / .45);
  box-shadow: var(--shadow-lg);
}
:is(.js, html) .course-card:hover {
  transform: translateY(-2px);
  border-color: rgb(189 149 80 / .4);
  box-shadow: var(--shadow-lg);
}
.principle-card:hover { box-shadow: var(--shadow-md); }
.program-women,
.course-card.featured,
.principle-card.featured { box-shadow: var(--shadow-md); }
.course-glyph,
.principle-mark { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), var(--shadow-xs); }
:is(.js, html) .course-card.completed:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Large dark panels */
.path-wrap,
.story-statement { box-shadow: var(--shadow-lg); }
.path-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px circle at 85% 0%, rgb(230 210 165 / .14), transparent 60%);
  pointer-events: none;
}
.path-wrap > * { position: relative; z-index: 1; }
.path-wrap > .path-ornament { position: absolute; z-index: 0; }

/* --------------------------------------------------------------------------
   Scroll reveal — smoother easing, staggered siblings
   -------------------------------------------------------------------------- */
.js .reveal {
  transition:
    opacity .9s var(--ease-out) calc(var(--stagger, 0) * 90ms),
    transform .9s var(--ease-out) calc(var(--stagger, 0) * 90ms);
}
/* Cards keep their own hover transitions; only the fade-in is staggered */
.js .reveal:is(.program-card, .course-card, .principle-card) {
  transition:
    opacity .9s var(--ease-out) calc(var(--stagger, 0) * 90ms),
    transform .6s var(--ease-out),
    box-shadow .6s var(--ease-out),
    border-color .4s ease;
}

/* --------------------------------------------------------------------------
   Living details — slow, quiet motion that keeps the page feeling alive
   -------------------------------------------------------------------------- */
/* Gold kicker lines draw in when their section appears */
.js .reveal .section-kicker::before,
.js .reveal.section-kicker::before {
  scale: 0 1;
  transform-origin: right;
  transition: scale 1s var(--ease-out) .25s;
}
.js .reveal.is-visible .section-kicker::before,
.js .reveal.is-visible.section-kicker::before { scale: 1 1; }

/* Hero: image drifts slower than the page (parallax), side verse breathes */
@supports (animation-timeline: scroll()) {
  .hero-media {
    animation: hero-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes hero-parallax { to { translate: 0 18vh; } }
}
.hero-note { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .75; translate: 0 -6px; } }

/* Large background ornaments float very slowly */
.path-ornament,
.story-statement > span { animation: float-soft 14s ease-in-out infinite; }
@keyframes float-soft { 50% { translate: 0 -8px; } }


/* Gold shimmer passes slowly over the hero accent line */
.hero-title-accent {
  background: linear-gradient(100deg, var(--gold-soft) 40%, #fff6dc 50%, var(--gold-soft) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none; /* a shadow would show through the clipped (transparent) text */
  /* The title's tight line-height (.95) makes the line box shorter than the glyphs, so the hamza
     above and the descenders below fell outside the painted area. Extend the paint area with
     padding and cancel it with negative margins so the layout does not move. */
  padding-block: .22em .3em;
  margin-block: -.22em -.3em;
  filter: drop-shadow(0 2px 18px rgb(0 0 0 / .22));
  animation: shimmer 7s ease-in-out 1.2s infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } 40%, to { background-position: -50% 0; } }

/* Page heroes: soft light slowly moves across the pattern */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px circle at var(--glow-x, 20%) 30%, rgb(230 210 165 / .12), transparent 70%);
  animation: glow-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.page-hero-inner { z-index: 1; }
@property --glow-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@keyframes glow-drift { to { --glow-x: 80%; } }

/* --------------------------------------------------------------------------
   Inner page heroes (النساء، الصبايا، الأطفال، قصتنا) — bring the title up.
   The original fixed min-height + bottom alignment left ~200px of empty
   space under the header; the hero now sizes to its content.
   -------------------------------------------------------------------------- */
.page-hero,
.story-hero {
  min-height: 0;
  align-items: start;
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3.5rem, 5vw, 4.75rem);
}
.page-hero .breadcrumbs { margin-bottom: 1.6rem; }

/* Islamic star-and-cross lattice (8-pointed stars with inner rosettes) replacing the zig-zag lines */
.page-pattern {
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23e6d2a5' stroke-width='1.1' stroke-linejoin='round'%3E%3Cg id='s'%3E%3Cpath d='M81.94 48L72 57.94L72 72L57.94 72L48 81.94L38.06 72L24 72L24 57.94L14.06 48L24 38.06L24 24L38.06 24L48 14.06L57.94 24L72 24L72 38.06Z'/%3E%3Cpath d='M63.37 48L58.8 52.47L58.8 58.8L52.47 58.8L48 63.37L43.53 58.8L37.2 58.8L37.2 52.47L32.63 48L37.2 43.53L37.2 37.2L43.53 37.2L48 32.63L52.47 37.2L58.8 37.2L58.8 43.53Z'/%3E%3C/g%3E%3Cuse href='%23s' x='-48' y='-48'/%3E%3Cuse href='%23s' x='48' y='-48'/%3E%3Cuse href='%23s' x='-48' y='48'/%3E%3Cuse href='%23s' x='48' y='48'/%3E%3Cpath d='M48 14.06L62.06 0L48 -14.06L33.94 0ZM48 110.06L62.06 96L48 81.94L33.94 96ZM0 62.06L14.06 48L0 33.94L-14.06 48ZM96 62.06L110.06 48L96 33.94L81.94 48Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 65%);
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}

/* --------------------------------------------------------------------------
   Our story — mission & vision
   -------------------------------------------------------------------------- */
.mission-section { padding-top: 0; background: var(--ivory); }
.mission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mission-card {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s ease;
}
:is(.js, html) .mission-card:hover { transform: translateY(-2px); border-color: rgb(189 149 80 / .4); box-shadow: var(--shadow-lg); }
.mission-card.featured { color: var(--white); background: var(--emerald); border-color: transparent; box-shadow: var(--shadow-md); }
.mission-mark {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline-end: 1.25rem;
  color: rgb(189 149 80 / .12);
  font: 700 9rem/1 var(--font-display);
  pointer-events: none;
}
.mission-card.featured .mission-mark { color: rgb(230 210 165 / .1); }
.mission-card h2 { position: relative; margin: 0; font: 700 clamp(2.1rem, 3.4vw, 3rem)/1.2 var(--font-display); }
.mission-card > p:last-child { position: relative; max-width: 34rem; margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.mission-card.featured > p:last-child { color: rgb(255 255 255 / .72); }
@media (max-width: 640px) {
  .mission-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-hero,
  .story-hero {
    min-height: 0;
    padding-block: 2.5rem 3rem;
  }
  .page-hero .breadcrumbs { margin-bottom: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Line icons (Lucide, ISC licence) replacing the placeholder letters
   -------------------------------------------------------------------------- */
.icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.course-glyph .icon,
.principle-mark .icon { width: 28px; height: 28px; }
.donate-icon .icon { width: 21px; height: 21px; }
.course-card.completed .course-glyph { color: var(--muted); }
/* "انتهت" label sat on top of the icon circle — move it beside the card number */
.course-card .status-label { inset-block-start: 1.2rem; inset-inline-start: auto; inset-inline-end: 3.4rem; box-shadow: var(--shadow-xs); }
.mission-mark { inset-block-start: 1.5rem; inset-inline-end: 1.5rem; }
.mission-mark .icon { width: 7.5rem; height: 7.5rem; stroke-width: 1; }
.mission-card .section-kicker { position: relative; }

/* --------------------------------------------------------------------------
   Children — hadith note under the hero
   -------------------------------------------------------------------------- */
.hadith-section { padding-block: clamp(3rem, 6vw, 5rem) 0; background: var(--ivory); }
.hadith-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 4.5rem);
  text-align: center;
  background: linear-gradient(180deg, #fffdf7, var(--paper));
  border: 1px solid rgb(189 149 80 / .3);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-md);
}
.hadith-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(189 149 80 / .16);
  border-radius: 1.3rem;
  pointer-events: none;
}
.hadith-ornament { width: 40px; height: 40px; margin: 0 auto .9rem; color: var(--gold); }
.hadith-ornament .icon { width: 100%; height: 100%; stroke-width: 1.2; }
.hadith-label { margin: 0 0 1.1rem; color: var(--gold); font-size: .8rem; font-weight: 700; }
.hadith-text { margin: 0; }
.hadith-text p {
  max-width: 40em;
  margin: 0 auto;
  color: var(--ink);
  font: 500 clamp(1.25rem, 2.2vw, 1.7rem)/2.05 var(--font-display);
  text-wrap: pretty;  /* no orphan word on the last line */
  text-wrap: balance; /* evenly balanced lines where supported */
}
.hadith-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .95rem;
}
.hadith-source::before,
.hadith-source::after { content: ""; width: 34px; height: 1px; background: rgb(189 149 80 / .5); }
.nb { white-space: nowrap; }
@media (max-width: 640px) {
  .hadith-text p { line-height: 1.95; text-wrap: pretty; }
}

/* Our story — closing title fits on two lines (one per phrase) instead of three */
.story-closing h2 { max-width: 1040px; font-size: clamp(1.9rem, 3.7vw, 3.4rem); line-height: 1.35; }
@media (max-width: 440px) {
  .story-closing h2 { font-size: clamp(1.35rem, 7vw, 1.9rem); }
}

/* Small explanatory note after an uncommon term */
.term-note { color: var(--gold); font-size: .92em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Reduced motion — keep depth and glass, drop movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media, .hero-media img, .hero-content > *, .site-header.is-scrolled,
  .hero-note, .path-ornament, .story-statement > span,
  .hero-title-accent, .page-hero::after { animation: none; }
  .js .reveal .section-kicker::before, .js .reveal.section-kicker::before { scale: 1 1; }
  .js .reveal, .js .reveal:is(.program-card, .course-card, .principle-card) { transform: none; transition: opacity .3s ease, box-shadow .3s ease; }
  :is(.js, html) :is(.program-card, .course-card):hover { transform: none; }
}

/* Touch screens: no hover lift that sticks after a tap */
@media (hover: none) {
  :is(.js, html) :is(.program-card, .course-card):hover { transform: none; }
}