/* ==========================================================================
   Tamliha — investor scrollytelling
   One visual system: ivory canvas, charcoal "dark rooms", orange as light.
   ========================================================================== */

/* ---------- fonts (OFL, self-hosted) ---------- */
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-arabic-800-normal.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";src:url(../fonts/alexandria-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Arabic";src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --orange:#EE6724; --orange-deep:#B9470F; --orange-ink:#A9420E; --orange-soft:#F7B48F;
  --ink:#231F20; --ink-2:#4A4446; --ink-3:#6E6668;
  --white:#FFFFFF; --ivory:#F6F1EA; --ivory-2:#EFE7DC; --sand:#E7D6BE; --cocoa:#4A2C1E;
  --night:#141012; --night-2:#1D181A; --night-3:#2A2426;
  --line:rgba(35,31,32,.12); --line-strong:rgba(35,31,32,.22);
  --f-display:"Alexandria","Plex Arabic",system-ui,sans-serif;
  --f-body:"Plex Arabic","Alexandria",system-ui,sans-serif;
  --lh-body:1.9; --lh-display:1.28; --track-display:0;
  --gutter:clamp(16px,4.2vw,72px);
  --maxw:min(92vw,84rem);
  --radius:22px; --radius-s:14px;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 24px 60px -32px rgba(35,31,32,.35);
  --ease:cubic-bezier(.22,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --dish-max:850px; /* set from JS: native pixels / devicePixelRatio */
  font-size:clamp(15px,.42vw + 10.4px,28px);
}
html[lang="en"]{--lh-body:1.65; --lh-display:1.08; --track-display:-.015em}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;background:var(--ivory)}
body{margin:0;min-height:100vh;color:var(--ink);background:transparent;font-family:var(--f-body);font-size:1rem;line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4,h5,p,ol,ul,figure,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
bdi,.num{unicode-bidi:isolate}
.num{direction:ltr;display:inline-block;font-family:var(--f-display);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
::selection{background:var(--orange);color:#fff}
.skip-link{position:fixed;inset-inline-start:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- world layers ---------- */
#world{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none}
.atmos{position:fixed;inset:0;z-index:1;pointer-events:none}
/* reading veil: softens the 3D world behind the text column, keeps depth at the edges */
.atmos__veil{position:absolute;inset:0;transition:opacity .9s var(--ease);--v:246,241,234;background:linear-gradient(to left,rgba(var(--v),.66) 0%,rgba(var(--v),.52) 46%,rgba(var(--v),.14) 82%,rgba(var(--v),0) 100%)}
html[dir="ltr"] .atmos__veil{background:linear-gradient(to right,rgba(var(--v),.66) 0%,rgba(var(--v),.52) 46%,rgba(var(--v),.14) 82%,rgba(var(--v),0) 100%)}
.atmos__veil--dark{--v:20,16,18;opacity:0}
body[data-mood="dark"] .atmos__veil--light{opacity:0}
body[data-mood="dark"] .atmos__veil--dark{opacity:1}
@media (max-width:900px){.atmos__veil,html[dir="ltr"] .atmos__veil{background:rgba(var(--v),.5)}}
.atmos__glow{position:absolute;width:60vmax;height:60vmax;left:calc(var(--px,50) * 1%);top:calc(var(--py,40) * 1%);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(238,103,36,.10),rgba(238,103,36,0));transition:opacity .8s}
.atmos__grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");mix-blend-mode:multiply}
body[data-mood="dark"] .atmos__grain{mix-blend-mode:screen;opacity:.04}
main,.footer,.topbar{position:relative;z-index:2}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset-inline:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter) 10px;pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar__brand{display:block;width:clamp(78px,7vw,128px);opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);border-radius:10px;background:rgba(255,255,255,.86);padding:6px 10px;box-shadow:0 8px 30px -18px rgba(35,31,32,.5)}
body.is-scrolled .topbar__brand{opacity:1;transform:none}
.topbar__actions{display:flex;gap:8px;align-items:center}
.topbar__progress{position:fixed;inset-inline:0;top:0;height:3px;background:transparent;pointer-events:none}
.topbar__progress span{position:absolute;inset-block:0;inset-inline-start:0;width:100%;transform-origin:var(--origin,right);transform:scaleX(var(--progress,0));background:linear-gradient(90deg,var(--orange-deep),var(--orange))}
html[dir="ltr"] .topbar__progress span{--origin:left}

.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.82);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);font-size:.82rem;font-weight:500;line-height:1.2;color:var(--ink);transition:background .25s,border-color .25s,transform .2s var(--ease),color .25s}
.pill:hover{border-color:var(--orange)}
.pill:active{transform:scale(.97)}
body[data-mood="dark"] .topbar .pill{background:rgba(29,24,26,.72);color:var(--ivory);border-color:rgba(246,241,234,.18)}
.pill--lang .lang-opt{opacity:.5;transition:opacity .2s}
html[lang="ar"] .pill--lang .lang-opt[data-lang="ar"],html[lang="en"] .pill--lang .lang-opt[data-lang="en"]{opacity:1;font-weight:600;color:var(--orange-ink)}
body[data-mood="dark"] html[lang] .pill--lang .lang-opt{color:inherit}
.lang-opt[lang="ar"]{font-family:var(--f-body)}
.lang-sep{opacity:.3}
.pill__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.pill__eq i{width:3px;height:4px;border-radius:2px;background:currentColor;opacity:.55}
.pill[aria-pressed="true"] .pill__eq i{background:var(--orange);opacity:1;animation:eq 1s var(--ease-in-out) infinite alternate}
.pill[aria-pressed="true"] .pill__eq i:nth-child(2){animation-delay:-.4s}
.pill[aria-pressed="true"] .pill__eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{from{height:3px}to{height:14px}}

/* ---------- typography ---------- */
.display-1,.display-2,.display-3,.display-4,.display-5,.why__q{font-family:var(--f-display);font-weight:800;line-height:var(--lh-display);letter-spacing:var(--track-display);text-wrap:balance}
.display-1{font-size:clamp(2.3rem,5.8vw,5.6rem)}
.display-2{font-size:clamp(1.95rem,4.2vw,4.1rem)}
.display-3{font-size:clamp(1.65rem,3.1vw,3.05rem)}
.display-4{font-size:clamp(1.25rem,1.9vw,1.85rem);font-weight:700}
.display-5{font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:700;color:var(--orange-ink);margin-block:1.4rem .6rem}
.lead{font-size:clamp(1.05rem,1.35vw,1.32rem);color:var(--ink-2);max-width:62ch;margin-top:1.2rem}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;font-weight:600;color:var(--orange-ink);letter-spacing:.02em;margin-bottom:1rem}
html[lang="en"] .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.narrow{max-width:22ch}
h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.08rem,1.25vw,1.32rem);line-height:1.45}
h4{font-family:var(--f-display);font-weight:700;font-size:1.04rem;line-height:1.5}
p{max-width:68ch}
.note{font-size:.84rem;line-height:1.75;color:var(--ink-3);margin-top:1.4rem;max-width:80ch;padding-inline-start:14px;border-inline-start:2px solid var(--line-strong)}
.note--inline{margin-top:.8rem}
.note--strong{color:var(--ink-2);border-color:var(--orange)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:999px;line-height:1.3;white-space:nowrap;border:1px solid}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--hist{color:#1F6B4E;border-color:rgba(31,107,78,.35);background:rgba(31,107,78,.07)}
.chip--plan{color:#7A4A12;border-color:rgba(122,74,18,.35);background:rgba(231,214,190,.45)}
.chip--claim{color:var(--ink-2);border-color:var(--line-strong);background:rgba(255,255,255,.6)}
.chip--scen{color:var(--orange-ink);border-color:rgba(238,103,36,.45);background:rgba(238,103,36,.08)}
.scene--dark .chip--hist{color:#7FD8B1;border-color:rgba(127,216,177,.35);background:rgba(127,216,177,.08)}
.head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.head-row .eyebrow{margin-bottom:0}
.head-row+h2,.head-row+.display-2{margin-top:1rem}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r))}
.scene{position:relative;padding-block:clamp(88px,14vh,180px)}
.scene--dark{color:var(--ivory)}
.scene--dark::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,18,0) 0,rgba(20,16,18,.82) 14%,rgba(20,16,18,.82) 86%,rgba(20,16,18,0) 100%)}
.scene--dark .lead,.scene--dark p{color:rgba(246,241,234,.8)}
.scene--dark .note{color:rgba(246,241,234,.62);border-color:rgba(246,241,234,.22)}
.scene--dark .note--strong{border-color:var(--orange);color:rgba(246,241,234,.82)}
.scene--dark .eyebrow{color:var(--orange-soft)}
.grid-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,110px);align-items:center}
.grid-split--top{align-items:start}

/* ---------- reveal system (JS adds .in) ---------- */
.js .reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.js .reveal.in{opacity:1;transform:none}
.js .split .w{display:inline-block;opacity:0;transform:translate3d(0,.55em,0) rotate(.001deg);filter:blur(6px);transition:opacity .8s var(--ease),transform 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 55ms + var(--d,0) * 1ms)}
.js .split.in .w{opacity:1;transform:none;filter:none}

/* ---------- HERO ---------- */
.scene--hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(110px,14vh,170px) 90px}
.hero{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,90px);align-items:center}
.hero__logo{width:clamp(170px,22vw,16rem);margin-bottom:clamp(18px,3vh,34px)}
.hero__logo img{width:100%}
.hero__title{max-width:18ch}
.dish-stage{position:relative;justify-self:center;width:min(100%,var(--dish-max));aspect-ratio:1;display:grid;place-items:center;perspective:1200px}
.dish-stage img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .6s var(--ease);will-change:transform}
.dish-stage__halo{position:absolute;inset:-8%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(238,103,36,.32),rgba(238,103,36,.08) 55%,rgba(238,103,36,0) 72%);animation:breathe 7s var(--ease-in-out) infinite alternate}
.dish-stage__shadow{position:absolute;z-index:1;bottom:-2%;width:70%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(35,31,32,.38),rgba(35,31,32,0));filter:blur(6px)}
@keyframes breathe{from{transform:scale(.94);opacity:.85}to{transform:scale(1.04);opacity:1}}
.scroll-cue{position:absolute;bottom:calc(26px + var(--safe-b));inset-inline-start:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-3);text-decoration:none}
html[dir="rtl"] .scroll-cue{transform:translateX(50%)}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--orange),transparent);animation:cue 2.2s var(--ease-in-out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- cards & lists ---------- */
.stack-list{margin-top:2.2rem;display:grid;gap:1.6rem;counter-reset:s}
.stack-list li{position:relative;padding-inline-start:3.2rem;counter-increment:s}
.stack-list li::before{content:counter(s,decimal-leading-zero);position:absolute;inset-inline-start:0;top:.1rem;font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--orange-ink);direction:ltr}
.stack-list li::after{content:"";position:absolute;inset-inline-start:2.2rem;top:.35rem;bottom:.2rem;width:1px;background:var(--line-strong)}
.stack-list h3{margin-bottom:.35rem}
.stack-list .chip{margin-top:.6rem}
.photo-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sand);box-shadow:var(--shadow);transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .6s var(--ease)}
.photo-card img{width:100%;height:auto;max-width:1180px}
.photo-card figcaption{position:absolute;inset-inline-start:14px;bottom:14px;font-size:.74rem;background:rgba(35,31,32,.72);color:#fff;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}

.cards{display:grid;gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,4vh,48px)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--stack{grid-template-columns:1fr;margin-top:1.2rem}
.card{position:relative;padding:clamp(22px,2.2vw,34px);border-radius:var(--radius);background:rgba(255,255,255,.9);border:1px solid rgba(35,31,32,.07);box-shadow:var(--shadow);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.card::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-deep));transform:scaleX(0);transform-origin:var(--o,right);transition:transform .7s var(--ease)}
html[dir="ltr"] .card::after{--o:left}
.card.in::after{transform:scaleX(.18)}
.card:hover{transform:translateY(-4px);border-color:rgba(238,103,36,.35)}
.card:hover::after{transform:scaleX(1)}
.card__idx{display:block;font-family:var(--f-display);font-weight:700;font-size:.8rem;color:var(--orange-ink);margin-bottom:1rem;direction:ltr;text-align:start}
.card h3,.card h4{margin-bottom:.5rem}
.card p{color:var(--ink-2);font-size:.95rem}
.card--line{padding:20px 24px;box-shadow:none;background:rgba(255,255,255,.72)}
.card--accent{background:var(--ink);color:var(--ivory)}
.card--accent p{color:rgba(246,241,234,.78)}
.card--accent .card__idx{color:var(--orange-soft)}

/* story timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(40px,7vh,80px);padding-top:46px}
.timeline__line{position:absolute;inset-inline:0;top:13px;width:100%;height:8px;overflow:visible}
.timeline__line line{stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));vector-effect:non-scaling-stroke}
html[dir="rtl"] .timeline__line{transform:scaleX(-1)}
.timeline__node{position:relative;padding:18px 18px 16px;border-radius:var(--radius-s);background:rgba(255,255,255,.74);box-shadow:0 18px 40px -30px rgba(35,31,32,.45)}
.timeline__dot{position:absolute;top:-41px;inset-inline-start:0;width:18px;height:18px;border-radius:50%;background:var(--ivory);border:3px solid var(--orange);box-shadow:0 0 0 6px rgba(238,103,36,.12)}
.timeline__node h3{color:var(--orange-ink);margin-bottom:.4rem}
.timeline__node p{color:var(--ink-2);font-size:.95rem}

/* why */
.scene--why{min-height:220vh;padding:0}
.why__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-content:center;text-align:center;padding-inline:var(--gutter);overflow:hidden}
.why__q{display:inline-block;font-size:clamp(3.2rem,13vw,13rem);line-height:1.45;padding:.08em .12em .32em;margin-block:-.1em -.22em;color:var(--ivory);transform:scale(calc(.82 + var(--p,0) * .28));opacity:calc(.25 + var(--p,0) * 1.6);background:linear-gradient(100deg,var(--ivory) 30%,var(--orange) 50%,var(--ivory) 70%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-position:calc(var(--p,0) * 160%) 0}
.why__sub{margin:2rem auto 0;max-width:38ch;font-size:clamp(1.05rem,1.6vw,1.5rem);color:rgba(246,241,234,.8);opacity:clamp(0,calc((var(--p,0) - .35) * 3),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .35) * 3),1)) * 24px))}

/* product: 3D turntable of the transparent dishes */
.scene--product{overflow:hidden}
.product{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,90px);align-items:center}
.product--showcase{grid-template-columns:1fr;gap:clamp(10px,2vh,24px);text-align:center}
.product--showcase .lead{margin-inline:auto}
.showcase{position:relative;margin-inline:calc(var(--gutter) * -1)}
.showcase__stage{position:relative;height:clamp(20rem,44vw,40rem);perspective:1300px;perspective-origin:50% 18%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.showcase__stage:active{cursor:grabbing}
.showcase__stage::before{content:"";position:absolute;inset:auto 8% 6% 8%;height:34%;border-radius:50%;background:radial-gradient(closest-side,rgba(238,103,36,.22),rgba(238,103,36,.06) 60%,transparent 76%);filter:blur(4px);animation:breathe 7s var(--ease-in-out) infinite alternate}
.showcase__ring{position:absolute;inset:0;transform-style:preserve-3d}
.showcase__item{--size:min(calc(clamp(9.5rem,24vw,22rem) * var(--s,1)),var(--nw));position:absolute;left:50%;top:58%;width:var(--size);aspect-ratio:1;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;will-change:transform,opacity;transform-style:preserve-3d}
.showcase__item:focus-visible{outline-offset:6px}
.showcase__plate{position:absolute;inset:0;display:grid;place-items:center;animation:plateSpin 46s linear infinite;transform-origin:50% 50%}
.showcase__plate img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(35,31,32,.30));pointer-events:none}
.showcase__shadow{position:absolute;inset:auto 6% -9% 6%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(35,31,32,.32),transparent);filter:blur(3px);transform:translateZ(-1px)}
.showcase__item.is-front .showcase__plate{animation-duration:30s}
.showcase__item.is-front::after{content:"";position:absolute;inset:-7%;border-radius:50%;border:1.5px solid rgba(238,103,36,.55);box-shadow:0 0 0 10px rgba(238,103,36,.07);animation:frontRing 2.4s var(--ease-in-out) infinite alternate;pointer-events:none}
@keyframes plateSpin{to{transform:rotate(360deg)}}
@keyframes frontRing{from{transform:scale(.98);opacity:.55}to{transform:scale(1.03);opacity:1}}
.showcase__cap{min-height:3.2em;margin:clamp(4px,1vh,14px) auto 0;max-width:34ch;font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.6rem);line-height:1.5;color:var(--ink)}
.showcase__cap.is-in{animation:capIn .7s var(--ease) both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.showcase__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.showcase__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.88);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,transform .2s var(--ease),background .25s}
.showcase__btn:hover{border-color:var(--orange);transform:scale(1.06)}
.showcase__btn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .showcase__btn--prev svg,html[dir="ltr"] .showcase__btn--next svg{transform:none}
html[dir="rtl"] .showcase__btn--next svg,html[dir="ltr"] .showcase__btn--prev svg{transform:scaleX(-1)}
.showcase__count{min-width:4.5em;text-align:center;font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink-3)}
.showcase__hint{margin-top:.6rem;font-size:.82rem;color:var(--ink-3)}

/* menu showcase — original photos on white cards (their own background is white) */
.menu{display:grid;gap:clamp(40px,7vh,72px);margin-top:clamp(30px,5vh,56px)}
.menu__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:clamp(14px,2vh,22px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.menu__head h3{font-size:clamp(1.15rem,1.6vw,1.6rem)}
.menu__count{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.menu__grid{display:grid;gap:clamp(12px,1.5vw,22px);align-items:start}
.menu__grid--plates{grid-template-columns:repeat(4,minmax(0,1fr))}
.menu__grid--rice{grid-template-columns:repeat(3,minmax(0,1fr))}
/* sides & sauces: centred rows so a short last row never looks orphaned */
.menu__grid--sides,.menu__grid--sauces{display:flex;flex-wrap:wrap;justify-content:center}
.menu__grid--sides .menu__item{flex:0 1 11rem}
.menu__grid--sauces .menu__item{flex:0 0 calc((100% - 7 * clamp(12px,1.5vw,22px)) / 8)}
@media (max-width:1100px){.menu__grid--sauces .menu__item{flex-basis:calc((100% - 3 * clamp(12px,1.5vw,22px)) / 4)}}
.menu__grid--sweets{grid-template-columns:repeat(4,minmax(0,1fr))}
.menu__tile{position:relative;display:grid;place-items:center;width:100%;padding:6%;border:1px solid rgba(35,31,32,.06);border-radius:var(--radius);background:#fff;box-shadow:0 18px 40px -28px rgba(35,31,32,.5);overflow:hidden;cursor:zoom-in;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.menu__tile img{width:100%;height:auto;margin-inline:auto}
.menu__tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) -160% 0/250% 100% no-repeat;transition:background-position 1.3s var(--ease)}
.menu__item.in .menu__tile::after{background-position:160% 0}
.menu__tile:hover,.menu__tile:focus-visible{transform:translateY(-6px);border-color:rgba(238,103,36,.4);box-shadow:0 30px 60px -30px rgba(238,103,36,.55)}
.menu__cap{display:block;margin-top:10px;font-size:.84rem;line-height:1.6;color:var(--ink-2)}
.menu__grid--sauces .menu__cap{font-size:.78rem;text-align:center}

/* photo viewer */
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--ivory);overflow:hidden}
.lightbox::backdrop{background:rgba(20,16,18,.9);backdrop-filter:blur(6px)}
.lightbox[open]{animation:lbin .35s var(--ease)}
@keyframes lbin{from{opacity:0}}
.lightbox__fig{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;padding:72px clamp(64px,8vw,120px) 96px;margin:0}
.lightbox__fig img{display:block;width:auto;height:auto;max-width:min(var(--nw,1400px),100%);max-height:calc(100dvh - 210px);border-radius:20px;background:#fff;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);animation:lbimg .45s var(--ease)}
@keyframes lbimg{from{opacity:0;transform:scale(.96)}}
.lightbox__fig figcaption{font-size:clamp(.95rem,1.3vw,1.15rem);text-align:center;max-width:60ch;color:rgba(246,241,234,.9)}
.lightbox__count{position:fixed;bottom:calc(24px + var(--safe-b));inset-inline:0;text-align:center;font-size:.8rem;color:rgba(246,241,234,.6);font-variant-numeric:tabular-nums;max-width:none}
.lightbox__btn{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(246,241,234,.25);background:rgba(246,241,234,.08);color:var(--ivory);transition:background .2s,border-color .2s}
.lightbox__btn:hover{background:rgba(238,103,36,.85);border-color:var(--orange)}
.lightbox__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lightbox__close{top:calc(18px + env(safe-area-inset-top,0px));inset-inline-end:18px}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{inset-inline-start:16px}
.lightbox__nav--next{inset-inline-end:16px}
html[dir="ltr"] .lightbox__nav svg{transform:scaleX(-1)}

/* ops manuals */
.manuals{margin-top:2rem;display:grid;gap:12px}
.manuals li{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--radius-s);background:rgba(255,255,255,.78);border:1px solid rgba(35,31,32,.07);font-weight:500}
.manuals__spine{flex:none;width:8px;height:34px;border-radius:3px;background:linear-gradient(var(--orange),var(--orange-deep));box-shadow:4px 0 0 -1px var(--sand),8px 0 0 -2px var(--ivory-2)}

/* system pinned */
.system{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);margin-top:clamp(20px,4vh,40px)}
.system__visual{position:sticky;top:12vh;height:76vh;display:grid;place-items:center}
.system__orbit{position:relative;width:min(100%,62vh,560px);aspect-ratio:1}
.system__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.system__ring{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 6;transform-origin:200px 200px;animation:spin 60s linear infinite}
.system__ring--in{stroke:rgba(238,103,36,.35);animation-duration:40s;animation-direction:reverse}
.system__links line{stroke:var(--orange);stroke-width:1.5;opacity:.18;transition:opacity .5s}
.system__links line.on{opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.system__nodes li{position:absolute;left:calc(50% + var(--x) * 37.5%);top:calc(50% + var(--y) * 37.5%);transform:translate(-50%,-50%);padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);font-size:.85rem;font-weight:600;white-space:nowrap;transition:background .45s var(--ease),color .45s,transform .45s var(--ease),box-shadow .45s}
.system__nodes li.on{background:var(--orange);color:#fff;border-color:var(--orange);transform:translate(-50%,-50%) scale(1.12);box-shadow:0 14px 36px -12px rgba(238,103,36,.75)}
.system__core{position:absolute;inset:34%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px rgba(255,255,255,.7),0 30px 60px -20px rgba(35,31,32,.45);animation:breathe 6s var(--ease-in-out) infinite alternate}
.system__core img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.system__steps{display:grid;gap:30vh;padding-block:12vh 30vh}
.step{padding:clamp(22px,2.4vw,36px);border-radius:var(--radius);background:rgba(255,255,255,.9);border:1px solid rgba(35,31,32,.07);box-shadow:var(--shadow);opacity:.35;transform:scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.step.on{opacity:1;transform:none}
/* operating system: every card stays fully readable on every screen (iPad portrait included);
   the active one is marked by its orange edge instead of fading the others */
.scene--system .system__steps .step{opacity:1;transform:none;transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.scene--system .system__steps .step.on{border-color:rgba(238,103,36,.55);box-shadow:0 0 0 1px rgba(238,103,36,.25),var(--shadow)}
.step h3{margin-bottom:.8rem}
.step__sub{font-weight:600;color:var(--orange-ink);margin-bottom:.4rem}
.ticks{display:grid;gap:.55rem}
.ticks li{position:relative;padding-inline-start:1.5rem;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:9px;height:9px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
html[lang="en"] .ticks li::before{top:.55em}

/* KPIs */
.kpis{display:grid;gap:clamp(14px,2vw,28px);margin-top:clamp(30px,5vh,56px)}
.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{container-type:inline-size;position:relative;padding:clamp(22px,2.6vw,40px);border-radius:var(--radius);background:rgba(42,36,38,.72);border:1px solid rgba(246,241,234,.1);display:flex;flex-direction:column;gap:6px;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(238,103,36,.6),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kpi__v{font-size:clamp(1.9rem,17cqi,4.6rem);font-weight:800;line-height:1.05;color:var(--orange);text-align:start;align-self:flex-start}
.kpi--big .kpi__v{font-size:clamp(2rem,16cqi,6rem)}
.kpi__u{font-size:.85rem;color:rgba(246,241,234,.6)}
.kpi__l{font-size:1rem;font-weight:600;color:var(--ivory)}
.kpi--accent{background:linear-gradient(150deg,var(--orange),var(--orange-deep))}
.kpi--accent .kpi__v{color:#fff}
.pillars{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.pillars li{padding:10px 18px;border-radius:999px;border:1px solid rgba(246,241,234,.2);font-weight:500}

/* Kingdom trio */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);margin-top:clamp(30px,5vh,56px)}
.trio__item{padding:22px 22px 24px;border-top:2px solid var(--ink);background:rgba(255,255,255,.76);border-radius:0 0 var(--radius-s) var(--radius-s)}
.trio__n{display:block;font-family:var(--f-display);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;color:transparent;-webkit-text-stroke:1.2px var(--orange);line-height:1;margin-bottom:14px;direction:ltr;text-align:start}
.trio__item h3{margin-bottom:.4rem}
.trio__item p{color:var(--ink-2)}

/* donut */
.donut-fig{padding:clamp(22px,3vw,40px);border-radius:var(--radius);background:rgba(255,255,255,.9);box-shadow:var(--shadow);display:grid;gap:22px}
.donut-fig__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;font-weight:600}
.donut{width:min(100%,360px);aspect-ratio:1;margin-inline:auto}
.donut-fig--big .donut{width:min(100%,460px)}
.donut svg{width:100%;height:100%;overflow:visible}
.donut .seg{fill:none;stroke-width:34;transition:stroke-dashoffset 1.6s var(--ease),stroke-width .3s,opacity .3s}
.donut .seg:hover,.donut .seg.hl{stroke-width:42}
.donut__center{font-family:var(--f-display);text-anchor:middle}
.legend{display:grid;gap:10px}
.legend li{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;font-size:.95rem;padding:8px 10px;border-radius:10px;transition:background .25s}
.legend li:hover,.legend li.hl{background:rgba(238,103,36,.08)}
.legend i{width:14px;height:14px;border-radius:4px}
.legend b{font-family:var(--f-display);direction:ltr}
.legend--alloc{margin-top:2rem}
.legend--alloc li{font-size:1.02rem;padding:12px 14px;border-bottom:1px solid var(--line)}
.legend--alloc li.total{border-bottom:0;font-weight:700}

/* matrix table */
.table-wrap{margin-top:clamp(26px,4vh,44px);overflow-x:auto;border-radius:var(--radius);background:rgba(255,255,255,.92);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.matrix{width:100%;border-collapse:collapse;min-width:640px}
.matrix th,.matrix td{padding:16px 20px;text-align:start;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.matrix thead th{font-family:var(--f-display);font-weight:700;background:var(--ivory-2);font-size:.92rem}
.matrix tbody th{font-weight:600;color:var(--ink-2)}
.matrix .is-us{background:rgba(238,103,36,.07);font-weight:600;color:var(--ink)}
.matrix thead .is-us{background:var(--orange);color:#fff}
.matrix tr:last-child>*{border-bottom:0}

/* segments */
.segments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:clamp(28px,4vh,48px);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.segment{padding:clamp(22px,2.4vw,36px);background:rgba(255,255,255,.94);transition:background .4s}
.segment:hover{background:#fff}
.segment__n{display:block;font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--sand);margin-bottom:1.2rem;direction:ltr;text-align:start;transition:color .4s}
.segment:hover .segment__n{color:var(--orange)}
.segment p{color:var(--ink-2);font-size:.95rem;margin-top:.4rem}

/* map */
.regions{display:grid;gap:4px;margin-top:.4rem}
.regions li{padding:14px 16px;border-radius:var(--radius-s);border-inline-start:3px solid transparent;transition:background .35s,border-color .35s;cursor:default}
.regions li:hover,.regions li.on{background:rgba(255,255,255,.85);border-color:var(--orange)}
.regions p{color:var(--ink-2);font-size:.93rem}
.mapfig{position:relative;padding:clamp(16px,2vw,28px);border-radius:var(--radius);background:rgba(255,255,255,.92);box-shadow:var(--shadow);overflow:hidden}
.mapfig__svg{width:100%;height:auto;overflow:visible}
.mapfig .grid line{stroke:rgba(35,31,32,.06);stroke-width:1}
.mapfig .land{opacity:0;transition:opacity 1.4s var(--ease) .6s}
.mapfig.in .land{opacity:1}
.mapfig .coast{fill:none;stroke:var(--orange-ink);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease-in-out)}
.mapfig.in .coast{stroke-dashoffset:0}
.mapfig .glow{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity 1s var(--ease) 1.2s}
.mapfig.in .glow{opacity:1;animation:breathe 4s var(--ease-in-out) infinite alternate}
.mapfig .route{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease);transition-delay:calc(1.6s + var(--i,0) * .22s)}
.mapfig.in .route{stroke-dashoffset:0}
.mapfig .flow{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:.03 .09;opacity:0;animation:mapFlow 2.4s linear infinite;transition:opacity .8s var(--ease);transition-delay:calc(3s + var(--i,0) * .22s)}
.mapfig.in .flow{opacity:.95}
@keyframes mapFlow{to{stroke-dashoffset:-.48}}
.mapfig .comet{fill:var(--orange);opacity:0;transition:opacity .6s 3.2s;filter:drop-shadow(0 0 8px rgba(238,103,36,.9))}
.mapfig.in .comet{opacity:1}
.mapfig .city{opacity:0;transition:opacity .7s var(--ease);transition-delay:calc(1.4s + var(--i,0) * .2s)}
.mapfig.in .city{opacity:1}
.mapfig .city circle.core{fill:var(--orange);stroke:#fff;stroke-width:3;transition:fill .3s}
.mapfig .city--launch circle.core{fill:var(--ink)}
.mapfig .city circle.ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.8s var(--ease) infinite}
.mapfig .city--launch circle.ring{stroke-width:3;animation-duration:2s}
.mapfig .city text{font-family:var(--f-body);font-size:25px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.mapfig .city text.tag{font-size:19px;font-weight:600;fill:var(--orange-ink)}
.mapfig .city.on circle.core{fill:var(--ink)}
.mapfig .city--launch.on circle.core{fill:var(--orange)}
.regions li.is-launch h4{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* channels */
.channels{margin-top:clamp(28px,4vh,48px);display:grid;gap:12px}
.channel{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,2fr);gap:clamp(14px,3vw,48px);align-items:baseline;padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px);border-radius:var(--radius);background:rgba(255,255,255,.88);border:1px solid rgba(35,31,32,.07);transition:transform .5s var(--ease),background .4s}
.channel:hover{transform:translateX(calc(var(--dirx,-1) * 8px));background:#fff}
html[dir="ltr"] .channel:hover{--dirx:1}
.channel__n{font-family:var(--f-display);font-weight:800;color:var(--orange-ink);direction:ltr}
.channel p{color:var(--ink-2)}

/* charts */
.charts{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,70px);margin-top:clamp(20px,4vh,40px)}
.charts__sticky{position:sticky;top:13vh;height:max-content}
.chart-card{padding:clamp(18px,2.4vw,34px);border-radius:var(--radius);background:rgba(42,36,38,.78);border:1px solid rgba(246,241,234,.1)}
.chart-card__head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-bottom:10px}
.chart-card__period{font-size:.8rem;color:rgba(246,241,234,.62)}
.chart-card__axis{font-size:.74rem;color:rgba(246,241,234,.5);margin-top:6px}
.barchart{width:100%;height:auto;overflow:visible;font-family:var(--f-display)}
.barchart .gridline{stroke:rgba(246,241,234,.1);stroke-width:1}
.barchart .gridlabel{fill:rgba(246,241,234,.5);font-size:12px}
.barchart .bar{fill:url(#barGrad);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--s,0));transition:transform 1.1s var(--ease)}
.barchart .bar.peak{fill:url(#barGradPeak)}
.barchart .val{fill:var(--ivory);font-size:15px;font-weight:700;text-anchor:middle;transition:transform 1.1s var(--ease),opacity .4s}
.barchart .mon{fill:rgba(246,241,234,.75);font-size:14px;text-anchor:middle;font-family:var(--f-body)}
.barchart .avgline{stroke:var(--orange-soft);stroke-width:1.2;stroke-dasharray:5 6;transition:transform 1.1s var(--ease),opacity .4s}
.barchart .avglabel{fill:var(--orange-soft);font-size:12px;transition:transform 1.1s var(--ease),opacity .4s}
.charts__steps{display:grid;gap:42vh;padding-block:6vh 30vh}
.step--chart{background:rgba(42,36,38,.82);border-color:rgba(246,241,234,.1);color:var(--ivory)}
.step--chart p{color:rgba(246,241,234,.8)}
.datatable{margin-top:18px;border-radius:var(--radius-s);background:rgba(42,36,38,.7);padding:14px 18px}
.datatable summary{cursor:pointer;font-weight:600;color:var(--orange-soft)}
.datatable .table-wrap{background:transparent;box-shadow:none}
.matrix--data{min-width:520px;color:var(--ivory)}
.matrix--data th,.matrix--data td{border-color:rgba(246,241,234,.1)}
.matrix--data thead th{background:rgba(246,241,234,.06)}
.matrix--data tbody th{color:rgba(246,241,234,.8)}
.matrix--data td{font-family:var(--f-display);direction:ltr;text-align:end}
html[dir="rtl"] .matrix--data td{text-align:start}

/* plan */
.plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);align-items:end;margin-top:clamp(30px,5vh,60px);min-height:clamp(380px,56vh,560px)}
.plan__y{display:flex;flex-direction:column;gap:6px;height:100%;justify-content:flex-end}
.plan__bar{position:relative;display:block;width:100%;height:calc(var(--h) * clamp(180px,30vh,320px));border-radius:14px 14px 4px 4px;overflow:hidden;background:rgba(35,31,32,.06)}
.plan__bar i{position:absolute;inset:0;background:linear-gradient(180deg,var(--orange),var(--orange-deep));transform-origin:bottom;transform:scaleY(clamp(0,calc((var(--p,0) - var(--k,0) * .08) * 2.2),1));border-radius:inherit}
.plan__y:last-child .plan__bar i{background:linear-gradient(180deg,#ff8a4c,var(--orange) 40%,var(--orange-deep));box-shadow:0 0 40px rgba(238,103,36,.5)}
.plan__n{font-size:clamp(1.9rem,3.6vw,3.4rem);font-weight:800;line-height:1;color:var(--ink);margin-top:10px;align-self:flex-start}
.plan__u{font-size:.85rem;color:var(--ink-3);margin-top:-2px}
.plan__y h3{font-size:.98rem;color:var(--orange-ink);margin-top:6px}
.plan__y p{font-size:.86rem;color:var(--ink-2);line-height:1.6}

/* calculator */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,3vw,44px);margin-top:clamp(26px,4vh,44px);padding:clamp(18px,3vw,44px);border-radius:calc(var(--radius) + 8px);background:rgba(255,255,255,.94);box-shadow:var(--shadow);border:1px solid rgba(35,31,32,.07)}
.calc__inputs{display:grid;gap:22px;align-content:start}
.field label{display:block;font-weight:600;margin-bottom:8px}
.field__box{display:flex;align-items:center;border-radius:16px;border:1.5px solid var(--line-strong);background:var(--white);transition:border-color .25s,box-shadow .25s}
.field__box:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(238,103,36,.14)}
.field.has-err .field__box{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.field input{flex:1;min-width:0;border:0;background:transparent;padding:16px 18px;font-family:var(--f-display);font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:700;direction:ltr;text-align:start;outline:none;font-variant-numeric:tabular-nums}
html[dir="rtl"] .field input{text-align:right}
.field input::placeholder{font-family:var(--f-body);font-weight:400;font-size:1rem;color:var(--ink-3)}
.field__unit{padding-inline:12px 18px;color:var(--ink-3);font-size:.9rem;white-space:nowrap}
.field__err{min-height:1.2em;font-size:.82rem;color:#B03A2E;margin-top:6px}
.field__hint{font-size:.8rem;color:var(--ink-3);margin-top:4px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chipbtn{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--ivory);font-size:.85rem;transition:background .2s,border-color .2s,color .2s}
.chipbtn:hover,.chipbtn[aria-pressed="true"]{border-color:var(--orange);background:rgba(238,103,36,.1);color:var(--orange-ink)}
.calc__out{display:grid;gap:16px;align-content:start;padding:clamp(18px,2.4vw,32px);border-radius:var(--radius);background:linear-gradient(160deg,var(--night-2),var(--night));color:var(--ivory);position:relative;overflow:hidden}
.calc__out::before{content:"";position:absolute;width:70%;aspect-ratio:1;inset-inline-end:-25%;top:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(238,103,36,.35),transparent);pointer-events:none}
.calc__empty{color:rgba(246,241,234,.7);font-size:.95rem}
.calc__warn{color:#FFC59E;font-size:.88rem}
.results{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.result{padding:16px 18px;border-radius:16px;background:rgba(246,241,234,.06);border:1px solid rgba(246,241,234,.08);transition:opacity .4s,transform .4s var(--ease)}
.results[data-state="empty"] .result{opacity:.4}
.result dt{font-size:.82rem;color:rgba(246,241,234,.7);margin-bottom:6px}
.result dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.result b{font-size:clamp(1.35rem,2.2vw,2rem);font-weight:800;color:#fff}
.result--hero{grid-column:span 2;background:linear-gradient(140deg,rgba(238,103,36,.95),rgba(185,71,15,.95));border:0}
.result--hero dt{color:rgba(255,255,255,.85)}
.result--hero b{font-size:clamp(2rem,4vw,3.4rem)}
.result__u{font-size:.85rem;color:rgba(246,241,234,.62)}
.result__sub{flex-basis:100%;font-size:.78rem;color:rgba(246,241,234,.58)}
.result.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.03)}}
.calc__alloc h3{font-size:.9rem;margin-bottom:10px;color:rgba(246,241,234,.85)}
.alloc-bars{display:grid;gap:8px}
.alloc-bars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.82rem}
.alloc-bars .bar{height:8px;border-radius:5px;background:rgba(246,241,234,.1);overflow:hidden}
.alloc-bars .bar i{display:block;height:100%;width:calc(var(--w) * 1%);background:var(--orange);border-radius:inherit;transition:width .8s var(--ease)}
.alloc-bars b{font-family:var(--f-display);direction:ltr;font-variant-numeric:tabular-nums}
.calc__foot{margin-top:20px}
.formula{font-size:.86rem;color:var(--ink-2);padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.7);border:1px dashed var(--line-strong);max-width:none}

/* CTA */
.scene--cta{padding-block:clamp(120px,18vh,220px) clamp(120px,16vh,200px)}
.cta{position:relative;max-width:min(44rem,92vw);margin-inline:auto;padding:clamp(34px,6vw,90px) clamp(22px,5vw,80px);text-align:center;border-radius:calc(var(--radius) * 1.6);background:rgba(255,255,255,.94);box-shadow:0 40px 120px -40px rgba(238,103,36,.55),var(--shadow);display:grid;justify-items:center;gap:14px;isolation:isolate}
.cta__halo{position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(238,103,36,.9) 82%,transparent 92%);animation:halo 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes halo{to{--ang:360deg}}
.cta__logo{width:clamp(150px,18vw,11rem);margin-bottom:8px}
.cta h2{max-width:16ch}
.cta__sub{font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:500;color:var(--ink-2)}
.cta__line{font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.8rem);color:var(--orange-ink);max-width:28ch}
.cta .lead{margin-inline:auto}
.cta__btn{position:relative;display:inline-flex;align-items:center;gap:16px;margin-top:18px;min-height:64px;padding:16px clamp(24px,3vw,40px);border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:clamp(1.02rem,1.4vw,1.25rem);box-shadow:0 20px 50px -18px rgba(238,103,36,.9);overflow:hidden;transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .35s var(--ease),box-shadow .35s}
.cta__btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%) -160% 0/250% 100% no-repeat;animation:sheen 3.6s var(--ease-in-out) infinite}
@keyframes sheen{0%,55%{background-position:-160% 0}100%{background-position:160% 0}}
.cta__btn:hover{box-shadow:0 26px 60px -16px rgba(238,103,36,1)}
.cta__btn:active{transform:scale(.97)}
.cta__btn-arrow{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);position:relative;flex:none}
.cta__btn-arrow::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff;transform:translateX(2px) rotate(-45deg)}
html[dir="ltr"] .cta__btn-arrow::after{transform:translateX(-2px) rotate(135deg)}
.cta__form{font-size:.86rem;color:var(--ink-3);max-width:62ch}
.cta .note{text-align:start}

/* footer */
.footer{padding-block:60px calc(110px + var(--safe-b));border-top:1px solid var(--line);background:rgba(246,241,234,.9)}
.footer__in{display:grid;gap:14px;justify-items:start}
.footer__logo{width:110px}
.footer__src{font-size:.82rem;color:var(--ink-3);max-width:90ch}
.footer__copy{font-size:.82rem;color:var(--ink-3)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--orange-ink);font-size:inherit}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro{position:fixed;inset:0;z-index:100;display:none;color:var(--ivory);overflow:hidden}
body[data-intro="playing"] .intro{display:block}
body[data-intro="playing"]{overflow:hidden}
/* while the intro owns the screen, the page waits underneath (no flash, reveals play after hand-off) */
html[data-boot="intro"] body[data-intro="pending"] .intro{display:block;background:var(--night)}
html[data-boot="intro"] body:not([data-intro="done"]) :is(main,.footer,.agent,.topbar__actions,.atmos){opacity:0;visibility:hidden}
main,.footer,.agent,.topbar__actions,.atmos{transition:opacity 1s var(--ease),visibility 0s}
html[data-boot="intro"] body:not([data-intro="done"]) .reveal.in{opacity:0;transform:translate3d(0,34px,0)}
html[data-boot="intro"] body:not([data-intro="done"]) .split.in .w{opacity:0;transform:translate3d(0,.55em,0);filter:blur(6px)}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(20,16,18,0) 0,rgba(20,16,18,.38) 100%);pointer-events:none}
.intro__stage{position:absolute;inset:0}
/* intro — "a restaurant at night": copper pendant lamps, warm light, gold accents */
.intro{background:#0E0A0B}
.intro::before{z-index:1}
.intro__scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro__kpis{position:absolute;inset-inline:0;top:54%;transform:translateY(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,5vw,80px);opacity:0;padding-inline:var(--gutter);z-index:2}
.intro__kpi{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.intro__kpi b{font-size:clamp(2rem,5.2vw,4.8rem);font-weight:800;line-height:1.05;color:#F2C28A;background:linear-gradient(180deg,#FFE7C4 0%,#F2B067 48%,#C47A36 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(242,160,90,.28))}
.intro__kpi>span{font-size:.88rem;color:rgba(246,233,215,.82)}
.intro__src{flex-basis:100%;text-align:center;font-size:.74rem;color:rgba(246,233,215,.55);margin:8px auto 0}
.intro__logo{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;opacity:0;padding:12vh var(--gutter) 0;z-index:2}
.intro__logo-wrap{position:relative;width:min(58vw,26rem)}
.intro__logo-wrap img{width:100%;display:block}
.intro__sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,240,215,.95) 50%,transparent 65%) -150% 0/260% 100% no-repeat;-webkit-mask:url(../assets/brand/tamliha-wordmark-mark.png) center/contain no-repeat;mask:url(../assets/brand/tamliha-wordmark-mark.png) center/contain no-repeat;mix-blend-mode:screen}
.intro__sub{margin:4px 0 0;font-family:var(--f-display);font-weight:700;font-size:clamp(1.25rem,2.4vw,2rem);color:#F6E9D7;opacity:0;text-align:center}
html[lang="en"] .intro__sub{letter-spacing:.24em;text-transform:uppercase;font-size:clamp(.9rem,1.5vw,1.2rem)}
.intro__orn{width:min(70vw,420px);height:auto;overflow:visible}
.intro__orn .o-line{fill:none;stroke:#D9A96A;stroke-width:1.4;stroke-linecap:round}
.intro__orn .o-dia{fill:none;stroke:#E8BC7F;stroke-width:1.6;opacity:0}
.intro__orn .o-dia--s{fill:#D9A96A;stroke:none}
.intro__tagline{margin:2px 0 0;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.7vw,1.45rem);color:rgba(246,233,215,.9);opacity:0;text-align:center}
.intro__country{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(.82rem,1.1vw,1rem);color:#D9A96A;opacity:0}
html[lang="en"] .intro__country{letter-spacing:.2em;text-transform:uppercase;font-size:clamp(.7rem,1vw,.9rem)}
.intro__country::before,.intro__country::after{content:"";width:clamp(28px,6vw,80px);height:1px;background:linear-gradient(90deg,transparent,#D9A96A)}
.intro__country::after{background:linear-gradient(270deg,transparent,#D9A96A)}
/* owner (2026-11-11): the intro uses the bright look — white / beige, light blue and orange */
.intro{background:#FFFFFF;color:#2A2224}
html[data-boot="intro"] body[data-intro="pending"] .intro{background:#FFFFFF}
.intro::before{background:none}
.intro__kpi b{color:#EE6724;background:linear-gradient(180deg,#F8A86C 0%,#EE6724 52%,#C2501A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 18px rgba(238,103,36,.18))}
.intro__kpi>span{color:rgba(42,34,36,.78)}
.intro__src{color:rgba(42,34,36,.55)}
.intro__sub{color:#2A2224}
.intro__orn .o-line{stroke:#EBA36E}
.intro__orn .o-dia{stroke:#6FB2DE}
.intro__orn .o-dia--s{fill:#6FB2DE}
.intro__tagline{color:rgba(42,34,36,.86)}
.intro__country{color:#E07A3A}
.intro__country::before{background:linear-gradient(90deg,transparent,#6FB2DE)}
.intro__country::after{background:linear-gradient(270deg,transparent,#6FB2DE)}
.intro__ui{position:absolute;bottom:calc(22px + var(--safe-b));inset-inline:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:3}
.intro__hint{margin:0;font-size:.8rem;color:rgba(246,241,234,.72);display:flex;align-items:center;gap:8px;transition:opacity .6s var(--ease);animation:hintPulse 2.2s var(--ease-in-out) infinite alternate}
.intro__hint::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M16 9.5a3.5 3.5 0 0 1 0 5M18.5 7a7 7 0 0 1 0 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='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 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='black'/%3E%3Cpath d='M16 9.5a3.5 3.5 0 0 1 0 5M18.5 7a7 7 0 0 1 0 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.intro__hint.is-hidden{opacity:0;animation:none}
.intro.is-light .intro__hint{color:var(--ink-2)}
@keyframes hintPulse{from{opacity:.55}to{opacity:1}}
.pill--ghost{background:rgba(246,241,234,.08);color:var(--ivory);border-color:rgba(246,241,234,.25)}
.intro.is-light .pill--ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--line-strong)}
.intro__ui .pill--ghost{margin-inline-start:auto}
.intro__timer{position:absolute;inset-inline:0;top:0;height:2px}
.intro__timer span{display:block;height:100%;width:100%;transform-origin:var(--origin,right);transform:scaleX(0);background:var(--orange)}
html[dir="ltr"] .intro__timer span{--origin:left}
.intro.is-export .intro__ui,.intro.is-export .intro__timer{display:none}

/* ==========================================================================
   AGENT
   ========================================================================== */
.agent{position:fixed;z-index:80;inset-inline-start:0;bottom:0;pointer-events:none}
html[dir="rtl"] .agent{inset-inline-start:auto;left:0}
.agent__fab{position:fixed;left:max(20px,var(--safe-l));bottom:calc(24px + var(--safe-b) + var(--lift,0px));width:clamp(58px,4.2vw,72px);aspect-ratio:1;border-radius:50%;padding:0;border:0;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 16px 40px -10px rgba(238,103,36,.7),0 6px 16px rgba(35,31,32,.25);pointer-events:auto;transition:transform .45s var(--ease),bottom .45s var(--ease),opacity .3s;overflow:visible}
.agent__fab img{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1.04);clip-path:circle(48.6%)}
.agent__fab:hover{transform:scale(1.07)}
.agent__pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(238,103,36,.55);animation:fabpulse 3.6s var(--ease) infinite;pointer-events:none}
@keyframes fabpulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.35);opacity:0}}
.agent[data-state="open"] .agent__fab{transform:scale(.6);opacity:0;pointer-events:none}
.agent__panel{position:fixed;left:max(20px,var(--safe-l));bottom:calc(20px + var(--safe-b));width:min(430px,calc(100vw - 40px));height:min(680px,calc(100vh - 110px));height:min(680px,calc(100dvh - 110px));display:flex;flex-direction:column;border-radius:26px;background:rgba(255,253,250,.97);border:1px solid rgba(35,31,32,.1);box-shadow:0 40px 100px -30px rgba(35,31,32,.6),0 0 0 1px rgba(238,103,36,.12);overflow:hidden;pointer-events:auto;clip-path:circle(0 at 36px calc(100% - 36px));transition:clip-path .65s var(--ease)}
.agent[data-state="open"] .agent__panel{clip-path:circle(150% at 36px calc(100% - 36px))}
.agent__head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));border-bottom:1px solid var(--line)}
.agent__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;clip-path:circle(48.5%);flex:none}
.agent__id{flex:1;min-width:0}
.agent__id h2{font-family:"Alexandria",var(--f-display);font-size:1rem;font-weight:700;line-height:1.3}
.agent__status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-3);line-height:1.3}
.agent__status i{width:8px;height:8px;border-radius:50%;background:#C9BFB5;flex:none}
.agent__status[data-status="checking"] i{animation:blink 1s infinite}
.agent__status[data-status="live"] i{background:#1F9D6A;box-shadow:0 0 0 3px rgba(31,157,106,.18)}
.agent__status[data-status="fallback"] i{background:#E0A100;box-shadow:0 0 0 3px rgba(224,161,0,.18)}
@keyframes blink{50%{opacity:.3}}
.agent__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;transition:border-color .2s,background .2s}
.agent__icon:hover{border-color:var(--orange)}
.agent__icon svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agent__icon:disabled{opacity:.4;cursor:not-allowed}
.agent__log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:88%;padding:12px 15px;border-radius:18px;font-size:.92rem;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;animation:msgin .45s var(--ease)}
html[lang="en"] .msg{line-height:1.6}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
.msg--bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-end-start-radius:6px}
.msg--me{align-self:flex-end;background:var(--ink);color:var(--ivory);border-end-end-radius:6px}
.msg--note{align-self:center;max-width:96%;font-size:.78rem;color:var(--ink-3);background:rgba(224,161,0,.08);border:1px solid rgba(224,161,0,.25);text-align:center}
.msg--err{align-self:center;max-width:96%;font-size:.8rem;color:#8A2D22;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.22)}
.msg__src{display:block;margin-top:8px;font-size:.7rem;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:6px}
.msg__files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg__files span{font-size:.72rem;padding:3px 8px;border-radius:8px;background:rgba(246,241,234,.15)}
.proc{align-self:flex-start;width:min(100%,320px);padding:14px 16px;border-radius:18px;background:linear-gradient(160deg,var(--night-2),var(--night));color:var(--ivory);box-shadow:0 18px 40px -20px rgba(20,16,18,.8);animation:msgin .4s var(--ease)}
.proc__t{display:flex;align-items:center;gap:8px;font-size:.74rem;color:rgba(246,241,234,.6);margin-bottom:10px}
.proc__t::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid rgba(238,103,36,.3);border-top-color:var(--orange);animation:spin .8s linear infinite}
.proc.done .proc__t::before{animation:none;border-color:var(--orange);background:var(--orange)}
.proc ol{display:grid;gap:8px}
.proc li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(246,241,234,.45);transition:color .3s}
.proc li i{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(246,241,234,.25);position:relative;transition:all .3s}
.proc li[data-s="run"]{color:var(--ivory)}
.proc li[data-s="run"] i{border-color:var(--orange);border-top-color:transparent;animation:spin .9s linear infinite}
.proc li[data-s="ok"]{color:rgba(246,241,234,.85)}
.proc li[data-s="ok"] i{background:var(--orange);border-color:var(--orange)}
.proc li[data-s="ok"] i::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.proc li[data-s="fail"] i{background:#C0392B;border-color:#C0392B}
.proc__bar{height:2px;border-radius:2px;background:rgba(246,241,234,.1);margin-top:12px;overflow:hidden}
.proc__bar span{display:block;height:100%;width:100%;background:var(--orange);transform-origin:var(--origin,right);transform:scaleX(var(--k,0));transition:transform .25s linear}
html[dir="ltr"] .proc__bar span{--origin:left}
.agent__suggest{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;scrollbar-width:none}
.agent__suggest::-webkit-scrollbar{display:none}
.agent__suggest button{flex:none;font-size:.78rem;padding:8px 13px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;white-space:nowrap;transition:border-color .2s,color .2s}
.agent__suggest button:hover{border-color:var(--orange);color:var(--orange-ink)}
.agent__form{padding:10px 12px calc(12px + var(--safe-b));border-top:1px solid var(--line);background:#fff}
.agent__files{display:flex;flex-wrap:wrap;gap:8px}
.agent__files:not(:empty){margin-bottom:8px}
.agent__files li{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-radius:12px;background:var(--ivory);font-size:.76rem;max-width:100%}
.agent__files img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.agent__files .fname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent__files .fstate{color:var(--ink-3)}
.agent__files button{border:0;background:none;width:28px;height:28px;border-radius:8px;font-size:1.1rem;line-height:1;color:#8A2D22}
.agent__entry{display:flex;align-items:flex-end;gap:8px;padding:6px;border-radius:18px;border:1.5px solid var(--line-strong);background:#fff;transition:border-color .2s,box-shadow .2s}
.agent__entry:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(238,103,36,.12)}
.agent__entry textarea{flex:1;min-width:0;resize:none;border:0;outline:none;background:transparent;padding:9px 6px;max-height:140px;min-height:42px;font-size:16px;line-height:1.6}
.agent__attach{border:0;background:transparent}
.agent__send{flex:none;width:44px;height:44px;border-radius:14px;border:0;background:var(--orange);display:grid;place-items:center;transition:transform .2s,opacity .2s}
.agent__send svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .agent__send svg{transform:scaleX(-1)}
.agent__send:disabled{opacity:.45;cursor:not-allowed}
.agent__hint{font-size:.68rem;color:var(--ink-3);margin-top:6px;text-align:center;max-width:none}
.agent__drop{position:absolute;inset:8px;z-index:5;border-radius:20px;border:2px dashed var(--orange);background:rgba(255,248,242,.95);display:grid;place-items:center;font-weight:600;color:var(--orange-ink)}

/* ==========================================================================
   OWNER REVISION 2026-11-10 — logo, branches, dishes, map, plan, calculator charts,
   footer, sound control, AI badge, monthly curve
   ========================================================================== */
/* top bar: the orange wordmark alone, fully transparent background, always visible */
.topbar__brand{width:clamp(104px,8.6vw,156px);opacity:1;transform:none;background:none;padding:0;border-radius:0;box-shadow:none}
.topbar__brand img{display:block;width:100%;height:auto}
body.is-scrolled .topbar__brand{opacity:1}

/* consumer: a dish with its sauces in orbit */
.dish-orbit{--R:calc(min(42vw,560px) * .4);position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto}
.dish-orbit::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1.5px dashed rgba(238,103,36,.35);animation:plateSpin 80s linear infinite reverse}
.dish-orbit__main{position:absolute;inset:18%;width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(35,31,32,.32));animation:plateSpin 70s linear infinite}
.dish-orbit__sat{position:absolute;left:39%;top:39%;width:22%;height:22%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(35,31,32,.3));animation:satOrbit 21s linear infinite}
.dish-orbit__sat--2{animation-delay:-7s}
.dish-orbit__sat--3{animation-delay:-14s}
@keyframes satOrbit{from{transform:rotate(0deg) translateX(var(--R)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--R)) rotate(-360deg)}}

/* branches: the owner's 3D branch tour */
.scene--branches{overflow:hidden}
.branches{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(22px,3.5vw,60px);margin-top:clamp(26px,4vh,48px);align-items:center}
.facade{margin:0;perspective:1600px}
.facade__stage{position:relative;transform-style:preserve-3d;transform:rotateY(calc((var(--p,0) - .6) * -16deg)) rotateX(calc((1 - var(--p,0)) * 9deg)) scale(calc(.92 + var(--p,0) * .08));will-change:transform}
.facade__card{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:calc(var(--radius) + 6px);background:#1c1718;box-shadow:0 60px 100px -40px rgba(35,31,32,.75),0 0 0 6px rgba(255,255,255,.75),0 0 0 7px rgba(35,31,32,.08)}
.facade--port .facade__card{aspect-ratio:9/16;width:min(100%,calc(74vh * 9 / 16));margin-inline:auto}
.facade__video{display:block;width:100%;height:100%;object-fit:cover;background:#1c1718}
.facade__sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%) -150% 0/250% 100% no-repeat;animation:facadeSweep 7s var(--ease-in-out) infinite}
@keyframes facadeSweep{0%,60%{background-position:-150% 0}100%{background-position:150% 0}}
.facade__badge{position:absolute;top:14px;inset-inline-start:14px;padding:6px 11px;border-radius:10px;background:rgba(238,103,36,.92);color:#fff;font-family:var(--f-display);font-weight:800;font-size:.8rem;letter-spacing:.08em;direction:ltr;box-shadow:0 8px 20px -8px rgba(238,103,36,.9)}
.facade__play{position:absolute;inset:0;margin:auto;width:86px;height:86px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 18px 40px -12px rgba(0,0,0,.55);cursor:pointer}
.facade__play i{width:0;height:0;border-style:solid;border-width:15px 0 15px 24px;border-color:transparent transparent transparent var(--orange);margin-left:7px}
.facade__floor{height:70px;margin:-8px 8% 0;background:radial-gradient(60% 100% at 50% 0,rgba(35,31,32,.32),transparent 72%);filter:blur(8px)}
.facade__cap{margin-top:10px;font-size:.88rem;color:var(--ink-3);text-align:center}
.branch-list{display:grid;gap:16px}
.branch{position:relative;padding:clamp(20px,2vw,28px);padding-inline-start:clamp(60px,4.6vw,72px);border-radius:var(--radius);background:rgba(255,255,255,.95);box-shadow:var(--shadow);border:1px solid rgba(35,31,32,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.branch:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(238,103,36,.45)}
.branch h3{font-size:clamp(1.05rem,1.3vw,1.28rem);margin-bottom:.35rem}
.branch__addr{color:var(--ink-2);font-size:.96rem}
.branch__hours{margin-top:.4rem;color:var(--ink-3);font-size:.84rem}
.branch__pin{position:absolute;inset-inline-start:clamp(20px,1.7vw,26px);top:clamp(24px,2.2vw,32px);width:24px;height:24px;border-radius:50% 50% 50% 0;background:var(--orange);transform:rotate(-45deg);box-shadow:0 6px 14px -4px rgba(238,103,36,.8)}
.branch__pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.branch__btn{display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;transition:background .25s,transform .2s var(--ease)}
.branch__btn:hover{background:var(--orange);transform:translateY(-2px)}
.branch__btn i{width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%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 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
html[dir="rtl"] .branch__btn i{transform:scaleX(-1)}
.branch-mini{display:none}
.ksa-mini{width:min(100%,250px);height:auto;overflow:visible}
.ksa-mini__land{fill:rgba(238,103,36,.08);stroke:var(--orange-ink);stroke-width:4;stroke-linejoin:round}
.ksa-mini__dot{fill:rgba(35,31,32,.35)}
.ksa-mini__pin{fill:var(--orange);stroke:#fff;stroke-width:6}
.ksa-mini__ping{fill:none;stroke:var(--orange);stroke-width:5;transform-box:fill-box;transform-origin:center;animation:ping 2.2s var(--ease) infinite}

/* plan: bigger, bolder */
.plan{min-height:clamp(460px,66vh,720px);padding:clamp(18px,2.4vw,36px);border-radius:calc(var(--radius) + 8px);background:rgba(255,255,255,.86);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.plan__bar{height:calc(var(--h) * clamp(230px,40vh,440px));border-radius:16px 16px 6px 6px}
.plan__n{font-size:clamp(2.3rem,4.6vw,4.4rem)}
.plan__u{font-size:.92rem}
.plan__y h3{font-size:clamp(1rem,1.25vw,1.22rem)}
.plan__y p{font-size:.93rem}
#plan .chip{font-size:.86rem;padding:8px 14px}

/* calculator: neat charts for the entered amount */
.calc__charts{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,2.4vw,32px)}
.calc__chart{margin:0;padding:clamp(16px,2vw,26px);border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.calc__chart figcaption{font-family:var(--f-display);font-weight:700;font-size:1rem;margin-bottom:12px}
.calc__donut-wrap{width:min(100%,250px);margin:0 auto}
.calc__donut,.calc__curve{display:block;width:100%;height:auto;overflow:visible}
.calc__donut .seg{fill:none;stroke-width:34;transition:stroke-dasharray 1.1s var(--ease),opacity .3s}
.calc__donut .ct{font-family:var(--f-display);font-weight:800;font-size:21px;fill:var(--ink);text-anchor:middle;direction:ltr}
.calc__donut .cs{font-size:12px;fill:var(--ink-3);text-anchor:middle}
.calc__legend{display:grid;gap:8px;margin-top:14px}
.calc__legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.86rem;color:var(--ink-2)}
.calc__legend i{width:12px;height:12px;border-radius:4px}
.calc__legend b{font-family:var(--f-display);direction:ltr;font-variant-numeric:tabular-nums;color:var(--ink)}
.calc__curve{font-family:var(--f-display)}
.calc__curve .gl{stroke:rgba(35,31,32,.08)}
.calc__curve .gt{fill:var(--ink-3);font-size:12px}
.calc__curve .inv{stroke:var(--ink);stroke-width:2;stroke-dasharray:6 6}
.calc__curve .cum{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.calc__curve .cum.draw{animation:trendDraw 1.4s var(--ease) forwards}
.calc__curve .fill{fill:url(#calcArea);opacity:0}
.calc__curve .fill.on{opacity:1;transition:opacity .9s var(--ease) .6s}
.calc__curve .bp{fill:#fff;stroke:var(--orange);stroke-width:4;opacity:0}
.calc__curve .bp.on{opacity:1;transition:opacity .4s 1.3s}
.calc__curve .lbl{font-size:13px;font-weight:700;fill:var(--ink)}
.calc__curve .lbl--o{fill:var(--orange-ink)}

/* monthly chart: real curve + readable explanations */
.step--chart{opacity:1;transform:none;border:1px solid rgba(246,241,234,.12);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.step--chart.on{border-color:rgba(238,103,36,.75);box-shadow:0 0 0 1px rgba(238,103,36,.35),0 30px 60px -30px rgba(238,103,36,.5)}
.barchart .trend{fill:none;stroke:#FFE0C9;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(238,103,36,.85))}
.barchart .trend.draw{animation:trendDraw 1.5s var(--ease) .4s forwards}
@keyframes trendDraw{to{stroke-dashoffset:0}}
.barchart .area{fill:url(#areaGrad);opacity:0}
.barchart .area.on{opacity:1;transition:opacity 1s var(--ease) .9s}
.barchart .tp{fill:#fff;stroke:var(--orange);stroke-width:3;opacity:0}
.barchart .tp.on{opacity:1;transition:opacity .45s var(--ease)}
.barchart .runner{fill:#fff;filter:drop-shadow(0 0 10px #EE6724)}

/* footer */
.footer{position:relative;overflow:hidden;padding-block:clamp(56px,9vh,100px) calc(120px + var(--safe-b));border-top:0;background:linear-gradient(180deg,#1f1a1b 0%,#141012 100%);color:var(--ivory)}
.footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--orange-deep),var(--orange),var(--orange-deep))}
.footer::after{content:"";position:absolute;width:60vmax;aspect-ratio:1;inset-inline-end:-20vmax;top:-30vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(238,103,36,.16),transparent);pointer-events:none}
.footer .wrap{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.footer__logo{width:clamp(140px,12vw,200px);height:auto}
.footer__about{margin-top:18px;max-width:44ch;color:rgba(246,241,234,.76);font-size:.96rem;line-height:1.9}
.footer__managed{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 18px;border-radius:999px;border:1px solid rgba(238,103,36,.5);background:rgba(238,103,36,.1);color:#FFD9BF;font-weight:600;font-size:.9rem}
.footer__managed-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(238,103,36,.22)}
.footer__col h3{font-family:var(--f-display);font-size:1.02rem;color:#fff;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(246,241,234,.12)}
.footer__branches{display:grid;gap:16px}
.footer__branches li{display:grid;gap:4px;font-size:.9rem;color:rgba(246,241,234,.72)}
.footer__branches b{color:#fff;font-weight:600}
.footer__branches a{width:max-content;color:var(--orange-soft);font-size:.84rem;text-decoration:none;border-bottom:1px solid rgba(247,180,143,.4)}
.footer__branches a:hover{color:#fff;border-color:#fff}
.footer__hours{margin-top:16px;font-size:.84rem;color:rgba(246,241,234,.6)}
.footer__col>p{color:rgba(246,241,234,.74);font-size:.92rem;line-height:1.85}
.footer__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 14px 30px -12px rgba(238,103,36,.85);transition:transform .2s var(--ease),background .25s}
.footer__cta:hover{transform:translateY(-2px);background:#ff7a3a}
.footer .linkbtn{display:block;margin-top:16px;color:rgba(246,241,234,.62)}
.footer__bottom{display:grid;gap:8px;margin-top:clamp(40px,7vh,72px);padding-top:22px;border-top:1px solid rgba(246,241,234,.1)}
.footer__src{font-size:.78rem;color:rgba(246,241,234,.5);max-width:110ch}
.footer__copy{font-size:.82rem;color:rgba(246,241,234,.66)}

/* sound: one discreet mute control, bottom corner (never in the top bar) */
.mute{position:fixed;z-index:70;right:max(18px,var(--safe-r));bottom:calc(28px + var(--safe-b));width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(35,31,32,.12);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:.72;cursor:pointer;box-shadow:0 8px 20px -10px rgba(35,31,32,.45);transition:opacity .25s,transform .2s var(--ease),background .3s,border-color .3s}
.mute:hover,.mute:focus-visible{opacity:1;transform:scale(1.06)}
.mute svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mute svg .mute__spk{fill:var(--ink)}
.mute__x{opacity:0}
.mute.is-off .mute__w1,.mute.is-off .mute__w2{opacity:0}
.mute.is-off .mute__x{opacity:1}
.mute.is-live .mute__w1{animation:muteWave 1.3s ease-in-out infinite alternate}
.mute.is-live .mute__w2{animation:muteWave 1.3s ease-in-out .35s infinite alternate}
@keyframes muteWave{from{opacity:.2}to{opacity:1}}
body[data-mood="dark"] .mute{background:rgba(30,25,27,.72);border-color:rgba(246,241,234,.16)}
body[data-mood="dark"] .mute svg{stroke:var(--ivory)}
body[data-mood="dark"] .mute svg .mute__spk{fill:var(--ivory)}
html[data-boot="intro"] body:not([data-intro="done"]) .mute{opacity:0;visibility:hidden}
html[data-boot="intro"] body:not([data-intro="done"]) .topbar__brand{opacity:0;visibility:hidden}
.topbar__brand{transition:opacity .8s var(--ease),visibility 0s}

/* AI badge above the assistant button */
.agent__badge{position:absolute;top:-15px;left:50%;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#F07A3F,#B9470F);color:#fff;font-family:var(--f-display);font-weight:800;font-size:.74rem;letter-spacing:.08em;line-height:1.25;direction:ltr;white-space:nowrap;box-shadow:0 6px 14px -4px rgba(238,103,36,.85),0 0 0 2px #fff;pointer-events:none;transform:translateX(-50%);animation:aiBadge 2.8s var(--ease-in-out) infinite}
@keyframes aiBadge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}

@media (max-width:900px){
  .branches{grid-template-columns:1fr}
  .branch-mini{display:none}
  .calc__charts{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .dish-orbit{--R:calc(min(84vw,560px) * .4)}
}
@media (max-width:620px){
  .mute{right:max(12px,var(--safe-r));bottom:calc(20px + var(--safe-b));width:38px;height:38px}
  .facade__stage{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .facade__stage{transform:none}
  .showcase__plate,.dish-orbit__main,.dish-orbit__sat,.dish-orbit::before{animation:none}
  .barchart .trend,.calc__curve .cum{stroke-dashoffset:0}
}

/* branches: status counters + operating formats */
.br-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(22px,3.5vh,40px)}
.br-stat{display:flex;align-items:center;gap:16px;padding:clamp(16px,1.8vw,24px);border-radius:var(--radius);background:rgba(255,255,255,.94);box-shadow:var(--shadow);border:1px solid rgba(35,31,32,.06)}
.br-stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4.2vw,3.8rem);line-height:1;color:var(--orange);direction:ltr}
.br-stat span{font-weight:600;color:var(--ink-2);line-height:1.5}
.br-stat--uc b{color:var(--ink)}
.br-stat--total{background:linear-gradient(150deg,#2a2224,#141012);border-color:transparent}
.br-stat--total b{color:#fff}
.br-stat--total span{color:rgba(246,241,234,.82)}
.br-formats__label{margin-top:clamp(30px,5vh,56px)}
.br-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.br-format{position:relative;overflow:hidden;padding:clamp(20px,2.2vw,30px);border-radius:var(--radius);background:rgba(255,255,255,.95);box-shadow:var(--shadow);border:1px solid rgba(35,31,32,.06);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.br-format:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(238,103,36,.5)}
.br-format__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:rgba(238,103,36,.1);margin-bottom:14px}
.br-format__ic svg{width:34px;height:34px;fill:none;stroke:var(--orange-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.br-format .chip{position:absolute;top:clamp(20px,2.2vw,30px);inset-inline-end:clamp(20px,2.2vw,30px)}
.br-format h3{font-size:clamp(1.05rem,1.3vw,1.25rem);margin-bottom:.4rem}
.br-format p{color:var(--ink-2);font-size:.94rem}
.br-format--uc{background:linear-gradient(160deg,#fff,#FFF6EF)}
.br-format__build{position:absolute;inset-inline:0;bottom:0;height:8px;background:rgba(35,31,32,.06);overflow:hidden}
.br-format__build i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--orange) 0 12px,var(--ink) 12px 24px);background-size:34px 100%;animation:buildStripe 1.2s linear infinite;opacity:.85}
@keyframes buildStripe{to{background-position:34px 0}}
.footer__uc{margin-top:14px;font-size:.88rem;font-weight:600;color:var(--orange-soft)}
@media (max-width:900px){.br-stats,.br-formats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.br-format__build i{animation:none}}

/* ==========================================================================
   OWNER REVISION 3 (2026-11-10 evening)
   ========================================================================== */
/* soft animated backdrop behind every light section */
.scene{isolation:isolate}
.scene:not(.scene--dark):not(.scene--why)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 46% at 18% 28%,rgba(238,103,36,.11),transparent 70%),radial-gradient(34% 42% at 84% 74%,rgba(238,103,36,.08),transparent 70%),radial-gradient(30% 36% at 60% 10%,rgba(255,255,255,.7),transparent 70%);background-size:170% 170%;animation:sceneDrift 20s ease-in-out infinite alternate}
@keyframes sceneDrift{from{background-position:0% 0%}to{background-position:100% 100%}}

/* language switch: slides away on scroll-down, comes back on scroll-up */
.topbar__actions{transition:opacity .35s var(--ease),transform .45s var(--ease)}
body.is-down .topbar__actions{opacity:0;transform:translateY(-170%);pointer-events:none}

/* summary dish (owner's Telegram photo, turning slowly) */
.summary__dish{width:min(100%,460px);justify-self:center}
.dish-stage img.dish-turn{animation:plateSpin 90s linear infinite}

/* numbers never clip inside their cards */
.kpi{overflow:visible}
.kpi__v{font-size:clamp(1.5rem,13cqi,4.2rem);white-space:nowrap;max-width:100%;direction:ltr}
.kpi--big .kpi__v{font-size:clamp(1.7rem,13.5cqi,5rem)}
html[dir="rtl"] .kpi__v{align-self:flex-end}

/* chart tabs (narrow screens) */
.chart-tabs{display:none;gap:8px;margin-bottom:14px}
.chart-tabs button{flex:1;min-height:44px;padding:8px 10px;border-radius:999px;border:1px solid rgba(246,241,234,.22);background:transparent;color:rgba(246,241,234,.82);font-family:var(--f-display);font-weight:700;font-size:.9rem;cursor:pointer;transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.chart-tabs button[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 12px 26px -12px rgba(238,103,36,.9)}

/* branches: the 3D tour is shown whole, large and flat (nothing cropped or tilted) */
.branches{grid-template-columns:1fr;gap:clamp(18px,3vh,32px)}
.facade{width:100%;max-width:1120px;margin-inline:auto;perspective:none}
.facade__stage{transform:none}
.facade__card{aspect-ratio:16/9;width:100%}
.facade__video{object-fit:contain}
.facade--port .facade__card{aspect-ratio:9/16;width:min(100%,calc(82vh * 9 / 16))}
.branch-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-inline:auto;width:100%}

/* operating system: professional pentagon */
.system__orbit::before{content:"";position:absolute;inset:-9%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.97) 66%,rgba(255,255,255,.8) 82%,rgba(255,255,255,0))}
.system__svg{z-index:1}
.system__nodes{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
.system__nodes li{opacity:1}
.system__core{z-index:2}
.system__penta{fill:rgba(238,103,36,.06);stroke:var(--orange);stroke-width:1.8;stroke-linejoin:round}
.system__spark{fill:var(--orange);filter:drop-shadow(0 0 8px rgba(238,103,36,.95))}
.system__links line{stroke-dasharray:4 7;opacity:.3;animation:dashMove 1.4s linear infinite}
.system__links line.on{stroke-dasharray:none;stroke-width:3;opacity:1;animation:none}
@keyframes dashMove{to{stroke-dashoffset:-22}}
.system__nodes li{display:grid;justify-items:center;gap:6px;min-width:96px;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 34px -20px rgba(35,31,32,.5);font-family:var(--f-display);font-weight:700;font-size:.9rem;line-height:1.3;transition:background .4s var(--ease),color .4s,transform .45s var(--ease),box-shadow .4s}
.system__nodes li svg{width:26px;height:26px;fill:none;stroke:var(--orange-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.system__nodes li.on{background:linear-gradient(140deg,#F07A3F,#B9470F);color:#fff;border-color:transparent;transform:translate(-50%,-50%) scale(1.14);box-shadow:0 20px 44px -14px rgba(238,103,36,.85)}
.system__nodes li.on svg{stroke:#fff}

/* CTA: two arrows pointing at the button */
.cta__action{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,26px);margin-top:20px}
.cta__action .cta__btn{margin-top:0}
.cta__arrow{flex:none;width:clamp(54px,9vw,140px)}
.cta__arrow svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--orange);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;animation:arrowNudge 1.3s var(--ease-in-out) infinite}
.cta__arrow-line{stroke-dasharray:7 11;opacity:.55;animation:arrowDash .9s linear infinite}
.cta__arrow-c{opacity:.14;animation:arrowChev 1.3s var(--ease-in-out) infinite}
.cta__arrow-c.c2{animation-delay:.16s}
.cta__arrow-c.c3{animation-delay:.32s}
@keyframes arrowChev{0%,100%{opacity:.14}45%{opacity:1}}
@keyframes arrowDash{to{stroke-dashoffset:-18}}
@keyframes arrowNudge{50%{transform:translateX(9px)}}
html[dir="rtl"] .cta__arrow--a,html[dir="ltr"] .cta__arrow--b{transform:scaleX(-1)}

/* calculator charts: no empty areas */
.calc__charts{align-items:start}
.calc__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.calc__facts li{padding:12px 14px;border-radius:14px;background:var(--ivory);display:grid;gap:4px}
.calc__facts span{font-size:.78rem;color:var(--ink-3)}
.calc__facts b{font-family:var(--f-display);font-size:1.05rem;color:var(--ink)}
.calc__facts li:nth-child(2) b{color:var(--orange-ink)}


/* footer: clean logo, more life */
.footer__logo{width:clamp(170px,14vw,230px);filter:drop-shadow(0 6px 24px rgba(238,103,36,.35));animation:footGlow 4s var(--ease-in-out) infinite alternate}
@keyframes footGlow{from{filter:drop-shadow(0 4px 14px rgba(238,103,36,.2))}to{filter:drop-shadow(0 8px 30px rgba(238,103,36,.55))}}
.footer::before{height:3px;background:linear-gradient(90deg,var(--orange-deep),var(--orange),#FFD3A8,var(--orange),var(--orange-deep));background-size:220% 100%;animation:footLine 5s linear infinite}
@keyframes footLine{to{background-position:-220% 0}}
.footer::after{animation:footOrb 14s ease-in-out infinite alternate}
@keyframes footOrb{from{transform:translate(0,0) scale(1)}to{transform:translate(-18vw,10vh) scale(1.25)}}
.footer__tagline{margin-top:14px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.35rem);background:linear-gradient(100deg,#fff 30%,var(--orange) 50%,#fff 70%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:footShine 6s linear infinite}
@keyframes footShine{to{background-position:-250% 0}}
.footer__bars{position:absolute;inset:auto 0 0 0;height:90px;display:flex;align-items:flex-end;gap:6px;padding-inline:6vw;opacity:.16;pointer-events:none}
.footer__bars i{flex:1;background:linear-gradient(180deg,var(--orange),transparent);border-radius:4px 4px 0 0;transform-origin:bottom;animation:footBar 3.6s var(--ease-in-out) infinite alternate}
@keyframes footBar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.footer__managed-dot{animation:ping2 2s var(--ease) infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 rgba(238,103,36,.6)}100%{box-shadow:0 0 0 12px rgba(238,103,36,0)}}
.footer__cta{position:relative;overflow:hidden}
.footer__cta::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%) -160% 0/250% 100% no-repeat;animation:sheen 3.6s var(--ease-in-out) infinite}

@media (max-width:900px){
  .branch-list{grid-template-columns:1fr}
  .calc__facts{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cta__action{gap:6px}
  .cta__arrow{width:34px}
  .cta__action .cta__btn{flex:1;width:auto;min-width:0;padding-inline:16px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .scene::before,.cta__arrow svg,.cta__arrow-c,.cta__arrow-line,.footer__bars i,.dish-stage img.dish-turn{animation:none}
  .cta__arrow-c{opacity:1}
}

/* ==========================================================================
   PHONES (revision 5): nothing ever sits on top of text
   ========================================================================== */
@media (max-width:900px){
  /* operating system: the pentagon scrolls with the page instead of staying pinned over the text */
  .scene--system .system .system__visual{position:relative;top:auto;height:auto;padding-block:10px 24px;background:none;z-index:auto}
  .scene--system .system .system__steps{gap:18px;padding-block:8px 0}
  .scene--system .system__steps .step{opacity:1;transform:none}
  /* the moving 3D background stays behind a calm veil so every line reads clearly */
  html .atmos .atmos__veil,html[dir="ltr"] .atmos .atmos__veil{background:rgba(var(--v),.86)}
  /* fixed logo + language switch step aside while scrolling down, return on scroll-up */
  .topbar__brand{transition:opacity .35s var(--ease),transform .45s var(--ease)}
  body.is-down .topbar .topbar__brand{opacity:0;transform:translateY(-170%);pointer-events:none}
  .scene--hero .scroll-cue{display:none}
  /* coming back up: logo + language return on a frosted bar, so text slides under it instead of mixing with it */
  .topbar{transition:background .35s var(--ease),box-shadow .35s var(--ease),-webkit-backdrop-filter .35s,backdrop-filter .35s}
  body.is-scrolled:not(.is-down) .topbar{background:rgba(246,241,234,.94);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 10px 28px -18px rgba(35,31,32,.55)}
  body[data-mood="dark"].is-scrolled:not(.is-down) .topbar{background:rgba(20,16,18,.92)}
  body.is-scrolled:not(.is-down) .topbar .pill--lang{background:transparent}
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc>*{min-width:0}
  .calc .chips{flex-wrap:wrap}
  .calc .results{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .calc .field__box{min-width:0}
  .calc .field__box input{min-width:0;width:100%}
  /* decorations never wider than the screen */
  .dish-stage__halo{inset:0}
  .why__q{font-size:clamp(2.6rem,12vw,5rem)}
  .scene{overflow-x:clip}
  /* comfortable reading sizes */
  .lead{font-size:1.02rem;line-height:1.85}
  .card p,.step p,.trio__item p{line-height:1.85}
  .head-row{flex-wrap:wrap;row-gap:8px}
  .chip{white-space:normal}
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .segments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charts{grid-template-columns:1fr}
  .chart-tabs{display:flex}
  .charts__sticky{position:static}
  .chart-card{background:#2a2426}
  .charts__steps{display:block;padding:0;margin-top:16px}
  .charts__steps .step--chart{display:none;background:rgba(29,24,26,.97)}
  .charts__steps .step--chart.on{display:block;animation:capIn .5s var(--ease) both}
}
@media (max-width:900px){
  .hero,.grid-split,.product,.system,.calc{grid-template-columns:1fr}
  .hero__dish{order:-1;width:min(78vw,var(--dish-max),420px)}
  .hero__title{max-width:none}
  .scene--hero{justify-content:flex-start;padding-top:calc(92px + env(safe-area-inset-top,0px))}
  .timeline{grid-template-columns:1fr 1fr;row-gap:44px}
  .timeline__line{display:none}
  .timeline__node{padding-top:34px}
  .timeline__dot{top:0}
  .cards--3{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .kpis--3{grid-template-columns:1fr}
  .system__visual{position:sticky;top:64px;height:auto;padding-block:8px;z-index:2;background:linear-gradient(var(--ivory) 80%,rgba(246,241,234,0))}
  .system__orbit{width:min(78vw,300px)}
  .system__nodes li{font-size:.72rem;padding:6px 10px}
  .system__steps{gap:24vh;padding-block:4vh 18vh}
  .channel{grid-template-columns:auto 1fr;}
  .channel p{grid-column:1 / -1}
  .plan{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .plan__y p{display:none}
  .plan__y h3{font-size:.72rem}
  .plan__u{font-size:.7rem}
  .photo-card{max-width:560px}
}
@media (max-width:900px){
  .menu__grid--plates,.menu__grid--sweets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lightbox__fig{padding:64px 16px 120px}
  .lightbox__nav{top:auto;bottom:calc(18px + var(--safe-b));transform:none}
}
@media (max-width:620px){
  :root{--radius:18px}
  .menu__grid--sides .menu__item{flex-basis:calc(50% - 8px)}
  .menu__grid--sauces .menu__item{flex-basis:calc((100% - 3 * 12px) / 4)}
  .menu__grid--sauces .menu__cap{font-size:.7rem}
  .menu__cap{font-size:.78rem}
  .cards--2,.cards--4,.segments{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .kpis--4{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .result--hero{grid-column:auto}
  .topbar{padding-inline:12px}
  .topbar__brand{width:70px}
  .pill{padding:8px 12px;font-size:.76rem}
  .agent__panel{left:0;bottom:0;width:100vw;height:100dvh;border-radius:0;clip-path:circle(0 at 46px calc(100% - 46px))}
  .agent[data-state="open"] .agent__panel{clip-path:circle(160% at 46px calc(100% - 46px))}
  .agent__head{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .agent__fab{left:max(14px,var(--safe-l));bottom:calc(16px + var(--safe-b) + var(--lift,0px));width:56px}
  .intro__kpis{flex-direction:column;gap:18px}
  .cta__btn{width:100%;justify-content:center}
  .scene{padding-block:clamp(72px,11vh,120px)}
  .scene--why{min-height:170vh}
}
@media (min-width:2200px){
  .cards--4{gap:32px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .js .reveal,.js .split .w{transform:none!important;filter:none!important}
  .why__q{transform:none}
}
body.reduced-motion .dish-stage__halo,body.reduced-motion .system__ring,body.reduced-motion .cta__halo,body.reduced-motion .cta__btn::before,body.reduced-motion .agent__pulse{animation:none}

/* large tablets in portrait (iPad Pro 12.9": 1024 wide): the big "why" question stays inside the
   screen and clear of the line under it while it grows on scroll */
@media (min-width:901px) and (max-width:1366px) and (orientation:portrait){
  .why__q{font-size:clamp(3.2rem,10vw,9rem)}
  .why__sub{margin-top:2.6rem}
}

/* formal opening (2026-11-12): white page, one fine line, the wordmark, nothing playful */
.intro{background:#FFFFFF}
.intro__stage{background:radial-gradient(60% 50% at 50% 48%,#FBF6EF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#FAF6F0 100%)}
.intro__line{position:absolute;left:50%;top:50%;width:min(56vw,620px);height:1.5px;background:linear-gradient(90deg,rgba(238,103,36,0),#EE6724 30%,#EE6724 70%,rgba(238,103,36,0));transform:translate(-50%,-50%) scaleX(0);transform-origin:center}
.intro .intro__logo{padding:0 var(--gutter);gap:16px;opacity:1}   /* the container stays visible; its parts fade in one by one */
.intro .intro__logo-wrap{width:min(56vw,24rem);opacity:0;filter:none}
.intro .intro__sub{opacity:0;font-size:clamp(1.15rem,2.1vw,1.7rem);color:#2A2224}
.intro .intro__orn{width:min(60vw,360px)}
.intro .intro__orn .o-line{stroke:#EBA36E}
.intro .intro__orn .o-dia{stroke:#EE6724}
.intro .intro__orn .o-dia--s{fill:#EE6724}
.intro .intro__country{color:rgba(42,34,36,.62);font-weight:700}
.intro .intro__country::before,.intro .intro__country::after{background:linear-gradient(90deg,transparent,#EBA36E)}
.intro .intro__country::after{background:linear-gradient(270deg,transparent,#EBA36E)}

/* GM 2026-11-12: a shorter page — same content, less empty scroll */
.scene{padding-block:clamp(48px,7.5vh,100px)}
.scene--why{min-height:150vh}
.system__steps{gap:14vh;padding-block:6vh 16vh}
@media (max-width:900px){
  .scene{padding-block:clamp(48px,7vh,84px)}
  .scene--why{min-height:125vh}
  .branch-mini{display:none}            /* decorative mini map: desktop only */
}

/* 2026-11-12: Arabic headings get room for the marks above the letters (ّ ً ُ) — wrapped lines never touch */
:root{--lh-display:1.58}
html[lang="en"]{--lh-display:1.12}
.split .w{padding-block:.04em}

/* 2026-11-12: section labels — larger, on a soft badge with the Tamliha mark (2D, flat) */
.eyebrow{font-size:clamp(.92rem,1.1vw,1.05rem);font-weight:700;gap:.65em;padding:.5em 1.15em .5em 1em;border-radius:999px;background:linear-gradient(180deg,#FFFFFF,#FBF4EC);border:1px solid rgba(238,103,36,.28);box-shadow:0 6px 18px -10px rgba(185,71,15,.35),inset 0 1px 0 #fff;color:var(--orange-ink);line-height:1.4;margin-bottom:1.15rem}
.eyebrow::before{width:3.1em;height:1.05em;background:url(../assets/brand/tamliha-wordmark-mark.png) center/contain no-repeat;border-radius:0;flex:none}
.eyebrow::after{content:"";width:5px;height:5px;transform:rotate(45deg);background:#6FB2DE;flex:none;order:-1;margin-inline-end:-.1em;display:none}
html[lang="en"] .eyebrow{font-size:.82rem;letter-spacing:.12em}
.scene--dark .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(247,180,143,.35);color:var(--orange-soft);box-shadow:none}

/* 2026-11-12: expansion map in a realistic road-map style (drawn locally in charts.js) */
.mapfig{background:#fff;padding:0}
.mapfig__svg{display:block;overflow:hidden;border-radius:inherit}
.mapfig .m-land{fill:#F1EEE7}
.mapfig .m-land2{fill:#F1EEE7;stroke:#C9C3B8;stroke-width:1}
.mapfig .m-water{fill:#AAD3F5}
.mapfig .m-ksa{fill:#FBF9F5;opacity:1}
.mapfig .m-border{fill:none;stroke:#9C968C;stroke-width:1.8;stroke-dasharray:7 5;stroke-linejoin:round;stroke-dashoffset:0}
.mapfig .m-wlabel{font-family:var(--f-body);font-size:31px;font-style:italic;font-weight:600;fill:#4F84B6;letter-spacing:.04em}
.mapfig .m-country{font-family:var(--f-body);font-size:26px;font-weight:600;fill:#9A948A;letter-spacing:.08em}
.mapfig .m-road-c{fill:none;stroke:#E2B755;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.mapfig .m-road{fill:none;stroke:#FCE38A;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mapfig .m-place circle{fill:#fff;stroke:#7D776E;stroke-width:2.5}
.mapfig .m-plabel{font-family:var(--f-body);font-size:25px;font-weight:600;fill:#5F5A54;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.mapfig .route{stroke:var(--orange);stroke-width:4.5;opacity:.85;transition-delay:calc(1.2s + var(--i,0) * .35s)}
.mapfig .pin-body{fill:#EA4335;stroke:#B31412;stroke-width:1.5}
.mapfig .pin-dot{fill:#7B0D0B}
.mapfig .city--launch .pin-body{fill:var(--orange);stroke:#B9470F}
.mapfig .city--launch .pin-dot{fill:#fff}
.mapfig .pin-shadow{fill:rgba(0,0,0,.22)}
.mapfig .pin{transition:transform .5s var(--ease)}
.mapfig .city .m-clabel{font-family:var(--f-display);font-size:31px;font-weight:800;fill:#202124;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.mapfig .city .m-clabel.tag{font-size:23px;font-weight:700;fill:var(--orange-ink)}
.mapfig .city.on .pin-body{fill:#C5221F}
.mapfig .city--launch.on .pin-body{fill:#D2541A}
.mapfig .m-scale path{fill:none;stroke:#5F5A54;stroke-width:2.5}
.mapfig .m-scale-t{font-family:var(--f-body);font-size:22px;font-weight:600;fill:#5F5A54}

/* 2026-11-12: section headings on a soft panel — white→beige, light-blue Sadu lattice, the mark as a watermark */
.sec-head{position:relative;isolation:isolate;overflow:hidden;padding:clamp(16px,2vw,28px) clamp(18px,2.6vw,40px);margin-bottom:clamp(16px,2vw,26px);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(250,242,233,.95));border:1px solid rgba(238,103,36,.16);box-shadow:0 26px 52px -38px rgba(120,58,26,.42)}
.sec-head::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%238EC3E6' stroke-width='1' opacity='.55'%3E%3Cpath d='M28 4 52 28 28 52 4 28z'/%3E%3Cpath d='M28 18 38 28 28 38 18 28z'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 56px;-webkit-mask-image:radial-gradient(120% 140% at 0% 100%,#000 0%,transparent 62%);mask-image:radial-gradient(120% 140% at 0% 100%,#000 0%,transparent 62%)}
html[dir="ltr"] .sec-head::before{-webkit-mask-image:radial-gradient(120% 140% at 100% 100%,#000 0%,transparent 62%);mask-image:radial-gradient(120% 140% at 100% 100%,#000 0%,transparent 62%)}
.sec-head::after{content:"";position:absolute;z-index:-1;inset-inline-end:clamp(14px,2.4vw,40px);bottom:clamp(-18px,-1.4vw,-8px);width:min(30%,260px);aspect-ratio:3.03;background:url(../assets/brand/tamliha-wordmark-mark.png) center/contain no-repeat;opacity:.07}
.sec-head>:last-child{margin-bottom:0}
.sec-head .lead{max-width:62ch}
.scene--dark .sec-head{background:rgba(255,255,255,.05);border-color:rgba(247,180,143,.22);box-shadow:none}
.scene--dark .sec-head::after{opacity:.12}
@media (max-width:900px){.sec-head{border-radius:22px}.sec-head::after{width:42%}}

/* «لماذا تمليحه؟» typed by scroll: each word clipped in the reading direction, caret at the edge */
.why__q{background:none;-webkit-text-fill-color:currentColor;color:var(--ivory)}
.why__q .tw{--l:clamp(0,calc((var(--p,0) - var(--a)) / (var(--b) - var(--a))),1);position:relative;display:inline-block;background:linear-gradient(100deg,#F6F1EA 25%,#F7B48F 55%,#F6F1EA 85%) 0 0/220% 100%;background-position:calc(var(--p,0) * 160%) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;clip-path:inset(-20% 0 -20% calc((1 - var(--l)) * 100%))}
html[dir="ltr"] .why__q .tw{clip-path:inset(-20% calc((1 - var(--l)) * 100%) -20% 0)}
.why__q .tw::after{content:"";position:absolute;top:12%;bottom:22%;width:.06em;border-radius:.03em;background:#F07A3F;box-shadow:0 0 18px rgba(238,103,36,.8);left:calc((1 - var(--l)) * 100%);opacity:calc(min(var(--l) * 40, 1) * min((1 - var(--l)) * 40, 1))}
html[dir="ltr"] .why__q .tw::after{left:auto;right:calc((1 - var(--l)) * 100%)}
.why__q{transform:scale(calc(.94 + var(--p,0) * .1));opacity:1}
.why__sub{opacity:clamp(0,calc((var(--p,0) - .6) * 4),1);transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .6) * 4),1)) * 20px))}
.reduced-motion .why__q .tw{--l:1}

/* timeline: each milestone appears with its dot as the line reaches it */
.timeline .timeline__node{--k:clamp(0,calc((var(--p,0) * 4.4 - var(--n,0)) * 2.2),1)}
.js .timeline .timeline__node.reveal,.js .timeline .timeline__node.reveal.in{opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 28px));filter:none;transition:none}
.timeline .timeline__dot{transform:scale(calc(.4 + var(--k) * .6))}
.reduced-motion .timeline .timeline__node{--k:1}

/* operating system: the five pillars, a vertical index with Najdi arches and a filling rail */
.pillars{position:relative;width:min(100%,440px);--k:0}
.pillars__list{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:1}
.pillars__list li{display:grid;grid-template-columns:44px 58px 1fr;align-items:center;gap:14px;padding:12px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 16px 34px -24px rgba(35,31,32,.45);font-family:var(--f-display);font-weight:800;font-size:1.08rem;color:var(--ink);transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.pillars__n{font-family:var(--f-display);font-weight:800;font-size:.95rem;color:rgba(169,66,14,.55);direction:ltr;text-align:center}
.pillars__arch{width:52px;height:60px;display:grid;place-items:center;background:#FBF4EC;border:1.5px solid rgba(238,103,36,.45);border-radius:26px 26px 10px 10px;transition:background .45s,border-color .45s}
.pillars__arch svg{width:26px;height:26px;fill:none;stroke:var(--orange-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.pillars__list li.done .pillars__arch{background:#FFF1E6;border-color:var(--orange)}
.pillars__list li.on{background:linear-gradient(135deg,#F07A3F,#B9470F);color:#fff;border-color:transparent;transform:scale(1.03);box-shadow:0 22px 46px -18px rgba(238,103,36,.7)}
.pillars__list li.on .pillars__n{color:rgba(255,255,255,.8)}
.pillars__list li.on .pillars__arch{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7)}
.pillars__list li.on .pillars__arch svg{stroke:#fff}
.pillars__rail{position:absolute;z-index:0;inset-block:36px;inset-inline-start:calc(18px + 44px + 14px + 26px - 1.5px);width:3px;border-radius:3px;background:rgba(238,103,36,.16)}
.pillars__rail i{position:absolute;inset-inline:0;top:0;height:calc(var(--k) * 100%);border-radius:inherit;background:linear-gradient(var(--orange),#B9470F);transition:height .6s var(--ease)}
@media (max-width:900px){
  .pillars{width:100%}
  .pillars__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .pillars__list li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:10px 4px;border-radius:16px;font-size:.72rem;line-height:1.35}
  .pillars__n,.pillars__rail{display:none}
  .pillars__arch{width:40px;height:46px;border-radius:20px 20px 8px 8px}
  .pillars__arch svg{width:20px;height:20px}
  .pillars__list li.on{transform:none}
}

/* 2026-11-13: real map — NASA satellite relief, real borders, real roads, routes on the real roads */
.mapfig{background:#0f2f4d}
.mapfig .m-img{filter:saturate(.92) contrast(1.04)}
.mapfig .m-veil{fill:rgba(18,26,34,.32)}
.mapfig .m-borders{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.4;stroke-dasharray:6 4;stroke-linejoin:round}
.mapfig .m-ksa{fill:rgba(255,248,236,.06);opacity:1}
.mapfig .m-border{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:1;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.45))}
.mapfig .m-road-minor{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.1;stroke-linejoin:round}
.mapfig .m-road-c{fill:none;stroke:rgba(60,40,10,.55);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.mapfig .m-road{fill:none;stroke:#FCE38A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mapfig .route-glow{fill:none;stroke:rgba(238,103,36,.35);stroke-width:13;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 1s var(--ease);transition-delay:calc(1.6s + var(--i,0) * .35s)}
.mapfig.in .route-glow{opacity:1}
.mapfig .route{stroke:#FF7A2F;stroke-width:5;opacity:1;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.mapfig .m-place circle{fill:#fff;stroke:#2B2B2B;stroke-width:2}
.mapfig .m-plabel{fill:#fff;stroke:rgba(20,20,20,.85);stroke-width:5px;font-weight:600}
.mapfig .city .m-clabel{fill:#fff;stroke:#1B1B1B;stroke-width:7px}
.mapfig .city .m-clabel.tag{fill:#FFB27A}
.mapfig .m-country{fill:rgba(255,255,255,.88);paint-order:stroke;stroke:rgba(20,20,20,.55);stroke-width:4px;stroke-linejoin:round;font-size:24px}
.mapfig .m-wlabel{fill:#CFE6FF;paint-order:stroke;stroke:rgba(8,32,60,.6);stroke-width:4px;stroke-linejoin:round}
.mapfig .m-scale path{stroke:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.8))}
.mapfig .m-scale-t{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:4px}
.mapfig .m-credit{font-family:var(--f-body);font-size:13px;fill:rgba(255,255,255,.75);paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:3px}

/* 2026-11-13: sound on/off beside the language switch */
.topbar__actions{display:flex;align-items:center;gap:8px}
.pill--sound{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;cursor:pointer}
.pill--sound svg{width:21px;height:21px;fill:none;stroke:var(--orange-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pill--sound .spk{fill:var(--orange);stroke:var(--orange-ink)}
.pill--sound .wv{transition:opacity .3s var(--ease)}
.pill--sound .w2{animation:sndWave 2.4s var(--ease-in-out) infinite}
.pill--sound .x{opacity:0;stroke:var(--ink-2);transition:opacity .3s var(--ease)}
.pill--sound.is-off .wv{opacity:0;animation:none}
.pill--sound.is-off .x{opacity:1}
.pill--sound.is-off .spk{fill:var(--ink-3);stroke:var(--ink-3)}
@keyframes sndWave{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pill--sound .w2{animation:none}}


/* 2026-11-13: comparison table on phones — every criterion becomes one card showing all three
   columns (no sideways scrolling, nothing hidden), Tamliha's line highlighted */
@media (max-width:700px){
  #competition .table-wrap{overflow:visible;background:transparent;box-shadow:none}
  #competition .matrix{min-width:0;display:block}
  #competition .matrix thead{display:none}
  #competition .matrix tbody{display:grid;gap:12px}
  #competition .matrix tr{display:block;padding:14px 14px 10px;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:var(--shadow);border:1px solid var(--line)}
  #competition .matrix tbody th{display:block;padding:0 4px 10px;border:0;font-family:var(--f-display);font-size:1.02rem;font-weight:700;color:var(--ink)}
  #competition .matrix td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 10px;border:0;border-top:1px solid var(--line);font-size:.9rem;background:transparent}
  #competition .matrix td::before{content:attr(data-label);flex:0 0 44%;font-size:.8rem;font-weight:500;color:var(--ink-3)}
  #competition .matrix td.is-us{border:0;border-radius:12px;background:linear-gradient(90deg,rgba(238,103,36,.14),rgba(238,103,36,.06));color:var(--ink);font-weight:700}
  #competition .matrix td.is-us::before{color:var(--orange-ink);font-weight:700}
  #competition .matrix td.is-us + td{border-top:0}
}

/* 2026-11-13: plan chart — numbers on one baseline, nicer figures, and a growth arrow drawn as you scroll */
.plan{position:relative}
.plan__y{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto auto;column-gap:8px;align-content:end;height:100%}
.plan__bar{grid-column:1/-1;align-self:end;box-shadow:0 2px 0 rgba(35,31,32,.08)}
.plan__n{grid-column:1;align-self:baseline;margin-top:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;background:linear-gradient(180deg,var(--ink) 30%,#6B4A3A);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan__y:last-child .plan__n{background:linear-gradient(180deg,#FF8A4C,var(--orange-deep));-webkit-background-clip:text;background-clip:text}
.plan__u{grid-column:2;align-self:baseline;justify-self:start;margin:0;padding:3px 10px;border-radius:999px;background:rgba(238,103,36,.1);color:var(--orange-ink);font-weight:600;white-space:nowrap}
.plan__y h3{grid-column:1/-1;margin-top:10px;white-space:nowrap}
.plan__y p{grid-column:1/-1;min-height:3.25em}
.plan__arrow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.plan__arrow .trail{fill:none;stroke:rgba(238,103,36,.14);stroke-width:12;stroke-linecap:round;opacity:clamp(0,calc((var(--p,0) - .5) * 4),1)}
.plan__arrow .line{fill:none;stroke:url(#planArrowG);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p,0) - .52) * 2.3),1));filter:drop-shadow(0 4px 8px rgba(194,65,12,.35))}
.plan__arrow .head{fill:#C2410C;offset-rotate:auto;offset-distance:calc(clamp(0,calc((var(--p,0) - .52) * 2.3),1) * 100%);opacity:clamp(0,calc((var(--p,0) - .52) * 20),1);filter:drop-shadow(0 3px 6px rgba(194,65,12,.45))}
.reduced-motion .plan__arrow .line{stroke-dashoffset:0}
.reduced-motion .plan__arrow .head{offset-distance:100%;opacity:1}
@media (max-width:700px){
  .plan__y{grid-template-columns:1fr;column-gap:0}
  .plan__n,.plan__u{grid-column:1}
  .plan__u{padding:2px 6px;justify-self:start}
  .plan__y h3{white-space:normal}
  .plan__y p{min-height:0}
  .plan__arrow .line{stroke-width:3}
  .plan__arrow .head{transform:scale(.7)}
}

/* 2026-11-13: closing card «امتلك فرع تمليحه» — more refined: logo on a badge over the top edge,
   soft Sadu lattice, orange corner frames, an ornament under the headline */
.scene--cta{padding-top:clamp(150px,20vh,240px)}
.cta{padding-top:clamp(84px,9vw,120px);border:1px solid rgba(238,103,36,.16);
  background:radial-gradient(120% 55% at 50% 0%,rgba(238,103,36,.11),transparent 62%),
    repeating-linear-gradient(45deg,rgba(194,65,12,.04) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(-45deg,rgba(194,65,12,.04) 0 1px,transparent 1px 24px),
    linear-gradient(180deg,#fff,#FFF9F3)}
.cta::before,.cta::after{content:"";position:absolute;width:clamp(38px,5vw,64px);height:clamp(38px,5vw,64px);border:2px solid var(--orange);opacity:.5;pointer-events:none}
.cta::before{top:18px;inset-inline-start:18px;border-width:2px 0 0 0;border-inline-start-width:2px;border-start-start-radius:18px}
.cta::after{bottom:18px;inset-inline-end:18px;border-width:0 0 2px 0;border-inline-end-width:2px;border-end-end-radius:18px}
.cta__logo{position:absolute;top:0;left:0;right:0;margin:calc(clamp(118px,13vw,150px) * -.36) auto 0;width:clamp(118px,13vw,150px);padding:14px 22px;box-sizing:content-box;border-radius:999px;background:#fff;border:1px solid rgba(238,103,36,.22);box-shadow:0 18px 40px -18px rgba(194,65,12,.55),0 2px 0 rgba(255,255,255,.9) inset}
.cta h2{background:linear-gradient(180deg,#231F20 40%,#5B3A2A);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.06em}
.cta__line{position:relative;padding-top:18px}
.cta__line::before{content:"";position:absolute;top:0;left:50%;width:96px;height:0;transform:translateX(-50%);border-top:1.5px solid rgba(238,103,36,.55)}
.cta__line::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;background:var(--orange);transform:translateX(-50%) rotate(45deg)}
@media (max-width:600px){ .cta::before,.cta::after{opacity:.35} .cta__logo{padding:10px 16px} }

/* ===================== 2026-11-14 (owner): franchise booking panel + launch offer =====================
   adapted to Tamliha's colours from the same panel used on the sister site */
/* ---------- launch offer in the hero, right in front of the visitor ---------- */
.offer { position: relative; overflow: hidden; margin-top: 1.6rem; width: min(100%, 34rem); padding: 1.15rem 1.2rem 1.25rem; border-radius: 1.5rem; text-align: center; color: #fff;
  background: radial-gradient(120% 140% at 50% 0%, #F28A4E 0%, var(--orange) 45%, var(--orange-deep) 100%); box-shadow: 0 26px 50px -24px rgba(150, 60, 15, .75), inset 0 0 0 1px rgba(255, 231, 211, .45); }
.offer::before { content: ''; position: absolute; inset: 6px; border-radius: 1.15rem; border: 1px solid rgba(255, 231, 211, .45); pointer-events: none; }
.offer__shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-120%); animation: offerShine 4.5s var(--ease) 1.5s infinite; pointer-events: none; }
@keyframes offerShine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.offer__badge { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .22rem .8rem; border-radius: 99px; background: rgba(255, 231, 211, .16); border: 1px solid rgba(255, 231, 211, .55); color: #FFE7D3; font: 700 .78rem/1.3 var(--f-display); }
.offer__badge i { width: .45rem; height: .45rem; border-radius: 50%; background: #FFE7D3; box-shadow: 0 0 10px #FFE7D3; animation: ping 2s infinite; }
.offer__text { margin: .7rem 0 0; font: 800 clamp(1.18rem, 2.4vw, 1.55rem)/1.5 var(--f-display); }
.offer__text strong { display: inline-block; color: #FFE7D3; text-shadow: 0 0 22px rgba(255, 231, 211, .45); }
.offer__btn { margin-top: .95rem; min-height: 3.1rem; padding: .7rem 1.6rem; gap: .55rem; border: 0; border-radius: 99px; background: #fff; color: var(--orange-ink); font: 800 1rem/1 var(--f-display); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55); animation: offerPulse 3s ease-in-out infinite; }
.offer__btn svg, .bk__go svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .offer__btn svg, html[dir="ltr"] .bk__go svg:not(.keep) { transform: scaleX(-1); }
@keyframes offerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.offer__btn:active { transform: scale(.97); }

/* ---------- booking panel ---------- */
html.bk-open { overflow: hidden; }
.bk { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(1rem, var(--safe-b)) 1rem; }
.bk__veil { position: absolute; inset: 0; background: rgba(20, 14, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; }
.bk__sheet { position: relative; width: min(100%, 31rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; border-radius: 1.8rem; background: #fff; box-shadow: 0 40px 90px -30px rgba(40, 20, 10, .6);
  opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .4s, transform .5s var(--ease); }
.bk.is-open .bk__veil { opacity: 1; }
.bk.is-open .bk__sheet { opacity: 1; transform: none; }
.bk__x { position: absolute; z-index: 5; top: .8rem; inset-inline-end: .8rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: inherit; cursor: pointer; }
.bk__x svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk[data-step="form"] .bk__x, .bk[data-step="check"] .bk__x, .bk[data-step="done"] .bk__x, .bk[data-step="sending"] .bk__x { background: var(--ivory); color: var(--ink-2); }
.bk__intro, .bk__form, .bk__check, .bk__sending, .bk__done { display: none; }
.bk[data-step="intro"] .bk__intro, .bk[data-step="form"] .bk__form, .bk[data-step="check"] .bk__check, .bk[data-step="sending"] .bk__sending, .bk[data-step="done"] .bk__done { display: flex; }
.bk[data-step="intro"] .bk__sheet { background: radial-gradient(120% 90% at 50% 0%, #4A2C1E 0%, #2A1A12 55%, #141012 100%); color: #fff; }
.bk[data-step="intro"] .bk__x { color: #fff; }
/* 1) the 5-second intro */
.bk__intro { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: min(30rem, calc(100dvh - 2rem)); padding: 3rem 1.6rem; text-align: center; overflow: hidden; }
.bk__aura { position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 160, 110, .2), rgba(238, 103, 36, .12) 45%, transparent 70%); animation: breathe 5s ease-in-out infinite; }
.bk__logo { position: relative; width: 9.5rem; height: auto; margin-bottom: 1.2rem; padding: .7rem 1rem; box-sizing: content-box; border-radius: 1.2rem; background: #fff; opacity: 0; }
.bk__line { position: relative; margin: 0; opacity: 0; font-family: var(--f-display); }
.bk__line--1 { font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 800; color: #fff; }
.bk__line--2 { font-size: clamp(1.25rem, 5vw, 1.7rem); font-weight: 700; color: #FFE7D3; }
.bk__line--3 { display: flex; flex-direction: column; gap: .15rem; margin-top: .6rem; font-size: clamp(1.05rem, 4vw, 1.3rem); color: rgba(255, 255, 255, .9); }
.bk__line--3 b { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 800; color: #fff; }
.bk__timer { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.bk__timer i { position: absolute; inset: 0; transform-origin: right; transform: scaleX(0); background: linear-gradient(90deg, var(--orange-soft), #FFD9BF); }
html[dir="ltr"] .bk__timer i { transform-origin: left; }
.bk.intro-run .bk__logo { animation: bkIn .8s var(--ease) .1s forwards; }
.bk.intro-run .bk__line--1 { animation: bkIn .8s var(--ease) .35s forwards, bkDim .6s ease 1.9s forwards; }
.bk.intro-run .bk__line--2 { animation: bkIn .8s var(--ease) 1.75s forwards, bkDim .6s ease 3.3s forwards; }
.bk.intro-run .bk__line--3 { animation: bkIn .9s var(--ease) 3.2s forwards; }
.bk.intro-run .bk__timer i { animation: bkTimer 5s linear forwards; }
@keyframes bkIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bkDim { to { opacity: .38; } }
@keyframes bkTimer { to { transform: scaleX(1); } }
/* 2) the form */
.bk__form { flex-direction: column; gap: .95rem; padding: 1.4rem 1.3rem 1.3rem; animation: bkIn .6s var(--ease); }
.bk__head { display: flex; align-items: center; gap: .9rem; padding-inline-end: 2.6rem; }
.bk__head img { width: 6.4rem; height: auto; flex: none; }
.bk__head h2 { margin: 0; font: 800 1.35rem/1.25 var(--f-display); color: var(--ink); }
.bk__head p { margin: .15rem 0 0; color: var(--ink-3); font-size: .86rem; }
.bk__offer { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .65rem .85rem; border-radius: .9rem; background: linear-gradient(135deg, #FFF4EC, #FFE6D3); border: 1px solid rgba(238, 103, 36, .5); color: var(--orange-ink); font: 700 .86rem/1.5 var(--f-display); }
.bk__offer i { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--orange); animation: ping 2s infinite; }
.bk__field { display: grid; gap: .35rem; }
.bk__field label { font: 700 .9rem/1.3 var(--f-display); color: var(--ink); }
.bk__field input, .bk__field select { width: 100%; min-height: 3.25rem; padding: .7rem 1rem; border-radius: .95rem; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font: 600 16px/1.3 var(--f-body); transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.bk__field input:focus, .bk__field select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238, 103, 36, .12); }
.bk__field input[dir="ltr"] { text-align: right; }
html[dir="ltr"] .bk__field input[dir="ltr"] { text-align: left; }
.bk__select { position: relative; }
.bk__select::after { content: ''; position: absolute; top: 50%; inset-inline-end: 1rem; width: .55rem; height: .55rem; margin-top: -.4rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; }
.bk__select select { padding-inline-end: 2.4rem; }
#bkCityOther { margin-top: .45rem; }
.bk__money { position: relative; }
.bk__money input { padding-inline-start: 4rem; font-weight: 700; letter-spacing: .02em; }
html[dir="rtl"] .bk__money input { padding-inline-start: 1rem; padding-left: 4rem; }
.bk__money span { position: absolute; top: 50%; left: .45rem; transform: translateY(-50%); padding: .35rem .75rem; border-radius: .7rem; background: var(--ivory); color: var(--orange); font: 800 .88rem/1 var(--f-display); pointer-events: none; }
html[dir="ltr"] .bk__money input { padding-inline-start: 1rem; padding-right: 4.6rem; }
html[dir="ltr"] .bk__money span { left: auto; right: .45rem; }
.bk__err { display: none; margin: 0; color: #B23A0A; font-size: .82rem; font-weight: 600; }
.bk__field.has-err .bk__err { display: block; }
.bk__field.has-err input, .bk__field.has-err select { border-color: #C2410C; background: #FFF8F4; }
.bk__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk__go { width: 100%; min-height: 3.5rem; margin-top: .2rem; gap: .6rem; border: 0; border-radius: 1rem; background: linear-gradient(135deg, #F28A4E, var(--orange) 55%, var(--orange-deep)); color: #fff; font: 800 1.08rem/1 var(--f-display); box-shadow: 0 18px 32px -16px rgba(150, 60, 15, .8); cursor: pointer; }
.bk__go:active { transform: scale(.98); }
.bk__note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0; color: var(--ink-3); font-size: .78rem; text-align: center; }
.bk__note svg { width: .95rem; height: .95rem; flex: none; fill: none; stroke: #1F7A3A; stroke-width: 2; }
/* 3) check the details */
.bk__check { flex-direction: column; gap: .8rem; padding: 1.6rem 1.3rem 1.3rem; animation: bkIn .5s var(--ease); }
.bk__check h3 { margin: 0; font: 800 1.35rem/1.3 var(--f-display); color: var(--ink); padding-inline-end: 2.6rem; }
.bk__checkd { margin: -.3rem 0 0; color: var(--ink-3); font-size: .9rem; }
.bk__sum { margin: .2rem 0 0; display: grid; border-radius: 1.1rem; border: 1px solid var(--line); overflow: hidden; }
.bk__sum div { display: grid; gap: .1rem; padding: .75rem 1rem; }
.bk__sum div + div { border-top: 1px solid var(--line); }
.bk__sum dt { color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.bk__sum dd { margin: 0; color: var(--ink); font: 800 1.05rem/1.4 var(--f-display); overflow-wrap: anywhere; }
.bk__sum dd[dir="ltr"] { text-align: right; }
html[dir="ltr"] .bk__sum dd[dir="ltr"] { text-align: left; }
.bk__msg { margin: 0; padding: .6rem .8rem; border-radius: .8rem; background: #FFF1E8; color: #8A3B00; font-size: .86rem; font-weight: 600; }
.bk__edit { min-height: 2.9rem; border: 1.5px solid var(--line-strong); border-radius: 1rem; background: #fff; color: var(--ink-2); font: 700 .95rem/1 var(--f-display); cursor: pointer; }
/* sending */
.bk__sending { flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 16rem; color: var(--ink-2); font-weight: 700; }
.bk__spin { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--orange); animation: spin 1s linear infinite; }
/* 4) done — a formal 3-second seal */
.bk__done { position: relative; flex-direction: column; align-items: center; gap: .7rem; padding: 2.6rem 1.5rem 1.5rem; text-align: center; overflow: hidden; }
.bk__seal { width: 7.2rem; height: 7.2rem; }
.bk__ring { fill: none; stroke: #F7B48F; stroke-width: 5; stroke-dasharray: 315; stroke-dashoffset: 315; transform: rotate(-90deg); transform-origin: 60px 60px; }
.bk__tick { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.bk__burst { position: absolute; left: 50%; top: 6.2rem; width: 13rem; height: 13rem; margin: -6.5rem 0 0 -6.5rem; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(247, 160, 110, .32) 0 3deg, transparent 3deg 18deg); -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 40%, transparent 72%); mask: radial-gradient(closest-side, transparent 38%, #000 40%, transparent 72%); opacity: 0; pointer-events: none; }
.bk__done h3 { margin: .2rem 0 0; font: 800 1.4rem/1.35 var(--f-display); color: var(--ink); }
.bk__done p { margin: 0; color: var(--ink-2); line-height: 1.8; }
.bk__ref { padding: .4rem .9rem; border-radius: 99px; background: var(--ivory); font-size: .85rem; }
.bk__ref b { color: var(--orange); letter-spacing: .08em; }
.bk.done-run .bk__ring { animation: drawRing 1.1s var(--ease) .1s forwards; }
.bk.done-run .bk__tick { animation: drawTick .6s var(--ease) 1s forwards; }
.bk.done-run .bk__burst { animation: burst 1.6s var(--ease) 1.2s forwards; }
.bk.done-run .bk__done h3 { animation: bkIn .7s var(--ease) 1.35s both; }
.bk.done-run .bk__done p, .bk.done-run .bk__done .bk__go { animation: bkIn .7s var(--ease) 1.75s both; }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }
@keyframes burst { 0% { opacity: 0; transform: scale(.6) rotate(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(25deg); } }
/* phones: the panel takes the whole screen like an app */
@media (max-width: 620px) {
  .bk { padding: 0; place-items: stretch; }
  .bk__sheet { width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding-bottom: var(--safe-b); transform: translateY(40px); }
  .bk__intro { min-height: 100dvh; }
  .bk__form { padding: 1.2rem 1.1rem calc(1.4rem + var(--safe-b)); }
  .bk__check, .bk__done { padding-inline: 1.1rem; }
  .bk__head img { width: 5.2rem; }
  .bk__head h2 { font-size: 1.22rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bk.intro-run .bk__logo, .bk.intro-run .bk__line { animation: none !important; opacity: 1; }
  .bk.done-run .bk__ring, .bk.done-run .bk__tick { animation: none !important; stroke-dashoffset: 0; }
}
.bk[hidden] { display: none; }

/* Tamliha extras: the offer sits under the hero text; «احجز» circle beside the AI button; old form links are buttons now */
.hero__copy .offer{margin-inline:0}
html[dir="rtl"] .hero__copy .offer{margin-inline-start:0}
.offer__btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.bk__go{display:inline-flex;align-items:center;justify-content:center}
.cta__btn,.footer__cta{border:0;font:inherit;cursor:pointer}
.agent__book{position:fixed;z-index:81;left:max(20px,var(--safe-l));bottom:calc(24px + var(--safe-b) + var(--lift,0px) + clamp(58px,4.2vw,72px) + 14px);width:clamp(58px,4.2vw,72px);aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:1px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#F28A4E,var(--orange) 55%,var(--orange-deep));color:#fff;box-shadow:0 0 0 3px #fff,0 14px 28px -12px rgba(150,60,15,.7);cursor:pointer;pointer-events:auto;transition:transform .3s var(--ease),opacity .3s}
.agent__book svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agent__book b{font:800 .72rem/1 var(--f-display)}
.agent__book:active{transform:scale(.94)}
.agent[data-state="open"] .agent__book{opacity:0;pointer-events:none;transform:scale(.6)}
@media (max-width:700px){
  .agent__book{left:max(14px,var(--safe-l));bottom:calc(16px + var(--safe-b) + var(--lift,0px) + 56px + 12px);width:56px}
  .agent__book svg{width:19px;height:19px}
  .hero__copy .offer{margin-inline:auto;width:100%}
}

/* the launch offer is the first thing under the top bar after the opening (desktop: one row, phone: compact card) */
.scene--hero{padding-top:clamp(84px,10vh,110px)}
.offer--top{display:flex;align-items:center;gap:clamp(12px,2vw,24px);width:min(calc(100% - 2 * var(--gutter)),var(--maxw));margin:0 auto clamp(18px,3vh,34px);padding:14px clamp(16px,2vw,26px);text-align:start;animation:offerIn .9s var(--ease) .15s both}
.offer--top .offer__badge{flex:none}
.offer--top .offer__text{flex:1;margin:0}
.offer--top .offer__btn{flex:none;margin:0}
@keyframes offerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .scene--hero{padding-top:calc(76px + env(safe-area-inset-top,0px))}
  .offer--top{flex-direction:column;text-align:center;gap:8px;padding:12px 14px 14px;margin-bottom:14px}
  .offer--top .offer__text{font-size:1.05rem;line-height:1.5}
  .offer--top .offer__btn{width:100%;min-height:48px}
}
@media (prefers-reduced-motion:reduce){.offer--top{animation:none}}