/* ============================================================
Qissatec — glass presentation layer
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px);-webkit-text-size-adjust:100%}
body{
margin:0;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.68;
background:var(--white);overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c600);outline-offset:3px;border-radius:8px}
::selection{background:var(--c400);color:var(--c950)}
/* ---- Ambient field: aurora blobs behind everything ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--white);pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.62}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-14vw;
background:radial-gradient(circle at 40% 40%,var(--c200),transparent 68%);animation:drift1 26s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:6vh;
background:radial-gradient(circle at 60% 40%,var(--c100),transparent 66%);animation:drift2 32s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:60vw;height:60vw;left:18vw;bottom:-24vw;
background:radial-gradient(circle at 50% 50%,var(--c50),transparent 70%);animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-7vw,9vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(5vw,-7vh,0) scale(1.1)}}
/* ---- Type -------------------------------------------------- */
h1,h2,h3{font-family:var(--display);line-height:1.04;letter-spacing:-.035em;margin:0;font-weight:700}
h1{font-size:clamp(40px,6.2vw,82px);font-weight:800;letter-spacing:-.045em}
.hero h1{font-size:clamp(32px,4.6vw,58px)}
h2{font-size:clamp(30px,4.3vw,56px)}
h3{font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.02em}
p{margin:0}
/* c500/c600 (the brand's brightest cyans) measured 1.6:1 and 2.4:1 on
white — the highlighted word in every H1 nearly disappeared at its
midpoint. Stops kept to c700..c900 so the whole span stays >=3.8:1,
the WCAG floor for large text, while it still reads as the same
cyan-to-deep-teal brand gradient, just without the washed-out core. */
.grad{background:linear-gradient(100deg,var(--c900) 0%,var(--c700) 50%,var(--c800) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative}
.section{padding-block:clamp(72px,10vw,132px);position:relative}
.section--tint{background:linear-gradient(180deg,rgba(230,252,255,0),var(--c50) 16%,var(--c50) 84%,rgba(230,252,255,0))}
.lede{font-size:clamp(16.5px,1.45vw,19.5px);color:var(--ink-75);max-width:64ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
font-family:var(--mono);font-weight:600;font-size:14.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--c800);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c500);
box-shadow:0 0 0 5px rgba(0,225,255,.22);flex:none}
/* ---- Glass primitives -------------------------------------- */
.glass{
background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--r-lg);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift);
position:relative;overflow:hidden;
}
.glass::before{ /* top light edge */
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,0) 42%);
}
.glass--solid{background:var(--glass-strong)}
/* ---- Buttons ----------------------------------------------- */
.btn{
display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px;
font-weight:700;font-size:15.5px;letter-spacing:-.01em;position:relative;
transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .3s var(--ease);
}
.btn:hover{transform:translateY(-3px)}
.btn--primary{background:var(--grad-fill);color:#fff;
box-shadow:0 16px 40px -16px rgba(0,185,209,.85)}
.btn--primary:hover{box-shadow:0 22px 52px -16px rgba(0,225,255,.95)}
/* Brand-blue border + text, not the near-white glass-edge border: on a
light hero the glass pill previously had almost no visible edge and
read as a blank, "invisible" button. c600 border + c800 text keep it
unmistakably blue and legible against white/tinted backgrounds. */
.btn--glass{background:var(--glass-strong);border:1.5px solid var(--c600);color:var(--c800);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift-sm)}
.btn--glass:hover{box-shadow:var(--glow);border-color:var(--c700)}
/* ---- Header ------------------------------------------------ */
.hdr{position:fixed;inset-inline:0;top:0;z-index:80;padding:14px var(--pad) 0;transition:padding .35s var(--ease)}
.hdr__in{
position:relative;
max-width:var(--maxw);margin-inline:auto;height:var(--hdr-h);padding:0 14px 0 22px;
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* The glass lives on a pseudo-element rather than on .hdr__in itself:
backdrop-filter makes an element the containing block for its
position:fixed descendants, which trapped the mobile drawer inside
the header bar instead of letting it fill the viewport. */
.hdr__in::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
background:var(--glass);border:1px solid var(--glass-edge);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:var(--lift-sm);transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.hdr.is-stuck .hdr__in::before{background:var(--glass-strong);box-shadow:var(--lift)}
/* direction:ltr pins the logo to icon-then-word, physically left to right,
regardless of page language — flexbox's "row" is otherwise direction-
aware and would flip icon/word positions in Arabic on its own. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;direction:ltr}
.brand__icon{height:34px;width:auto}
.brand__word{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:3px}
.nav a{
font-size:15.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-60);
padding:9px 11px;border-radius:999px;transition:color .25s,background .25s;white-space:nowrap;
}
.nav a:hover{color:var(--c800);background:rgba(255,255,255,.6)}
.nav a.is-active{color:var(--c950);background:var(--white);box-shadow:var(--lift-sm)}
.hdr__side{display:flex;align-items:center;gap:6px;flex:none}
.langbtn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
padding:9px 13px;border-radius:999px;color:var(--ink-60);transition:all .25s}
.langbtn:hover{color:var(--c800);background:rgba(255,255,255,.6)}
.langbtn.is-on{background:var(--grad-fill);color:#fff;
box-shadow:0 10px 24px -12px rgba(0,185,209,.9)}
.langbtn span{display:none}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--white);
align-items:center;justify-content:center;box-shadow:var(--lift-sm)}
.burger i{display:block;width:16px;height:2px;background:var(--c900);position:relative;border-radius:2px}
.burger i::before,.burger i::after{content:"";position:absolute;inset-inline-start:0;width:16px;height:2px;
background:var(--c900);border-radius:2px}
.burger i::before{top:-5px}.burger i::after{top:5px}
.dlwrap{position:relative}
.dlbtn{width:38px;height:38px;border-radius:50%;color:#fff;background:var(--grad-fill);
box-shadow:0 10px 26px -12px rgba(0,144,163,.9);
display:inline-flex;align-items:center;justify-content:center;
transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.dlbtn:hover,.dlbtn[aria-expanded="true"]{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,225,255,.95)}
.dlbtn svg{width:19px;height:19px}
.dlmenu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:20;width:max-content;
background:var(--white);border-radius:var(--r-lg);box-shadow:var(--lift);padding:14px;
opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
.dlmenu.is-open{opacity:1;visibility:visible;transform:none}
.dlmenu .store{flex-direction:column;gap:10px}
.dlmenu .store a{flex:none}
.dlmenu .store img{height:38px}
/* ---- Hero -------------------------------------------------- */
.hero{padding-top:calc(var(--hdr-h) + 60px);padding-bottom:clamp(40px,6vw,80px);position:relative}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.5vw,68px);align-items:center}
.hero__sub{margin-top:26px;font-size:clamp(16.5px,1.45vw,19.5px);color:var(--ink-75);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__dl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.hero__dl > span{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;
text-transform:uppercase;color:var(--c800);flex:none}
@media(max-width:580px){
.hero__dl{gap:10px}
.hero__dl > span{width:100%}
.hero__dl .store{gap:10px}
.hero__dl .store img{height:38px}
}
/* Hero collage: one photo (auto-slideshow, see paintHeroSlide in app.js)
with three floating "chip" cards for a few of the region's capitals. */
.collage{position:relative;aspect-ratio:1/1.02}
.collage__main{
position:absolute;inset:6% 0 12% 8%;border-radius:var(--r-xl);overflow:hidden;
box-shadow:var(--lift-lg);border:1px solid var(--glass-edge);
}
.collage__main img{width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--ease)}
.collage__main::after{content:"";position:absolute;inset:0;
background:linear-gradient(200deg,rgba(0,225,255,.16),rgba(0,23,26,.36))}
.chip{
position:absolute;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 11px;
border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-edge);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift);
animation:float 7s var(--ease) infinite alternate;
}
.chip img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.chip b{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.01em;display:block}
.chip span{font-family:var(--mono);font-weight:600;font-size:10px;color:var(--ink-45);letter-spacing:.06em}
.chip--a{top:4%;inset-inline-end:-2%;animation-delay:-1.2s}
.chip--b{bottom:20%;inset-inline-start:-6%;animation-delay:-3.4s}
.chip--c{bottom:2%;inset-inline-end:8%;animation-delay:-5.1s}
@media(max-width:900px){
.collage{aspect-ratio:1/.92;order:-1;margin-bottom:14px}
}
@media(max-width:580px){
.chip--b{inset-inline-start:-2%}
.chip span{display:none}
}
@keyframes float{to{transform:translateY(-14px)}}
.pulse{position:absolute;top:44%;inset-inline-start:34%;width:20px;height:20px}
.pulse i{position:absolute;inset:0;border-radius:50%;background:var(--c500);box-shadow:0 0 22px var(--c400)}
.pulse i:last-child{animation:ripple 2.6s var(--ease) infinite;background:transparent;
box-shadow:0 0 0 2px rgba(0,225,255,.8)}
@keyframes ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.4);opacity:0}}
/* ---- Marquee ----------------------------------------------- */
/* direction:ltr is load-bearing, not cosmetic: .marquee__track is much
wider than its container (that's how the infinite-scroll illusion
works), and in an RTL document a wider-than-container flex row rests
with its overflow toward the *start* edge — which in RTL is the right,
so the untransformed track sat thousands of px off-screen to the left
before the scroll animation even began, making both rows invisible in
Arabic. Forcing ltr here pins the rest position to the container's
left edge regardless of page direction; animation-direction below is
then the only thing that needs to flip for RTL. */
.marquee{overflow:hidden;padding-block:10px;direction:ltr;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* Second row travels the other way. `animation-direction:reverse` rather
than a separate keyframe so both rows share one timing definition. */
.marquee--rev{margin-top:14px}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:54s}
/* The RTL rule below already flips row one; flip row two back so the two
rows still oppose each other in Arabic instead of both going one way. */
html[dir="rtl"] .marquee--rev .marquee__track{animation-direction:normal}
.marquee figure{margin:0;width:340px;height:220px;border-radius:var(--r);overflow:hidden;
border:1px solid var(--glass-edge);box-shadow:var(--lift-sm);flex:none;position:relative}
.marquee img{width:100%;height:100%;object-fit:cover}
.marquee figcaption{position:absolute;inset-inline:10px;bottom:10px;padding:6px 12px;border-radius:999px;
background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c900);
width:max-content;max-width:calc(100% - 20px)}
/* Country flag as a small pin badge, not a loud standalone icon — sits in
the free top corner rather than competing with the place-name pill. A
real flag image, not the flag emoji: Windows renders flag emoji as
literal two-letter country-code text instead of a flag glyph. The SVG
itself is already a full-bleed circle (circle-flags project), so no
background/padding is layered behind it — just a drop-shadow to lift
it off the photo. */
img.marquee__flag{position:absolute;top:10px;inset-inline-start:10px;width:30px;height:30px;border-radius:50%;
object-fit:cover;filter:drop-shadow(0 3px 8px rgba(0,23,26,.45))}
/* ---- Feature panels ---------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px);margin-top:52px}
.feat{padding:0;transition:transform .45s var(--spring),box-shadow .45s var(--ease)}
.feat:hover{transform:translateY(-10px);box-shadow:var(--glow)}
/* Matches the real screenshots' own ratio (780x1600) so the frame shows
the whole screen — the old 9/13 box was wider than a real phone capture
and cropped the top and bottom off every shot. */
.feat__shot{aspect-ratio:39/80;overflow:hidden;position:relative;margin:14px 14px 0;border-radius:var(--r);background:var(--c50)}
.feat__shot img{width:100%;height:100%;object-fit:cover}
.feat__txt{padding:22px}
.feat__txt h3{margin-bottom:8px}
.feat__txt p{color:var(--ink-60);font-size:14.5px}
/* ---- App showcase: center screen in front, two phones tucked behind ---- */
.showcase{position:relative;display:flex;justify-content:center;align-items:center;
margin-top:56px;padding:26px 10px 30px;max-width:760px;margin-inline:auto}
.showcase__line{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.showcase__line path{fill:none;stroke:var(--c500);stroke-width:2.5;stroke-linecap:round;
stroke-dasharray:2 14;opacity:.55}
.showcase__phone{position:relative;margin:0;width:clamp(108px,19vw,200px);
filter:drop-shadow(var(--lift-lg));transition:transform .45s var(--spring),filter .45s var(--ease)}
.showcase__phone img{display:block;width:100%;height:auto;border-radius:14px}
/* Reserve each phone's real aspect ratio up front so the row holds its
shape (and lazy-load has real geometry to trigger against) before the
image itself has loaded, instead of collapsing to 0 height. */
.showcase__phone--a img{aspect-ratio:320/780}
.showcase__phone--c img{aspect-ratio:321/780}
.showcase__phone--b img{aspect-ratio:388/780}
/* Side phones sit behind and are pulled in slightly (negative margin) so
the center screen overlaps their inner edge just enough to read as
layered, without crowding it. */
.showcase__phone--a{z-index:1;margin-inline-end:-14px;transform:rotate(-8deg) translateY(28px) scale(.88);
filter:drop-shadow(var(--lift)) brightness(.95)}
.showcase__phone--c{z-index:1;margin-inline-start:-14px;transform:rotate(8deg) translateY(28px) scale(.88);
filter:drop-shadow(var(--lift)) brightness(.95)}
.showcase__phone--b{z-index:2;width:clamp(126px,22vw,224px);transform:translateY(-8px) scale(1.06)}
.showcase__phone--a:hover{transform:rotate(-8deg) translateY(18px) scale(.9);filter:drop-shadow(var(--lift)) brightness(1)}
.showcase__phone--c:hover{transform:rotate(8deg) translateY(18px) scale(.9);filter:drop-shadow(var(--lift)) brightness(1)}
.showcase__phone--b:hover{transform:translateY(-18px) scale(1.09)}
@media(max-width:580px){
.showcase{padding-top:18px}
.showcase__phone{width:clamp(78px,22vw,120px)}
.showcase__phone--b{width:clamp(96px,28vw,150px)}
.showcase__phone--a{margin-inline-end:-6px;transform:rotate(-9deg) translateY(22px) scale(.86)}
.showcase__phone--c{margin-inline-start:-6px;transform:rotate(9deg) translateY(22px) scale(.86)}
}
/* ---- Story cards ------------------------------------------- */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px);margin-top:48px}
.card{
position:relative;display:block;width:100%;text-align:start;aspect-ratio:3/4.1;border-radius:var(--r-lg);
overflow:hidden;box-shadow:var(--lift);border:1px solid var(--glass-edge);background:var(--c50);
transition:transform .5s var(--spring),box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-10px) scale(1.012);box-shadow:var(--glow)}
.card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover > img{transform:scale(1.07)}
.card::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,23,26,.55) 12%,rgba(0,23,26,0) 58%)}
.card__glass{
position:absolute;inset-inline:12px;bottom:12px;z-index:2;padding:15px 16px;border-radius:var(--r);
background:var(--glass-strong);border:1px solid var(--glass-edge);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.card__coord{font-family:var(--mono);font-weight:600;font-size:9.5px;color:var(--c800);letter-spacing:.09em;display:block;margin-bottom:5px}
.card__glass h3{font-size:17px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;
font-family:var(--mono);font-weight:600;font-size:10.5px;color:var(--ink-45)}
.card__play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:var(--grad-fill);box-shadow:0 8px 20px -8px rgba(0,185,209,.9);
transition:transform .3s var(--spring)}
.card:hover .card__play{transform:scale(1.12)}
.card.is-live{box-shadow:var(--glow)}
/* ---- Map --------------------------------------------------- */
.mapwrap{position:relative;padding:clamp(14px,2vw,22px);border-radius:var(--r-xl);margin-top:46px}
/* No min-height here: combined with aspect-ratio it does the opposite of
what it looks like it should — once min-height forces the box taller
than its ratio-derived height, the browser re-derives *width* from
that new height instead of the other way round, which overflowed the
map ~105px past its container at phone widths. Taller ratios at the
narrower breakpoints below give it enough height without that trap. */
.mapbox{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
background:linear-gradient(150deg,#fff,var(--c50))}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.map__grid line{stroke:rgba(0,144,163,.10);stroke-width:.6}
.map__land{fill:rgba(0,225,255,.10);stroke:var(--c600);stroke-width:1.2;stroke-linejoin:round}
.pin{cursor:pointer}
.pin__halo{fill:none;stroke:var(--c500);stroke-width:1.2;animation:ping 3.4s var(--ease) infinite}
@keyframes ping{0%{r:4;opacity:.9}70%,100%{r:28;opacity:0}}
.pin__dot{fill:var(--c600);transition:fill .25s,r .25s}
.pin:hover .pin__dot,.pin.is-live .pin__dot{fill:var(--c500);r:7}
.pin__label{font-family:var(--mono);font-size:9px;fill:var(--ink-45);letter-spacing:.05em;pointer-events:none;
opacity:0;transition:opacity .25s}
.pin:hover .pin__label,.pin.is-live .pin__label{opacity:1;fill:var(--c900)}
.mapbox__cap{position:absolute;inset-inline:18px;bottom:16px;display:flex;justify-content:space-between;gap:12px;
font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.12em;color:var(--ink-45);text-transform:uppercase;
z-index:500;pointer-events:none}
/* ---- Real map (Leaflet) ------------------------------------ */
.mapbox__canvas{position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,#fff,var(--c50))}
.leaflet-container{background:transparent;font-family:var(--body)}
/* Leaflet's own controls/attribution restyled to sit inside the glass panel */
.leaflet-control-attribution{background:rgba(255,255,255,.82)!important;
font-family:var(--mono);font-size:9px;color:var(--ink-60);padding:2px 8px;border-radius:999px 0 0 0}
.leaflet-control-attribution a{color:var(--c800)}
.leaflet-control-zoom{border:1.5px solid var(--c700)!important;border-radius:10px!important;overflow:hidden}
.leaflet-control-zoom a{color:var(--c900)!important;border-radius:0!important;
border-color:var(--c700)!important;background:var(--glass-strong)!important;
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.leaflet-control-zoom a:hover{background:#fff!important;color:var(--c700)!important}
.leaflet-popup-content-wrapper{border-radius:var(--r)!important;box-shadow:var(--lift)!important}
.leaflet-popup-content{margin:12px 16px!important;font-size:14px}
.leaflet-popup-content b{font-family:var(--display);letter-spacing:-.02em}
.mappin__coord{font-family:var(--mono);font-size:10px;color:var(--ink-60)}
/* Brand pin: solid dot with a pulsing halo, matching the drawn-map pins */
.mappin{position:relative}
.mappin__dot{position:absolute;inset:4px;border-radius:50%;background:var(--c700);
box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 10px -2px rgba(0,63,71,.5);transition:background .25s,inset .25s}
.mappin__halo{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--c500);
opacity:0;animation:pinping 3.4s var(--ease) infinite}
.mappin.is-live .mappin__dot{inset:1px;background:var(--c500)}
@keyframes pinping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2.6);opacity:0}}
/* Cluster badge: several pins in the same area collapse into one large
numbered marker rather than a pile of overlapping dots at low zoom. */
.mapcluster{position:relative;display:grid;place-items:center;cursor:pointer}
.mapcluster__ring{position:absolute;inset:0;border-radius:50%;background:rgba(0,225,255,.18);
animation:pinping 3.4s var(--ease) infinite}
.mapcluster__badge{position:relative;display:grid;place-items:center;width:74%;height:74%;border-radius:50%;
background:var(--grad-fill);color:#fff;font-family:var(--display);font-weight:700;
box-shadow:0 0 0 3px rgba(255,255,255,.95),0 8px 18px -6px rgba(0,63,71,.55);
font-size:14px;letter-spacing:-.02em}
/* ---- Split panels (story / vision / benefits) -------------- */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.split--rev{grid-template-columns:.92fr 1.08fr}
.split p + p{margin-top:18px}
.figure{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--glass-edge);box-shadow:var(--lift-lg);
position:relative;aspect-ratio:4/5}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--wide{aspect-ratio:4/3}
.figure__tag{position:absolute;inset-inline-start:16px;bottom:16px;padding:9px 16px;border-radius:999px;
background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--glass-edge);font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--c900)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px);margin-top:44px}
.duo .glass{padding:clamp(24px,3vw,38px)}
.duo h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:12px}
.duo p{color:var(--ink-75);font-size:16px}
.benefits{display:grid;gap:12px;margin-top:12px}
.benefit{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 22px;border-radius:var(--r);
background:var(--glass);border:1px solid var(--glass-edge);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
transition:transform .4s var(--spring),box-shadow .4s var(--ease)}
.benefit:hover{transform:translateX(6px);box-shadow:var(--lift-sm)}
html[dir="rtl"] .benefit:hover{transform:translateX(-6px)}
.benefit em{width:9px;height:9px;border-radius:50%;background:linear-gradient(105deg,var(--c500),var(--c700));
margin-top:10px;box-shadow:0 0 0 5px rgba(0,225,255,.16)}
.benefit b{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.02em;display:block;margin-bottom:4px}
.benefit p{color:var(--ink-60);font-size:15px}
/* ---- Statement band ---------------------------------------- */
.statement{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(46px,7vw,110px) clamp(24px,5vw,70px);
text-align:center;box-shadow:var(--lift-lg)}
.statement > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statement::after{content:"";position:absolute;inset:0;
background:linear-gradient(150deg,rgba(0,63,71,.78),rgba(0,23,26,.72))}
/* Sized in px, not ch: `ch` here resolves against the body font, not the
display-size heading it is meant to measure, which collapsed the column
to roughly half its intended width and stacked the store buttons. */
.statement__in{position:relative;z-index:2;max-width:min(620px,100%);margin-inline:auto}
.statement h2{color:#fff}
.statement p{color:rgba(255,255,255,.82);margin-top:18px;max-width:46ch;margin-inline:auto}
.statement .btn{margin-top:30px}
/* Home page teaser band — text-only card, CTA sits beside the copy
rather than a full-bleed photo banner like .statement. */
.impactband{display:flex;align-items:center;justify-content:space-between;gap:28px;
padding:clamp(22px,3vw,32px) clamp(26px,3.5vw,40px);text-align:start}
.impactband__text{max-width:640px}
.impactband h2{font-size:clamp(22px,2.6vw,28px)}
.impactband p{margin-top:8px;color:var(--ink-75);font-size:15px}
.impactband .btn{flex:none}
@media(max-width:700px){
.impactband{flex-direction:column;align-items:flex-start}
}
/* ---- Notable Figures (editorial essay page) ----------------- */
/* A cyan-on-dark variant of .grad for headings set on a dark hero —
the default .grad is tuned to stay readable on the light theme and
goes near-invisible once the background flips dark. */
.grad--light{background:linear-gradient(100deg,var(--c200) 0%,var(--c400) 50%,var(--c300) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow--light{color:var(--c200)}
.eyebrow--light::before{background:var(--c300);box-shadow:0 0 0 5px rgba(92,236,255,.22)}
.essayhero{position:relative;overflow:hidden;border-radius:var(--r-xl);text-align:center;box-shadow:var(--lift-lg);
padding:clamp(56px,9vw,120px) clamp(24px,5vw,64px);
background:radial-gradient(120% 90% at 12% 15%,rgba(194,65,12,.22),transparent 55%),
radial-gradient(90% 70% at 100% 100%,rgba(0,225,255,.12),transparent 60%),
linear-gradient(150deg,var(--c950),#000b0d 70%)}
.essayhero__in{position:relative;z-index:2;max-width:min(680px,100%);margin-inline:auto}
.essayhero h1{color:#fff}
.essayhero .lede{color:rgba(255,255,255,.72);margin-inline:auto}
/* A supplied banner photo (portrait + its own baked-in caption) — shown
as-is, full-bleed, with none of our own text laid over it so nothing
competes with the caption already in the image. */
.essayphoto{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--lift-lg)}
.essayphoto img{display:block;width:100%;height:auto;transform:scale(1.08);transition:transform .1s linear;
will-change:transform}
.essay{max-width:70ch;margin-inline:auto}
.essay p{font-size:clamp(16px,1.3vw,18px);line-height:1.9;color:var(--ink-75);margin-top:26px}
.essay p:first-child{margin-top:0}
.essay .pull{position:relative;margin:52px 0;padding-inline-start:26px;
font-family:var(--display);font-weight:600;font-size:clamp(20px,2.1vw,26px);line-height:1.5;
letter-spacing:-.01em;color:var(--c900)}
.essay .pull::before{content:"";position:absolute;inset-block:2px;inset-inline-start:0;width:3px;
border-radius:3px;background:var(--grad-fill)}
.essay .pull--big{font-size:clamp(24px,2.6vw,32px);text-align:center;padding-inline:0}
/* Pull-quotes get a touch more motion than a plain paragraph fade — a
slight scale-in alongside the shared .rv slide-up, so the piece's
handful of key lines land with a bit more weight as they arrive. */
.essay .pull.rv{transform:translateY(26px) scale(.96)}
.essay .pull--big::before{display:none}
.essay .closing{margin-top:60px;padding-top:40px;border-top:1px solid rgba(0,144,163,.16);
text-align:center;font-family:var(--display);font-size:clamp(17px,1.6vw,20px);color:var(--ink-60)}
.essay .closing b{display:block;margin-top:10px;font-weight:700;font-size:clamp(19px,1.9vw,23px);color:var(--c900)}
/* ---- Hamad seasons (coverflow chapter player) ----------------
Same mechanics as .teamshow/.teamslide below: the active card sits
centered at full size, prev/next cards peek from the sides at
reduced scale/opacity/blur, and stepping through re-paints classes
rather than moving the DOM — a spring transform + fade is what
actually reads as motion, matching the team carousel's design. */
.seasonshow{position:relative;max-width:var(--maxw);margin:36px auto 0;padding-inline:var(--pad);overflow:hidden}
.seasonshow__viewport{position:relative;height:clamp(480px,52vw,560px)}
.seasonslide{position:absolute;top:50%;left:50%;width:min(880px,92%);display:flex;overflow:hidden;
border-radius:var(--r-xl);background:var(--glass-strong);border:1px solid var(--glass-edge);
box-shadow:var(--lift-sm);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
transform:translate(-50%,-50%) scale(.8);opacity:0;z-index:1;pointer-events:none;
transition:transform .7s var(--spring),opacity .5s var(--ease),filter .5s var(--ease)}
.seasonslide.is-prev,.seasonslide.is-next{opacity:.5;filter:blur(1.5px);z-index:2}
.seasonslide.is-prev{transform:translate(calc(-50% - 86%),-50%) scale(.8)}
.seasonslide.is-next{transform:translate(calc(-50% + 86%),-50%) scale(.8)}
.seasonslide.is-active{opacity:1;filter:none;z-index:3;pointer-events:auto;transform:translate(-50%,-50%) scale(1);
box-shadow:var(--lift-lg)}
.seasonslide__photo{position:relative;flex:0 0 38%;min-width:180px;overflow:hidden;background:var(--c50)}
.seasonslide__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.seasonslide__badge{position:absolute;bottom:16px;inset-inline-start:16px;min-width:38px;height:38px;padding:0 5px;
border-radius:50%;background:var(--grad-fill);color:#fff;display:grid;place-items:center;
font-family:var(--mono);font-weight:700;font-size:13px;box-shadow:var(--lift-sm)}
.seasonslide__body{flex:1;min-width:0;padding:clamp(22px,3.4vw,42px);text-align:start;
display:flex;flex-direction:column;justify-content:center;overflow:auto}
.seasonslide__label{display:block;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:var(--c700);margin-bottom:10px}
.seasonslide__body h3{font-size:clamp(19px,2vw,25px)}
.seasonslide__body p{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--ink-75)}
.seasonslide__body p b{color:var(--c900)}
.seasonslide__player{display:flex;align-items:center;gap:14px;margin-top:20px;flex:none}
.seasonslide__play{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:var(--grad-fill);color:#fff;
display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -10px rgba(0,144,163,.85);
transition:transform .3s var(--spring)}
.seasonslide__play:hover{transform:scale(1.06)}
.seasonslide__play svg{width:17px;height:17px}
.seasonslide__play .i-pause{display:none}
.seasonslide__play.is-playing .i-play{display:none}
.seasonslide__play.is-playing .i-pause{display:block}
.seasonslide__time{font-family:var(--mono);font-size:12.5px;color:var(--ink-45)}
.seasonslide__cta{margin-top:18px;padding:11px 22px;font-size:13.5px;flex:none;align-self:flex-start}
.seasonshow__arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
background:var(--white);color:var(--c900);display:grid;place-items:center;box-shadow:var(--lift-sm);
z-index:4;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .3s var(--ease)}
.seasonshow__arrow:hover{box-shadow:var(--glow);background:var(--grad-fill);color:#fff}
.seasonshow__arrow svg{width:19px;height:19px}
.seasonshow__arrow--prev{left:0}
.seasonshow__arrow--prev:hover{transform:translateY(-50%) translateX(-2px)}
.seasonshow__arrow--next{right:0}
.seasonshow__arrow--next:hover{transform:translateY(-50%) translateX(2px)}
/* RTL: reading direction runs right-to-left, so "forward through the
story" reads as moving left — swap which edge prev/next sit on (and
mirror their chevrons + the peeking card offsets to match) rather
than leaving them in fixed LTR positions. */
html[dir="rtl"] .seasonshow__arrow--prev{left:auto;right:0}
html[dir="rtl"] .seasonshow__arrow--prev:hover{transform:translateY(-50%) translateX(2px)}
html[dir="rtl"] .seasonshow__arrow--next{right:auto;left:0}
html[dir="rtl"] .seasonshow__arrow--next:hover{transform:translateY(-50%) translateX(-2px)}
html[dir="rtl"] .seasonshow__arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .seasonslide.is-prev{transform:translate(calc(-50% + 86%),-50%) scale(.8)}
html[dir="rtl"] .seasonslide.is-next{transform:translate(calc(-50% - 86%),-50%) scale(.8)}
.seasonshow__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px}
.seasonshow__dot{width:8px;height:8px;padding:0;border:none;border-radius:5px;cursor:pointer;
background:rgba(0,63,71,.18);transition:width .3s var(--ease),background .3s var(--ease)}
.seasonshow__dot.is-active{width:24px;background:var(--grad-fill)}
@media(max-width:760px){
.seasonshow__viewport{height:clamp(640px,148vw,760px)}
.seasonslide{flex-direction:column;width:86%}
.seasonslide__photo{flex:none;width:100%;aspect-ratio:16/10}
}
@media(max-width:580px){
.seasonslide__body{padding:22px 18px}
.seasonshow__arrow{width:38px;height:38px}
}
/* ---- Team -------------------------------------------------- */
.founder{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,56px);align-items:center;
padding:clamp(24px,3vw,44px)}
.founder__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--c50);box-shadow:var(--lift)}
.founder__img img{width:100%;height:100%;object-fit:cover}
/* Team showcase — a coverflow carousel: one person centered, full size
and in focus, the previous/next cards peeking in behind at reduced
scale and opacity. Auto-advances on its own (paused on hover or after
a manual click) so the section reads as alive without asking anyone to
click through it. Slide state is class-driven (.is-active/-prev/-next)
rather than scroll-based, which is what makes the centered-and-dimmed
peek effect possible — a native-scroll track can't blur/scale its own
off-screen neighbours. */
.teamshow{position:relative;max-width:var(--maxw);margin:36px auto 0;padding-inline:var(--pad);overflow:hidden}
.teamshow__viewport{position:relative;height:clamp(300px,34vw,336px)}
.teamslide{position:absolute;top:50%;left:50%;width:min(520px,88%);display:flex;gap:22px;align-items:center;
padding:clamp(20px,2.4vw,30px);border-radius:var(--r-xl);background:var(--glass-strong);
border:1px solid var(--glass-edge);box-shadow:var(--lift-sm);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
transform:translate(-50%,-50%) scale(.8);opacity:0;z-index:1;pointer-events:none;
transition:transform .7s var(--spring),opacity .5s var(--ease),filter .5s var(--ease)}
.teamslide.is-prev,.teamslide.is-next{opacity:.5;filter:blur(1.5px);z-index:2}
.teamslide.is-prev{transform:translate(calc(-50% - 86%),-50%) scale(.8)}
.teamslide.is-next{transform:translate(calc(-50% + 86%),-50%) scale(.8)}
.teamslide.is-active{opacity:1;filter:none;z-index:3;pointer-events:auto;transform:translate(-50%,-50%) scale(1);
box-shadow:var(--lift-lg)}
.teamslide__img{flex:none;width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--c50);
box-shadow:0 0 0 5px var(--white),var(--lift-sm)}
.teamslide__img img{width:100%;height:100%;object-fit:cover}
.teamslide__txt b{display:block;font-family:var(--display);font-weight:600;font-size:18.5px;letter-spacing:-.02em}
.teamslide__txt span{display:block;margin-top:4px;font-family:var(--mono);font-weight:600;font-size:11px;
color:var(--c700);letter-spacing:.05em;text-transform:uppercase}
.teamslide__txt p{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--ink-60)}
.teamshow__arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
background:var(--white);color:var(--c900);display:grid;place-items:center;box-shadow:var(--lift-sm);
z-index:4;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .3s var(--ease)}
.teamshow__arrow:hover{box-shadow:var(--glow);background:var(--grad-fill);color:#fff}
.teamshow__arrow svg{width:19px;height:19px}
.teamshow__arrow--prev{left:0}
.teamshow__arrow--prev:hover{transform:translateY(-50%) translateX(-2px)}
.teamshow__arrow--next{right:0}
.teamshow__arrow--next:hover{transform:translateY(-50%) translateX(2px)}
.teamshow__dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.teamshow__dot{width:8px;height:8px;padding:0;border:none;border-radius:5px;cursor:pointer;
background:rgba(0,63,71,.18);transition:width .3s var(--ease),background .3s var(--ease)}
.teamshow__dot.is-active{width:24px;background:var(--grad-fill)}
/* ---- Quotes ------------------------------------------------ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px);margin-top:46px}
.quote{padding:32px;transition:transform .45s var(--spring),box-shadow .45s var(--ease)}
.quote:hover{transform:translateY(-8px);box-shadow:var(--glow)}
.quote::after{content:"”";position:absolute;top:14px;inset-inline-end:22px;font-family:var(--display);
font-size:52px;line-height:1;color:var(--c200);pointer-events:none}
.quote p{font-family:var(--display);font-size:18px;font-weight:500;line-height:1.48;letter-spacing:-.02em;position:relative;z-index:1}
.quote cite{display:block;margin-top:18px;font-family:var(--mono);font-weight:600;font-size:11px;font-style:normal;
color:var(--c800);letter-spacing:.1em}
/* ---- Contact ----------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,56px);align-items:start}
.infocard{padding:clamp(24px,3vw,38px)}
.info__row{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid rgba(0,144,163,.14)}
.info__row:last-child{border-bottom:0}
.info__row span{font-family:var(--mono);font-weight:800;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;
color:var(--ink);min-width:82px;padding-top:5px}
.info__row a,.info__row p{font-size:17px;font-weight:500}
.info__row a:hover{color:var(--c800)}
.formcard{padding:clamp(24px,3vw,38px)}
.field{display:block;margin-bottom:18px}
.field span{display:block;font-family:var(--mono);font-weight:800;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;
color:var(--ink);margin-bottom:8px}
.field span i{color:var(--ink-60)}
/* Border is a visible c700 by default (3.8:1 against white — the previous
rgba(0,144,163,.2) measured under 1:1 and was functionally invisible),
not just on focus. Focus escalates to a darker, unmistakably different
c800 plus a glow ring, so the two states read as clearly distinct. */
.field input,.field textarea,.field select{width:100%;background:rgba(255,255,255,.85);
border:1.5px solid var(--c700);border-radius:14px;padding:15px 17px;color:var(--ink);
font:inherit;font-size:17px;line-height:1.4;transition:border-color .2s,box-shadow .2s}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--c800)}
.field input:focus,.field textarea:focus,.field select:focus{
border-color:var(--c800);box-shadow:0 0 0 4px rgba(0,225,255,.28);outline:none}
/* Explicit placeholder colour — without this the browser default applies
(Chrome #757575, 4.61:1), which is the lightest text on the page and
fills every empty field. `opacity:1` is required because Firefox
applies its own opacity to placeholders on top of the colour. */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-placeholder);opacity:1}
.field textarea{resize:vertical;min-height:126px}
.form__note{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--ink);margin-top:14px;line-height:1.6}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.socials a{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--c800);
background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--lift-sm);
transition:transform .35s var(--spring),color .25s,background .25s}
.socials a:hover{transform:translateY(-4px);background:var(--grad-fill);color:#fff}
.socials svg{width:18px;height:18px}
/* ---- Store buttons ----------------------------------------- */
/* Official Apple/Google badge artwork — sized as images, no custom
button chrome (background/padding/icon) layered on top of them. */
.store{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store a{display:inline-flex;flex:none;transition:transform .35s var(--spring)}
.store a:hover{transform:translateY(-3px)}
.store img{height:44px;width:auto;display:block}
/* ---- Story card (About) ------------------------------------
The supplied clip renders its own card chrome (logo, frame, place tag,
caption) baked in per language, so this just frames the video itself —
no overlay text is composed on top of it. */
.storycard{display:flex;justify-content:center}
.storycard__frame{position:relative;margin:0;width:100%;max-width:360px;aspect-ratio:9/16;
border-radius:var(--r-xl);overflow:hidden;background:#D9E4F5;box-shadow:var(--lift-lg)}
.storycard__media{width:100%;height:100%;object-fit:contain;display:block;background:#D9E4F5}
.storycard__sound{position:absolute;bottom:16px;inset-inline-end:16px;width:40px;height:40px;
border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,23,26,.55);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:transform .3s var(--spring),background .25s}
.storycard__sound svg{width:18px;height:18px}
.storycard__sound:hover{transform:scale(1.08);background:rgba(0,23,26,.72)}
/* ---- Add Your Story ---------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.step{padding:26px 24px;border-radius:var(--r)}
.step em{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-style:normal;
font-family:var(--mono);font-size:13px;font-weight:500;margin-bottom:16px;
background:var(--grad-fill);color:#fff}
.step b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;
display:block;margin-bottom:8px}
.step p{color:var(--ink-60);font-size:14.5px}
.qrsection{padding-block:clamp(28px,4vw,44px) 0}
/* Two-state QR CTA: a small pill tab-bar picks which story the visitor is
in ("I already have one" vs "not yet"), and a single panel below swaps
its icon/copy/action to match — replaces two side-by-side cards that
said the same thing regardless of which one actually applied to you. */
.qrtabs{display:flex;justify-content:center;gap:10px;margin-bottom:28px}
.qrtabs__btn{padding:12px 28px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:15px;
background:var(--white);color:var(--ink-60);box-shadow:var(--lift-sm);cursor:pointer;border:none;
transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--spring)}
.qrtabs__btn:hover{color:var(--c800);transform:translateY(-1px)}
.qrtabs__btn.is-active{background:var(--grad-fill);color:#fff;box-shadow:0 14px 32px -14px rgba(0,144,163,.9)}
.qrpanel{position:relative;overflow:hidden;max-width:640px;margin-inline:auto;text-align:center;
padding:clamp(32px,4vw,52px)}
.qrcard__bg{position:absolute;inset-inline-end:-22px;bottom:-22px;width:150px;height:150px;opacity:.07;pointer-events:none}
.qrpanel[data-panel="have"] .qrcard__bg{color:var(--c700)}
.qrpanel[data-panel="none"] .qrcard__bg{color:var(--alert)}
.qrcard__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin:0 auto 20px;
color:#fff;box-shadow:var(--lift-sm);position:relative}
.qrcard__icon svg{width:24px;height:24px}
.qrcard__icon--go{background:var(--grad-fill)}
.qrcard__icon--wait{background:linear-gradient(105deg,#C2410C,#9A3412)}
.qrpanel h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,27px);letter-spacing:-.02em;
margin-bottom:14px;position:relative}
.qrpanel p{color:var(--ink-60);font-size:15px;line-height:1.75;max-width:50ch;margin-inline:auto;position:relative}
.qrpanel .btn,.qrpanel [data-role="vendorCta"]{margin-top:26px;display:flex;justify-content:center;position:relative}
.story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,56px);align-items:start}
.field__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field i{font-style:normal;text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-60)}
/* Sizing/border/colour now come from the shared .field input,.field
textarea,.field select rule above — this just adds the dropdown-only
bits (chevron, cursor, appearance reset) on top of it. */
.field select{cursor:pointer;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
padding-inline-end:42px}
html[dir="rtl"] .field select{background-position:left 16px center;padding-inline-end:17px;padding-inline-start:42px}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:var(--alert);
box-shadow:0 0 0 4px rgba(194,65,12,.12)}
/* Inline per-field error text, injected next to whichever fields fail
validation. Hidden (empty) until wireSubmit() in app.js populates it. */
.field__error{display:block;font-size:13.5px;font-weight:600;color:var(--alert);margin-top:7px;line-height:1.5}
.field__error:empty{display:none}
.check .field__error{flex-basis:100%;margin-inline-start:32px;margin-top:2px}
.form__hint{font-size:15px;color:var(--ink);margin:-8px 0 18px;line-height:1.6}
.check{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:6px 0 22px;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--c700);cursor:pointer}
.check span{font-size:16px;color:var(--ink);line-height:1.6}
.check.is-bad span{color:var(--alert)}
/* ---- Vendor QR extension button ----------------------------- */
/* Compound selectors (.qrbtn.qrbtn--x), not single-class: the footer
embeds this button inside .ftr__col, and ".ftr__col a{color:ink-75}"
(one class + one type = higher specificity than a lone ".qrbtn--ftr")
was winning the cascade — the white label rendered in the same dark
ink-75 as its own near-black pill, i.e. invisible (1.0:1 contrast).
Two classes on one selector outranks "class + type" regardless of
where this component ends up nested, so it can't happen again. */
.qrbtn{display:inline-flex;align-items:center;gap:9px;border-radius:14px;white-space:nowrap;
font-family:var(--display);font-weight:600;letter-spacing:-.01em;
transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.qrbtn svg{width:18px;height:18px;flex:none}
.qrbtn.qrbtn--hdr{padding:9px 15px;font-size:13.5px;
background:var(--grad-fill);color:#fff;
box-shadow:0 10px 26px -12px rgba(0,144,163,.9)}
.qrbtn.qrbtn--hdr:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,225,255,.95)}
.qrbtn.qrbtn--ftr{margin-top:6px;padding:11px 18px;font-size:14px;
background:var(--c950);color:#fff;box-shadow:var(--lift-sm)}
.qrbtn.qrbtn--ftr:hover{transform:translateY(-2px);box-shadow:0 18px 38px -18px rgba(0,23,26,.8)}
.qrbtn.qrbtn--nav{display:none}
/* ---- Footer ------------------------------------------------ */
.ftr{position:relative;margin:0 var(--pad) 0;padding-block:clamp(46px,6vw,74px) 120px;
border-top:1px solid rgba(0,144,163,.16)}
.ftr__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.15fr .6fr .7fr .75fr .8fr;gap:32px}
.store--ftr{flex-direction:column;gap:10px}
.store--ftr img{height:38px}
.ftr h3{font-size:clamp(23px,2.7vw,34px);max-width:15ch;letter-spacing:-.035em}
/* Direct-child combinator, not descendant: the Vendors column nests a
.qrbtn--ftr button (its own label) inside the same column as this
heading. A plain ".ftr__col b" descendant selector reached into the
button and repainted its white label dark-on-near-black — 2.85:1. */
.ftr__col > b{display:block;font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--c800);margin-bottom:16px}
.ftr__col a,.ftr__col p{display:block;font-size:15px;color:var(--ink-75);margin-bottom:10px}
.ftr__col a:hover{color:var(--c800)}
/* The footer's generic link color above ties in specificity with .store a
and comes later in the file, so it was winning and painting the store
buttons' white text near-black on their own near-black background —
invisible until :hover switched it to a lighter color. Force it back. */
.ftr__col .store a,.ftr__col .store a:hover{color:#fff}
/* The phone link carries dir="ltr" so the digits always read left-to-right,
even on the Arabic page — but that also makes the browser resolve its
text-align:start against its OWN ltr direction (left), while its
dir-less siblings (email, city) resolve start against the RTL page
(right). Same block, two different edges. Force it back onto the same
edge as its siblings in Arabic; English never had this split. */
html[dir="rtl"] .ftr__col a[href^="tel:"]{text-align:right}
.ftr__base{max-width:var(--maxw);margin:38px auto 0;padding-top:22px;border-top:1px solid rgba(0,144,163,.14);
display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.06em;color:var(--ink-45)}
.ftr__links{display:flex;gap:20px;flex-wrap:wrap}
.ftr__links a:hover{color:var(--c800)}
/* ---- Player ------------------------------------------------ */
.player{position:fixed;inset-inline:0;bottom:0;z-index:90;transform:translateY(130%);
transition:transform .55s var(--spring);padding:0 var(--pad) 18px}
.player.is-open{transform:none}
.player__in{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;gap:16px;
padding:12px 16px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-edge);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--lift-lg)}
.player__art{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;background:var(--c50)}
.player__toggle{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
background:var(--grad-fill);box-shadow:0 12px 26px -12px rgba(0,185,209,.95)}
.player__txt{min-width:0;width:190px;flex:none}
.player__txt b{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.02em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__txt span{font-family:var(--mono);font-weight:600;font-size:10px;color:var(--ink-45);letter-spacing:.05em}
.player__wave{flex:1;display:flex;align-items:center;gap:3px;height:38px;min-width:60px}
.player__wave i{flex:1;background:rgba(0,144,163,.20);border-radius:3px;height:14%;transition:height .18s linear}
.player__time{font-family:var(--mono);font-size:11px;color:var(--ink-60);flex:none}
.player__soon{display:none;font-family:var(--mono);font-size:11px;color:var(--alert);flex:none}
.player.has-error .player__toggle{opacity:.4;cursor:not-allowed;box-shadow:none}
.player__close{color:var(--ink-45);flex:none;padding:8px;border-radius:50%}
.player__close:hover{color:var(--c900);background:rgba(255,255,255,.7)}
/* ---- Reveal ------------------------------------------------ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
/* ---- Arabic / RTL ------------------------------------------ */
html[lang="ar"] body{font-family:var(--arabic)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .quote p,html[lang="ar"] .benefit b,
html[lang="ar"] .member b,html[lang="ar"] .player__txt b,html[lang="ar"] .store b,html[lang="ar"] .chip b,
html[lang="ar"] .hero__dl > span{font-family:var(--arabic);letter-spacing:0}
html[lang="ar"] h1{font-size:clamp(34px,5.2vw,64px);line-height:1.22}
html[lang="ar"] h2{line-height:1.32}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .nav a{letter-spacing:0}
html[dir="rtl"] .marquee__track{animation-direction:reverse}
/* ---- Responsive -------------------------------------------- */
@media(max-width:1100px){
.stories,.feats{grid-template-columns:repeat(2,1fr)}
.team{grid-template-columns:repeat(3,1fr)}
.quotes,.ftr__grid,.steps{grid-template-columns:1fr 1fr}
.mapbox{aspect-ratio:4/3}
}
/* Nav switches to the drawer at its own, wider breakpoint: the larger nav
type (15.5px, up from 13px) no longer fits inline alongside the vendor
button and language toggle once the viewport drops much below 1180px,
well before the 900px point everything else below still collapses at. */
@media(max-width:1180px){
.nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:14px;
padding:calc(var(--hdr-h) + 28px) 20px 40px;overflow-y:auto;
background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
transform:translateY(-102%);transition:transform .5s var(--ease);z-index:1}
.nav.is-open{transform:none}
.nav a{font-family:var(--display);font-size:26px;letter-spacing:-.03em;text-transform:none;padding:12px 26px}
.burger{display:flex;position:relative;z-index:2}
/* The header-side CTA gets covered by the drawer's own backdrop once it
opens (drawer's z-index sits above hdr__side within the fixed header),
so it collapses to an icon-only tap target and the drawer carries a
full duplicate of the same pill in its own link list instead. */
.qrbtn.qrbtn--hdr{padding:9px;border-radius:50%}
.qrbtn.qrbtn--hdr b{display:none}
.qrbtn.qrbtn--nav{display:inline-flex;margin-top:18px;padding:14px 26px;font-size:17px;
background:var(--grad-fill);color:#fff;
box-shadow:0 14px 32px -14px rgba(0,144,163,.9)}
.qrbtn--nav svg{width:21px;height:21px}
}
@media(max-width:900px){
body{font-size:16px}
.hero{padding-top:calc(var(--hdr-h) + 34px)}
.hero__grid,.split,.split--rev,.duo,.contact__grid,.founder,.story__grid{grid-template-columns:1fr}
.founder__img{max-width:260px}
.ftr__grid{grid-template-columns:1fr}
.player__wave{display:none}
.player__txt{width:auto;flex:1}
}
@media(max-width:580px){
.stories,.feats{grid-template-columns:1fr 1fr}
.teamshow__viewport{height:380px}
.teamslide{flex-direction:column;text-align:center;width:82%;gap:14px}
.teamslide.is-prev{transform:translate(calc(-50% - 92%),-50%) scale(.8)}
.teamslide.is-next{transform:translate(calc(-50% + 92%),-50%) scale(.8)}
.quotes,.steps,.field__row{grid-template-columns:1fr}
.card{aspect-ratio:3/4}
.hdr__in{padding-inline:16px 10px}
.brand{gap:7px}
.brand__icon{height:26px}
.brand__word{height:28px}
.marquee figure{width:240px;height:160px}
.mapbox{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
.rv{opacity:1;transform:none}
}