/* abdulaziz.alturki.sa. The palette is his own photo: that clear sky, the mustard of his hoodie, and the night he flies through. */
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Lalezar-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Lalezar-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:160 700;font-display:swap;src:url(/fonts/ReadexPro-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:160 700;font-display:swap;src:url(/fonts/ReadexPro-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marhey';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Marhey-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Marhey';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Marhey-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cairo Play';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/Cairo-Play-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Cairo Play';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/Cairo-Play-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --sticker:'Marhey','Lalezar',system-ui,sans-serif; --play:'Cairo Play','Lalezar',sans-serif;
  --sky1:#2F5F99; --sky2:#3E74B6; --sky3:#6EA8DE; --sky4:#A7CBEA;
  --night:#06152C; --night2:#0C2649;
  --mustard:#D9A93A; --sun:#FFD24D; --coral:#EF5B43; --coral-bg:#D63D27; --coral-ink:#C2381F; --green:#1E7A55;
  --ink:#0B1E38; --ink2:#22344E; --muted:#5A687B; --paper:#FBF6EC; --paper2:#F3EBDB; --card:#FFFFFF; --line:#E7DCC7;
  --display:'Lalezar','Readex Pro',system-ui,sans-serif;
  --font:'Readex Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 2px rgba(11,30,56,.06),0 22px 44px -26px rgba(11,30,56,.5);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--font);overflow-x:clip}
[dir="rtl"] body{line-height:1.8}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
@media (min-width:1800px){.wrap{max-width:1440px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:60;padding:8px 14px;border-radius:10px;background:var(--ink);color:#fff}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
/* on the sky, the night and the dark cards the ring turns sun yellow */
:is(.flight,.contact,.foot,.quote,.n-tiktok,.reel,.lang-wipe) :focus-visible,.bar:not(.solid) :focus-visible{outline-color:var(--sun)}
/* Arabic letters join: no letter-spacing on them */
:lang(ar) :is(.pg-h,.h-step,.bp-head,.bp-route span,.bp-grid dt,.bp-mail span,.ph-diss .lab){letter-spacing:0}

/* ---------------- top bar ---------------- */
.bar{position:fixed;z-index:50;top:max(10px,env(safe-area-inset-top));inset-inline:12px;max-width:1140px;margin-inline:auto;height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-inline:8px;border-radius:999px;color:#fff;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .35s,color .35s,box-shadow .35s}
.bar.solid{color:var(--ink);background:rgba(251,246,236,.92);box-shadow:inset 0 0 0 1px rgba(231,220,199,.9),0 12px 28px -20px rgba(11,30,56,.5)}
.bar:not(.solid) :is(.mark>span,.lang){text-shadow:0 1px 8px rgba(11,30,56,.45)}
.mark{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;font:400 21px/1 var(--display);padding-top:3px}
.mark img{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--sun)}
.mark>span{white-space:nowrap}
@media (max-width:420px){:lang(en) .mk-2{display:none}}
.acts{display:flex;align-items:center;gap:6px}
.lang{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;text-decoration:none;font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1.5px currentColor}
.pill{height:44px;display:inline-flex;align-items:center;padding-inline:20px;border-radius:999px;background:var(--sun);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 6px 16px -8px rgba(160,110,0,.8);transition:background .2s,translate .2s}
.lang,.mark img{transition:background .2s,box-shadow .2s}
@media (hover:hover){
  .pill:hover{background:#FFE07A;translate:0 -1px}
  .lang:hover{background:rgba(255,255,255,.18)}
  .bar.solid .lang:hover{background:rgba(11,30,56,.07)}
  .mark:hover img{box-shadow:0 0 0 3px var(--sun)}
}

/* ---------------- the flight: hero + trip on one sticky stage ---------------- */
.flight{position:relative;--t:0;--o:0}
/* when a phone's browser bar slides away the screen grows past the stage: what shows below it matches the sky, then the night */
.js:not(.reduce) .flight{height:var(--track,1100vh);background:var(--night);background:color-mix(in srgb,var(--sky4),var(--night) calc(min(1,var(--t) * 1.6) * 100%))}
/* --IW: his photo's width in the phone layout; on a wide-ish portrait screen (a tablet) the height caps it, so his name and the tagline still fit above him */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;isolation:isolate;--IW:min(118vw,58svh)}
.js:not(.reduce) .stage{position:sticky;top:0}
.sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 34%,var(--sky3) 70%,var(--sky4) 100%)}
.sky .sun{position:absolute;width:90vmax;height:90vmax;inset-inline-start:-38vmax;top:-46vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,236,190,.16) 38%,transparent 64%)}
[dir="rtl"] .sky .sun{inset-inline-start:auto;inset-inline-end:-38vmax}
.sky .night{position:absolute;inset:0;opacity:clamp(0,calc((var(--t) - .15) * 1.6),1);background:radial-gradient(120% 90% at 50% 100%,var(--night2),var(--night) 70%)}
.sky .stars{position:absolute;inset:0;width:100%;height:100%;opacity:clamp(0,calc((var(--t) - .4) * 1.8),1)}
.clouds{pointer-events:none}
.clouds .wh{fill:#fff}
.clouds .sh{fill:#8DB6E0;opacity:.6}
.c-far{position:absolute;inset:0;z-index:1;opacity:clamp(0,calc(.92 - var(--t) * 1.5),1);transform:translateY(calc(var(--t) * 90vh))}
.c-far .cl{position:absolute;display:block;width:var(--w);animation:drift 38s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
.c-far .cl:nth-child(2n){animation-duration:52s}
.c-far .cl svg{width:100%;height:auto;overflow:visible}
@keyframes drift{from{translate:-4vw 0}to{translate:4vw 0}}
.c-near{position:absolute;z-index:4;left:-2%;width:104%;max-width:none;bottom:-2px;height:clamp(110px,17svh,190px);opacity:clamp(0,calc(1 - var(--t) * 2),1);transform:translateY(calc(var(--t) * 70vh))}
@media (min-width:640px) and (min-aspect-ratio:1/1){.c-far .cl{width:var(--ww)}}

/* his name, behind him */
.giant{position:absolute;z-index:2;inset-inline:0;top:calc(100svh - var(--IW) * .985 - min(24vw,21svh) * 1.15);display:flex;flex-direction:column;align-items:center;font:400 min(24vw,21svh)/.86 var(--display);color:#fff;text-align:center;text-shadow:0 10px 40px rgba(11,30,56,.22);transform:translateY(calc(var(--t) * -34vh));opacity:calc(1 - var(--t) * 2.8);pointer-events:none;white-space:nowrap}
.giant span{-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;text-shadow:0 .05em 0 var(--ink),0 12px 34px rgba(11,30,56,.3)}
.giant .g2{color:var(--sun)}
:lang(en) .giant{font-size:min(19vw,20svh);line-height:.9;text-transform:uppercase;top:calc(100svh - var(--IW) * .985 - min(19vw,20svh) * 1.3)}
.me{position:absolute;z-index:3;left:50%;bottom:0;width:var(--IW);translate:-50% 0;transform-origin:50% 100%;transform:translateY(calc(var(--t) * -78%)) scale(calc(1 - var(--t) * .25)) rotate(calc(var(--t) * -6deg));opacity:calc(1 - var(--t) * 2.6);pointer-events:none}
.me img{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(11,30,56,.25))}
.h-copy{position:absolute;z-index:5;top:calc(84px + env(safe-area-inset-top));inset-inline:20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff;opacity:calc(1 - var(--t) * 2.2);transform:translateY(calc(var(--t) * -30px))}
.kicker{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;background:rgba(11,30,56,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:500}
.tagline{font-size:clamp(18px,4.8vw,26px);font-weight:600;line-height:1.35;max-width:22ch;text-shadow:0 1px 2px rgba(11,30,56,.55),0 2px 18px rgba(11,30,56,.45)}
/* his caption stickers */
.stickers{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:calc(1 - var(--t) * 2.4)}
.sk{position:absolute;padding:7px 15px 8px;border-radius:14px;font:700 clamp(16px,4.2vw,23px)/1.2 var(--sticker);white-space:nowrap;box-shadow:0 8px 0 -2px rgba(11,30,56,.22),0 14px 26px -12px rgba(11,30,56,.5);animation:sk-in .7s cubic-bezier(.3,1.6,.5,1) both,bob 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * .18s + .5s),calc(var(--i) * .7s + 1.2s)}
/* on phones all three sit under his chin, clear of his name and his face */
.sk.s1{--i:0;background:#fff;color:var(--ink);left:3%;top:calc(100svh - var(--IW) * .64);rotate:-4deg}
.sk.s2{--i:1;background:var(--sun);color:var(--ink);right:4%;top:calc(100svh - var(--IW) * .49);rotate:-5deg}
.sk.s3{--i:2;background:var(--coral-bg);color:#fff;left:4%;top:calc(100svh - var(--IW) * .47);rotate:-4deg}
@keyframes sk-in{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes bob{50%{translate:0 -7px}}
/* the cue lives in .h-copy: on phones it drops to the bottom of the screen (.h-copy starts 84px down), on wide screens it
   follows the tagline in the same column, so the two can never overlap whatever size the text grows to */
.cue{position:absolute;left:50%;translate:-50% 0;top:calc(100svh - 84px - env(safe-area-inset-top) - max(18px,env(safe-area-inset-bottom)) - 48px);display:inline-flex;align-items:center;gap:10px;width:max-content;min-height:48px;padding-inline:20px 16px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;box-shadow:0 10px 30px -12px rgba(11,30,56,.55);opacity:calc(1 - var(--t) * 3);white-space:nowrap;transition:background .2s}
.cue .plane-i{flex:none;color:var(--coral);rotate:180deg;animation:cue 1.8s ease-in-out infinite}
@media (hover:hover){.cue:hover{background:#fff}}
@keyframes cue{50%{translate:0 5px}}

/* the globe and the trip */
.globe{position:absolute;z-index:3;left:var(--gx,50%);top:var(--gy,50%);width:var(--gd,80vmin);height:var(--gd,80vmin);translate:-50% -50%;opacity:clamp(0,calc((var(--t) - .42) * 2.2),1);transform:translateY(calc((1 - var(--t)) * 60vh)) scale(calc(.5 + var(--t) * .5));pointer-events:none}
.hud{position:absolute;z-index:6;top:calc(80px + env(safe-area-inset-top));inset-inline:20px;display:grid;justify-items:center;gap:2px;color:#fff;text-align:center;opacity:var(--hud,0);pointer-events:none}
.h-place{display:flex;flex-direction:column;align-items:center}
.h-place b{font:400 clamp(28px,8vw,52px)/1.05 var(--display);color:#fff;padding-top:4px;text-align:center;text-wrap:balance}
.h-sub{display:flex;gap:10px;font-size:14px;font-weight:500;min-height:1.4em}
.h-c{color:#fff}
.h-w{color:var(--sun)}
.h-step{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--sky4);margin-top:4px;opacity:var(--step,1)}
.cards{position:absolute;inset:0;z-index:7;pointer-events:none}
.pc{position:absolute;inset-inline:max(14px,calc(50% - 290px));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:36% 1fr;gap:14px;align-items:center;padding:10px;border-radius:22px;background:#FFFDF8;color:var(--ink);box-shadow:0 24px 60px -24px rgba(0,0,0,.65);opacity:var(--s,0);transform:translateY(calc((1 - var(--s,0)) * 26px)) rotate(calc(var(--tilt) * .4)) scale(calc(.96 + var(--s,0) * .04));pointer-events:none}
.pc.is-on{pointer-events:auto}
.pc-photo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--paper2)}
.pc-photo img{width:100%;height:100%;object-fit:cover}
.pc-photo .pc-flag{position:absolute;inset-inline-start:6px;top:6px;width:30px;height:22px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.3)}
.pc-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-inline-end:4px}
.pc-where{display:flex;flex-direction:column;line-height:1.15}
.pc-where b{font:400 22px/1.1 var(--display);padding-top:2px}
.pc-where span{font-size:12px;font-weight:500;color:var(--muted)}
.pc-where span+span{color:var(--coral-ink)}
.pc-quote{font-size:15px;font-weight:600;line-height:1.45}
.pc-what{display:none;font-size:13px;color:var(--muted);line-height:1.45}
.pc-watch{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding-inline:14px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:background .2s}
@media (hover:hover){.pc-watch:hover{background:var(--sky1)}}
.pc.stamped .pc-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--sun);animation:land .6s ease-out both}
@keyframes land{from{opacity:1}to{opacity:0}}
.outro{position:absolute;z-index:7;inset-inline:20px;bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff;opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 20px));pointer-events:none}
.o-h{font:400 clamp(40px,10.5vw,76px)/1.1 var(--display);padding-top:6px;color:var(--sun);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:0 .05em 0 var(--ink)}
.o-p{font-size:clamp(15px,3.8vw,19px);font-weight:500;max-width:30ch;color:#E6EEF8}
.skip-trip{display:inline-flex;align-items:center;min-height:40px;margin-top:8px;padding:5px 16px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);pointer-events:none;transition:background .2s}
.skip-trip.on{pointer-events:auto}
@media (hover:hover){.skip-trip.on:hover{background:rgba(255,255,255,.24)}}
@media (min-width:640px) and (min-aspect-ratio:1/1){
  /* wide screens: he stands on the end side, his name on the start side, his hand reaching over it.
     A tall screen (a portrait monitor or tablet) keeps the phone layout, scaled up. */
  .stage{--W:min(88svh,58vw);--cx:68vw}
  [dir="rtl"] .stage{--cx:32vw}
  .me{width:var(--W);left:var(--cx)}
  /* everything here scales with the screen (vw and svh only), so his head keeps clear of his name from 1280 to 2560 */
  .giant{top:max(16svh,76px);inset-inline:auto;inset-inline-start:5vw;align-items:flex-start;text-align:start;font-size:min(14.5vw,25svh);line-height:.86}
  :lang(en) .giant{top:max(18svh,76px);font-size:min(9.6vw,17svh);line-height:.92}
  .h-copy{top:calc(max(16svh,76px) + 2svh + min(14.5vw,25svh) * 1.9);bottom:auto;inset-inline:auto;inset-inline-start:5vw;align-items:flex-start;text-align:start;max-width:max(420px,24vw);gap:14px}
  :lang(en) .h-copy{top:calc(max(18svh,76px) + 2svh + min(9.6vw,17svh) * 2.05)}
  .kicker{font-size:clamp(13px,.8vw,18px)}
  .tagline{font-size:clamp(24px,1.5vw,34px);max-width:20ch}
  .cue{position:static;translate:none;margin-top:6px;min-height:clamp(48px,3vw,60px);font-size:clamp(15px,.85vw,20px);background:var(--ink);color:#fff}
  .cue .plane-i{color:var(--sun)}
  .cue:hover{background:var(--ink2)}
  .sk{font-size:clamp(18px,1.45vw,36px)}
  /* beside his head and his hand, but never past the screen's edge (a sticker is under 12em wide) */
  .sk.s1{left:min(calc(var(--cx) + var(--W) * .21),calc(100vw - 12em));top:calc(100svh - var(--W) * .86);rotate:5deg}
  .sk.s2{right:auto;left:min(calc(var(--cx) + var(--W) * .3),calc(100vw - 11em));top:calc(100svh - var(--W) * .49)}
  .sk.s3{left:calc(var(--cx) - var(--W) * .5);top:calc(100svh - var(--W) * .7)}
  .c-near{height:clamp(110px,16svh,180px)}
  :lang(en) .sk.s3{top:calc(100svh - var(--W) * .3)}
  [dir="rtl"] .sk.s1{left:calc(var(--cx) - var(--W) * .46);top:calc(100svh - var(--W) * .86);rotate:-4deg}
  [dir="rtl"] .sk.s2{left:calc(var(--cx) + var(--W) * .2);top:calc(100svh - var(--W) * .3)}
  /* the HUD sits right above the postcard; on a short screen both move down so the HUD clears the top bar */
  .hud{inset-inline:auto;inset-inline-end:10vw;top:auto;bottom:min(calc(50% + 226px),calc(100% - 308px));justify-items:end;text-align:end;width:clamp(380px,21vw,500px)}
  .h-place{align-items:flex-end}
  .h-place b{text-align:end}
  .pc{inset-inline:auto;inset-inline-end:10vw;bottom:auto;top:max(calc(50% - 210px),324px);margin-top:0;width:clamp(380px,21vw,500px);grid-template-columns:clamp(150px,8.4vw,200px) 1fr;padding:12px;transform:translateY(calc((1 - var(--s,0)) * 30px)) rotate(var(--tilt)) scale(calc(.94 + var(--s,0) * .06))}
  /* the outro takes the postcard's place, beside the globe instead of over it */
  .outro{inset-inline:auto;inset-inline-end:10vw;width:clamp(380px,26vw,600px);bottom:auto;top:50%;translate:0 -50%;align-items:flex-end;text-align:end}
  .o-h{font-size:clamp(40px,3.4vw,84px)}
  .pc-what{display:block}
  .pc-where b{font-size:26px}
  .pc-quote{font-size:16px}
}
/* a short landscape screen (a phone on its side): a smaller name, no kicker, the HUD at the top, a compact postcard at the bottom */
@media (min-width:640px) and (min-aspect-ratio:1/1) and (max-height:560px){
  .giant{font-size:min(14.5vw,20svh)}
  :lang(en) .giant{font-size:min(9.6vw,15svh)}
  .h-copy{top:calc(max(16svh,76px) + 2svh + min(14.5vw,20svh) * 1.9)}
  :lang(en) .h-copy{top:calc(max(18svh,76px) + 2svh + min(9.6vw,15svh) * 2.05)}
  .kicker{display:none}
  .tagline{font-size:18px;max-width:26ch}
  .cue{min-height:44px;font-size:14px}
  .sk{font-size:14px}
  .sk.s1{display:none}
  [dir="rtl"] .sk.s2{top:calc(100svh - var(--W) * .2)}
  .hud{top:74px;bottom:auto}
  .h-place b{font-size:26px}
  .h-sub{font-size:13px}
  .h-step{display:none}
  .skip-trip{min-height:34px;margin-top:2px}
  .outro{width:min(380px,40vw)}
  .pc{top:auto;bottom:12px;width:min(440px,46vw);grid-template-columns:96px 1fr;padding:10px}
  .pc-what{display:none}
  .pc-where b{font-size:20px}
  .pc-quote{font-size:14px}
}
/* without the scroll story (no JS, or less motion): the hero, then the postcards as a grid */
html:not(.js) .globe,html:not(.js) .hud,html:not(.js) .outro,html:not(.js) .skip-trip,.reduce .hud,.reduce .outro,.reduce .skip-trip,.reduce .globe{display:none}
html:not(.js) .stage,.reduce .stage{height:auto;min-height:100svh}
html:not(.js) .cards,.reduce .cards{position:relative;inset:auto;margin-top:100svh;display:grid;gap:14px;padding:24px 16px 40px;background:var(--night)}
html:not(.js) .pc,.reduce .pc{position:relative;inset:auto;margin:0;width:auto;opacity:1;transform:none;pointer-events:auto}
@media (min-width:760px){html:not(.js) .cards,.reduce .cards{grid-template-columns:repeat(3,1fr)}}
html:not(.js) .me,.reduce .me{bottom:auto;top:calc(100svh - var(--IW))}
html:not(.js) .c-near,.reduce .c-near{bottom:auto;top:calc(100svh - clamp(110px,17svh,190px))}
html:not(.js) .cue,.reduce .cue{top:calc(100svh - 84px - env(safe-area-inset-top) - 70px)}
html:not(.js) .pc-photo img[data-src]{display:none}
@media (min-width:640px) and (min-aspect-ratio:1/1){html:not(.js) .me,.reduce .me{top:calc(100svh - var(--W))}html:not(.js) .c-near,.reduce .c-near{top:calc(100svh - clamp(110px,16svh,180px))}html:not(.js) .cue,.reduce .cue{top:auto}}

/* ---------------- numbers ---------------- */
/* "skip the trip" lands here with nothing of the trip showing above: the top bar covers part of the padding */
.numbers{padding-block:88px 10px;scroll-margin-top:0}
.numbers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.numbers li{position:relative;padding:18px 18px 16px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.numbers li b{font:400 clamp(34px,10vw,54px)/1 var(--display);padding-top:6px;white-space:nowrap}
.numbers li b small{font-size:.62em;margin-inline-start:3px}
:lang(en) .numbers li b small{margin-inline-start:1px}
.numbers li>span{font-size:14px;color:var(--muted);font-weight:500}
.numbers .n-tiktok{background:var(--ink);color:#fff;box-shadow:none}
.numbers .n-tiktok>span{color:#AFC0D6}
.numbers .n-views{background:var(--sun);box-shadow:none}
.numbers .n-views>span{color:#5C4A10}
.numbers .note{margin-top:12px;font-size:13px;color:var(--muted)}
@media (min-width:760px){.numbers ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.numbers ul{grid-template-columns:repeat(6,minmax(0,1fr))}.numbers li{padding-inline:16px}.numbers li b{font-size:clamp(34px,3.3vw,48px)}}

/* ---------------- section heads ---------------- */
main{overflow-x:clip}
main>section{margin-top:96px}
main>section.flight,main>section.numbers{margin-top:0}
.sec-h{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.sec-h h2,.phd h2,.contact h2{font:400 clamp(40px,11vw,76px)/1.02 var(--display);padding-top:8px}
/* no word left alone on a short block's last line */
:is(.tagline,.sec-h h2,.phd h2,.contact h2,.o-h,.o-p,.pc-quote,.v-t,.fm-d,.fm-q span,.b-t span,.ct-p,.lost .lead,.lost .sub){text-wrap:balance}
.phd h2{font:800 clamp(38px,10vw,70px)/1.15 var(--play);padding-top:0}
.sec-h p{color:var(--muted);max-width:56ch;font-size:17px}

/* ---------------- passport: a book whose pages turn like a magazine's ---------------- */
@property --a{syntax:'<angle>';inherits:true;initial-value:0deg}
/* one page has a passport's shape, as big as the screen allows; from 900px the book opens to a spread of two */
/* the turning pages must not count as a scroll anchor: a browser that anchors would nudge the page as they move */
.passport{overflow-anchor:none;overflow-x:clip;--pw:min(calc(100vw - 48px),420px,calc((100svh - 250px) * .72));--ph:calc(var(--pw) / .72)}
@media (min-width:900px){.passport{--pw:min(44vw,470px,calc((100svh - 240px) * .72))}}
.bk-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.pg{position:relative;width:var(--pw);height:var(--ph);container-type:inline-size;display:flex;flex-direction:column;overflow:hidden;border-radius:6px 14px 14px 6px;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.55),transparent 40%),repeating-radial-gradient(circle at 50% 120%,rgba(30,122,85,.07) 0 1px,transparent 1px 9px),repeating-linear-gradient(115deg,rgba(62,116,182,.05) 0 1px,transparent 1px 7px),#F4EEDD;box-shadow:inset 0 0 0 1px #E2D6BA}
[dir="rtl"] .pg{border-radius:14px 6px 6px 14px}
.page{padding:5cqw 4.5cqw 10cqw}
.pg-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:2.4cqw;margin-bottom:1cqw;border-bottom:1.5px dashed #CDBF9F;color:#7A6A48;font-size:12px;font-weight:600;letter-spacing:.06em}
.pg-h b{font:400 clamp(24px,7.4cqw,36px)/1 var(--display);color:var(--ink);letter-spacing:0;padding-top:4px}
.pg-stamps{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:space-evenly;align-items:center;padding-top:1cqw}
.pg-f{position:absolute;bottom:3.4cqw;inset-inline:0;text-align:center;font-size:12px;color:#9A8A68}
/* a stamp's width is a share of the page (--w, in cqw), nudged off the grid by --dx/--dy */
.stamp{width:calc(var(--w) * 1cqw);margin:-1cqw -1.2cqw;padding:0;border:0;background:none;cursor:pointer;rotate:var(--r);translate:var(--dx,0) var(--dy,0);color:var(--ink);transition:scale .2s,filter .2s}
.stamp svg{width:100%;height:auto;overflow:visible}
.stamp svg *{stroke:currentColor}
.stamp svg text,.stamp svg .t-pl{fill:currentColor;stroke:none}
.stamp:focus-visible,.stamp.sel{scale:1.08;filter:drop-shadow(0 6px 10px rgba(11,30,56,.25))}
@media (hover:hover){.stamp:hover{scale:1.08;filter:drop-shadow(0 6px 10px rgba(11,30,56,.25))}}
.stamp .t-ring{font:700 8.5px var(--font);letter-spacing:.12em}
.stamp .t-ar{font:400 17px var(--display)}
.stamp .t-en{font:700 10.5px var(--font);letter-spacing:.08em}
.stamp .t-sm{font:700 8px var(--font);letter-spacing:.12em}
.stamp .t-yr{font:400 18px var(--display)}
/* the cover: green leather and gold */
.pg-cover{align-items:center;justify-content:center;gap:10px;color:#E7C978;background:radial-gradient(120% 90% at 30% 20%,#1F6A49,#0F4430 70%);box-shadow:inset 0 0 0 2px #2F7C58}
.pg-cover .emb{width:28cqw;height:auto;fill:#E7C978}
.pg-cover .c1{font:400 clamp(18px,5.6cqw,26px)/1.2 var(--display);padding-top:6px;text-align:center}
.pg-cover .c2{font:400 clamp(26px,8cqw,38px)/1 var(--display)}
.pg-cover .c3{font-size:13px;font-weight:600;letter-spacing:.4em}
/* inside the cover: the holder */
.pg-in{align-items:center;padding:13cqw 8cqw 9cqw;gap:6px;text-align:center}
.pg-in img{width:28cqw;height:28cqw;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sun)}
.in-who{margin-top:5cqw;font-size:12px;font-weight:700;color:#7A6A48}
.in-name{font:400 clamp(22px,7cqw,32px)/1.2 var(--display);padding-top:4px}
.in-sig{font:700 clamp(24px,8.5cqw,38px)/1.5 var(--sticker);color:#1F4FA3;rotate:-5deg}
.in-hint{margin-top:auto;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:balance}
/* inside the back cover: the trip so far */
.pg-end{align-items:center;justify-content:center;gap:14px;padding:10cqw;text-align:center}
.end-h{font:400 clamp(28px,9cqw,46px)/1.15 var(--display);padding-top:4px;color:var(--ink);text-wrap:balance}
.end-p{color:var(--muted);font-size:15px;line-height:1.5;text-wrap:balance}
.end-tt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background .2s}
@media (hover:hover){.end-tt:hover{background:var(--sky1)}}
/* without JS the pages sit side by side in a row you can swipe */
.book{display:grid;grid-auto-flow:column;grid-auto-columns:var(--pw);gap:14px;max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;overscroll-behavior-x:contain}
.book>.pg{scroll-snap-align:start}
html:not(.js) .bk-nav{display:none}
/* with JS, the book. It has its size before the script binds the pages, so nothing jumps */
.js .book{display:block;position:relative;width:var(--pw);height:var(--ph);max-width:none;overflow:visible;padding:0;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
@media (min-width:900px){.js .book{width:calc(var(--pw) * 2)}}
.js .book:not(.built)>.pg{display:none}
.book:focus-visible{outline-offset:8px}
.js .book::before{content:"";position:absolute;inset:auto 6% -18px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,30,56,.3),transparent);pointer-events:none}
.bk-view{position:absolute;inset:0;perspective:3600px;transition:translate .8s cubic-bezier(.35,.1,.2,1)}
/* one page at a time: a page turned past its spine leaves the frame */
.book.single .bk-view{overflow:hidden;border-radius:6px 14px 14px 6px}
[dir="rtl"] .book.single .bk-view{border-radius:14px 6px 6px 14px}
/* a wide screen with the book shut: the cover alone, in the middle */
.book.spread.closed .bk-view{translate:calc(var(--pw) * -.5) 0}
[dir="rtl"] .book.spread.closed .bk-view{translate:calc(var(--pw) * .5) 0}
.bk-base,.leaf{position:absolute;top:0;left:0;width:var(--pw);height:var(--ph)}
.spread .bk-base,.spread .leaf{left:var(--pw)}
[dir="rtl"] .spread .bk-base,[dir="rtl"] .spread .leaf{left:0}
/* a leaf turns on its spine: --a goes from 0 (on the pile) to 180deg (turned over) */
.leaf{transform-style:preserve-3d;transform-origin:left center;transform:rotateY(calc(var(--a) * -1));transition:--a var(--dur,.8s) cubic-bezier(.35,.1,.2,1);will-change:transform}
[dir="rtl"] .leaf{transform-origin:right center;transform:rotateY(var(--a))}
.leaf.drag,.leaf.instant,.reduce .leaf,.reduce .bk-view{transition:none}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.front{transform:rotateY(0deg)}
.face.back{transform:rotateY(180deg)}
/* the side turned away from you is hidden by the page's own angle too: some engines draw it mirrored through the front */
@supports (opacity:cos(1deg)){.face.front{opacity:clamp(0,cos(var(--a)) * 1000,1)}.face.back{opacity:clamp(0,cos(var(--a)) * -1000,1)}}
.face>.pg{width:100%;height:100%}
/* each page of an open spread darkens a little toward the fold */
.spread .face.front>.pg:not(.pg-cover),.spread .bk-base>.pg,[dir="rtl"] .spread .face.back>.pg{box-shadow:inset 0 0 0 1px #E2D6BA,inset 22px 0 24px -22px rgba(60,40,10,.38)}
.spread .face.back>.pg,[dir="rtl"] .spread .face.front>.pg:not(.pg-cover),[dir="rtl"] .spread .bk-base>.pg{box-shadow:inset 0 0 0 1px #E2D6BA,inset -22px 0 24px -22px rgba(60,40,10,.38)}
/* a page darkens as it lifts, most at the spine */
.face::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(11,30,56,.42),rgba(11,30,56,.08) 55%,rgba(11,30,56,0))}
.face.back::after,[dir="rtl"] .face.front::after{background:linear-gradient(270deg,rgba(11,30,56,.42),rgba(11,30,56,.08) 55%,rgba(11,30,56,0))}
[dir="rtl"] .face.back::after{background:linear-gradient(90deg,rgba(11,30,56,.42),rgba(11,30,56,.08) 55%,rgba(11,30,56,0))}
@supports (opacity:sin(1deg)){.face::after{opacity:calc(sin(var(--a)) * .9)}}
/* the top page's outer corner, folded over: pull it */
.leaf.top .face.front>.pg:not(.pg-cover)::before,.leaf.top .face.front>.pg:not(.pg-cover)::after{content:"";position:absolute;z-index:3;bottom:0;right:0;width:38px;height:38px;pointer-events:none;transition:width .25s,height .25s}
.leaf.top .face.front>.pg:not(.pg-cover)::before{background:linear-gradient(to top left,#DDD0B0 50%,transparent 50%)}
.leaf.top .face.front>.pg:not(.pg-cover)::after{background:linear-gradient(to bottom right,#FFFDF6 44%,#E2D4B4 50%,transparent 50%);filter:drop-shadow(-2px -2px 3px rgba(60,40,10,.2))}
[dir="rtl"] .leaf.top .face.front>.pg:not(.pg-cover)::before,[dir="rtl"] .leaf.top .face.front>.pg:not(.pg-cover)::after{right:auto;left:0}
[dir="rtl"] .leaf.top .face.front>.pg:not(.pg-cover)::before{background:linear-gradient(to top right,#DDD0B0 50%,transparent 50%)}
[dir="rtl"] .leaf.top .face.front>.pg:not(.pg-cover)::after{background:linear-gradient(to bottom left,#FFFDF6 44%,#E2D4B4 50%,transparent 50%);filter:drop-shadow(2px -2px 3px rgba(60,40,10,.2))}
@media (hover:hover){.book:hover .leaf.top .face.front>.pg:not(.pg-cover)::before,.book:hover .leaf.top .face.front>.pg:not(.pg-cover)::after{width:54px;height:54px}}
.bk-nav{width:min(100%,560px)}
/* a stamp's video, under the book */
.visa{margin-top:14px}
.v-card{scroll-margin-bottom:16px}
.visa .v-empty{color:var(--muted);font-size:15px}
.v-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);animation:pop .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{opacity:0;translate:0 10px}}
.v-card img{flex:none;width:54px;height:40px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.v-card div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v-card b{font:400 24px/1.1 var(--display);padding-top:3px}
.v-card .v-y{font-size:13px;color:var(--muted)}
.v-card .v-t{font-weight:600}
.v-card a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;transition:background .2s}
@media (hover:hover){.v-card a:hover{background:var(--sky1)}}
@media (max-width:560px){.v-card{flex-wrap:wrap}.v-card div{flex:1 1 60%}.v-card a{flex:1 1 100%;justify-content:center}}

/* ---------------- most watched ---------------- */
.reel{list-style:none;margin:0 auto;max-width:1180px;padding:6px 20px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,250px);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
/* sideways only: overflow-x:auto alone makes the row a vertical scroller too, and with even 4px to scroll an iPhone hands it the swipe meant for the page (the page got stuck here) */
.reel li{scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;min-width:0}
.phone{position:relative;display:block;min-width:0;aspect-ratio:9/16;border-radius:32px;padding:7px;background:#0B1E38;box-shadow:0 26px 50px -26px rgba(11,30,56,.8),inset 0 0 0 1.5px #2A3E5C;text-decoration:none;color:#fff;transition:translate .25s,box-shadow .25s}
@media (hover:hover){.phone:hover{translate:0 -4px;box-shadow:0 34px 60px -26px rgba(11,30,56,.85),inset 0 0 0 1.5px var(--sun)}}
.phone::before{content:"";position:absolute;z-index:2;top:14px;left:50%;translate:-50% 0;width:62px;height:18px;border-radius:999px;background:#0B1E38}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:26px;background:#14263F}
.views{position:absolute;z-index:2;inset-inline-start:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(6,21,44,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;font-weight:600}
.rank{position:absolute;z-index:2;inset-inline-end:14px;top:40px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--sun);color:var(--ink);font:400 22px/1 var(--display);padding-top:4px;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.reel li:first-child .views{background:var(--sun);color:var(--ink)}
.v-t{font-size:16px;font-weight:600;line-height:1.4}
.ad{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.ad img{height:18px;width:auto;max-width:70px;object-fit:contain}
@media (min-width:1000px){.reel{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding-block:6px 0}}
@media (min-width:1800px){.reel{max-width:1440px}}

/* the swipe control under each sliding row: arrows and a progress line */
.swipe{display:flex;align-items:center;gap:12px;margin-top:8px}
.swipe[hidden]{display:none}
.sw-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 6px 14px -10px rgba(11,30,56,.5);cursor:pointer;transition:background .2s,opacity .2s,translate .2s}
@media (hover:hover){.sw-btn:not(:disabled):hover{background:var(--sun)}}
.sw-btn:active{translate:0 1px}
.sw-btn:disabled{opacity:.35;cursor:default;background:var(--card)}
.sw-next svg{rotate:180deg}
[dir="rtl"] .sw-prev svg{rotate:180deg}
[dir="rtl"] .sw-next svg{rotate:0deg}
.sw-track{position:relative;flex:1;height:6px;border-radius:999px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sw-thumb{position:absolute;top:0;bottom:0;left:0;width:var(--sw-w,30%);border-radius:inherit;background:var(--ink);transform:translateX(var(--sw-x,0px));transition:width .2s}
[dir="rtl"] .sw-thumb{left:auto;right:0}
@media (min-width:1000px){.sw-reel{display:none}}
/* a one-time nudge shows the row can slide */
@keyframes nudge{0%,100%{translate:0 0}35%,65%{translate:calc(var(--dir,1) * -46px) 0}}
[dir="rtl"] .reel{--dir:-1}
.nudge>*{animation:nudge 1.3s cubic-bezier(.5,0,.3,1) .1s 1}

/* ---------------- formats ---------------- */
.fm-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fm{position:relative;padding:22px 20px 20px;border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fm-sk{display:inline-block;padding:8px 16px 9px;border-radius:14px;font:700 24px/1.15 var(--sticker);rotate:-2.5deg;box-shadow:0 7px 0 -2px rgba(11,30,56,.18)}
.fm:nth-child(2n) .fm-sk{rotate:2deg}
.fm-sun .fm-sk{background:var(--sun);color:var(--ink)}
.fm-coral .fm-sk{background:var(--coral-bg);color:#fff}
.fm-sky .fm-sk{background:var(--sky2);color:#fff}
.fm-mustard .fm-sk{background:var(--ink);color:var(--sun)}
.fm-green .fm-sk{background:var(--green);color:#fff}
.fm-d{color:var(--muted);font-size:16px}
.fm-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:auto;padding:12px 14px;border-radius:16px;background:var(--paper2);text-decoration:none;font-weight:600;font-size:15px;line-height:1.5}
.fm-q .si{flex:none;opacity:.7}
.fm-q{transition:background .2s,color .2s}
@media (hover:hover){.fm-q:hover,.fm:first-child .fm-q:hover{background:var(--sun);color:var(--ink)}}
@media (min-width:760px){.fm-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.fm-list{grid-template-columns:repeat(3,1fr)}.fm:first-child{grid-row:span 2;background:var(--ink);color:#fff;box-shadow:none;justify-content:center;gap:16px}.fm:first-child .fm-d{color:#AFC0D6;font-size:18px}.fm:first-child .fm-q{margin-top:10px;background:rgba(255,255,255,.08)}.fm:first-child .fm-sk{font-size:44px}}

/* ---------------- the doctorate ---------------- */
.phd{display:grid;gap:30px;align-items:center}
.ph-photo{position:relative;justify-self:center;width:min(74vw,360px);rotate:-3deg;padding:12px 12px 46px;border-radius:12px;background:#fff;box-shadow:var(--shadow);margin-bottom:60px}
.ph-photo figcaption{position:absolute;inset-inline:14px;bottom:12px;font:700 15px/1.2 var(--sticker);color:var(--ink)}
.ph-photo .ph-2{position:absolute;width:52%;inset-inline-end:-9%;bottom:-64px;rotate:9deg;padding:8px 8px 30px;border-radius:10px;background:#fff;box-shadow:var(--shadow)}
@media (min-width:900px){.ph-photo .ph-2{width:56%;inset-inline-end:-22%}}
[dir="rtl"] .ph-photo .ph-2{rotate:-9deg}
.ph-photo .ph-2 img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:5px}
.ph-photo .ph-2 span{position:absolute;inset-inline:10px;bottom:7px;font:700 12px/1.2 var(--sticker);color:var(--ink)}
.ph-watch{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding-inline:16px 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.ph-watch svg{flex:none;color:#FF3B30}
.ph-watch{padding-block:8px;transition:background .2s}
.ph-watch span{line-height:1.3;text-wrap:balance}
@media (hover:hover){.ph-watch:hover{background:var(--sky1)}}
[dir="rtl"] .ph-photo{rotate:3deg}
.ph-photo>img:first-child{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.ph-seal{position:absolute;width:84px;height:auto;inset-inline-start:-18px;top:-22px;rotate:-12deg;border-radius:50%;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);background:#fff}
@media (min-width:900px){.ph-seal{width:100px;inset-inline-start:-34px;top:-30px}}
.ph-text{display:flex;flex-direction:column;gap:14px}
.ph-tag{align-self:flex-start;padding:6px 14px 7px;border-radius:12px;background:var(--coral-bg);color:#fff;font:700 19px/1.15 var(--sticker);rotate:-3deg}
.ph-p{font-size:17px;color:var(--ink2);max-width:58ch;text-wrap:pretty}
.ph-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ph-card img{flex:none;width:48px;height:48px}
.ph-deg{font:400 22px/1.1 var(--display);padding-top:3px}
.ph-sch{font-weight:600;font-size:15px}
.ph-pl{font-size:13px;color:var(--muted)}
.ph-diss{padding:16px 18px;border-radius:18px;background:var(--paper2)}
.ph-diss .lab{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--green);margin-bottom:4px}
.d-en{font-weight:600;line-height:1.5}
.d-ar{margin-top:6px;color:var(--muted);font-size:15px}
.quote{grid-column:1/-1;padding:24px 26px;border-radius:28px;background:linear-gradient(135deg,var(--sky1),var(--sky2) 60%,var(--sky3));color:#fff;box-shadow:var(--shadow)}
.quote p{font:400 clamp(24px,6vw,40px)/1.35 var(--display);padding-top:6px;text-wrap:balance}
:lang(ar) .quote p{font:700 clamp(26px,6.6vw,46px)/1.6 var(--sticker);padding-top:0}
@media (min-width:900px){.phd{grid-template-columns:460px 1fr;column-gap:64px}.ph-photo{width:380px;margin-bottom:80px}}

/* ---------------- brands ---------------- */
/* the three campaigns with their numbers: cards with a sun-yellow edge */
.b-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.b-list li{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 2px var(--sun)}
.b-list .lg{flex:none;width:42%;height:76px;display:grid;place-items:center;border-radius:12px;background:#fff}
.b-list .lg img{max-height:54px;max-width:88%;width:auto;object-fit:contain}
.b-list .b-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.b-list .b-t b{font-size:15px;font-weight:600;line-height:1.3}
.b-list .b-t span{font-size:12.5px;color:var(--muted);line-height:1.4}
@media (min-width:900px){.b-list{grid-template-columns:repeat(3,minmax(0,1fr))}.b-list li{flex-direction:column;align-items:stretch}.b-list .lg{width:auto;height:84px}}
/* every other partner: a wall of logos, the last row centred */
.b-wall{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.b-wall li{flex:0 0 calc((100% - 20px) / 3);min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.b-wall .lg{width:100%;height:52px;display:grid;place-items:center}
.b-wall .lg img{max-height:46px;max-width:88%;width:auto;object-fit:contain}
.b-wall .w-n{font-size:12px;font-weight:600;line-height:1.35;color:var(--ink2);text-wrap:balance}
@media (min-width:760px){.b-wall li{flex-basis:calc((100% - 30px) / 4)}}
@media (min-width:1100px){.b-wall li{flex-basis:calc((100% - 40px) / 5)}.b-wall .lg{height:60px}.b-wall .lg img{max-height:52px}}

/* ---------------- contact ---------------- */
.contact{margin-top:110px;padding:70px 0 80px;background:radial-gradient(120% 80% at 50% 0%,var(--night2),var(--night) 70%);color:#fff;border-radius:44px 44px 0 0}
.contact .wrap{display:flex;flex-direction:column;gap:14px}
.ct-p{color:#C7D3E3;font-size:17px}
.bpass{display:flex;margin-top:10px;border-radius:24px;overflow:hidden;background:#FFFDF8;color:var(--ink);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);max-width:640px}
.bp-main{flex:1;min-width:0;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.bp-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--green)}
.bp-head b{color:var(--muted);font-weight:600}
.bp-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.bp-route p{display:flex;flex-direction:column;line-height:1.2}
.bp-route p:last-child{text-align:end}
.bp-route span{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.bp-route b{font:400 clamp(20px,5.4vw,28px)/1.15 var(--display);padding-top:3px}
.bp-route i{color:var(--coral)}
.bp-route i svg{rotate:90deg}
[dir="rtl"] .bp-route i svg{rotate:-90deg}
.bp-grid{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;padding-top:12px;border-top:1.5px dashed var(--line)}
.bp-grid dt{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.bp-grid dd{margin:0;font-weight:600}
.bp-mail{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:16px;background:var(--sun);text-decoration:none;color:var(--ink);transition:translate .2s}
@media (hover:hover){.bp-mail:hover{translate:0 -2px}}
.bp-mail span{font-size:11px;font-weight:700;letter-spacing:.08em;color:#6B5310}
.bp-mail b{font-size:clamp(17px,4.8vw,22px);font-weight:700;overflow-wrap:anywhere;text-align:start}
/* for ads, straight to his WhatsApp Business chat */
.bp-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin-top:-4px;padding:10px 16px;border-radius:16px;background:#25D366;color:var(--ink);text-decoration:none;font-weight:700;font-size:clamp(15px,4.2vw,17px);line-height:1.3;text-align:center;transition:translate .2s,background .2s}
.bp-wa .si{flex:none}
.bp-wa span{text-wrap:balance}
@media (hover:hover){.bp-wa:hover{translate:0 -2px;background:#3BE07A}}
.lic{font-size:13px;font-weight:600;color:var(--green)}
.bp-stub{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--ink);position:relative}
.bp-stub::before{content:"";position:absolute;inset-inline-start:-1px;top:10px;bottom:10px;border-inline-start:2px dashed rgba(255,255,255,.4)}
.bp-stub img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 2px var(--sun)}
.code{display:block;width:40px;height:74px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px);opacity:.85}
.contact h3{margin-top:26px;font-size:15px;font-weight:600;color:#C7D3E3}
.socials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.soc{min-height:62px;display:flex;align-items:center;gap:12px;padding-inline:16px;border-radius:18px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s}
@media (hover:hover){.soc:hover{background:rgba(255,255,255,.14)}}
.soc .si{flex:none}
.soc .soc-n{font-weight:600;white-space:nowrap}
.vb{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;font-weight:600;color:#E6EEF8;white-space:nowrap}
.vb.plain{padding-inline:9px}
.vb svg{flex:none;width:16px;height:16px}
.soc b{margin-inline-start:auto;font-size:14px;font-weight:500;color:#C7D3E3;white-space:nowrap}
.s-tiktok .si{color:#fff}.s-snapchat .si{color:#FFFC00}.s-instagram .si{color:#F77FB0}.s-telegram .si{color:#5CC2F2}
@media (min-width:520px){.socials{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot{padding:22px max(20px,calc(50% - 570px)) 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:14px;background:var(--night);color:#93A6BF}
.foot a{color:#fff;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35);transition:text-decoration-color .2s}
@media (hover:hover){.foot a:hover{text-decoration-color:var(--sun)}}

/* ---------------- the language switch: a curtain in the new reading direction ---------------- */
.lang-wipe{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--night);pointer-events:none;animation:lw-in .46s cubic-bezier(.7,0,.25,1) both}
.lang-wipe.to-rtl{--from:inset(0 0 0 100%)}.lang-wipe.to-ltr{--from:inset(0 100% 0 0)}
@keyframes lw-in{from{clip-path:var(--from)}to{clip-path:inset(0)}}
.lang-wipe span,html.wiping::after{color:var(--sun);font:400 clamp(56px,13vw,132px)/1 var(--display);-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill}
.lang-wipe span{padding-top:.12em;animation:lw-word .46s cubic-bezier(.2,.7,.2,1) .06s both}
.lang-wipe.to-rtl span{--tx:48px}.lang-wipe.to-ltr span{--tx:-48px}
@keyframes lw-word{from{opacity:0;translate:var(--tx) 0}to{opacity:1;translate:0 0}}
html.wiping::before{content:"";position:fixed;inset:0;z-index:300;background:var(--night);pointer-events:none}
html.wiping::after{content:attr(data-wipe);position:fixed;inset:0;z-index:301;display:grid;place-items:center;padding-top:.12em;pointer-events:none}
html.wiping:not(.wipe-out)::before,html.wiping:not(.wipe-out)::after{animation:lw-safe 0s 3s forwards}
html.wipe-out.wipe-rtl::before,html.wipe-out.wipe-rtl::after{animation:lw-out-rtl .62s cubic-bezier(.7,0,.25,1) forwards}
html.wipe-out.wipe-ltr::before,html.wipe-out.wipe-ltr::after{animation:lw-out-ltr .62s cubic-bezier(.7,0,.25,1) forwards}
/* both ends written as inset(): clip-path can only tween between shapes of one kind */
@keyframes lw-out-rtl{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes lw-out-ltr{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes lw-safe{to{visibility:hidden}}

/* ---------------- arrivals ---------------- */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
  .js .rise.in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){.sk,.cue .plane-i,.clouds .cl{animation:none !important}.sk{opacity:1}}
.lost-body{background:linear-gradient(180deg,var(--sky1),var(--sky2) 45%,var(--sky3));color:#fff}
.lost{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.lost img{width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 3px var(--sun)}
.lost h1{font:400 clamp(52px,13vw,104px)/1 var(--display);padding-top:10px}
.lost .lead{font-size:20px;font-weight:600}
.lost .sub{color:#DCE8F6}
.lost .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn-home{min-height:50px;display:inline-flex;align-items:center;padding-inline:22px;border-radius:999px;background:var(--sun);color:var(--ink);text-decoration:none;font-weight:600}
.btn-home.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}