/* alinma Harrods Infinite Credit Card — single stylesheet, shared by AR & EN */

@font-face{
  font-family:'AlinmaDisplay';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/AlinmaDisplay-Regular.ttf') format('truetype');
}


/* ============================================================
   ALINMA HARRODS INFINITE CREDIT CARD
   Scroll-scrubbed 3D card hero.
   Motion model: scroll -> raw target -> critically damped follower
   -> keyframe interpolation -> single composited transform.
   ============================================================ */

:root{
  --green-900:#020906;
  --green-800:#04120B;
  --green-700:#072014;
  --green-600:#0D3020;
  --gold-100:#F8EED4;
  --gold-200:#F0DFB4;
  --gold-300:#E2CD96;
  --gold-400:#D0B171;
  --gold-500:#A6874A;
  --green:#1E4436;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:'AlinmaDisplay','Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'AlinmaDisplay','Cormorant Garamond',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--green-900);
  color:#E9EEF5;
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}

/* ---------- chrome ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(18px,2.6vw,34px) clamp(20px,4vw,56px);
  mix-blend-mode:normal;
  pointer-events:none;
}
.nav > *{pointer-events:auto;}
/* the real wordmark, traced off the card's own gilt engraving rather than
   set in a substitute serif — vector, so it takes its colour from CSS */
.wordmark{
  display:block; line-height:0;
  color:#F4F7FA;
  text-decoration:none;
  transition:color .45s var(--ease-out);
}
.wordmark:hover{ color:#fff; }
.hlogo{
  width:clamp(84px,8.2vw,118px);
  height:auto;
  display:block;
}
.brand{
  display:flex; align-items:center;
  gap:clamp(9px,1.05vw,15px);
}
.cobrand{
  font-size:clamp(13px,1.3vw,19px);
  font-weight:200;
  color:rgba(233,238,245,.50);
  line-height:1;
  transform:translateY(-.05em);
}
/* the mark is traced to an inline vector rather than shipped as a bitmap or a
   CSS mask: crisp at any size, ~1.4KB, and it takes its colour from CSS */
.alinma-link{
  display:block; line-height:0;
  color:rgba(233,238,245,.94);
  transition:color .45s var(--ease-out);
}
.alinma-link:hover{ color:#fff; }
.alinma{
  width:clamp(21px,2.05vw,29px);
  height:auto;
  display:block;
}
.nav-links{
  display:flex; gap:clamp(18px,2.4vw,34px);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(233,238,245,.62);
}
.nav-links a{color:inherit;text-decoration:none;transition:color .45s var(--ease-out);}
.nav-links a:hover{color:var(--gold-200);}
@media(max-width:820px){ .nav-links{display:none;} }

/* ---------- hero: tall track, pinned stage ---------- */
.hero{ position:relative; }
.track{ height:400vh; }
.stage{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:hidden;
  z-index:1;
  /* Harrods green, kept several stops darker than the plate itself so the
     card still separates from it */
  background:
    radial-gradient(100% 74% at 80% 2%,  #0B2617 0%, rgba(11,38,23,0) 56%),
    radial-gradient(76% 56% at 5% 100%,  rgba(168,126,48,.13) 0%, rgba(168,126,48,0) 56%),
    radial-gradient(150% 118% at 46% 48%, #062015 0%, #03120B 52%, #010805 100%);
  perspective:1500px;
  perspective-origin:52% 46%;
}

/* soft atmospheric bloom that tracks the card */
.bloom{
  position:absolute; left:50%; top:50%;
  width:78vmax; height:78vmax;
  transform:translate3d(-50%,-50%,0);
  /* no filter: this element moves every frame, and a blur on a moving
     element is re-rendered every frame. The gradient is soft already. */
  background:radial-gradient(circle, rgba(198,156,70,.20) 0%, rgba(198,156,70,.11) 22%, rgba(198,156,70,.05) 40%, rgba(198,156,70,0) 66%);
  will-change:transform,opacity;
  pointer-events:none;
}

/* right-hand panel that resolves at the end of the sequence */
.panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(46%,720px);
  background:linear-gradient(to left, rgba(2,9,6,.96) 0%, rgba(2,9,6,.86) 34%, rgba(2,9,6,.56) 62%, rgba(2,9,6,.18) 84%, rgba(2,9,6,0) 100%);
  pointer-events:none;
  will-change:opacity,transform;
}
@media(max-width:820px){
  .panel{
    width:100%;
    background:linear-gradient(0deg,
      rgba(2,9,6,.97) 0%,
      rgba(2,9,6,.92) 30%,
      rgba(2,9,6,.62) 46%,
      rgba(2,9,6,0)   64%);
  }
}


/* ---------- card ---------- */
.card-layer{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transform-style:preserve-3d;
  pointer-events:none;
}
.card-rig{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.card{
  position:relative;
  width:clamp(180px,25vh,268px);
  aspect-ratio:1888/2902;
  /* matched to the artwork's own corner radius (5.93% of card width) so the
     clip and the image alpha cut at exactly the same place. The alpha is built
     at 16x and downsampled — the mask edge is what reads as "clean", far more
     than the resolution of the artwork behind it. */
  border-radius:clamp(10.7px,1.48vh,15.9px);
  /* deliberately FLAT: the rig owns the 3D. Coplanar children in a
     preserve-3d context z-fight; keeping the card flat makes the
     stacking order deterministic. */
  transform-style:flat;
  will-change:transform;
}
.card__face{
  position:absolute; inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:transparent;
  box-shadow:
    0 0 0 1px rgba(196,232,208,.30) inset,
    0 60px 90px -30px rgba(0,0,0,.85),
    0 20px 40px -20px rgba(0,0,0,.7);
  backface-visibility:hidden;
}
.card__art{width:100%;height:100%;object-fit:cover;}

/* specular sweep — position driven by --shine */
.card__shine{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(
    104deg,
    rgba(255,255,255,0)    47.4%,
    rgba(255,247,224,.14)  49.2%,
    rgba(255,252,240,.40)  50.0%,
    rgba(255,247,224,.14)  50.8%,
    rgba(255,255,255,0)    52.6%);
  background-size:300% 100%;
  background-position:calc(var(--shine,.5) * 100%) 0;
  mix-blend-mode:screen;
  opacity:var(--shine-o,.4);
  pointer-events:none;
}
/* broad, very soft key light — reads as the plate catching the room */
.card__key{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(
    104deg,
    rgba(255,255,255,0)   38%,
    rgba(255,243,214,.13) 50%,
    rgba(255,255,255,0)   62%);
  background-size:240% 100%;
  background-position:calc(var(--shine,.5) * 100%) 0;
  mix-blend-mode:screen;
  pointer-events:none;
}
/* ambient sheen so the plate never looks flat */
.card__sheen{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.28) 100%);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
/* milled edge — a single plate behind the face, nudged along the
   direction the card is turning away from the eye. Cheap, and it
   reads as real thickness because the offset tracks the rotation. */
.card__body{
  position:absolute; inset:0; border-radius:inherit;
  /* the plate's own colour, machined: dark in the hollows, a bright facet
     where the light catches, never gold */
  background:linear-gradient(
    var(--edge-angle,120deg),
    #0A1E13 0%,
    #245C3E 13%,
    #4E9E74 28%,
    #93D8B0 41%,
    #2E6D4A 55%,
    #0E2A1A 72%,
    #3F865D 89%,
    #173D28 100%);
  transform:translate(var(--ex,3px),var(--ey,2px));
  box-shadow:0 60px 90px -34px rgba(0,0,0,.9);
}

/* cast shadow on the ground plane */
.card-shadow{
  position:absolute; left:50%; top:50%;
  width:clamp(180px,25vh,268px); aspect-ratio:321/488;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.34) 32%, rgba(0,0,0,.13) 60%, rgba(0,0,0,0) 84%);
  will-change:transform,opacity;
  pointer-events:none;
}

/* ---------- copy ---------- */
.copy{
  position:absolute;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
/* the opening is one line and the plate, side by side: the headline holds
   the left of the frame and the plate rests large on the right. */
.copy--intro{
  left:clamp(28px,6vw,110px); right:55%;
  top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:center;
  text-align:start;
}
.eyebrow{
  font-size:clamp(9px,.78vw,11px);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-300);
  margin:0 0 clamp(14px,2vh,24px);
}
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(36px,5.6vw,92px);
  line-height:.98;
  letter-spacing:.005em;
  margin:0;
  color:rgba(244,247,251,.94);
}
.display em{
  font-style:italic;
  background:linear-gradient(96deg,var(--gold-100),var(--gold-300) 46%,var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{
  margin:clamp(18px,2.6vh,30px) auto 0;
  max-width:44ch;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.75;
  color:rgba(224,232,242,.60);
}

.copy--final{
  right:clamp(22px,5vw,88px);
  top:50%;
  width:min(400px,80vw);
  transform:translateY(-50%);
}
@media(max-width:820px){
  .copy--final{ left:24px; right:24px; width:auto; top:auto; bottom:clamp(56px,9vh,100px); transform:none; }
}
.copy--intro .display{
  font-size:clamp(32px,4.8vw,76px);
  line-height:1.06;
  letter-spacing:.005em;
}
/* the Arabic title runs longer — a step smaller, with taller lines */
html[lang="ar"] .copy--intro .display{
  font-size:clamp(28px,4vw,62px);
  line-height:1.22;
}
.copy--intro .display.rise.in{ transition-delay:.14s; }
/* a phone has no room beside the plate — the opening stacks again */
@media(max-width:820px){
  .copy--intro{
    left:0; right:0; top:clamp(96px,14vh,150px); bottom:auto;
    display:block; text-align:center;
  }
  .copy--intro .display{ font-size:clamp(30px,7.6vw,46px); }
  html[lang="ar"] .copy--intro .display{ font-size:clamp(26px,6.8vw,40px); }
}
.copy--final .display{ font-size:clamp(34px,4.1vw,62px); text-align:left; }
.copy--final .sub{ margin-left:0; text-align:left; }
.rule{
  width:52px; height:1px; margin:0 0 clamp(20px,3vh,30px);
  background:linear-gradient(90deg,var(--gold-300),rgba(217,185,106,0));
}
.cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(24px,3.4vh,38px);
  padding:15px 30px;
  border:1px solid rgba(217,185,106,.42);
  border-radius:999px;
  color:var(--gold-100);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none;
  background:rgba(217,185,106,.04);
  pointer-events:auto;
  transition:background .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out);
}
.cta:hover{ background:rgba(217,185,106,.13); border-color:var(--gold-200); color:#fff; }
.cta svg{transition:transform .5s var(--ease-out);}
.cta:hover svg{transform:translateX(5px);}

/* ---------- scroll cue + rail ---------- */
.cue{
  position:absolute; left:50%; bottom:clamp(22px,3.6vh,42px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:9px; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(224,232,242,.34);
  will-change:opacity,transform;
}
.cue-line{ width:1px; height:44px; background:linear-gradient(180deg,rgba(217,185,106,.55),rgba(217,185,106,0)); position:relative; overflow:hidden; }
.cue-line::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(246,232,195,0),var(--gold-100),rgba(246,232,195,0));
  animation:cueRun 2.4s var(--ease-out) infinite;
}
@keyframes cueRun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

.rail{
  position:absolute; right:clamp(14px,1.6vw,26px); top:50%;
  transform:translateY(-50%);
  width:1px; height:min(210px,26vh);
  background:rgba(233,238,245,.10);
  overflow:hidden; border-radius:2px;
}
.rail span{
  position:absolute; inset:0 0 auto 0;
  height:100%;
  background:linear-gradient(180deg,var(--gold-200),var(--gold-400));
  transform-origin:top;
  transform:scaleY(0);
  will-change:transform;
}
@media(max-width:820px){ .rail{display:none;} }

/* ---------- grain ---------- */
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.05; pointer-events:none;
}

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%, rgba(0,0,0,0) 36%, rgba(0,0,0,.70) 100%);
}



/* ============================================================
   THE BEAT PANELS
   Three blocks of copy, one per mark the camera stops on, each
   holding only what belongs to that name. Every panel is bound to
   the empty half of ITS frame — the composition alternates side
   through the move, so the panels alternate with it and nothing
   ever sits over the plate.
   ============================================================ */
html[lang="ar"]{
  --sans:'AlinmaDisplay','Noto Kufi Arabic',-apple-system,'Segoe UI',sans-serif;
  --serif:'AlinmaDisplay','Amiri','Cormorant Garamond',Georgia,serif;
}
html[lang="ar"] .eyebrow, html[lang="ar"] .bt__eyebrow, html[lang="ar"] .nav-links,
html[lang="ar"] .cta, html[lang="ar"] .lang, html[lang="ar"] .cue,
html[lang="ar"] .bt__l, html[lang="ar"] .shots figcaption{ letter-spacing:0; }
html[lang="ar"] .display em, html[lang="ar"] .bt__h em{ font-style:normal; }
.num{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

.nav-right{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
.lang{
  appearance:none; background:none; border:0; cursor:pointer; pointer-events:auto;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(233,238,245,.6); padding:6px 2px;
  border-bottom:1px solid rgba(233,238,245,.22);
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.lang:hover{ color:var(--gold-200); border-color:var(--gold-300); }

.bt{
  position:absolute; pointer-events:none; opacity:0;
  will-change:opacity,transform;
  /* the block is given the full height of the empty band and centred in it, so
     a short panel sits balanced and a long one fills the frame edge to edge */
  display:flex; flex-direction:column;
  justify-content:center;
  justify-content:safe center;   /* never overflow past the top and hit the nav */
}
.bt__eyebrow{
  font-size:clamp(11px,.9vw,13.5px); letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-300); margin:0 0 clamp(13px,2vh,22px);
}
.bt__h{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(33px,3.75vw,58px); line-height:1.08; letter-spacing:-.012em;
  margin:0 0 clamp(20px,2.9vh,34px); color:#F4F7FB; max-width:15ch;
}
.bt ul{ list-style:none; margin:0; padding:0; }
.bt li{
  padding:clamp(12px,1.7vh,20px) 0; border-top:1px solid rgba(214,232,220,.09);
  font-size:clamp(15px,1.14vw,19px); line-height:1.6; color:rgba(230,240,234,.8);
  display:flex; gap:14px; align-items:baseline;
}
.bt li:last-child{ border-bottom:1px solid rgba(214,232,220,.09); }
.bt .tick{ color:var(--gold-400); flex:none; font-size:.62em; transform:translateY(-.2em); }
.bt__stats{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.8vh,22px) clamp(20px,2.4vw,36px);
            margin:0 0 clamp(20px,2.8vh,30px); }
.bt__n{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.15vw,46px); line-height:1;
        white-space:nowrap;
        background:linear-gradient(100deg,var(--gold-100),var(--gold-300) 52%,var(--gold-400));
        -webkit-background-clip:text; background-clip:text; color:transparent; }
.bt__l{ margin-top:11px; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
        color:rgba(226,236,230,.42); }
.band{ margin:clamp(20px,2.8vh,32px) 0 0; }
/* the whole frame, never a crop of it — so the height is what gives when the
   band is short, and the width follows the photograph's own proportions */
.band img{ width:auto; max-width:100%; height:auto; max-height:min(30vh,300px);
           display:block; border-radius:6px;
           border:1px solid rgba(217,185,106,.30);
           box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(2,9,6,.6); }
.band figcaption{ margin-top:10px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
                  color:rgba(226,236,230,.55); }
html[lang="ar"] .band figcaption{ letter-spacing:0; font-size:13px; }
.close{ margin-top:clamp(18px,2.4vh,30px); }
.close p{ margin:0; font-size:clamp(14px,1.05vw,17px); line-height:1.7; color:rgba(226,236,230,.6); }
.close .cta{ margin-top:clamp(16px,2.2vh,26px); padding:13px 26px; }
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,20px);
        margin-top:clamp(18px,2.6vh,30px); }
.shots figure{ margin:0; }
.shots img{ width:100%; height:clamp(150px,21vh,250px); object-fit:cover; display:block;
            border-radius:6px;
            border:1px solid rgba(217,185,106,.30);
            box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(2,9,6,.6);
            transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
                       border-color .5s var(--ease-out); }
.shots figure:hover img{
  transform:translateY(-4px) scale(1.015);
  border-color:rgba(235,212,154,.55);
  box-shadow:0 24px 54px rgba(0,0,0,.6), 0 0 22px rgba(217,185,106,.18);
}
.shots figcaption{ margin-top:10px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
                   color:rgba(226,236,230,.55); }

/* the last one is centred, under the plate, and spans the frame */
.bt--close{ left:0; right:0; bottom:auto; text-align:center;
            align-items:center; justify-content:flex-start; }
.bt--close .bt__eyebrow{ margin-bottom:clamp(10px,1.5vh,16px); }
.bt--close .bt__h{ max-width:22ch; margin-bottom:clamp(16px,2.2vh,26px); }
.bt--close .cta{ margin-top:0; padding:15px 34px; }

/* the three boxes, each inside the empty half of its own frame */
/* Only the vertical bounds are set here. The edge that faces the plate is
   written every frame from the card's own measured box — a percentage guess
   holds at one window size and touches the card at the next, because the
   plate's base size is tied to viewport height while the panel's is tied to
   width. Measuring costs a single getBoundingClientRect a frame. */
/* physical left/right, not the logical properties — those flip with dir, and
   these panels must NOT follow the reading order; they follow the plate */
.bt--harrods{ top:clamp(114px,15vh,152px); bottom:clamp(30px,4vh,58px);
              left:clamp(24px,3.2vw,60px); }
.bt--visa,
.bt--alinma{  top:clamp(114px,15vh,152px); bottom:clamp(30px,4vh,58px);
              right:clamp(24px,3.2vw,60px); }
/* The panels do NOT mirror with the language. The plate's composition does not
   mirror either — its geometry is not a reading order — so a panel that swapped
   sides would land straight on top of the card. They stay in the physical half
   the plate has vacated; only the type inside them changes direction. */

/* A short window cannot take the largest step of type — the band between the
   bar and the foot of the frame is simply not tall enough for it. One notch
   down there, rather than letting the panel run off the bottom. */
/* Under 660px there is no arrangement of type that fits alongside a picture.
   The photographs go entirely — they are the tallest things in a panel and the
   only ones carrying no information — and the words stay. */
@media(min-width:901px) and (max-height:660px){
  .shots, .band{ display:none; }
  .bt--close .bt__h{ font-size:clamp(20px,2.2vw,26px); margin-bottom:12px; }
  .bt--close .bt__eyebrow{ margin-bottom:8px; }
  .bt--close .cta{ padding:11px 26px; }
}

/* Below 700px of height every panel has more in it than the band can hold — the closing block is the part that can go, since the same call to
   action lives in the nav. */
@media(min-width:901px) and (max-height:700px){
  /* Below 760px of height the band is smaller than the alinma panel's contents.
     The closing block and the two figures are what give — the call to action is
     also in the bar, and the welcome offer is the one line here that is a
     headline rather than a fact about the card. */
  .close, .bt__stats{ display:none; }
  .band img{ max-height:17vh; }
  .band figcaption{ margin-top:7px; font-size:10px; }
  .bt__h{ font-size:clamp(22px,2.5vw,31px); margin-bottom:16px; }
  .bt li{ font-size:13.5px; padding:8px 0; }
  .bt__n{ font-size:clamp(22px,2.3vw,31px); }
  .bt__l{ font-size:10px; margin-top:6px; }

  .shots img{ height:98px; }
}
/* Between 700 and 830 the photographs are what give first — they are the tallest
   single thing in a panel and the only part that carries no information. */
@media(min-width:901px) and (max-height:830px){
  .band img{ max-height:19vh; }
  .shots img{ height:clamp(96px,13vh,124px); }
  .bt li{ font-size:14px; padding:8px 0; }
}
@media(min-width:901px) and (max-height:1000px){
  .bt__h{ font-size:clamp(26px,3vw,40px); margin-bottom:18px; }
  .bt li{ font-size:14.5px; padding:9px 0; }
  .bt__n{ font-size:clamp(26px,2.7vw,38px); }
  .bt__eyebrow{ margin-bottom:12px; }
  .close{ margin-top:14px; }
  .close p{ font-size:14px; line-height:1.6; }
  .bt__stats{ gap:12px 24px; margin-bottom:18px; }
  .bt__l{ margin-top:8px; font-size:11px; }
  .shots img{ height:clamp(112px,15vh,150px); }
  .band{ margin-top:clamp(12px,1.7vh,20px); }
  .band img{ max-height:23vh; }
}

/* A phone has no empty half to put them in, so the panels lie along the bottom
   and carry their own shade — over the engraving the type would not read. */
@media(max-width:900px){
  .bt::before{
    content:''; position:absolute; inset:-30px -24px -48px -24px; z-index:-1;
    background:radial-gradient(130% 105% at 50% 58%,
      rgba(2,9,6,.94) 0%, rgba(2,9,6,.9) 52%, rgba(2,9,6,.6) 78%, rgba(2,9,6,0) 100%);
  }
  .bt, .bt--harrods, .bt--visa, .bt--alinma{
    top:auto; left:clamp(20px,5vw,34px); right:clamp(20px,5vw,34px);
    bottom:clamp(26px,5vh,60px); width:auto !important;
  }
  .bt__h{ font-size:clamp(26px,7vw,36px); max-width:none; }
  .bt li{ font-size:15px; padding:11px 0; }
  .shots img{ height:100px; }
  .bt--alinma .bt__stats{ gap:26px; }
}

/* THE ENTRANCE — the hero line's own numbers */
.rise{ opacity:0; filter:blur(12px); transform:translateY(-46px) scale(.95); }
.rise.in{
  opacity:1; filter:blur(0); transform:none;
  transition:opacity 1.15s var(--ease-out), filter 1.15s var(--ease-out),
             transform 1.15s var(--ease-out);
}
@media(prefers-reduced-motion:reduce){ .rise{ opacity:1; filter:none; transform:none; } }

@media(prefers-reduced-motion:reduce){
  .cue-line::after{animation:none;}
}

/* ============================================================
   THE STORY — the chapters below the hero.
   Same plate, same light: green-900 ground, gilt accents,
   engraved hairlines. Painted from the content JSON per language.
   ============================================================ */
.story{ position:relative; background:var(--green-900); }
.story .wrap{ width:min(1140px,88vw); margin-inline:auto; }
.ch{ position:relative; padding:clamp(96px,15vh,190px) 0; }
.ch + .ch{ padding-top:clamp(40px,7vh,90px); }

/* chapter head: eyebrow, serif line, a rule that draws itself */
.ch__head{ margin-bottom:clamp(36px,6vh,70px); }
.ch__h{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.2vw,50px); line-height:1.12; letter-spacing:.015em;
  margin:0; color:rgba(240,245,242,.9); max-width:22ch; text-wrap:balance;
}
.ch__h em{
  font-style:italic;
  background:linear-gradient(96deg,var(--gold-100),var(--gold-300) 46%,var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[lang="ar"] .ch__h em{ font-style:normal; }
.ch__rule{
  width:min(200px,26vw); height:1px; margin-top:clamp(20px,3vh,32px);
  background:linear-gradient(90deg,var(--gold-300),rgba(217,185,106,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.3s var(--ease-out) .2s;
}
html[lang="ar"] .ch__rule{
  transform-origin:right;
  background:linear-gradient(-90deg,var(--gold-300),rgba(217,185,106,0));
}
.ch__rule.in{ transform:scaleX(1); }

/* the reveal grammar of the hero, reused */
.story .rv{ opacity:0; transform:translateY(34px); filter:blur(8px);
  transition:opacity 1s var(--ease-out) var(--d,0s),
             transform 1s var(--ease-out) var(--d,0s),
             filter 1s var(--ease-out) var(--d,0s); }
.story .rv.in{ opacity:1; transform:none; filter:none; }
@media(prefers-reduced-motion:reduce){
  .story .rv{ opacity:1; transform:none; filter:none; transition:none; }
  .ch__rule{ transform:scaleX(1); transition:none; }
}

.story p{ margin:0; }
.story .lead{
  font-size:clamp(15px,1.18vw,18.5px); line-height:1.85;
  color:rgba(226,236,230,.72); max-width:62ch;
}
.story .lead + .lead{ margin-top:1.2em; }
.story .dim{ color:rgba(226,236,230,.46); font-size:clamp(12px,.92vw,14px); line-height:1.75; }

/* small-caps group label */
.gl{
  font-size:clamp(11px,.85vw,12.5px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-300); margin:0 0 clamp(14px,2vh,22px);
}
html[lang="ar"] .gl{ letter-spacing:0; }

/* engraved ledger rows (the beat-panel grammar, page-wide) */
.ledger{ list-style:none; margin:0; padding:0; }
.ledger li{
  padding:clamp(12px,1.7vh,20px) 0; border-top:1px solid rgba(214,232,220,.09);
  font-size:clamp(14px,1.08vw,17px); line-height:1.65; color:rgba(230,240,234,.8);
  display:flex; gap:14px; align-items:baseline;
}
.ledger li:last-child{ border-bottom:1px solid rgba(214,232,220,.09); }
.ledger .tick{ color:var(--gold-400); flex:none; font-size:.62em; transform:translateY(-.2em); }

/* ---------- statement ---------- */
.ch--about .cols{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,7vw,120px); align-items:start; }
.pull{
  border-inline-start:1px solid rgba(217,185,106,.35);
  padding-inline-start:clamp(20px,2.6vw,36px);
}
.pull blockquote{
  margin:0; font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(20px,1.9vw,28px); line-height:1.5; color:rgba(240,245,242,.88);
}
html[lang="ar"] .pull blockquote{ font-style:normal; }

/* ---------- welcome ---------- */
.ch--welcome{ text-align:center;
  background:radial-gradient(58% 46% at 50% 42%, rgba(198,156,70,.09) 0%, rgba(198,156,70,0) 72%); }
.ch--welcome .ch__head{ margin-bottom:clamp(24px,4vh,44px); }
.ch--welcome .ch__h{ margin-inline:auto; font-size:clamp(26px,3.4vw,50px); }
.ch--welcome .ch__rule{ margin-inline:auto; background:linear-gradient(90deg,rgba(217,185,106,0),var(--gold-300),rgba(217,185,106,0)); transform-origin:center; }
.wel__n{
  font-family:var(--serif); font-weight:300; line-height:.92;
  font-size:clamp(64px,11vw,168px); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(105deg,var(--gold-100) 8%,var(--gold-300) 48%,var(--gold-500) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wel__u{
  margin-top:clamp(10px,1.6vh,18px);
  font-size:clamp(12px,1vw,15px); letter-spacing:.4em; text-transform:uppercase;
  color:rgba(233,238,245,.66);
}
html[lang="ar"] .wel__u{ letter-spacing:.06em; }
.wel__c{ margin-top:clamp(16px,2.6vh,28px); font-family:var(--serif); font-weight:300;
  font-size:clamp(19px,2vw,30px); color:rgba(240,245,242,.9); }
.wel__s{ margin-top:clamp(14px,2vh,22px); }

/* ---------- the loom: 4 / 2 / 1 ---------- */
.loom{ display:flex; flex-direction:column; }
.loom__denom{
  font-size:clamp(12px,.95vw,14px); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(233,238,245,.55); margin:0 0 clamp(22px,3.4vh,38px);
}
html[lang="ar"] .loom__denom{ letter-spacing:0; }
/* the three earning rates sit side by side, each its own column */
.loom__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
  border-top:1px solid rgba(214,232,220,.09);
  padding-top:clamp(18px,2.8vh,30px);
}
.loom__row{
  display:flex; flex-direction:column;
  padding:clamp(10px,1.6vh,18px) clamp(14px,1.8vw,26px) clamp(16px,2.4vh,24px);
  border-inline-start:1px solid rgba(214,232,220,.09);
}
.loom__row .loom__n{ text-align:start; margin-bottom:clamp(8px,1.4vh,14px); }
.loom__row > div{ margin-top:auto; }
@media(max-width:700px){
  .loom__grid{ grid-template-columns:1fr; gap:0; padding-top:0; }
  .loom__row{ border-inline-start:none; border-top:1px solid rgba(214,232,220,.09);
    flex-direction:row; align-items:center; gap:clamp(18px,5vw,30px);
    padding:clamp(16px,2.6vh,26px) 0; }
  .loom__row .loom__n{ margin-bottom:0; min-width:clamp(64px,18vw,96px); text-align:center; }
  .loom__row > div{ margin-top:0; flex:1; }
}
.loom__n{
  font-family:var(--serif); font-weight:300; line-height:1;
  font-size:clamp(54px,6.4vw,104px);
  background:linear-gradient(100deg,var(--gold-100),var(--gold-300) 52%,var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center;
}
.loom__l{ font-size:clamp(13px,1.05vw,16px); color:rgba(230,240,234,.78); margin:0 0 12px; }
.loom__bar{ position:relative; height:2px; background:rgba(214,232,220,.07); overflow:visible; }
.loom__bar i{
  position:absolute; inset:0; width:var(--w,100%);
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300) 55%,var(--gold-100));
  box-shadow:0 0 14px rgba(217,185,106,.4);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--ease-out) var(--d,0s);
}
html[lang="ar"] .loom__bar i{ transform-origin:right; right:0; left:auto;
  background:linear-gradient(-90deg,var(--gold-500),var(--gold-300) 55%,var(--gold-100)); }
.loom__bar i.in{ transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .loom__bar i{ transform:scaleX(1); transition:none; } }
.loom__bonus{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px;
  border-top:1px solid rgba(214,232,220,.09); border-bottom:1px solid rgba(214,232,220,.09);
  padding:clamp(20px,3vh,32px) 0; margin-top:-1px;
}
.loom__bonus .bn{
  font-family:var(--serif); font-weight:300; font-size:clamp(38px,4vw,64px); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--gold-100),var(--gold-300) 52%,var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.loom__bonus .bl{ font-size:clamp(13px,1.05vw,16px); color:rgba(230,240,234,.78); max-width:44ch; }
.loom__note{ margin-top:clamp(18px,2.6vh,26px); max-width:74ch; }

/* ---------- privileges ---------- */
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vh,60px) clamp(44px,6vw,100px); }
.pgroup{ break-inside:avoid; }

/* ---------- personal shopping ---------- */
.ch--shop{ background:
  radial-gradient(70% 52% at 88% 6%, rgba(11,38,23,.85) 0%, rgba(11,38,23,0) 62%),
  radial-gradient(46% 38% at 6% 92%, rgba(168,126,48,.07) 0%, rgba(168,126,48,0) 60%); }
.shop__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:start; }
.feat{ display:flex; flex-direction:column; }
.feat__i{ border-top:1px solid rgba(214,232,220,.09); padding:clamp(16px,2.4vh,26px) 0; }
.feat__i h4{ margin:0 0 8px; font-weight:300; font-size:clamp(12px,.95vw,14px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-200); }
html[lang="ar"] .feat__i h4{ letter-spacing:0; font-size:clamp(14px,1.05vw,16px); }
.feat__i p{ color:rgba(226,236,230,.6); font-size:clamp(13px,1vw,15px); line-height:1.75; }
.shop__cta{ margin-top:clamp(30px,4.6vh,54px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }

/* ---------- numbered rails (real sequences) ---------- */
.steps{ counter-reset:st; display:flex; flex-direction:column; }
.step{
  counter-increment:st;
  display:grid; grid-template-columns:clamp(48px,4.4vw,72px) 1fr; column-gap:clamp(16px,2.4vw,30px);
  padding:clamp(15px,2.2vh,24px) 0; border-top:1px solid rgba(214,232,220,.09);
}
.step::before{
  content:counter(st,decimal-leading-zero);
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,2vw,32px); line-height:1.15;
  background:linear-gradient(100deg,var(--gold-100),var(--gold-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h4{ margin:0 0 5px; font-weight:400; font-size:clamp(14px,1.08vw,16.5px);
  letter-spacing:.05em; color:#EDF2F0; }
html[lang="ar"] .step h4{ letter-spacing:0; }
.step p{ color:rgba(226,236,230,.58); font-size:clamp(13px,1vw,15px); line-height:1.75; max-width:56ch; }
.step--bare p{ color:rgba(230,240,234,.78); font-size:clamp(14px,1.08vw,16.5px); }

/* ---------- apply ---------- */
.apply__cols{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,110px); align-items:start; }
.note-block{
  border:1px solid rgba(217,185,106,.22); border-radius:3px;
  padding:clamp(20px,3vh,30px) clamp(20px,2.4vw,30px);
  background:rgba(217,185,106,.03);
}
.note-block h4{ margin:0 0 10px; font-weight:300; font-size:clamp(11px,.85vw,12.5px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-300); }
html[lang="ar"] .note-block h4{ letter-spacing:0; font-size:clamp(13px,1vw,15px); }
.note-block p{ color:rgba(226,236,230,.66); font-size:clamp(13px,1vw,15px); line-height:1.8; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(18px,2.6vh,26px); }
.chip{
  border:1px solid rgba(217,185,106,.32); border-radius:999px;
  padding:10px 18px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-100); white-space:nowrap;
}
html[lang="ar"] .chip{ letter-spacing:0; font-size:13px; }

/* ---------- fees ---------- */
.fees-wrap{ overflow-x:auto; }
.fees{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.fees th{
  text-align:start; font-weight:300; font-size:clamp(11px,.85vw,12.5px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-300);
  padding:0 0 clamp(14px,2vh,20px); border-bottom:1px solid rgba(217,185,106,.3);
}
html[lang="ar"] .fees th{ letter-spacing:0; font-size:clamp(13px,1vw,15px); }
.fees td{
  padding:clamp(13px,1.9vh,19px) 0; border-top:1px solid rgba(214,232,220,.09);
  font-size:clamp(13px,1.02vw,15.5px); line-height:1.6; vertical-align:baseline;
}
.fees tr:first-child td{ border-top:0; }
.fees td:first-child{ color:rgba(230,240,234,.78); padding-inline-end:32px; }
.fees td:last-child{ color:var(--gold-100); text-align:end; white-space:normal; }
.fees__note{ margin-top:clamp(16px,2.4vh,24px); }

/* ---------- FAQs & terms: engraved folios ---------- */
.qa, .tg{ border-top:1px solid rgba(214,232,220,.09); }
.qa:last-of-type, .tg:last-of-type{ border-bottom:1px solid rgba(214,232,220,.09); }
.qa summary, .tg summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:clamp(16px,2.4vh,24px) 0;
  transition:color .4s var(--ease-out);
}
.qa summary::-webkit-details-marker, .tg summary::-webkit-details-marker{ display:none; }
.qa summary{ font-family:var(--serif); font-weight:300;
  font-size:clamp(17px,1.5vw,22px); line-height:1.35; color:rgba(240,245,242,.88); }
.qa summary:hover, .tg summary:hover{ color:var(--gold-100); }
.qa summary::after, .tg summary::after{
  content:'+'; flex:none;
  font-family:var(--sans); font-weight:200; font-size:1.25em; line-height:1;
  color:var(--gold-300);
  transition:transform .45s var(--ease-out);
}
.qa[open] summary::after, .tg[open] summary::after{ transform:rotate(45deg); }
.qa__a, .tg__b{ padding:0 0 clamp(20px,3vh,30px); max-width:70ch; }
.qa__a p, .tg__b p{ color:rgba(226,236,230,.62); font-size:clamp(13px,1vw,15px); line-height:1.85; }
.qa__a p + p, .tg__b p + p{ margin-top:.9em; }
.qa__a ul, .tg__b ul{ list-style:none; margin:12px 0 0; padding:0; }
.qa__a li, .tg__b li{
  position:relative; padding-inline-start:22px; margin-top:8px;
  color:rgba(226,236,230,.62); font-size:clamp(13px,1vw,15px); line-height:1.75;
}
.qa__a li::before, .tg__b li::before{
  content:'◆'; position:absolute; inset-inline-start:0; top:.44em;
  font-size:.5em; color:var(--gold-400);
}
.tg summary{ font-size:clamp(12px,.95vw,14px); letter-spacing:.3em;
  text-transform:uppercase; color:rgba(233,238,245,.7); font-family:var(--sans); font-weight:300; }
html[lang="ar"] .tg summary{ letter-spacing:0; font-size:clamp(14px,1.08vw,16px); }
.terms__intro{ max-width:70ch; margin-bottom:clamp(24px,3.6vh,40px); }
.mcc{ width:100%; max-width:560px; border-collapse:collapse; margin-top:16px;
  font-variant-numeric:tabular-nums; }
.mcc th{ text-align:start; font-weight:400; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(217,185,106,.75);
  padding:0 0 10px; border-bottom:1px solid rgba(217,185,106,.25); }
html[lang="ar"] .mcc th{ letter-spacing:0; font-size:12.5px; }
.mcc td{ padding:9px 0; border-top:1px solid rgba(214,232,220,.08);
  font-size:13px; color:rgba(226,236,230,.6); }
.mcc td:first-child{ color:var(--gold-100); padding-inline-end:28px; white-space:nowrap; }

/* ---------- closing & footer ---------- */
.ch--closing{ text-align:center; padding-block:clamp(130px,22vh,260px);
  background:radial-gradient(56% 44% at 50% 52%, rgba(198,156,70,.08) 0%, rgba(198,156,70,0) 70%); }
.ch--closing .ch__h{ margin-inline:auto; font-size:clamp(40px,5.6vw,88px); max-width:16ch; }
.ch--closing .lead{ margin:clamp(20px,3vh,32px) auto 0; }
.ch--closing .cta{ margin-top:clamp(28px,4.4vh,48px); }
.foot{ border-top:1px solid rgba(214,232,220,.09); }
.foot .wrap{
  padding:clamp(30px,4.6vh,50px) 0 clamp(40px,6vh,64px);
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px 44px; flex-wrap:wrap;
}
.foot__brand{ font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(233,238,245,.6); }
html[lang="ar"] .foot__brand{ letter-spacing:0; font-size:14px; }
.foot__lines{ list-style:none; margin:0; padding:0; text-align:end; }
.foot__lines li{ font-size:11.5px; color:rgba(226,236,230,.38); line-height:2; }

/* the grain, page-wide, one fixed compositor layer */
.grain--page{ position:fixed; inset:0; z-index:65; }

/* the numeral must never outgrow a phone's frame */
@media(max-width:420px){
  .wel__n{ font-size:clamp(44px,18vw,68px); }
}

/* ---------- narrow ---------- */
@media(max-width:860px){
  .ch--about .cols, .shop__cols, .apply__cols, .pgrid{ grid-template-columns:1fr; }
  .pull{ margin-top:8px; }
  .foot .wrap{ flex-direction:column; }
  .foot__lines{ text-align:start; }
  .loom__row{ grid-template-columns:clamp(56px,16vw,74px) 1fr; }
}

/* ============================================================
   AMBIENT FX — gold threads + motes woven behind the story,
   and the spine timeline that walks the page edge with scroll.
   ============================================================ */
#fx-threads, #fx-motes{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}
/* threads woven into the hero scene itself — painted between the
   atmosphere and the card, so the card floats in front of them */
#hero-threads{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
/* the story keeps its stacking above the fx canvases but lets them
   show through — the page ground comes from body/green-900 */
.story{ background:transparent; z-index:2; }
body{ background:var(--green-900); }

/* one continuous surface: alternating chapters carry a soft green pool
   that melts into the black ground at both ends, so every section
   boundary is a gradient rather than a seam */
.story .ch:nth-child(odd){
  background:linear-gradient(180deg,
    rgba(11,38,23,0)    0%,
    rgba(11,38,23,.24) 22%,
    rgba(13,48,32,.3)  50%,
    rgba(11,38,23,.24) 78%,
    rgba(11,38,23,0)  100%);
}
.story .ch--shop{
  background:
    radial-gradient(70% 52% at 88% 6%, rgba(11,38,23,.5) 0%, rgba(11,38,23,0) 62%),
    radial-gradient(46% 38% at 6% 92%, rgba(168,126,48,.07) 0%, rgba(168,126,48,0) 60%),
    linear-gradient(180deg,
      rgba(11,38,23,0)    0%,
      rgba(11,38,23,.24) 22%,
      rgba(13,48,32,.3)  50%,
      rgba(11,38,23,.24) 78%,
      rgba(11,38,23,0)  100%);
}
/* receive the hero: the first chapter's pool rises out of the same
   near-black the hero scene settles into */
.story .ch:first-child{
  background:linear-gradient(180deg,
    rgba(11,38,23,0)    0%,
    rgba(11,38,23,.26) 30%,
    rgba(13,48,32,.3)  55%,
    rgba(11,38,23,.22) 80%,
    rgba(11,38,23,0)  100%);
}

.spine-rail{
  position:fixed; top:0; bottom:0;
  inset-inline-end:22px;
  width:1px;
  background:rgba(217,185,106,.16);
  z-index:70;
}
.spine-fill{
  position:absolute; top:0; left:0; right:0;
  height:0%;
  background:linear-gradient(var(--gold-200), var(--gold-400));
  box-shadow:0 0 8px rgba(235,212,154,.55);
}
.spine-bead{
  position:fixed;
  inset-inline-end:22px;
  top:0%;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold-200);
  box-shadow:0 0 12px 3px rgba(235,212,154,.7);
  transform:translate(50%,-50%);
  z-index:71;
  transition:top .25s linear;
}
html[dir="rtl"] .spine-bead{ transform:translate(-50%,-50%); }
.spine-tag{
  position:fixed;
  inset-inline-end:40px;
  top:0%;
  transform:translateY(-50%);
  z-index:71;
  display:flex; align-items:center; gap:10px;
  color:var(--gold-200);
  font-family:var(--sans);
  font-weight:300;
  font-size:12px;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:0;
  transition:top .25s linear, opacity .3s ease;
  pointer-events:none;
}
html[lang="ar"] .spine-tag{ font-family:'AlinmaDisplay','Noto Kufi Arabic',var(--sans); }
.spine-tag.on{ opacity:1; }
.spine-tag .tendril{
  width:0; height:1px; background:var(--gold-400);
  transition:width .35s ease .05s;
}
.spine-tag.on .tendril{ width:26px; }
@media(max-width:760px){ .spine-tag{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .spine-bead, .spine-tag{ transition:none; }
}