/* ============================================================
   Fonts — inlined, zero external requests
============================================================ */
@font-face{
  font-family:"SaudiWeb";
  src:url("../fonts/SaudiWeb-Regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:block;
}
@font-face{
  font-family:"SaudiWeb";
  src:url("../fonts/SaudiWeb-Bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:block;
}

/* ============================================================
   Tokens — committed dark world, painted explicitly
============================================================ */
:root{
  --ink:#050807;
  --ink-2:#0a100e;
  --paper:#f6f3ed;
  --paper-dim:rgba(246,243,237,.93);
  --paper-mute:rgba(246,243,237,.76);

  /* ---- one fluid unit that respects BOTH axes of the frame ----
     A full-screen presentation must shrink on a short landscape phone
     just as it grows on a wide desktop. vw alone cannot do that. */
  --u:clamp(8px, .52vw + .92vh, 26px);

  /* frame margins */
  --pad:clamp(20px, 4.4vw, 84px);
  --padY:clamp(24px, 5.2vh, 60px);

  /* the indicator owns this gutter on the right — no text ever enters it */
  --rail:clamp(46px, 4.8vw, 82px);

  --gold:#c9a96e;
  --gold-soft:rgba(201,169,110,.55);
  --gold-faint:rgba(201,169,110,.22);

  --green:#1a3a2e;
  --green-deep:#0b1a15;

  --line:rgba(244,240,232,.26);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --dur:900ms;

  --ar:"SaudiWeb",Tahoma,"Segoe UI",Arial,sans-serif;
  --lat:ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  height:100%;margin:0;padding:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--ink);
}
html{direction:rtl}
body{
  direction:rtl;
  color:var(--paper);
  background:var(--ink);
  font-family:var(--ar);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  touch-action:none;
}

/* Skip link */
.skip{
  position:fixed;z-index:99999;top:12px;right:12px;
  padding:10px 16px;border-radius:2px;
  background:var(--paper);color:var(--ink);
  font-family:var(--ar);font-size:.9rem;
  transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* Global focus treatment */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:2px;
}


/* ============================================================
   Loader — holds the first frame until the scenes are decoded,
   then lifts away in the same language as a scene transition.
============================================================ */
.loader{
  position:fixed;inset:0;z-index:200000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:calc(var(--u) * 1.45);
  background:var(--ink);
  transform:translate3d(0,0,0);
  will-change:transform;
}
.loader__mark{
  width:calc(var(--u) * 7.5);height:auto;
  opacity:0;
  animation:markIn 1s var(--ease) .12s forwards;
}
@keyframes markIn{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:.92;transform:none}
}
.loader__tag{
  font-size:max(12.5px, var(--u) * .95);
  letter-spacing:.24em;
  color:var(--paper-mute);
  opacity:0;
  animation:tagIn .9s var(--ease) .38s forwards;
}
@keyframes tagIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.loader__meter{
  position:relative;
  width:min(260px, 40vw);height:1px;
  background:rgba(246,243,237,.16);
  overflow:hidden;
}
.loader__bar{
  position:absolute;inset:0 auto 0 0;   /* grows from the left edge */
  width:0%;
  background:linear-gradient(90deg,rgba(201,169,110,.35),var(--gold));
  box-shadow:0 0 10px rgba(201,169,110,.4);
  transition:width .32s var(--ease);
}
.loader__pct{
  font-family:var(--lat);
  font-size:max(10px, var(--u) * .68);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2em;direction:ltr;
  color:var(--gold-soft);
}

.loader.is-done{
  transform:translate3d(0,-100%,0);
  transition:transform 1s var(--ease-io) 180ms;
}
.loader.is-done .loader__mark,
.loader.is-done .loader__tag,
.loader.is-done .loader__meter,
.loader.is-done .loader__pct{
  opacity:0;
  transition:opacity .4s var(--ease);
}

/* hold every scene's copy at its resting-out state while loading */
body.loading .scene.is-on .rise{transform:translate3d(0,115%,0);opacity:0}
body.loading .scene.is-on .fade{opacity:0;transform:translate3d(0,16px,0)}
body.loading .scene.is-on .scene__bg{transform:translate3d(0,-20%,0) scale(1.09)}
body.loading .hint{opacity:0}

@media(prefers-reduced-motion:reduce){
  .loader__mark,.loader__tag{animation:none;opacity:1}
  .loader.is-done{transform:none;opacity:0;transition:opacity .3s linear}
}

/* ============================================================
   Stage
============================================================ */
.stage{
  position:relative;
  width:100vw;height:100vh;
  overflow:hidden;
  background:var(--ink);
}
@supports(height:100dvh){.stage{height:100dvh}}

.scene{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:hidden;
  visibility:hidden;
  isolation:isolate;
  background:var(--ink);
  transform:translate3d(0,100%,0);
  will-change:transform;
}
.scene.is-on{visibility:visible}
.scene.is-moving{transition:transform var(--dur) var(--ease-io)}

/* ---- background layers: bg (parallax) > drift (ambient) ---- */
.scene__bg{
  position:absolute;inset:0;z-index:0;
  transform:translate3d(0,-20%,0) scale(1.09);
  will-change:transform;
}
.scene.is-moving .scene__bg{transition:transform calc(var(--dur) + 320ms) var(--ease)}
.scene.is-on .scene__bg{transform:translate3d(0,0,0) scale(1)}

.scene__drift{
  position:absolute;inset:-4%;
  background-image:var(--img);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--pos,center center);
  filter:brightness(var(--bri,.84)) contrast(1.06) saturate(.93);
}
.scene.is-on .scene__drift{animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.05) translate3d(1.2%,-1.4%,0)}
}

/* ---- scrim ---- */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ============================================================
   Content wells + line reveal machinery
============================================================ */
/* A well is a ZONE, not a text box: it claims a region of the frame,
   and the copy sits centred inside that region — horizontally and
   vertically. Defining the region first is what stops the text from
   collapsing into a thin column against the frame edge. */
.well{
  position:absolute;z-index:3;direction:rtl;
  top:0;bottom:0;
  display:flex;flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u) * 1.2);
  text-align:center;
  padding-block:var(--padY);
}

/* Legibility field anchored to the text itself, not to the frame edge —
   guarantees contrast on every photo without flattening the image. */
.well::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0;
  background:radial-gradient(ellipse 70% 46% at center,
    rgba(3,8,7,.86) 0%,
    rgba(3,8,7,.72) 34%,
    rgba(3,8,7,.44) 58%,
    rgba(3,8,7,.16) 79%,
    transparent 100%);
}

.mask{
  display:block;overflow:hidden;
  padding:.06em .1em .22em;
  margin-inline:-.1em;
}
.rise{
  display:block;
  transform:translate3d(0,115%,0);
  opacity:0;
  transition:
    transform 1s var(--ease) calc(var(--i,0) * 85ms + 140ms),
    opacity   .8s var(--ease) calc(var(--i,0) * 85ms + 140ms);
}
.scene.is-on .rise{transform:translate3d(0,0,0);opacity:1}

.fade{
  opacity:0;transform:translate3d(0,16px,0);
  transition:
    opacity .85s var(--ease) calc(var(--i,0) * 85ms + 220ms),
    transform .85s var(--ease) calc(var(--i,0) * 85ms + 220ms);
}
.scene.is-on .fade{opacity:1;transform:translate3d(0,0,0)}

/* ============================================================
   Eyebrow (pillar number) — right-aligned RTL rule
============================================================ */
.eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--u) * .9);
}
.eyebrow__num{
  font-family:var(--lat);
  font-size:max(12px, var(--u) * .88);
  font-weight:700;
  letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
}
.eyebrow__rule{
  display:block;height:1px;width:calc(var(--u) * 2.6);
  background:linear-gradient(to left,var(--gold-soft),transparent);
}
.eyebrow__of{
  font-family:var(--ar);
  font-size:max(11.5px, var(--u) * .78);
  letter-spacing:.06em;
  color:var(--paper-mute);
}

/* ============================================================
   Type scale
============================================================ */
h1,h2,p{margin:0}

.t-hero,.t-title,.t-title--wide{
  max-width:100%;
  text-shadow:0 2px 10px rgba(0,0,0,.52),0 12px 34px rgba(0,0,0,.30);
}
.t-lead,.t-note,.eyebrow,.closing-tag,.hero-latin{
  text-shadow:0 2px 8px rgba(0,0,0,.58);
}

/* Display sizes ride the fluid unit. Body sizes ride it too but keep a
   px floor — running text must never shrink below comfortable reading. */
.t-hero{
  font-size:calc(var(--u) * 4.55);
  font-weight:400;line-height:1.2;letter-spacing:-.012em;
  color:var(--paper);
}
.t-hero em{font-style:normal;font-weight:700}

.t-title{
  font-size:calc(var(--u) * 7);
  font-weight:400;line-height:1.2;letter-spacing:-.012em;
  color:var(--paper);
}
.t-title--wide{
  font-size:calc(var(--u) * 4.55);
  font-weight:400;line-height:1.2;letter-spacing:-.012em;
  color:var(--paper);
}
.t-title--wide em{font-style:normal;font-weight:700}

.t-lead{
  font-size:max(16px, var(--u) * 1.5);
  font-weight:400;line-height:1.5;
  color:var(--paper-dim);
  max-width:34ch;
  text-wrap:balance;
}
.t-note{
  font-size:max(13.5px, var(--u) * 1.12);
  font-weight:400;line-height:1.55;
  color:var(--paper-mute);
  max-width:36ch;
  text-wrap:balance;
}
/* short stacked lead lines (pillars) need no measure cap */
.t-lead .mask{max-width:none}

/* ============================================================
   Buttons
============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:calc(var(--u) * .95);
  padding:0;border:0;background:transparent;
  color:var(--paper);font-family:var(--ar);
  cursor:pointer;
}
.btn__ring{
  flex:0 0 auto;display:grid;place-items:center;
  width:max(44px, var(--u) * 3.5);height:max(44px, var(--u) * 3.5);
  border:1px solid var(--line);border-radius:50%;
  background:rgba(5,8,7,.22);
  color:var(--paper);
  transition:
    transform .45s var(--ease),
    border-color .45s var(--ease),
    background .45s var(--ease),
    color .45s var(--ease);
}
.btn__ring svg{
  width:max(17px, var(--u) * 1.3);height:max(17px, var(--u) * 1.3);
  fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.btn__label{
  font-size:max(15px, var(--u) * 1.16);
  transition:color .45s var(--ease);
}
@media(hover:hover){
  .btn:hover .btn__ring{
    transform:translateX(-6px);
    border-color:var(--gold);
    background:rgba(201,169,110,.10);
    color:var(--gold);
  }
  .btn:hover .btn__label{color:var(--gold)}
}
.btn--arrow{margin-top:calc(var(--u) * .6)}

/* text link */
.link{
  color:var(--paper-dim);text-decoration:none;
  border-bottom:1px solid var(--gold-faint);
  padding-bottom:3px;
  font-size:max(14.5px, var(--u) * 1.1);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
@media(hover:hover){.link:hover{color:var(--gold);border-color:var(--gold)}}

/* ============================================================
   Persistent brand mark
============================================================ */
.brand{
  position:absolute;z-index:4;
  top:var(--padY);
  left:var(--pad);
}
.brand img{display:block;height:auto;object-fit:contain}

.brand--hero img{width:calc(var(--u) * 11.5)}
.brand--mini{
  position:fixed;z-index:6500;
  opacity:0;transform:translateY(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.brand--mini img{width:calc(var(--u) * 5.6);opacity:.72}
body.past-hero .brand--mini{opacity:1;transform:translateY(0)}

/* ============================================================
   01 — HERO
============================================================ */
.scrim--hero{
  background:
    linear-gradient(90deg,
      rgba(5,10,9,.95) 0%,
      rgba(5,10,9,.85) 18%,
      rgba(6,14,12,.62) 36%,
      rgba(8,20,17,.30) 53%,
      rgba(10,26,21,.09) 70%,
      transparent 84%),
    linear-gradient(180deg,
      rgba(0,0,0,.16) 0%,
      transparent 46%,
      rgba(0,0,0,.22) 100%);
}
.well--hero{left:var(--pad);right:44%}
.well--hero .btn{margin-top:calc(var(--u) * .6)}

.hero-latin{
  position:absolute;z-index:3;
  left:var(--pad);
  bottom:var(--padY);
  display:flex;flex-direction:column;gap:calc(var(--u) * .5);
  direction:ltr;
  font-family:var(--lat);
  font-size:max(9.5px, var(--u) * .68);
  letter-spacing:.34em;
  color:var(--paper-mute);
}
.hero-latin span:nth-child(2){color:var(--gold-soft)}

.hero-rule{
  position:absolute;z-index:4;left:0;bottom:0;
  width:100%;height:1px;
  background:linear-gradient(90deg,
    var(--gold-soft) 0%,
    rgba(244,240,232,.34) 34%,
    rgba(244,240,232,.12) 100%);
}

/* first-run hint */
.hint{
  position:fixed;z-index:6600;
  left:50%;bottom:clamp(18px,3.4vh,34px);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font-size:.76rem;letter-spacing:.06em;
  color:var(--paper-mute);
  pointer-events:none;
  transition:opacity .6s var(--ease);
}
.hint__mouse{
  width:19px;height:30px;border:1px solid var(--line);
  border-radius:11px;position:relative;
}
.hint__mouse::after{
  content:"";position:absolute;left:50%;top:6px;
  width:2px;height:5px;border-radius:2px;
  background:var(--gold);
  transform:translateX(-50%);
  animation:hintdrop 1.9s var(--ease) infinite;
}
@keyframes hintdrop{
  0%{opacity:0;transform:translate(-50%,-3px)}
  35%{opacity:1}
  75%{opacity:0;transform:translate(-50%,10px)}
  100%{opacity:0}
}
body.moved .hint{opacity:0}

/* ============================================================
   02 — CONCEPT
============================================================ */
.scrim--concept{
  background:
    radial-gradient(ellipse at 84% 82%,
      rgba(3,10,8,.62) 0%,
      rgba(3,10,8,.36) 26%,
      rgba(3,10,8,.10) 48%,
      transparent 66%),
    linear-gradient(180deg,transparent 44%,rgba(0,0,0,.24) 100%);
}
.well--concept{right:var(--rail);left:44%;top:50%;bottom:0}

/* ============================================================
   03–06 — PILLARS (one component, four modifiers)
============================================================ */
.scrim--pillar{
  background:
    radial-gradient(ellipse at 16% 34%,
      rgba(4,12,10,.70) 0%,
      rgba(4,12,10,.44) 26%,
      rgba(4,12,10,.14) 50%,
      transparent 70%),
    linear-gradient(180deg,transparent 60%,rgba(0,0,0,.20) 100%);
}
.well--pillar{left:var(--pad);right:44%}
/* the pillar word IS the scene — give it the weight of a hero */
.well--pillar .t-lead{max-width:24ch}
.well--pillar .t-note{max-width:30ch}

/* ============================================================
   07 / 09 — right-side wells
============================================================ */
.scrim--right{
  background:
    linear-gradient(270deg,
      rgba(3,12,10,.86) 0%,
      rgba(3,12,10,.64) 21%,
      rgba(3,12,10,.35) 39%,
      rgba(3,12,10,.10) 55%,
      transparent 70%),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 55%,rgba(0,0,0,.18) 100%);
}
.well--right{right:var(--rail);left:44%}

/* 08 — left-side well */
.scrim--left{
  background:
    linear-gradient(90deg,
      rgba(3,10,9,.85) 0%,
      rgba(3,10,9,.63) 22%,
      rgba(3,10,9,.33) 39%,
      rgba(3,10,9,.09) 56%,
      transparent 71%),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 56%,rgba(0,0,0,.18) 100%);
}
.well--left{left:var(--pad);right:44%}

/* ============================================================
   10 — CLOSING
============================================================ */
.scrim--closing{
  background:
    radial-gradient(ellipse at 50% 52%,
      rgba(3,10,8,.50) 0%,
      rgba(3,10,8,.62) 45%,
      rgba(2,7,6,.80) 100%),
    linear-gradient(180deg,rgba(0,0,0,.20) 0%,transparent 40%,rgba(0,0,0,.40) 100%);
}
.well--closing{left:var(--rail);right:var(--rail)}
.well--closing .t-hero{line-height:1.24}
.well--closing .t-note{max-width:46ch}
.closing-tag{
  font-family:var(--lat);
  font-size:max(9.5px, var(--u) * .7);
  letter-spacing:.36em;direction:ltr;
  color:var(--gold-soft);
}
.closing-rule{
  width:calc(var(--u) * 4.5);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}
.closing-actions{
  display:flex;align-items:center;justify-content:center;
  gap:calc(var(--u) * 2.4);
  flex-wrap:wrap;
  margin-top:calc(var(--u) * .5);
}

/* ============================================================
   Rail — section indicator
============================================================ */
.rail{
  position:fixed;z-index:7000;
  top:50%;right:clamp(10px,1.9vw,32px);
  transform:translateY(-50%);
  display:flex;align-items:center;
}
.rail::before{
  content:"";position:absolute;z-index:-1;
  top:50%;right:-56px;
  width:150px;height:128%;
  transform:translateY(-50%);
  background:linear-gradient(270deg,rgba(0,0,0,.62),rgba(0,0,0,.26) 52%,transparent);
  filter:blur(12px);pointer-events:none;
}
.rail__label{
  position:absolute;top:50%;right:100%;
  margin-right:calc(var(--u) * .8);
  font-size:max(12px, var(--u) * .82);line-height:1.2;
  color:var(--paper-dim);
  white-space:nowrap;
  padding:5px 11px;border-radius:2px;
  background:rgba(4,8,7,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-50%) translateX(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.rail:hover .rail__label,
.rail:focus-within .rail__label,
.rail.is-shown .rail__label{opacity:1;transform:translateY(-50%) translateX(0)}

.rail__track{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:6px 0;
}
.rail__track::before{
  content:"";position:absolute;z-index:0;
  top:10px;bottom:10px;left:50%;width:1px;
  transform:translateX(-50%);
  background:rgba(244,240,232,.24);
}
.rail__fill{
  position:absolute;z-index:1;top:10px;left:50%;width:2px;height:0;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold),rgba(201,169,110,.45));
  box-shadow:0 0 10px rgba(201,169,110,.35);
  transition:height .6s var(--ease);
}
.rail__dot{
  position:relative;z-index:2;
  width:20px;height:20px;padding:0;border:0;
  background:transparent;cursor:pointer;
}
.rail__dot::after{
  content:"";position:absolute;top:50%;left:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(244,240,232,.66);
  border-radius:50%;
  background:rgba(5,8,7,.55);
  transition:width .4s var(--ease),height .4s var(--ease),
             border-radius .4s var(--ease),background .4s var(--ease),
             border-color .4s var(--ease);
}
@media(hover:hover){
  .rail__dot:hover::after{border-color:var(--gold);background:var(--gold-faint)}
}
.rail__dot[aria-current="true"]::after{
  width:26px;height:3px;border:0;border-radius:99px;
  background:var(--gold);
  box-shadow:0 0 12px rgba(201,169,110,.5);
}

/* ============================================================
   Back-to-top
============================================================ */
.top{
  position:fixed;z-index:6000;
  left:clamp(16px,3vw,44px);bottom:clamp(16px,4vh,40px);
  display:grid;place-items:center;
  width:48px;height:48px;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(5,8,7,.34);color:var(--paper);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease),
             border-color .35s var(--ease),color .35s var(--ease);
}
.top.is-shown{opacity:1;visibility:visible;transform:translateY(0)}
@media(hover:hover){.top:hover{border-color:var(--gold);color:var(--gold)}}
.top svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   Custom cursor
============================================================ */
.cur-dot,.cur-ring{display:none}
@media(hover:hover) and (pointer:fine){
  body.fine,body.fine button,body.fine a,body.fine [data-hov]{cursor:none}
  .cur-dot{
    display:block;position:fixed;z-index:100001;top:0;left:0;
    width:5px;height:5px;border-radius:50%;background:#fff;
    opacity:0;pointer-events:none;mix-blend-mode:difference;
    will-change:transform;transition:opacity .2s ease;
  }
  .cur-ring{
    display:block;position:fixed;z-index:100000;top:0;left:0;
    width:38px;height:38px;border-radius:50%;
    border:1px solid rgba(255,255,255,.7);
    opacity:0;pointer-events:none;mix-blend-mode:difference;
    will-change:transform;
    transition:width .3s var(--ease),height .3s var(--ease),
               background .3s var(--ease),opacity .2s ease;
  }
  .cur-dot.on,.cur-ring.on{opacity:1}
  .cur-ring.hov{width:60px;height:60px;background:rgba(255,255,255,.1)}
  .cur-ring.down{width:28px;height:28px}
}

/* ============================================================
   Scene image focal points + exposure
============================================================ */
#hero      .scene__drift{--img:url("../images/01-hero-riyadh.webp");--pos:center center;--bri:.86}
#concept   .scene__drift{--img:url("../images/02-concept-blueprint.webp");--pos:center center;--bri:.86}
#understand .scene__drift{--img:url("../images/03-understand-books.webp");--pos:center center;--bri:.82}
#register  .scene__drift{--img:url("../images/04-register-certificate.webp");--pos:center center;--bri:.84}
#protect   .scene__drift{--img:url("../images/05-protect-gavel.webp");--pos:center center;--bri:.82}
#invest    .scene__drift{--img:url("../images/06-invest-opportunities.webp");--pos:center center;--bri:.84}
#map       .scene__drift{--img:url("../images/07-saudi-ip-map.webp");--pos:center center;--bri:.80}
#judiciary .scene__drift{--img:url("../images/08-judiciary-hall.webp");--pos:center center;--bri:.80}
#knowledge .scene__drift{--img:url("../images/09-knowledge-atrium.webp");--pos:center center;--bri:.82}
#closing   .scene__drift{--img:url("../images/10-closing-riyadh.webp");--pos:center center;--bri:.78}

/* ============================================================
   Narrow frames — composition only.
   Every size already scales through --u, so no font-size overrides
   live here; that is what makes the type genuinely responsive.
============================================================ */
@media(max-width:760px){
  :root{--dur:760ms}

  /* pull each photo's subject away from the text column */
  #hero       .scene__drift{--pos:64% center}
  #concept    .scene__drift{--pos:48% center}
  #understand .scene__drift{--pos:60% center}
  #register   .scene__drift{--pos:60% center}
  #protect    .scene__drift{--pos:62% center}
  #invest     .scene__drift{--pos:60% center}
  #map        .scene__drift{--pos:36% center}
  #judiciary  .scene__drift{--pos:60% center}
  #knowledge  .scene__drift{--pos:40% center}

  /* On a phone the text column spans most of the frame,
     so the scrim keeps a dark floor everywhere rather than
     fading out at one edge. */
  .scrim--hero{
    background:linear-gradient(100deg,
      rgba(5,10,9,.95) 0%,rgba(5,10,9,.84) 42%,
      rgba(6,14,12,.66) 74%,rgba(6,14,12,.52) 100%);
  }
  .scrim--pillar{
    background:linear-gradient(100deg,
      rgba(4,12,10,.94) 0%,rgba(4,12,10,.78) 44%,
      rgba(4,12,10,.58) 78%,rgba(4,12,10,.44) 100%);
  }
  .scrim--right{
    background:linear-gradient(260deg,
      rgba(3,12,10,.94) 0%,rgba(3,12,10,.78) 42%,
      rgba(3,12,10,.58) 76%,rgba(3,12,10,.44) 100%);
  }
  .scrim--left{
    background:linear-gradient(100deg,
      rgba(3,10,9,.94) 0%,rgba(3,10,9,.78) 42%,
      rgba(3,10,9,.58) 76%,rgba(3,10,9,.44) 100%);
  }
  .scrim--concept{
    background:
      radial-gradient(ellipse at 70% 78%,rgba(3,10,8,.78) 0%,rgba(3,10,8,.46) 36%,transparent 70%),
      linear-gradient(180deg,transparent 32%,rgba(0,0,0,.48) 100%);
  }

  /* one column on a phone: every zone spans the frame between the
     left margin and the indicator's gutter, copy still centred in it */
  .well--hero,.well--pillar,.well--left,
  .well--right,.well--concept,.well--closing{left:var(--pad);right:var(--rail)}
  .well--concept{top:46%}
  .t-title{font-size:calc(var(--u) * 6)}

  .well::before{
    background:radial-gradient(ellipse 76% 40% at center,
      rgba(3,8,7,.88) 0%,rgba(3,8,7,.74) 38%,
      rgba(3,8,7,.44) 62%,rgba(3,8,7,.14) 82%,transparent 100%);
  }

  .rail{right:8px}
  .rail__label{display:none}

  .hint{gap:8px}
}

/* Short landscape frames: drop the optional line, tighten the stack */
@media(max-height:460px) and (orientation:landscape){
  .well{gap:calc(var(--u) * .6)}
  .t-note,.hint,.hero-latin{display:none}
  .closing-rule{display:none}
}

/* ============================================================
   Reduced motion — cross-fade only, no parallax, no drift
============================================================ */
@media(prefers-reduced-motion:reduce){
  body.fine,body.fine button,body.fine a,body.fine [data-hov]{cursor:auto}
  .cur-dot,.cur-ring{display:none !important}
  .hint__mouse::after{animation:none;opacity:1}

  .scene{transform:none !important;opacity:0}
  .scene.is-on{opacity:1}
  .scene.is-moving{transition:opacity 320ms linear}
  .scene__bg{transform:none !important;transition:none !important}
  .scene.is-on .scene__drift{animation:none}
  .rise,.fade{transition-duration:1ms !important;transition-delay:0ms !important}
}