/* Cinko site v12 — shared styles for index.html, about.html, contact.html
   Art direction: a dark stage with giant condensed type for every page opening
   (the product sits on the type), then cream, sand and teal working sections.
   Royal blue is the only action colour. */

:root{
  --ink-0:#011A21; --ink:#022B35; --petrol:#063C43; --petrol-2:#0B4B54;
  --cream:#FDF9EF; --sand:#F3EDE1; --paper:#FFFDF9; --teal:#DDECE8; --mint:#A9D8CD;
  --royal:#2453D9; --royal-dk:#1B43B9; --royal-lt:#8EAEFF; --royal-soft:#EAF0FD;
  --black-g:#1E2226; --muted:#4D5D6B; --on-dark:#C9DEDA; --on-dark-2:rgba(253,249,239,.62);
  --line:rgba(2,43,53,.14); --line-dk:rgba(253,249,239,.14);
  --err:#B3261E; --err-bg:#FBEAE8; --chat:#ECE5DB; --bubble:#D9FDD3; --wa:#0B6B57;
  --r:22px; --r-lg:30px; --gut:max(18px,env(safe-area-inset-left,0px));
  --bar:34px; --hdr:72px;
  --display:"Archivo","Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font:"Cairo","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:light;
}
@media (max-width:959px){:root{--hdr:64px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
html[lang=ar] :is(h1,h2,h3,h4){font-family:var(--font);font-weight:700;letter-spacing:0;line-height:1.3}
html[lang=ar] body{word-spacing:.05em}
html[lang=ar] :is(h1,h2,h3,.btn,.nav a,.chip span){word-spacing:.16em}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--royal-lt);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:max(18px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:12px;top:0;z-index:200;background:var(--royal);color:#fff;padding:10px 14px;border-radius:10px;transform:translateY(-200%)}
.skip:focus{transform:translateY(12px)}
bdi{unicode-bidi:isolate}
html[lang=en] [data-lang-toggle]{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}

/* ---------- page enter / leave (every page opens on the dark stage, so the gap between pages is ink, not white) ---------- */
html{background:var(--ink-0)}


/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:1.02rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s;touch-action:manipulation;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
html[dir=rtl] .btn .arr{transform:scaleX(-1)}
html[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn-primary{background:var(--royal);color:#fff;box-shadow:0 10px 24px -12px rgba(36,83,217,.8)}
.btn-primary:hover{background:var(--royal-dk)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:rgba(127,127,127,.12)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#085846}
@media (max-width:420px){.btn{white-space:normal;text-align:center;padding:10px 20px}}
.btn-sm{min-height:42px;padding:0 18px;font-size:.95rem}
.btn-block{width:100%}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- header ---------- */
.site-top{position:fixed;inset:0 0 auto;z-index:60;color:var(--cream);transition:transform .45s var(--ease)}
.site-top .bar{height:var(--bar);background:var(--ink-0);display:grid;place-items:center;font-size:.82rem;letter-spacing:.02em;color:var(--on-dark);overflow:hidden;position:relative}
.site-top .bar span{grid-area:1/1;opacity:0;transform:translateY(100%);transition:opacity .5s,transform .5s var(--ease);white-space:nowrap;padding:0 12px;text-align:center}
.site-top .bar span.on{opacity:1;transform:none}
.site-top .bar span.off{opacity:0;transform:translateY(-100%)}
.site-top .main{height:var(--hdr);background:transparent;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,box-shadow .35s}
.site-top.scrolled{transform:translateY(calc(var(--bar) * -1))}
.site-top.scrolled .main,.site-top.open .main{background:var(--ink-0);border-bottom-color:var(--line-dk);box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}
.site-top .hin{height:100%;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:46px;width:auto}
@media (max-width:959px){.logo img{height:40px}}
.nav{display:flex;gap:6px;margin-inline:auto}
.nav a{position:relative;padding:10px 14px;text-decoration:none;font-weight:500;font-size:.98rem;color:var(--on-dark);transition:color .2s}
.nav a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;background:var(--royal-lt);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .35s var(--ease)}
html[dir=rtl] .nav a::after{--o:right}
.nav a:hover,.nav a[aria-current=page]{color:var(--cream)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.nav + .acts{margin-inline-start:0}
.ibtn{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border-radius:999px;border:1px solid var(--line-dk);background:rgba(253,249,239,.04);color:var(--cream);font-weight:600;font-size:.95rem;position:relative;transition:background-color .2s,border-color .2s}
.ibtn:hover{background:rgba(253,249,239,.1);border-color:rgba(253,249,239,.3)}
.ibtn svg{width:21px;height:21px}
.ibtn.lang{display:inline-flex;gap:7px}
.badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:21px;height:21px;padding:0 5px;border-radius:99px;background:var(--royal);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--ink-0);transition:transform .3s var(--ease)}
.badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.45)}}
.top-cta{margin-inline-start:6px}
.burger{display:none}
@media (max-width:959px){
  .nav,.top-cta{display:none}
  .burger{display:inline-grid}
  .ibtn.lang .lbl{display:none}
}
/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:55;background:var(--ink-0);color:var(--cream);padding:calc(var(--hdr) + 28px) var(--gut) 32px;display:flex;flex-direction:column;gap:24px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow:auto}
.mmenu::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.05;pointer-events:none}
.site-top.open + .mmenu,.mmenu.open{opacity:1;visibility:visible}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{font-family:var(--display);font-stretch:72%;font-variation-settings:"wdth" 72;font-weight:800;font-size:clamp(2.6rem,12vw,4rem);line-height:1.05;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line-dk);opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;transition-delay:calc(var(--i) * 60ms + 80ms)}
html[lang=ar] .mmenu nav a{font-family:var(--font);font-weight:700;font-size:2.1rem;text-transform:none}
.mmenu.open nav a{opacity:1;transform:none}
.mmenu nav a[aria-current=page]{color:var(--royal-lt)}
.mmenu .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(72px,9vw,128px) 0;position:relative}
.dark{background:var(--ink);color:var(--cream)}
.dark::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.045;pointer-events:none}
.kick{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--royal)}
.kick::before{content:"";width:28px;height:2px;background:currentColor}
html[lang=ar] .kick{letter-spacing:0;font-size:.95rem}
.dark .kick{color:var(--royal-lt)}
.h2{font-size:clamp(2.1rem,1.2rem + 3.2vw,4rem);margin-top:14px}
.lead{font-size:1.12rem;color:var(--muted);max-width:52ch;margin-top:14px}
.dark .lead{color:var(--on-dark)}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 48px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head .lead{margin:0;max-width:40ch}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* reveal on scroll, once per element: blocks rise and fade in, headings arrive word by word,
   then their sentences. Only after the observer is running (html.rv), so nothing stays hidden
   without JS. Opacity and translate only: the compositor animates them, no layout work. */
/* a page opened again goes back to its start state in one frame, with no visible snap (replayMotion) */
html.rp *,html.rp *::before,html.rp *::after{transition:none!important}
html.rv [data-reveal]{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
html.rv [data-reveal=left]{translate:-30px 0}
html.rv [data-reveal].in{opacity:1;translate:none}
html.rv [data-reveal] :is(p,.lead,.facts){opacity:0;translate:0 14px;transition:opacity .7s ease,translate .8s var(--ease);transition-delay:calc(var(--d,0) * 90ms + 280ms)}
html.rv [data-reveal].in :is(p,.lead,.facts){opacity:1;translate:none}
.wsplit .wd{display:inline-block}
html.rv .wsplit .wd{opacity:0;translate:0 .55em;transition:opacity .55s ease,translate .75s var(--ease);transition-delay:calc(var(--wi,0) * 55ms)}
html.rv .wsplit.in .wd{opacity:1;translate:none}
/* pictures: animate in once reached (classes added by the script only, so nothing hides without JS) */
html.rv #trades img.pic{opacity:0;scale:1.07;transition:opacity .8s ease,scale 1.3s var(--ease);transition-delay:calc(var(--pi,0) * 70ms)}
html.rv #trades img.pic.shown{opacity:1;scale:1}
html.rv #viewer.pic{opacity:0;translate:0 32px;transition:opacity .8s ease,translate 1.1s var(--ease)} /* no zoom on the frame itself: it would overflow the page */
html.rv #viewer.pic.shown{opacity:1;translate:none}
html.rv .media .glv.pic{opacity:0;translate:0 42px;transition:transform .6s var(--ease),opacity .7s ease .15s,translate 1.1s var(--ease) .15s}
html.rv .media .glv.pic.shown{opacity:1;translate:none}
html.rv .pill .duo img.pic{opacity:0;translate:0 26px;transition:opacity .7s ease .2s,translate 1s var(--ease) .2s}
html.rv .pill .duo img.pic.shown{opacity:1;translate:none}
@supports (animation-timeline:scroll()){
  html.motion .prod{animation:prodDrift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes prodDrift{to{translate:0 -46px}}
}

/* ---------- HOME HERO: giant type, product on top ---------- */
.hero{position:relative;background:radial-gradient(55% 48% at 50% 58%,rgba(36,83,217,.42),transparent 72%),radial-gradient(40% 30% at 85% 15%,rgba(169,216,205,.12),transparent 70%),linear-gradient(180deg,var(--ink) 0%,var(--ink-0) 100%);color:var(--cream);overflow:hidden;isolation:isolate;--mq:58px;height:clamp(660px,100svh,1040px);padding-top:calc(var(--bar) + var(--hdr));container-type:inline-size;
  --cw:100cqw; --H:clamp(660px,100svh,1040px); --top0:calc(var(--bar) + var(--hdr) + 1.5svh);
  --fs:min(calc(var(--cw) * .4037),calc((var(--H) - var(--mq) - var(--top0)) * .7568))}
@supports not (width:1cqw){.hero{--cw:100vw}}
.hero::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.06;pointer-events:none;z-index:-1}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* the Cinko mark (five fingertips, three pyramids) rises behind the gloves like a horizon,
   with two outline echoes in place of the old circles */
.ckbg{position:absolute;z-index:-1;pointer-events:none;overflow:visible;bottom:var(--mq);left:64%;width:min(80vw,1200px);translate:-50% 0}
html[dir=rtl] .ckbg{left:36%}
/* the giant word is an outlined drawing (index.html): on screen with the first frame, sized by CSS */
.giant{direction:ltr;position:absolute;left:0;right:0;top:var(--top0);display:flex;justify-content:center;pointer-events:none;user-select:none}
.giant svg{display:block;width:calc(var(--fs) * 2.377);height:auto;overflow:visible}
html.js.motion .giant path{animation:wordIn .6s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes wordIn{from{transform:translateY(160px);opacity:0}}
@keyframes rise{to{transform:none;opacity:1}}
/* desktop: the product fills the space beside the text column, standing on the lower part of the
   letters; the box is a size container, so the photo frame (.move) keeps the photo's shape */
.prod{position:absolute;z-index:2;bottom:calc(var(--mq) + 20px);inset-inline-start:calc(max(var(--gut),calc((100% - 1240px) / 2 + 18px)) + min(410px,36vw) + 28px);inset-inline-end:max(18px,calc((100% - 1240px) / 2 + 18px));height:max(220px,min(860px,calc(var(--H) - var(--mq) - 20px - var(--top0) - var(--fs) * .222)));container-type:size}
.prod .move{position:absolute;bottom:0;left:50%;translate:-50% 0;width:min(100cqw,calc(100cqh * 1150 / 1015));aspect-ratio:1150/1015}
@supports not (width:1cqw){.prod .move{inset:0;width:auto;translate:none}}
.hero.live .prod .move{will-change:transform}
.prod .shadow{position:absolute;left:10%;right:10%;bottom:1%;height:16%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%);transform:translateY(22%)}
.prod .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html.js.motion .prod .shadow{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0}}
.hp{position:absolute;z-index:3;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.hp .dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 6px rgba(253,249,239,.22);position:relative}
.hp .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(253,249,239,.55);animation:ping 2.4s ease-out 3}
@keyframes ping{from{transform:scale(.7);opacity:1}to{transform:scale(2.2);opacity:0}}
.hp .tag{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:2px;white-space:nowrap;background:rgba(1,26,33,.88);border:1px solid var(--line-dk);border-radius:14px;padding:9px 13px;font-size:.84rem;line-height:1.3;color:var(--on-dark);text-decoration:none;transition:transform .3s var(--ease),background-color .2s}
.hp .tag b{color:var(--cream);font-size:.98rem;display:flex;align-items:center;gap:8px}
.hp .tag i{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid rgba(253,249,239,.6)}
.hp a.tag:hover{background:var(--royal);transform:translateX(-50%) translateY(-3px)}
html.js.motion .hp{animation:fadeIn .5s ease both;animation-delay:calc(.35s + var(--i) * 120ms)}
.hp.left .tag{left:auto;right:-6px;transform:none}
.hp.left a.tag:hover{transform:translateY(-3px)}
.hero-copy{position:absolute;inset-inline-start:max(var(--gut),calc((100% - 1240px) / 2 + 18px));bottom:calc(var(--mq) + 30px);width:min(410px,36vw);display:flex;flex-direction:column;gap:22px;z-index:3}
.hero-copy .eb{display:inline-block;font-size:.86rem;color:#C9D7FF;font-weight:600;letter-spacing:.02em;background:rgba(1,26,33,.9);border:1px solid rgba(142,174,255,.3);padding:5px 12px;border-radius:99px}
.hero-copy h1{text-shadow:0 2px 20px rgba(1,26,33,.55)}
.hero-copy h1{font-size:clamp(1.85rem,1rem + 1.8vw,2.9rem);margin-top:8px}
.hero-copy .ld{color:var(--on-dark);margin-top:10px;font-size:1.02rem;max-width:40ch}
.hero-copy .ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero-copy .ctas .btn{flex:1 1 auto}
html.js.motion .hero-copy > *{animation:up .55s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes up{from{transform:translateY(18px)}}
.marq{position:absolute;left:0;right:0;bottom:0;height:var(--mq);border-top:1px solid var(--line-dk);background:rgba(1,26,33,.6);display:flex;align-items:center;overflow:hidden;z-index:3}
.marq .track{display:flex;flex:none;gap:0;animation:marq 48s linear infinite;will-change:transform}
.marq:hover .track,.marq.paused .track{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:22px;padding-inline-end:22px;white-space:nowrap;font-family:var(--display);font-stretch:85%;font-variation-settings:"wdth" 85;font-weight:600;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark)}
html[lang=ar] .marq span{font-family:var(--font);letter-spacing:0;text-transform:none}
.marq span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--royal-lt);opacity:.8}
@keyframes marq{to{transform:translateX(-50%)}}
html[dir=rtl] .marq .track{animation-name:marqR}
@keyframes marqR{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.marq .track{animation:none}}

/* tablet portrait and phones: stack the hero */
@media (max-width:899px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding-bottom:var(--mq)}
  .hero{--fs:calc(var(--cw) * .3953)}
  .giant{position:relative;top:auto;margin-top:2svh}
  .prod{position:relative;inset:auto;height:auto;width:min(100%,560px);aspect-ratio:1150/1015;margin:-8.8vw auto 0;container-type:normal}
  .prod .move{inset:0;width:auto;translate:none}
  .hero-copy{width:auto}
  .hero-copy{position:relative;inset-inline-start:auto;bottom:auto;padding:12px var(--gut) 28px;gap:20px;width:auto}
  .hero-copy .ctas{flex-direction:column}
  .hp .tag{font-size:.78rem;padding:7px 10px}
  .hp .tag b{font-size:.88rem}
}
@media (max-width:899px) and (min-width:600px){
  .hero-copy{display:grid;grid-template-columns:1.2fr 1fr;align-items:end}
  .hero-copy .ctas{flex-direction:column}
}
@media (max-width:599px){.hp{display:none}}
@media (max-width:899px){.ckbg,html[dir=rtl] .ckbg{left:50%;width:min(150vw,1000px)}} /* phones: the horizon sits behind the text and buttons, where the gloves don't cover it */
@media (max-height:700px) and (min-width:900px){.hero-copy h1{font-size:1.8rem}.hero-copy .ld{display:none}}

/* ---------- SHOP ---------- */
.shop{background:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.teaser{grid-column:1/-1}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -45px rgba(2,43,53,.45);transition:box-shadow .4s,transform .5s var(--ease);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));scroll-margin-top:calc(var(--hdr) + 20px)}
.pcard:hover{box-shadow:0 40px 70px -40px rgba(2,43,53,.55)}
.pcard.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,100%{box-shadow:0 30px 60px -45px rgba(2,43,53,.45)}30%{box-shadow:0 0 0 4px var(--royal),0 30px 60px -45px rgba(2,43,53,.45)}}
.media{position:relative;aspect-ratio:5/4;overflow:hidden;isolation:isolate}
/* blue and graphite stages kept; a soft light behind the glove and deeper edges so the glove and its word stand out */
.media.blue{background:radial-gradient(36% 8% at 52% 90%,rgba(0,6,30,.5),transparent 72%),radial-gradient(34% 38% at 40% 46%,rgba(150,182,255,.42),transparent 72%),radial-gradient(80% 75% at 50% 45%,#2A50C8 0%,#16348F 50%,#0A1A50 100%)}
.media.black{background:radial-gradient(38% 8% at 52% 90%,rgba(0,0,0,.55),transparent 72%),radial-gradient(34% 38% at 41% 46%,rgba(255,255,255,.26),transparent 72%),radial-gradient(80% 75% at 50% 45%,#646C73 0%,#3A4045 50%,#17191C 100%)}
.media.blue .wm{color:rgba(150,182,255,.30)}.media.black .wm{color:rgba(255,255,255,.17)}
.media .wm{position:absolute;inset-inline-start:-4px;bottom:-.14em;font-family:"Archivo",sans-serif;font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:900;font-size:clamp(6rem,11vw,9.5rem);line-height:.8;color:rgba(255,255,255,.1);letter-spacing:-.01em;z-index:-1;transition:transform .8s var(--ease)}
.media .ring{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.9);z-index:-1;transition:transform 1s var(--ease);opacity:.5}
.pcard:hover .media .ring{transform:translate(-50%,-50%) scale(1.02)}
.pcard:hover .media .wm{transform:translateX(12px)}
.media .glv{position:absolute;left:11%;width:58%;top:13%;transform:rotate(-8deg);transition:transform .6s var(--ease)}
.media.black .glv{left:12%;width:60%;top:13%;transform:rotate(-5deg)}
.pcard:hover .media .glv{transform:rotate(-3deg) translateY(-12px) scale(1.04)}
.sticker{position:absolute;top:16px;inset-inline-end:16px;width:96px;height:96px;display:grid;place-items:center;color:#fff}
.sticker svg{position:absolute;inset:0}
@media (hover:hover){.pcard:hover .sticker svg{animation:spin 9s linear infinite}}
.sticker b{font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;font-size:1.65rem;line-height:1;text-align:center}
.sticker b small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.12em;margin-top:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sticker svg{animation:none}}
.pbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.pname h3{font-size:1.5rem}
.pname p{font-size:.9rem;color:var(--muted);margin-top:4px}
.pprice{display:flex;align-items:baseline;gap:10px}
.pprice b{font-family:"Archivo",sans-serif;font-stretch:75%;font-variation-settings:"wdth" 75;font-weight:900;font-size:3rem;line-height:.9}
.pprice span{color:var(--muted);font-size:.95rem}
.facts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.facts li{font-size:.82rem;padding:5px 11px;border-radius:99px;background:var(--teal);color:var(--petrol);font-weight:500}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.optrow > span{font-weight:600;font-size:.92rem}
.sizes{display:flex;gap:8px;border:0;padding:0;margin:0}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sizes span{display:grid;place-items:center;min-width:52px;height:46px;border-radius:14px;border:1.5px solid var(--line);font-weight:700;background:#fff;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.sizes input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.sizes input:focus-visible + span{outline:3px solid var(--royal);outline-offset:2px}
.sizes label:hover span{border-color:var(--ink)}
.sizes.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.serr{color:var(--err);font-size:.88rem;font-weight:600;min-height:0}
.stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;height:46px}
.stepper button{width:44px;border:0;background:transparent;font-size:1.3rem;line-height:1;transition:background-color .15s}
.stepper button:hover{background:var(--teal)}
.stepper input{width:58px;border:0;border-inline:1.5px solid var(--line);text-align:center;font-weight:700;font-size:1.05rem;background:transparent;-moz-appearance:textfield}
.stepper.bad{border-color:var(--err);background:var(--err-bg)}
.pbody .btn-add{margin-top:auto}
.btn-add.done{background:var(--petrol)}
.btn-add .ok{display:none}
.btn-add.done .ok{display:inline}
.btn-add.done .go{display:none}
.teaser{background:var(--ink);color:var(--cream);border-color:transparent;position:relative}
.teaser::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.05;pointer-events:none}
.teaser .tbody{padding:30px 28px;display:flex;flex-direction:column;gap:16px;height:100%;position:relative}
.teaser .kick{color:var(--royal-lt)}
.teaser h3{font-size:clamp(1.7rem,1.2rem + 1.2vw,2.3rem)}
.teaser p{color:var(--on-dark)}
.teaser .stack{display:flex;align-items:flex-end;gap:8px;height:140px;margin:6px 0 4px}
.teaser .stack i{flex:1;max-width:56px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--royal) 0 22%,#fff 22% 100%);height:calc(var(--h) * 1%);box-shadow:inset 0 0 0 2px rgba(2,43,53,.25);transform-origin:bottom;transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 80ms)}
html.js.motion .teaser:not(.in) .stack i{transform:scaleY(.05)}
.teaser .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1060px) and (min-width:641px){.teaser .tbody{display:grid;grid-template-columns:1fr 220px;align-items:center}.teaser .stack{grid-row:1/5;grid-column:2}}

/* figures */
.figs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}
.figs > div{padding:26px 22px 6px 0;border-inline-end:1px solid var(--line)}
.figs > div:last-child{border-inline-end:0}
.figs > div + div{padding-inline-start:22px}
.figs b{display:block;font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;font-size:clamp(3.4rem,2rem + 4vw,6rem);line-height:.9;color:var(--royal)}
.figs span{display:block;color:var(--muted);margin-top:8px;font-size:.98rem;max-width:22ch}
@media (max-width:760px){.figs{grid-template-columns:1fr 1fr}.figs > div:nth-child(2){border-inline-end:0}.figs > div:nth-child(3){padding-inline-start:0}.figs > div:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- CLOSE-UP ---------- */
.close .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;position:relative}
@media (max-width:900px){.close .grid{grid-template-columns:1fr;display:flex;flex-direction:column;align-items:stretch;gap:0}.viewer{width:100%}.close .grid > div{display:contents}.cpick{order:1;margin-top:0}.viewer{order:2}.vtabs{order:3}.specs{order:4}.cnote{order:5}.close .cta{order:6}.gcard{order:7;margin-top:28px}}
.viewer{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.2;background:var(--petrol)}
.viewer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 6s ease-out}
.viewer img.on{opacity:1;transform:scale(1)}
.viewer .gen{position:absolute;inset-inline-start:14px;bottom:14px;font-size:.75rem;background:rgba(1,26,33,.7);color:var(--on-dark);padding:5px 10px;border-radius:99px}
.vtabs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.vtabs button{border:1px solid var(--line-dk);background:transparent;color:var(--on-dark);border-radius:99px;padding:9px 18px;font-weight:600;font-size:.92rem;transition:background-color .2s,color .2s}
.vtabs button[aria-pressed=true]{background:var(--cream);color:var(--ink)}
.cpick{display:flex;gap:10px;margin:22px 0 6px}
.cpick button{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line-dk);background:rgba(253,249,239,.04);color:var(--cream);border-radius:99px;padding:8px 18px 8px 10px;font-weight:600}
.cpick button i{width:24px;height:24px;border-radius:50%;border:2px solid rgba(253,249,239,.5)}
.cpick button[aria-pressed=true]{border-color:var(--cream);background:rgba(253,249,239,.1)}
.specs{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line-dk)}
.specs dt,.specs dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line-dk)}
.specs dt{color:var(--on-dark-2);padding-inline-end:28px}
.specs dd{font-weight:600}
.specs .sz{display:inline-flex;gap:6px}
.specs .sz span{border:1px solid var(--line-dk);border-radius:8px;padding:1px 9px;font-size:.9rem}
.cnote{margin-top:16px;font-size:.92rem;color:var(--on-dark)}
.close .cta{margin-top:22px}
.gcard{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px;margin-top:18px;background:var(--cream);color:var(--ink);border-radius:var(--r);padding:12px 18px 12px 12px}
.gcard .gm{background:var(--teal);border-radius:16px;touch-action:none}
.gcard .gm svg{width:100%;height:auto;display:block}
.gcard h3{font-size:1.15rem}
html[lang=ar] .gcard h3{font-size:1.1rem}
.gcard p{color:var(--muted);font-size:.92rem;margin-top:4px;min-height:1.6em}
.gcard p.hint{animation:hint .6s var(--ease)}
@keyframes hint{40%{transform:translateY(-3px);color:var(--royal)}}

/* ---------- CALCULATOR ---------- */
.calc{background:var(--sand)}
.trades{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
@media (max-width:640px){.trades{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:4px}.trades::-webkit-scrollbar{display:none}}
.trades button{display:inline-flex;align-items:center;gap:9px;flex:none;border:1.5px solid var(--line);background:var(--paper);border-radius:99px;padding:9px 16px 9px 10px;font-weight:600;font-size:.95rem;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.trades button svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--teal);color:var(--petrol);flex:none}
.trades.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.trades button.ph{flex-direction:column;align-items:stretch;padding:0;border-radius:18px;overflow:hidden;gap:0}
.trades button.ph .tp{width:100%;aspect-ratio:4/3;object-fit:cover}
.trades button.ph svg{display:none}
.trades button.ph span{padding:10px 12px;text-align:start}
.trades button.ph[aria-pressed=true]{box-shadow:0 0 0 3px var(--royal)}
.trades.photos button:not(.ph){flex-direction:column;justify-content:center;border-radius:18px;padding:16px 12px;gap:10px;text-align:center}
.trades.photos button:not(.ph) svg{width:44px;height:44px;padding:9px}
@media (max-width:640px){.trades.photos{display:flex}.trades button.ph{width:150px}}
.trades button:hover{border-color:var(--ink)}
.trades button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.trades button[aria-pressed=true] svg{background:var(--royal);color:#fff}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:880px){.cgrid{grid-template-columns:1fr}}
.sliders{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:26px}
.sl label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:600}
.sl output{min-width:44px;height:34px;padding:0 10px;border-radius:10px;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-weight:700}
.sl small{display:block;color:var(--muted);font-size:.86rem;margin-top:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:10px 0 0;--p:30%}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--royal) var(--p),rgba(2,43,53,.14) var(--p))}
html[dir=rtl] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(-90deg,var(--royal) var(--p),rgba(2,43,53,.14) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid var(--royal);box-shadow:0 4px 10px rgba(2,43,53,.25);transition:transform .15s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:rgba(2,43,53,.14)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--royal)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--royal)}
.result{background:var(--royal);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.result::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);z-index:-1}
.result .big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.result .big b{font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;font-size:clamp(5rem,3rem + 6vw,8rem);line-height:.82}
.result .big span{font-size:1.2rem;font-weight:600}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;margin:0}
.result dt{opacity:.75}.result dd{margin:0;font-weight:600}
.result .cost{border-top:1px solid rgba(255,255,255,.25);padding-top:14px}
.result .cost b{font-size:1.3rem;display:block}
.result .cost span{display:block;opacity:.8;font-size:.93rem}
.bxs{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.bxs i{width:22px;height:18px;border-radius:4px;background:linear-gradient(180deg,#fff 0 30%,rgba(255,255,255,.75) 30%);box-shadow:inset 0 -3px 0 rgba(2,43,53,.18);animation:pop .4s var(--ease) both;animation-delay:calc(var(--i) * 18ms)}
.bxs .more{font-weight:700;align-self:center;margin-inline-start:4px}
@keyframes pop{from{transform:scale(0) translateY(8px);opacity:0}}
.result .btn{margin-top:4px}
.fine{color:var(--muted);font-size:.86rem;margin-top:16px}

/* ---------- STEPS ---------- */
.steps .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;counter-reset:s}
.steps .row::before{content:"";position:absolute;top:58px;inset-inline:8%;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.25;transform:scaleX(var(--k,0));transform-origin:left;transition:transform 1.4s var(--ease)}
html[dir=rtl] .steps .row::before{transform-origin:right}
.steps .row.in::before{--k:1}
html:not(.motion) .steps .row::before{--k:1}
@media (max-width:820px){.steps .row{grid-template-columns:1fr}.steps .row::before{display:none}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.step:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(2,43,53,.5)}
.step .n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--cream);font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;font-size:2rem;margin-bottom:18px;position:relative}
.step h3{font-size:1.4rem}
.step p{color:var(--muted);margin-top:8px}
.step .mini{margin-top:18px;background:var(--chat);border-radius:14px;padding:12px;min-height:72px}
.mini .bub{background:var(--bubble);border-radius:12px 12px 4px 12px;padding:8px 12px;font-size:.88rem;max-width:90%;margin-inline-start:auto;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mini .chips{display:flex;gap:6px;flex-wrap:wrap}
.mini .chips span{background:#fff;border-radius:99px;padding:4px 10px;font-size:.82rem;font-weight:600;border:1px solid var(--line)}
.mini .rep{background:#fff;border-radius:12px 12px 12px 4px;padding:8px 12px;font-size:.88rem;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mini .rep svg{width:16px;height:16px;color:#34B7F1;vertical-align:-3px;margin-inline-start:4px}

/* ---------- FAQ ---------- */
.faq{background:var(--teal)}
.faq .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}}
.faq .side p{color:var(--petrol);margin:16px 0 22px;max-width:34ch}
.acc{border-top:1px solid rgba(2,43,53,.2)}
.acc .q{border-bottom:1px solid rgba(2,43,53,.2)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:20px 0;text-align:start;font-weight:600;font-size:1.08rem}
.acc button i{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(2,43,53,.3);position:relative;transition:transform .35s var(--ease),background-color .2s}
.acc button i::before,.acc button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.acc button i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.acc button[aria-expanded=true] i{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.acc button[aria-expanded=true] i::after{transform:translate(-50%,-50%) rotate(0)}
.acc .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc .a > div{overflow:hidden}
.acc .a p{color:var(--petrol);padding-bottom:6px}
.acc .a p:last-child{padding-bottom:22px}
.acc .open .a{grid-template-rows:1fr}

/* ---------- CTA BAND ---------- */
.band{background:var(--royal);color:#fff;overflow:hidden;position:relative;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.06;z-index:-1}
.band .bin{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);align-items:center;gap:24px;min-height:340px}
.band h2{font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;text-transform:uppercase;font-size:clamp(3rem,1.5rem + 5.4vw,6.4rem);line-height:.88;letter-spacing:-.01em}
html[lang=ar] .band h2{font-family:var(--font);text-transform:none;font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);line-height:1.25}
.band p{margin-top:16px;opacity:.85}
.band .btn{margin-top:26px}
.band .art{position:relative;height:100%;min-height:300px}
.band .art img{position:absolute;width:150%;max-width:none;inset-inline-start:-10%;top:50%;transform:translateY(-50%) rotate(-14deg)}
html.js.motion .band .art img{transition:transform 1.2s var(--ease)}
html.js.motion .band .art:not(.in) img{transform:translateY(-30%) rotate(-30deg)}
@media (max-width:760px){.band .bin{grid-template-columns:1fr}.band .art{display:none}}

/* ---------- PAGE HERO (about, contact) ---------- */
.phero{position:relative;background:radial-gradient(50% 60% at 78% 55%,rgba(36,83,217,.38),transparent 70%),linear-gradient(180deg,var(--ink),var(--ink-0));color:var(--cream);overflow:hidden;isolation:isolate;padding:calc(var(--bar) + var(--hdr) + clamp(24px,5vw,64px)) 0 clamp(56px,7vw,96px)}
.phero::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.06;z-index:-1}
.phero .pword{font-family:"Archivo",sans-serif;font-stretch:64%;font-variation-settings:"wdth" 64;font-weight:900;text-transform:uppercase;font-size:clamp(5.2rem,2rem + 15vw,15rem);line-height:.8;letter-spacing:-.01em;white-space:nowrap}
.phero .pword span{background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 50%,rgba(253,249,239,.35) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero .pword span{display:inline-block}
html.js.motion .phero .pword span{animation:wordUp .6s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes wordUp{from{transform:translateY(.3em);opacity:0}}
html[lang=ar] .phero .pword{font-family:var(--font);font-weight:700;text-transform:none;font-size:clamp(3.6rem,1.6rem + 9vw,9rem);line-height:1.2}
html[lang=ar] .phero .pword span{background:none;color:var(--cream)}
.phero .pgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(18px,3vw,36px)}
@media (max-width:860px){.phero .pgrid{grid-template-columns:1fr}}
.phero h1{font-size:clamp(1.9rem,1.1rem + 2.4vw,3.3rem)}
.phero .ld{color:var(--on-dark);margin-top:16px;max-width:46ch;font-size:1.1rem}
.phero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
html.js.motion .phero .pgrid > *{animation:up .6s var(--ease) both;animation-delay:calc(.1s + var(--i,0) * 100ms)}
.phero .vis{position:relative;background:radial-gradient(40% 7% at 56% 93%,rgba(0,0,0,.45),transparent 72%)}
.phero .vis img{width:100%;max-width:560px;margin-inline-start:auto}
.phero .mark{position:absolute;inset-inline-end:-4%;bottom:-6%;width:min(58vw,640px);opacity:.06;z-index:-1;pointer-events:none}

/* about */
.stmt{background:var(--cream)}
.stmt p{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,1rem + 2.6vw,3.2rem);line-height:1.18;letter-spacing:-.015em;max-width:24ch;max-width:min(100%,1050px)}
html[lang=ar] .stmt p{font-family:var(--font);letter-spacing:0;line-height:1.6;font-size:clamp(1.5rem,1rem + 1.8vw,2.5rem)}
.stmt p .w{color:rgba(2,43,53,.16);transition:color .55s cubic-bezier(.3,.6,.3,1);transition-delay:calc(var(--wi,0) * var(--wstep,45ms))}
.stmt p.lit .w{color:var(--ink)}
.stmt p.lit .w.hl{color:var(--royal)}
html:not(.motion) .stmt p .w{color:var(--ink)}
/* About: the story route (factory → Cinko → your work); the line draws once */
.story{background:var(--paper)}
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.route::before{content:"";position:absolute;top:44px;inset-inline:12%;height:2px;background:repeating-linear-gradient(90deg,var(--royal) 0 10px,transparent 10px 18px);opacity:.55;transform:scaleX(var(--k,0));transform-origin:left;transition:transform 1.6s var(--ease)}
html[dir=rtl] .route::before{transform-origin:right}
.route.in::before,html:not(.motion) .route::before{--k:1}
.stop{position:relative;z-index:1;margin-top:44px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 26px 28px;transition:transform .4s var(--ease),box-shadow .4s}
.stop:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(2,43,53,.5)}
.stop .ic{width:88px;height:88px;margin:-44px 0 16px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--cream);border:6px solid var(--paper)}
.stop:nth-child(2) .ic{background:var(--royal)}
.stop .ic svg{width:40px;height:40px}
.stop .tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--royal-dk);background:var(--royal-soft);padding:4px 12px;border-radius:99px}
html[lang=ar] .stop .tag{letter-spacing:0}
.stop h3{font-size:1.4rem;margin-top:12px}
.stop p{color:var(--muted);margin-top:8px}
@media (max-width:820px){
  .route{grid-template-columns:1fr;gap:18px}
  .route::before{top:0;bottom:0;inset-inline:69px auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--royal) 0 10px,transparent 10px 18px);transform:scaleY(var(--k,0));transform-origin:top}
}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pill{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s}
.pill:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(2,43,53,.5)}
.pill .pv{height:220px;display:grid;place-items:center;position:relative;overflow:hidden}
.pill .pv.p1{background:var(--ink);color:var(--cream)}
.pill .pv.p2{background:radial-gradient(34% 7% at 50% 86%,rgba(2,43,53,.28),transparent 72%),linear-gradient(160deg,#BFE2DA,#E8F3F0)}
.pill .pv.p3{background:var(--chat)}
.pill .pv .prices{display:flex;gap:18px;align-items:flex-end}
.pill .pv .prices div{text-align:center}
.pill .pv .prices b{display:block;font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;font-size:4.6rem;line-height:.85}
.pill .pv .prices small{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85rem;color:var(--on-dark);margin-top:8px}
.pill .pv .prices small i{width:10px;height:10px;border-radius:50%}
.pill .pv img{width:86%;transition:transform .7s var(--ease)}
.pill .pv img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.pill .pv .duo{position:relative;width:86%;height:86%}
.pill .pv .duo img{position:absolute;width:64%}
.pill .pv .duo .a{left:0;top:6%;transform:rotate(-12deg)}
.pill .pv .duo .b{right:0;bottom:0;transform:rotate(9deg)}
.pill:hover .pv img{transform:rotate(-3deg) scale(1.04)}
.pill .pv .chat{width:86%;display:flex;flex-direction:column;gap:8px}
.pill .pv .chat .me,.pill .pv .chat .us{padding:9px 12px;border-radius:12px;font-size:.9rem;max-width:88%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.pill .pv .chat .me{background:var(--bubble);align-self:flex-end;border-end-end-radius:4px}
.pill .pv .chat .us{background:#fff;align-self:flex-start;border-end-start-radius:4px}
html.js.motion .pill:not(.in) .chat > *{opacity:0;transform:translateY(10px)}
.pill .chat > *{transition:opacity .5s,transform .5s var(--ease)}
.pill .chat > :nth-child(2){transition-delay:.6s}
.pill .pb{padding:24px}
.pill .pb .n{font-family:"Archivo",sans-serif;font-stretch:70%;font-variation-settings:"wdth" 70;font-weight:900;color:var(--royal);font-size:1rem;letter-spacing:.1em}
.pill h3{font-size:1.4rem;margin-top:6px}
.pill p{color:var(--muted);margin-top:8px}
.gsec{overflow:hidden}
.gsec .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.gsec .grid{grid-template-columns:1fr}}
.gpair{position:relative;aspect-ratio:1.15;max-width:560px;background:radial-gradient(42% 7% at 54% 95%,rgba(0,0,0,.42),transparent 72%)}
.gpair img{position:absolute;transition:transform 1.2s var(--ease)}
.gpair .a{width:60%;left:2%;top:2%;transform:rotate(-10deg)}
.gpair .b{width:60%;right:0;bottom:2%;transform:rotate(8deg)}
html.js.motion .gpair:not(.in) .a{transform:translate(-30px,30px) rotate(-30deg)}
html.js.motion .gpair:not(.in) .b{transform:translate(30px,40px) rotate(24deg)}
.gsec .facts li{background:rgba(253,249,239,.08);color:var(--cream);border:1px solid var(--line-dk)}
.gsec .facts{margin:20px 0 26px}

/* contact */
.ccards{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
@media (max-width:960px){.ccards{grid-template-columns:1fr 1fr}.ccards .wa{grid-column:1/-1}}
@media (max-width:560px){.ccards{grid-template-columns:1fr}}
.ccard{border-radius:var(--r-lg);padding:26px;background:var(--paper);color:var(--ink);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-decoration:none;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(2,43,53,.5)}
.ccard .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--teal);color:var(--petrol)}
.ccard .ic svg{width:26px;height:26px}
.ccard h3{font-size:1.35rem;margin-top:6px}
.ccard p{color:var(--muted)}
.ccard .go{margin-top:auto;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.ccard .go svg{width:20px;height:20px}
.ccard.wa{background:var(--wa);color:#fff;border-color:transparent}
.ccard.wa .ic{background:rgba(255,255,255,.14);color:#fff}
.ccard.wa p{color:rgba(255,255,255,.82)}
.ccard.wa .num{font-family:"Archivo",sans-serif;font-stretch:80%;font-variation-settings:"wdth" 80;font-weight:800;font-size:1.6rem}
.ccard[aria-disabled=true]{opacity:.7}
.builder .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.builder .grid{grid-template-columns:1fr}}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:22px}
.form fieldset{border:0;padding:0;margin:0}
.form legend,.fl{font-weight:600;margin-bottom:10px;display:block}
.form legend small,.fl small{color:var(--muted);font-weight:400;margin-inline-start:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font-weight:500;font-size:.95rem;transition:background-color .2s,border-color .2s,color .2s}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip input:focus-visible + span{outline:3px solid var(--royal);outline-offset:2px}
.chip:hover span{border-color:var(--ink)}
.chip .sw{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(2,43,53,.3)}
.inp{width:100%;min-height:50px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:12px 14px;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 4px rgba(36,83,217,.15)}
textarea.inp{min-height:110px;resize:vertical}
.inp[aria-invalid=true]{border-color:var(--err);background:var(--err-bg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.ferr{color:var(--err);font-size:.88rem;font-weight:600;margin-top:6px;display:block}
.help{color:var(--muted);font-size:.86rem;margin-top:6px;display:block}
.phone{background:var(--ink-0);border-radius:38px;padding:12px;box-shadow:0 40px 70px -40px rgba(2,43,53,.7)}
.phone .scr{background:var(--chat);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.wa-head{background:var(--wa);color:#fff;display:flex;align-items:center;gap:12px;padding:14px 16px}
.wa-head .av{width:38px;height:38px;border-radius:50%;background:var(--cream);display:grid;place-items:center;overflow:hidden;flex:none}
.wa-head .av img{width:30px}
.wa-head b{display:block;font-size:1rem}.wa-head small{opacity:.8;font-size:.78rem}
.wa-body{flex:1;padding:16px;background-image:radial-gradient(rgba(2,43,53,.06) 1px,transparent 1px);background-size:14px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.bubble{background:var(--bubble);border-radius:14px 14px 4px 14px;padding:10px 12px 18px;font-size:.92rem;white-space:pre-wrap;word-break:break-word;max-width:92%;margin-inline-start:auto;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.1);line-height:1.5}
.bubble .meta{position:absolute;inset-inline-end:10px;bottom:3px;font-size:.68rem;opacity:.55}
.bubble.empty{background:rgba(255,255,255,.7);color:var(--muted);margin:auto;text-align:center;padding:12px 14px}
.bubble.pop{animation:pop .35s var(--ease)}
.typing{display:flex;gap:4px;background:#fff;border-radius:14px;padding:12px 14px;align-self:flex-start}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa;animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.5}}
.phone .send{padding:12px}
.after{font-size:.86rem;color:var(--muted);margin-top:12px;text-align:center}
.qa{margin-top:clamp(48px,6vw,80px)}

/* ---------- CART DRAWER ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(1,26,33,.55);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.on{opacity:1;visibility:visible}
.dwrap{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}
.drawer{position:absolute;top:0;bottom:0;inset-inline-end:0;pointer-events:auto;width:min(460px,100vw);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .5s var(--ease);box-shadow:-30px 0 60px -30px rgba(1,26,33,.5);visibility:hidden}
html[dir=rtl] .drawer{transform:translateX(-105%)}
.drawer.on{transform:none!important;visibility:visible}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);padding-top:max(18px,env(safe-area-inset-top))}
.dhead h2{font-size:1.5rem}
html[lang=ar] .dhead h2{font-size:1.35rem}
.dhead .cnt{font-size:.9rem;color:var(--muted);margin-inline-start:10px;font-family:var(--font);font-weight:500;letter-spacing:0}
.dhead .x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.dhead .x svg{width:20px;height:20px}
.dbody{flex:1;overflow:auto;padding:16px 20px 24px;overscroll-behavior:contain}
.dempty{text-align:center;padding:40px 10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.dempty img{width:180px;opacity:.9;transform:rotate(-10deg)}
.dempty h3{font-size:1.4rem}
.dempty p{color:var(--muted)}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.line{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff;animation:pop .4s var(--ease)}
.line.bad{border-color:var(--err);background:var(--err-bg)}
.line .th{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;overflow:hidden}
.line .th.blue{background:radial-gradient(circle at 50% 40%,#3F78F5,#1B43B9)}
.line .th.black{background:radial-gradient(circle at 50% 40%,#4A5157,#15181b)}
.line .th img{width:88%;transform:rotate(-10deg)}
.line .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.line .lname{font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:0;line-height:1.3}
.line .rm{border:0;background:none;color:var(--muted);font-size:.85rem;text-decoration:underline;padding:2px}
.line .lsz{display:flex;gap:6px;margin:8px 0}
.line .lsz label{position:relative}
.line .lsz input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.line .lsz span{display:grid;place-items:center;min-width:40px;height:34px;border-radius:10px;border:1.5px solid var(--line);font-weight:700;font-size:.9rem;background:#fff}
.line .lsz input:checked + span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.line .lsz input:focus-visible + span{outline:3px solid var(--royal);outline-offset:2px}
.line .bot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.line .stepper{height:38px;border-radius:10px}
.line .stepper button{width:36px}
.line .stepper input{width:46px}
.line .lt{font-weight:700}
.line .le{color:var(--err);font-size:.82rem;font-weight:600;display:block}
.line .dup{color:var(--petrol);font-size:.82rem;display:block;margin-top:4px}
.addln{margin-top:12px;width:100%;border:1.5px dashed rgba(2,43,53,.3);background:transparent;border-radius:16px;padding:12px;font-weight:600;color:var(--petrol)}
.addln:hover{border-color:var(--ink);color:var(--ink)}
.dsec{margin-top:22px}
.dsec h3{font-family:var(--font);font-size:1rem;letter-spacing:0;font-weight:700;margin-bottom:10px}
.dsec .f{margin-bottom:12px}
.dsec .f label{font-weight:600;font-size:.92rem;display:block;margin-bottom:6px}
.dsec .inp{min-height:46px}
.dsec textarea.inp{min-height:70px}
/* delivery: no price on the site, confirmed on WhatsApp with the order */
.sum dd.q{color:var(--wa)}
.sum dd.g small{font-size:.62em;font-weight:600;color:var(--muted)}
.prev{margin-top:18px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.prev summary{padding:12px 14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.prev summary::-webkit-details-marker{display:none}
.prev summary::after{content:"+";font-size:1.3rem;line-height:1}
.prev[open] summary::after{content:"−"}
.prev .wa-body{min-height:160px;background-color:var(--chat)}
.errsum{background:var(--err-bg);color:var(--err);border-radius:12px;padding:10px 12px;font-weight:600;font-size:.9rem;margin-bottom:12px}
.dfoot{border-top:1px solid var(--line);padding:14px 20px max(16px,env(safe-area-inset-bottom));background:var(--paper)}
.sum{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:0 0 12px;font-size:.95rem}
.sum dt{color:var(--muted)}.sum dd{margin:0;text-align:end;font-weight:600}
.sum .g{font-size:1.15rem;font-weight:800;color:var(--ink);padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
.sum .note{grid-column:1/-1;color:var(--muted);font-size:.8rem;text-align:start;font-weight:400}
.sent{background:var(--teal);border-radius:12px;padding:10px 12px;font-size:.9rem;margin-bottom:10px}
.sent b{display:block}
.dfoot .after{margin-top:8px}

/* fly-to-cart clone */
.flyer{position:fixed;z-index:120;pointer-events:none;width:120px}

/* toast */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:130;transform:translate(-50%,-160%);visibility:hidden;background:var(--ink-0);color:var(--cream);padding:12px 18px;border-radius:14px;font-weight:600;font-size:.95rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transition:transform .45s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);visibility:visible}

/* ---------- FOOTER ---------- */
.site-foot{background:var(--ink-0);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(56px,7vw,96px)}
.site-foot::before{content:"";position:absolute;inset:0;background:url("../img/grain.webp");opacity:.05;z-index:-1}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.7fr));gap:32px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .fb{grid-column:1/-1}}
.fb img{height:64px;width:auto}
.fb p{margin-top:16px;max-width:38ch}
.soc{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.soc > a,.soc > span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-dk);border-radius:99px;padding:8px 14px;text-decoration:none;color:var(--cream);font-weight:500;font-size:.92rem;transition:background-color .2s}
.soc > a:hover{background:rgba(253,249,239,.1)}
.soc > span{opacity:.6}
.soc svg{width:18px;height:18px}
.fcol .fh{font-family:var(--font);color:var(--cream);font-size:.95rem;font-weight:700;letter-spacing:0;line-height:1.3;margin:0 0 12px}
.fcol a{display:block;padding:5px 0;text-decoration:none;transition:color .2s}
.fcol a:hover{color:var(--cream)}
.fcol dl{margin:0}.fcol dt{font-size:.8rem;opacity:.7;margin-top:8px}.fcol dd{margin:0}
.fword{direction:ltr;font-family:"Archivo",sans-serif;font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:900;font-size:clamp(7rem,30vw,26rem);line-height:.74;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(253,249,239,.16);text-align:center;margin-top:clamp(32px,5vw,64px);user-select:none;white-space:nowrap;transform:translateY(12%)}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-dk);padding-top:18px;padding-bottom:max(22px,env(safe-area-inset-bottom));font-size:.88rem;position:relative;background:var(--ink-0)}
.fbot .links{display:flex;gap:16px;flex-wrap:wrap}
.fbot a{text-decoration:none}.fbot a:hover{color:var(--cream)}
.fbot .r{display:flex;gap:8px}

/* consent bar: only appears once a Meta Pixel or GA4 id is set in config.js */
.consent{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:140;background:var(--ink-0);color:var(--cream);border:1px solid var(--line-dk);border-radius:18px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);max-width:760px;margin:0 auto}
.consent p{font-size:.92rem;color:var(--on-dark);flex:1 1 280px}
.consent div{display:flex;gap:8px}
.pay{font-size:.85rem;color:var(--muted);margin:-4px 0 10px}

/* launch checklist (?check=1) */
.check{position:fixed;inset-inline-start:12px;bottom:12px;z-index:200;max-width:min(560px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:14px 16px;font-size:.85rem;line-height:1.5;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.check .ok{color:#137333}.check .no{color:var(--err)}
.check button{float:right;border:0;background:none;font-size:1.3rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.phero .ccards{margin-top:clamp(32px,4vw,52px)}
.phero .pgrid.one{grid-template-columns:1fr}