/* Direction C2, "The Mark, revised". Loaded after core.css (structure, Future Nets world, configurator layout).
   Ghazal's own shell is black and white, lime is used for the line, the action and focus only.
   Concept sites (MIZAN, bunni, SADA) keep the identities designed for the Ghazal reel. */

/* ================= TYPE (P-01, owner-approved A1 "Kufi Block", 2026-11-11) =================
   Ghazal's frame: Noto Kufi Arabic 800 (AR display), Almarai 400/700 (AR text), Schibsted Grotesk 400-800 variable (EN).
   Self-hosted subsets (arabic + latin) from Google Fonts, SIL OFL 1.1 (fonts/OFL-NOTICE.txt). The page preloads the files the first screen uses.
   Each face has a metric-matched local fallback (size-adjust from the widths of this page's own frame text, ascent / descent from the font metrics, against Arial, measured in Edge), so the swap does not move layout.
   Concept fonts (MIZAN, bunni, SADA, Future Nets) are NOT declared here: c2.js adds them lazily and gates the fan and the sheet on them. */
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk-400-800-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;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:"Almarai";src:url(fonts/almarai-400-arabic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-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:"Almarai";src:url(fonts/almarai-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;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:"Almarai";src:url(fonts/almarai-700-arabic.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-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:"Almarai";src:url(fonts/almarai-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;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:"Noto Kufi Arabic";src:url(fonts/noto-kufi-arabic-800-arabic.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-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:"Noto Kufi Arabic";src:url(fonts/noto-kufi-arabic-800-latin.woff2) format("woff2");font-weight:800;font-style:normal;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:"Schibsted Grotesk Fallback";src:local("Arial"),local("ArialMT");font-weight:400 549;size-adjust:104.1%;ascent-override:94.14%;descent-override:24.98%;line-gap-override:0%;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:"Schibsted Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 699;size-adjust:99.89%;ascent-override:98.11%;descent-override:26.03%;line-gap-override:0%;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:"Schibsted Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:104.06%;ascent-override:94.18%;descent-override:24.99%;line-gap-override:0%;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:"Almarai Fallback";src:local("Arial"),local("ArialMT");font-weight:300 549;size-adjust:127%;ascent-override:71.65%;descent-override:16.54%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,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:"Almarai Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 800;size-adjust:135.68%;ascent-override:81.81%;descent-override:33.17%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,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:"Noto Kufi Arabic Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 900;size-adjust:154.79%;ascent-override:82.69%;descent-override:40.05%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,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{
  /* colour roles */
  --void:#000; --paper:#fff; --ash:#A6A69E; --lime:#CAFF00; --hair:rgba(255,255,255,.16); --hair-2:rgba(255,255,255,.08);
  --key-light:rgba(255,255,255,.075); --focus:var(--lime);
  /* layout */
  --margin:clamp(20px,6vw,104px); --header-h:72px;
  /* spacing (4 px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:160px;
  /* radius: Ghazal UI is square; browser windows are objects, so they get a real radius; tags are pills */
  --r-ui:0; --r-win:10px; --r-pill:999px;
  /* motion */
  --leap:cubic-bezier(.16,1,.3,1); --glide:cubic-bezier(.65,0,.35,1); --exit:cubic-bezier(.4,0,1,1); --pop:cubic-bezier(.34,1.7,.64,1);
  --t-fast:180ms; --t-base:320ms; --t-zoom:700ms; --t-enter:1000ms;
}
html{background:var(--void);color:var(--paper);scrollbar-gutter:stable}
/* P-01 (CLS): every text of the page is written by c2.js. On a slow network the browser can paint the parsed HTML before c2.js arrives,
   so the empty boxes grew when the text came in (the 0.12 shift on slow 4G). Until c2.js has written the text, the text-bearing parts stay invisible (black, as the page is);
   with the intro on, the loader covers this moment anyway. No layout, colour or motion change. */
.gz-boot .site-h,.gz-boot .hero .h1,.gz-boot .hero .aside,.gz-boot #v-home > .sec,.gz-boot #v-sites,.gz-boot .site-f,.gz-boot .ld-skip{visibility:hidden;animation:gzBootShow 0s 4s forwards} /* the horn line and the hero mark have no text and stay as they were */
/* P01-N2 fail-safe: if c2.js never removes .gz-boot (blocked, or it throws before apply()), these parts become visible 4 s after their style applies.
   On the normal path the class is gone long before that, so this never runs (visibility only, no layout: CLS unchanged). */
@keyframes gzBootShow{to{visibility:visible}}
/* font roles follow the NEAREST language (:lang), so Ghazal's frame inside a concept page in the other language still gets the right face.
   Weights only ask for what exists: Almarai has 400/700, so AR "medium" = 400 and AR "semibold" = 700 (EN keeps 500/600 on the variable face). */
:root{--ff-en:"Schibsted Grotesk","Schibsted Grotesk Fallback",system-ui,sans-serif;
  --ff-ar-text:"Almarai","Almarai Fallback","Schibsted Grotesk","Schibsted Grotesk Fallback",sans-serif;
  --ff-ar-disp:"Noto Kufi Arabic","Noto Kufi Arabic Fallback","Schibsted Grotesk","Schibsted Grotesk Fallback",sans-serif}
:lang(en){--ff-text:var(--ff-en);--ff-disp:var(--ff-en);--w-med:500;--w-semi:600}
:lang(ar){--ff-text:var(--ff-ar-text);--ff-disp:var(--ff-ar-disp);--w-med:400;--w-semi:700}
body{font:400 clamp(1rem,.97rem + .15vw,1.0625rem)/1.65 var(--ff-text)}
[lang="ar"] body{line-height:1.85}
.disp{font-family:var(--ff-disp);font-weight:800;letter-spacing:-.035em}
.disp:lang(ar){letter-spacing:0}
html.zoom-open{overflow:hidden}

/* ================= BUTTONS ================= */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 1.6em;border:0;cursor:pointer;text-decoration:none;font-size:1rem;font-weight:var(--w-semi);color:var(--paper);background:transparent;box-shadow:inset 0 0 0 1px var(--lime);transition:color 420ms var(--leap),transform 120ms ease-out}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime);transform:scaleY(0);transform-origin:50% 100%;transition:transform 420ms var(--leap)}
.btn-primary:hover{color:#000}.btn-primary:hover::before{transform:scaleY(1)}
.btn-ghost{box-shadow:none;padding-inline:0;min-height:44px}
.btn-ghost::before{inset:auto 0 8px;height:1px;transform:scaleX(.35);transform-origin:var(--o-start) 50%}
.btn-ghost:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:42px;padding:0 1.1em;font-size:.9375rem}

/* ================= HEADER ================= */
.site-h{background:#000;border-block-end:1px solid var(--hair)}
.site-h .logo{color:var(--paper)}
.wordmark{font:700 clamp(15px,1.2vw,18px)/1 var(--ff-en);letter-spacing:-.01em}
.nav-d a{position:relative;color:#e6e6e0}
.nav-d a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:var(--o-start) 50%;transition:transform 420ms var(--leap)}
.nav-d a:hover::after,.nav-d a[aria-current="page"]::after{transform:scaleX(1)}
.lang-btn{color:var(--ash)}
/* m-14: 44 px tap height (visual size unchanged): an invisible hit area, never smaller than the element itself */
.lang-btn{position:relative}.lang-btn::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))}
.nav-d a::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))}
.lang-btn:lang(ar){font-family:var(--ff-ar-text)} /* P01-L: "العربية" in the EN header is set in Almarai (the button carries lang="ar") */
.menu-btn{box-shadow:inset 0 0 0 1px var(--hair)}
.menu{background:#000}
.menu nav a{font:800 clamp(2.2rem,9.5vw,3.6rem)/1.5 var(--ff-ar-disp)}
[lang="en"] .menu nav a{font:800 clamp(2.2rem,9.5vw,3.6rem)/1.15 var(--ff-en);letter-spacing:-.035em}
.menu .close{box-shadow:inset 0 0 0 1px var(--hair)}

/* ================= INTRO: the gazelle fades out in the centre; the header mark fades in on its own ================= */
.ld-bg{position:absolute;inset:0;background:#000}
.ld-mark{position:absolute;inset:0;margin:auto;height:min(22vmin,180px);width:auto;aspect-ratio:310/472;color:var(--paper)}
.ld-skip{color:var(--ash);box-shadow:inset 0 0 0 1px var(--hair)}
.intro .loader{display:block}
.intro #logoMark{opacity:0}

/* ================= HERO ================= */
.hero{position:relative;min-height:max(660px,100svh);overflow:hidden;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end;gap:4vw;padding:140px var(--margin) clamp(48px,8vh,96px)}
/* the horn line lives in the upper band only, so it can never run through the headline */
.horn{position:absolute;inset-inline:0;inset-block-start:0;height:44%;width:100%;pointer-events:none}
[dir="ltr"] .horn{transform:scaleX(-1)}
.hero-mark{position:absolute;inset-block-start:13vh;inset-inline-end:var(--margin);height:22vh;width:auto;aspect-ratio:310/472;color:var(--paper)}
.h1{margin:0;font-size:clamp(3rem,1.2rem + 6.4vw,8.6rem);line-height:1.3;position:relative;z-index:1}
[lang="en"] .h1{line-height:1;font-size:clamp(2.8rem,1rem + 6vw,8rem)}
.h1 .line{display:block}
.h1 .mask{display:block;overflow:clip;padding-block:.06em .2em;margin-block:-.06em -.2em}
.h1 .w{display:inline-block}
.aside{display:grid;gap:22px;align-content:end;padding-block-end:1.2rem;position:relative;z-index:1}
.kicker{margin:0;font-size:.9375rem;color:var(--paper);padding-block-start:14px;border-block-start:1px solid var(--lime)}
.sub{margin:0;font-size:1.0625rem;color:#dcdcd6}
.ctas{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.help{margin:0;color:var(--ash);font-size:.875rem}

/* ================= SECTIONS (home) ================= */
.sec{position:relative;padding:clamp(88px,11vw,168px) var(--margin);border-block-start:1px solid var(--hair)}
.sec-h{margin:0;font-size:clamp(2.4rem,1.3rem + 3.4vw,5rem);line-height:1.4;max-width:16ch}
[lang="en"] .sec-h{line-height:1.05}
.sec-lead{margin:22px 0 0;max-width:58ch;color:#dcdcd6;font-size:1.0625rem}
/* m-07 + P01-L: display headings balance their lines, ledes avoid a one-word last line (e.g. the 1440 AR hero "الإطلاق."). Line breaks only */
.sec-h,.sites-head h2,.site-f h2{text-wrap:balance}
.sec-lead,.sub,.sites-head p,.plan-head p{text-wrap:pretty}
@media (max-width:760px){.h1 .mask{text-wrap:balance}}

/* services: an editorial list, not cards */
.svc{margin:clamp(40px,6vw,72px) 0 0;padding:0;list-style:none;display:grid}
.svc li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(0,3fr);gap:16px 4vw;align-items:baseline;padding-block:26px;border-block-start:1px solid var(--hair)}
.svc li:last-child{border-block-end:1px solid var(--hair)}
.svc h3{margin:0;font-size:clamp(1.6rem,1.1rem + 1.4vw,2.5rem);line-height:1.5}
[lang="en"] .svc h3{line-height:1.1}
.svc p{margin:0;color:#dcdcd6}
.svc .pr{color:var(--ash);font-size:.9375rem;justify-self:end;text-align:end}
.svc-note{margin:18px 0 0;color:var(--ash);font-size:.875rem;max-width:62ch}
.svc-note.svc-cur{margin-top:4px} /* F-02: the currency line sits right under the price note */

/* approach teaser: the process is a real sequence, so it is numbered */
.appr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;align-items:end}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.steps li{counter-increment:st;padding-block:16px;border-block-start:1px solid var(--hair);display:grid;gap:4px}
.steps li::before{content:counter(st);font:500 .8125rem/1 var(--ff-en);font-variant-numeric:tabular-nums;color:var(--lime)}
.steps b{font-weight:var(--w-semi)}
.appr .btn-ghost{margin-block-start:18px}

/* teaser of the sites tab */
.teaser{overflow:hidden;padding-block-end:0}
.teaser-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px 48px}
.teaser .fan{margin-inline:calc(var(--margin) * -1);height:clamp(260px,30vw,420px);margin-block-start:clamp(32px,4vw,56px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.teaser .lbl{display:none}

/* ================= SITES VIEW ================= */
.v-sites{position:relative;min-height:100svh;padding:calc(var(--header-h) + clamp(28px,5vh,64px)) 0 clamp(28px,5vh,56px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow:hidden}
.v-sites::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 48% at 50% 34%,var(--key-light),transparent 72%)}
.sites-head{position:relative;z-index:2;padding-inline:var(--margin);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px 5vw;align-items:end}
.sites-head h2{margin:0;font-size:clamp(2.2rem,1.2rem + 3vw,4.4rem);line-height:1.4}
[lang="en"] .sites-head h2{line-height:1.04}
.sites-head h2:focus,.gz-ftarget:focus{outline:none} /* m-09: headings focused after a menu link are a landing point, not a control */
.sites-head p{margin:0;color:#dcdcd6;max-width:46ch}
.v-sites .fan{align-self:center}
.sites-hint{position:relative;z-index:2;margin:0;padding-inline:var(--margin);color:var(--ash);font-size:.875rem;text-align:center}
/* P-02: the hidden sites view is laid out ahead, off the page flow: invisible, inert (c2.js), not painted, no layout effect on the page */
.v-sites.gz-pre[hidden]{display:grid!important;position:absolute;inset-block-start:0;inset-inline:0;visibility:hidden;pointer-events:none;contain:layout paint style}

/* ================= THE FAN ================= */
.fan{position:relative;min-width:0;perspective:1600px;perspective-origin:50% 22%;overflow:clip}
.rig{position:relative;height:100%;min-height:var(--rig-h,460px);transform-style:preserve-3d}
.slot{position:absolute;left:50%;top:var(--top,24px);width:var(--ww);transform-style:preserve-3d}
.w3d{transform-style:preserve-3d;will-change:transform}
.whv{transform-style:preserve-3d;transition:transform 700ms var(--leap)}
.win{position:relative;width:var(--ww);height:var(--wh);border-radius:var(--r-win);overflow:hidden;background:#0b0b0b;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1px 0 0 rgba(255,255,255,.22) inset,0 60px 90px -40px rgba(0,0,0,1)}
.w-scale{position:absolute;top:0;left:0;width:var(--pw);height:var(--ph);transform:scale(var(--s));transform-origin:0 0;pointer-events:none;overflow:hidden}
.w-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05));transform:translateX(var(--sx,0px));transition:transform 900ms var(--leap)}
/* each window spills its own colour onto a glossy floor */
.w-refl{position:absolute;inset-inline:6%;top:calc(var(--wh) + 10px);height:calc(var(--wh) * .34);border-radius:var(--r-win);pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,var(--tint),transparent 72%);opacity:.22}
.w-hit{all:unset;position:absolute;inset:0;cursor:pointer;border-radius:var(--r-win);z-index:3}
/* M-07: the same lime ring, drawn on the window itself so .win{overflow:hidden} can no longer clip it */
.slot:has(.w-hit:focus-visible) .win{outline:2px solid var(--lime);outline-offset:6px}
/* C-02 hit-testing: in the 3D fan the flat layout boxes of .rig/.slot sit at z=0 and beat windows pushed back in z.
   Only each window's own .w-hit (and its label) takes the pointer. No visual change. The rail restores normal hit-testing. */
.rig,.slot,.w3d,.whv,.win{pointer-events:none}
.w-hit,.lbl{pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .slot:hover .whv,.slot:focus-within .whv{transform:translateZ(46px) translateY(-6px)}
  .slot:hover .w-sheen{--sx:12%}
}
.fan.zooming .slot:not(.active){transition:opacity 420ms linear}
.fan.zooming .slot:not(.active) .whv{transform:translateZ(-80px)}
.fan.zooming .slot:not(.active){opacity:.28}
.slot{transition:opacity 500ms linear}
/* P-01: until the faces a fan shows have loaded, its windows (and labels) are not shown at all, never in fallback type. c2.js removes .fwait and then runs the entrance unchanged. */
.fan.fwait .slot{visibility:hidden}

/* labels sit flat under each window */
.lbl{position:absolute;top:calc(var(--wh) + var(--lty,0px) + clamp(28px,4vh,52px));left:50%;width:max-content;max-width:min(24vw,300px);transform:translateX(calc(-50% + var(--ldx,0px)));display:grid;justify-items:center;gap:8px;text-align:center}
.lbl{cursor:pointer} /* P01-N3: a label opens its window (c2.js) */
.lbl .lg{height:34px;display:flex;align-items:center;justify-content:center}
.lbl .vibe{font:var(--w-med) 1.0625rem/1.4 var(--ff-text);color:#cfcfc8}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:.75rem;line-height:1.3;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ash)}
.tag.real{background:var(--lime);color:#000;box-shadow:none;font-weight:var(--w-semi)}
.lg-fn{font:700 26px/1 "Saira Semi Condensed",sans-serif;letter-spacing:.06em;color:#EDE9DF}
[lang="ar"] .lg-fn{font:700 24px/1 "Cairo",sans-serif;letter-spacing:0}
.lg-mz{direction:ltr;display:flex;align-items:center;gap:10px;font:800 26px/1 "Anybody",sans-serif;font-stretch:125%;color:#e4e9e5}
.lg-mz svg{width:28px;height:28px}
.lg-bn .bwm{font-size:42px;color:#1fb35e}
.lg-sd{direction:ltr;display:flex;align-items:center;gap:10px;color:#efe7d8}
.lg-sd svg{width:26px;height:32px}
.lg-sd b{font:400 24px/1 "Newsreader",serif;letter-spacing:.34em;margin-inline-end:-.34em}

/* ================= ZOOM SHEET (dialog) ================= */
.zoom{position:fixed;inset:0;z-index:90}
.z-scrim{position:absolute;inset:0;background:#000}
.z-sheet{position:absolute;inset:0;transform-origin:0 0;overflow:hidden;background:var(--pg-bg,#000);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.z-scroll{position:relative;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.z-scroll:focus{outline:none}
.z-scroll:focus-visible{outline:2px solid var(--lime);outline-offset:-2px} /* M-03: the page itself is the first Tab stop after Close (arrow keys scroll it); inset so the sheet edge cannot clip the ring */
.z-cover{position:absolute;inset-inline:0;bottom:0;top:46px;pointer-events:none;overflow:hidden;background:var(--pg-bg)}
/* browser bar: the site's own chrome, with Ghazal's frame (tag + close) at the end */
.bar{--bar-h:46px;height:var(--bar-h);display:flex;align-items:center;gap:14px;padding-inline:16px 8px;background:var(--bar-bg,#111);color:var(--bar-ink,#fff);font:var(--w-med) 13px/1 var(--ff-text);position:relative;z-index:3}
.zoom .bar,.w-scale .bar{--bar-h:46px}
.bar .dots{display:flex;gap:7px;flex:none}.bar .dots i{width:11px;height:11px;border-radius:50%;background:currentColor;opacity:.25}
.bar .tab{min-width:0;display:flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 8px;border-radius:8px;background:var(--tab-bg,rgba(255,255,255,.08));white-space:nowrap;flex:none;max-width:280px;overflow:hidden}
.bar .fav{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;overflow:hidden;flex:none;background:var(--fav-bg,#000)}
.bar .fav svg{width:14px;height:14px;display:block}
.bar .url{flex:1;min-width:0;height:30px;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--url-bg,rgba(255,255,255,.06));opacity:.9;direction:ltr;white-space:nowrap;overflow:hidden}
.bar .url svg{width:11px;height:11px;flex:none;opacity:.6}
.bar .gz{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:#000;color:#fff;white-space:nowrap;flex:none;font:var(--w-med) 12px/1 var(--ff-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bar .gz svg{height:16px;width:auto;aspect-ratio:310/472;color:#fff}
.bar .gz.real{background:var(--lime);color:#000;box-shadow:none;font-weight:var(--w-semi)}
.bar .gz.real svg{color:#000}
.z-close{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:36px;min-width:44px;padding:0 14px;border-radius:var(--r-pill);background:#000;color:#fff;font:var(--w-semi) 13px/1 var(--ff-text);box-shadow:inset 0 0 0 1px var(--lime);flex:none}
.z-close{position:relative}.z-close::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))} /* m-14 */
.z-close svg{width:14px;height:14px}
.z-close kbd{font:500 11px/1 var(--ff-en);opacity:.6}
.z-close:hover{background:var(--lime);color:#000}
.z-close:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (pointer:coarse){.z-close kbd{display:none}} /* m-22: no Esc keycap for touch users */
.w-scale .z-close{visibility:hidden}
.bar .gz .s{display:none}
@media (max-width:640px){.bar .dots,.bar .url,.z-close kbd,.bar .gz .l{display:none}.bar .gz .s{display:inline}.bar .tab{flex:1 1 auto;max-width:none}.bar .tab>span:last-child{overflow:hidden;text-overflow:ellipsis}.bar{gap:8px}}

/* ================= CONCEPT PAGES (shared) ================= */
.pg{container-type:inline-size;position:relative;min-height:100%}
.pg *{box-sizing:border-box}
.pg-toggle{all:unset;cursor:pointer;display:inline-block}
.pg-toggle:focus-visible,.pg button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cx-end{padding:56px 6cqi 72px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:14px}
.cx-end .z-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-pill);background:#000;color:#fff;box-shadow:inset 0 0 0 1px var(--lime);font:var(--w-semi) 14px/1 var(--ff-text)}
.cx-end .z-back:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* Ghazal notes inside each site: shared structure, vibe-specific motion below */
.gn{position:relative;display:grid;gap:14px;max-width:62ch}
.gn .gn-k{display:flex;align-items:center;gap:10px}
.gn .gn-k svg{height:20px;width:auto;aspect-ratio:310/472}
.gn .gw{display:inline-block}
.gn .gn-t{margin:0}

/* ================= MIZAN (technical precision) ================= */
.mz{--mz-black:#0a0b0b;--mz-line:#1f2523;--mz-deep:#0f3a2b;--mz-text:#e4e9e5;--mz-mute:#8a9690;--mz-mint:#8fd1ae;
  background:var(--mz-black);color:var(--mz-text);font-family:"Anybody","Vazirmatn",sans-serif;font-weight:500}
.mz .mono{font-family:"Martian Mono","Vazirmatn",monospace}
[lang="ar"].mz,.mz[lang="ar"]{font-family:"Vazirmatn",sans-serif;font-weight:400}
.mz-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;height:max(64px,5.6cqi);padding:0 4cqi;border-bottom:1px solid var(--mz-line)}
.mz-logo{font-weight:800;font-size:clamp(18px,1.9cqi,28px);font-stretch:125%;letter-spacing:.02em;display:flex;align-items:center;gap:12px;direction:ltr;font-family:"Anybody",sans-serif}
.mz-logo svg{width:1.1em;height:1.1em;display:block}
.mz-logo span{font:400 .55em "Martian Mono",monospace;color:var(--mz-mute);letter-spacing:0}
.mz-links{display:flex;gap:2cqi;align-items:center;font:400 14px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mute)}
.mz-links .st{display:flex;gap:8px;align-items:center;color:var(--mz-text)}
.mz-links .st i{width:8px;height:8px;border-radius:50%;background:var(--mz-mint)}
.mz-links .bt2,.mz-links .pg-toggle{color:var(--mz-text);border:1px solid #3a4441;padding:10px 14px}
.mz-hero{position:relative;padding:4cqi 4cqi 0;overflow:hidden}
.mz-vl{position:absolute;top:0;bottom:0;width:1px;background:var(--mz-line)}
.mz-tag{position:relative;display:flex;justify-content:space-between;gap:16px;font:400 14px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mute)}
.mz-tag b{color:var(--mz-mint);font-weight:400}
.mz-tag b.mz-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:currentColor;vertical-align:.04em} /* P01-L: the "●" glyph is not in Martian Mono / Vazirmatn; same mint dot drawn in CSS */
.mz-h1{position:relative;font-weight:800;font-stretch:120%;font-size:clamp(52px,8.6cqi,150px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;margin:3cqi 0}
.mz[lang="ar"] .mz-h1{font-family:"Vazirmatn",sans-serif;font-weight:800;line-height:1.25;font-size:clamp(48px,7.4cqi,128px)}
.mz-h1 .dim{color:#46504c}
.mz-sub{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4cqi;padding-bottom:4cqi}
.mz-sub p{margin:0;font-size:clamp(16px,1.45cqi,21px);line-height:1.55;color:#b3bdb8;max-width:44ch}
.mz-sub .acts{display:flex;gap:12px;align-items:flex-start;justify-content:flex-end;flex-wrap:wrap}
.mz-b{font:500 15px "Martian Mono","Vazirmatn",monospace;padding:16px 22px;border:1px solid #3a4441;white-space:nowrap}
.mz-b.p{background:var(--mz-text);color:var(--mz-black);border-color:var(--mz-text)}
.mz-hr{height:1px;background:var(--mz-line)}
.mz-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.mz-stat{padding:2.6cqi 3cqi 2.8cqi 4cqi;border-inline-end:1px solid var(--mz-line)}
.mz-stat:last-child{border-inline-end:0}
.mz-stat .k{font:400 13px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mute)}
.mz-stat .v{font-weight:700;font-stretch:112%;font-size:clamp(26px,3cqi,46px);margin:14px 0 6px;letter-spacing:-.01em;line-height:1.2}
.mz[lang="ar"] .mz-stat .v{font-weight:700}
.mz-stat .d{font-size:15px;color:#b3bdb8}
.mz-dash{padding:4cqi 4cqi 2cqi}
.mz-sec{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.mz-sec h3{margin:0;font-weight:700;font-stretch:118%;font-size:clamp(26px,3cqi,46px);text-transform:uppercase;line-height:1.2}
.mz-sec span{font:400 14px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mute)}
.mz-panel{border:1px solid var(--mz-line);background:#0c0e0d}
.mz-ph{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--mz-line);font:400 14px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mute)}
.mz-ph b{color:var(--mz-text);font-weight:500}
.mz-ph .live{display:flex;gap:8px;align-items:center;color:var(--mz-mint)}
.mz-ph .live i{width:8px;height:8px;border-radius:50%;background:var(--mz-mint)}
.mz-chart{padding:18px 20px 6px;direction:ltr}.mz-chart svg{display:block;width:100%;height:auto;direction:ltr}
.mz-rows{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--mz-line)}
.mz-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px;font:400 15px "Martian Mono","Vazirmatn",monospace}
.mz-row:first-child{border-inline-end:1px solid var(--mz-line)}
.mz-row .lb{color:var(--mz-mute)}
.mz-tg{all:unset;display:block;cursor:pointer;position:relative;width:60px;height:32px;border-radius:16px;background:#262c2a;flex:none;direction:ltr}
.mz-tg::before{content:"";position:absolute;inset-inline:0;inset-block:-6px} /* m-14: 32 → 44 px tap height */
.mz-tg i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--mz-text);transition:transform 160ms steps(4)}
.mz-tg[aria-checked="true"]{background:var(--mz-deep)}
.mz-tg[aria-checked="true"] i{transform:translateX(28px);background:var(--mz-mint)}
.mz-dep{all:unset;cursor:pointer;position:relative;height:46px;width:min(240px,100%);border:1px solid var(--mz-text);overflow:hidden;font:500 14px "Martian Mono","Vazirmatn",monospace;display:grid;place-items:center;text-align:center}
.mz-dep .bar-p{position:absolute;inset:0;background:var(--mz-deep);transform-origin:var(--o-start) 50%;transform:scaleX(0)}
.mz-dep span{position:relative}
.mz-code{margin:2cqi 4cqi 0;border:1px solid var(--mz-line);background:var(--mz-deep);padding:24px 26px;font:400 clamp(13px,1.15cqi,17px)/1.75 "Martian Mono",monospace;color:#cfe3d8;white-space:pre;overflow-x:auto;direction:ltr;text-align:left}
.mz-codew{position:relative;margin:2cqi 4cqi 0}.mz-codew .mz-code{margin:0} /* m-16: wrapper for the end fade (same margin as before) */
.mz-code .c{color:#7fae97}.mz-code .k{color:var(--mz-mint)}.mz-code .s{color:#f1efe6}
.mz .cx-end{border-top:1px solid var(--mz-line);color:var(--mz-mute);font-family:"Martian Mono","Vazirmatn",monospace}
/* MIZAN note: a terminal line; words arrive on a fixed clock, a caret holds the end */
.mz .gn{margin:5cqi 4cqi;padding:26px 28px;border:1px solid var(--mz-line);border-inline-start:2px solid var(--mz-mint);background:#070808;max-width:none}
.mz .gn .gn-k{font:500 13px "Martian Mono","Vazirmatn",monospace;color:var(--mz-mint)}
.mz .gn .gn-k svg{color:var(--mz-mint)}
.mz .gn .gn-t{font:500 clamp(19px,1.9cqi,30px)/1.5 "Martian Mono","Vazirmatn",monospace;color:var(--mz-text);max-width:52ch}
.mz[lang="ar"] .gn .gn-t{font-family:"Vazirmatn",sans-serif;line-height:1.75}
.mz .gn .gn-t::after{content:"";display:inline-block;width:.5em;height:1em;margin-inline-start:.2em;vertical-align:-.12em;background:var(--mz-mint)}
.fxon .mz .gn .gw{opacity:0;transition:opacity 0s linear calc(var(--i) * 42ms + 120ms)}
.fxon .mz .gn.in .gw{opacity:1}
.fxon .mz .gn .gn-t::after{opacity:0}
.fxon .mz .gn.in .gn-t::after{animation:mzCaret 1s steps(1) infinite;animation-delay:calc(var(--n) * 42ms + 120ms)}
@keyframes mzCaret{0%{opacity:1}50%{opacity:0}}
.mz .gn .pg-toggle{justify-self:start;font:500 14px "Martian Mono","Vazirmatn",monospace;color:var(--mz-black);background:var(--mz-text);padding:14px 18px}
@container (max-width:480px){.mz-links .st{display:none}} /* m-16: no room for the status line beside the logo and the language toggle (PROVISIONAL width, measured in Phase 2) */
@container (max-width:700px){
  .mz-links>span:not(.st){display:none}
  .mz-sub,.mz-rows{grid-template-columns:1fr}.mz-sub .acts{justify-content:flex-start}
  .mz-stats{grid-template-columns:1fr}.mz-stat{border-inline-end:0;border-bottom:1px solid var(--mz-line);padding:22px 5cqi}
  .mz-row:first-child{border-inline-end:0;border-bottom:1px solid var(--mz-line)}
  .mz-hero,.mz-dash{padding-inline:5cqi}.mz-nav{padding-inline:5cqi}
  .mz-h1{font-size:13cqi}.mz[lang="ar"] .mz-h1{font-size:13cqi} /* M-14: EN was 15cqi and PRECISION overran the narrow container; PROVISIONAL value, to be measured with Anybody in the browser */
  .mz .gn{margin:40px 5cqi;padding:20px}
  .mz-spk{display:none} /* m-16: the chart's spike label would render at ~6-10 px here */
  .mz-links .st{white-space:nowrap} /* m-16 */
  .mz-codew::after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:40px;pointer-events:none;background:linear-gradient(to right,rgba(15,58,43,0),var(--mz-deep))} /* m-16: the cut code line ends in a fade (code is LTR, so the cut is on the right) */
}

/* ================= bunni (friendly energy) ================= */
.bn{--bn-green:#1fb35e;--bn-green-d:#14864a;--bn-white:#fbf8f0;--bn-butter:#ffd766;--bn-ink:#0f1f17;
  background:var(--bn-white);color:var(--bn-ink);font-family:"Rubik",sans-serif}
/* headlines (and the wordmark) are Lemonada 700, its only weight; everything else is Rubik, at most 600 */
.bn-h1,.bn-sub .alt,.bn-mq .track,.bn-fav h3,.bn-card h4,.bn-find h3,.bn .gn .gn-t{font-family:"Lemonada","Rubik",sans-serif}
.bwm{font-family:"Lemonada",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap;direction:ltr;display:inline-block}
.bwm .ii{position:relative;display:inline-block}
.bwm .dot{position:absolute;left:50%;top:-.06em;width:.34em;height:.34em;transform:translateX(-38%)}
.bwm .dot svg{width:100%;height:100%;display:block}
.bn-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 3.4cqi}
.bn-nav .bwm{font-size:clamp(36px,3.8cqi,58px);color:var(--bn-green-d)}
.bn-links{display:flex;gap:10px;align-items:center}
.bn-links>span,.bn-links .pg-toggle{padding:12px 18px;border-radius:99px;background:#fff;font-weight:600;font-size:16px;box-shadow:inset 0 0 0 2px #e6e1d3}
.bn-cart{background:var(--bn-ink)!important;color:#fff;box-shadow:none!important;display:inline-flex;gap:10px;align-items:center}
.bn-cart .cc{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bn-butter);color:var(--bn-ink);font-size:15px;font-weight:600}
.bn-hero{padding:0 3.4cqi 3cqi}
.bn-h1{font-weight:700;font-size:clamp(64px,9.6cqi,170px);line-height:.92;letter-spacing:-.02em;margin:.6cqi 0 2.4cqi}
.bn[lang="ar"] .bn-h1{letter-spacing:0;line-height:1.3;font-size:clamp(56px,8.2cqi,150px)}
.bn-h1 .row{display:flex;align-items:center;gap:1.6cqi;flex-wrap:wrap}
.bn-h1 .g{color:var(--bn-green-d)}
.bn-pill{display:inline-flex;width:1.6em;height:.84em;border-radius:1em;background:var(--bn-green);align-items:center;justify-content:center;overflow:hidden}
.bn-pill svg{width:.7em;height:.7em}
.bn-stk{width:1.1em;height:1.1em;flex:none}.bn-stk svg{width:100%;height:100%;display:block}
.bn-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:2.4cqi;flex-wrap:wrap}
.bn-sub .alt{font-size:clamp(20px,2cqi,30px);font-weight:700}
.bn-sub .en{font-size:clamp(17px,1.5cqi,22px);line-height:1.45;color:#34453a;max-width:30ch;font-weight:500}
.bn-btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.bn-btn{padding:18px 30px;border-radius:99px;font-weight:600;font-size:18px;display:inline-block}
.bn-btn.p{background:var(--bn-green-d);color:#fff}.bn-btn.o{box-shadow:inset 0 0 0 2.5px var(--bn-ink)}
.bn-vis{position:relative;height:clamp(300px,40cqi,640px);border-radius:3cqi;background:var(--bn-green);overflow:hidden}
.bn-vis .sun{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;background:var(--bn-butter);inset-inline-end:-7%;top:-15%}
.bn-vis .p{position:absolute;bottom:6%}
.bn-vis .p1{inset-inline-start:12%;width:24%}.bn-vis .p2{inset-inline-start:41%;width:19%}.bn-vis .p3{inset-inline-start:66%;width:21%}
.bn-vis .tag2{position:absolute;inset-inline-start:3cqi;top:3cqi;background:var(--bn-white);border-radius:99px;padding:12px 20px;font-weight:600;font-size:17px;display:flex;gap:10px;align-items:center}
.bn-vis .tag2{z-index:1} /* m-12: the "ready in 4 min" pill sits above the drinks, so the straw no longer hides the "4" */
.bn-vis .tag2 i{width:10px;height:10px;border-radius:50%;background:var(--bn-green-d)}
.bn-vis svg,.bn-card svg{display:block;width:100%;height:auto}
.bn-mq{background:var(--bn-ink);color:var(--bn-butter);transform:rotate(-2deg);margin:4cqi -20px 5cqi;padding:20px 0;overflow:hidden;white-space:nowrap;direction:ltr}
.bn-mq .track{display:inline-block;font-weight:700;font-size:clamp(24px,2.6cqi,40px);animation:bnMq 26s linear infinite}
.bn-mq .track span{margin:0 22px}.bn-mq .track .s{color:var(--bn-green)}
.bn-mq .track .s .bn-st4{display:inline-block;width:.62em;height:.62em;vertical-align:.02em} /* P01-L: "✦" is not in Lemonada; the same 4-point star as an inline SVG */
@keyframes bnMq{to{transform:translateX(-33.333%)}}
.bn-fav{padding:0 3.4cqi 4cqi}
.bn-fav h3{font-weight:700;font-size:clamp(44px,6cqi,96px);letter-spacing:-.02em;margin:0 0 2.6cqi;line-height:.95}
.bn[lang="ar"] .bn-fav h3{letter-spacing:0;line-height:1.3}
.bn-fav h3 span{color:var(--bn-green-d)}
.bn-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqi}
@container (max-width:900px){.bn-cards{grid-template-columns:1fr 1fr}} /* m-11: 2 columns at tablet widths (AR names no longer break one word per line) */
.bn-card{border-radius:2.6cqi;padding:22px 22px 24px;min-height:clamp(320px,30cqi,460px);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.bn-card .pic{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 0}
.bn-card .pic svg{height:clamp(150px,15cqi,240px);width:auto}
.bn-card .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.bn-card h4{margin:0;font-weight:700;font-size:clamp(20px,1.8cqi,28px);line-height:1.15;letter-spacing:-.02em}
.bn[lang="ar"] .bn-card h4{letter-spacing:0;line-height:1.4}
.bn-card p{margin:6px 0 0;font-weight:600;font-size:16px;opacity:.8}
.bn-add{all:unset;cursor:pointer;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:600;line-height:1;flex:none;transition:transform 380ms var(--pop)}
.bn-add:active{transform:scale(.86)}
.bn-card .new{position:absolute;top:20px;inset-inline-start:22px;background:var(--bn-ink);color:var(--bn-butter);padding:7px 14px;border-radius:99px;font-weight:600;font-size:14px}
.c-sun{background:var(--bn-butter)}.c-sun .bn-add{background:var(--bn-ink);color:var(--bn-butter)}
.c-grn{background:var(--bn-green-d);color:#fff}.c-grn .bn-add{background:#fff;color:var(--bn-green-d)}
.c-ink{background:var(--bn-ink);color:#fff}.c-ink .bn-add{background:var(--bn-green);color:var(--bn-ink)}
.c-wht{background:#fff;box-shadow:inset 0 0 0 2px #e6e1d3}.c-wht .bn-add{background:var(--bn-green-d);color:#fff}
.bn-find{margin:2cqi 3.4cqi 4cqi;background:var(--bn-ink);color:#fff;border-radius:3cqi;padding:4cqi}
.bn-find h3{font-weight:700;font-size:clamp(40px,5.2cqi,84px);letter-spacing:-.02em;line-height:.98;margin:0}
.bn[lang="ar"] .bn-find h3{letter-spacing:0;line-height:1.35}
.bn-find h3 span{color:var(--bn-butter)}
.bn-bar{position:sticky;bottom:18px;margin:0 3.4cqi;height:76px;border-radius:40px;background:var(--bn-ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 28px;padding-inline:28px 10px;font-weight:600;font-size:19px;z-index:4;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity 200ms linear,transform 520ms var(--pop),visibility 0s linear 520ms}
.bn-bar.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* 2b (owner-approved): while a Ghazal note is in view the bar steps aside with its own hide transition (the base rule's), and comes back with its own show */
.bn-bar.on.gn-near{opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity 200ms linear,transform 520ms var(--pop),visibility 0s linear 520ms}
.bn-bar .sum{color:var(--bn-butter)}
.bn-bar .go{background:var(--bn-green);color:var(--bn-ink);border-radius:40px;padding:18px 26px}
.bn .cx-end{color:#34453a}
/* bunni note: a sticker that pops; words bounce in with overshoot */
.bn .gn{margin:4cqi 3.4cqi;padding:clamp(24px,3cqi,44px);border-radius:3cqi;background:var(--bn-butter);box-shadow:0 8px 0 var(--bn-ink);max-width:none;rotate:-1deg}
/* m-06: focus / scroll-into-view inside bunni stops above the sticky cart bar (76 px + 18 px offset + 16 px air) */
.bn .gn{scroll-margin-block-end:110px}.z-scroll:has(.bn-bar.on){scroll-padding-block-end:110px}
/* P-04: below-the-fold bunni sections are not laid out or painted until near the viewport (sizes remembered once seen) */
.bn-fav{content-visibility:auto;contain-intrinsic-block-size:auto 1100px}.bn-find{content-visibility:auto;contain-intrinsic-block-size:auto 420px}
.bn .gn:nth-of-type(even){background:#fff;box-shadow:inset 0 0 0 3px var(--bn-ink),0 8px 0 var(--bn-ink);rotate:1deg}
.bn .gn .gn-k{font-weight:600;font-size:15px}
.bn .gn .gn-k b{background:var(--bn-ink);color:var(--bn-butter);padding:6px 14px;border-radius:99px}
.bn .gn .gn-k svg{color:var(--bn-ink)}
.bn .gn .gn-t{font-weight:700;font-size:clamp(26px,3.2cqi,52px);line-height:1.12;letter-spacing:-.02em;max-width:26ch}
.bn[lang="ar"] .gn .gn-t{letter-spacing:0;line-height:1.5}
.fxon .bn .gn .gw{opacity:0;transform:translateY(.35em) scale(.5) rotate(-7deg);transition:transform 560ms var(--pop) calc(var(--i) * 55ms),opacity 140ms linear calc(var(--i) * 55ms)}
.fxon .bn .gn.in .gw{opacity:1;transform:none}
.fxon .bn .gn{transform:scale(.92);transition:transform 600ms var(--pop)}
.fxon .bn .gn.in{transform:none}
@container (max-width:700px){
  .bn-links>span:not(.bn-cart){display:none}
  .bn-cards{grid-template-columns:1fr 1fr;gap:12px}.bn-card{min-height:300px;padding:16px;border-radius:24px}
  .bn-card .pic svg{height:130px}.bn-card h4{font-size:18px}.bn-add{width:46px;height:46px;font-size:28px}.bn-card .meta{flex-direction:column;align-items:flex-start}
  .bn-h1{font-size:17cqi}.bn[lang="ar"] .bn-h1{font-size:15cqi}
  .bn-vis{height:78cqi;border-radius:28px}
  .bn .gn{margin:36px 4cqi;border-radius:26px}
  .bn-bar{height:64px;font-size:16px;padding-inline:20px 8px}.bn-bar .go{padding:14px 18px}
}

/* ================= SADA (quiet luxury) ================= */
.sd{--sd-black:#0e100f;--sd-forest:#1d3529;--sd-ivory:#efe7d8;--sd-brass:#765a30;--sd-brass-l:#c9a777;--sd-stone:#cfc4b0;
  background:var(--sd-ivory);color:var(--sd-black);font-family:"Markazi Text",serif}
.sd[lang="ar"]{font-family:"Markazi Text",serif}
.sd .serif{font-family:"Newsreader","Markazi Text",serif}
.sd[lang="ar"] .serif{font-family:"Markazi Text",serif}
.sd-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:26px 4cqi 22px;border-bottom:1px solid rgba(14,16,15,.14)}
.sd-nav .l,.sd-nav .r{display:flex;gap:2cqi;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(14,16,15,.72)}
.sd[lang="ar"] .sd-nav .l,.sd[lang="ar"] .sd-nav .r{letter-spacing:0;font-size:14px}
.sd-nav .r{justify-content:flex-end;align-items:center}
/* M-08: a 24 px minimum target (was a 1px border-bottom + 2px padding). The extra width is padding cancelled by negative margin, and the underline is drawn at the text width, 2px below it as before */
.sd-nav .pg-toggle{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:24px;min-height:24px;padding:0 3px 3px;margin-inline:-3px;background:linear-gradient(currentColor,currentColor) no-repeat 50% 100%/calc(100% - 6px) 1px}
.sd-logo{display:flex;align-items:center;gap:12px;direction:ltr}
.sd-logo svg{width:26px;height:33px}
.sd-logo b{font:400 22px/1 "Newsreader",serif;letter-spacing:.36em;margin-right:-.36em}
.sd-hero{padding:4cqi 4cqi 0}
.sd-eye{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sd-brass)}
.sd[lang="ar"] .sd-eye{letter-spacing:0;font-size:14px}
.sd-h1{font-weight:400;font-size:clamp(56px,8.4cqi,150px);line-height:.98;letter-spacing:-.025em;margin:2.4cqi 0 2.6cqi}
.sd[lang="ar"] .sd-h1{letter-spacing:0;line-height:1.35;font-weight:400;font-size:clamp(52px,7.4cqi,132px)}
.sd-h1 em{font-style:italic;color:var(--sd-forest)}
.sd[lang="ar"] .sd-h1 em{font-style:normal}
.sd-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:4cqi;margin-bottom:3cqi;flex-wrap:wrap}
.sd-intro p{margin:0;max-width:40ch;font-size:clamp(16px,1.25cqi,19px);line-height:1.65;color:rgba(14,16,15,.74)}
.sd-cta{display:inline-flex;gap:16px;align-items:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:20px 26px;background:var(--sd-black);color:var(--sd-ivory);white-space:nowrap}
.sd[lang="ar"] .sd-cta{letter-spacing:0;font-size:15px}
.sd-img{position:relative;height:clamp(320px,46cqi,760px);background:radial-gradient(110% 70% at 50% 15%,#2b4a39 0%,var(--sd-forest) 52%,#152a1e 100%);overflow:hidden}
.sd-img .c1{position:absolute;inset-inline-start:2.4cqi;top:2.2cqi;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,231,216,.72)}
.sd-img .c2{position:absolute;inset-inline-end:2.4cqi;top:2cqi;font:italic 400 clamp(16px,1.5cqi,22px) "Newsreader","Markazi Text",serif;color:rgba(239,231,216,.85)}
.sd[lang="ar"] .sd-img .c2{font-style:normal} /* Markazi has no italic: upright instead of a synthesised slant */
.sd-img .plinth{position:absolute;left:50%;bottom:0;width:40%;height:20%;transform:translateX(-50%);background:linear-gradient(180deg,#cdc2ad 0%,#b4a891 5%,#9d907a 100%)}
.sd-img .plinth::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#e0d7c4}
.sd-img .hb{position:absolute;left:39%;bottom:15.5%;width:17%}
.sd-img .hc{position:absolute;left:53%;bottom:17%;width:12%}
.sd-img svg{display:block;width:100%;height:auto}
.sd-col{padding:7cqi 4cqi 6cqi}
.sd-col-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:3cqi;border-bottom:1px solid rgba(14,16,15,.16);padding-bottom:20px}
.sd-col-h h3{font-weight:400;font-size:clamp(36px,4.6cqi,80px);margin:0;letter-spacing:-.015em;line-height:1.1}
.sd[lang="ar"] .sd-col-h h3{line-height:1.5;letter-spacing:0}
.sd-col-h h3 em{font-style:italic;color:var(--sd-forest)}
.sd[lang="ar"] .sd-col-h h3 em{font-style:normal}
.sd-col-h span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(14,16,15,.6)}
.sd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqi}
.sd-card .im{position:relative;background:#e2d8c6;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6%}
.sd-card .im svg{width:62%;height:auto;display:block}
.sd-card .no{position:absolute;inset-inline-start:16px;top:14px;font:italic 400 18px "Newsreader",serif;color:rgba(14,16,15,.62)}
.sd-card h4{font-weight:400;font-size:clamp(22px,1.9cqi,30px);line-height:1.2;margin:18px 0 6px}
.sd[lang="ar"] .sd-card h4{line-height:1.6}
.sd-card p{margin:0;font-size:14px;color:rgba(14,16,15,.66)}
.sd-card .pr{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid rgba(14,16,15,.18);font-size:14px}
.sd-add{all:unset;display:inline-block;cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;position:relative;padding:12px 0 6px}
.sd-add::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))} /* m-14: 38 → 44 px */
.sd[lang="ar"] .sd-add{letter-spacing:0;font-size:14px}
.sd-add::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(.3);transform-origin:var(--o-start) 50%;transition:transform 900ms var(--leap)}
.sd-add:hover::after,.sd-add[aria-pressed="true"]::after{transform:scaleX(1)}
.sd-visit{background:var(--sd-black);color:var(--sd-ivory);padding:7cqi 4cqi 8cqi;display:grid;grid-template-columns:1fr minmax(0,34%);gap:4cqi;align-items:center}
.sd-visit .k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sd-brass-l)}
.sd[lang="ar"] .sd-visit .k{letter-spacing:0;font-size:14px}
.sd-visit h3{font-weight:400;font-size:clamp(34px,4.2cqi,72px);line-height:1.08;margin:20px 0 24px}
.sd[lang="ar"] .sd-visit h3{line-height:1.55}
.sd-visit h3 em{font-style:italic;color:var(--sd-stone)}
.sd[lang="ar"] .sd-visit h3 em{font-style:normal}
.sd-visit p{font-size:16px;line-height:1.65;color:rgba(239,231,216,.74);margin:0}
.sd-visit .cupbox{aspect-ratio:4/5;background:var(--sd-forest);display:flex;align-items:center;justify-content:center}
.sd-visit .cupbox svg{width:68%}
.sd .cx-end{background:var(--sd-black);color:rgba(239,231,216,.74);border-top:1px solid rgba(239,231,216,.12)}
/* SADA note: an ivory interstitial, set in large serif; lines arrive slowly */
.sd .gn{margin:0 auto;padding:clamp(64px,9cqi,150px) 4cqi;max-width:none;text-align:center;justify-items:center}
.sd .gn .gn-k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sd-brass)}
.sd[lang="ar"] .gn .gn-k{letter-spacing:0;font-size:14px}
.sd .gn .gn-k svg{color:var(--sd-brass)}
.sd .gn .gn-t{font:400 clamp(28px,3.4cqi,58px)/1.25 "Newsreader","Markazi Text",serif;max-width:24ch;letter-spacing:-.01em}
.sd[lang="ar"] .gn .gn-t{font-family:"Markazi Text",serif;line-height:1.75;letter-spacing:0}
.sd .gn .gn-t em{font-style:italic;color:var(--sd-forest)}
.sd .gn.dark{background:var(--sd-forest);color:var(--sd-ivory)}
.sd .gn.dark .gn-k,.sd .gn.dark .gn-k svg{color:var(--sd-brass-l)}
.fxon .sd .gn .gw{opacity:0;transform:translateY(14px);transition:opacity 1400ms cubic-bezier(.4,0,.2,1) calc(var(--i) * 90ms + 150ms),transform 1800ms var(--leap) calc(var(--i) * 90ms + 150ms)}
.fxon .sd .gn.in .gw{opacity:1;transform:none}
.fxon .sd .gn .gn-k{opacity:0;transition:opacity 1200ms linear}
.fxon .sd .gn.in .gn-k{opacity:1}
@container (max-width:700px){
  .sd-nav{grid-template-columns:auto 1fr}.sd-nav .l{display:none}
  .sd-cards{grid-template-columns:1fr}
  .sd-visit{grid-template-columns:1fr}
  .sd-h1{font-size:15cqi}.sd[lang="ar"] .sd-h1{font-size:13.5cqi}
  .sd:not([lang="ar"]) .sd-img .c2{top:calc(2.2cqi + 11px * 1.5 + 10px)} /* M-15: EN captions stack (c2 under c1) instead of overlapping */
  .sd-img{height:100cqi}.sd-img .plinth{width:70%}.sd-img .hb{left:26%;width:32%}.sd-img .hc{left:52%;width:22%}
  .sd-hero,.sd-col,.sd-visit{padding-inline:6cqi}
}

/* ================= FUTURE NETS inside the sheet ================= */
.pg.fnw{--pg-pad:var(--margin)}
.fn-shot-hero{position:relative;height:calc(100svh - 46px);min-height:420px;overflow:hidden;background:#12394A}
.fn-shot-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fn-shot-hero .cap{inset-block-end:16px;inset-inline-start:16px}
.fn-cue{position:absolute;inset-block-end:16px;inset-inline-end:16px;background:#FAF8F3;color:#12394A;padding:10px 14px;font:var(--w-semi) 13px/1.3 var(--ff-text)}
@media (max-width:760px){.fn-shot-hero .cap{inset-block-end:calc(16px + 13px * 1.3 + 20px + 8px);max-width:calc(100% - 32px)}} /* M-11 (390): the caption moves up to sit 8px above the scroll cue (cue = 13px/1.3 + 2x10px padding), so both stay readable */
/* P-01: core.css sets IBM Plex here; C2 maps those to the A1 frame faces.
   Future Nets' display type (--fn-display-*: Saira Semi Condensed, Cairo) is unchanged; only the fallbacks behind it no longer name IBM Plex. */
.pg.fnw{--fn-display-en:"Saira Semi Condensed",var(--ff-en);--fn-display-ar:"Cairo",var(--ff-ar-text);font-family:var(--ff-text)}
.pg .cap{font:var(--w-med) 11px/1.3 var(--ff-text)}
/* FN caption: the date of the capture actually shown (the hero <picture> sources: 1440 and 390 captured 2026-11-10, tablet 834x1112 / 1112x834 captured 2026-11-11) */
.pg .cap-d2{display:none}
@media (760px < width <= 1194px) and (orientation:portrait),(760px < width <= 1194px) and (min-height:600px){.pg .cap-d1{display:none}.pg .cap-d2{display:inline}}
.pg .cap:lang(ar){font-size:12px}
.pg.fnw .beat-n,.pg.fnw .fact b,.pg.fnw .pin,.pg.fnw .legend li > span:first-child,.pg.fnw .flow .k{font-family:var(--ff-en);font-variant-numeric:tabular-nums}
.pg.fnw .fnw-facts dd{font-weight:var(--w-semi)}
.pg.fnw .fnw-hero{padding-block-start:0;min-height:0}
@media (max-width:760px){.pg.fnw .fnw-hero{grid-template-columns:minmax(0,1fr)}.pg.fnw .fnw-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg.fnw .fnw-text{padding-block:clamp(48px,6vw,96px)}
.pg.fnw .fnw-photo{min-height:420px}
.fn-note{display:flex;gap:10px;align-items:center;font:var(--w-semi) 13px/1.4 var(--ff-text);color:var(--fn-accent)}
.fn-note svg{height:18px;width:auto;aspect-ratio:310/472}
.pg.fnw .fnw-end{justify-content:space-between}
.pg.fnw .fnw-end a{position:relative}.pg.fnw .fnw-end a::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))} /* m-14: live link 25-28 → 44 px */
.pg.fnw .fnw-beat{content-visibility:auto;contain-intrinsic-block-size:auto 1200px} /* P-04: FN beats are not laid out / painted until near the viewport */
.fxon .pg.fnw .gn{opacity:0;transform:translateY(14px);transition:opacity 300ms linear,transform 450ms cubic-bezier(.33,1,.68,1)}
.fxon .pg.fnw .gn.in{opacity:1;transform:none}
.pg.fnw .gn{max-width:62ch}
.pg.fnw .gn .gn-t{font:700 clamp(1.4rem,1rem + 1.2vw,2.1rem)/1.25 var(--fn-display-en);color:var(--fn-ink)}
.pg.fnw[lang="ar"] .gn .gn-t{font:700 clamp(1.3rem,1rem + 1vw,1.9rem)/1.6 var(--fn-display-ar)}
.pg.fnw .gn .gn-k{font:700 13px/1 var(--fn-display-en);letter-spacing:.14em;text-transform:uppercase;color:var(--fn-accent)}
.pg.fnw[lang="ar"] .gn .gn-k{font:700 15px/1.4 var(--fn-display-ar);letter-spacing:0;text-transform:none}

/* ================= PLAN (configurator) ================= */
.plan{--c-bg:#000;--c-ink:#fff;--c-mute:var(--ash);--c-line:var(--hair);--c-sel-bg:transparent;--c-sel-ink:var(--lime);--c-tint:rgba(255,255,255,.05);--c-field:#000;--c-err:var(--lime);
  --c-sum-bg:#000;--c-sum-ink:#fff;--c-sum-line:var(--hair);
  --c-q-font:800 clamp(1.9rem,1.2rem + 2.4vw,3.4rem)/1.6 var(--ff-ar-disp);--c-opt-font:700 1.3rem/1.6 var(--ff-ar-text);--c-sum-font:800 1.3rem/1.5 var(--ff-ar-disp);display:grid;gap:40px}
[lang="en"] .plan{--c-q-font:800 clamp(1.9rem,1.2rem + 2.4vw,3.4rem)/1.08 var(--ff-en);--c-opt-font:600 1.3rem/1.25 var(--ff-en);--c-sum-font:800 1.3rem/1.2 var(--ff-en)}
[lang="en"] .plan .cfg-q,[lang="en"] .plan .cfg-sum h3{letter-spacing:-.035em}
.plan .cfg-sub p,.plan .cfg-err{font-weight:var(--w-semi)}
/* Arabic descenders: the question and its first rule never touch */
.plan .cfg-opts legend{padding-block-end:.55em}
[lang="ar"] .plan .cfg-opts legend{padding-block-end:.8em}
.plan .opt input:checked + .row{box-shadow:inset 0 -1px 0 var(--lime)}
.plan .opt:first-of-type{border-block-start:1px solid var(--lime)}
.plan .opt .row{padding-block:18px}
.plan .cfg-sum{box-shadow:inset 0 0 0 1px var(--lime)}
.plan .cfg-prog span{background:var(--lime)}
.plan .chip span{box-shadow:inset 0 0 0 1px #fff}
.plan .chip input:checked + span{background:var(--lime);color:#000;box-shadow:none}
.plan .chip input:focus-visible + span{outline-color:var(--lime)}
.plan-head{display:grid;gap:16px;max-width:60ch}
.cfg-fields{display:grid;gap:14px;max-width:520px}
.cfg-fields label{display:grid;gap:6px;font-size:14px;color:var(--ash)}
.cfg-fields input,.cfg-fields select{font:inherit;font-size:16px;min-height:48px;padding:10px 12px;border:1px solid #fff;border-radius:0;background:#000;color:#fff;width:100%;min-width:0} /* M-12: fields never widen the step */
.plan .cfg-stage{min-width:0} /* M-12: the stage stays inside its grid track (AR step 3 at 390 scrolled sideways) */
.cfg-fields input:focus-visible,.cfg-fields select:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.tel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;direction:ltr;position:relative} /* F-01: the code field now fits its placeholder (supersedes M-13) */
/* F-01 (owner Q1): dial-code combobox, in the existing field style (white hairline on black, lime for focus and choice) */
.cb{min-width:0}
.cb-in{width:100%}
.cb-list{position:absolute;z-index:5;inset-inline:0;top:calc(100% + 4px);margin:0;padding:0;list-style:none;max-height:min(288px,46vh);overflow-y:auto;overscroll-behavior:contain;background:#000;border:1px solid #fff;font-size:16px;color:#fff}
.cb-opt{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;padding:10px 12px;cursor:pointer;border-block-end:1px solid var(--hair)}
.cb-opt:last-child{border-block-end:0}
.cb-opt bdi{color:var(--ash);font-variant-numeric:tabular-nums}
.cb-opt[aria-selected="true"],.cb-opt[aria-selected="true"] bdi{color:var(--lime)}
.cb-opt.on{outline:2px solid var(--lime);outline-offset:-2px}
@media (hover:hover){.cb-opt:hover{background:rgba(255,255,255,.05)}}
.cfg-preview{display:grid;gap:14px;padding:20px;border:1px dashed var(--hair)}
.cfg-preview h4{margin:0;font-size:1rem}
.plan .cfg-err-in{margin-block-end:10px} /* M-04: the message inside the unanswered fieldset */
/* m-13 (owner-approved): one-line service + price above Next, shown on the rail layout only */
.cfg-mini{display:none;margin:0;font-size:.875rem;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-mini b{color:var(--paper);font-weight:var(--w-semi)}


/* ================= FOOTER ================= */
.site-f{position:relative;overflow:hidden;padding:clamp(100px,12vw,180px) var(--margin) 90px;display:grid;gap:28px;border-block-start:1px solid var(--hair)}
.site-f h2{margin:0;font-size:clamp(2.6rem,1.3rem + 5vw,7rem);line-height:1.4;max-width:12ch;position:relative}
[lang="en"] .site-f h2{line-height:1.02}
.site-f .row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;position:relative}
.site-f small{color:var(--ash)}
/* m-14: footer links: Instagram 44 px, the small legal links 24 px (their rows sit 12 px apart, so larger areas would overlap) */
.site-f .row a:not(.btn){position:relative}.site-f .row a:not(.btn)::before{content:"";position:absolute;inset-inline:0;inset-block:min(0px,calc(50% - 22px))}
.site-f .row small a:not(.btn)::before{inset-block:min(0px,calc(50% - 12px))}

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-block-start:clamp(150px,24vh,210px)}
  .hero-mark{height:15vh;inset-block-start:92px}
  .horn{height:clamp(110px,17vh,150px)}
  .h1{font-size:clamp(2.8rem,14vw,4.6rem)}
  [lang="en"] .h1{font-size:clamp(2.6rem,12.5vw,4.4rem)}
  .svc li{grid-template-columns:1fr}.svc .pr{justify-self:start;text-align:start}
  .appr{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .sites-head{grid-template-columns:1fr}
}
/* phones and tablet portrait (owner #26): the fan becomes a swipeable stack; the zoom becomes a full-screen sheet. Same condition as PHONE in c2.js */
@media (max-width:760px), (orientation:portrait) and (max-width:1024px){
  .rig,.slot,.w3d,.whv,.win{pointer-events:auto}
  .fan{perspective:none;overflow:visible}
  .rig{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--margin) 12px;scrollbar-width:none;min-height:0;height:auto;transform:none!important;overscroll-behavior-x:contain} /* N-02: a swipe at the rail end does not trigger browser back */
  .cfg-mini{display:block}
  .rig::-webkit-scrollbar{display:none}
  /* B34-N1: with a fine pointer the focus-within lift (-6 px) put the ring's top edge outside the rail's 8 px padding (.rig clips, overflow-x:auto).
     16 px padding, pulled back 8 px with a negative margin: the cards sit exactly where they did, the ring now fits. The lift itself is unchanged */
  @media (hover:hover) and (pointer:fine){ .rig{padding-block-start:16px;margin-block-start:-8px} }
  .slot{position:relative;left:auto;top:auto;flex:0 0 var(--ww);scroll-snap-align:center}
  .w3d{transform:none!important}
  .w-refl{display:none}
  .lbl{position:static;transform:none;max-width:none;width:auto;margin-top:18px}
  .teaser .fan{margin-inline:calc(var(--margin) * -1);height:auto;-webkit-mask-image:none;mask-image:none}
  .teaser .slot{flex-basis:62vw}
  .v-sites{grid-template-rows:auto auto auto;align-content:start;gap:24px}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .whv,.w-sheen,.slot{transition:none!important}
  .bn-mq .track{animation:none}
}
/* LAUNCH (owner 2026-11-12): privacy notice, shown once after the intro; fixed, so it never shifts the page. Existing tokens and .btn only */
.pn{position:fixed;z-index:50;inset-inline:auto var(--margin);inset-block-end:max(16px,env(safe-area-inset-bottom));max-width:min(560px,calc(100vw - 2 * var(--margin)));display:flex;align-items:center;gap:12px 18px;padding:14px 16px;background:#000;border:1px solid var(--hair);color:var(--ash);font-size:.875rem;line-height:1.5}
.pn p{margin:0;flex:1 1 auto;min-width:0}
.pn a{color:var(--paper);text-underline-offset:3px}
.pn a:focus-visible,.pn .btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pn .btn{flex:none}
.pn{transition:opacity 200ms linear,transform 520ms var(--leap),visibility 0s linear 0s}
.pn.away{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 200ms linear,transform 520ms var(--leap),visibility 0s linear 520ms}
@media (prefers-reduced-motion:reduce){.pn,.pn.away{transition:none}}
.pn.pn-slot{position:absolute;inset-block-end:auto} /* Update 3 (D1): where the fixed spot would cover the hero CTAs or help line, the notice sits in the free space under the help line; top is set by c2.js */