/* واجهة — Rolex green and gold, with one colour that breaks them (html[data-pop]) */
:root{
  --white:#FFFFFF; --green:#006039; --green-dk:#00452A; --gold:#A37E2C; --gold-lt:#E2C27A;
  --cream:#EEF3EF; --ink:#13261C; --muted:rgba(19,38,28,.68);
  --pop:#FF6F61; --on-pop:#13261C;            /* 1: Pantone Living Coral */
  --line:rgba(0,96,57,.18);
  --f-h:'Aref Ruqaa',serif;                   /* big headings only */
  --f-b:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gut:max(6vw,16px);
}
[data-pop="2"]{--pop:#FFBE98;--on-pop:#13261C}  /* Pantone Peach Fuzz */
[data-pop="3"]{--pop:#6667AB;--on-pop:#FFFFFF}  /* Pantone Very Peri */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#052619;overflow-x:clip}
body{margin:0;background:#052619;color:var(--ink);font-family:var(--f-b);font-size:1.0625rem;line-height:1.75;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ul,blockquote{margin:0}
:focus-visible{outline:2px solid var(--pop);outline-offset:4px}
::selection{background:var(--green);color:var(--white)}

/* living layers: film grain over everything, gold dust in the deep sections */
.grain{position:fixed;inset:0;z-index:140;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-37px 23px}40%{background-position:51px -41px}60%{background-position:-63px -17px}80%{background-position:29px 59px}100%{background-position:0 0}}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:1rem 2.1rem;border:0;border-radius:999px;font:700 1.05rem/1 var(--f-b);text-decoration:none;cursor:pointer;transition:translate .5s var(--ease),background-color .3s,color .3s,box-shadow .3s}
.btn:hover{translate:0 -3px}
.btn--main{background:var(--green);color:var(--white)}
.btn--main:hover{background:var(--ink)}
.btn--pop{background:var(--pop);color:var(--on-pop)}
.btn--pop:hover{background:var(--white);color:var(--green)}
.btn--line{background:transparent;color:var(--green);/* taste-skill-ignore: outline drawn inside the button */box-shadow:inset 0 0 0 1.5px var(--green)}
.btn--line:hover{background:var(--green);color:var(--white)}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--pop);pointer-events:none;z-index:150;opacity:0;mix-blend-mode:multiply;transition:width .35s var(--ease),height .35s var(--ease),opacity .3s}
.cursor.is-on{opacity:1}
.cursor.is-big{width:64px;height:64px}
@media (hover:none){.cursor{display:none}}

/* nav */
.nav{position:fixed;top:0;inset-inline:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gut);color:var(--green);transition:background-color .4s,box-shadow .4s,color .4s}
.nav.is-solid{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav__brand{display:flex;align-items:center;text-decoration:none}
.nav__brand svg{height:44px;width:auto;fill:currentColor}
.nav__links{display:flex;gap:4px;font-size:.98rem;font-weight:500}
.nav__links a{text-decoration:none;padding:.5rem .95rem;border-radius:999px;transition:background-color .3s,color .3s}
.nav__links a:hover{background:var(--line)}
.nav__links a.is-here{background:var(--green);color:var(--white)}
.nav__cta{font:700 .95rem/1 var(--f-b);text-decoration:none;padding:.85rem 1.4rem;border-radius:999px;background:var(--green);color:var(--white);cursor:pointer;transition:background-color .3s,color .3s}
.nav__cta:hover{background:var(--pop);color:var(--on-pop)}
.nav__menu{display:none;align-items:center;gap:10px;background:none;border:0;padding:.7rem .2rem;font:700 .95rem/1 var(--f-b);color:inherit;cursor:pointer}
.nav__menu i{position:relative;width:22px;height:2px;background:currentColor;transition:background-color .3s}
.nav__menu i::before,.nav__menu i::after{content:"";position:absolute;inset-inline:0;height:2px;background:currentColor;transition:transform .45s var(--ease)}
.nav__menu i::before{top:-7px}.nav__menu i::after{top:7px}
.nav.is-dark:not(.is-solid){color:var(--white)}
.nav.is-dark:not(.is-solid) .nav__cta{background:var(--pop);color:var(--on-pop)}
.nav.is-dark:not(.is-solid) .nav__links a:hover{background:rgba(255,255,255,.16)}
.is-menu .nav{color:var(--white);background:transparent;box-shadow:none;backdrop-filter:none}
.is-menu .nav .nav__cta{background:var(--pop);color:var(--on-pop)}
.is-menu .nav__menu i{background:transparent}
.is-menu .nav__menu i::before{transform:translateY(7px) rotate(45deg)}
.is-menu .nav__menu i::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){.nav__links{display:none}.nav__menu{display:inline-flex}.nav{gap:12px}.nav__cta{margin-inline-start:auto;padding:.75rem 1.1rem;font-size:.88rem}}
@media (max-width:420px){.nav__menu span{display:none}.nav__brand svg{height:38px}}

/* full-screen menu (phones) */
.menu{position:fixed;inset:0;z-index:55;background:var(--green);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:120px var(--gut) 44px;clip-path:circle(0% at var(--mo,10% 4%));transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.menu.is-open{clip-path:circle(150% at var(--mo,10% 4%))}
.menu[hidden]{display:none}
.menu__links{display:grid;gap:4px}
.menu__links a{font:700 clamp(2.4rem,11vw,4.4rem)/1.35 var(--f-h);text-decoration:none;width:fit-content}
.menu__links a:hover{color:var(--pop)}
.menu__foot{display:grid;gap:18px;justify-items:start}
.menu__tel{font:500 1.2rem/1 var(--f-b);letter-spacing:.06em;text-decoration:none;opacity:.85}

/* 1. hero: the name «واجهة», and the camera walks in through its waw (the waw itself never moves) */
.hero{position:relative;height:340vh;background:var(--white)}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--white)}
.hero__glow{position:absolute;left:50%;top:50%;width:min(70vw,70vh);aspect-ratio:1;translate:-50% -50%;border-radius:50%;/* taste-skill-ignore: the light behind the door, breathing */background:radial-gradient(circle,rgba(226,194,122,.55),rgba(226,194,122,0) 62%);animation:breathe 4.5s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes breathe{50%{scale:1.18;opacity:.75}}
.hero__obj{position:absolute;left:calc(50% - 349.73px);top:calc(50% - 105.07px);width:411px;height:256px;transform-origin:349.73px 105.07px;z-index:1}
.hero__lockup{position:absolute;inset:0;width:411px;height:256px;fill:var(--green);overflow:visible}
.hero__win{position:absolute;left:324.9px;top:49.8px;width:49.6px;height:78.2px;overflow:hidden;background:var(--green-dk)}
.hero__wall{--cw:16;position:absolute;left:24.83px;top:55.27px;display:flex;direction:ltr;gap:calc(var(--cw) * .06px);transform:translate(-50%,-50%)}
.hero__wall video{flex:none;width:calc(var(--cw) * 1px);height:calc(var(--cw) * 2.1667px);object-fit:cover;object-position:top;border-radius:calc(var(--cw) * .05px);background:var(--green-dk)}
.hero__c{position:absolute;z-index:2;font-size:1rem;font-weight:700;letter-spacing:.01em;color:var(--ink);opacity:var(--f,1);display:flex;align-items:center;gap:10px}
.hero__c::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pop);flex:none}
.hero__c--1{top:96px;inset-inline-start:var(--gut)}
.hero__c--2{top:96px;inset-inline-end:var(--gut)}
.hero__c--3{bottom:4vh;inset-inline-end:var(--gut)}
.hero__c--4{bottom:4vh;inset-inline-start:var(--gut)}
.hero__hint i{width:1.5px;height:26px;background:var(--green);transform-origin:top;animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__flash{position:absolute;inset:0;z-index:3;background:var(--white);opacity:0;pointer-events:none;mix-blend-mode:screen}
.hero__scrim{position:absolute;inset:0 0 auto;height:160px;z-index:3;background:linear-gradient(rgba(4,30,20,.72),rgba(4,30,20,0));opacity:0;pointer-events:none}
.hero__shade{position:absolute;inset:0;z-index:3;background:radial-gradient(90% 70% at 50% 58%,rgba(4,36,23,.95) 35%,rgba(0,48,29,.84) 100%);opacity:0;pointer-events:none}
.hero__end{position:absolute;inset:0;z-index:4;display:grid;align-content:center;justify-items:center;gap:26px;padding:12vh var(--gut) 8vh;text-align:center;color:var(--white);opacity:0;visibility:hidden}
.hero__name{margin:0}
.hero__title{font:700 clamp(2.6rem,7vw,7rem)/1.3 var(--f-h)}
.hero__title span{display:block}
.hero__title span:last-child{color:var(--gold-lt)}
.hero__end p{font-size:clamp(1.08rem,1.5vw,1.35rem);max-width:34ch;line-height:1.75}
@media (max-width:760px){
  .hero{height:300vh}
  .hero__c{font-size:.9rem}
  .hero__c--1{top:84px}.hero__c--2{top:84px}
  .hero__c--3{bottom:calc(3vh + 30px);inset-inline-end:auto;inset-inline-start:var(--gut)}
  .hero__c--4{bottom:2.4vh}
}

/* 2. ribbon */
.ribbon{position:relative;z-index:5;overflow:hidden;background:var(--pop);color:var(--on-pop);rotate:-2.5deg;margin:-1.5vh -4vw -3vh;padding:1.1rem 0}
.ribbon__row{display:flex;width:max-content;font:700 clamp(1.35rem,2.8vw,2.2rem)/1.2 var(--f-b);white-space:nowrap;will-change:transform}
.ribbon__row > span{white-space:nowrap;display:inline-flex;align-items:center;gap:.45em;padding-inline-end:.45em}
.ribbon__row .sep{width:.95em;height:.95em;fill:currentColor;flex:none}

/* 3. statement */
.statement{position:relative;isolation:isolate;overflow:hidden;padding:26vh var(--gut) 20vh;background:var(--green);color:var(--white)}
.sticker{display:inline-block;background:var(--pop);color:var(--on-pop);font-weight:700;padding:.55rem 1.1rem;border-radius:10px;rotate:-5deg;margin-bottom:5vh;position:relative;z-index:1}
.statement__text{position:relative;z-index:1;font:700 clamp(2.8rem,8.4vw,9.2rem)/1.32 var(--f-h);max-width:14ch}
.statement__text .w{opacity:.16;transition:none}
.statement__foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:34px;margin-top:10vh}
.statement__foot p{max-width:40ch;font-size:clamp(1.05rem,1.4vw,1.3rem);color:rgba(255,255,255,.88)}
.hand{display:flex;align-items:flex-end;gap:6px;font:700 clamp(2rem,4vw,3.4rem)/1.3 var(--f-h);color:var(--gold-lt);rotate:-4deg}
.hand__arrow{width:clamp(70px,9vw,130px);height:auto;fill:none;stroke:var(--pop);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hand__arrow path{stroke-dasharray:1;stroke-dashoffset:1}

/* 4. work: one screen per site, in that site's colours */
.work{position:relative;background:var(--cream)}
.work__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.slide{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:var(--s-bg,var(--cream));color:var(--s-fg,var(--ink));will-change:transform}
.slide--intro{--s-bg:var(--cream);--s-fg:var(--green);text-align:center}
.slide__in{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;padding:0 var(--gut)}
.slide--intro h2{font:700 clamp(3rem,9vw,9.4rem)/1.25 var(--f-h)}

.slide__name{position:absolute;left:50%;top:50%;translate:-50% -54%;z-index:0;font:700 clamp(8rem,30vw,30rem)/1 var(--f-h);color:var(--s-name);white-space:nowrap;pointer-events:none;user-select:none}
.slide__phone{position:relative;z-index:1;width:auto;height:min(70vh,640px);aspect-ratio:390/844;padding:0;border:8px solid #0B0B0B;border-radius:38px;overflow:hidden;background:#0B0B0B;/* taste-skill-ignore: device mockup */box-shadow:0 50px 90px rgba(0,0,0,.35)}
.slide__phone video{width:100%;height:100%;object-fit:cover;object-position:top}
.slide__meta{position:absolute;z-index:2;bottom:7vh;inset-inline-start:var(--gut);display:grid;gap:2px;max-width:30ch}
.slide__meta b{font:700 clamp(1.5rem,2.4vw,2.2rem)/1.25 var(--f-b)}
.slide__meta span{font-size:.95rem;font-weight:500}
.slide__meta p{font-size:1rem;margin-top:8px}
.slide__n{position:absolute;z-index:2;top:96px;inset-inline-end:var(--gut);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
@keyframes spin{to{rotate:-360deg}}
.slide--next{--s-bg:var(--green);--s-fg:var(--white);text-align:center}
.next__t{font:700 clamp(4rem,14vw,14rem)/1.15 var(--f-h);color:var(--gold-lt);margin-bottom:.34em}
.next__t small{display:block;font:700 1rem/1.5 var(--f-b);color:var(--white);margin-bottom:.3em}
@media (max-width:760px){
  .slide__name{top:30%;font-size:46vw}
  .slide__phone{height:56vh;border-width:6px;border-radius:30px;translate:0 -3vh}
  .slide__meta{bottom:5vh;max-width:84vw}
  .slide__meta b{font-size:1.45rem}
  .slide__meta p{font-size:.92rem;margin-top:4px}
  .slide__n{top:84px}
  .spin{width:96px;bottom:5vh}
  .spin svg{font-size:19px}
}

/* 5. how: chapters, one colour each */
.how{position:relative;height:520vh}
.how__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--ink)}
.how__bg{position:absolute;inset:0;background:var(--cream)}
.how__head{position:absolute;z-index:2;top:96px;inset-inline-start:var(--gut);color:var(--green)}

.how__head h2{font:700 clamp(1.8rem,3vw,2.8rem)/1.3 var(--f-h)}
.step{--c-bg:var(--pop);--c-fg:var(--on-pop);--c-tx:var(--on-pop);position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6vw;padding:18vh 10vw 12vh;color:var(--c-tx);visibility:hidden}
.step--pop{--c-bg:var(--pop);--c-fg:var(--on-pop);--c-tx:var(--on-pop)}
.step__time{position:absolute;top:calc(96px + 7.5rem);inset-inline-start:var(--gut);background:var(--c-fg);color:var(--c-bg);font-weight:700;font-size:.95rem;line-height:1;padding:.6rem 1.1rem;border-radius:999px}
.step__num{position:relative;display:grid;place-items:center;width:clamp(220px,34vw,460px);aspect-ratio:1}
.step__num span{font:700 clamp(10rem,26vw,22rem)/1 var(--f-h);color:var(--c-fg);translate:0 -6%}
.step__txt h3{font:700 clamp(2rem,4.2vw,4rem)/1.3 var(--f-b);color:var(--c-fg);margin-bottom:16px}
.step__txt p{font-size:clamp(1.08rem,1.5vw,1.35rem);max-width:34ch}
.how__dots{position:absolute;z-index:2;bottom:5vh;left:50%;translate:-50% 0;display:flex;gap:10px}
.how__dots i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .3s,scale .3s}
.how__dots i.is-on{opacity:1;scale:1.3}
@media (max-width:760px){
  .how{height:460vh}
  .how__head{top:84px}
  .step{grid-template-columns:1fr;align-content:center;justify-items:start;gap:2vh;padding:24vh var(--gut) 12vh}
  .step__time{top:calc(84px + 6.4rem)}
  .step__num{width:min(56vw,250px);margin-bottom:3.5vh}
  .step__num span{font-size:min(40vw,11rem)}
}
/* short phones: the number shrinks and the step starts under the time badge */
@media (max-width:760px) and (max-height:760px){
  .step{align-content:start;gap:1.4vh;padding-top:calc(84px + 6.4rem + 4.4rem);padding-bottom:8vh}
  .step__num{width:min(42vw,25vh);margin-bottom:2.4vh}
  .step__num span{font-size:min(30vw,17vh)}
  .step__txt h3{font-size:1.75rem;margin-bottom:10px}
  .step__txt p{font-size:1rem}
}

/* 6. packages: tickets that fan out */
.packs{padding:20vh var(--gut) 22vh;background:var(--cream);color:var(--ink);overflow-x:clip}
.packs__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12vh}
.packs__head h2{font:700 clamp(3.2rem,9.6vw,10rem)/1.2 var(--f-h);color:var(--green)}
.packs__head p{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:28ch}
.packs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw;align-items:end}
.pack{position:relative;background:var(--white);color:var(--green);border-radius:22px;padding:2.5rem 2rem 2.4rem;transform-origin:50% 120%;display:flex;flex-direction:column;gap:1.3rem}
.pack h3{font:700 1.45rem/1.3 var(--f-b)}
.pack__price{position:relative;display:flex;align-items:baseline;gap:10px;padding-bottom:1.5rem;border-bottom:2px dashed var(--line)}
.pack__price::before,.pack__price::after{content:"";position:absolute;bottom:-15px;width:28px;height:28px;border-radius:50%;background:var(--cream)}
.pack__price::before{left:calc(-2rem - 14px)}
.pack__price::after{right:calc(-2rem - 14px)}
.pack__price b{font:700 clamp(3rem,5vw,5rem)/1 var(--f-b);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pack__price span{font-weight:500}
.pack__for{color:var(--ink);font-size:1rem;line-height:1.75}
.pack ul{list-style:none;padding:0;display:grid;gap:.7rem;flex:1}
.pack li{position:relative;padding-inline-start:1.4em;color:var(--ink);line-height:1.6}
.pack li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--gold)}
.pack__sample{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:14px;background:var(--cream);color:var(--green);font:700 .98rem/1.3 var(--f-b);text-align:start;cursor:pointer;transition:box-shadow .3s}
.pack__sample:hover{/* taste-skill-ignore: focus ring style outline */box-shadow:inset 0 0 0 1.5px var(--green)}
.pack__thumb{flex:none;width:46px;height:62px;border-radius:9px;overflow:hidden;background:var(--white)}
.pack__thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.pack__sample--alt{margin-top:-.7rem;padding:4px 8px;background:none;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.pack__sample--alt:hover{box-shadow:none}
.pack .btn{align-self:stretch}
.pack--hot{background:var(--green);color:var(--white);padding-top:3.2rem;padding-bottom:3rem}
.pack--hot .pack__price{border-color:rgba(255,255,255,.4)}
.pack--hot .pack__for,.pack--hot li{color:var(--white)}
.pack--hot li::before{background:var(--gold-lt)}
.pack--hot .pack__sample{background:rgba(255,255,255,.12);color:var(--white)}
.pack--hot .pack__sample:hover{/* taste-skill-ignore: focus ring style outline */box-shadow:inset 0 0 0 1.5px var(--white)}
.pack__badge{position:absolute;top:-18px;inset-inline-start:2rem;background:var(--pop);color:var(--on-pop);font-size:.9rem;font-weight:700;line-height:1;padding:.65rem 1.1rem;border-radius:999px;rotate:-4deg}
.packs__foot{margin-top:9vh;max-width:62ch;font-size:clamp(1.02rem,1.3vw,1.2rem)}
@media (max-width:980px){.packs__grid{grid-template-columns:1fr;gap:48px;max-width:560px;margin-inline:auto}}

/* 7. chat */
.chat{position:relative;height:300vh;background:var(--white)}
.chat__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6vw;padding:0 8vw}
.chat__side h2{font:700 clamp(2.6rem,6vw,6rem)/1.3 var(--f-h);color:var(--green)}
.phone{width:min(390px,86vw);height:min(76vh,700px);background:var(--cream);border:9px solid var(--ink);border-radius:46px;display:flex;flex-direction:column;overflow:hidden;/* taste-skill-ignore: device mockup */box-shadow:0 40px 90px rgba(19,38,28,.2)}
.phone__bar{display:flex;align-items:center;gap:12px;padding:18px 16px 12px;background:var(--green);color:var(--white)}
.phone__av{width:42px;height:42px;padding:6px;border-radius:50%;background:var(--white);fill:var(--green);flex:none}
.phone__bar b{display:block;font:700 1.05rem/1.2 var(--f-b)}
.phone__bar span{font-size:.8rem;opacity:.85}
.phone__screen{position:relative;flex:1;overflow:hidden}
.thread{display:flex;flex-direction:column;gap:10px;padding:18px 14px 24px;will-change:transform}
.msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:.98rem;line-height:1.6;white-space:pre-line;opacity:0;transform:translateY(14px)}
.msg--me{align-self:flex-start;background:var(--white);color:var(--ink);border-start-start-radius:5px}
.msg--them{align-self:flex-end;background:var(--green);color:var(--white);border-start-end-radius:5px}
.typing{align-self:flex-end;display:flex;gap:5px;padding:14px 16px;border-radius:18px;background:var(--green);opacity:0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--white);opacity:.4;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:1;transform:translateY(-3px)}}
.phone__cta{display:block;text-align:center;padding:18px;background:var(--pop);color:var(--on-pop);font-weight:700;text-decoration:none;cursor:pointer}
@media (max-width:860px){.chat__stage{grid-template-columns:1fr;justify-items:center;align-content:center;gap:22px;padding:12vh var(--gut) 4vh}.chat__side{text-align:center}.chat__side h2 br{display:none}.chat__side h2{font-size:clamp(2rem,8vw,2.8rem)}.phone{height:62vh}}

/* 8. partners on the breaking colour */
.partners{position:relative;padding:20vh var(--gut);background:var(--pop);color:var(--on-pop);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"h rows" "how rows" "btn rows";column-gap:7vw;align-items:start}
.partners h2{grid-area:h}.partners__rows{grid-area:rows}.partners__how{grid-area:how}.partners > .btn{grid-area:btn;justify-self:start}
@media (max-width:900px){.partners{display:block}.partners > .btn{display:inline-flex}}
.partners h2{font:700 clamp(3rem,8.4vw,9rem)/1.25 var(--f-h);margin-bottom:8vh}
.partners__rows{display:grid}
.prow{--l:1;position:relative;display:grid;gap:6px;padding:2rem 0}
.prow::before{content:"";position:absolute;top:0;inset-inline:0;height:1.5px;background:currentColor;opacity:.35;transform:scaleX(var(--l));transform-origin:right}
.prow b{font:700 clamp(1.8rem,4vw,3.8rem)/1.3 var(--f-b);font-variant-numeric:tabular-nums}
.prow > span{font-size:clamp(1.05rem,1.4vw,1.3rem)}
.partners__how{max-width:40ch;font-size:clamp(1.1rem,1.5vw,1.35rem);margin:0 0 34px}
@media (max-width:900px){.partners__how{margin:7vh 0 34px}}

/* 9. founder + final */
.founder{padding:16vh var(--gut) 14vh;background:var(--white)}
.founder blockquote{margin:0 0 12vh}
.founder blockquote p{font:700 clamp(3rem,9vw,9.6rem)/1.35 var(--f-h);color:var(--green)}
.founder blockquote footer{margin-top:26px;color:var(--muted)}
.final{display:grid;justify-items:center;gap:30px;text-align:center}
.final h2{font:700 clamp(3.2rem,10vw,11rem)/1.25 var(--f-h);color:var(--green)}
.final__sub{max-width:40ch;font-size:clamp(1.05rem,1.4vw,1.3rem)}
.final__tel{font:500 1.3rem/1 var(--f-b);letter-spacing:.08em;text-decoration:none;color:var(--green)}

/* footer: the logo again, with our work playing inside the waw */
.foot{position:relative;isolation:isolate;overflow:hidden;background:var(--green);color:var(--white);padding:0 var(--gut)}
.foot__ribbon{margin:0 calc(var(--gut) * -1);background:var(--pop);color:var(--on-pop);padding:.8rem 0;overflow:hidden}
.foot__ribbon .ribbon__row{font-size:clamp(1.1rem,2vw,1.6rem)}
.foot__logo{position:relative;z-index:1;width:min(100%,1000px);aspect-ratio:411/256;margin:9vh auto 0;container-type:inline-size}
.foot__logo svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--white)}
.foot__win{position:absolute;left:calc(324.9 / 411 * 100%);top:calc(49.8 / 256 * 100%);width:calc(49.6 / 411 * 100%);height:calc(78.2 / 256 * 100%);overflow:hidden;background:var(--green-dk)}
.foot__win video{width:100%;height:100%;object-fit:cover;object-position:top}
.foot__row{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;padding:4vh 0 40px;margin-top:6vh;font-size:.95rem}
.foot__tel{text-decoration:none;font-weight:700;letter-spacing:.06em;color:var(--gold-lt)}
.foot__small{font-size:.85rem;opacity:.85}

/* site viewer */
.viewer{position:fixed;inset:0;z-index:300;display:grid;place-items:center}
.viewer[hidden]{display:none}
.viewer__scrim{position:absolute;inset:0;background:rgba(0,30,18,.5);opacity:0;transition:opacity .5s}
.viewer.is-open .viewer__scrim{opacity:1}
.viewer__panel{position:relative;width:min(1280px,94vw);height:min(92vh,980px);height:min(92svh,980px);background:var(--white);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(40px) scale(.97);transition:transform .55s var(--ease),opacity .4s}
.viewer.is-open .viewer__panel{opacity:1;transform:none}
.viewer__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;/* taste-skill-ignore: dialog toolbar */border-bottom:1px solid var(--line)}
.viewer__title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.viewer__name{font:700 1.2rem/1.2 var(--f-b);color:var(--green);white-space:nowrap}
.viewer__sub{font-size:.9rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer__modes{display:flex;background:var(--cream);border-radius:999px;padding:4px}
.viewer__mode{border:0;background:none;padding:.55rem 1rem;border-radius:999px;font:700 .9rem/1 var(--f-b);color:var(--green);cursor:pointer}
.viewer__mode[aria-pressed="true"]{background:var(--green);color:var(--white)}
.viewer__open{font:700 .9rem/1 var(--f-b);color:var(--green);text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.viewer__close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--cream);color:var(--green);cursor:pointer}
.viewer__close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.viewer__stage{position:relative;flex:1;display:grid;place-items:center;background:var(--cream);overflow:hidden}
.viewer__device{flex:none;background:#fff;border-radius:30px;overflow:hidden;/* taste-skill-ignore: device mockup */box-shadow:0 30px 70px rgba(0,0,0,.18);transform-origin:50% 50%}
.viewer[data-mode="desk"] .viewer__device{border-radius:12px}
.viewer__device iframe{display:block;width:100%;height:100%;border:0}
.is-viewing,.is-viewing body{overflow:hidden}
@media (max-width:760px){.viewer__panel{width:100vw;height:100vh;height:100svh;border-radius:0}.viewer__open,.viewer__sub{display:none}}

/* reduced motion / no GSAP: everything sits still and readable */
.static .hero{height:auto}
.static .hero__stage{position:relative;height:auto;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:30px;padding:18vh var(--gut) 12vh}
.static .hero__obj{position:relative;left:auto;top:auto;transform:none;width:min(90vw,700px);height:auto;aspect-ratio:411/256}
.static .hero__lockup{width:100%;height:100%}
.static .hero__win{display:none}
.static .hero__c,.static .hero__flash,.static .hero__shade,.static .hero__glow,.static .dust{display:none}
.static .hero__end{position:relative;inset:auto;opacity:1;visibility:visible;color:var(--ink);padding:0}
.static .hero__title{color:var(--green)}
.static .statement__text .w{opacity:1}
.static .hand__arrow path{stroke-dashoffset:0}
.static .work__stage{position:relative;height:auto}
.static .slide{position:relative;inset:auto;min-height:100svh}
.static .how{height:auto}.static .how__stage{position:relative;height:auto}
.static .how__head{position:relative;top:auto;padding:12vh var(--gut) 0}
.static .step{position:relative;inset:auto;visibility:visible;background:var(--c-bg)}
.static .step__ring{stroke-dashoffset:0}
.static .chat{height:auto}.static .chat__stage{position:relative;height:auto;padding:16vh var(--gut)}
.static .msg{opacity:1;transform:none}.static .typing{display:none}

@media (prefers-reduced-motion:reduce){
  .grain,.hero__glow,.drift::before,.spin svg,.badge__ring,.typing i,.hero__hint i{animation:none}
}


/* ===== v6 (Sultan, 11 Nov): the name stands still, the night facade answers the pointer, the ه is the door ===== */
:root{--night:#052619;--night-2:#0B3A27;--cream-lt:#F4EFE2;--champ:#E2C27A}
.sk{transform:skewY(var(--sk,0deg));will-change:transform}
.flip,.statement__text{perspective:900px}
.flip .w,.statement__text .w{display:inline-block;will-change:transform}
.statement{will-change:clip-path}
.hand{transform-origin:50% 50%}

/* hero at night */
.hero{background:var(--night)}
.hero__stage{background:var(--night);color:var(--cream-lt)}
.facade{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__door{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:var(--night-2)}
.hero__wall{--cw:400;left:0;top:0;transform-origin:0 0;transform:none;gap:calc(var(--cw) * .05px)}
.hero__wall video{border-radius:calc(var(--cw) * .035px);background:var(--night-2)}
.hero__obj{z-index:2;pointer-events:none}
.hero__lockup{fill:var(--cream-lt)}
.hero__c{color:var(--cream-lt);font-weight:500}
.hero__c::before{display:none}
.hero__hint i{background:var(--champ)}
.hero__flash{background:var(--champ)}

/* work: the phones are 3D objects; a plain button in each site's own colours */
.work__stage{perspective:1300px}
.slide{perspective:1200px;transform-style:preserve-3d}
.slide__phone{transform-style:preserve-3d;will-change:transform}
.slide__phone::after{content:"";position:absolute;inset:0;pointer-events:none;/* taste-skill-ignore: glass reflection on the device */background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),rgba(255,255,255,0) 55%);mix-blend-mode:screen}
.slide__phone video{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.2%)}}
.slide__open{position:absolute;z-index:3;bottom:6.5vh;inset-inline-end:var(--gut);border:0;border-radius:14px;padding:1.1rem 1.7rem;background:var(--s-acc);color:var(--s-on,#fff);font:700 1.05rem/1 var(--f-b);cursor:pointer;transition:background-color .3s,color .3s}
.slide__open:hover{background:var(--s-fg);color:var(--s-bg)}
@media (max-width:760px){.slide__open{bottom:5vh;padding:.95rem 1.25rem;font-size:.95rem}}

/* how: slanted colour blades and a number cut in 3D */
.how__bg{isolation:isolate}
.how__layer{position:absolute;inset:0;clip-path:polygon(100% 0,100% 0,100% 100%,130% 100%)}
.step__num{perspective:900px}
.step__num span{--sh:color-mix(in srgb,var(--c-fg) 55%,#000);/* taste-skill-ignore: 3D cut type */text-shadow:calc(var(--sx,1) * 1px) calc(var(--sy,1) * 1px) 0 var(--sh),calc(var(--sx,1) * 2px) calc(var(--sy,1) * 2px) 0 var(--sh),calc(var(--sx,1) * 3px) calc(var(--sy,1) * 3px) 0 var(--sh),calc(var(--sx,1) * 4px) calc(var(--sy,1) * 4px) 0 var(--sh),calc(var(--sx,1) * 5px) calc(var(--sy,1) * 5px) 0 var(--sh),calc(var(--sx,1) * 6px) calc(var(--sy,1) * 6px) 0 var(--sh),calc(var(--sx,1) * 7px) calc(var(--sy,1) * 7px) 0 var(--sh),calc(var(--sx,1) * 8px) calc(var(--sy,1) * 8px) 0 var(--sh)}

/* packs: engraved banknote lines behind a brochure that unfolds */
.packs{position:relative;isolation:isolate}
.guilloche{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.packs__grid{perspective:1600px;transform-style:preserve-3d}
.pack{transform-style:preserve-3d;backface-visibility:hidden}
.pack::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;/* taste-skill-ignore: glare while leaning */background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 55%)}
.pack:hover::after{opacity:1}

/* chat: a doodle wall of bubbles and ticks that drifts */
.chat--doodle .chat__stage{background-color:var(--white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23006039' stroke-opacity='.11' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 28h46a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H40l-13 11v-11h-5a9 9 0 0 1-9-9V37a9 9 0 0 1 9-9z'/%3E%3Cpath d='M124 112h44a9 9 0 0 1 9 9v18a9 9 0 0 1-9 9h-5v11l-13-11h-26a9 9 0 0 1-9-9v-18a9 9 0 0 1 9-9z'/%3E%3Cpath d='M128 38l6 6 12-12M140 44l12-12'/%3E%3Cpath d='M30 140l6 6 12-12M42 146l12-12'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px;background-position:var(--dx,0) var(--dy,0)}
.chat__stage{perspective:1200px}
.phone{transform-style:preserve-3d;will-change:transform}

/* final: the last call is an arch door */
.door-cta{position:relative;display:grid;place-items:center;width:clamp(210px,19vw,260px);aspect-ratio:120/170;text-decoration:none;color:var(--cream-lt);cursor:pointer}
.door-cta svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.door-cta__frame{fill:var(--green);transition:fill .4s}
.door-cta__light{fill:var(--night);transition:fill .4s;animation:doorglow 3.2s ease-in-out infinite}
@keyframes doorglow{50%{fill:var(--night-2)}}
.door-cta span{position:relative;margin-top:26%;font:700 clamp(1.15rem,1.5vw,1.35rem)/1.55 var(--f-b);text-align:center;transition:color .4s}
.door-cta:hover .door-cta__frame{fill:var(--pop)}
.door-cta:hover .door-cta__light{fill:var(--champ);animation:none}
.door-cta:hover span{color:var(--night)}

.foot{perspective:1200px}

.static .hero__stage{background:var(--night)}
.static .facade,.static .hero__door{display:none}
.static .hero__end,.static .hero__title{color:var(--cream-lt)}
.static .hero__lockup{fill:var(--cream-lt)}
.static .statement{clip-path:none}
@media (prefers-reduced-motion:reduce){.slide__phone video,.door-cta__light{animation:none}}

/* v7: the opening says plainly who we are; live status and Al-Ahsa time in the corners */
.hero__sub{position:absolute;z-index:2;inset-inline:var(--gut);top:var(--sub-top,72%);text-align:center;font:500 clamp(1.08rem,1.55vw,1.45rem)/1.6 var(--f-b);color:var(--cream-lt);opacity:var(--f,1);text-wrap:balance}
.hero__c--1 .live{width:8px;height:8px;border-radius:50%;background:#4ADE80}
.hero__c--1.is-off .live{background:var(--champ);animation:none}
.hero__c--2{font-variant-numeric:tabular-nums}
@media (max-width:760px){.hero__sub{font-size:1.02rem}}
@media (prefers-reduced-motion:reduce){.hero__c--1 .live{animation:none}}
/* phones: the site's name sits above the device, readable, instead of hiding behind it */
@media (max-width:760px){
  .slide__name{top:19%;font-size:min(30vw,15vh);translate:-50% -50%}
  .slide__phone{height:50vh;translate:0 6vh}
  .slide__phone:hover{translate:0 6vh}
  .slide__meta{bottom:4.5vh}
}

/* v7 details: arch cursor with a label, rolling button labels, reading progress, a toast, WhatsApp ticks */
.cursor{width:15px;height:21px;border-radius:0;background:none;box-shadow:none;mix-blend-mode:difference;transition:width .4s var(--ease),height .4s var(--ease),opacity .3s}
.cursor svg{width:100%;height:100%;fill:#fff;overflow:visible}
.cursor.is-big{width:42px;height:60px}
.cursor-label{position:fixed;left:0;top:0;z-index:151;pointer-events:none;padding:.5rem .85rem;border-radius:8px;background:var(--ink);color:#fff;font:700 .85rem/1 var(--f-b);white-space:nowrap;opacity:0;transition:opacity .25s}
.cursor-label.is-on{opacity:1}
@media (hover:none){.cursor-label{display:none}}
.roll{display:inline-grid;overflow:hidden;line-height:1.45;vertical-align:middle}
.roll>span{grid-area:1/1;transition:transform .55s var(--ease)}
.roll>span+span{transform:translateY(110%)}
@media (hover:hover){
  a:hover>.roll>span:first-child,button:hover>.roll>span:first-child{transform:translateY(-110%)}
  a:hover>.roll>span+span,button:hover>.roll>span+span{transform:none}
}
.btn:active,.slide__open:active,.nav__cta:active,.phone__cta:active{scale:.96}
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;background:var(--champ);transform:scaleX(0);transform-origin:right}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:320;translate:-50% 20px;opacity:0;pointer-events:none;background:var(--ink);color:#fff;font:700 .95rem/1 var(--f-b);padding:.95rem 1.35rem;border-radius:12px;transition:opacity .3s,translate .45s var(--ease)}
.toast.is-on{opacity:1;translate:-50% 0}
.msg__meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:3px;font-size:.7rem;line-height:1;opacity:.72;white-space:nowrap;font-variant-numeric:tabular-nums}
.msg__meta svg{width:17px;height:11px;fill:none;stroke:#53BDEB;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot__top{text-decoration:none;font-weight:700;color:var(--cream-lt);border-bottom:1.5px solid rgba(244,239,226,.4);padding-bottom:2px;transition:border-color .3s}
.foot__top:hover{border-color:var(--champ)}
@media (prefers-reduced-motion:reduce){.roll>span{transition:none}}

/* ===== v8 (Neutomni as the reference, Sultan's picks) ===== */
/* the name docks into the nav: the small logo waits until we have walked through the door */
.nav__brand{transition:opacity .35s}
.nav.is-undocked .nav__brand{opacity:0;pointer-events:none}
.nav.is-undocked .nav__brand:focus-visible{opacity:1}
.dock{position:fixed;left:0;top:0;z-index:62;width:100px;pointer-events:none;opacity:0;transform-origin:0 0;color:var(--cream-lt)}
.dock svg{display:block;width:100%;height:auto;fill:currentColor}
/* the nav steps aside while you read, and comes back the moment you scroll up */
.nav{transition:background-color .4s,box-shadow .4s,color .4s,translate .55s var(--ease)}
.nav.is-away{translate:0 -110%}

/* works pop-over: our sites with a live thumbnail */
.works-pop{/* taste-skill-ignore: a real overlay */position:absolute;top:calc(100% + 6px);z-index:61;display:grid;grid-template-columns:auto 180px;gap:18px;align-items:start;padding:16px;border-radius:18px;background:var(--night);color:var(--cream-lt);box-shadow:0 30px 60px rgba(0,0,0,.28);opacity:0;translate:0 -8px;transition:opacity .3s,translate .4s var(--ease);pointer-events:none}
.works-pop.is-on{opacity:1;translate:0 0;pointer-events:auto}
.works-pop__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;min-width:230px}
.works-pop__list button{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;padding:.6rem .8rem;border:0;border-radius:10px;background:none;color:inherit;text-align:start;cursor:pointer;transition:background-color .25s,opacity .25s}
.works-pop__list b{font:700 1.05rem/1.2 var(--f-b)}
.works-pop__list span{font-size:.82rem;opacity:.7}
.works-pop__list:hover button{opacity:.45}
.works-pop__list button:hover,.works-pop__list button:focus-visible{opacity:1;background:rgba(244,239,226,.08)}
.works-pop__thumb{width:180px;aspect-ratio:180/390;border-radius:16px;overflow:hidden;background:var(--night-2)}
.works-pop__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .25s,scale .5s var(--ease)}
.works-pop__thumb img.is-swap{opacity:0;scale:1.06}
/* nav links: hovering one dims its siblings */
@media (hover:hover){.nav__links:hover a{opacity:.5}.nav__links a:hover{opacity:1}}
.nav__links a{transition:background-color .3s,color .3s,opacity .3s}

/* phone menu: our sites as small screens */
.menu__works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.menu__works button{display:grid;gap:6px;padding:0;border:0;background:none;color:inherit;font:700 .85rem/1.2 var(--f-b);text-align:center;cursor:pointer}
.menu__works img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:10px;background:var(--night-2)}
@media (min-width:761px){.menu__works{grid-template-columns:repeat(7,minmax(0,1fr));max-width:900px}}

/* honest trust chips under the hero's call */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:640px}
.chips li{padding:.5rem .95rem;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--cream-lt);background:rgba(244,239,226,.12)}

/* how: one shape that becomes a lit window, step by step */
.how__arch{position:absolute;z-index:0;left:12vw;top:50%;width:min(30vw,52vh);height:auto;translate:0 -46%;pointer-events:none;overflow:visible}
.how__arch-out{fill:currentColor;opacity:.16}
.how__arch-win{fill:rgba(255,255,255,.3)}
.how__arch-glow{fill:var(--champ);opacity:0}
.how .step{z-index:1}
@media (max-width:760px){.how__arch{right:auto}}

/* tickets: a serial on each, and what every package includes */
.pack__code{position:absolute;top:1.1rem;inset-inline-end:1.4rem;font-size:.74rem;font-weight:500;letter-spacing:.02em;opacity:.8}
.pack--hot .pack__code{top:1.6rem}
.packs__all{margin-top:9vh;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 40px;align-items:baseline;max-width:1100px}
.packs__all b{font:700 clamp(1.4rem,2.2vw,2rem)/1.3 var(--f-h);color:var(--green)}
.packs__all ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.packs__all li{padding:.55rem 1rem;border-radius:12px;background:var(--white);color:var(--ink);font-size:.98rem;font-weight:500}
.packs__foot{margin-top:5vh}
@media (max-width:760px){.packs__all{grid-template-columns:1fr}}

/* the WhatsApp window on computers */
.wa{position:fixed;inset:0;z-index:310;display:grid;place-items:center;padding:20px}
.wa[hidden]{display:none}
.wa__scrim{position:absolute;inset:0;background:rgba(5,38,25,.62);opacity:0;transition:opacity .4s}
.wa.is-open .wa__scrim{opacity:1}
.wa__panel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;width:min(760px,100%);padding:34px;border-radius:26px;background:var(--white);color:var(--ink);opacity:0;translate:0 30px;scale:.96;transition:opacity .35s,translate .55s var(--ease),scale .55s var(--ease)}
.wa.is-open .wa__panel{opacity:1;translate:0 0;scale:1}
.wa__close{position:absolute;top:14px;inset-inline-end:14px;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--cream);color:var(--green);cursor:pointer}
.wa__close svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.wa__qr{position:relative;width:240px;padding:14px;border-radius:20px;background:var(--cream)}
.wa__qr canvas{display:block;width:100%;height:auto;border-radius:8px}
.wa__body{display:grid;gap:12px}
.wa__body h2{font:700 clamp(1.8rem,3vw,2.4rem)/1.3 var(--f-h);color:var(--green)}
.wa__msg{padding:.75rem 1rem;border-radius:14px 14px 4px 14px;background:#D9FDD3;color:#111B21;font-size:.98rem;width:fit-content;max-width:100%}
.wa__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wa__note{font-size:.88rem;color:var(--muted)}
@media (max-width:640px){.wa__panel{grid-template-columns:1fr;justify-items:center;text-align:center}.wa__qr{width:200px}}

/* the site viewer opens out of an arch */
.viewer__panel{will-change:clip-path}
/* the last step's number stands dark inside the lit window */
.step:last-of-type .step__num span{color:var(--night);--sh:#9C7A2E}
/* phone menu: everything fits on one screen, and it scrolls if a small phone needs it */
.menu{overflow-y:auto;gap:22px;padding-top:104px}
.menu:focus{outline:none}
@media (max-width:760px){.menu__links a{font-size:clamp(2rem,9vw,2.8rem);line-height:1.3}.menu__works{gap:8px}.menu__works button{font-size:.8rem}}

/* ---------- v11: the small details ---------- */
/* text you select takes our colours; the scrollbar is thin and green */
::selection{background:var(--champ);color:var(--night)}
html{scrollbar-width:thin;scrollbar-color:var(--green) transparent}
/* headings break into even lines, and paragraphs never end on one lonely word */
h1,h2,h3,.statement__text,.next__t,.founder blockquote p{text-wrap:balance}
p,li{text-wrap:pretty}

/* anything that opens WhatsApp carries its little glyph */
.wa-ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wa-ico .wa-ico__h{fill:currentColor;stroke:none}
.nav__cta{display:inline-flex;align-items:center;gap:.5em}
.phone__cta{display:flex;align-items:center;justify-content:center;gap:8px}
@media (max-width:380px){.nav__cta .wa-ico{display:none}}

/* the phone number links: a line grows under them from the right */
.final__tel,.foot__tel,.menu__tel{position:relative}
.final__tel::after,.foot__tel::after,.menu__tel::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.final__tel:hover::after,.foot__tel:hover::after,.menu__tel:hover::after{transform:scaleX(1)}

/* the Al-Ahsa clock: its colon keeps the seconds */
.clock .colon{animation:colon 2s steps(1) infinite}
@keyframes colon{50%{opacity:.2}}
/* the corner that names the site in the window changes softly */
.hero__c--3 span{display:inline-block}

/* trust chips and the "every package" list get a small tick */
.chips li,.packs__all li{display:inline-flex;align-items:center;gap:.45em}
.chips li::before,.packs__all li::before{content:"";width:.85em;height:.85em;flex:none;background:var(--champ);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.packs__all li::before{background:var(--gold)}

/* the sticker is held on by a strip of tape */
.sticker::before{content:"";position:absolute;top:-10px;left:50%;width:56px;height:20px;translate:-50% 0;rotate:7deg;background:rgba(244,239,226,.5);border-radius:2px}

/* our phones get their camera island */
.slide__phone::before{content:"";position:absolute;z-index:2;top:7px;left:50%;translate:-50% 0;width:27%;height:15px;border-radius:999px;background:#0B0B0B;pointer-events:none}
.phone{position:relative}
.phone::after{content:"";position:absolute;z-index:3;top:8px;left:50%;translate:-50% 0;width:28%;height:17px;border-radius:999px;background:var(--ink);pointer-events:none}
.phone__bar{padding-top:32px}

/* the chat: a date chip, "typing…" in the header, grey ticks that turn blue once Sultan replies */
.day{align-self:center;margin:0 0 2px;padding:.3rem .85rem;border-radius:8px;background:rgba(255,255,255,.92);color:var(--muted);font-size:.74rem;font-weight:500}
.phone__status{display:grid}
.phone__status i{grid-area:1/1;font-style:normal;transition:opacity .2s}
.phone__status i:first-child{opacity:calc(.85 - var(--typing,0) * .85)}
.phone__status i + i{opacity:calc(var(--typing,0) * .85)}
.msg__meta svg{stroke:var(--tick,#8696A0);transition:stroke .3s}
.static .msg__meta svg{stroke:#53BDEB}

/* ticket stubs: a barcode and a line of our own */
.pack__stub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 0;padding-top:14px;border-top:2px dashed color-mix(in srgb,currentColor 22%,transparent);font-size:.8rem;font-weight:500;opacity:.78}
.pack__bars{width:96px;height:18px;fill:currentColor}
.pack__thumb img{transition:scale .5s var(--ease)}
.pack__sample:hover .pack__thumb img{scale:1.08}
.menu__works img{transition:scale .5s var(--ease)}
.menu__works button:hover img{scale:1.05}

/* the founder signs his line */
.founder .founder__note{max-width:46ch;margin-top:5vh;font:500 clamp(1.05rem,1.4vw,1.3rem)/1.85 var(--f-b);color:var(--ink)}
.founder blockquote footer{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.sig{display:inline-block;font:700 clamp(2.2rem,4vw,3.4rem)/1.2 var(--f-h);color:var(--gold);rotate:-6deg}

/* the door gets its handle; the number gets a word under it */
.door-cta__knob{fill:var(--champ);transition:fill .4s}
.door-cta:hover .door-cta__knob{fill:var(--night)}
.final__hint{margin-top:-20px;font-size:.9rem;color:var(--muted)}

/* footer: the ه's window is lit, like one of the facade's windows at night */
.foot__haa{fill:var(--champ)}
.foot__time{font-variant-numeric:tabular-nums;opacity:.85}
.foot__top{display:inline-flex;align-items:center;gap:7px}
.foot__top svg{display:block;width:.62em;height:.9em;fill:currentColor;flex:none}

/* the site viewer says it is opening while the site loads */
.viewer__device{position:relative}
.viewer__wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;margin:0;color:var(--muted);font-weight:500;font-size:1rem}
.viewer__wait svg{width:30px;height:auto;fill:var(--green);animation:wait 1.2s ease-in-out infinite alternate}
@keyframes wait{from{opacity:.25}to{opacity:1}}
.viewer__device iframe{position:relative;transition:opacity .45s}
.viewer.is-loading .viewer__device iframe{opacity:0}

@media (prefers-reduced-motion:reduce){.clock .colon,.viewer__wait svg{animation:none}}

/* each shop's city carries a small map pin (the online store doesn't) */
.slide__meta span{display:inline-flex;align-items:center;gap:.4em}
.slide__meta span:not(.is-online)::before{content:"";width:.78em;height:.95em;flex:none;background:currentColor;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") center/contain no-repeat}