@import url("tokens.css");

:root{
  --palm:#0C3B2E; --palm-shadow:#082B21; --charcoal:#12100A;
  --emerald:#157F5A; --gold:#C9A24B; --gold-light:#E7CE8F; --gold-dark:#8A6A2E;
  --paper:#F6F1E6; --paper-ink:#241C0F; --muted:#9FB3A6;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  --serif:'Playfair Display', Georgia, serif;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --ar:'Cairo', sans-serif;
  --ar-body:'IBM Plex Sans Arabic', sans-serif;
  --edge:rgba(201,162,75,0.28);
  --edge-strong:rgba(201,162,75,0.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:var(--sans);
  color:var(--paper);
  background:var(--palm);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* global grain */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-repeat:repeat; opacity:.5; mix-blend-mode:overlay;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative; z-index:1;}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600; margin-bottom:18px;
}
.eyebrow.center{display:flex; align-items:center; justify-content:center; gap:16px;}
.eyebrow.center::before,.eyebrow.center::after{content:""; width:44px; height:1px; background:var(--edge-strong);}
/* Arabic leads, English follows — smaller (site-wide heading style) */
h2.scene-title{
  display:flex; flex-direction:column-reverse; gap:6px;
  font-family:var(--serif); font-weight:600; font-size:clamp(17px,2vw,25px);
  line-height:1.4; letter-spacing:.02em; color:#AEB9AE; margin-bottom:8px;
}
.title-ar{ font-family:var(--ar); direction:rtl; font-weight:800; color:var(--paper); }
h2 .title-ar{ font-size:clamp(28px,4vw,46px); line-height:1.55; display:block; margin-top:0; }
.lede{ font-size:clamp(15px,1.5vw,18px); color:#b9c6bd; max-width:60ch; margin-top:18px;}
.lede:has(.lede-ar){display:flex; flex-direction:column-reverse; gap:4px;}
.lede-ar{ font-family:var(--ar-body); direction:rtl; text-align:right; color:#cddbd2; font-size:1.2em;}
.foil{
  background-image:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-light) 30%,var(--gold) 48%,#F3E3B8 60%,var(--gold) 72%,var(--gold-dark) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilShift 9s ease-in-out infinite alternate;
}
@keyframes foilShift{from{background-position:0% 50%;}to{background-position:100% 50%;}}
.rule{height:1px; border-top:1px solid var(--gold); box-shadow:0 1px 0 rgba(201,162,75,.28); }

/* engraved double-rule */
.engraved{
  border:1px solid var(--gold);
  box-shadow:inset 0 0 0 3px rgba(8,43,33,.55), inset 0 0 0 4px rgba(231,206,143,.28);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.04em;
  padding:15px 30px; border:none; border-radius:2px; text-decoration:none; transition:.25s ease;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  color:#221803; box-shadow:0 8px 26px rgba(201,162,75,.28);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(201,162,75,.42);}
.btn-ghost{ background:transparent; color:var(--gold-light); border:1px solid var(--edge-strong);}
.btn-ghost:hover{ border-color:var(--gold); background:rgba(201,162,75,.08);}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(38px) scale(.985); filter:blur(7px);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter 1.05s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:none; filter:none;}
.reveal.d1{transition-delay:.12s} .reveal.d2{transition-delay:.24s} .reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s} .reveal.d5{transition-delay:.6s}

/* ---------- cinematic hero entrance ---------- */
.hero-tagline-ar{animation:riseIn 1.5s cubic-bezier(.16,1,.3,1) both .25s;}
.hero-tagline-en{animation:trackIn 1.5s cubic-bezier(.16,1,.3,1) both .5s;}
@keyframes trackIn{from{opacity:0; letter-spacing:.12em; filter:blur(8px); transform:translateY(14px);}to{opacity:1; letter-spacing:.01em; filter:none; transform:none;}}
@keyframes riseIn{from{opacity:0; filter:blur(8px); transform:translateY(18px);}to{opacity:1; filter:none; transform:none;}}

/* ---------- gold dust particles & scroll progress ---------- */
#goldDust{position:fixed; inset:0; z-index:7; pointer-events:none;}
#scrollProgress{position:fixed; top:0; left:0; height:2px; width:0; z-index:60; pointer-events:none;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold) 45%,var(--gold-light));
  box-shadow:0 0 8px rgba(201,162,75,.55);}

/* ---------- parallax layers ---------- */
.hero-lattice,.finale-seal{will-change:transform;}

/* ---------- card light-sweep on hover ---------- */
.stage,.perk{position:relative; overflow:hidden;}
.price-card{position:relative; overflow:hidden;}
.stage::after,.perk::after,.price-card::after{
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:55%; pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(231,206,143,.06) 45%, rgba(255,244,214,.10) 50%, rgba(231,206,143,.06) 55%, transparent);
  transform:skewX(-18deg); transition:left .9s cubic-bezier(.22,1,.32,1); mix-blend-mode:screen;
}
.stage:hover::after,.perk:hover::after,.price-card:hover::after{left:130%;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;}
  .reveal{opacity:1; transform:none; filter:none; transition:none;}
  html{scroll-behavior:auto;}
  .passport{transform:none !important;}
  .open-cover{transition:none !important;}
  .hero-tagline-ar,.hero-tagline-en{animation:none !important; opacity:1; filter:none; transform:none;}
  #goldDust,.sheen,.passport-aura{display:none !important;}
  .hero-lattice,.finale-seal{transform:none !important;}
}

/* keyboard focus */
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; border-radius:2px; }

/* ---------- language toggle behaviour ---------- */
.ar-only{display:none;}
body.show-ar .en-only{display:none;}
body.show-ar .ar-only{display:block;}
body.show-en .ar-only{display:none;}
/* default (show-both): everything visible */


/* ---------- animated cursor hint ---------- */
.cursor-hint{
  position:absolute; left:50%; top:0; transform:translate(-50%, 40px);
  pointer-events:none; opacity:0; z-index:10;
  display:flex; align-items:center; gap:6px;
}
.cursor-hint.go{
  animation:chEnter 2.2s cubic-bezier(.22,.68,.36,1) forwards;
}
.cursor-hint.done{
  animation:chFade .6s ease forwards;
}
.ch-cursor{
  flex:none; filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.ch-text{
  font-family:var(--serif); font-size:17px; font-weight:700;
  color:#FFFFFF; white-space:nowrap; letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
  padding:6px 14px; border-radius:20px;
  background:rgba(7,32,24,.78); border:1px solid rgba(255,255,255,.28);
  opacity:0;
}
.cursor-hint.go .ch-text{
  animation:chTextIn .5s ease .6s forwards;
}
@keyframes chEnter{
  0%{opacity:0; transform:translate(calc(-50% - 260px), 150px);}
  18%{opacity:1;}
  50%{transform:translate(calc(-50% - 60px), 30px);}
  75%{transform:translate(calc(-50% + 0px), -2px);}
  100%{opacity:1; transform:translate(calc(-50% + 0px), -2px);}
}
@keyframes chTextIn{
  0%{opacity:0; transform:translateX(-6px);}
  100%{opacity:1; transform:translateX(0);}
}
@keyframes chFade{
  0%{opacity:1;}
  100%{opacity:0; visibility:hidden;}
}
@media (prefers-reduced-motion:reduce){
  .cursor-hint.go{animation:none; opacity:0;}
}

/* =====================================================
   NAV
===================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; transition:.35s ease;
  background:linear-gradient(to bottom, rgba(8,43,33,.9), rgba(8,43,33,0));
}
.nav.solid{ background:rgba(8,43,33,.94); box-shadow:0 1px 0 var(--edge); backdrop-filter:blur(8px);}
.brandmark{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brandmark .wm{font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.05em; color:var(--paper);}
.brandmark .wm small{display:block; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:400; font-family:var(--sans);}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{ color:#cddbd2; text-decoration:none; font-size:13px; letter-spacing:.03em; transition:.2s; position:relative;}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:15%; right:15%; bottom:-5px; height:1.5px;
  background:linear-gradient(90deg, transparent, #C9A24B 30%, #C9A24B 70%, transparent);
  transform:scaleX(0); transition:transform .35s cubic-bezier(.4,0,.2,1); transform-origin:center;}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);}
.nav-links a:hover{color:var(--gold-light);}
.nav-links a.active-link{ color:var(--gold-light); }
/* Ten nav items + two CTAs crowd the awkward middle band (tablet / small laptop).
   Tighten spacing and type here so nothing overflows before the 860px collapse. */
@media (min-width:861px) and (max-width:1080px){
  .nav-links{gap:16px;}
  .nav-links a{font-size:12px;}
  .nav-links a.btn{padding:8px 14px !important;}
}
@media (max-width:860px){
  .nav-links a:not(.btn){display:none;}   /* keep CTA + lang switch on mobile */
  .nav-links{gap:14px;}
  .nav{padding:14px 18px;}
}

/* =====================================================
   01 — HERO / THE THRESHOLD
===================================================== */
.hero{
  /* raised above sibling sections so the fixed flying passport paints over them */
  z-index:6;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px 0 80px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 18% 8%, rgba(21,127,90,.28), transparent 60%),
    radial-gradient(900px 700px at 100% 90%, rgba(11,31,58,.7), transparent 55%),
    linear-gradient(160deg,#0a3025 0%, var(--palm) 45%, #071d16 100%);
}
.hero-lattice{position:absolute; top:0; left:0; z-index:0; opacity:.5; width:100%; height:180px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);}
/* minimal hero — only the bilingual tagline centred around the passport */
.hero-center{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%;}
.hero-tagline-ar{
  font-family:var(--ar); direction:rtl; font-weight:900; color:var(--paper);
  font-size:clamp(34px,5.4vw,62px); line-height:1.45; letter-spacing:0;
  max-width:22ch; margin:0 auto;
}
.hero-tagline-ar .foil{font-weight:900;}
.hero-tagline-en{
  font-family:var(--serif); font-weight:600; color:#AEB9AE;
  font-size:clamp(16px,1.9vw,24px); letter-spacing:.03em; margin-top:14px;
}
.hero-center .passport-stage{margin-top:52px;}

/* passport cover object */
.passport-stage{ display:flex; justify-content:center; }
.passport-sizer{ position:relative; width:330px; height:452px; }
.passport{
  width:100%; height:100%; border-radius:12px; position:relative;
  background:
    radial-gradient(120% 120% at 30% 12%, #10493a 0%, #0c3b2e 42%, #072a20 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(231,206,143,.14);
  transform:perspective(1600px) rotateY(-22deg) rotateX(6deg); transition:transform .6s ease;
  animation:floaty 7s ease-in-out infinite;
}
.passport:hover{transform:perspective(1600px) rotateY(-8deg) rotateX(2deg);}
@keyframes floaty{0%,100%{transform:perspective(1600px) rotateY(-22deg) rotateX(6deg) translateY(0);}50%{transform:perspective(1600px) rotateY(-18deg) rotateX(4deg) translateY(-14px);}}

/* ---- scroll-driven passport flight (hero → opening) ---- */
.passport.flying{
  position:fixed; top:0; left:0; margin:0; z-index:400;
  width:var(--pp-w,330px); height:var(--pp-h,452px);
  animation:none; transition:none; pointer-events:none; will-change:transform;
}
.passport.landed{ visibility:hidden; }
/* while a passport is in motion it is reparented to <body> and painted
   ABOVE everything — nav (50), gold dust (7), scroll progress (60) */
/* gold aura that ignites mid-flight */
.passport-aura{
  position:absolute; inset:-46%; border-radius:50%; pointer-events:none; opacity:0; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(231,206,143,.16), rgba(201,162,75,.06) 45%, transparent 72%);
  filter:blur(6px); transition:opacity .4s ease;
}
/* while the journey system runs, the destination book waits invisibly */
body.js-journey .open-book{ opacity:0; transition:opacity .2s ease; }
body.js-journey .open-stage.arrived .open-book{ opacity:1; }

/* gold-foil sheen sweep on passport materials */
i.sheen{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 36%, rgba(231,206,143,.035) 46%, rgba(255,244,214,.08) 50%, rgba(231,206,143,.035) 54%, transparent 64%);
  background-size:340% 340%; mix-blend-mode:screen;
  animation:sheenMove 12s ease-in-out infinite;
}
@keyframes sheenMove{0%,12%{background-position:120% 120%;}55%,100%{background-position:-30% -30%;}}
.passport::before{ content:""; position:absolute; inset:14px; border-radius:6px; border:1px solid rgba(231,206,143,.32);
  box-shadow:inset 0 0 0 3px rgba(7,42,32,.5);}
.passport-inner{position:absolute; inset:14px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:34px 26px; text-align:center;}
.passport-issuer{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);}
.passport-seal{width:120px; height:120px;}
.passport-title{font-family:var(--ar); direction:rtl; font-size:19px; font-weight:700; color:var(--gold-light); line-height:1.5;}
.passport-title small{display:block; font-family:var(--serif); font-size:13px; letter-spacing:.14em; color:var(--paper); margin-top:6px; direction:ltr;}
.passport-foot{font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.passport-chip{width:34px; height:26px; border-radius:4px; margin:0 auto;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); opacity:.85;}

/* seal draw-on animation */
.seal-strike{ transform-origin:center; }
.seal-ring{ stroke-dasharray:420; stroke-dashoffset:420; animation:draw 2.4s ease forwards .3s;}
.seal-star{ opacity:0; animation:emboss 1s ease forwards 1.6s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes emboss{from{opacity:0; transform:scale(.6);}to{opacity:1; transform:scale(1);}}

.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; text-align:center; color:var(--muted); font-size:10px; letter-spacing:.24em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:38px; margin:10px auto 0; background:linear-gradient(var(--gold),transparent); animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6);}50%{opacity:1; transform:scaleY(1);}}

@media (max-width:900px){
  .hero-center .passport-stage{margin-top:38px;}
  .passport-sizer{width:270px; height:372px;}
}

/* =====================================================
   02 — PREMISE
===================================================== */
.premise{padding:130px 0; text-align:center;
  background:linear-gradient(180deg,var(--palm-shadow), #0a3025);}
.premise .big{
  font-family:var(--serif); font-weight:700; font-size:clamp(28px,4.6vw,54px); line-height:1.18; max-width:20ch; margin:0 auto;
}
.premise .big .ar{ font-family:var(--ar); direction:rtl; display:block; margin-top:16px; font-size:clamp(24px,3.6vw,40px); color:var(--gold-light); }
.premise .caption{margin-top:34px; color:var(--muted); font-size:14px; letter-spacing:.16em; text-transform:uppercase;}

/* =====================================================
   02.5 — THE OPENING (the passport unlocks the world)
===================================================== */
.opening{padding:110px 0 130px; text-align:center; overflow:hidden;
  background:
    radial-gradient(620px 400px at 50% 60%, rgba(228,205,138,.10), transparent 68%),
    linear-gradient(180deg,#071d16, var(--palm-shadow));}
.opening .section-head{margin-bottom:52px;}
/* merged scene — the stage pins; text crossfades opening -> journey */
.ohead-journey,.oh-journey{display:none;}
.flip-book{display:none;}
.flip-meter:empty{display:none;}
body.js-flip .opening{padding:0; height:780vh; overflow:clip;} /* clip (not hidden) keeps position:sticky alive — taller to give the cover-open dwell more room */
body.js-flip .opening-pin{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  padding:84px 0 26px; transition:opacity .45s ease;
}
body.js-flip .opening-pin.departing{opacity:0;}
body.js-flip .opening-pin .ohead-wrap{position:relative; width:100%;}
body.js-flip .ohead{transition:opacity .55s ease, transform .55s ease;}
body.js-flip .ohead-journey{display:block; position:absolute; left:0; right:0; top:50%;
  transform:translateY(calc(-50% + 14px)); opacity:0;}
body.js-flip .opening-pin.reading .ohead-open{opacity:0; transform:translateY(-14px);}
body.js-flip .opening-pin.reading .ohead-journey{opacity:1; transform:translateY(-50%);}
body.js-flip .open-hint{position:relative;}
body.js-flip .open-hint span{transition:opacity .5s ease;}
body.js-flip .oh-journey{display:block; position:absolute; inset:0; opacity:0;}
body.js-flip .opening-pin.reading .oh-open{opacity:0;}
body.js-flip .opening-pin.reading .oh-journey{opacity:1;}
body.js-flip .opening .section-head{margin-bottom:0;}
body.js-flip .open-stage{min-height:0; margin-top:30px;}
.open-stage{ perspective:1700px; perspective-origin:50% 44%; display:flex; justify-content:center; align-items:center; min-height:480px;}
/* in journey mode the book carries its own perspective() so position:fixed
   travel is not trapped by an ancestor perspective containing-block */
body.js-journey .open-stage{perspective:none;}
.open-book{ position:relative; width:310px; height:430px; transform-style:preserve-3d;
  transform:perspective(1700px) rotateX(4deg) rotateY(-15deg); animation:openFloat 8s ease-in-out infinite;}
@keyframes openFloat{0%,100%{transform:perspective(1700px) rotateX(4deg) rotateY(-15deg) translateY(0);}50%{transform:perspective(1700px) rotateX(3deg) rotateY(-12deg) translateY(-12px);}}
/* ---- handoff: opened book cross-fades into the flip spread, in place ---- */
body.js-flip .flip-stage{
  --pw:min(300px,42vw); --ph:min(calc(var(--pw)*1.36), 52vh);
  position:relative; width:calc(var(--pw)*2); height:var(--ph);
}
body.js-flip .flip-book{display:block; width:100%; height:100%;}
body.js-flip .open-book{
  position:absolute; left:0; top:0; width:var(--pw); height:var(--ph);
  transform:rotateX(9deg); animation:none;
}
.open-book.handed{visibility:hidden;}
body.js-journey .flip-book{opacity:0; transition:opacity .2s ease;}
body.js-journey .flip-book.arrived{opacity:1;}
/* light spill behind the opening book */
.open-spill{position:absolute; inset:-70% -90%; opacity:0; transform:translateZ(-70px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(228,205,138,.34), rgba(200,162,76,.12) 46%, transparent 72%);
  transition:opacity 1.4s ease .5s;}
.open-stage.opened .open-spill{opacity:1;}
/* interior · the new world page */
.open-interior{position:absolute; top:6px; bottom:6px; left:6px; right:0; border-radius:8px 0 0 8px; overflow:hidden; background:#FAF8F1;
  border:1px solid var(--gold); box-shadow:0 30px 80px rgba(0,0,0,.5);}
.open-interior::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.06;}
.oi-frame{position:absolute; inset:9px; border:1px solid rgba(201,162,75,.4); border-radius:5px 0 0 5px;}
.oi-circle{position:absolute; left:50%; top:58%; border-radius:50%; border:1px solid rgba(200,162,76,.24); transform:translate(-50%,-50%);}
.oi-seal{position:absolute; left:50%; top:33%; width:70px; transform:translateX(-50%);}
.oi-skyline{position:absolute; left:14%; right:14%; top:58%; height:44px; margin-top:-44px; display:flex; align-items:flex-end; justify-content:center; gap:7px;}
.oi-skyline i{display:block; background:rgba(156,122,50,.32);}
.oi-hr{position:absolute; left:9%; right:9%; top:58%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.oi-head{position:absolute; left:0; right:0; top:10%; text-align:center; font-family:var(--ar);}
.oi-head span{display:block; font-size:clamp(13px,1.5vw,17px); font-weight:700; color:#0C4A2E; letter-spacing:.02em;}
.oi-label{position:absolute; left:0; right:0; top:64%; text-align:center;}
.oi-world{display:block; font-family:var(--ar); font-size:clamp(17px,2vw,23px); font-weight:900;
  background:linear-gradient(100deg,#8A6A2E 10%,#C9A24B 42%,#8A6A2E 75%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#8A6A2E;}
.oi-label .en{margin-top:6px;}
.oi-label .ar{font-family:var(--ar); font-size:15px; font-weight:700; color:#0C4A2E;}
.oi-label .en{font-family:Menlo,Consolas,monospace; font-size:7px; letter-spacing:.32em; color:#9C7A32; margin-top:5px;}
/* cover · hinged on the right (opens the Arabic way) */
.open-cover{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:right center;
  transition:transform 1.9s cubic-bezier(.22,1,.32,1) .55s;}
.open-stage.opened .open-cover{transform:rotateY(176deg);}
.open-cover{transition-duration:.35s !important;}
.cover-face{position:absolute; inset:0; border-radius:10px 0 0 10px; backface-visibility:hidden; transform:translateZ(1px); overflow:hidden;
  background:radial-gradient(120% 120% at 30% 12%, #10493a 0%, #0c3b2e 42%, #072a20 100%);
  box-shadow:inset 0 0 0 1px rgba(231,206,143,.14), 0 26px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:34px 24px 26px;}
.cover-face::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.4; mix-blend-mode:overlay;}
.cover-face::after{content:""; position:absolute; inset:14px; border:1px solid rgba(231,206,143,.32); border-radius:6px;
  box-shadow:inset 0 0 0 3px rgba(7,42,32,.5); pointer-events:none;}
.cover-face>*{position:relative; z-index:1;}
.cover-back{position:absolute; inset:0; border-radius:10px 0 0 10px; transform:rotateY(180deg) translateZ(1px); backface-visibility:hidden; overflow:hidden;
  background:#06301D; box-shadow:inset 0 0 0 1px rgba(231,206,143,.14);}
.cover-back .seal-faint{position:absolute; left:50%; top:50%; width:120px; transform:translate(-50%,-50%);}
.open-hint{margin-top:32px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);}
@media (max-width:520px){ .open-book{width:255px; height:354px;} .open-stage{min-height:410px;} }

/* =====================================================
   03 — THE JOURNEY · PASSPORT PAGE-FLIP
===================================================== */
.section-head{text-align:center; margin-bottom:64px;}
.section-head .lede{margin-left:auto; margin-right:auto; text-align:center;}
body.js-flip .journey-fallback{display:none;}
.flip-stage{perspective:2000px; perspective-origin:50% 40%;}
.flip-book{
  position:relative;
  transform-style:preserve-3d; transform:rotateX(9deg);
}
/* spine */
.flip-book::after{content:""; position:absolute; left:50%; top:2px; bottom:2px; width:2px; margin-left:-1px; z-index:45;
  background:linear-gradient(180deg,transparent, rgba(138,106,46,.55) 12%, rgba(138,106,46,.55) 88%, transparent);}
/* paper page material (shared) */
.pg{
  background:
    radial-gradient(130% 100% at 50% 0%, #FBF9F3 0%, #F7F3E7 58%, #F1EBDA 100%);
  border:1px solid rgba(201,162,75,.5); overflow:hidden; position:relative;
}
.pg::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.07; pointer-events:none;}
/* engraved double frame with corner accents */
.pg .pg-frame{position:absolute; inset:8px; border:1px solid rgba(156,122,50,.5); pointer-events:none; z-index:1;}
.pg .pg-frame::before{content:""; position:absolute; inset:3px; border:1px solid rgba(156,122,50,.22);}
.pg .pg-frame::after{content:""; position:absolute; inset:-2px; pointer-events:none;
  background:
    radial-gradient(circle 3px at 0 0, rgba(138,106,46,.65) 0 1.6px, transparent 2.4px),
    radial-gradient(circle 3px at 100% 0, rgba(138,106,46,.65) 0 1.6px, transparent 2.4px),
    radial-gradient(circle 3px at 0 100%, rgba(138,106,46,.65) 0 1.6px, transparent 2.4px),
    radial-gradient(circle 3px at 100% 100%, rgba(138,106,46,.65) 0 1.6px, transparent 2.4px);}
/* fine guilloche wave band across the base of every page */
.pg::after{content:""; position:absolute; left:10px; right:10px; bottom:12px; height:26px; pointer-events:none; opacity:.16;
  background:
    repeating-linear-gradient(90deg, rgba(12,74,46,.5) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(88deg, rgba(156,122,50,.55) 0 1px, transparent 1px 9px);
  -webkit-mask:radial-gradient(60% 130% at 50% 50%, #000 30%, transparent 100%);
          mask:radial-gradient(60% 130% at 50% 50%, #000 30%, transparent 100%);}
/* big faint watermark seal behind the content */
.pg-wm{position:absolute; left:50%; top:50%; width:74%; transform:translate(-50%,-50%) rotate(-4deg);
  opacity:.05; pointer-events:none;}
/* static base pages under the leaves */
.flip-base{position:absolute; top:0; height:100%; width:var(--pw); z-index:1;}
.flip-base-left{left:0; border-radius:8px 0 0 8px; box-shadow:-16px 24px 60px rgba(0,0,0,.45);}
.flip-base-right{left:var(--pw); border-radius:0 8px 8px 0; box-shadow:16px 24px 60px rgba(0,0,0,.45);}
/* turning leaves — sit on the LEFT half, hinge at the spine, flip to the right (Arabic reading order) */
.leaf{
  position:absolute; left:0; top:0; width:var(--pw); height:100%; z-index:20;
  transform-style:preserve-3d; transform-origin:right center; will-change:transform;
}
.leaf-face{position:absolute; inset:0; backface-visibility:hidden;}
.leaf-front{border-radius:8px 0 0 8px; transform:translateZ(.6px);}
.leaf-back{border-radius:8px 0 0 8px; transform:rotateY(180deg) translateZ(.6px); background:#F4EFE2;}
/* stamp-page content */
.pg-inner{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:7% 9% 6%; color:var(--paper-ink);}
.pg-top{width:100%; display:flex; justify-content:space-between; font-family:Menlo,Consolas,monospace; font-size:8px; letter-spacing:.24em; color:#9C7A32;}
.pg-stagenum{font-family:var(--serif); font-size:12px; letter-spacing:.22em; color:#0C4A2E; margin-top:5%;}
.pg-stamp{width:48%; max-width:140px; margin:3% 0 2%; transform:rotate(-6deg);
  filter:drop-shadow(0 1px 0 rgba(138,106,46,.25)); mix-blend-mode:multiply;}
.pg-stamp.st1{transform:rotate(5deg);} .pg-stamp.st3{transform:rotate(-9deg);} .pg-stamp.st4{transform:rotate(4deg); width:44%; max-width:130px;}
.pg-stamp.st-advisory{width:44%; max-width:130px;}
.pg-name{font-family:var(--serif); font-weight:700; font-size:clamp(15px,1.7vw,21px); color:#1d3327; line-height:1.2;}
.pg-name .ar{display:block; font-family:var(--ar); direction:rtl; font-weight:700; font-size:clamp(13px,1.5vw,18px); color:#8A6A2E; margin-top:4px;}
.pg-desc{font-size:clamp(10px,1.05vw,12.5px); line-height:1.6; color:#4a5a4e; margin-top:4%; max-width:30ch;}
.pg-tier{
  margin-top:auto; display:inline-block; transform:rotate(-4deg);
  border:2px dashed rgba(12,74,46,.55); color:#0C4A2E; border-radius:3px;
  font-family:Menlo,Consolas,monospace; font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  padding:6px 14px; font-weight:700;
}
.pg-mrz{width:100%; margin-top:6%; padding-top:7px; border-top:1px solid rgba(156,122,50,.4);
  font-family:Menlo,Consolas,monospace; font-size:8px; letter-spacing:.14em; color:#9C7A32; white-space:nowrap; overflow:hidden;}
/* verso of a turned leaf — faint stamped imprint */
.pg-verso{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;}
.pg-verso .imprint{width:44%; opacity:.3; transform:rotate(6deg) scaleX(-1);}
.pg-verso .lbl{font-family:Menlo,Consolas,monospace; font-size:8.5px; letter-spacing:.3em; color:#9C7A32; transform:rotate(6deg);}
/* record page (right base, visible before pages land on it) */
/* —— polycarbonate bio data page — solid laminate, not paper —— */
.pg-bio{background:linear-gradient(160deg,#F2F1E8 0%, #E9EADF 55%, #E2E4D8 100%);}
/* rotate the whole data card 90° clockwise — read with the book turned */
.pg-bio .bio{position:absolute; left:50%; top:50%; width:var(--ph); height:var(--pw);
  transform:translate(-50%,-50%) rotate(90deg); padding:5% 5% 4%;}
.pg-bio::after{display:none;}
.bio{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:7% 7% 5%; text-align:left;}
.bio-head{display:flex; flex-direction:column; gap:3px; border-bottom:1.5px solid rgba(12,74,46,.45); padding-bottom:6px;}
.bio-head .ar{font-family:var(--ar); font-size:clamp(9px,1vw,12px); font-weight:700; color:#0C4A2E; direction:rtl;}
.bio-head .en{font-family:Menlo,Consolas,monospace; font-size:clamp(5.5px,.6vw,7px); letter-spacing:.26em; color:#51604f;}
.bio-body{display:flex; gap:6%; align-items:flex-start; margin-top:6%; flex:1; min-height:0;}
.bio-photo{width:26%; flex:none; box-shadow:0 1px 4px rgba(0,0,0,.18);}
.bio-fields{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(4px,1.2vw,10px) 5%; align-content:start; min-width:0;}
.bf b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bf label{display:block; font-family:Menlo,Consolas,monospace; font-size:clamp(4.5px,.55vw,6.5px); letter-spacing:.14em; color:#6a755f;}
.bf b{display:block; font-family:var(--serif); font-weight:700; font-size:clamp(8px,.95vw,11.5px); color:#173427; margin-top:2px; letter-spacing:.04em;}
.bf-wide{grid-column:1/-1;}
.bf-name{white-space:normal !important; line-height:1.5;}
.bf-name span{font-family:var(--ar); font-weight:700;}
.bio-ghost{width:11%; flex:none; align-self:flex-end; opacity:.28; filter:grayscale(1);}
.bio-mrz{margin-top:auto; padding-top:6px; border-top:1px solid rgba(12,74,46,.3);
  font-family:Menlo,Consolas,monospace; font-size:clamp(5px,.62vw,7.5px); letter-spacing:.18em;
  color:#3c4a3e; line-height:1.9; white-space:nowrap; overflow:hidden;}
.bio-mrz span{display:block;}
/* laminate gloss + holographic security overlay */
.bio-lam{position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 42%, rgba(255,255,255,.08) 50%, transparent 58%),
    linear-gradient(245deg, transparent 62%, rgba(255,255,255,.2) 74%, transparent 84%),
    radial-gradient(70% 40% at 78% 22%,
      rgba(140,190,255,.10), rgba(190,140,255,.08) 40%, rgba(140,255,190,.07) 70%, transparent 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 18px rgba(255,255,255,.28);}
/* final page (left base, revealed after the last flip) */
/* —— intro page · six empty stamp slots waiting to be filled —— */
.pg-intro{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; padding:8% 9% 7%;}
.pi-title{font-family:var(--ar); font-size:clamp(13px,1.55vw,19px); font-weight:700; color:#0C4A2E; line-height:1.7;}
.pi-title b{background:linear-gradient(100deg,#8A6A2E 10%,#C9A24B 45%,#8A6A2E 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#8A6A2E;}
.pi-sub{font-family:Menlo,Consolas,monospace; font-size:clamp(5.5px,.65vw,8px); letter-spacing:.26em; color:#9C7A32; margin-top:6px;}
.pi-grid{flex:1; width:100%; margin-top:7%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); gap:6% 8%; align-items:center;}
.pi-slot{position:relative; height:100%; min-height:0; border:1.5px dashed rgba(138,106,46,.45); border-radius:6px;
  display:flex; align-items:center; justify-content:center;}
.pi-slot i{position:absolute; right:6px; bottom:3px; font-family:var(--serif); font-style:normal; font-size:9px; letter-spacing:.12em; color:#9C7A32; opacity:.8;}
.pi-ghost{display:block; width:78%; opacity:.13; filter:grayscale(1);}
.pi-ghost svg{display:block;}

.pg-final{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10%;}
.pg-final .ar{font-family:var(--ar); font-size:clamp(16px,1.9vw,23px); font-weight:900; color:#0C4A2E; line-height:1.6;}
.pg-final .ar2{font-family:var(--ar); font-size:clamp(14px,1.6vw,19px); font-weight:700; color:#8A6A2E; margin-top:8px;}
.pg-final .ar2 b{font-family:var(--serif); letter-spacing:.02em;
  background:linear-gradient(100deg,#8A6A2E 10%,#C9A24B 45%,#8A6A2E 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#8A6A2E;}
.pg-final .seal-w{width:44%; margin-bottom:8%; position:relative;}
/* golden rays behind the seal */
.pg-final .rays{position:absolute; left:50%; top:34%; width:56%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(201,162,75,.18) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 26%, #000 34%, transparent 72%);
          mask:radial-gradient(circle, transparent 26%, #000 34%, transparent 72%);
  opacity:0; pointer-events:none;}
/* confetti specks */
.celebrate{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.celebrate .cf{position:absolute; top:-6%; width:5px; height:9px; border-radius:1px; opacity:0;
  background:linear-gradient(160deg,#E7CE8F,#C9A24B);}
.celebrate .cf1{background:linear-gradient(160deg,#F3E3B8,#C9A24B); width:4px; height:7px;}
.celebrate .cf2{background:#0C4A2E; width:4px; height:4px; border-radius:50%;}
.celebrate .cf3{background:linear-gradient(160deg,#fff,#E7CE8F); width:3px; height:8px;}
.celebrate .cf4{background:#C9A24B; width:5px; height:5px; border-radius:50%;}
.celebrate .cf5{background:linear-gradient(160deg,#E7CE8F,#8A6A2E); width:4px; height:10px;}
.celebrate .cf6{background:#9C7A32; width:3px; height:6px;}
/* everything comes alive once the sixth page turns */
.flip-book.done .pg-final .rays{opacity:1; animation:raySpin 14s linear infinite;}
.flip-book.done .pg-final .seal-w{animation:sealPop .8s cubic-bezier(.2,1.6,.4,1) both;}
.flip-book.done .celebrate .cf{animation:cfFall 3.4s linear infinite;}
@keyframes raySpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes sealPop{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}
@keyframes cfFall{
  0%{transform:translateY(0) rotate(0deg); opacity:0;}
  8%{opacity:.9;}
  100%{transform:translateY(440px) rotate(320deg); opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .flip-book.done .pg-final .rays, .flip-book.done .celebrate .cf, .flip-book.done .pg-final .seal-w{animation:none;}
}
/* meter + hint */
.flip-meter{display:flex; gap:9px; margin-top:30px; align-items:center;}
.flip-meter .fm{width:9px; height:9px; border-radius:50%; border:1px solid var(--edge-strong); transition:.35s;}
.flip-meter .fm.on{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); border-color:var(--gold); box-shadow:0 0 10px rgba(201,162,75,.5);}
.flip-meter .fm-count{font-family:Menlo,Consolas,monospace; font-size:10px; letter-spacing:.2em; color:var(--gold-light); margin-left:10px; min-width:64px; text-align:left;}
@media (max-width:560px){ body.js-flip .flip-stage{--pw:44vw;} .pg-desc{display:none;} }

/* fallback grid (reduced-motion / no-JS) */
.journey-fallback{padding:110px 0;}
.journey-path{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.stage{
  position:relative; background:rgba(8,43,33,.55); border-radius:6px; padding:34px 26px 30px;
  border:1px solid var(--edge); transition:.35s ease; overflow:hidden;
}
.stage::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.35; mix-blend-mode:overlay; pointer-events:none;}
.stage:hover{border-color:var(--gold); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.4);}
.stage-num{font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.1em;}
.stage-stamp{width:74px; height:74px; margin:16px 0 20px;}
.stage h3{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:4px;}
.stage h3 .ar{font-family:var(--ar); direction:rtl; display:block; font-size:16px; color:var(--gold-light); font-weight:600; margin-top:2px;}
.stage p{font-size:13.5px; color:#b8c8be; margin-top:10px;}
.stage .tier{margin-top:16px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600;}
@media (max-width:820px){ .journey-path{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .journey-path{grid-template-columns:1fr;} }

/* =====================================================
   04 — TIERS · THE LINEUP (Apple-style, Option A metal emblems)
===================================================== */
.tiers{padding:120px 0 150px; text-align:center; overflow:hidden;
  background:
    radial-gradient(760px 420px at 50% 18%, rgba(201,162,75,.10), transparent 62%),
    linear-gradient(180deg,var(--palm-shadow),#071d16);}
.tier-lineup{display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(14px,3vw,42px); margin-top:110px; perspective:1800px;}
.tp-slot{position:relative; display:flex; flex-direction:column; align-items:center;}
.tp-float{position:relative; width:clamp(170px,19.5vw,258px); aspect-ratio:330/452;
  transform-origin:50% 100%; transition:transform .55s cubic-bezier(.22,1,.32,1);}
/* the four passports rest on an invisible arc — centre pair raised, edges tilted outward */
.tp-slot:nth-child(1){transform:translateY(2px);}
.tp-slot:nth-child(2), .tp-slot:nth-child(3){transform:translateY(-36px);}
.tp-slot:nth-child(4){transform:translateY(2px);}
.tp-slot:nth-child(1) .tp-float{transform:rotate(-7deg);}
.tp-slot:nth-child(2) .tp-float{transform:rotate(-2.5deg);}
.tp-slot:nth-child(3) .tp-float{transform:rotate(2.5deg);}
.tp-slot:nth-child(4) .tp-float{transform:rotate(7deg);}
.tier-passport{
  position:absolute; inset:0; border-radius:9px; overflow:hidden; transform-origin:0% 50%;
  background:radial-gradient(120% 120% at 30% 12%, #10493a 0%, #0c3b2e 42%, #072a20 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(231,206,143,.14);
  transition:transform .55s cubic-bezier(.22,1,.32,1), opacity .35s ease, box-shadow .55s ease;
}
.tier-passport::before{content:""; position:absolute; inset:9px; border-radius:5px;
  border:1px solid var(--m2,rgba(231,206,143,.32)); opacity:.55;
  box-shadow:inset 0 0 0 2px rgba(7,42,32,.5);}
.tp-slot:hover .tier-passport{transform:perspective(750px) rotateY(-44deg);
  box-shadow:26px 30px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(231,206,143,.24);}
/* option 3 — gilded page-edge foil in the tier's metal */
.tp-edges{position:absolute; top:7px; bottom:7px; right:-7px; width:14px; border-radius:0 6px 6px 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 34%, rgba(255,255,255,.16) 62%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.4) 100%),
    repeating-linear-gradient(180deg, var(--m1,#E7CE8F) 0 1.6px, var(--m3,#8A6A2E) 1.6px 3.2px);
  box-shadow:3px 0 12px rgba(0,0,0,.45); opacity:.95;}
/* option 5 — tinted inner page, revealed as the cover peeks open on hover */
.tp-inside{position:absolute; inset:4px 0 4px 6px; border-radius:0 7px 7px 0;
  background:linear-gradient(160deg,#123a2d,#0a281e);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--m1,#E7CE8F) 34%, #10362a),
    color-mix(in srgb, var(--m3,#8A6A2E) 38%, #08231a));
  box-shadow:inset 0 0 0 1px rgba(231,206,143,.14), inset -14px 0 26px rgba(0,0,0,.35);}
.tp-inside::after{content:""; position:absolute; inset:10% 12%; opacity:.28; border-radius:6px;
  border:1px solid var(--m2,#C9A24B);
  background:radial-gradient(60% 60% at 50% 40%, var(--m2,#C9A24B), transparent 70%);}
/* option 6 — ambient floor glow in the tier's metal */
.tp-float::before{content:""; position:absolute; left:-18%; right:-18%; bottom:-46px; height:58px; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, var(--m2,#C9A24B), transparent 72%);
  opacity:.2; filter:blur(10px); pointer-events:none;}
.tp-slot:hover .tp-float::before{opacity:.34;}
/* soft floor shadow / lineup pedestal */
.tp-float::after{content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:18px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), transparent 72%);}
/* passport face content (miniature) */
.tp-inner{position:absolute; inset:9px; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:13% 8% 11%; text-align:center;}
.tp-issuer{font-size:6.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);}
.tp-seal{width:46%;}
.tp-title{font-family:var(--ar); direction:rtl; font-size:clamp(8px,1vw,11px); font-weight:700; color:var(--m1,var(--gold-light)); line-height:1.5;}
.tp-title small{display:block; font-family:var(--serif); font-size:clamp(6px,.72vw,8px); letter-spacing:.14em; color:var(--paper); margin-top:3px; direction:ltr;}
.tp-foot{font-size:5.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--m2,var(--gold)); opacity:.85;}
.tp-chip{width:18px; height:14px; border-radius:2.5px;
  background:linear-gradient(135deg,var(--m1,#E7CE8F),var(--m3,#8A6A2E)); opacity:.9;}
/* the Ambassador — crowned with a glow (24k) */
.tp-slot--ambassador .tier-passport{
  background:radial-gradient(120% 120% at 30% 12%, #0d2d21 0%, #081f16 46%, #04120c 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 84px rgba(231,206,143,.28), inset 0 0 0 1.5px rgba(255,240,190,.45);}
.tp-slot--ambassador .tier-passport::before{border-color:rgba(255,240,190,.6); opacity:.85;}
.tp-slot--ambassador .tp-float::before{opacity:.32;}
/* the 24K corner sash — the ambassador's extra mark */
.tp-sash{position:absolute; top:16px; right:-36px; width:130px; transform:rotate(45deg); text-align:center;
  font-family:var(--sans); font-size:8px; font-weight:700; letter-spacing:.34em; color:#31240a;
  padding:5px 0 5px .34em; background:linear-gradient(135deg,#FFF0BE,#C9A24B 55%,#8A6A2E);
  box-shadow:0 4px 10px rgba(0,0,0,.4);}
.tp-slot--ambassador::before{content:""; position:absolute; left:50%; top:34%; width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(231,206,143,.16), transparent 66%);}
/* empty reserved slot until the voyaging passport docks (journey mode only) */
.tp-outline{position:absolute; inset:0; border-radius:9px; border:1.5px dashed rgba(201,162,75,.5);
  display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .35s ease;
  background:rgba(201,162,75,.03);}
.tp-outline span{font-family:Menlo,Consolas,monospace; font-size:8.5px; letter-spacing:.26em; color:var(--gold); opacity:.85; writing-mode:vertical-rl; text-orientation:mixed;}
body.js-journey .tp-slot--ambassador .tp-outline{display:flex; opacity:1;}
body.js-journey .tp-slot--ambassador .tier-passport,
body.js-journey .tp-slot--ambassador .tp-edges,
body.js-journey .tp-slot--ambassador .tp-inside{opacity:0; transition:opacity .35s ease;}
body.js-journey .tier-lineup.docked .tp-slot--ambassador .tp-outline{opacity:0;}
body.js-journey .tier-lineup.docked .tp-slot--ambassador .tier-passport,
body.js-journey .tier-lineup.docked .tp-slot--ambassador .tp-edges,
body.js-journey .tier-lineup.docked .tp-slot--ambassador .tp-inside{opacity:1;}
/* labels under each passport — like Apple\'s colour captions */
.tp-num{margin-top:38px; font-family:Menlo,Consolas,monospace; font-size:10px; letter-spacing:.3em; color:var(--muted);}
.tp-name{font-family:var(--serif); font-size:clamp(15px,1.6vw,20px); font-weight:700; margin-top:8px; color:var(--paper);}
.tp-name .ar{display:block; font-family:var(--ar); direction:rtl; font-weight:700; font-size:clamp(12px,1.2vw,15px); color:var(--gold-light); margin-top:2px;}
.tp-metal{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#cddbd2;
  border:1px solid var(--edge); border-radius:20px; padding:5px 14px;}
.tp-metal i{width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--m1),var(--m3)); box-shadow:0 0 8px var(--m2);}
.tiers .lineup-caption{margin-top:56px; color:#cfdcd3; font-family:var(--ar);
  font-size:clamp(17px,2vw,23px); font-weight:700; letter-spacing:.04em;}
@media (max-width:760px){
  .tier-lineup{flex-wrap:wrap; align-items:flex-start; gap:34px 20px; margin-top:70px;}
  .tp-slot{flex:0 0 40%; transform:none !important;}
  .tp-slot .tp-float{transform:none; width:min(170px,40vw);}
}

/* =====================================================
   05 — CREDENTIAL
===================================================== */
.credential-sec{padding:120px 0; background:linear-gradient(180deg,#071d16,var(--palm-shadow));}
.cred-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.cred-card{
  background:var(--palm); padding:6px; border-radius:6px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.cred-inner{border:1px solid var(--edge-strong); padding:40px 40px 32px; text-align:center; position:relative;}
.cred-inner::before{content:""; position:absolute; inset:0; background-image:var(--grain); opacity:.4; mix-blend-mode:overlay; pointer-events:none;}
.cred-issuer{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:20px;}
.cred-title-ar{font-family:var(--ar); direction:rtl; font-size:24px; font-weight:700; margin-bottom:4px;}
.cred-title-en{font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.08em; margin-bottom:20px;}
.cred-div{width:60px; height:1px; background:var(--gold); margin:0 auto 20px;}
.cred-lbl{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#8FA396; margin-bottom:4px;}
.cred-name{font-family:var(--serif); font-size:19px; color:var(--gold-light); letter-spacing:.04em; margin-bottom:20px;}
.cred-id{display:flex; justify-content:space-between; gap:10px; font-family:Menlo,Consolas,monospace; font-size:9px; letter-spacing:.02em; color:var(--gold-light); padding:9px 12px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); margin-bottom:18px;}
.cred-qr{width:78px; height:78px; margin:0 auto 16px;}
.cred-trust{font-size:11px; line-height:1.7; color:#4a3d22; }
.cred-feature{list-style:none; margin-top:32px;}
.cred-feature li{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--edge);}
.cred-feature li:last-child{border-bottom:none;}
.cred-feature .ic{flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--edge-strong); display:flex; align-items:center; justify-content:center; color:var(--gold-light);}
.cred-feature .ic svg{width:20px; height:20px;}
.cred-feature h4{font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:2px;}
.cred-feature h4 .ar{font-family:var(--ar); direction:rtl; font-size:13px; color:var(--gold-light); font-weight:600; margin-inline-start:8px;}
.cred-feature p{font-size:13px; color:#b8c8be;}
@media (max-width:860px){ .cred-grid{grid-template-columns:1fr; gap:44px;} }

/* =====================================================
   06 — AUTHORITY
===================================================== */
.authority{padding:110px 0; text-align:center; background:var(--palm-shadow);}
.auth-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:44px 0 0;}
.auth-badge{border:1px solid var(--edge-strong); border-radius:40px; padding:12px 26px; font-size:13px; letter-spacing:.04em; color:#cddbd2; background:rgba(12,59,46,.5);}
.auth-badge b{color:var(--gold-light); font-weight:600;}
.auth-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px;}
.stat{padding:26px 16px; border-top:1px solid var(--edge);}
.stat .num{font-family:var(--serif); font-size:clamp(30px,4vw,46px); color:var(--gold-light); font-weight:700;}
.stat .lbl{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px;}
.stat .ar{font-family:var(--ar-body); direction:rtl; display:block; color:#8FA396; font-size:11px; margin-top:2px;}
@media (max-width:720px){ .auth-stats{grid-template-columns:1fr 1fr;} }

/* =====================================================
   07 — ORGANIZATIONS
===================================================== */
.orgs{padding:120px 0; background:linear-gradient(180deg,var(--palm-shadow),var(--palm));}
.org-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center;}
.org-points{list-style:none; margin-top:30px;}
.org-points li{display:flex; gap:14px; padding:12px 0; font-size:14.5px; color:#cddbd2;}
.org-points .tick{color:var(--emerald); flex:0 0 auto; font-weight:700;}
.hrdf{margin-top:28px; padding:20px 24px; border-radius:6px; background:rgba(21,127,90,.12); border:1px solid rgba(21,127,90,.4);}
.hrdf b{color:var(--gold-light);}
.hrdf .ar{font-family:var(--ar-body); direction:rtl; display:block; color:#b8c8be; margin-top:6px; font-size:13px;}
/* dashboard mock */
.dash{background:rgba(8,43,33,.7); border:1px solid var(--edge); border-radius:10px; padding:24px; box-shadow:0 30px 70px rgba(0,0,0,.4);}
.dash-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.dash-top h4{font-family:var(--serif); font-size:16px;}
.dash-top .pill{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); border:1px solid rgba(21,127,90,.5); border-radius:20px; padding:4px 12px;}
.dash-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--edge);}
.dash-av{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:700; color:#221803; font-size:13px;}
.dash-row .nm{flex:1; font-size:13px;}
.dash-row .nm small{display:block; color:var(--muted); font-size:11px;}
.dash-bar{flex:0 0 120px; height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden;}
.dash-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--emerald),var(--gold)); border-radius:4px;}
.dash-pct{flex:0 0 40px; text-align:right; font-size:12px; color:var(--gold-light); font-family:Menlo,monospace;}
@media (max-width:860px){ .org-grid{grid-template-columns:1fr; gap:40px;} }

/* =====================================================
   08 — FOUNDING 100
===================================================== */
.founding{padding:120px 0; text-align:center;
  background:
    radial-gradient(700px 400px at 50% 0, rgba(201,162,75,.14), transparent 60%),
    linear-gradient(180deg,var(--palm),#071d16);}
.founding-counter{
  display:inline-flex; align-items:center; gap:14px; margin:0 auto 30px;
  border:1px solid var(--edge-strong); border-radius:40px; padding:10px 24px;
  font-size:13px; color:var(--gold-light); letter-spacing:.04em;
}
.founding-counter .num{font-family:var(--serif); font-weight:700; font-size:18px;}
.founding-counter .dot{width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 10px var(--emerald); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.founding-perks{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; text-align:left;}
.perk{padding:28px 24px; border-radius:6px; background:rgba(8,43,33,.55); border:1px solid var(--edge);}
.perk .n{font-family:var(--serif); color:var(--gold); font-size:14px;}
.perk h4{font-family:var(--serif); font-size:18px; margin:12px 0 6px;}
.perk h4 .ar{font-family:var(--ar); direction:rtl; display:block; font-size:14px; color:var(--gold-light); font-weight:600;}
.perk p{font-size:13px; color:#b8c8be;}
@media (max-width:720px){ .founding-perks{grid-template-columns:1fr;} }

/* =====================================================
   09 — PRICING LADDER
===================================================== */
.pricing{padding:120px 0; background:linear-gradient(180deg,#071d16,var(--palm-shadow));}
.price-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:56px; align-items:stretch;}
.price-card{ display:flex; flex-direction:column; padding:30px 22px; border-radius:6px; background:rgba(8,43,33,.5); border:1px solid var(--edge); transition:.3s; position:relative;}
.price-card:hover{border-color:var(--gold); transform:translateY(-6px);}
.price-card.featured{border-color:var(--gold); background:rgba(201,162,75,.06); box-shadow:0 8px 24px rgba(201,162,75,.10); overflow:visible; z-index:2; isolation:isolate;}
.price-card.featured::after{display:none;}
.price-card.featured::before{content:"Most Popular"; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:#221803; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 14px; border-radius:20px; white-space:nowrap;}
.price-tier{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.price-tier .ar{display:block; font-family:var(--ar-body); direction:rtl; color:var(--muted); font-size:11px; letter-spacing:0; margin-top:2px;}
.price-amt{font-family:var(--serif); font-size:30px; font-weight:700; margin:16px 0 2px;}
.price-amt small{font-size:13px; color:var(--muted); font-weight:400; font-family:var(--sans);}
.price-who{font-size:12.5px; color:#b8c8be; margin:12px 0 20px; flex:1;}
.price-card .btn{width:100%; justify-content:center; margin-top:auto; padding:12px;}
@media (max-width:980px){ .price-grid{grid-template-columns:1fr 1fr 1fr;} .tier-prog-grid{grid-template-columns:repeat(3,1fr) !important;} }
@media (max-width:640px){ .price-grid{grid-template-columns:1fr;} .tier-prog-grid{grid-template-columns:1fr !important;} }

/* =====================================================
   10 — FINALE / THE CROSSING
===================================================== */
.lead-form{display:flex; flex-direction:column; gap:12px; max-width:420px; margin:38px auto 0;}
.lead-form input{width:100%; padding:15px 18px; border-radius:2px; border:1px solid var(--edge-strong); background:rgba(8,43,33,.55); color:var(--paper); font-family:var(--sans); font-size:14px; text-align:center;}
.lead-form .btn{width:100%; justify-content:center; text-align:center; display:inline-flex; align-items:center; gap:8px;}
.lead-form input::placeholder{color:var(--muted);}
.lead-form input:focus{outline:none; border-color:var(--gold); background:rgba(8,43,33,.75);}
.lead-form .btn{white-space:nowrap;}
.form-note{font-size:12px; color:var(--muted); margin-top:14px; letter-spacing:.02em;}
.form-note a{color:var(--gold-light); text-decoration:none;}
.form-thanks{display:none; margin-top:20px; font-size:16px; color:var(--gold-light);}
.form-thanks.show{display:block;}

/* =====================================================
   GET IT TODAY · THE HAND
===================================================== */
.gettoday{position:relative; padding:150px 0 0; text-align:center;
  background:
    radial-gradient(720px 460px at 50% 78%, rgba(201,162,75,.13), transparent 66%),
    linear-gradient(180deg,#071d16, var(--palm-shadow));}
.gt-title{display:flex; flex-direction:column; gap:8px; font-family:var(--serif); line-height:1.15;}
.gt-title .ar{display:block; font-family:var(--ar); direction:rtl; font-weight:900; color:var(--paper); font-size:clamp(32px,4.8vw,54px); line-height:1.5;}
.gt-title .en{display:block; font-weight:600; font-size:clamp(17px,2vw,25px); color:#AEB9AE; letter-spacing:.02em;}
.gt-sub{color:#cddbd2; font-size:clamp(15px,1.6vw,19px); margin:22px auto 0; max-width:46ch;}
.gt-cta{margin-top:36px;}
.hand-stage{position:relative; width:min(560px,92vw); margin:14px auto 0;}
/* final CTA — prominent, overlapping the empty band beside the wrist */
.gt-claim{position:relative; z-index:3; margin-top:clamp(-150px,-13vw,-84px); padding-bottom:0;
  transform:translateY(50%);} /* bottom edge = section edge → panel centred on the footer line */
.gettoday + footer{padding-top:190px;}
.gt-claim .lead-form{margin-top:0;
  padding:26px 26px 20px; border-radius:8px;
  background:linear-gradient(180deg, rgba(7,32,24,.86), rgba(6,26,19,.94));
  border:1px solid rgba(231,206,143,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(201,162,75,.12), inset 0 1px 0 rgba(231,206,143,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  max-width:440px;}
.gt-claim .lead-form .form-note{margin:6px 0 0; width:100%; text-align:center;}
@media (max-width:640px){ .gt-claim{margin-top:-9vw;} .gettoday + footer{padding-top:210px;} }
/* 3D hand photo — black background dissolves into the scene via screen blending,
   so the fingers & thumb read as gripping the passport layered beneath */
.hand-photo{display:block; position:relative; z-index:2; width:100%; height:auto;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));}
.hand-passport{
  position:absolute; left:27.2%; top:20.87%; width:44.7%; height:57.43%; z-index:1;
  overflow:hidden; border-radius:10px;
  background:radial-gradient(120% 120% at 30% 12%, #10493a 0%, #0c3b2e 42%, #072a20 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(201,162,75,.14), inset 0 0 0 1px rgba(231,206,143,.16);
  transition:opacity .35s ease;
}
.hand-passport::before{content:""; position:absolute; inset:5.5%; border-radius:5px; border:1px solid rgba(231,206,143,.32);
  box-shadow:inset 0 0 0 2px rgba(7,42,32,.5);}
.hand-passport .tp-inner{inset:5.5%;}
/* in journey mode the hand waits empty until the voyaging passport lands */
body.js-journey .hand-passport{opacity:0;}
body.js-journey .gettoday.holding .hand-passport{opacity:1;}
@media (max-width:560px){ .gettoday{padding-top:110px;} }

/* =====================================================
   SUBPAGE HERO (credential / teams / membership)
===================================================== */
.page-hero{padding:170px 0 70px; text-align:center;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(21,127,90,.28), transparent 62%),
    linear-gradient(170deg,#0a3025, var(--palm) 55%, var(--palm-shadow));}
.page-hero .lede{margin-left:auto; margin-right:auto; text-align:center;}
.nav-links a[aria-current="page"]{color:var(--gold-light); position:relative;}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}

/* =====================================================
   FOOTER — minimal, centred, engraved
===================================================== */
footer{padding:70px 0 44px; text-align:center;
  background:linear-gradient(180deg, #071d16, #05150F);
  border-top:1px solid var(--edge);}
.foot-inner{display:flex; flex-direction:column; align-items:center; gap:0;}
.foot-seal{width:44px; height:44px; opacity:.9;}
.foot-brand{font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.06em; margin-top:16px;}
.foot-brand small{display:block; font-family:var(--ar-body); direction:rtl; font-size:12px; letter-spacing:0; color:var(--muted); margin-top:5px;}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; margin-top:26px;}
.foot-links a{color:#cddbd2; text-decoration:none; font-size:12.5px; letter-spacing:.06em; transition:.2s; position:relative;}
.foot-links a::after{content:""; position:absolute; left:15%; right:15%; bottom:-4px; height:1.5px;
  background:linear-gradient(90deg, transparent, #C9A24B 30%, #C9A24B 70%, transparent);
  transform:scaleX(0); transition:transform .35s cubic-bezier(.4,0,.2,1); transform-origin:center;}
.foot-links a:hover::after{transform:scaleX(1);}
.foot-links a:hover{color:var(--gold-light);}
.foot-rule{width:min(420px,72vw); height:1px; margin:30px auto 24px;
  background:linear-gradient(90deg,transparent,var(--edge-strong),transparent);}
.foot-meta{font-size:11px; color:var(--muted); line-height:1.9; letter-spacing:.04em;}
.foot-meta b{color:var(--gold-light); font-weight:600;}

/* mobile: skip the open-book intermediate flash — go straight to flip-book */
@media (max-width:768px){
  body.js-journey .open-book{ display:none !important; }
  body.js-journey .open-stage.arrived .open-book{ display:none !important; }
  body.js-journey .flip-book{ transition:opacity .15s ease; }
  /* reduce the dwell zone so content appears faster */
  body.js-flip .opening{ height:700vh; }
}
/* ---------- animated cursor hint ---------- */
.cursor-hint{
  position:absolute; left:50%; top:0; transform:translate(-50%, 40px);
  pointer-events:none; opacity:0; z-index:10;
  display:flex; align-items:center; gap:6px;
}
.cursor-hint.go{
  animation:chEnter 2.2s cubic-bezier(.22,.68,.36,1) forwards;
}
.cursor-hint.done{
  animation:chFade .6s ease forwards;
}
.ch-cursor{
  flex:none; filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.ch-text{
  font-family:var(--serif); font-size:17px; font-weight:700;
  color:#FFFFFF; white-space:nowrap; letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
  padding:6px 14px; border-radius:20px;
  background:rgba(7,32,24,.78); border:1px solid rgba(255,255,255,.28);
  opacity:0;
}
.cursor-hint.go .ch-text{
  animation:chTextIn .5s ease .6s forwards;
}
@keyframes chEnter{
  0%{opacity:0; transform:translate(calc(-50% - 260px), 150px);}
  18%{opacity:1;}
  50%{transform:translate(calc(-50% - 60px), 30px);}
  75%{transform:translate(calc(-50% + 0px), -2px);}
  100%{opacity:1; transform:translate(calc(-50% + 0px), -2px);}
}
@keyframes chTextIn{
  0%{opacity:0; transform:translateX(-6px);}
  100%{opacity:1; transform:translateX(0);}
}
@keyframes chFade{
  0%{opacity:1;}
  100%{opacity:0; visibility:hidden;}
}
@media (prefers-reduced-motion:reduce){
  .cursor-hint.go{animation:none; opacity:0;}
}

/* inline SVG icons replacing emojis */
.inline-icon{display:inline-block; vertical-align:middle; width:1em; height:1em; stroke:currentColor; fill:none; flex-shrink:0;}
.city-icon .inline-icon, .stage-badge .inline-icon, .urgency-icon .inline-icon, .oasis-icon .inline-icon{width:100%; height:100%; display:block; padding:20%;}

/* ---- decorative stamp & guilloche patterns ---- */
.page-hero{position:relative;}
.page-hero::after{
  content:""; position:absolute; top:50%; right:5%; width:200px; height:200px;
  transform:translateY(-50%); opacity:.04; pointer-events:none;
  background-image:url('data:image/svg+xml,<svg xmlns="https://i.redd.it/svg-kinetic-spirograph-v0-pwpx561ied7h1.png?width=2000&format=png&auto=webp&s=c4584a5a29df93482bda1ec61d3fe3685c27d242" viewBox="0 0 200 200"><g transform="translate(100,100)" fill="none" stroke="%23C9A24B" stroke-width=".9"><circle r="88"/><circle r="72"/><circle r="56"/><polygon points="0,-64 45,-45 64,0 45,45 0,64 -45,45 -64,0 -45,-45"/><polygon points="0,-64 45,-45 64,0 45,45 0,64 -45,45 -64,0 -45,-45" transform="rotate(22.5)"/></g></svg>');
  background-size:contain; background-repeat:no-repeat;
}
.stage-section{position:relative;}
.stage-section:nth-child(odd)::before{
  content:""; position:absolute; bottom:20px; left:2%; width:120px; height:120px; opacity:.025; pointer-events:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="translate(50,50)" fill="none" stroke="%23C9A24B" stroke-width="1.3"><circle r="40" stroke-dasharray="3 3" stroke-opacity=".8"/><circle r="34" stroke-opacity=".55"/><polygon points="0,-26 18,-18 26,0 18,18 0,26 -18,18 -26,0 -18,-18" fill="%238A6A2E" fill-opacity=".1"/><circle r="12" stroke-opacity=".7"/></g></svg>');
  background-size:contain; background-repeat:no-repeat;
}
.authority{position:relative;}
.authority::before{
  content:""; position:absolute; top:40px; right:3%; width:140px; height:140px; opacity:.02; pointer-events:none; z-index:0;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g transform="translate(100,100)" fill="none" stroke="%23C9A24B" stroke-width=".8"><circle r="88"/><circle r="72"/><circle r="56"/><polygon points="0,-64 45,-45 64,0 45,45 0,64 -45,45 -64,0 -45,-45"/></g></svg>');
  background-size:contain; background-repeat:no-repeat;
}
.pillar-card, .city-card, .oasis-card, .urgency-card{position:relative;}
.city-card::before{
  content:""; position:absolute; bottom:12px; right:12px; width:60px; height:60px; opacity:.035; pointer-events:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g transform="translate(50,50)" fill="none" stroke="%23C9A24B" stroke-width="1.5"><circle r="40" stroke-dasharray="3 3"/><circle r="30"/><polygon points="0,-22 15,-15 22,0 15,15 0,22 -15,15 -22,0 -15,-15" fill="%23C9A24B" fill-opacity=".06"/></g></svg>');
  background-size:contain; background-repeat:no-repeat;
}

/* ========== STAMP IMAGE STYLES ========== */
.stamp-img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.pg-stamp img.stamp-img {
  filter: drop-shadow(0 2px 8px rgba(12, 59, 46, 0.15));
}

/* Intro page ghost stamps */
.pi-ghost img.stamp-img {
  opacity: 0.12;
  filter: grayscale(1) brightness(0.6);
}

/* Verso imprint stamps */
.imprint img.stamp-img {
  opacity: 0.08;
  filter: grayscale(1);
}