:root{
  --ink:#0b1022; --navy:#141a2e; --navy2:#1f2c52; --gold:#c9a96a; --gold-hi:#e6cf9c;
  --moon:#9fb3d9; --paper:#f4ede1; --text:#f4ede1; --mute:#c9d0de;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; color:var(--text); font-family:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif; font-size:18px; line-height:1.95;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:radial-gradient(80% 60% at 22% 30%, #12305a 0%, rgba(10,27,51,0) 65%), linear-gradient(180deg,#081629,#0a1b33 45%,#050c1b) fixed; background-color:var(--ink); background-attachment:fixed;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px}

/* the 3D scene lives behind everything */
#world{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
html:not(.gl) #world{display:none}
.veil{position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 50%, rgba(11,16,34,0) 60%, rgba(11,16,34,.5) 100%)}
main,.foot{position:relative; z-index:1}

/* short curtain on first load */
.intro{position:fixed; inset:0; z-index:90; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--ink); pointer-events:none}
.intro svg{width:120px; fill:none; stroke-width:1.2; stroke-linecap:round}
.intro path{stroke-dasharray:130; stroke-dashoffset:130}
.intro path:first-child{stroke:var(--gold)} .intro path:last-child{stroke:var(--moon)}
.intro p{font-family:"Amiri",serif; font-size:26px; letter-spacing:.02em; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .js .intro{display:flex; animation:intro-out .8s var(--ease) 1.5s forwards}
  .js .intro path{animation:intro-draw 1.1s var(--ease) .1s forwards}
  .js .intro path:last-child{animation-delay:.3s}
  .js .intro p{animation:intro-name .8s var(--ease) .6s forwards}
  @keyframes intro-draw{to{stroke-dashoffset:0}}
  @keyframes intro-name{to{opacity:1}}
  @keyframes intro-out{to{opacity:0; visibility:hidden}}
}

.progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:60; pointer-events:none}
.progress span{display:block; height:100%; transform:scaleX(var(--p,0)); transform-origin:100% 50%; background:linear-gradient(270deg,var(--gold),var(--moon))}
.cursor{position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:1px solid rgba(236,210,155,.7); z-index:80; pointer-events:none; opacity:0; transition:opacity .4s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s}
.cursor.on{opacity:1}
.cursor.big{width:74px; height:74px; margin:-37px 0 0 -37px; background:rgba(236,210,155,.1)}
@media (hover:none){.cursor{display:none}}

/* header */
.top{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:28px; padding:12px 32px; transition:background .4s, box-shadow .4s}
.top.is-stuck{background:rgba(5,12,27,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(201,169,106,.18)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(201,169,106,.5)}
.brand span{display:flex; flex-direction:column; line-height:1.25}
.brand b{font-family:"Amiri",serif; font-size:19px; color:#fff}
.brand i{font-style:normal; font-size:9.5px; letter-spacing:.3em; color:var(--gold)}
.top__nav{display:flex; gap:26px; margin-inline-start:auto}
.top__nav a{font-size:16px; text-decoration:none; color:rgba(241,236,225,.78); transition:color .3s}
.top__nav a:hover{color:var(--gold-hi)}
.top__cta{display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border-radius:999px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--navy); font-weight:600; font-size:16px; text-decoration:none; transition:transform .3s var(--ease)}
.top__cta:hover{transform:translateY(-1px)}

/* shared pieces */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 34px; border-radius:999px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#0a1b33; font-size:17px; font-weight:600; text-decoration:none; box-shadow:0 0 0 1px rgba(236,210,155,.35), 0 14px 40px -12px rgba(201,169,106,.65); transition:transform .35s var(--ease), box-shadow .35s}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(236,210,155,.6), 0 20px 50px -12px rgba(201,169,106,.85)}
.link{display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-size:17px; text-decoration:none; background:linear-gradient(rgba(241,236,225,.3),rgba(241,236,225,.3)) 0 calc(100% - 8px)/100% 1px no-repeat; transition:color .3s}
.link:hover{color:var(--gold-hi)}
.latin{font-size:14px; font-weight:500; letter-spacing:.34em; color:var(--gold); direction:ltr; text-align:right}
.glass{background:linear-gradient(155deg, rgba(34,44,78,.82), rgba(20,28,52,.78)); border:1px solid rgba(255,255,255,.14); border-radius:24px; backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px -40px rgba(0,0,0,.8)}
.sec{position:relative; padding:clamp(84px,11vw,150px) 0}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 32px}
.wrap--narrow{max-width:860px}
.display{font-family:"Amiri",serif; font-weight:700; font-size:clamp(30px,3.9vw,52px); line-height:1.45; color:#fff; text-wrap:balance}
.display span{display:block; color:var(--gold-hi)}
.eyebrow{font-size:14.5px; font-weight:500; letter-spacing:.12em; color:var(--gold); margin-bottom:14px}
.head{max-width:680px; margin:0 auto clamp(48px,6vw,84px); text-align:center}
.head > p:last-child{margin-top:16px; color:var(--mute)}
.knot{display:block; width:64px; height:20px; margin:0 0 20px; fill:none; stroke-width:1.4; stroke-linecap:round}
.knot path:first-child{stroke:var(--gold)} .knot path:last-child{stroke:var(--moon)}

/* hero */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center}
.hero__inner{width:100%; max-width:1180px; margin:0 auto; padding:120px 32px 90px}
.hero__copy{max-width:640px}
.hero h1{margin:16px 0 26px; font-family:"Amiri",serif; font-weight:700; color:#fff; line-height:1.18}
.hero h1 span{display:block}
.h1-a{font-size:clamp(76px,10.5vw,158px); line-height:1.12; text-shadow:0 0 60px rgba(236,210,155,.25)}
.h1-b{font-size:clamp(38px,5vw,74px); line-height:1.3}
.h1-c{margin-top:10px; font-size:clamp(21px,2.3vw,32px); line-height:1.6; font-weight:400; color:var(--mute)}
.hero h1 em{font-style:normal; color:var(--gold-hi)}
.gl .hero h1, .gl .hero h1 em, .gl .hero h1 span{color:transparent; text-shadow:none}
.hero__lead{margin:0 0 32px; max-width:560px; font-size:clamp(17px,1.35vw,19px); line-height:2; color:var(--mute)}
.hero__lead strong{display:block; margin-bottom:6px; font-weight:500; color:var(--text)}
.hero__actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.hero__caption{position:absolute; left:calc(var(--hs-bx,25%) - 170px); width:340px; bottom:34px; transition:opacity .4s, color .8s; font-family:"Amiri",serif; font-size:19px; line-height:1.7; text-align:center; color:rgba(241,236,225,.8); min-height:3.4em; transition:color .8s}
[data-hs-state="safe"] .hero__caption{color:var(--gold-hi)}
.hold{position:absolute; left:var(--hs-bx,25%); top:var(--hs-by,56%); width:84px; height:84px; margin:-42px 0 0 -42px; transition:opacity .4s; padding:0; border:0; border-radius:50%; background:radial-gradient(circle, rgba(255,240,214,.16) 0%, rgba(255,240,214,0) 68%); color:var(--text); cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; font-family:inherit}
.hold svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.hold circle{fill:none; stroke-width:1.2}
.hold__track{stroke:rgba(241,236,225,.4)}
.hold__prog{stroke:var(--gold-hi); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--hs-c,0))}
.hold::after{content:""; position:absolute; inset:36px; border-radius:50%; background:#fff6e2; box-shadow:0 0 18px 4px rgba(255,240,214,.7); transition:transform .5s}
[data-hs-holding] .hold::after{transform:scale(1.6)}
.hold__hint{position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; white-space:nowrap; font-size:14px; color:rgba(241,236,225,.85); padding:3px 12px; border-radius:999px; background:rgba(5,12,27,.6); transition:opacity .5s}
[data-hs-state="safe"] .hold__hint{opacity:0}
.gl .hold{background:none}
.gl .hold::after{display:none}
.gl .hold__track{stroke:rgba(241,236,225,.22)}
.gl .hold__hint{margin-top:calc(var(--hs-r,80px) - 30px)}
.flying .hold, .flying .hero__caption{opacity:0 !important; pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  [data-hs-state="pattern"] .hold__track{animation:invite 2.8s ease-in-out infinite; transform-origin:50% 50%}
  @keyframes invite{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.16); opacity:.45}}
  .js .hero__copy > *, .js .hero__caption, .js .hold{opacity:0; animation:rise 1.1s var(--ease) forwards}
  .js .hero__copy > *{translate:0 22px}
  .js .hero__copy > :nth-child(1){animation-delay:1.6s}
  .js .hero__copy > :nth-child(2){animation-delay:1.75s}
  .js .hero__copy > :nth-child(3){animation-delay:2s}
  .js .hero__copy > :nth-child(4){animation-delay:2.2s}
  .js .hold{animation-delay:2.4s} .js .hero__caption{animation-delay:2.7s}
  @keyframes rise{to{opacity:1; translate:0 0}}
}

/* belief: words light up as you read down */
.belief{padding-bottom:clamp(40px,5vw,70px)}
.belief__body{margin-top:44px; display:grid; gap:26px; max-width:720px; font-size:clamp(19px,1.9vw,25px); line-height:2; color:var(--text)}
.scrub-on .w{opacity:.16; transition:opacity .6s}
.scrub-on .w.on{opacity:1}

/* mirror */
.mirror{padding-top:clamp(50px,6vw,90px)}
.mirror__lead{margin-top:14px; color:var(--mute)}
.mirror__choices{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:38px}
.mirror__choices button{min-height:76px; padding:16px 22px; text-align:start; font:inherit; font-size:16.5px; line-height:1.7; color:var(--text); cursor:pointer; border-radius:18px; transition:background .4s, border-color .4s, transform .4s var(--ease), box-shadow .4s}
.mirror__choices button:hover{transform:translateY(-2px); border-color:rgba(236,210,155,.6)}
.mirror__choices button[aria-pressed="true"]{background:rgba(201,169,106,.18); border-color:var(--gold-hi); box-shadow:0 0 44px -14px rgba(236,210,155,.7)}
.mirror__panel{margin-top:26px; padding:clamp(26px,4vw,44px); border-color:rgba(201,169,106,.35)}
.mirror__quote{font-size:17px; color:var(--mute)}
.mirror__quote::before{content:"موقفك: "; color:var(--gold-hi)}
/* six stations: three you walk here, three wait in the program */
.stations{position:relative; display:flex; justify-content:space-between; align-items:center; list-style:none; margin:26px 0 30px; padding:0}
.stations::before{content:""; position:absolute; inset:50% 7px auto 7px; height:1px; background:linear-gradient(270deg, var(--gold-hi) 0 44%, rgba(244,237,225,.25) 44%)}
.stations li{position:relative; width:14px; height:14px; border-radius:50%; background:var(--navy); border:1.5px solid rgba(244,237,225,.5); transition:background .5s, box-shadow .5s, border-color .5s, transform .5s var(--ease)}
.stations li.done{background:var(--gold-hi); border-color:var(--gold-hi)}
.stations li.now{background:#fff6e2; border-color:#fff6e2; transform:scale(1.35); box-shadow:0 0 0 6px rgba(230,207,156,.16), 0 0 22px 4px rgba(230,207,156,.5)}
.stations li.locked{border-style:dashed; border-color:rgba(244,237,225,.3)}
.stations li.locked:nth-child(5)::after{content:"في البرنامج"; position:absolute; top:22px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:14px; color:var(--mute)}
.mirror__count{font-size:15px; letter-spacing:.06em; color:var(--gold-hi)}
.mirror__text{margin-top:10px; font-family:"Amiri",serif; font-size:clamp(26px,3vw,38px); line-height:1.6; color:#fff; min-height:1.7em}
.mirror__sub{margin-top:2px; font-size:17px; color:var(--mute)}
.mirror__opts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:6px}
.mirror__opts[hidden]{display:none}
.mirror__opts button{padding:16px 14px; border-radius:18px; border:1px solid rgba(159,179,217,.45); background:rgba(159,179,217,.08); color:var(--text); font:inherit; cursor:pointer; text-align:center; transition:background .35s, border-color .35s}
.mirror__opts b{display:block; font-family:"Amiri",serif; font-size:24px; color:#fff}
.mirror__opts span{display:block; font-size:15.5px; line-height:1.7; color:var(--mute)}
.mirror__opts button:hover{border-color:var(--gold-hi)}
.mirror__opts button[aria-pressed="true"]{background:rgba(230,207,156,.16); border-color:var(--gold-hi)}
.mirror__end b{color:#fff; font-weight:500}
.mirror__hint{margin-top:8px; font-size:16px; color:var(--mute)}
.mirror__nav{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:26px}
.mirror__nav .btn{cursor:pointer; border:0; font-family:inherit}
.mirror__nav .btn-line{margin-top:0; cursor:pointer; background:none; font-family:inherit}
.mirror__nav .btn-line[hidden]{display:none}
.mirror__nav[hidden],.mirror__q[hidden],.mirror__end[hidden]{display:none}
.mirror__truth{font-family:"Amiri",serif; font-size:clamp(26px,2.8vw,36px); color:var(--gold-hi)}
.mirror__end p:not(.mirror__truth){margin-top:10px; font-size:clamp(17px,1.4vw,19px); line-height:2; color:#dfe4ee}
.mirror__actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:24px}
.mirror__actions .btn{gap:10px}

/* journey — plain list by default; becomes a 3D fly-through when main.js adds .journey--3d */
.journey{position:relative; padding:clamp(84px,11vw,150px) 32px}
.journey__head{max-width:680px; margin:0 auto 56px; text-align:center}
.journey__head p{margin-top:14px; color:var(--mute)}
.journey__space{list-style:none; margin:0 auto; padding:0; max-width:1116px; display:grid; grid-template-columns:1fr 1fr; gap:22px}
.jcard{padding:34px 34px 30px}
.jcard b{display:block; font-family:"Amiri",serif; font-size:54px; line-height:1; color:var(--gold-hi); direction:ltr; text-align:right; opacity:.9}
.jcard h3{margin:14px 0 12px; font-family:"Amiri",serif; font-size:clamp(24px,2.4vw,31px); line-height:1.5; color:#fff}
.jcard p{font-size:17.5px; line-height:2; color:var(--mute)}
.journey__index,.journey__cue{display:none}
.journey--3d{height:460vh; padding:0}
.journey--3d .journey__stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.journey--3d .journey__head{position:absolute; inset:92px 0 auto 0; margin:0 auto; padding:0 24px; z-index:2; transition:opacity .6s}
.journey--3d .journey__head .display{font-size:clamp(26px,3vw,40px)}
.journey--3d .journey__space{position:absolute; inset:0; max-width:none; display:block; perspective:1150px; perspective-origin:50% 52%}
.journey--3d .jcard{position:absolute; top:53%; left:50%; width:min(430px,84vw); will-change:transform,opacity; border-color:rgba(236,210,155,.28)}
.journey--3d .jcard.is-active{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 40px 90px -40px rgba(0,0,0,.9), 0 0 80px -30px rgba(236,210,155,.6)}
.journey--3d .journey__index{display:flex; flex-direction:row; justify-content:center; gap:22px; position:absolute; inset:auto 0 76px 0; z-index:3}
.journey__index button{display:flex; align-items:center; gap:12px; min-height:44px; padding:0 4px; border:0; background:none; font:inherit; font-size:15.5px; color:rgba(174,184,204,.6); cursor:pointer; transition:color .4s}
.journey__index i{font-style:normal; font-family:"Amiri",serif; font-size:17px; direction:ltr}
.journey__index button::before{content:""; width:18px; height:1px; background:currentColor; transition:width .5s var(--ease)}
.journey__index button[aria-current="step"]{color:var(--gold-hi)}
.journey__index button[aria-current="step"]::before{width:46px}
.journey--3d .journey__cue{display:block; position:absolute; inset:auto 0 26px 0; text-align:center; font-size:14px; letter-spacing:.2em; color:rgba(174,184,204,.7); transition:opacity .6s}
.journey--3d .journey__cue::after{content:""; display:block; width:1px; height:26px; margin:8px auto 0; background:linear-gradient(var(--gold),transparent)}

/* offers chooser — without JS all four offers show as a grid; with JS it becomes pick-one-see-one */
.helper{max-width:860px; margin:0 auto clamp(34px,4vw,54px); padding:26px clamp(20px,3vw,36px); border-radius:24px; background:rgba(244,237,225,.06); border:1px solid rgba(244,237,225,.16); text-align:center}
.helper__lead{font-family:"Amiri",serif; font-size:clamp(22px,2.2vw,28px); color:#fff}
.helper__lead span{color:var(--gold-hi)}
.helper__row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:18px}
.helper__row[hidden]{display:none}
.helper__row > span{flex:0 0 100%; font-size:17px; color:var(--mute)}
.helper__row button{min-height:52px; padding:0 26px; border-radius:999px; border:1px solid rgba(159,179,217,.5); background:rgba(159,179,217,.08); color:var(--text); font:inherit; font-size:17px; cursor:pointer; transition:background .35s, border-color .35s, color .35s, transform .35s var(--ease)}
.helper__row button:hover{transform:translateY(-2px); border-color:var(--gold-hi)}
.helper__row button[aria-pressed="true"]{background:var(--gold-hi); border-color:var(--gold-hi); color:var(--navy); font-weight:600}
.helper__note{min-height:1.9em; margin-top:16px; font-size:17px; color:var(--gold-hi)}
.helper__note:empty{min-height:0; margin-top:0}
.chooser__tabs{display:none}
.chooser__stage{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.offer{border-radius:28px; overflow:hidden; background:rgba(20,28,52,.82); border:1px solid rgba(244,237,225,.14); box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
.offer figure{margin:0; padding:22px 22px 6px; background:linear-gradient(165deg, var(--tone), rgba(20,28,52,0) 92%)}
.offer figure svg{display:block; width:100%; height:auto; max-height:300px}
.offer--path{--tone:rgba(63,98,160,.5)} .offer--page{--tone:rgba(150,122,70,.42)} .offer--two{--tone:rgba(170,108,94,.42)} .offer--circle{--tone:rgba(84,138,118,.42)}
.offer__body{padding:10px clamp(24px,3vw,44px) clamp(28px,3vw,40px)}
.offer__tag{font-size:16.5px; letter-spacing:.04em; color:var(--gold-hi)}
.offer h3{margin:4px 0 12px; font-family:"Amiri",serif; font-size:clamp(30px,3.2vw,44px); line-height:1.35; color:#fff}
.offer__body > p:not(.offer__tag){font-size:clamp(17px,1.35vw,19px); line-height:2; color:#dfe4ee}
.offer__feature{margin-top:18px; padding:14px 18px; border-radius:16px; border:1px solid rgba(230,207,156,.4); background:rgba(230,207,156,.08)}
.offer__feature b{display:block; font-family:"Amiri",serif; font-size:24px; font-weight:700; color:#fff}
.offer__feature span{display:block; font-size:16px; color:var(--mute)}
.offer .btn{margin-top:22px; gap:10px}
.offer .btn span{transition:transform .35s var(--ease)}
.offer .btn:hover span{transform:translateX(-5px)}
.chooser--on .chooser__body{display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:26px; align-items:stretch}
.chooser--on .chooser__tabs{display:grid; gap:12px; align-content:start}
.chooser__tabs button{position:relative; display:block; width:100%; padding:18px 24px 16px; text-align:start; border-radius:20px; border:1px solid rgba(244,237,225,.14); background:rgba(20,28,52,.7); color:var(--text); font:inherit; cursor:pointer; transition:background .4s, border-color .4s, transform .4s var(--ease)}
.chooser__tabs b{display:block; font-family:"Amiri",serif; font-size:25px; line-height:1.5; color:#fff}
.chooser__tabs span{display:block; font-size:17.5px; color:var(--mute)}
.chooser__tabs button:hover{transform:translateX(-4px); border-color:rgba(230,207,156,.6)}
.chooser__tabs button[aria-selected="true"]{background:rgba(230,207,156,.14); border-color:var(--gold-hi)}
.chooser__tabs button[aria-selected="true"]::before{content:""; position:absolute; inset:18px 0 18px auto; width:3px; border-radius:3px; background:var(--gold-hi)}
.chooser--on .chooser__stage{display:block}
.chooser--on .offer[hidden]{display:none}
.chooser--on .offer{height:100%; display:grid; grid-template-rows:auto 1fr}
@media (prefers-reduced-motion:no-preference){
  .offer.show{animation:offer-in .7s var(--ease)}
  @keyframes offer-in{from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0}}
  .offer.show .pop{opacity:0; animation:pop .6s var(--ease) forwards; animation-delay:calc(.25s + var(--i,0) * .12s)}
  @keyframes pop{from{opacity:0; translate:0 8px} to{opacity:1; translate:0 0}}
  .offer.show .draw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.2s var(--ease) .3s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .offer .breathe{transform-origin:340px 190px; animation:breathe 5.5s ease-in-out infinite}
  @keyframes breathe{0%,100%{transform:scale(.9); opacity:.8} 50%{transform:scale(1.12); opacity:1}}
}
.more{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; font-weight:600; font-size:17.5px; color:var(--gold-hi); text-decoration:none}
/* cards lean toward the pointer and catch the light */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--ease), box-shadow .5s, border-color .5s; transform-style:preserve-3d}
.tilt.is-live{transition:transform .12s linear}
.feature.tilt::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%), rgba(236,210,155,.2), transparent 60%)}
.tilt.is-live::after{opacity:1}

/* workshops */
.workshops{padding-top:clamp(84px,11vw,150px)}
#workshops{scroll-margin-top:34px}
.feature{position:relative; display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden; color:var(--mute)}
.feature figure{margin:0; min-height:420px; position:relative}
.feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.feature figure::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg, rgba(10,27,51,.1) 35%, rgba(8,20,40,.96) 100%)}
.feature__body{padding:clamp(34px,4.6vw,64px); align-self:center}
.feature .display{font-size:clamp(28px,3vw,40px)}
.feature__lead{margin:14px 0 10px; color:var(--text)}
.feature__body > p:not([class]){font-size:17px}
.btn-line{display:inline-flex; align-items:center; min-height:50px; margin-top:26px; padding:0 28px; border-radius:999px; border:1px solid var(--gold); color:var(--gold-hi); text-decoration:none; font-weight:500; font-size:17px; transition:background .35s, color .35s}
.btn-line:hover{background:var(--gold); color:var(--navy)}

/* stories */
.rail__track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px max(32px, calc((100vw - 1116px)/2)) 26px; scrollbar-width:none; cursor:grab}
.rail__track.is-drag{cursor:grabbing; scroll-snap-type:none; user-select:none}
.rail__track::-webkit-scrollbar{display:none}
.rail blockquote{flex:0 0 min(400px,82vw); scroll-snap-align:center; margin:0; padding:28px 28px 20px; border-radius:22px 22px 22px 6px; display:flex; flex-direction:column; justify-content:space-between; gap:18px}
.rail blockquote:nth-child(even){border-color:rgba(201,169,106,.3)}
.rail blockquote p{font-size:17.5px; line-height:2}
.rail blockquote footer{font-size:14px; color:var(--mute); text-align:left}
.rail__nav{display:flex; justify-content:center; gap:12px; margin-top:10px}
.rail__nav button{width:48px; height:48px; border-radius:50%; border:1px solid rgba(201,169,106,.5); background:transparent; color:var(--gold-hi); font-size:18px; cursor:pointer; transition:background .3s, color .3s}
.rail__nav button:hover{background:var(--gold); color:var(--navy)}

/* about */
.about__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(34px,5vw,80px); align-items:center}
.about figure{margin:0; border-radius:26px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 0 0 1px rgba(236,210,155,.25), 0 40px 90px -40px rgba(0,0,0,.9)}
.about figure img{width:100%; height:100%; object-fit:cover; object-position:55% 50%}
.about .display{font-size:clamp(27px,3vw,40px); margin-bottom:22px}
.about p{color:var(--mute)}
.about p + p{margin-top:16px}
.sign{margin-top:30px !important; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:15.5px}
.sign b{display:block; font-family:"Amiri",serif; font-size:19px; color:#fff}

/* start */
.start__grid{display:grid; grid-template-columns:1fr minmax(0,480px); gap:clamp(34px,6vw,90px); align-items:center}
.start .display{margin-bottom:22px}
.start p{color:var(--mute)}
.start__note{margin-top:14px; color:var(--text) !important}
.formcard{background:var(--paper); border-radius:26px; padding:30px 18px 10px; box-shadow:0 0 0 1px rgba(201,169,106,.4), 0 40px 100px -40px rgba(0,0,0,.8), 0 0 90px -30px rgba(201,169,106,.45)}
.formcard h3{font-family:"Amiri",serif; font-size:28px; color:#0f2747; text-align:center; margin-bottom:6px}
.formcard iframe{display:block; width:100%; height:540px; border:0; border-radius:14px}

/* footer */
.foot{background:rgba(5,12,27,.85); padding:64px 0 28px; border-top:1px solid rgba(201,169,106,.16); color:var(--mute); font-size:16.5px}
.foot__grid{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.foot__name{font-family:"Amiri",serif; font-size:28px; color:#fff}
.foot .latin{margin:2px 0 12px; font-size:11px}
.foot nav{display:flex; gap:10px; flex-wrap:wrap}
.foot nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; border:1px solid rgba(174,184,204,.3); text-decoration:none; font-size:15.5px; transition:border-color .3s, color .3s}
.foot nav a:hover{border-color:var(--gold); color:var(--gold-hi)}
.foot__copy{margin-top:44px; text-align:center; font-size:14.5px; color:rgba(174,184,204,.6)}

/* scroll reveals */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; translate:0 28px; transition:opacity 1s var(--ease), translate 1s var(--ease), transform .6s var(--ease), box-shadow .5s, border-color .5s; transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s}
  .js .reveal.in{opacity:1; translate:0 0}
  .mirror__panel.show{animation:panel-in .9s var(--ease)}
  .mirror__q.show, .mirror__end.show{animation:panel-in .7s var(--ease)}
  @keyframes panel-in{from{opacity:0; translate:0 16px} to{opacity:1; translate:0 0}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

@media (max-width:899px){
  body{font-size:17px}
  .top{padding:10px 18px; gap:12px}
  .top__nav{display:none}
  .top__cta{margin-inline-start:auto}
  .wrap{padding:0 22px}
  .hero{align-items:flex-start}
  .hero__inner{padding:92px 22px 280px}
  .hero h1{margin:10px 0 16px}
  .h1-a{font-size:clamp(64px,21vw,96px)}
  .h1-b{font-size:clamp(31px,9.4vw,44px)}
  .h1-c{font-size:19px; margin-top:6px}
  .hero__lead{margin-bottom:22px; line-height:1.85; font-size:16.5px}
  .hero__lead strong{display:none}
  .hero .btn{width:100%}
  .hero__actions{gap:10px}
  .hero__caption{left:22px; right:22px; width:auto; bottom:10px; font-size:16.5px}
  .mirror__choices{grid-template-columns:1fr}
  .mirror__panel .btn, .mirror__nav .btn-line{width:100%; justify-content:center}
  .mirror__opts{grid-template-columns:1fr}
  .journey{padding-inline:22px}
  .journey__space{grid-template-columns:1fr}
  .journey--3d .journey__head{inset:84px 0 auto 0}
  .journey--3d .journey__head p{display:none}
  .journey--3d .jcard{top:52%; padding:26px 24px 24px}
  .journey--3d .journey__index{gap:2px; inset:auto 0 70px 0}
  .journey__index span{display:none}
  .journey__index button{min-width:44px; justify-content:center}
  .journey__index button::before{display:none}
  .helper__row button{flex:1 1 100%}
  .chooser__stage{grid-template-columns:1fr}
  .chooser--on .chooser__body{grid-template-columns:1fr; gap:16px}
  .chooser--on .chooser__tabs{grid-template-columns:1fr 1fr; gap:10px}
  .chooser__tabs button{padding:14px 16px 12px}
  .chooser__tabs b{font-size:20px}
  .chooser__tabs span{font-size:16px; line-height:1.6}
  .chooser__tabs button[aria-selected="true"]::before{inset:auto 16px 0 16px; width:auto; height:3px}
  .offer .btn{width:100%}
  .feature{grid-template-columns:1fr}
  .feature figure{min-height:230px}
  .feature figure::after{background:linear-gradient(180deg, rgba(10,27,51,0) 40%, rgba(8,20,40,.96) 100%)}
  .btn-line{width:100%; justify-content:center}
  .rail__track{padding-inline:22px}
  .about__grid,.start__grid{grid-template-columns:1fr}
  .about figure{aspect-ratio:4/3}
  .formcard{padding:26px 8px 6px}
  .foot__grid{flex-direction:column; align-items:flex-start}
}