/* THE BOARD — order terminal (BYTE, 9 Oct 2026). One file, tokens on :root.
   Logical properties throughout: the Arabic mirror is structural, never a transform, and no
   mirroring transform is used anywhere. Only transform and opacity animate. No filter, no
   backdrop-filter, no box-shadow / width / height / top / left transitions, no blend modes.
   Palette from GRID §3.1, including its two replacement tokens (--dim-ok, --edge) for the
   dashboard pairs that fail WCAG on a public page. */

/* ───────── fonts · self-hosted, OFL texts travel with them in fonts/ ─────────
   The Arabic faces carry an Arabic unicode-range, so the browser downloads them
   only when Arabic glyphs are actually rendered: they never load on the English page. */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/ChakraPetch-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/HankenGrotesk-400-600-latin.woff2) format("woff2");
  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:"Share Tech Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ShareTechMono-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/ReadexPro-400-600-arabic.woff2) format("woff2");
  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";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/IBMPlexSansArabic-400-arabic.woff2) format("woff2");
  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:"Plex Arabic";font-style:normal;font-weight:500 600;font-display:swap;
  src:url(fonts/IBMPlexSansArabic-600-arabic.woff2) format("woff2");
  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}
/* Bodoni Moda (OFL, google/fonts ofl/bodonimoda), weight 400 as in the studio original, opsz axis kept
   so it optically sizes like the original. Subset to the wordmark's letters only: C H A P T E R O N
   + space (2.9 KB). font-display:block on purpose: this face IS the mark, so a substitute serif must
   never be shown as if it were the wordmark. It is only fetched when the work bay opens. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:block;
  src:url(fonts/BodoniModa-400-wordmark.woff2) format("woff2");
  unicode-range:U+0020,U+00A0,U+0041,U+0043,U+0045,U+0048,U+004E-0050,U+0052,U+0054}

/* ───────── tokens ───────── */
:root{
  color-scheme:dark;
  --void:#07060D; --night:#0F0B1C; --panel:#141022; --panel-2:#1D1731;
  --line:#342A55;            /* decorative hairlines ONLY — 1.5:1, never a meaningful edge */
  --edge:#6A5BA0;            /* every border that carries meaning — 3.2:1 on --panel */
  --ink:#F2EAFB; --cream:#F2E6C9; --muted:#B4A8D2;
  --dim-ok:#8C81AE;          /* quietest text — replaces the dashboard's --dim (4.1:1, fails) */
  --ochre:#D79A2B; --hot:#FF8A3D; --btn-ink:#1A1410; --cyan:#2DE2E6;

  --disp:"Chakra Petch","Arial Narrow",Impact,sans-serif;
  --body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;

  --t13:13px; --t15:15px; --t17:17px; --t21:21px; --t27:27px; --t34:34px;
  --gut:24px; --max:342px; --row:64px;
  --e:cubic-bezier(.22,1,.36,1);
}
/* Arabic: display steps 8% down, body never below the 15px floor, never letterspaced. */
html[lang=ar]{--t17:16px;--t21:19px;--t27:25px;--t34:31px;
  --disp:"Readex Pro","Plex Arabic",system-ui,sans-serif;
  --body:"Plex Arabic","Readex Pro",system-ui,sans-serif;
  --mono:"Readex Pro","Plex Arabic",system-ui,sans-serif}

@media(min-width:600px){:root{--gut:32px;--max:536px;--row:68px}
  .row{grid-template-columns:4.6em minmax(0,1fr) 20px;gap:12px;padding-block:10px}
  .route{grid-template-columns:minmax(0,1fr) 20px;gap:12px;padding-block:10px}
  .chev{inline-size:20px;block-size:20px}}
@media(min-width:768px){:root{--gut:48px;--max:640px;--row:72px;--t27:30px}}
@media(min-width:1100px){:root{--gut:64px;--max:1280px;--t34:40px}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--void);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);font:400 var(--t15)/1.5 var(--body);overflow-x:hidden}
html[lang=ar] body{line-height:1.85}
html[lang=ar] *{letter-spacing:0!important}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:600;line-height:1.06;text-wrap:balance}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.3}
p,ul,ol{margin:0}
ul,ol{padding-inline-start:1.1em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.sr{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skiplink{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;padding:12px 18px;
  background:var(--cream);color:var(--btn-ink);font-weight:600;transform:translateY(-250%)}
.skiplink:focus{transform:none}
.mono,.num,.step,.bn,.bk,.bv,.wl{font-family:var(--mono);font-size:var(--t13);letter-spacing:.08em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
html[lang=ar] .mono,html[lang=ar] .num,html[lang=ar] .step,html[lang=ar] .bn,html[lang=ar] .bk,
html[lang=ar] .bv,html[lang=ar] .wl{text-transform:none;font-weight:400}

/* ───────── shell ───────── */
.shell{position:relative;max-inline-size:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);
  min-block-size:100svh;display:flex;flex-direction:column}
@media(min-width:1100px){.shell{padding-inline:var(--gut)}}

/* ───────── the gold · round 2 ─────────
   Wajdy asked for much more of it. GRID's α .12 cap was never a taste rule: it is the single
   number at which an --edge border (3.48:1 on --void — the thinnest headroom on the page) still
   clears 3:1 and --dim-ok text still clears 4.5:1 ANYWHERE on the page. Raising that one number
   is therefore not available. The ceilings, each from the quietest thing painted on top:

     --edge border  (.lang, .route, .bootskip, an open .body's start border)  3:1   → α .123
     --dim-ok TEXT  (.bootlines, .priv, .cred)                                4.5:1 → α .17
     --ochre .num / --muted .rs / --dim-ok .ind chevron — the BOARD only      4.5/3 → α .35
     --cream .ask / .rl — the headline band                                   3:1   → α .75+

   Everything inside an open bay sits on opaque --night and is shielded, so the board is the one
   region that can carry real light, and the headline band inside it can carry a lot. So the gold
   is one lamp hung ABOVE the headline, falling through the rows the way light actually falls:
   α .30 behind the headline and out into both gutters, ~.23 at row 01, ~.09 by row 03, ~0 by the
   time it reaches the route panel and the footer, which are the two --edge/--dim-ok zones below.
   The follower lamp keeps GRID's .12 and is simply much larger; it may ride on top of the bloom
   anywhere on the board (worst stack ≈ .33, still inside the .35 board ceiling) and is dimmed to
   .074 on the route panel, which is the only --edge border it ever parks on.
   Still only transform and opacity animate. No filter, no backdrop-filter, no blend mode. */

/* the follower · physical left/top/margins on purpose: app.js positions it from measured pixels
   (getBoundingClientRect), which are physical in both directions. It is a glow, not layout. */
.lampwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lamp{position:absolute;left:0;top:0;inline-size:min(780px,190vw);block-size:300px;
  margin-top:-150px;margin-left:calc(min(780px,190vw) / -2);pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(closest-side,
    rgba(215,154,43,.12) 0%,rgba(215,154,43,.088) 32%,rgba(215,154,43,.042) 60%,
    rgba(215,154,43,.014) 82%,rgba(215,154,43,0) 100%);
  transition:opacity .2s linear,transform .3s var(--e)}
.lamp.on{opacity:1}
/* parked on the route panel's --edge border: .12 × .62 = .074, which reads 3.2:1 where round 1
   read 3.04:1. app.js passes this; the lamp never guesses where it is. */
.lamp.on.soft{opacity:.62}

/* the bloom · the board box only, behind its own content. Absolutely positioned, so it adds no
   layout, no CLS, no animation and no asset. It does not exist during the boot — .board is
   display:none there, and the boot's ceiling is .123.
   TWO gradients, both shaped to put the light where no text and no --edge border is:
     1. a wide ellipse hung off the TOP edge, 210px tall — a LENGTH, not a share of the board
        box, because that box changes height with the language and with an open bay, and a
        share of it put α .30 on row 01's --muted sub-line at 820/ar (measured 4.43:1, under
        4.5). At a fixed 210px it is α .27 behind the --cream headline (whose own ceiling is
        α .75), ~.11 by row 01 and ~0 from row 02 down, so the row band and its hairlines stay
        close to what round 1 shipped.
   WHY IT IS NOT ATTACHED TO THE BOARD: a glow scoped to an element's own box is cut off by
   that box, and the cut is a straight line you can see — the first build of this had a visible
   gold rectangle around the menu. This one is a single div hung at the TOP OF THE PAGE, wider
   than the screen (min(1500px,200vw)) and taller than the lit area, so every edge of it is
   either off-screen or already at alpha 0. The only boundary anyone sees is the edge of their
   own screen.
   The ellipse is centred 112px down — on the headline band — and is shaped so that:
     y 0–48   the header, where .lang carries an --edge border       ≈ α .09 max
     y 75–110 the --cream headline, which can carry α .75            ≈ α .27  ← the gold
     y ~157   row 01, --ochre number / --muted sub / --dim-ok chevron ≈ α .15
     y ~230   row 02 and everything under it                         ≈ α .03 → 0
   so the light lands where there is room for it and is already gone by the route panel and the
   footer. During the boot it is dimmed (the boot's --dim-ok lines cap at α .17) and while a bay
   is open it is dimmed again (the open body's 2px --edge start border caps at α .123). */
/* Every number here is the one the sweep passed, not the one that looked best on a swatch.
   Pushed further — peak .30 with the centre at 124px — the measured page broke in four places
   at once: .lang's border fell to 2.61, the Arabic ribbon's to 2.07, and at 1366 the standing
   route panel (which moves up into the top-right at 1100 and lands inside the lit band) fell
   to 2.28. The header strip and the route panel are the two walls this lamp pushes against. */
:root{--glow-y:112px;--glow-x:50%;--glow-w:min(900px,160vw)}
.glow{position:absolute;left:50%;top:0;inline-size:min(1500px,200vw);block-size:400px;
  margin-left:calc(min(1500px,200vw) / -2);pointer-events:none;z-index:0;
  background:radial-gradient(var(--glow-w) 190px at var(--glow-x) var(--glow-y),
    rgba(215,154,43,.27) 0%,rgba(215,154,43,.19) 16%,rgba(215,154,43,.095) 34%,
    rgba(215,154,43,.05) 52%,rgba(215,154,43,.018) 72%,rgba(215,154,43,0) 100%)}
/* From 1100 the route panel stands in the top-RIGHT field, inside the lit band, and its --edge
   border fell to 2.53:1 there. The lamp therefore stops being page-centred and centres on the
   menu column instead. The 214px offset is exact and constant: the right field is 380px plus a
   48px gap, so the menu column's centre is always (380 + 48) / 2 = 214px left of the page's. */
@media(min-width:1100px){
  html[dir=ltr]{--glow-x:calc(50% - 214px)}
  html[dir=rtl]{--glow-x:calc(50% + 214px)}
  :root{--glow-w:380px}
}
/* the boot: its own quietest ink is --dim-ok text, which caps the ground at α .17. */
html.js.path-cold .glow,html.js.path-warm .glow{opacity:.40}
/* a bay is open: its body's 2px --edge start border now sits on this ground. .27 × .42 = .113,
   under the .123 ceiling. app.js sets html.bayopen alongside .bays.hasopen — neither layer ever
   infers from geometry where it is. */
html.bayopen .glow{opacity:.42}

.hdr,.rail,.stage,.route,.foot,.noscript{position:relative;z-index:1}

.hdr{block-size:52px;display:flex;align-items:center;gap:12px}
.name{display:inline-flex;align-items:center;gap:9px;min-block-size:44px;margin-inline-end:auto;padding-inline-end:8px}
/* the mark is one path with fill:currentColor on the <svg>; the colour lives here, so it is
   tintable and never renders black. INK's notes, 9 Oct. */
.mark{display:block;flex:none;color:var(--ochre)}
.nametext{font-family:var(--disp);font-size:var(--t17);color:var(--cream);letter-spacing:.01em}
html[lang=ar] .nametext{letter-spacing:0}
.lang{min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;
  padding-inline:12px;font-size:var(--t15);font-weight:600;color:var(--muted);border:1px solid var(--edge)}
.lang:hover{color:var(--cream)}

/* the hairline · one element, three jobs: boot progress → menu rule → brief progress */
.rail{block-size:1px;margin-block:6px;background:var(--line)}
/* transform-origin takes no logical keywords, so the RTL mirror is an explicit rule. */
.hair{display:block;block-size:1px;background:var(--ochre);transform-origin:left center;transform:scaleX(1)}
html[dir=rtl] .hair{transform-origin:right center}
html.js.path-cold .hair{animation:draw 900ms linear both}
html.js.path-warm .hair{animation:draw 420ms linear both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hair.prog{transition:transform .2s ease-out}

.stage{flex:1 0 auto;padding-block-start:10px}

/* ───────── BEAT A · boot ───────── */
/* 62svh is measured, not chosen for looks: it is the tallest the boot box can be while the
   permanent message route still sits above a real phone's fold during the boot, and the
   shortest that keeps the boot → board height change under the 0.1 CLS budget. */
.boot{display:none;min-block-size:62svh;padding-block:8px 24px;position:relative}
html.js.path-cold .boot,html.js.path-warm .boot{display:block}
html.js.path-cold .board,html.js.path-warm .board{display:none}
.boot.leaving{position:absolute;inset-block-start:0;inset-inline:0;opacity:0;pointer-events:none;
  transition:opacity .16s linear;background:var(--void)}
/* keep the tagline clear of the SKIP button, which is pinned to the same corner */
.bootinfo{font-size:var(--t17);color:var(--cream);max-inline-size:28ch;margin-block-end:28px;
  padding-inline-end:76px}
.bootlines{list-style:none;padding:0;display:grid;gap:10px;max-inline-size:26ch}
html.path-warm .bootlines{visibility:hidden}
.bootlines li{display:grid;grid-template-columns:2.4em 1fr auto;gap:10px;align-items:baseline;
  color:var(--dim-ok);opacity:0}
.bootlines li.on{opacity:1;transition:opacity .12s ease-out}
html.rm .bootlines li{opacity:1;transition:none}
.bn{color:var(--ochre)}
.bv{color:var(--muted)}
.bootskip{position:absolute;inset-block-start:0;inset-inline-end:0;min-inline-size:56px;min-block-size:44px;
  padding-inline:12px;border:1px solid var(--edge);color:var(--cream);font-family:var(--mono);
  font-size:var(--t13);letter-spacing:.08em;cursor:pointer}
html[lang=ar] .bootskip{font-family:var(--body);font-weight:600;letter-spacing:0}
.bootskip:hover{border-color:var(--ochre);color:var(--ochre)}
/* a signature in the bottom-start corner, not a spinner */
.bootmark{color:var(--ochre);position:absolute;inset-block-end:4px;inset-inline-start:0;display:block;opacity:.9}

/* ───────── BEAT B · the board ───────── */
.ask{font-size:var(--t27);color:var(--cream);margin-block-end:12px}
.bays{display:block}

/* A bay is one grid track holding the row. Collapsing a bay interpolates 1fr → 0fr, which is
   the only cheap way to collapse a row without animating height (GRID §3.5). The open bay
   leaves the fr system entirely (display:block) and its panel fades up instead. */
.bay{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s var(--e),opacity .16s linear}
.bay>.body{display:none}
.bay.open{display:block}
.bay.open>.body{display:block;animation:fadeup .22s var(--e) .26s both}
html:not(.js) .bay{display:block}
html:not(.js) .bay>.body{display:block;animation:none}
.bays.hasopen .bay:not(.open){grid-template-rows:0fr;opacity:0;pointer-events:none}
.bays.hasopen .bay:not(.open)>.row{min-block-size:0;padding-block:0;overflow:hidden;border-block-end:0}
.bays.hasopen .div{display:none}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the bay row · the whole row is the hit area */
.row{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 18px;gap:10px;align-items:center;
  min-block-size:var(--row);padding-block:8px;border-block-end:1px solid var(--line);cursor:pointer}
.row::before{content:"";position:absolute;inset-block:0;inset-inline-start:-10px;inline-size:2px;
  background:var(--ochre);transform:scaleX(0);transform-origin:left center;transition:transform .12s ease-out}
html[dir=rtl] .row::before,html[dir=rtl] .route::before{transform-origin:right center}
.row:hover::before,.row:focus-visible::before,.bay.open>.row::before{transform:scaleX(1)}
.num{position:relative;display:block;color:var(--ochre);align-self:center}
.num .n,.num .wl{display:block;transition:opacity .16s ease}
.num .wl{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.row:hover .num .n,.row:focus-visible .num .n,.bay.open>.row .num .n{opacity:0}
.row:hover .num .wl,.row:focus-visible .num .wl,.bay.open>.row .num .wl{opacity:1}
.rtx{display:grid;gap:3px;min-inline-size:0}
.rl{font-family:var(--disp);font-size:var(--t21);color:var(--cream);line-height:1.06}
html[lang=ar] .rl{line-height:1.35}
.rs{font-size:var(--t15);color:var(--muted);line-height:1.4}
html[lang=ar] .rs{line-height:1.7}
.ind{display:grid;place-items:center;color:var(--dim-ok)}
.row:hover .ind,.row:focus-visible .ind{color:var(--ochre)}
.chev{inline-size:18px;block-size:18px}
.chevr,html[dir=rtl] .chev{display:none}
html[dir=rtl] .chevr{display:block}
.div{border:0;border-block-start:1px solid var(--line);margin-block:10px 6px;transition:opacity .16s linear}

/* rows rise once, after the boot */
.bays.rise .bay{animation:rise .24s var(--e) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────── BEAT C · the open bay ───────── */
.body{background:var(--night)}
.bay.open>.body{border-inline-start:2px solid var(--edge)}
.body>*{margin-inline:16px}
.body>*:first-child{margin-block-start:20px}
.body>*:last-child{margin-block-end:24px}
html:not(.js) .body{margin-block-end:8px}
.speech{border-inline-start:2px solid var(--cyan);padding-inline-start:12px;color:var(--cyan);
  font-size:var(--t15);margin-block-end:20px}
.honest{display:grid;gap:18px;margin-block-end:16px}
.hcol h3{font-size:var(--t13);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ochre);margin-block-end:8px}
html[lang=ar] .hcol h3{font-family:var(--disp);letter-spacing:0;text-transform:none;font-size:var(--t15)}
.hcol ul{display:grid;gap:5px;color:var(--ink);font-size:var(--t15)}
.quote{color:var(--cream);font-size:var(--t15);padding-block:12px;border-block:1px solid var(--line);
  margin-block-end:20px}
.qstatic h3{font-size:var(--t13);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ochre);margin-block-end:8px}
html[lang=ar] .qstatic h3{font-family:var(--disp);letter-spacing:0;text-transform:none;font-size:var(--t15)}
.qstatic ol{display:grid;gap:5px;color:var(--muted);font-size:var(--t15);margin-block-end:20px}

/* the brief-builder */
.qhead{display:flex;align-items:center;gap:12px;margin-block-end:14px}
.step{color:var(--dim-ok);margin-inline-end:auto}
.closeq{min-block-size:44px;min-inline-size:44px;padding-inline:14px;border:1px solid var(--edge);
  color:var(--muted);cursor:pointer;font-size:var(--t15)}
.closeq:hover{color:var(--cream);border-color:var(--ochre)}
.qlist{display:grid;gap:22px}
.q{display:block}
.q>label,.qlab{display:block;font-size:var(--t17);color:var(--cream);font-family:var(--disp);
  line-height:1.2;margin-block-end:10px}
html[lang=ar] .q>label,html[lang=ar] .qlab{line-height:1.5}
.q input[type=text],.q input[type=number],.q textarea{inline-size:100%;min-block-size:48px;padding:12px 14px;
  background:var(--panel);color:var(--ink);border:1px solid var(--edge);font:400 var(--t15)/1.5 var(--body)}
.q textarea{min-block-size:112px;resize:vertical}
.q input::placeholder,.q textarea::placeholder{color:var(--dim-ok)}
.q input:focus-visible,.q textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-b{position:relative;min-block-size:44px;padding:10px 16px;border:1px solid var(--edge);
  background:var(--panel);color:var(--ink);font-size:var(--t15);cursor:pointer;overflow:hidden}
.chip-b:hover{border-color:var(--ochre)}
.chip-b[aria-checked=true]{background:var(--ochre);color:var(--btn-ink);border-color:var(--ochre);font-weight:600}
/* selected is never colour alone: a filled corner notch as well */
.chip-b[aria-checked=true]::after{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  inline-size:0;block-size:0;border-block-start:8px solid var(--btn-ink);border-inline-start:8px solid transparent}
.qextra{margin-block-start:10px}
.skipq{margin-block-start:10px;min-block-size:44px;padding-inline:4px;color:var(--dim-ok);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:var(--t15)}
.skipq:hover{color:var(--cream)}
.err{color:var(--hot);font-size:var(--t15);margin-block-start:8px;min-block-size:1px}
.qnav{display:flex;gap:10px;margin-block-start:20px}
.navb{min-block-size:48px;min-inline-size:96px;padding-inline:18px;border:1px solid var(--edge);
  color:var(--cream);cursor:pointer;font-size:var(--t15);font-weight:600}
.navb:hover{border-color:var(--ochre)}
.navb[disabled]{opacity:.45;cursor:default}

.prev{margin-block-start:26px;border-block-start:1px solid var(--line);padding-block-start:18px}
.prev h3{font-size:var(--t13);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ochre);margin-block-end:10px}
html[lang=ar] .prev h3{font-family:var(--disp);letter-spacing:0;text-transform:none;font-size:var(--t15)}
.pv{margin:0;padding:14px;background:var(--panel);border:1px solid var(--edge);color:var(--cream);
  font:400 var(--t15)/1.6 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
html[lang=ar] .pv{text-align:start}
.cnt{color:var(--dim-ok);font-size:var(--t13);margin-block-start:8px;font-variant-numeric:tabular-nums}
.trim{color:var(--ochre);font-size:var(--t15);margin-block-start:8px}
.acts{display:grid;gap:10px;margin-block-start:18px}
.wa{display:flex;align-items:center;justify-content:center;text-align:center;min-block-size:52px;
  padding:14px 18px;font-size:var(--t15);font-weight:600;cursor:pointer}
.wa.primary{background:var(--hot);color:var(--btn-ink);border:1px solid var(--hot)}
.wa.ghost{border:1px solid var(--edge);color:var(--cream)}
.wa.ghost:hover{border-color:var(--ochre);color:var(--ochre)}
.said{color:var(--cyan);font-size:var(--t15);margin-block-start:8px;min-block-size:1px}

/* ───────── the work ───────── */
.grid{display:grid;gap:22px;margin-block-start:4px}
.card{display:block}
/* the picture box keeps its ratio before the image arrives (no CLS); the image fills it */
.ph{position:relative;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.ph img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.r1610{aspect-ratio:16/10}
/* Wordmark reveal, the motion study from portfolio/studio, ported to transform + opacity only.
   The original animated letter-spacing (a layout property); here each letter starts pushed out
   from the centre by transform and slides home, so the end frame is the same mark. Its widest
   frame is ~92% of the box, so nothing leaves the picture. Static (the finished mark) under
   reduced motion. The size follows the card through container units. */
.wmr{container-type:inline-size;display:grid;place-items:center;background:#0E0E0C}
.wmw{position:relative;display:flex;font:400 6cqi/1 "Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-optical-sizing:auto;color:#EDE8DF;padding-inline-start:.22em}
.wmw span{display:block;margin-inline-end:.22em}
.wmw::after{content:"";position:absolute;left:0;right:0;bottom:-.45em;block-size:2px;background:#A8402F;transform-origin:left center}
.wmw span:nth-child(1){--d:-5}.wmw span:nth-child(2){--d:-4}.wmw span:nth-child(3){--d:-3}.wmw span:nth-child(4){--d:-2}
.wmw span:nth-child(5){--d:-1}.wmw span:nth-child(6){--d:0}.wmw span:nth-child(7){--d:1}.wmw span:nth-child(8){--d:2}
.wmw span:nth-child(9){--d:3}.wmw span:nth-child(10){--d:4}.wmw span:nth-child(11){--d:5}
@media(prefers-reduced-motion:no-preference){
  .wmw span{animation:wmtrack 5s cubic-bezier(.2,.7,.1,1) infinite}
  .wmw::after{animation:wmline 5s cubic-bezier(.2,.7,.1,1) infinite}
}
@keyframes wmtrack{0%{transform:translateX(calc(var(--d) * .48em));opacity:.15}35%,80%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:.15}}
@keyframes wmline{0%,25%{transform:scaleX(0);opacity:1}45%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.15}}
.chip{display:inline-block;margin-block:12px 8px;padding:5px 12px;font-size:var(--t13);
  font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
html[lang=ar] .chip{font-family:var(--body);letter-spacing:0;text-transform:none}
.c-concept{border:1px solid var(--ochre);color:var(--ochre)}
.card h3{font-size:var(--t17);color:var(--cream);margin-block-end:6px}
.cl{color:var(--muted);font-size:var(--t15)}

/* ───────── the permanent message route ───────── */
.route{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:10px;align-items:center;
  min-block-size:var(--row);margin-block:12px 0;padding:8px 14px;border:1px solid var(--edge)}
.route::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:2px;
  background:var(--ochre);transform:scaleX(0);transform-origin:left center;transition:transform .12s ease-out}
.route:hover::before,.route:focus-visible::before{transform:scaleX(1)}
.route .rl{font-size:var(--t17)}

.noscript{margin-block-start:16px;padding:14px;border:1px solid var(--ochre);color:var(--cream);font-size:var(--t15)}

/* ───────── footer ───────── */
.foot{margin-block-start:32px;padding-block:20px 48px;border-block-start:1px solid var(--line);
  display:grid;gap:10px}
.fname{color:var(--muted);font-size:var(--t15)}
.reg{color:var(--muted);font-size:var(--t15)}
.priv,.cred{color:var(--dim-ok);font-size:var(--t13);line-height:1.6;max-inline-size:62ch}
html[lang=ar] .priv,html[lang=ar] .cred{font-size:var(--t15);line-height:1.8}
.flinks{display:flex;gap:20px;flex-wrap:wrap;margin-block-start:4px}
.flinks a{min-block-size:44px;min-inline-size:44px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--muted);
  font-size:var(--t15);text-decoration:underline;text-underline-offset:4px}
.flinks a:hover{color:var(--cream)}

/* ───────── <768: one question at a time ───────── */
@media(max-width:767px){
  .qlist>.q{display:none}
  .qlist>.q.cur{display:block}
}

/* ───────── ≥768: the whole form at once, no forced wizard on a device with room ───────── */
@media(min-width:768px){
  .honest{grid-template-columns:repeat(3,1fr);gap:24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .card.wide{grid-column:1 / -1}
  .acts{grid-template-columns:auto auto;justify-content:start}
  .wa{padding-inline:28px}
  .body>*{margin-inline:24px}
  .qnav{display:none}
  .step{display:none}
  .qhead{justify-content:flex-end}   /* no step counter here, so Close sits at the inline end */
}

/* ───────── ≥1100: two fields — the board, and the standing panel ───────── */
@media(min-width:1100px){
  .shell{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:48px;
    grid-template-areas:"hdr hdr" "rail rail" "stage route" "foot foot"}
  .hdr{grid-area:hdr}.rail{grid-area:rail}
  .stage{grid-area:stage}
  /* the standing panel: the route row sits at the TOP of the right field and keeps its own
     height — without align-self it stretches to the height of the open bay beside it. */
  .route{grid-area:route;align-self:start;margin-block-start:16px}
  .foot{grid-area:foot;margin-block-start:28px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:auto}   /* four cards: an even two-by-two beside the standing panel */
}

/* ───────── phone zoom-out fix (BYTE, 10 Oct) ─────────
   The round-2 .glow is 200vw wide and hangs 50vw past the right edge. body{overflow-x:hidden}
   alone does not stop a phone browser from widening the layout viewport to fit it (measured in
   mobile emulation: 390 px phone laid out at 585 px, the whole page drawn at 2/3 scale). Clipping
   on the root does. Pre-existing since round 2; not part of GRID's change list. */
html{overflow-x:hidden;overflow-x:clip}

/* ───────── lighter landing · tiles (GRID, landing-lighter v1) ───────── */
:root{--ico:32px;--tgap:8px;--tpad:16px;--tmin:140px}
@media(min-width:768px){:root{--tgap:12px;--tpad:20px;--tmin:176px}}
@media(min-width:1100px){:root{--ico:40px;--tgap:16px;--tpad:24px;--tmin:192px}}

/* icons · directional ones ship two paths, swapped here, never transformed */
.ico{display:block;flex:none;inline-size:var(--ico);block-size:var(--ico);color:var(--ochre)}
.icor,html[dir=rtl] .icol{display:none}
html[dir=rtl] .icor{display:block}
html:not(.js) .row>.ico{display:none}

/* the grid */
html.js .bays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tgap)}
html.js .bay{display:block;transition:opacity .16s linear}          /* replaces the 1fr/0fr track */
html.js .bay.work,html.js .div{grid-column:1 / -1}
html.js .bays.hasopen .bay:not(.open){display:none}
html.js .bays.hasopen .div{display:none}                            /* WARDEN round 1: the <hr class="div"> inside .bays */

/* the tile */
html.js .bay>.row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ico num" "txt txt";
  align-content:start;align-items:start;gap:12px 8px;min-block-size:var(--tmin);padding:var(--tpad);
  border:1px solid var(--line)}
html.js .bay>.row>.ico{grid-area:ico}
html.js .bay>.row>.num{grid-area:num;color:var(--muted)}
html.js .bay>.row>.num .wl{inset-inline-start:auto;inset-inline-end:0;white-space:nowrap}
html.js .bay>.row>.rtx{grid-area:txt}
html.js .bay>.row>.ind{display:none}
html.js .bay>.row .rl{font-size:var(--t17)}
html.js .bay>.row::before{inset-block:-1px;inset-inline-start:-1px}
html.js .bay>.row:active{background:var(--panel)}

/* the work, below 768: a borderless wide row */
html.js .bay.work>.row{grid-template-columns:var(--ico) minmax(0,1fr) auto 18px;grid-template-areas:"ico txt num ind";
  align-items:center;gap:0 12px;min-block-size:var(--row);padding:8px 16px;border-color:transparent}
html.js .bay.work>.row>.ind{display:grid;grid-area:ind}
html.js .bay.work .ico{color:var(--muted)}

/* 05, below 768: a bordered wide row */
@media(max-width:767px){
  html.js .bay.wide{grid-column:1 / -1}
  html.js .bay.wide>.row{grid-template-columns:var(--ico) minmax(0,1fr) auto 18px;grid-template-areas:"ico txt num ind";
    align-items:center;gap:0 12px;min-block-size:var(--row);padding:8px 16px}
  html.js .bay.wide>.row>.ind{display:grid;grid-area:ind}
}

/* 768+: three columns, the work is the sixth tile */
@media(min-width:768px){
  html.js .bays{grid-template-columns:repeat(3,minmax(0,1fr))}
  html.js .div{display:none}
  html.js .bay.work{grid-column:auto}
  html.js .bay.work>.row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ico num" "txt txt";
    align-items:start;gap:12px 8px;min-block-size:var(--tmin);padding:var(--tpad);border-color:var(--line)}
  html.js .bay.work>.row>.ind{display:none}
  html.js .bay.work .rl{color:var(--muted)}
  html.js .bay>.row .rl{font-size:var(--t21)}
}

/* an open bay, at every width: full row, wide header. Five classes, so it beats every tile rule above. */
html.js .bays .bay.open{grid-column:1 / -1}
html.js .bays .bay.open>.row{grid-template-columns:var(--ico) minmax(0,1fr) auto 18px;grid-template-areas:"ico txt num ind";
  align-items:center;gap:0 12px;min-block-size:var(--row);padding:8px 16px;border-color:var(--line)}
html.js .bays .bay.open>.row>.ind{display:grid;grid-area:ind}

/* the route gets the bubble */
.route{grid-template-columns:var(--ico) minmax(0,1fr) 18px}
.route>.ico{color:var(--muted)}
@media(min-width:600px){.route{grid-template-columns:var(--ico) minmax(0,1fr) 20px}}

/* stage 1 reserves this; hidden until a job ref exists */
.jobref{margin-block-start:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
  color:var(--cream);font-size:var(--t15)}
.jobref .jr{font-family:"Share Tech Mono",ui-monospace,monospace;font-size:var(--t17);color:var(--ochre);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* ───────── reduced motion · the board is the first paint, the lamp stays but stops moving ───────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .lamp{transition:none}
}
html.rm .boot{display:none!important}
html.rm .board{display:block!important}

/* Stage 1 optional intake; existing board styling is retained. */
.intake { position:relative; margin-block:1.5rem; }
.intake[hidden] { display:none; }
.intake label { display:block; margin-block:.5rem; }
.intake .consent { display:flex; align-items:center; gap:.75rem; min-height:44px; cursor:pointer; }
.intake input[type=checkbox] { width:24px; height:24px; flex-shrink:0; }
.intake input[type=tel] { min-height:44px; max-width:100%; box-sizing:border-box; padding:.75rem; font:inherit; }
.intake a { display:inline-flex; align-items:center; min-height:44px; }
.intake :focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.intake-hp { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.jobref .jr { direction:ltr; unicode-bidi:isolate; }
.jobref.not-saved { font-weight:400; }
.privacy-page { max-width:48rem; margin:3rem auto; padding:1.5rem; }
.privacy-page p { line-height:1.8; }

/* Send request (17 Oct): the order stays on the site; WhatsApp is the optional extra below */
.intake .intake-send{width:100%;margin-block-start:14px}
.intake .intake-send:disabled{opacity:.75;cursor:default}
.intake-note{margin-block:.5rem 0;font-size:var(--t14,14px);opacity:.75}
.intake-note a{min-height:0;display:inline;text-decoration:underline}

/* =====================================================================================================
   THE BOARD · RAGE look (17 Oct 2026). Wajdy: "make the board look ours". RAGE City's language on the
   public page: night base, amber neon script name (Yellowtail), condensed display (Big Shoulders), mono
   slates, glass tiles with an amber glow, pill buttons. Motion per the Emil Kowalski skill: transform/
   opacity only, ease-out, short, :active press, hover gated to real pointers, reduced motion respected.
   English only for the new type; Arabic keeps Readex/Plex (Big Shoulders and Yellowtail have no Arabic).
   ===================================================================================================== */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/BigShouldersDisplay-700-900-latin.woff2) format("woff2");font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Yellowtail";src:url(fonts/Yellowtail-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --amber:#FF8A3D; --amber-hi:#FFA866; --neon:0 0 6px rgba(255,138,61,.55),0 0 22px rgba(255,138,61,.35),0 0 48px rgba(255,138,61,.18);
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --e-out:cubic-bezier(.23,1,.32,1);
}
html:not([lang=ar]){--disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif}
body{background:
  radial-gradient(1200px 520px at 80% -10%,rgba(126,58,170,.20),transparent 60%),
  radial-gradient(900px 480px at 0% 0%,rgba(255,138,61,.10),transparent 55%),
  var(--void)}

/* name: amber neon script, like the RAGE City wordmark */
.hdr .name{gap:12px}
.hdr .mark{color:var(--amber);filter:drop-shadow(0 0 8px rgba(255,138,61,.5))}
html:not([lang=ar]) .hdr .nametext{font:400 30px/1 "Yellowtail",cursive;letter-spacing:0;color:var(--amber);text-shadow:var(--neon);padding-block:4px}
.hdr .lang{border-radius:999px;border-color:rgba(255,255,255,.14);transition:border-color .15s ease,color .15s ease,transform .16s var(--e-out)}
.hdr .lang:active{transform:scale(.97)}
.rail .hair{background:linear-gradient(90deg,var(--amber),rgba(255,138,61,.15) 60%,transparent)}

/* the ask: big condensed title with a mono slate above it */
html:not([lang=ar]) .ask{font:900 clamp(44px,6.2vw,76px)/.92 var(--disp);text-transform:uppercase;letter-spacing:.005em;color:var(--cream)}
html:not([lang=ar]) .ask::before{content:"DESIGN \00B7 WEBSITES \00B7 MOTION \2014 MUSCAT";display:block;font:400 12px/1 var(--mono);letter-spacing:.22em;color:var(--amber);margin-block-end:14px;text-shadow:none}

/* service tiles: glass, rounded, amber glow on hover/open */
.bay{border-radius:16px;background:var(--glass),var(--panel);border-color:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .2s var(--e-out),box-shadow .2s ease,border-color .2s ease}
.bay .row{border-radius:16px}
.bay .ico{color:var(--amber);filter:drop-shadow(0 0 6px rgba(255,138,61,.35));transition:transform .2s var(--e-out)}
.bay .num .n{color:var(--amber);letter-spacing:.12em}
.bay .num .wl{letter-spacing:.2em}
html:not([lang=ar]) .bay .rl{font:700 clamp(24px,2.1vw,30px)/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.bay .rs{color:var(--muted)}
.bay .row:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .bay:not(.open):hover{transform:translateY(-3px);border-color:rgba(255,138,61,.55)!important;box-shadow:0 0 0 1px rgba(255,138,61,.35),0 18px 40px -18px rgba(255,138,61,.45),inset 0 1px 0 rgba(255,255,255,.06)}
  .bay:not(.open):hover .ico{transform:scale(1.08)}
}
.bay.open{border-color:rgba(255,138,61,.5)!important;box-shadow:0 0 0 1px rgba(255,138,61,.3),0 30px 70px -30px rgba(255,138,61,.35)}

/* buttons: amber pills, press feedback */
.wa{border-radius:999px;transition:transform .16s var(--e-out),box-shadow .2s ease,filter .2s ease,border-color .15s ease,color .15s ease}
.wa:active{transform:scale(.97)}
.wa.primary{background:var(--amber);border-color:var(--amber);box-shadow:0 8px 26px -10px rgba(255,138,61,.75)}
@media (hover:hover) and (pointer:fine){.wa.primary:hover{filter:brightness(1.08);box-shadow:0 10px 32px -8px rgba(255,138,61,.85)}}
.wa.ghost{border-color:rgba(255,255,255,.18)}
.navb,.skipq{border-radius:999px;transition:transform .16s var(--e-out),border-color .15s ease}
.navb:active,.skipq:active{transform:scale(.97)}

/* inputs inside a bay */
.body input[type=text],.body input[type=tel],.body textarea{border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease}
.body input[type=text]:focus,.body input[type=tel]:focus,.body textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,138,61,.18)}
.prev .pv{border-radius:12px}
.jobref.saved{border-radius:12px}

/* "just message me": pill route with a soft glow */
.route{border-radius:16px;background:var(--glass),var(--panel);border-color:rgba(255,255,255,.12)!important;transition:transform .2s var(--e-out),border-color .2s ease,box-shadow .2s ease}
.route .icol{color:var(--amber)}
.route:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.route:hover{border-color:rgba(255,138,61,.55)!important;box-shadow:0 18px 40px -20px rgba(255,138,61,.5)}}
html:not([lang=ar]) .route .rl{font:700 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}

/* work cards */
.card{border-radius:14px;overflow:hidden}
.card .ph{border-radius:12px;overflow:hidden}

/* footer */
.foot{border-top-color:rgba(255,255,255,.08)}
html:not([lang=ar]) .foot .fname{font:400 22px/1.2 "Yellowtail",cursive;color:var(--amber);text-shadow:0 0 14px rgba(255,138,61,.35)}

/* first paint: tiles rise in, staggered (decorative, rare: once per visit) */
@media (prefers-reduced-motion:no-preference){
  .bays .bay{animation:bayIn .42s var(--e-out) both}
  .bays .bay:nth-child(2){animation-delay:.04s}.bays .bay:nth-child(3){animation-delay:.08s}
  .bays .bay:nth-child(4){animation-delay:.12s}.bays .bay:nth-child(5){animation-delay:.16s}.bays .bay:nth-child(6){animation-delay:.2s}
}
@keyframes bayIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bay,.wa,.route,.navb,.skipq{transition:none!important}}

/* =====================================================================================================
   THE BOARD · space + liquid glass (17 Oct 2026). Wajdy: "space theme that matches our vibe … like this
   style" (iOS Control Center liquid glass). space.js paints the sky on a fixed canvas behind the page;
   everything interactive is frosted glass on top. Readability first: open panels get a darker glass.
   ===================================================================================================== */
.space{position:fixed;inset:0;inline-size:100vw;block-size:100vh;z-index:0;pointer-events:none;display:block}
body{background:#06050B}
.shell{position:relative;z-index:1}
.glow,.lampwrap{display:none!important}
html:not([lang=ar]) .ask::before{content:none!important}

/* the hook */
.hook{margin:0 0 10px;color:var(--cream);text-wrap:balance}
html:not([lang=ar]) .hook{font:900 clamp(52px,8.4vw,112px)/.86 var(--disp);text-transform:uppercase;letter-spacing:.005em;
  background:linear-gradient(180deg,#FFF6E8 30%,#FFC08A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(255,138,61,.28))}
html[lang=ar] .hook{font:600 clamp(40px,7vw,80px)/1.15 var(--disp)}
.hooksub{margin:0 0 34px;max-inline-size:52ch;color:#D9D0EA;font:400 clamp(16px,1.35vw,19px)/1.5 var(--body)}
html:not([lang=ar]) .ask{font:700 clamp(22px,2vw,28px)/1 var(--disp);color:var(--amber);letter-spacing:.06em;margin-block-end:16px}

/* liquid glass */
.bay,.route,.hdr .lang,.card{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 45%,rgba(255,255,255,.06))!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 60px -30px rgba(0,0,0,.9)!important}
.bay{border-radius:28px}
.bay .row{border-radius:28px}
.route{border-radius:24px}
.bay .ico,.route .icol{inline-size:44px;block-size:44px;padding:9px;border-radius:999px;box-sizing:border-box;
  background:linear-gradient(145deg,rgba(255,138,61,.30),rgba(255,138,61,.10));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px -6px rgba(255,138,61,.6);filter:none}
.bay.work .ico{background:linear-gradient(145deg,rgba(160,130,255,.30),rgba(160,130,255,.10));color:#CDBDFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px -6px rgba(140,110,255,.6)}
@media (hover:hover) and (pointer:fine){
  .bay:not(.open):hover{transform:translateY(-3px);border-color:rgba(255,190,140,.45)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 1px rgba(255,138,61,.25),0 26px 60px -24px rgba(255,138,61,.45)!important}
}
/* an open bay holds a form: darker, denser glass so every line stays readable over the stars */
.bay.open{background:linear-gradient(160deg,rgba(28,20,48,.86),rgba(14,10,26,.9))!important;border-color:rgba(255,138,61,.45)!important}
.bay.open .body{border-inline-start-color:transparent}
.body input[type=text],.body input[type=tel],.body textarea,.prev .pv{background:rgba(6,5,12,.55);border-color:rgba(255,255,255,.18)}
.wa.ghost{background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.foot{background:linear-gradient(180deg,transparent,rgba(6,5,11,.75) 30%);border-top:0;padding-block-start:28px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bay,.route,.card{background:rgba(22,16,38,.92)!important}
}

/* =====================================================================================================
   THE BOARD · simple, professional request form (18 Oct 2026). Wajdy: "make the order/request easier to
   place and look professional". When the request form is live (it has a Send request button):
   every question on one page (phones too), no wizard, no preview, one primary action + one WhatsApp
   link. Without JS or with saving off, the original links and wizard behaviour stay as the fallback.
   ===================================================================================================== */
.bay.open:has(.intake-send) .qlist>.q{display:block!important}
.bay.open:has(.intake-send) .qnav,.bay.open:has(.intake-send) .step{display:none!important}
.bay.open:has(.intake-send) .qhead{justify-content:flex-end}
.bay.open:has(.intake-send) .prev{display:none}
.bay.open:has(.intake-send) .acts button.wa.ghost{display:none}
.bay.open:has(.intake-send) a.wa[data-wa]{display:none}
.bay.open:has(.intake-send) .skipq{display:none}

/* questions as clean form rows */
.bay.open .qlist{display:grid;gap:22px;margin-block-start:8px}
.bay.open .q label,.bay.open .q legend,.bay.open .q h4,.bay.open .q .ql{font:600 15px/1.35 var(--body);color:var(--cream);letter-spacing:0;text-transform:none;margin-block-end:8px;display:block}
.bay.open .q input[type=text],.bay.open .q textarea{inline-size:100%;box-sizing:border-box;min-block-size:48px;padding:12px 14px;font:16px/1.4 var(--body)}
.bay.open .chips{gap:8px}
.bay.open .chip-b{border-radius:999px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);transition:background .15s ease,border-color .15s ease,transform .16s var(--e-out)}
.bay.open .chip-b:active{transform:scale(.97)}
.bay.open .chip-b[aria-checked=true]{background:rgba(255,138,61,.18);border-color:var(--amber);color:#FFD7B5}
.bay.open .speech{font:500 14px/1.4 var(--mono);color:var(--amber);letter-spacing:.04em;border:0;padding:0;margin-block:6px 18px}

/* what's included: compact; phones see only "What you get" */
.bay.open .honest{gap:14px;font-size:14px}
.bay.open .honest h3{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim-ok);margin-block-end:8px}
.bay.open .honest li{margin-block:4px;color:var(--muted)}
@media (max-width:767px){ .bay.open:has(.intake-send) .honest .hcol:not(:first-child){display:none} }

/* the action block */
.bay.open .intake{border-block-start:1px solid rgba(255,255,255,.1);padding-block-start:20px;margin-block-start:26px}
.bay.open .intake label{font:600 15px var(--body);color:var(--cream)}
.bay.open .intake-send{min-block-size:52px;font:700 16px var(--body);letter-spacing:.01em}
.bay.open .acts{margin-block-start:10px}
.bay.open .acts a.wa.ghost{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;min-block-size:44px;padding:0}
.bay.open .jobref.saved{background:rgba(255,138,61,.12);border:1px solid rgba(255,138,61,.45);padding:12px 14px}
.bay.open .q .qlab{font:600 15px/1.35 var(--body)!important;color:var(--cream);letter-spacing:0;text-transform:none;margin-block-end:10px}
.closeq{border-radius:999px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:transform .16s var(--e-out),border-color .15s ease}
.closeq:active{transform:scale(.97)}
.bay .num .wl{display:none}

/* =====================================================================================================
   THE BOARD · order panel v4 (18 Oct 2026). Wajdy: "when they come to place an order the creativity fades
   and design quality is low… make it way clearer". Emil Kowalski craft: one clear path (how it works,
   what's in it, your answers, send), real hierarchy (15/17/22px), 8px spacing rhythm, calm panels,
   Lucide icons only, transform/opacity motion, ease-out, press feedback, hover only on real pointers.
   ===================================================================================================== */
.bay.open{position:relative}
.bay.open>.row .ind{display:none!important}
.bay.open>.row{padding-inline-end:72px}
html:not([lang=ar]) .bay.open>.row .rl{font-size:clamp(28px,2.6vw,36px)}

/* how it works: three numbered steps across the top */
.how{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin-block:4px 24px!important}
.how li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font:500 14px/1.35 var(--body);color:#E9E1F5}
.how .hn{flex:none;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:999px;background:rgba(255,138,61,.16);
  color:var(--amber);font:700 13px/1 var(--body);font-variant-numeric:tabular-nums}
@media (max-width:767px){.how{grid-template-columns:1fr}.how li{padding:10px 12px}}
.bay.open .speech{display:none}

/* what's in it: three short lists with real icons, readable size */
.bay.open .honest{gap:20px;font-size:15px}
.bay.open .honest h3{font:600 13px/1.2 var(--body)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--cream)!important;margin-block-end:10px}
.bay.open .honest ul{gap:8px;padding:0;list-style:none}
.bay.open .honest li{position:relative;padding-inline-start:26px;margin:0;color:#CFC6E2;line-height:1.45}
.bay.open .honest li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:2px;inline-size:16px;block-size:16px;
  background:currentColor;-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat}
.bay.open .honest .hcol:nth-child(1) li::before{--mi:url(img/icons/check.svg);background:#7BE3A3}
.bay.open .honest .hcol:nth-child(2) li::before{--mi:url(img/icons/minus.svg);background:#8E86A6}
.bay.open .honest .hcol:nth-child(3) li::before{--mi:url(img/icons/paperclip.svg);background:var(--amber)}
.bay.open .honest .hcol:nth-child(2) li{color:#A69DBD}
.bay.open .quote{border:1px solid rgba(255,138,61,.28)!important;background:rgba(255,138,61,.07);border-radius:14px;padding:12px 14px!important;
  font:500 15px/1.45 var(--body);color:#FFD9BC}

/* the form head: section title, progress, close */
.bay.open .qhead{display:flex;align-items:flex-end;gap:16px;margin-block-end:20px}
.bay.open .prog{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"t c" "b b";align-items:baseline;gap:8px 12px}
.sect{font:700 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin:0}
html[lang=ar] .sect{letter-spacing:0;text-transform:none;font-size:15px}
.prog .sect{grid-area:t}
.ptxt{grid-area:c;justify-self:end;font:500 13px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.pbar{grid-area:b;display:block;block-size:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.pbar i{display:block;block-size:100%;background:linear-gradient(90deg,var(--amber),#FFC08A);transform-origin:left center;transform:scaleX(0);transition:transform .35s var(--e-out)}
html[dir=rtl] .pbar i{transform-origin:right center}
.bay.open .closeq{position:absolute;inset-block-start:18px;inset-inline-end:18px;inline-size:44px;min-inline-size:44px;padding:0;font-size:0;color:var(--cream);
  display:grid;place-items:center}
.bay.open .closeq::before{content:"";inline-size:18px;block-size:18px;background:currentColor;-webkit-mask:url(img/icons/x.svg) center/contain no-repeat;mask:url(img/icons/x.svg) center/contain no-repeat}
@media (hover:hover) and (pointer:fine){.bay.open .closeq:hover{border-color:rgba(255,138,61,.6);background:rgba(255,138,61,.1)}}

/* questions: numbered, one rhythm; the number fills amber once answered */
.bay.open .qlist{counter-reset:q;gap:28px}
.bay.open .qlist>.q{position:relative;padding-inline-start:40px}
.bay.open .qlist>.q::before{counter-increment:q;content:counter(q);position:absolute;inset-inline-start:0;inset-block-start:-2px;
  inline-size:26px;block-size:26px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
  font:700 13px/1 var(--body);color:var(--muted);transition:background .2s ease,border-color .2s ease,color .2s ease}
.bay.open .qlist>.q:has([aria-checked=true])::before,.bay.open .qlist>.q:has(input:not(:placeholder-shown))::before,.bay.open .qlist>.q:has(textarea:not(:placeholder-shown))::before{
  background:var(--amber);border-color:var(--amber);color:#1A0E05}
.bay.open .q>label,.bay.open .q .qlab{font:600 17px/1.35 var(--body)!important;color:var(--cream)!important;margin-block-end:12px!important}
.bay.open .chip-b{min-block-size:44px;padding:10px 16px;font:500 15px/1 var(--body);color:#E9E1F5}
.bay.open .chip-b[aria-checked=true]{padding-inline-start:36px}
.bay.open .chip-b[aria-checked=true]::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:14px;inset-inline-end:auto;inline-size:14px;block-size:14px;
  transform:translateY(-50%);border:0;background:currentColor;-webkit-mask:url(img/icons/check.svg) center/contain no-repeat;mask:url(img/icons/check.svg) center/contain no-repeat}
@media (hover:hover) and (pointer:fine){.bay.open .chip-b:hover{border-color:rgba(255,138,61,.55);background:rgba(255,138,61,.08)}}
.bay.open .q input[type=text],.bay.open .q textarea,.bay.open .intake input[type=tel]{font:16px/1.4 var(--body);color:var(--cream);border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(6,5,12,.6)}

/* send block: its own card, one big action */
.bay.open .intake{margin-block-start:32px!important;padding:20px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,138,61,.08),rgba(255,255,255,.02))}
.bay.open .intake .sect{margin-block-end:14px}
.bay.open .intake label{font:600 15px/1.3 var(--body)!important;margin-block:0 8px!important}
.bay.open .intake input[type=tel]{inline-size:100%;max-inline-size:340px;min-block-size:48px;padding:12px 14px}
.intake-hint{margin:8px 0 0;font:400 14px/1.45 var(--body);color:var(--muted)}
.bay.open .intake-send{margin-block-start:18px!important;min-block-size:56px!important;font:700 17px var(--body)!important}
.bay.open .intake-note{font:400 14px/1.45 var(--body);color:var(--muted);opacity:1;margin-block-start:10px}
.bay.open .acts a.wa.ghost{justify-content:center;color:#D9D0EA}

/* desktop: what's in it on the left (sticky), the form on the right */
@media (min-width:900px){
  .bay.open>.body{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:40px;align-items:start}
  .bay.open>.body>.how{grid-column:1 / -1}
  .bay.open>.body>.honest{grid-column:1;grid-template-columns:1fr!important;position:sticky;top:20px;margin:0}
  .bay.open>.body>.quote{grid-column:1;margin-block-start:16px}
  .bay.open>.body>.qlive{grid-column:2;grid-row:2 / span 3;margin-block-start:0!important}
  .bay.open>.body>.qstatic{grid-column:2;grid-row:2 / span 3}
  .bay.open>.body>a.wa[data-wa]{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.pbar i,.bay.open .qlist>.q::before{transition:none}}

/* WARDEN round 1 (18 Oct): English fine print at the 15px floor */
html:not([lang=ar]) .priv,html:not([lang=ar]) .cred{font-size:var(--t15)}
/* 30 Oct (Wajdy): the small grey lines larger and higher contrast: --muted (#B4A8D2) instead of --dim-ok, 16px (Arabic 17px) */
.priv,.cred{color:var(--muted);line-height:1.65}
html:not([lang=ar]) .priv,html:not([lang=ar]) .cred{font-size:16px}
html[lang=ar] .priv,html[lang=ar] .cred{font-size:17px;line-height:1.85}
/* "See my work" under the subline: the studio site */
.hooksub{text-wrap:balance}
.hooklink{margin:-22px 0 30px}
.hooklink a{min-block-size:44px;display:inline-flex;align-items:center;color:var(--cream);font:600 16px/1.4 var(--body);text-decoration:underline;text-underline-offset:4px}
.hooklink a:hover{color:#fff}
.hooklink a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.bay.open>.body,.bay.open .qlive,.bay.open .qhead{position:static}
@media (min-width:900px){
  .bay.open>.body{padding-inline:28px;padding-block-end:8px}
  .bay.open>.body>*{margin-inline:0}
}
/* WARDEN round 1 (18 Oct): one icon set (Lucide) in both languages */
html[dir=rtl] .icol{display:block}

/* work (18 Oct): its own layout, not the order panel; even cards with inner padding */
.bay.work.open>.body{display:block!important;padding-inline:28px}
.bay.work.open .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-block:8px 8px}
.bay.work.open .card.wide{grid-column:1 / -1}
.bay.work.open .card{padding:10px 10px 18px;border-radius:20px}
.bay.work.open .card>:not(.ph){margin-inline:8px}
.bay.work.open .card h3{font:700 22px/1.1 var(--disp);margin-block:4px 6px}
.bay.work.open .cl{font:400 15px/1.5 var(--body);color:#CFC6E2}
.bay.work.open .chip{white-space:nowrap;border-radius:999px;font-size:12px;padding:4px 10px}
@media (max-width:767px){.bay.work.open>.body{padding-inline:12px}.bay.work.open .grid{grid-template-columns:1fr}}

/* WARDEN round 2 (18 Oct): phones show all three lists in full; 15px floor; no-number nudge */
@media (max-width:767px){ .bay.open:has(.intake-send) .honest .hcol:not(:first-child){display:block!important} }
.how .ht,.intake-hint,.bay.open .intake-note{font-size:var(--t15)!important}
.nonum{margin-block-start:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,138,61,.45);background:rgba(255,138,61,.1);color:#FFD9BC;font:500 var(--t15)/1.45 var(--body)}


/* Board scope and pricing refinement · 20 Oct 2026 */
.service-price{font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.65;font-weight:600;margin:1.5rem 0 .65rem;color:var(--ink,#f5f0e8);overflow-wrap:anywhere}
.bay.open .honest .hcol{display:block!important}
.bay.open>.body>.service-price{grid-column:1;margin-block:16px 0}
@media(max-width:767px){.bay.open .honest{display:block}.bay.open .honest .hcol{margin-block:1.25rem}.service-price{font-size:1rem}}

/* ===== Board clarity · 21 Oct 2026 (work order v2, PR #84) =====
   Starting price on every card; the open panel starts with price + one way to begin; scope lists as
   disclosures; a readable brief before Send; one accessible question number; a local scrim behind the intro. */

/* starting price on each service card */
.rp{justify-self:start;display:inline-block;margin-block-start:10px;padding:5px 11px;border-radius:999px;
  font:600 13px/1.2 var(--body);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;
  color:#FFD9BC;background:rgba(255,138,61,.12);border:1px solid rgba(255,138,61,.32)}
html[lang=ar] .rp{font-size:14px}
.bay.open .rp{display:none}

/* the open panel starts here */
.bay.open .start{display:grid;gap:10px;justify-items:start;margin-block:4px 22px;padding:20px;border-radius:20px;
  border:1px solid rgba(255,138,61,.28);background:linear-gradient(160deg,rgba(255,138,61,.10),rgba(255,255,255,.02))}
.start-price{margin:0;font:800 clamp(28px,3vw,36px)/1.05 var(--disp);letter-spacing:.01em;color:var(--cream)}
html[lang=ar] .start-price{font-weight:700;font-size:clamp(24px,3vw,30px);letter-spacing:0}
.bay.open .start .start-detail{margin:0;font:500 15px/1.55 var(--body)!important;color:#E4DAF2}
.start-note{margin:0;max-inline-size:62ch;font:400 15px/1.55 var(--body);color:var(--muted)}
.bay.open .start-btn{margin-block-start:6px;min-block-size:52px;padding-inline:28px;font:700 16px var(--body);cursor:pointer}
.bay.open .start-btn:active{transform:scale(.97)}
@media (max-width:767px){.bay.open .start-btn{inline-size:100%}}
.bay.open:has(.start)>.body>.service-price{display:none}
.bay.open .how{display:none}
@media (min-width:900px){.bay.open>.body>.start{grid-column:1 / -1}}

/* scope lists: labelled disclosures (open on wide screens, closed on phones) */
.bay.open .hdet{border-block-end:1px solid rgba(255,255,255,.08)}
.bay.open .hdet>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-block-size:48px;padding-block:6px;border-radius:8px}
.bay.open .hdet>summary::-webkit-details-marker{display:none}
.bay.open .hdet>summary h3{margin:0!important;font-size:15px!important}
.bay.open .hdet>summary::after{content:"";flex:none;inline-size:18px;block-size:18px;background:var(--muted);
  -webkit-mask:url(img/icons/chevron-down.svg) center/contain no-repeat;mask:url(img/icons/chevron-down.svg) center/contain no-repeat;
  transition:transform .2s var(--e-out)}
.bay.open .hdet[open]>summary::after{transform:rotate(180deg)}
.bay.open .hdet>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.bay.open .hdet>summary:hover h3{color:#fff!important}}
.bay.open .hdet>ul{margin-block:2px 14px!important}
.bay.open .honest{gap:0}
@media (max-width:767px){.bay.open .honest .hcol{margin-block:0!important}}

/* one question number: the circle is decorative, the label carries the meaning */
.bay.open .qlist>.q::before{content:counter(q);content:counter(q) / ""}

/* the brief, readable, right before Send */
.bay.open .prev{display:none!important}
.brief{margin-block-start:30px;padding:16px 20px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(6,5,12,.45)}
.brief .sect{margin-block-end:6px}
.blist{margin:0;display:grid}
.brow{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:2px 14px;padding-block:10px;border-block-start:1px solid rgba(255,255,255,.07)}
.brow:first-child{border-block-start:0}
.brow dt{font:500 14px/1.45 var(--body);color:var(--muted)}
.brow dd{margin:0;min-inline-size:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:500 15px/1.45 var(--body);color:var(--cream)}
.bval{min-inline-size:0;overflow-wrap:anywhere;white-space:pre-line}
.bedit{flex:none;min-block-size:36px;padding:4px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:#E9E1F5;font:600 13px/1 var(--body);cursor:pointer;transition:transform .16s var(--e-out),border-color .15s ease}
.bedit:active{transform:scale(.97)}
.bedit:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.bedit:hover{border-color:rgba(255,138,61,.55);color:#fff}}
.bempty{margin:2px 0 0;font:400 14px/1.45 var(--body);color:var(--muted)}
@media (max-width:480px){.brow{grid-template-columns:minmax(0,1fr)}}
.bay.open .brief+.intake{margin-block-start:16px!important}
@media (prefers-reduced-motion:reduce){.bay.open .hdet>summary::after,.bedit{transition:none}}

/* readability: a soft local shade behind the intro copy, on the copy's side (RTL aware) */
.board{position:relative;isolation:isolate}
.board::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset-block-start:-56px;inset-inline-start:-96px;
  inline-size:min(1000px,calc(100% + 140px));block-size:540px;
  background:radial-gradient(ellipse 68% 60% at 28% 42%,rgba(5,4,10,.8),rgba(5,4,10,.5) 52%,rgba(5,4,10,0) 80%)}
html[dir=rtl] .board::before{background:radial-gradient(ellipse 68% 60% at 72% 42%,rgba(5,4,10,.8),rgba(5,4,10,.5) 52%,rgba(5,4,10,0) 80%)}
@media (max-width:767px){.board::before{inset-inline-start:-24px;inline-size:calc(100% + 48px);block-size:460px;
  background:radial-gradient(ellipse 95% 62% at 50% 40%,rgba(5,4,10,.74),rgba(5,4,10,0) 82%)!important}}

/* the menu is a programmatic focus target (skip link, hash): no ring around the whole grid */
.board[tabindex="-1"]:focus{outline:none}
/* one flow in both modes (saved request or WhatsApp only): every question visible, no step wizard */
.bay.open .qlist>.q{display:block!important}
.bay.open .qnav,.bay.open .step,.bay.open .skipq{display:none!important}
.bay.open .qhead{justify-content:flex-end}
.bay.open:has(.qlive:not([hidden])) a.wa[data-wa]{display:none}
/* WARDEN round 1 (21 Oct): price chips make cards different heights; the row glass fills its card */
html.js .bays:not(.hasopen) .bay:not(.open):not(.work){display:flex;flex-direction:column}
html.js .bays:not(.hasopen) .bay:not(.open):not(.work)>.row{flex:1 0 auto}

/* ===== Arabic polish · 21 Oct 2026 ===== */
/* opening a service lands with breathing room above its header (it was clipped 9px on phones) */
.bay,.bay>.row{scroll-margin-block-start:20px}
/* Arabic digits in the question circles */
html[lang=ar] .bay.open .qlist>.q::before{content:counter(q,arabic-indic);content:counter(q,arabic-indic) / ""}