/* ==========================================================================
   SHRS — ELEVATION LAYER
   Loaded AFTER brand.css. Purely additive.

   Scope: the body components only. It does not touch the topbar, the
   navigation, the mega-menus, the hero, the page structure, or any
   content. Nothing is removed; every existing box is raised.

   What it adds
   - Real corner geometry (18 / 24 / 30px) in place of 0px rectangles
   - A three-step elevation system: resting, raised, lifted
   - Layered material: gradient surfaces, inlaid gold hairlines,
     specular sheen, inner light
   - Pointer-tracked 3D tilt with a moving highlight (js/elevate.js)
   - A slow travelling gold light around each CLEVER value
   - Motion that respects prefers-reduced-motion completely
   ========================================================================== */

:root{
  --el-r-s:16px;
  --el-r:24px;
  --el-r-l:30px;

  /* three-step elevation, warm-shadowed to match the brown ground */
  --el-e1:
    0 1px 1px rgba(34,23,9,.04),
    0 4px 10px -6px rgba(34,23,9,.18),
    0 18px 34px -22px rgba(34,23,9,.30);
  --el-e2:
    0 1px 2px rgba(34,23,9,.05),
    0 10px 22px -12px rgba(34,23,9,.26),
    0 34px 62px -32px rgba(34,23,9,.42);
  --el-e3:
    0 2px 4px rgba(34,23,9,.06),
    0 18px 38px -16px rgba(34,23,9,.32),
    0 56px 96px -44px rgba(34,23,9,.52);

  --el-e1-dark:
    0 1px 1px rgba(0,0,0,.16),
    0 10px 24px -14px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(233,206,138,.10);
  --el-e2-dark:
    0 2px 4px rgba(0,0,0,.20),
    0 26px 52px -24px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(233,206,138,.16);

  --el-hair:rgba(198,161,91,.30);
  --el-hair-soft:rgba(198,161,91,.16);
  --el-gold-line:linear-gradient(90deg,transparent,rgba(233,206,138,.85),transparent);
  --el-surface:linear-gradient(168deg,#FFFDF9 0%,#FCF7EE 52%,#F7F0E2 100%);
  --el-surface-dark:linear-gradient(168deg,rgba(78,56,38,.60) 0%,rgba(45,31,19,.70) 55%,rgba(34,23,9,.78) 100%);

  --el-ease:cubic-bezier(.22,.61,.36,1);
  --el-ease-out:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------------------
   0. Shared behaviours
   -------------------------------------------------------------------------- */

/* Cards opt into 3D. js/elevate.js writes --rx/--ry/--mx/--my per pointer. */
/* No 3D context and no will-change at rest. Holding preserve-3d +
   will-change open permanently promotes every card to its own GPU layer,
   and a layer's text is rasterised into a texture rather than painted
   against the screen's subpixel grid — cards that were standing perfectly
   still still read soft. The 3D is created the moment the pointer lands
   and dropped again when it leaves, which is the only time it is seen. */
.el-3d{
  transition:transform .5s var(--el-ease-out), box-shadow .5s var(--el-ease-out);
}
.el-3d.is-tilting{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .12s linear, box-shadow .5s var(--el-ease-out); }

/* Specular highlight that follows the cursor. Added by the same script. */
.el-sheen{ position:relative; }
.el-sheen > .el-glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s var(--el-ease); z-index:3;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,247,225,.30), rgba(255,247,225,.10) 38%, transparent 66%);
  mix-blend-mode:soft-light;
}
.el-sheen.is-hot > .el-glow{ opacity:1; }
.el-on-dark.el-sheen > .el-glow{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(233,206,138,.24), rgba(233,206,138,.08) 40%, transparent 68%);
  mix-blend-mode:screen;
}

/* Softer, longer reveal than the 10px/18px default. */
.reveal{ transform:translateY(26px) !important; transition:opacity .85s var(--el-ease-out), transform .85s var(--el-ease-out) !important; }
.reveal.in{ transform:none !important; }
.stagger > *{ transform:translateY(20px) scale(.985) !important; transition:opacity .7s var(--el-ease-out), transform .7s var(--el-ease-out) !important; }
.stagger.in > *{ transform:none !important; }
.stagger.in > *:nth-child(1){transition-delay:.04s} .stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.20s} .stagger.in > *:nth-child(4){transition-delay:.28s}
.stagger.in > *:nth-child(5){transition-delay:.36s} .stagger.in > *:nth-child(6){transition-delay:.44s}

/* --------------------------------------------------------------------------
   1. ANNOUNCEMENTS — the panel and its empty state
   -------------------------------------------------------------------------- */
.ann-hero-panel{
  border-radius:var(--el-r-l) !important;
  overflow:hidden; position:relative; isolation:isolate;
  background:linear-gradient(165deg,#3E2C1E 0%,#2C1E12 48%,#211508 100%) !important;
  border:1px solid var(--el-hair) !important;
  box-shadow:var(--el-e2-dark) !important;
}
.ann-hero-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(233,206,138,.16), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(198,161,91,.10), transparent 60%);
}
.ann-hero-panel::after{
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px; z-index:2;
  background:var(--el-gold-line); pointer-events:none;
}
.ann-hero-placeholder{ position:relative; z-index:2; padding:56px 32px 52px !important; }
.ann-hero-crest{
  display:inline-grid; place-items:center; width:74px; height:74px; border-radius:50%;
  color:var(--gold-bright);
  background:radial-gradient(circle at 50% 34%, rgba(233,206,138,.22), rgba(233,206,138,.05) 60%, transparent 72%);
  border:1px solid rgba(233,206,138,.42);
  box-shadow:0 0 0 8px rgba(233,206,138,.06), inset 0 1px 0 rgba(255,247,225,.28);
}
.ann-hero-link{
  display:inline-block; margin-top:22px; padding:12px 26px; border-radius:999px;
  border:1px solid rgba(233,206,138,.45); color:var(--gold-bright) !important;
  text-decoration:none !important; letter-spacing:.06em;
  transition:background .3s var(--el-ease), border-color .3s var(--el-ease), transform .3s var(--el-ease);
}
.ann-hero-link:hover{ background:rgba(233,206,138,.12); border-color:var(--gold-bright); transform:translateY(-2px); }
.ann-countdown{
  margin-top:18px; border-radius:var(--el-r) !important;
  background:linear-gradient(168deg,#FFFDF9,#F4ECDC) !important;
  border:1px solid var(--el-hair-soft) !important;
  box-shadow:var(--el-e1) !important;
}
.ann-countdown-empty{ padding:20px !important; }

/* --------------------------------------------------------------------------
   2. FOUNDER — the director card
   -------------------------------------------------------------------------- */
.director-card{
  border-radius:var(--el-r-l) !important;
  background:linear-gradient(165deg,#402E1F 0%,#2E2013 52%,#231607 100%) !important;
  border:1px solid var(--el-hair) !important;
  box-shadow:var(--el-e2-dark) !important;
  overflow:hidden; isolation:isolate;
  padding:44px 36px 40px !important;
}
.director-card::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  border:0 !important; pointer-events:none; z-index:1;
  background:
    radial-gradient(90% 55% at 22% 0%, rgba(233,206,138,.18), transparent 62%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.22));
}
.director-card > *{ position:relative; z-index:2; }
.director-card .dc-photo{
  width:118px !important; height:118px !important;
  border:1px solid rgba(233,206,138,.55) !important;
  box-shadow:0 0 0 8px rgba(198,161,91,.10), 0 22px 40px -22px rgba(0,0,0,.8) !important;
}
.director-card .dc-photo img{ transition:transform .8s var(--el-ease-out); }
.director-card:hover .dc-photo img{ transform:scale(1.06); }
.director-card .creds{
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(233,206,138,.18);
  line-height:1.75;
}
.director-body{ align-self:center; }

/* --------------------------------------------------------------------------
   3. CLEVER — travelling gold light
   -------------------------------------------------------------------------- */
@property --el-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.monogram-rail{
  border-top:0 !important; border-bottom:0 !important;
  gap:16px; flex-wrap:wrap;
}
.mvv .monogram-rail .mono-letter{
  flex:1 1 150px;
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--el-r) !important;
  border-bottom:0 !important;
  background:transparent;
  padding:32px 16px 30px !important;
  box-shadow:var(--el-e1);
  transition:transform .55s var(--el-ease-out), box-shadow .55s var(--el-ease-out);
}
/* the orbiting light */
.mvv .monogram-rail .mono-letter::before{
  content:""; position:absolute; z-index:-2;
  left:50%; top:50%; width:200%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg,
    transparent 0deg 196deg,
    rgba(198,161,91,.05) 220deg,
    rgba(233,206,138,.55) 250deg,
    #FFF3D2 264deg,
    rgba(233,206,138,.55) 278deg,
    rgba(198,161,91,.05) 302deg,
    transparent 330deg 360deg);
  animation:el-orbit 7.5s linear infinite;
  opacity:.9;
}
/* the inner surface, which also replaces the old 1px divider */
.mvv .monogram-rail .mono-letter::after{
  content:""; position:absolute; z-index:-1;
  top:1.5px; right:1.5px; bottom:1.5px; left:1.5px;
  width:auto; height:auto;
  border-radius:calc(var(--el-r) - 2px);
  background:var(--el-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -18px 30px -26px rgba(34,23,9,.35);
}
.mvv .monogram-rail .mono-letter:nth-child(2)::before{ animation-delay:-1.2s; }
.mvv .monogram-rail .mono-letter:nth-child(3)::before{ animation-delay:-2.4s; }
.mvv .monogram-rail .mono-letter:nth-child(4)::before{ animation-delay:-3.6s; }
.mvv .monogram-rail .mono-letter:nth-child(5)::before{ animation-delay:-4.8s; }
.mvv .monogram-rail .mono-letter:nth-child(6)::before{ animation-delay:-6.0s; }
.mvv .monogram-rail .mono-letter:hover{ transform:translateY(-6px); box-shadow:var(--el-e2); }
.mvv .monogram-rail .mono-letter:hover::before{ animation-duration:3.2s; opacity:1; }
.mvv .monogram-rail .mono-letter .mg{
  font-size:2.6rem !important;
  background:linear-gradient(168deg,#E9CE8A 0%,#C6A15B 46%,#8A6A34 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.mvv .monogram-rail .mono-letter .mw{ margin-top:14px !important; font-size:.66rem !important; }

@keyframes el-orbit{ to{ rotate:360deg; } }

/* --------------------------------------------------------------------------
   4. INSTITUTION CARDS
   -------------------------------------------------------------------------- */
.institution-card{
  border-radius:var(--el-r-l) !important;
  border:1px solid var(--el-hair-soft) !important;
  background:var(--el-surface) !important;
  box-shadow:var(--el-e1) !important;
  overflow:hidden; isolation:isolate;
  transition:transform .55s var(--el-ease-out), box-shadow .55s var(--el-ease-out) !important;
}
.institution-card:hover{ box-shadow:var(--el-e3) !important; }
.institution-card::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  border:0 !important; border-radius:inherit; pointer-events:none; z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(198,161,91,.10);
}
.institution-card .ic-visual{
  border-radius:0 !important; position:relative;
  aspect-ratio:16/10 !important;
}
.institution-card .ic-visual::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(34,23,9,.34) 78%,rgba(34,23,9,.68));
}
.institution-card .ic-visual img{ transition:transform 1.1s var(--el-ease-out); }
.institution-card:hover .ic-visual img{ transform:scale(1.055); }

.institution-card .ic-body{ padding:30px 30px 30px !important; position:relative; z-index:2; }
.institution-card .ic-tag{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:linear-gradient(168deg,rgba(198,161,91,.16),rgba(198,161,91,.07));
  border:1px solid rgba(198,161,91,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.institution-card h3{ margin-top:16px !important; }

/* the spec plate — was a flat grey box */
.institution-card .ic-meta{
  border-radius:var(--el-r-s) !important;
  background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(240,231,214,.75)) !important;
  border:1px solid rgba(198,161,91,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -18px rgba(34,23,9,.35) !important;
  padding:18px 20px !important;
  border-left:0 !important;
  position:relative; overflow:hidden;
}
.institution-card .ic-meta::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px; border-radius:3px;
  background:linear-gradient(180deg,#E9CE8A,#C6A15B 55%,rgba(198,161,91,0));
}

.institution-card .ic-strengths li{ position:relative; }
.institution-card .ic-strengths li::marker{ color:transparent; }

/* CTAs — one primary, two quiet */
.institution-card .ic-cta{
  border-radius:999px !important;
  padding:12px 22px !important;
  transition:background .3s var(--el-ease), color .3s var(--el-ease), border-color .3s var(--el-ease), transform .3s var(--el-ease), box-shadow .3s var(--el-ease) !important;
}
.institution-card .ic-cta.is-primary{
  background:linear-gradient(168deg,#D9B673,#C6A15B 60%,#A9833F) !important;
  border-color:transparent !important; color:#241809 !important;
  box-shadow:0 10px 22px -12px rgba(140,100,40,.65), inset 0 1px 0 rgba(255,247,225,.55) !important;
}
.institution-card .ic-cta.is-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(140,100,40,.7), inset 0 1px 0 rgba(255,247,225,.7) !important; }
.institution-card .ic-cta:not(.is-primary){
  border:1px solid rgba(198,161,91,.36) !important; background:rgba(255,255,255,.55) !important;
}
.institution-card .ic-cta:not(.is-primary):hover{ background:#fff !important; border-color:rgba(198,161,91,.6) !important; transform:translateY(-2px); }

/* --------------------------------------------------------------------------
   5. DIGITAL CAMPUS TILES
   -------------------------------------------------------------------------- */
.dc-tile{
  border-radius:var(--el-r) !important;
  background:var(--el-surface-dark) !important;
  border:1px solid rgba(198,161,91,.26) !important;
  box-shadow:var(--el-e1-dark) !important;
  padding:26px 24px !important;
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .5s var(--el-ease-out), box-shadow .5s var(--el-ease-out), border-color .4s var(--el-ease) !important;
}
.dc-tile::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 70% at 50% -10%, rgba(233,206,138,.14), transparent 62%);
}
.dc-tile > *{ position:relative; z-index:2; }
.dc-tile .dc-tile-icon{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(168deg,rgba(233,206,138,.18),rgba(198,161,91,.06));
  border:1px solid rgba(233,206,138,.30);
  box-shadow:inset 0 1px 0 rgba(255,247,225,.24);
  margin-bottom:6px;
}
a.dc-tile:hover{
  background:var(--el-surface-dark) !important;
  border-color:rgba(233,206,138,.55) !important;
  box-shadow:var(--el-e2-dark) !important;
}
.dc-tile .dc-tile-link{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:6px;
  transition:gap .3s var(--el-ease);
}
a.dc-tile:hover .dc-tile-link{ gap:.8rem; }
.dc-tile.is-static{ opacity:.94; }

/* --------------------------------------------------------------------------
   6. GOVERNANCE LEDGER
   -------------------------------------------------------------------------- */
.ledger-row{
  border-radius:var(--el-r) !important;
  background:var(--el-surface-dark) !important;
  border:1px solid rgba(198,161,91,.24) !important;
  box-shadow:var(--el-e1-dark) !important;
  padding:22px 26px !important;
  transition:transform .5s var(--el-ease-out), box-shadow .5s var(--el-ease-out) !important;
}
.ledger-row:hover{ transform:translateY(-4px); box-shadow:var(--el-e2-dark) !important; }

/* --------------------------------------------------------------------------
   7. TODAY'S WIRD — three columns, equal weight
   -------------------------------------------------------------------------- */
.wird-grid{ align-items:stretch !important; gap:24px !important; }
.wird-card{ height:100%; }
.wird-label{
  display:inline-block; padding:7px 16px; border-radius:999px;
  background:linear-gradient(168deg,rgba(58,40,24,.92),rgba(34,23,9,.92));
  border:1px solid rgba(233,206,138,.30);
  color:var(--gold-bright) !important;
  box-shadow:0 8px 18px -12px rgba(34,23,9,.6);
  margin-bottom:16px !important;
}
.wird-card .adhkar-teaser-card,
.wird-reminder-card,
.wird-quran-card{
  border-radius:var(--el-r) !important;
  background:var(--el-surface) !important;
  border:1px solid var(--el-hair-soft) !important;
  box-shadow:var(--el-e1) !important;
  flex:1;
  transition:transform .5s var(--el-ease-out), box-shadow .5s var(--el-ease-out) !important;
}
.wird-card:hover .adhkar-teaser-card,
.wird-card:hover .wird-reminder-card,
.wird-card:hover .wird-quran-card{ transform:translateY(-5px); box-shadow:var(--el-e2) !important; }
/* the Arabic column runs very long — cap it so the three read as a set */
.wird-card .adhkar-teaser-card{ max-height:340px; overflow:hidden; position:relative; }
.wird-card .adhkar-teaser-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(180deg,transparent,#F9F3E7 78%);
}
.wird-reminder-card .wr-ref{ border-radius:999px !important; padding:5px 16px !important; }

/* --------------------------------------------------------------------------
   8. TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote-panel{
  border-radius:var(--el-r-l) !important;
  border-left:0 !important;
  background:linear-gradient(165deg,#402E1F 0%,#2E2013 52%,#231607 100%) !important;
  border:1px solid var(--el-hair) !important;
  box-shadow:var(--el-e2-dark) !important;
  padding:54px 48px 46px !important;
  overflow:hidden; isolation:isolate;
}
.quote-panel::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  border:0 !important; pointer-events:none; z-index:1;
  background:radial-gradient(90% 60% at 12% 0%, rgba(233,206,138,.16), transparent 62%);
}
.quote-panel > *{ position:relative; z-index:2; }
.quote-panel .mark{ font-size:5.2rem !important; opacity:.85; }
.quote-panel .who{
  display:inline-block; margin-top:26px !important; padding-top:18px;
  border-top:1px solid rgba(233,206,138,.24);
}

/* --------------------------------------------------------------------------
   9. ADMISSION FLOW
   -------------------------------------------------------------------------- */
.mini-flow{ gap:12px !important; }
.mini-flow span:not(.arrow){
  border-radius:999px !important;
  padding:13px 24px !important;
  background:var(--el-surface) !important;
  border:1px solid rgba(198,161,91,.30) !important;
  box-shadow:var(--el-e1), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition:transform .4s var(--el-ease-out), box-shadow .4s var(--el-ease-out), border-color .4s var(--el-ease) !important;
}
.mini-flow span:not(.arrow):hover{
  transform:translateY(-4px); border-color:rgba(198,161,91,.62) !important;
  box-shadow:var(--el-e2), inset 0 1px 0 #fff !important;
}
.mini-flow .arrow{ opacity:.7; }

/* --------------------------------------------------------------------------
   10. CAMPUS LIFE CAROUSEL
   -------------------------------------------------------------------------- */
.campus-life-carousel{
  border-radius:var(--el-r-l) !important;
  overflow:hidden; box-shadow:var(--el-e2) !important;
  border:1px solid var(--el-hair-soft) !important;
  position:relative; isolation:isolate;
}
.campus-life-carousel::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(198,161,91,.16);
  background:linear-gradient(180deg,transparent 62%,rgba(34,23,9,.42));
}
.campus-life-carousel .ic-slide img{ transform:scale(1.02); transition:transform 7s linear; }
.campus-life-carousel .ic-slide.is-active img{ transform:scale(1.09); }
.ic-dots{ z-index:4; position:relative; }
.ic-dot{ transition:width .35s var(--el-ease), background .35s var(--el-ease) !important; }

/* --------------------------------------------------------------------------
   11. CONTACT
   -------------------------------------------------------------------------- */
.contact-item{
  border-radius:var(--el-r-s) !important;
  padding:16px 18px !important;
  background:rgba(233,206,138,.05);
  border:1px solid rgba(198,161,91,.18);
  transition:background .35s var(--el-ease), border-color .35s var(--el-ease), transform .35s var(--el-ease);
}
.contact-item + .contact-item{ margin-top:12px; }
.contact-item:hover{ background:rgba(233,206,138,.10); border-color:rgba(233,206,138,.40); transform:translateX(4px); }
.contact-item .ico{
  border-radius:12px !important;
  background:linear-gradient(168deg,rgba(233,206,138,.18),rgba(198,161,91,.06));
  border:1px solid rgba(233,206,138,.28);
}
.contact-form{
  border-radius:var(--el-r) !important;
  background:var(--el-surface-dark) !important;
  border:1px solid rgba(198,161,91,.26) !important;
  box-shadow:var(--el-e2-dark) !important;
  padding:30px 28px !important;
}
.contact-form input,
.contact-form textarea{
  border-radius:14px !important;
  background:rgba(34,23,9,.42) !important;
  border:1px solid rgba(198,161,91,.26) !important;
  transition:border-color .3s var(--el-ease), background .3s var(--el-ease), box-shadow .3s var(--el-ease) !important;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(233,206,138,.7) !important;
  background:rgba(34,23,9,.60) !important;
  box-shadow:0 0 0 4px rgba(233,206,138,.12) !important;
  outline:none !important;
}
.contact-form button{
  border-radius:999px !important;
  background:linear-gradient(168deg,#D9B673,#C6A15B 60%,#A9833F) !important;
  border:0 !important; color:#241809 !important;
  box-shadow:0 14px 28px -14px rgba(140,100,40,.7), inset 0 1px 0 rgba(255,247,225,.55) !important;
  transition:transform .3s var(--el-ease), box-shadow .3s var(--el-ease) !important;
}
.contact-form button:hover{ transform:translateY(-2px); }

.foot-map-panel{
  border-radius:var(--el-r) !important; overflow:hidden;
  border:1px solid var(--el-hair-soft) !important;
  box-shadow:var(--el-e2) !important;
}

/* --------------------------------------------------------------------------
   12. Motion preferences — everything above stops
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mvv .monogram-rail .mono-letter::before{ animation:none !important; opacity:.5; }
  .campus-life-carousel .ic-slide img{ transition:none !important; transform:none !important; }
  .el-3d{ transform:none !important; }
  .el-sheen > .el-glow{ display:none !important; }
  .reveal, .stagger > *{ transform:none !important; transition-duration:.001ms !important; }
}

/* --------------------------------------------------------------------------
   13. Small screens — depth stays, tilt does not
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{ --el-r-l:24px; --el-r:20px; }
  .mvv .monogram-rail .mono-letter{ flex:1 1 calc(50% - 8px); }
  .director-card{ padding:34px 24px 32px !important; }
  .quote-panel{ padding:40px 26px 34px !important; }
  .institution-card .ic-body{ padding:24px 22px !important; }
  .ann-hero-placeholder{ padding:44px 22px 40px !important; }
}

/* --------------------------------------------------------------------------
   14. Refinements after first render
   -------------------------------------------------------------------------- */

/* CLEVER — a richer gold with real presence on cream, and a crisper filament */
.mvv .monogram-rail .mono-letter .mg{
  background:linear-gradient(168deg,#D8B26A 0%,#B98F45 40%,#7A5A28 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.mvv .monogram-rail .mono-letter::before{
  background:conic-gradient(from 0deg,
    transparent 0deg 208deg,
    rgba(198,161,91,.10) 232deg,
    rgba(233,206,138,.85) 254deg,
    #FFF8E4 265deg,
    rgba(233,206,138,.85) 276deg,
    rgba(198,161,91,.10) 298deg,
    transparent 322deg 360deg) !important;
  opacity:1 !important;
}
.mvv .monogram-rail .mono-letter::after{
  top:2px !important; right:2px !important; bottom:2px !important; left:2px !important;
  border-radius:calc(var(--el-r) - 2px) !important;
}
/* a permanent hairline so the tile still reads as an object between passes */
.mvv .monogram-rail .mono-letter{
  box-shadow:var(--el-e1), inset 0 0 0 1px rgba(198,161,91,.14) !important;
}

/* Institution cards — the tag is a pill, not a bar; identity panels keep their art */
.institution-card .ic-tag{
  width:-moz-fit-content; width:fit-content; align-self:flex-start;
}
.institution-card .ic-visual.ic-identity{
  aspect-ratio:16/10 !important;
  display:grid !important; place-items:center !important;
}
.institution-card .ic-visual.ic-identity::after{ display:none; }
.institution-card .ic-visual.ic-identity .ic-mini-foundations{ margin:0 !important; }

/* Digital Campus — lift the body copy off the brown */
.dc-tile p{ color:rgba(248,244,233,.80) !important; }
.dc-tile h4{ letter-spacing:.01em; }

/* Wird — three columns of identical height, links aligned */
.wird-card .adhkar-teaser-card,
.wird-reminder-card,
.wird-quran-card{
  flex:0 0 auto !important;
  min-height:330px !important;
  display:flex !important; flex-direction:column; justify-content:center;
}
.wird-card .adhkar-teaser-card{ max-height:330px !important; }
.wird-card .teaser-link{ margin-top:18px !important; }

/* Director — suppress the corner bracket that the frame draws inside the card */
.director-card::before{ display:none !important; }
.director-card .dc-photo{ margin-bottom:22px !important; }

/* Announcement panel — keep the crest badge clear of the panel edge */
.ann-hero-placeholder .ann-hero-crest{ margin-bottom:18px; }

/* --------------------------------------------------------------------------
   15. CLEVER — each letter becomes a struck medallion
   -------------------------------------------------------------------------- */
.mvv .monogram-rail .mono-letter .mg{
  display:inline-grid !important; place-items:center;
  width:74px; height:74px; border-radius:50%;
  font-size:2.05rem !important; line-height:1 !important;
  background:radial-gradient(circle at 50% 30%, #4A3520 0%, #33240F 52%, #211508 100%) !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  color:#E9CE8A !important;
  border:1px solid rgba(233,206,138,.42);
  box-shadow:
    0 10px 22px -12px rgba(34,23,9,.55),
    inset 0 1px 0 rgba(255,247,225,.22),
    inset 0 -10px 18px -14px rgba(0,0,0,.8);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  transition:transform .55s var(--el-ease-out), box-shadow .55s var(--el-ease-out);
}
.mvv .monogram-rail .mono-letter:hover .mg{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 16px 30px -12px rgba(34,23,9,.6),
    inset 0 1px 0 rgba(255,247,225,.32),
    inset 0 -10px 18px -14px rgba(0,0,0,.75);
}
.mvv .monogram-rail .mono-letter{
  padding:30px 16px 28px !important;
}
.mvv .monogram-rail .mono-letter .mw{
  margin-top:18px !important;
  color:#3B2A1D !important;
  position:relative; padding-bottom:12px;
}
.mvv .monogram-rail .mono-letter .mw::after{
  content:""; position:absolute; left:50%; translate:-50% 0; bottom:0;
  width:26px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,161,91,.7),transparent);
}
.mvv .monogram-rail .mono-letter .md{ color:#6B5A45 !important; }

/* a touch more filament so the pass is legible at a glance */
.mvv .monogram-rail .mono-letter::after{
  top:2.5px !important; right:2.5px !important; bottom:2.5px !important; left:2.5px !important;
}

/* --------------------------------------------------------------------------
   16. Wird — the crescent medallion sits inside the card, text reads from the top
   -------------------------------------------------------------------------- */
.wird-card .adhkar-teaser-card{
  justify-content:flex-start !important;
  padding:92px 26px 26px !important;
}
.wird-card .adhkar-teaser-card::before{
  top:22px !important;
  width:52px !important; height:52px !important;
  background-size:22px 22px !important;
  box-shadow:0 12px 24px -12px rgba(34,23,9,.5), inset 0 1px 0 rgba(255,247,225,.2) !important;
}
.wird-card{ align-items:center; justify-content:flex-start; }
.wird-card .teaser-link{ margin-top:20px !important; }
.wird-reminder-card, .wird-quran-card{ padding:32px 26px !important; }

/* ==========================================================================
   17. FIGURES BAND — the institution, at a glance
   ========================================================================== */
.el-figures{
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(233,206,138,.12), transparent 60%),
    linear-gradient(168deg,#3A2919 0%,#2A1C10 52%,#1E1308 100%);
  padding:clamp(4rem,7vw,6.5rem) 0;
  position:relative; isolation:isolate; overflow:hidden;
}
.el-figures::before,
.el-figures::after{
  content:""; position:absolute; left:14%; right:14%; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(233,206,138,.55),transparent);
}
.el-figures::before{ top:0; } .el-figures::after{ bottom:0; }
.el-figures .eyebrow{ color:var(--gold) !important; justify-content:center; }
.el-figures-h{
  text-align:center; color:#fff; margin:10px 0 clamp(2.2rem,4vw,3.4rem);
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);
}

.el-figure-rail{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin:0;
  background:rgba(198,161,91,.22);
  border:1px solid rgba(198,161,91,.26);
  border-radius:var(--el-r-l);
  overflow:hidden;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.75), inset 0 1px 0 rgba(233,206,138,.14);
}
.el-figure{
  background:linear-gradient(168deg,rgba(70,50,32,.55),rgba(30,19,8,.72));
  padding:clamp(2rem,3.2vw,3rem) clamp(1rem,2vw,1.8rem);
  text-align:center; position:relative;
  transition:background .5s var(--el-ease);
}
.el-figure:hover{ background:linear-gradient(168deg,rgba(90,66,42,.62),rgba(38,25,11,.75)); }
.el-figure-n{
  margin:0; font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:clamp(2.4rem,1.5rem + 3.2vw,4.1rem); font-weight:600; line-height:1;
  background:linear-gradient(168deg,#FFF3D2 0%,#E9CE8A 34%,#C6A15B 72%,#9A7638 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 18px rgba(233,206,138,.16);
  font-variant-numeric:tabular-nums; letter-spacing:.005em;
}
.el-figure-n.el-counting{ opacity:.94; }
.el-figure-l{
  display:block; margin-top:16px;
  font-family:'Cinzel','Amiri',serif; font-size:.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:#F6EFE3;
}
.el-figure-s{
  margin:8px auto 0; max-width:24ch;
  font-size:.8rem; line-height:1.6; color:rgba(233,220,198,.72);
}
@media (max-width:900px){ .el-figure-rail{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .el-figure-rail{ grid-template-columns:1fr; } }

/* ==========================================================================
   18. TYPEWRITER — the CLEVER descriptors
   ========================================================================== */
.mvv .mono-letter .md.el-typing,
.mvv .mono-letter .md.el-typed-done{
  display:block; min-height:1.5em;
}
.mvv .mono-letter .md.el-caret::after{
  content:""; display:inline-block; width:1px; height:1em;
  margin-left:2px; vertical-align:-.12em;
  background:linear-gradient(180deg,#F3DDA8,#C6A15B);
  animation:el-caret-pulse 1.05s steps(1) infinite;
}
@keyframes el-caret-pulse{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* settled text carries a slow, low-amplitude gold pass — calm, not glitter-y */
.mvv .mono-letter .md.el-typed-done{
  background:linear-gradient(100deg,
    #6B5A45 0%, #6B5A45 38%,
    #C6A15B 47%, #F0DCAE 50%, #C6A15B 53%,
    #6B5A45 62%, #6B5A45 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:el-shimmer 7.5s ease-in-out 1.2s infinite;
}
@keyframes el-shimmer{
  0%,100%{ background-position:140% 0; }
  46%,54%{ background-position:-40% 0; }
}

/* ==========================================================================
   19. VOICES — testimonial swiper
   ========================================================================== */
.el-voices{ position:relative; outline:none; }
.el-voices-track{
  position:relative; display:grid;
  min-height:var(--el-h,auto);
  transition:min-height .6s var(--el-ease-out);
}
.el-voice{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.985);
  transition:opacity .7s var(--el-ease-out), transform .7s var(--el-ease-out), visibility 0s linear .7s;
}
.el-voice.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .7s var(--el-ease-out), transform .7s var(--el-ease-out), visibility 0s;
}
.el-voices.is-single .el-voice{ opacity:1; visibility:visible; transform:none; }

.el-voices-btn{
  position:absolute; top:50%; translate:0 -50%; z-index:5;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1rem;
  color:var(--gold-bright);
  background:linear-gradient(168deg,rgba(62,44,28,.92),rgba(34,23,9,.94));
  border:1px solid rgba(233,206,138,.34);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,247,225,.18);
  transition:background .3s var(--el-ease), border-color .3s var(--el-ease), transform .3s var(--el-ease);
}
.el-voices-btn:hover{ border-color:var(--gold-bright); transform:translate(0,-50%) scale(1.06); }
.el-voices-btn.is-prev{ left:-22px; }
.el-voices-btn.is-next{ right:-22px; }
@media (max-width:820px){
  .el-voices-btn.is-prev{ left:2px; } .el-voices-btn.is-next{ right:2px; }
}

.el-voices-dots{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.el-voices-dot{
  width:8px; height:8px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid rgba(198,161,91,.5); background:transparent;
  transition:width .4s var(--el-ease), background .4s var(--el-ease), border-color .4s var(--el-ease);
}
.el-voices-dot.is-active{
  width:30px; background:linear-gradient(90deg,#E9CE8A,#C6A15B); border-color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .mvv .mono-letter .md.el-typed-done{
    animation:none !important; background:none !important; color:#6B5A45 !important;
    -webkit-text-fill-color:#6B5A45;
  }
  .mvv .mono-letter .md.el-caret::after{ display:none !important; }
  .el-voice{ opacity:1 !important; visibility:visible !important; transform:none !important; position:static; }
  .el-voices-track{ display:block; min-height:0 !important; }
  .el-voice + .el-voice{ margin-top:18px; }
  .el-figure-n{ animation:none !important; }
}

/* centred section heading keeps its rule centred */
#at-a-glance h2::after{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; }
.el-figures .wrap > .eyebrow::before{ display:none; }
.el-figures .eyebrow{ letter-spacing:.2em; }

/* ==========================================================================
   20. ADMISSION — the five-stage journey
   ========================================================================== */
.el-journey{
  list-style:none; margin:38px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative;
}
/* the gold thread running through the medallions */
.el-journey::before{
  content:""; position:absolute; left:10%; right:10%; top:37px; height:1px; z-index:0;
  background:linear-gradient(90deg,
    transparent, rgba(198,161,91,.25) 8%, rgba(198,161,91,.55) 50%, rgba(198,161,91,.25) 92%, transparent);
}
.el-stage{
  position:relative; z-index:1; text-align:center;
  padding:0 clamp(.6rem,1.4vw,1.4rem);
}
.el-stage-n{
  display:grid; place-items:center; width:74px; height:74px; margin:0 auto 20px;
  border-radius:50%;
  font-family:'Cinzel','Amiri',serif; font-size:1.35rem; letter-spacing:.04em;
  color:#E9CE8A;
  background:radial-gradient(circle at 50% 30%, #4A3520 0%, #33240F 52%, #211508 100%);
  border:1px solid rgba(233,206,138,.45);
  box-shadow:
    0 14px 26px -14px rgba(34,23,9,.6),
    inset 0 1px 0 rgba(255,247,225,.24),
    inset 0 -10px 18px -14px rgba(0,0,0,.75),
    0 0 0 8px rgba(247,238,223,1);
  transition:transform .55s var(--el-ease-out), box-shadow .55s var(--el-ease-out), color .4s var(--el-ease);
}
.el-stage:hover .el-stage-n{
  transform:translateY(-4px) scale(1.05);
  color:#FFF3D2;
  box-shadow:
    0 20px 34px -14px rgba(34,23,9,.6),
    inset 0 1px 0 rgba(255,247,225,.34),
    inset 0 -10px 18px -14px rgba(0,0,0,.7),
    0 0 0 8px rgba(247,238,223,1),
    0 0 26px -4px rgba(233,206,138,.5);
}
.el-stage-t{
  font-family:'Cinzel','Amiri',serif; font-size:1.02rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); margin:0 0 10px;
}
.el-stage-d{
  font-size:.86rem; line-height:1.68; color:#5B4C3B; margin:0 auto; max-width:27ch;
}
.el-stage-m{
  display:inline-block; margin-top:14px; padding:6px 14px; border-radius:999px;
  font-family:'Cinzel','Amiri',serif; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:#7A5A28; background:rgba(198,161,91,.10); border:1px solid rgba(198,161,91,.26);
}

.el-journey-act{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:44px; }
.el-apply-cta{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:'Cinzel','Amiri',serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 34px; border-radius:999px; color:#241809 !important;
  background:linear-gradient(168deg,#E4C88A,#C6A15B 58%,#A9833F);
  box-shadow:0 16px 30px -14px rgba(140,100,40,.62), inset 0 1px 0 rgba(255,247,225,.6);
  transition:transform .3s var(--el-ease), box-shadow .3s var(--el-ease), gap .3s var(--el-ease);
}
.el-apply-cta:hover{ transform:translateY(-2px); gap:.95rem; box-shadow:0 22px 40px -14px rgba(140,100,40,.7), inset 0 1px 0 rgba(255,247,225,.75); }
.el-apply-alt{
  font-size:.9rem; color:var(--crimson) !important; text-decoration:none;
  border-bottom:1px solid rgba(124,31,46,.3); padding-bottom:4px;
  transition:border-color .3s var(--el-ease);
}
.el-apply-alt:hover{ border-bottom-color:var(--crimson); }

@media (max-width:1080px){
  .el-journey{ grid-template-columns:repeat(2,1fr); gap:38px 20px; }
  .el-journey::before{ display:none; }
}
@media (max-width:620px){
  .el-journey{ grid-template-columns:1fr; gap:0; text-align:left; }
  .el-journey::before{
    display:block; left:36px; right:auto; top:8px; bottom:8px; width:1px; height:auto;
    background:linear-gradient(180deg,transparent,rgba(198,161,91,.5) 8%,rgba(198,161,91,.5) 92%,transparent);
  }
  .el-stage{ display:grid; grid-template-columns:74px 1fr; gap:4px 20px; text-align:left; padding:0 0 34px; }
  .el-stage-n{ grid-row:1 / span 3; margin:0; width:74px; height:74px; }
  .el-stage-t{ align-self:center; margin:0 0 6px; }
  .el-stage-d{ margin:0; max-width:none; }
  .el-stage-m{ justify-self:start; }
}

/* stage timeframe pills share one baseline regardless of description length */
@media (min-width:621px){
  .el-journey{ align-items:stretch; }
  .el-stage{ display:flex; flex-direction:column; }
  .el-stage-m{ margin-top:auto; align-self:center; }
}

/* ==========================================================================
   16. HEADER & FOOTER — luxurious, never aggressive.
   Purely additive: no structure, no menu, no link is changed. Only the
   quality of light and the way things arrive.
   ========================================================================== */

/* ---- header: deeper seat once the page has moved, slower shimmer ---- */
header.nav{ transition:box-shadow .7s var(--el-ease-out), background-color .7s var(--el-ease-out); }
header.nav.el-stuck{ box-shadow:0 22px 54px -38px rgba(0,0,0,.85); }
header.nav .imperial-motion::before{ animation-duration:16s !important; }
header.nav .brand img{ transition:transform 1.3s var(--el-ease-out); }
header.nav .brand:hover img{ transform:rotate(-3.5deg) scale(1.05); }

/* a single hairline of gold that breathes along the bottom edge */
header.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(198,161,91,.20) 16%, rgba(233,206,138,.80) 50%,
    rgba(198,161,91,.20) 84%, transparent 100%);
  background-size:230% 100%;
  animation:el-topline 20s ease-in-out infinite;
}
@keyframes el-topline{
  0%,100%{ background-position:-65% 0; }
  50%    { background-position:165% 0; }
}

/* ---- footer: a slow travelling thread across the very top edge ---- */
footer:not(.ap-foot){ position:relative; }
footer:not(.ap-foot)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:4;
  pointer-events:none; overflow:hidden;
  background:linear-gradient(90deg, rgba(198,161,91,.14), rgba(198,161,91,.14));
}
footer:not(.ap-foot)::after{
  content:""; position:absolute; left:0; top:0; height:1px; width:30%; z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(233,206,138,.5) 38%, #FFF8E4 50%, rgba(233,206,138,.5) 62%, transparent 100%);
  animation:el-thread 13s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes el-thread{
  0%   { transform:translateX(-120%); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateX(440%); opacity:0; }
}

/* the arrival panel gains a slow, wide bloom instead of a static wash */
.foot-arrival{ isolation:isolate; }
.foot-arrival::after{
  content:""; position:absolute; left:50%; top:-40%;
  width:72vw; height:72vw; max-width:900px; max-height:900px;
  translate:-50% 0; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(198,161,91,.11), transparent 66%);
  animation:el-bloom 26s ease-in-out infinite alternate;
}
@keyframes el-bloom{
  from{ transform:scale(1); opacity:.7; }
  to  { transform:scale(1.12); opacity:1; }
}
.foot-arrival .foot-statement, .foot-arrival .corner{ position:relative; z-index:1; }
.foot-arrival .corner{ transition:opacity 1.4s var(--el-ease-out); }
footer.el-in .foot-arrival .corner{ opacity:.72; }
.foot-statement p{ text-wrap:balance; }

/* ---- dashboard tiles: real depth, and an unhurried arrival ---- */
.fd-item{
  border-radius:var(--el-r-s) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px -26px rgba(0,0,0,.9);
  transition:background .55s var(--el-ease-out), border-color .55s var(--el-ease-out),
             transform .55s var(--el-ease-out), box-shadow .55s var(--el-ease-out),
             opacity .9s var(--el-ease-out) !important;
}
.fd-item:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 26px 44px -28px rgba(0,0,0,.95),
             0 0 0 1px rgba(198,161,91,.28);
}
.fd-item svg{ transition:transform .6s var(--el-ease-out), box-shadow .6s var(--el-ease-out),
                          background .6s var(--el-ease-out), border-color .6s var(--el-ease-out) !important; }

/* ---- footer link columns: a gold rule that draws itself on hover ---- */
.foot-grid ul a{ position:relative; display:inline-block; transition:color .45s var(--el-ease-out), transform .45s var(--el-ease-out); }
.foot-grid ul a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:linear-gradient(90deg,#C6A15B,#E9CE8A);
  transform:scaleX(0); transform-origin:left; opacity:.9;
  transition:transform .6s var(--el-ease-out);
}
.foot-grid ul a:hover, .foot-grid ul a:focus-visible{ transform:translateX(3px); }
.foot-grid ul a:hover::after, .foot-grid ul a:focus-visible::after{ transform:scaleX(1); }

/* ---- reveal: everything rises once, slowly, in sequence ---- */
footer:not(.ap-foot) [data-el-rise]{
  opacity:0; transform:translateY(20px);
  transition:opacity 1.15s var(--el-ease-out), transform 1.15s var(--el-ease-out);
}
footer:not(.ap-foot).el-in [data-el-rise]{ opacity:1; transform:none; }
footer.el-in [data-el-rise="1"]{ transition-delay:.05s; }
footer.el-in [data-el-rise="2"]{ transition-delay:.13s; }
footer.el-in [data-el-rise="3"]{ transition-delay:.21s; }
footer.el-in [data-el-rise="4"]{ transition-delay:.29s; }
footer.el-in [data-el-rise="5"]{ transition-delay:.37s; }
footer.el-in [data-el-rise="6"]{ transition-delay:.45s; }

@media (prefers-reduced-motion:reduce){
  header.nav::after, footer:not(.ap-foot)::after, .foot-arrival::after{ animation:none !important; }
  footer:not(.ap-foot)::after{ opacity:0; }
  footer:not(.ap-foot) [data-el-rise]{ opacity:1 !important; transform:none !important; transition:none !important; }
}