/* B5 Marketing FZ-LLC — "The Street"
   A UAE shopping street after dark: bilingual lightbox signs switch on as a
   business gets found. Street sections are asphalt; inside the shop is lit white. */

:root {
  /* street */
  --asphalt: #121215;
  --asphalt-2: #19191e;
  --asphalt-3: #232329;
  --steel: #34343d;
  --steel-2: #4a4a55;
  --on-dark: #f2f2ee;
  --on-dark-muted: #b0b0b9;
  --on-dark-soft: #8b8b95;
  --line-dark: rgba(255, 255, 255, .1);
  --sodium: rgba(255, 170, 60, .16);

  /* B5 sign yellow */
  --yellow: #ffd12a;
  --yellow-hi: #ffe169;
  --yellow-deep: #e0b000;
  --ink: #121215;

  /* sign palette */
  --s-red: #c62a21;
  --s-teal: #0a7a70;
  --s-pink: #bd3269;
  --s-green: #16783a;
  --s-blue: #2458d6;
  --s-white: #f4f4ef;
  --wa: #25d366;

  /* inside the shop */
  --interior: #f4f4f0;
  --paper: #ffffff;
  --text: #17171b;
  --muted: #53535d;
  --line: #e0e0d9;

  /* YallaWeb brand (only where YallaWeb itself is shown) */
  --yw-navy: #1e3a5f;
  --yw-orange: #ff6b35;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ar-display: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
  --ar-body: "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
  --yw-face: "Syne", var(--display);

  --container: 1200px;
  --gutter: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; scrollbar-color: var(--steel-2) var(--asphalt); }
body {
  margin: 0; background: var(--asphalt); color: var(--on-dark);
  font: 400 1.0625rem/1.65 var(--body); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[lang="ar"] { font-family: var(--ar-body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.04; font-family: var(--display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
h3 { font-size: 1.25rem; font-stretch: 105%; letter-spacing: -0.01em; line-height: 1.2; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 3px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--asphalt); }
::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 6px; border: 3px solid var(--asphalt); }
.tnum { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 8vw, 112px); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 88px); }
.interior { background: var(--interior); color: var(--text); }
.interior h1, .interior h2, .interior h3 { color: var(--ink); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--on-dark-muted); max-width: 60ch; }
.interior .lead { color: var(--muted); }
.muted { color: var(--on-dark-muted); }
.interior .muted { color: var(--muted); }
.small { font-size: .9rem; }
.hl { color: var(--yellow); }
.interior .hl { color: var(--ink); background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); }

/* Illustrative label: a vinyl sticker on the glass */
.tag-illustrative {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 .78rem/1.1 var(--body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-dark-muted); padding: 6px 9px; background: rgba(18,18,21,.7); border: 1px dashed rgba(255,255,255,.22); border-radius: 3px;
}
.interior .tag-illustrative { color: var(--muted); border-color: #c9c9c1; background: transparent; }
.tag-illustrative:lang(ar) { font: 600 .9rem/1.3 var(--ar-body); letter-spacing: 0; text-transform: none; }

/* ---------- Buttons: small lightbox signs ---------- */
.btn {
  --bb: var(--yellow); --bi: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border: 0; border-radius: 4px;
  background: var(--bb); color: var(--bi);
  font: 800 .98rem/1.1 var(--display); font-stretch: 110%; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.14), 0 14px 30px -14px color-mix(in srgb, var(--bb) 80%, transparent);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.14), 0 20px 36px -14px color-mix(in srgb, var(--bb) 90%, transparent); }
.btn:active { transform: translateY(0); filter: brightness(.96); }
.btn--ghost { --bb: transparent; --bi: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--on-dark); filter: none; background: rgba(255,255,255,.04); }
.interior .btn--ghost { --bi: var(--ink); box-shadow: inset 0 0 0 1.5px #b9b9b1; }
.interior .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.btn--wa { --bb: var(--wa); --bi: #052e16; }
.btn--dark { --bb: var(--ink); --bi: var(--on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -16px rgba(0,0,0,.6); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--yellow); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.link:hover { text-decoration-color: var(--yellow); }
.interior .link { color: var(--ink); text-decoration-color: var(--yellow-deep); text-decoration-thickness: 2px; }
.link svg { display: inline-block; width: 14px; height: 14px; vertical-align: -1px; }

/* ---------- Lightbox sign ---------- */
.sign {
  --sb: var(--yellow); --si: var(--ink); --glow: rgba(255, 209, 42, .55);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .14em;
  padding: .55em 1em .6em; border-radius: 4px; text-align: center;
  background: radial-gradient(130% 150% at 50% -10%, color-mix(in srgb, var(--sb) 86%, #fff) 0%, var(--sb) 52%, color-mix(in srgb, var(--sb) 84%, #000) 100%);
  color: var(--si);
  border: 3px solid #2b2b31;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(0,0,0,.18), 0 16px 34px -18px rgba(0,0,0,.8);
  isolation: isolate;
}
.sign::after { /* light spilling onto the street below */
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: calc(100% + 3px); height: 90%;
  background: radial-gradient(60% 100% at 50% 0%, var(--glow), transparent 75%);
  pointer-events: none; filter: blur(6px);
}
.sign__ar { font: 800 1.3em/1.4 var(--ar-display); letter-spacing: 0; }
.sign__en { font: 800 1em/1 var(--display); font-stretch: 118%; letter-spacing: .03em; text-transform: uppercase; }
.sign--red { --sb: var(--s-red); --si: #fff; --glow: rgba(224, 54, 44, .5); }
.sign--teal { --sb: var(--s-teal); --si: #fff; --glow: rgba(14, 156, 142, .5); }
.sign--pink { --sb: var(--s-pink); --si: #fff; --glow: rgba(214, 69, 127, .5); }
.sign--green { --sb: var(--s-green); --si: #fff; --glow: rgba(30, 154, 75, .5); }
.sign--blue { --sb: var(--s-blue); --si: #fff; --glow: rgba(36, 88, 214, .55); }
.sign--white { --sb: var(--s-white); --si: var(--s-red); --glow: rgba(255, 250, 235, .4); }
.sign--yw { --sb: var(--yw-navy); --si: #fff; --glow: rgba(255, 107, 53, .45); }
.yw-word { font: 700 1em/1 var(--yw-face); letter-spacing: -0.02em; text-transform: none; white-space: nowrap; }
.yw-word b { color: var(--yw-orange); font-weight: 700; }
.sign--yw .yw-word { font-size: 1.5em; }

/* switched off until JS turns it on (no-JS: always lit) */
.js .sign[data-sign]:not(.is-on) { filter: brightness(.3) saturate(.55); }
.js .sign[data-sign]:not(.is-on)::after { opacity: 0; }
.js .sign[data-sign].is-on { animation: sign-on .95s steps(1, end) both; }
.js .sign[data-sign].is-on::after { animation: spill-on .95s var(--ease-out) both; }
@keyframes sign-on {
  0% { filter: brightness(.3) saturate(.55); }
  7% { filter: brightness(1.15); }
  12% { filter: brightness(.35) saturate(.6); }
  19% { filter: brightness(1.1); }
  25% { filter: brightness(.6); }
  33%, 100% { filter: none; }
}
@keyframes spill-on { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--asphalt) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); flex: none; }
.logo__mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px;
  background: radial-gradient(130% 150% at 50% -10%, var(--yellow-hi), var(--yellow) 55%, var(--yellow-deep));
  color: var(--ink); font: 900 1.05rem/1 var(--display); font-stretch: 125%; letter-spacing: -0.02em;
  border: 2px solid #2b2b31; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 22px -8px rgba(255,209,42,.6);
}
.logo__name { font: 800 1.12rem/1 var(--display); font-stretch: 112%; letter-spacing: -0.015em; }
.logo__name small { display: block; margin-top: 4px; font: 600 .66rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); font-stretch: 100%; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; padding: 10px 13px; font-size: .94rem; font-weight: 600; color: var(--on-dark-muted); text-decoration: none; border-radius: 4px; transition: color .2s; }
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--yellow); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--yellow); box-shadow: 0 2px 10px var(--yellow); }
.nav__lang { font-family: var(--ar-body) !important; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { min-height: 42px; padding: 10px 18px; font-size: .9rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--steel); background: var(--asphalt-2); color: var(--on-dark); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav .nav__mobile-cta { display: none; }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; background: var(--asphalt-2); border-bottom: 1px solid var(--line-dark); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 15px 2px; border-bottom: 1px solid var(--line-dark); font-size: 1.05rem; border-radius: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav .nav__mobile-cta { display: inline-flex; margin-top: 18px; border: 0; padding: 14px 24px; color: var(--ink); border-radius: 4px; }
}

/* ---------- Hero street ---------- */
.street-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b0c14 0%, #14141c 46%, var(--asphalt) 100%); }
.street-hero::before { /* sodium haze */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 20% 58%, var(--sodium), transparent 70%), radial-gradient(50% 40% at 85% 55%, rgba(255,170,60,.1), transparent 70%);
}
.street { position: relative; padding-top: clamp(14px, 1.6vw, 22px); max-width: 1360px; }
.skyline { position: absolute; left: 0; right: 0; bottom: 74px; height: 80%; pointer-events: none; }
.blocks { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 14px; }
.block { position: relative; background: linear-gradient(180deg, #22222b, #1c1c24); border-inline: 8px solid #2a2a33; }
.block--a { flex: 3.3; }
.block--b { flex: 3.4; background: linear-gradient(180deg, #25252e, #1e1e26); }
.block__parapet { height: 10px; margin: 0 -8px; background: #2e2e38; border-bottom: 2px solid #1a1a21; }
.floors { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; padding: 10px 14px 18px; }
.floors + .floors { padding-top: 0; }
.win { position: relative; height: 30px; border: 3px solid #383843; border-bottom-width: 5px; background: linear-gradient(90deg, transparent calc(50% - 1px), #383843 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(160deg, rgba(255,255,255,.06), transparent 40%), #101117; }
.win--lit { background: linear-gradient(90deg, transparent calc(50% - 1px), #5a4632 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(90deg, rgba(120,70,40,.55) 0 22%, transparent 22%), linear-gradient(180deg, #ffd494, #d99447); }
.win--tv { background: linear-gradient(90deg, transparent calc(50% - 1px), #383843 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(60% 80% at 70% 60%, rgba(140,190,255,.55), transparent 70%), #121626; }
.win--ac::after { content: ""; position: absolute; right: 4px; top: calc(100% + 5px); width: 26px; height: 13px; background: repeating-linear-gradient(90deg, #555561 0 2px, #474752 2px 4px); border-radius: 1px; }
.shops { display: flex; align-items: stretch; gap: 8px; background: #2a2a33; }
.shopfront { position: relative; z-index: 2; flex: var(--w, 1); display: flex; flex-direction: column; min-width: 0; padding: 10px 8px 0; background: #1c1c24; }
.shopfront > .sign { font-size: clamp(.68rem, 1.1vw, 1.02rem); min-height: 4.5em; white-space: nowrap; }
.shopfront__glass { position: relative; height: clamp(96px, 9.2vw, 132px); margin-top: 12px; overflow: hidden; border: 3px solid #34343e; border-bottom: 0; background: #0e0d0c; }
.shopfront__glass svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shopfront__glass::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.1) 0 10%, transparent 10% 30%, rgba(255,255,255,.05) 30% 34%, transparent 34%), linear-gradient(90deg, transparent 62%, #34343e 62% calc(62% + 3px), transparent calc(62% + 3px)); }
.spill { position: absolute; z-index: 3; left: 4%; right: 4%; top: 100%; height: 88px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,200,120,.28), rgba(255,200,120,.07) 55%, transparent);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.js .street-hero .shopfront:not(.is-lit) .shopfront__glass svg { filter: brightness(.18) saturate(.4); }
.js .street-hero .shopfront:not(.is-lit) .spill { opacity: 0; }
.js .street-hero .shopfront__glass svg { transition: filter 1.1s var(--ease-out); }
.js .street-hero .spill { transition: opacity 1.4s var(--ease-out); }
.awning { position: relative; z-index: 3; height: 20px; margin: 8px -4px -10px;
  background: repeating-linear-gradient(90deg, var(--a1, #e0362c) 0 18px, var(--a2, #f4f4ef) 18px 36px);
  -webkit-mask: radial-gradient(9px 7px at 9px 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; mask: radial-gradient(9px 7px at 9px 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
  box-shadow: 0 8px 12px rgba(0,0,0,.35); }
.awning--green { --a1: #1e9a4b; --a2: #157a3a; }
.sign--acrylic { --glow: rgba(255,255,255,.35); background: linear-gradient(180deg, #fbfbf7, #e6e6de); color: #0e8a7e; }
.sign--acrylic .sign__en, .sign--acrylic .sign__ar { text-shadow: 0 1px 0 #fff, 0 2px 1px rgba(0,0,0,.2); }
.sign--acrylic .cross { display: inline-block; width: .8em; height: .8em; margin-inline-end: .35em; vertical-align: -.05em; background: linear-gradient(#0e9c8e, #0e9c8e) center / 34% 100% no-repeat, linear-gradient(#0e9c8e, #0e9c8e) center / 100% 34% no-repeat; }
.sign--neon { --glow: rgba(255, 90, 170, .45); background: #17111a; color: #ffe3f1; border-color: #2b2230; }
.sign--neon .sign__ar, .sign--neon .sign__en { text-shadow: 0 0 2px #fff, 0 0 8px #ff4fa3, 0 0 18px rgba(255, 79, 163, .8); }
.sign--neon .sign__en { font-style: italic; text-transform: lowercase; letter-spacing: .02em; font-weight: 700; }
.sign--blank { --glow: transparent; background: #15151a; color: rgba(255, 209, 42, .6); border: 3px dashed rgba(255, 209, 42, .38); box-shadow: none; }
.sign--blank .sign__en { font-size: .74em; letter-spacing: .12em; }
.shopfront > .sign--blank { white-space: normal; line-height: 1.1; }
.sign--blank .sign__ar { font-size: .95em; }
.shutter { position: relative; height: clamp(96px, 9.2vw, 132px); margin-top: 12px; border: 3px solid #34343e; border-bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%), repeating-linear-gradient(180deg, #3b3b44 0 7px, #2c2c34 7px 9px, #34343c 9px 10px); }
.shutter::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 38px; height: 6px; margin-left: -19px; background: #55555f; border-radius: 3px; }
.pave { position: relative; z-index: 1; height: 34px; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.35) 58px 60px), linear-gradient(180deg, #34343a, #2a2a30); }
.kerb { position: relative; z-index: 1; height: 14px; background: repeating-linear-gradient(90deg, var(--yellow) 0 44px, #17171b 44px 88px); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.35); }
.road { height: 10px; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent); }
.pin { position: absolute; z-index: 4; left: 50%; top: -22px; width: 24px; height: 32px; margin-left: -12px; color: var(--s-red); filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.js .street-hero .pin { opacity: 0; transform: translateY(-16px) scale(.6); transition: opacity .3s, transform .7s var(--ease-out); }
.js .street-hero .is-lit .pin { opacity: 1; transform: none; }
.pavement { height: 18px; background: repeating-linear-gradient(90deg, var(--yellow) 0 44px, #16161a 44px 88px); box-shadow: 0 -6px 0 #2a2a32, 0 10px 30px rgba(0,0,0,.6); position: relative; }
.street__caption { position: absolute; z-index: 4; right: var(--gutter); bottom: -22px; }

.hero-copy { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; padding-block: clamp(30px, 3vw, 40px) clamp(48px, 5vw, 72px); }
.hero-copy h1 { color: var(--on-dark); font-size: clamp(2.4rem, 4.2vw, 3.7rem); }
.hero-copy h1 .hl { color: var(--yellow); text-shadow: 0 0 36px rgba(255,209,42,.35); }
.hero-ar { font: 800 clamp(1.5rem, 2.5vw, 2.1rem)/1.4 var(--ar-display); color: var(--on-dark-muted); margin: 10px 0 0; }
.hero-side .lead { margin-bottom: 22px; font-size: clamp(1.05rem, 1.35vw, 1.16rem); }
.plate {
  display: inline-grid; gap: 2px; padding: 11px 18px 11px 32px; position: relative;
  background: linear-gradient(180deg, #2f5ec9, #2450b3); color: #fff; border-radius: 6px;
  border: 2px solid #e9eefb; box-shadow: 0 0 0 2px #2450b3, 0 14px 28px -14px rgba(0,0,0,.7);
  font: 700 .8rem/1.35 var(--display); letter-spacing: .02em; text-decoration: none;
}
.plate::before, .plate::after { content: ""; position: absolute; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: #dfe6f7; box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
.plate::before { top: 10px; }
.plate::after { bottom: 10px; }
.plate strong { font-size: 1rem; font-stretch: 112%; }
.plate span { opacity: .9; font-weight: 600; }
a.plate:hover { filter: brightness(1.08); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }

@media (max-width: 900px) { .hero-copy { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
  .block--b, .skyline { display: none; }
  .floors .win:nth-child(n+5) { display: none; }
  .shopfront > .sign { font-size: .72rem; }
  .pavement, .kerb { background: repeating-linear-gradient(90deg, var(--yellow) 0 30px, #16161a 30px 60px); }
}

/* ---------- Statement ---------- */
.statement { font: 500 clamp(1.6rem, 3.3vw, 2.75rem)/1.28 var(--display); font-stretch: 104%; letter-spacing: -0.02em; color: var(--on-dark); max-width: 30ch; margin: 0; text-wrap: pretty; }
.statement .dim { color: var(--on-dark-soft); }
.statement-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.statement-side { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 860px) { .statement-grid { grid-template-columns: 1fr; } }

/* ---------- Section heading sign ---------- */
.sign-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(48px, 6vw, 72px); }
.sign-head .sign { font-size: clamp(1rem, 2.1vw, 1.6rem); padding-inline: 1.2em; }
.sign-head p { margin: 0; max-width: 50ch; }
.interior .sign-head p { color: var(--muted); }

/* ---------- Big shopfront (YallaWeb flagship) ---------- */
.flagship { position: relative; background: #1d1d24; border: 10px solid #26262e; border-bottom: 0; }
.flagship > .sign { font-size: clamp(1.1rem, 2.6vw, 2rem); border-width: 4px; margin: 14px; min-height: 3.2em; flex-direction: row; gap: .7em; }
.flagship > .sign .sign__ar { font-size: 1em; opacity: .92; }
.flagship__window {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center;
  margin: 0 14px; padding: clamp(28px, 4.5vw, 64px);
  background: linear-gradient(118deg, rgba(255,255,255,.06) 0 14%, transparent 14% 34%, rgba(255,255,255,.035) 34% 38%, transparent 38%), radial-gradient(80% 90% at 30% 0%, rgba(255,196,120,.16), transparent 70%), #141318;
  border: 4px solid #30303a; border-bottom: 0;
}
.flagship__window h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 18px; }
.flagship__window .btn-row { margin-top: 28px; }
.flagship__display { position: relative; display: grid; justify-items: center; align-content: center; min-height: 440px; padding-bottom: 44px; }
.flagship__display .tag-illustrative { position: absolute; bottom: 0; right: 0; }
@media (max-width: 900px) {
  .flagship__window { grid-template-columns: 1fr; }
  .flagship > .sign { flex-direction: column; gap: 0; }
}
@media (max-width: 560px) { .flagship, .flagship__window { border-width: 6px; } .flagship > .sign { margin: 10px; } .flagship__window { margin: 0 10px; padding: 26px 18px; } }

/* Window decals */
.decal { position: absolute; z-index: 4; display: grid; place-items: center; text-align: center; font-family: var(--display); color: var(--ink); }
.decal--price {
  width: 150px; height: 150px; border-radius: 50%; left: -14px; bottom: 34px; transform: rotate(-10deg); align-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 30%, var(--yellow-hi), var(--yellow) 60%, var(--yellow-deep));
  box-shadow: 0 16px 30px -12px rgba(0,0,0,.6), inset 0 0 0 4px rgba(18,18,21,.9), inset 0 0 0 7px var(--yellow);
}
.decal--price b { display: block; font-weight: 900; font-stretch: 118%; font-size: 2.5rem; line-height: .9; letter-spacing: -0.03em; }
.decal--price small { display: block; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.decal--days { right: -12px; top: 236px; padding: 10px 16px; background: #fff; border-radius: 3px; transform: rotate(4deg); box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); font-weight: 800; font-stretch: 112%; font-size: 1.05rem; line-height: 1.15; }
.decal--days span { display: block; font: 700 .9rem/1.4 var(--ar-display); color: var(--s-red); }
.decal--lang { left: -6px; top: 196px; padding: 8px 14px; border-radius: 999px; background: var(--s-red); color: #fff; font-weight: 800; font-size: .95rem; transform: rotate(-3deg); box-shadow: 0 12px 24px -12px rgba(0,0,0,.7); }
.decal--lang span { font-family: var(--ar-display); }
@media (max-width: 560px) {
  .decal--price { width: 118px; height: 118px; left: -6px; bottom: 20px; }
  .decal--price b { font-size: 1.9rem; }
  .flagship__display { min-height: 400px; }
}

/* ---------- Phone + illustrative mini-screens ---------- */
.phone {
  position: relative; width: 232px; aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 34px;
  background: linear-gradient(145deg, #3a3a44, #1a1a20); box-shadow: 0 40px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12);
}
.phone__screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; color: #1b1b1f; font-size: 10px; line-height: 1.35; }
.phone__screen::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 10px; background: #0d0d10; }
.mini { display: flex; flex-direction: column; height: 100%; }
.mini__bar { display: flex; justify-content: space-between; align-items: center; padding: 32px 14px 10px; font-weight: 800; font-size: 11px; }
.mini__bar span:last-child { font: 600 10px/1 var(--ar-body); color: #666; }
.mini__hero { margin: 0 10px; padding: 18px 14px 16px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #7a3b1f, #3b1d10); }
.mini__hero b { display: block; font: 800 17px/1.1 var(--display); font-stretch: 110%; margin-bottom: 4px; }
.mini__hero .ar { display: block; font: 700 12px/1.5 var(--ar-display); opacity: .92; margin-bottom: 12px; }
.mini__btns { display: flex; gap: 6px; }
.mini__btns i { flex: 1; font-style: normal; text-align: center; padding: 7px 4px; border-radius: 8px; background: var(--wa); color: #06301a; font-weight: 800; font-size: 9px; }
.mini__btns i + i { background: rgba(255,255,255,.18); color: #fff; }
.mini__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; }
.mini__tiles i { display: block; height: 62px; border-radius: 10px; background: #f1ece6; position: relative; }
.mini__tiles i::after { content: ""; position: absolute; left: 8px; right: 22px; bottom: 9px; height: 6px; border-radius: 3px; background: #d8cfc4; }
.mini__tiles i:nth-child(2) { background: #e7efe9; }
.mini__tiles i:nth-child(3) { background: #efe8f1; }
.mini__tiles i:nth-child(4) { background: #fbeee0; }
.mini__foot { margin-top: auto; padding: 10px 14px 16px; display: flex; justify-content: space-between; color: #777; font-size: 9px; }
.phone--sm { width: 150px; padding: 6px; border-radius: 24px; }
.phone--sm .phone__screen { border-radius: 19px; font-size: 7px; }
.phone--sm .phone__screen::before { width: 44px; height: 12px; margin-left: -22px; top: 5px; }
.phone--sm .mini__bar { padding: 22px 10px 6px; font-size: 8px; }
.phone--sm .mini__bar span:last-child { font-size: 7px; }
.phone--sm .mini__hero { margin: 0 7px; padding: 12px 10px; border-radius: 10px; }
.phone--sm .mini__hero b { font-size: 12px; }
.phone--sm .mini__hero .ar { font-size: 9px; margin-bottom: 8px; }
.phone--sm .mini__btns i { font-size: 7px; padding: 5px 2px; }
.phone--sm .mini__tiles { padding: 7px; gap: 5px; }
.phone--sm .mini__tiles i { height: 40px; }
.phone--sm .mini__foot { display: none; }

/* ---------- Services street ---------- */
.row-street { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; background: #26262e; border: 10px solid #26262e; border-bottom: 0; }
.row-street + .row-street { padding-top: 0; }
.row-street + .row-street { border-top: 8px solid #26262e; }
.shop { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 12px 0; background: #1d1d24; }
.shop--5 { grid-column: span 5; } .shop--4 { grid-column: span 4; } .shop--3 { grid-column: span 3; } .shop--6 { grid-column: span 6; }
.shop > .sign { font-size: clamp(.95rem, 1.5vw, 1.25rem); min-height: 4.4em; }
.shop__window {
  flex: 1; display: flex; flex-direction: column; gap: 18px; margin-top: 16px; padding: 24px 22px 28px;
  background: linear-gradient(118deg, rgba(255,255,255,.055) 0 16%, transparent 16% 36%, rgba(255,255,255,.03) 36% 40%, transparent 40%), radial-gradient(90% 70% at 50% 0%, rgba(255,196,120,.13), transparent 70%), #141318;
  border: 3px solid #30303a; border-bottom: 0;
}
.shop__window h3 { color: var(--on-dark); }
.shop__window p { margin: 0; color: var(--on-dark-muted); font-size: .98rem; }
.shop__window .via { margin-top: auto; font-size: .82rem; font-weight: 700; color: var(--yellow); letter-spacing: .02em; }
.shop__display { display: grid; place-items: center; min-height: 170px; }
.shop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.shop li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .95rem; color: var(--on-dark-muted); }
.shop li svg { width: 18px; height: 18px; color: var(--yellow); margin-top: 3px; }
.street-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
@media (max-width: 980px) {
  .shop--5, .shop--4, .shop--3, .shop--6 { grid-column: span 6; }
  .shop:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .row-street { border-width: 6px; }
  .shop--5, .shop--4, .shop--3, .shop--6 { grid-column: 1 / -1; }
}

/* mini displays */
.mapcard { width: 100%; max-width: 250px; border-radius: 12px; overflow: hidden; background: #fff; color: #1b1b1f; box-shadow: 0 20px 30px -18px rgba(0,0,0,.8); font-size: 11px; }
.mapcard__map { position: relative; height: 96px; background:
  linear-gradient(90deg, transparent 46%, #fff 46% 52%, transparent 52%),
  linear-gradient(0deg, transparent 58%, #fff 58% 64%, transparent 64%),
  linear-gradient(28deg, transparent 70%, #fde9a8 70% 75%, transparent 75%),
  radial-gradient(40% 50% at 18% 26%, #cfe8d1 99%, transparent 100%),
  #ecebe6; }
.mapcard__map .pin { top: 20px; }
.mapcard__body { padding: 10px 12px 12px; }
.mapcard__body b { display: block; font-size: 13px; }
.mapcard__body .ar { font: 600 11px/1.4 var(--ar-body); color: #666; }
.mapcard__open { color: #137a3b; font-weight: 700; margin-top: 4px; }
.mapcard__btns { display: flex; gap: 6px; margin-top: 8px; }
.mapcard__btns i { font-style: normal; padding: 5px 9px; border-radius: 999px; border: 1px solid #d9d9d2; font-weight: 700; font-size: 10px; color: #1a57c9; }
.grid9 { display: grid; grid-template-columns: repeat(3, 60px); gap: 5px; }
.grid9 i { display: grid; place-items: center; height: 60px; border-radius: 4px; font: 800 11px/1.1 var(--display); font-style: normal; text-align: center; color: #fff; padding: 4px; }
.grid9 i[lang="ar"] { font: 800 13px/1.3 var(--ar-display); }
.chat { width: 100%; max-width: 260px; display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #0b141a; font-size: 12px; }
.chat p { margin: 0; padding: 8px 11px; border-radius: 10px; max-width: 86%; line-height: 1.4; }
.chat .in { background: #202c33; color: #e9edef; border-top-left-radius: 2px; }
.chat .out { justify-self: end; background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
.chat [lang="ar"] { font-family: var(--ar-body); }
.chat small { display: block; text-align: end; font-size: 9px; opacity: .6; margin-top: 2px; }
.adcard { width: 100%; max-width: 240px; border-radius: 10px; overflow: hidden; background: #fff; color: #1b1b1f; font-size: 11px; box-shadow: 0 20px 30px -18px rgba(0,0,0,.8); }
.adcard__top { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.adcard__top i { width: 22px; height: 22px; border-radius: 50%; background: var(--s-pink); flex: none; }
.adcard__top b { font-size: 11px; display: block; }
.adcard__top small { color: #777; font-size: 9px; }
.adcard__img { display: grid; place-items: center; align-content: center; gap: 4px; height: 116px; text-align: center; background: radial-gradient(circle at 70% 20%, #ffe38a, var(--yellow) 45%, #f0a800); color: var(--ink); }
.adcard__img b { font: 900 20px/1 var(--display); font-stretch: 115%; }
.adcard__img span { font: 800 14px/1.3 var(--ar-display); }
.adcard__cta { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; background: #f4f4f1; font-weight: 700; }
.adcard__cta i { font-style: normal; padding: 5px 10px; border-radius: 6px; background: #e4e6eb; font-size: 10px; }
.cal { width: 100%; max-width: 250px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; border-radius: 10px; background: #fff; color: #1b1b1f; font-size: 9px; box-shadow: 0 20px 30px -18px rgba(0,0,0,.8); }
.cal b { grid-column: 1 / -1; font-size: 12px; margin-bottom: 4px; }
.cal i { display: grid; place-items: center; height: 24px; border-radius: 4px; background: #f2f2ee; font-style: normal; color: #888; }
.cal i.p { background: var(--s-pink); color: #fff; font-weight: 700; }
.cal i.a { background: var(--s-blue); color: #fff; font-weight: 700; }
.cal i.r { background: var(--yellow); color: var(--ink); font-weight: 800; }
.cal .key { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; color: #666; }
.cal .key span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 4px; background: var(--c); vertical-align: -1px; }

/* ---------- Sign builder ---------- */
.builder { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.builder__stage { position: relative; padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px) clamp(72px, 8vw, 100px); background: linear-gradient(180deg, #1e1e25, #17171c); border: 10px solid #26262e; }
.builder__stage::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,.2) 38px 40px), repeating-linear-gradient(90deg, transparent 0 88px, rgba(0,0,0,.14) 88px 90px); pointer-events: none; }
.builder__stage .sign { font-size: clamp(1.1rem, 2.8vw, 2.1rem); min-height: 5.4em; max-width: 100%; overflow-wrap: anywhere; }
.builder__stage .sign .sign__en { text-transform: none; letter-spacing: -0.01em; font-stretch: 112%; }
.sign__domain { font: 700 .4em/1 var(--display); letter-spacing: .08em; opacity: .85; margin-top: .6em; }
.js .builder__stage .sign[data-sign].is-on.is-flicker { animation: sign-flick .95s steps(1, end) both; }
@keyframes sign-flick { 0% { filter: brightness(.3) saturate(.55); } 7% { filter: brightness(1.15); } 12% { filter: brightness(.35) saturate(.6); } 19% { filter: brightness(1.1); } 25% { filter: brightness(.6); } 33%, 100% { filter: none; } }
.builder__stage .tag-illustrative { position: absolute; left: 14px; bottom: 14px; }
.builder form { display: grid; gap: 20px; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 8px; color: var(--on-dark); }
.field input, .field select {
  width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 4px; border: 1.5px solid var(--steel-2);
  background-color: var(--asphalt-2); color: var(--on-dark); font: 500 1.05rem/1.2 var(--body); caret-color: var(--yellow);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--on-dark-soft); }
.field input:focus, .field select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,209,42,.18); }
.field select { appearance: none; padding-inline-end: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--on-dark-muted) 50%), linear-gradient(135deg, var(--on-dark-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field__hint { margin: 6px 0 0; font-size: .85rem; color: var(--on-dark-soft); }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }

/* ---------- Opening hours plaque (how it works) ---------- */
.hours-plaque {
  position: relative; max-width: 780px; margin-inline: auto; padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(118deg, rgba(255,255,255,.07) 0 12%, transparent 12% 30%, rgba(255,255,255,.035) 30% 33%, transparent 33%), #0f0f13;
  border: 10px solid #2a2a31; color: #fff;
}
.hours-plaque__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 2px solid rgba(255,255,255,.85); }
.hours-plaque__title h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: .02em; text-transform: uppercase; font-stretch: 120%; color: #fff; }
.hours-plaque__title span { font: 800 clamp(1.3rem, 2.6vw, 2rem)/1 var(--ar-display); }
.hours-plaque dl { margin: 0; }
.hours-plaque .row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px dashed rgba(255,255,255,.22); }
.hours-plaque dt { font: 800 1.05rem/1.2 var(--display); font-stretch: 115%; text-transform: uppercase; letter-spacing: .04em; color: var(--yellow); }
.hours-plaque dd { margin: 0; }
.hours-plaque dd b { display: block; font-size: 1.12rem; }
.hours-plaque dd span { display: block; color: var(--on-dark-muted); font-size: .96rem; margin-top: 2px; }
.hours-plaque__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; font-size: .88rem; color: var(--on-dark-muted); }
.hours-plaque__foot strong { color: #fff; }
@media (max-width: 560px) { .hours-plaque .row { grid-template-columns: 1fr; gap: 4px; } .hours-plaque { border-width: 6px; } }

/* ---------- Inside the shop (light sections) ---------- */
.inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.inside-grid--wide { grid-template-columns: 1.25fr .75fr; }
@media (max-width: 900px) { .inside-grid, .inside-grid--wide { grid-template-columns: 1fr; } }
.rules { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.rules li { display: grid; grid-template-columns: minmax(150px, .8fr) 2fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules li b { font: 800 1.05rem/1.3 var(--display); font-stretch: 110%; color: var(--ink); }
.rules li span { color: var(--muted); }
@media (max-width: 560px) { .rules li { grid-template-columns: 1fr; gap: 4px; } }
.interior h2 + .lead, .interior h2 + p { margin-top: 20px; }

/* Building diagram (About) */
.building { max-width: 440px; margin-inline: auto; background: #2a2a32; padding: 0 12px; border-radius: 4px 4px 0 0; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.building__name { margin: 0 -12px; padding: 16px 12px; text-align: center; background: #1b1b21; color: #fff; border-radius: 4px 4px 0 0; }
.building__name strong { display: block; font: 800 1.1rem/1.1 var(--display); font-stretch: 120%; letter-spacing: .08em; text-transform: uppercase; }
.building__name span { display: block; font-size: .78rem; color: var(--on-dark-soft); margin-top: 6px; }
.building__floors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 14px 0; }
.building__floors i { height: 26px; background: #16161b; border-radius: 2px; }
.building__floors i.l { background: linear-gradient(#ffcf7a, #e59a3a); opacity: .7; }
.building .sign { font-size: 1.05rem; }
.building__glass { height: 90px; margin-top: 12px; background: radial-gradient(90% 80% at 50% 0%, rgba(255,205,130,.35), rgba(40,32,24,.6) 70%), #16140f; border: 3px solid #3a3a44; border-bottom: 0; }
.building + .pavement { max-width: 440px; margin-inline: auto; }
.building-caption { max-width: 440px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: .88rem; color: var(--muted); }
.building-caption b { display: block; color: var(--ink); }

/* Milestones on street plates */
.milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; margin: 0; padding: 0; }
.milestones li { padding-top: 24px; border-top: 2px solid var(--ink); }
.milestones .plate { margin-bottom: 18px; }
.milestones h3 { margin-bottom: 8px; }
.milestones p { color: var(--muted); margin: 0; font-size: .98rem; }
@media (max-width: 800px) { .milestones { grid-template-columns: 1fr; } }

/* Name plate (management) */
.nameplate { position: relative; display: inline-block; padding: 22px 36px; background: #e6e4dc; border: 1px solid #bdb9ad; border-radius: 2px; color: #1a1a1a; box-shadow: 0 14px 28px -18px rgba(0,0,0,.45); }
.nameplate::before, .nameplate::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #a9a597; }
.nameplate::before { left: 13px; }
.nameplate::after { right: 13px; }
.nameplate b { display: block; font: 800 1.35rem/1.15 var(--display); font-stretch: 108%; }
.nameplate span { display: block; margin-top: 4px; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: #45453f; font-weight: 700; }

/* Menu board (YallaWeb included list) */
.menu-board { background: #16161a; color: #fff; border: 10px solid #2a2a31; padding: clamp(24px, 4vw, 44px); }
.menu-board__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid #fff; margin-bottom: 8px; }
.menu-board__head h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: .03em; font-stretch: 120%; color: #fff; }
.menu-board__price { font: 900 clamp(2.2rem, 5vw, 3.6rem)/.9 var(--display); font-stretch: 118%; color: var(--yellow); letter-spacing: -0.03em; }
.menu-board__price small { font-size: .32em; font-weight: 700; letter-spacing: .04em; color: #fff; text-transform: uppercase; }
.menu-board ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.menu-board li { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.2); font-weight: 600; }
.menu-board li svg { width: 16px; height: 16px; flex: none; color: var(--yellow); transform: translateY(2px); }
@media (max-width: 640px) { .menu-board ul { columns: 1; } .menu-board { border-width: 6px; } }

/* Industry signs */
.sign-rack { display: flex; flex-wrap: wrap; gap: 30px 14px; }
.sign-rack .sign { font-size: .9rem; min-width: 150px; flex: 1 1 150px; }

/* Posted notice (advertising standards) */
.notice { background: #fff; color: var(--text); padding: clamp(28px, 4vw, 48px); border-radius: 2px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); position: relative; }
.notice::before, .notice::after { content: ""; position: absolute; top: -9px; width: 60px; height: 22px; background: rgba(255, 225, 105, .85); }
.notice::before { left: 28px; transform: rotate(-4deg); }
.notice::after { right: 28px; transform: rotate(5deg); }
.notice h3 { font-size: 1.35rem; text-transform: uppercase; font-stretch: 118%; letter-spacing: .02em; margin-bottom: 18px; }
.notice ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 12px; color: var(--muted); }
.notice ol li::marker { font-weight: 800; color: var(--ink); }

/* ---------- OPEN sign close ---------- */
.open-close { text-align: center; }
.open-sign {
  display: inline-flex; align-items: center; gap: .35em; padding: .16em .55em .2em; margin-bottom: 40px;
  font: 900 clamp(3rem, 10vw, 7rem)/1 var(--display); font-stretch: 125%; letter-spacing: .02em; color: #fff6cc;
  border: .055em solid #fff6cc; border-radius: .2em;
  text-shadow: 0 0 .06em #fff, 0 0 .2em var(--yellow), 0 0 .5em rgba(255,209,42,.55);
  box-shadow: 0 0 .15em rgba(255,209,42,.7), inset 0 0 .15em rgba(255,209,42,.6);
}
.open-sign span { font: 900 .6em/1.2 var(--ar-display); }
.js .open-sign[data-sign]:not(.is-on) { opacity: .16; text-shadow: none; box-shadow: none; }
.js .open-sign[data-sign].is-on { animation: neon-on 1.3s steps(1, end) both; }
@keyframes neon-on { 0% { opacity: .16; } 10% { opacity: 1; } 16% { opacity: .2; } 24% { opacity: 1; } 30% { opacity: .5; } 42%, 100% { opacity: 1; } }
.open-close h2 { max-width: 18ch; margin-inline: auto; }
.open-close .lead { margin: 22px auto 34px; }
.open-close .btn-row { justify-content: center; }
.contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 32px; color: var(--on-dark-muted); font-size: .95rem; }
.contact-lines a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.contact-lines a:hover { color: var(--yellow); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b0c14, var(--asphalt)); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 30% 35%, var(--sodium), transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; padding-block: clamp(40px, 5vw, 64px) clamp(52px, 6vw, 84px); }
.page-hero .sign { display: inline-flex; font-size: clamp(1.5rem, 4.6vw, 3.4rem); padding: .4em .9em .45em; margin: 22px 0 48px; max-width: 100%; }
.page-hero .sign .sign__en { letter-spacing: .01em; }
.page-hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--on-dark-soft); }
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: var(--steel-2); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .9rem; color: var(--on-dark-soft); }
.legal-meta strong { color: var(--on-dark); font-weight: 600; }

/* ---------- Framed licence document (company information) ---------- */
.frame { background: #fff; padding: 12px; border: 14px solid #1d1d22; box-shadow: 0 40px 70px -40px rgba(0,0,0,.6), inset 0 0 0 1px #ddd; }
.frame__doc { border: 1px solid #d6d6ce; padding: clamp(18px, 3vw, 34px); }
.frame__doc header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.frame__doc header b { font: 800 1.15rem/1.2 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; }
.frame__doc header span { font: 700 1rem/1.3 var(--ar-display); color: var(--muted); }
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: start; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts th { width: 36%; padding-inline-end: 18px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.facts td { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.facts a { color: var(--ink); text-decoration-color: var(--yellow-deep); }
@media (max-width: 560px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: 100%; }
  .facts tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .facts tr:last-child { border-bottom: 0; }
  .facts th, .facts td { border: 0 !important; padding: 0; }
  .facts th { font-size: .8rem; margin-bottom: 2px; }
  .frame { border-width: 8px; padding: 6px; }
}
.side-notes { display: grid; gap: 30px; }
.side-notes h3 { margin-bottom: 8px; font-size: 1.1rem; }
.side-notes p { color: var(--muted); margin: 0; }
.side-notes > div { padding-top: 18px; border-top: 2px solid var(--ink); }

/* ---------- Contact ---------- */
.channels { display: grid; border-top: 1px solid var(--line-dark); }
.channel { display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; color: var(--on-dark); transition: background .3s; }
.channel:hover { background: linear-gradient(90deg, rgba(255,209,42,.07), transparent 70%); }
.channel__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; background: var(--asphalt-3); color: var(--yellow); }
.channel__ico svg { width: 24px; height: 24px; }
.channel--wa .channel__ico { background: var(--wa); color: #052e16; }
.channel small { display: block; font-size: .8rem; color: var(--on-dark-soft); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.channel b { font: 800 clamp(1.2rem, 2.6vw, 1.9rem)/1.15 var(--display); font-stretch: 108%; overflow-wrap: anywhere; }
.channel > svg { width: 22px; height: 22px; color: var(--on-dark-soft); }
.channel:hover > svg { color: var(--yellow); }
@media (max-width: 560px) { .channel { grid-template-columns: 48px 1fr; } .channel > svg { display: none; } .channel__ico { width: 48px; height: 48px; } }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.2); }
.hours-list span:last-child { font-weight: 700; color: var(--on-dark); }
.contact-side { display: grid; gap: 40px; align-content: start; }
.contact-side h2 { font-size: 1.4rem; margin-bottom: 14px; }

/* ---------- Legal prose ---------- */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.toc { position: sticky; top: 100px; font-size: .9rem; }
.toc__title { font: 800 .8rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--ink); border-inline-start-color: var(--yellow-deep); }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; background: #fff; border: 1px solid var(--line); padding: 18px 20px; }
  .toc ol { columns: 2; column-gap: 24px; border: 0; }
  .toc a { padding-inline-start: 0; border: 0; margin: 0; }
}
@media (max-width: 520px) { .toc ol { columns: 1; } }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-stretch: 108%; margin: 52px 0 14px; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; font-size: 1.08rem; }
.prose p, .prose li { color: #2a2a31; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--ink); font-weight: 600; text-decoration-color: var(--yellow-deep); text-decoration-thickness: 2px; }
.prose .table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .93rem; background: #fff; }
.prose th, .prose td { text-align: start; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; }
.prose th { background: #ececE6; font-weight: 700; color: var(--ink); }
.prose address { font-style: normal; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--yellow); padding: 16px 20px; margin: 12px 0 20px; line-height: 1.7; }

/* ---------- Footer: the kerb ---------- */
.site-footer { background: #0c0c0f; color: var(--on-dark-muted); font-size: .92rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.footer-top h2 { font: 800 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 18px; }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-about p { margin: 18px 0 22px; max-width: 34ch; }
.footer-yw { display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--yw-navy); border-radius: 4px; box-shadow: 0 12px 28px -14px rgba(255,107,53,.5); }
.footer-yw .yw-word { font-size: 1.15rem; color: #fff; }
.footer-yw svg { width: 18px; height: 18px; color: #fff; }
.site-footer .footer-yw:hover { color: #fff; filter: brightness(1.1); }
.footer-legal { border-top: 1px solid var(--line-dark); padding-block: 26px; font-size: .84rem; line-height: 1.75; color: var(--on-dark-soft); }
.footer-legal p { margin: 0 0 6px; }
.footer-legal strong { color: var(--on-dark); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 32px; font-size: .84rem; color: var(--on-dark-soft); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { padding-bottom: 88px; } }

/* WhatsApp: a small green lit sign */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--wa); color: #052e16; text-decoration: none;
  font: 800 .9rem/1 var(--display); box-shadow: 0 14px 30px -10px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .35s var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 24px; height: 24px; }
@media (max-width: 560px) { .wa-float span { display: none; } .wa-float { padding: 12px; } }
[dir="rtl"] .wa-float { right: auto; left: 18px; padding: 10px 12px 10px 16px; }

/* ---------- RTL ---------- */
[dir="rtl"] body { font-family: var(--ar-body); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--ar-display); letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .statement { font-family: var(--ar-display); letter-spacing: 0; line-height: 1.7; font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 2.3rem); }
[dir="rtl"] .btn { font-family: var(--ar-display); letter-spacing: 0; }
[dir="rtl"] .flip { transform: scaleX(-1); }
[dir="rtl"] .plate { padding: 11px 32px 11px 18px; }
[dir="rtl"] .plate::before, [dir="rtl"] .plate::after { left: auto; right: 12px; }
[dir="rtl"] .decal--price { left: auto; right: 0; transform: rotate(10deg); }
[dir="rtl"] .decal--days { right: auto; left: 0; }
[dir="rtl"] .decal--lang { left: auto; right: 10px; }
[dir="rtl"] .flagship__display .tag-illustrative { right: auto; left: 0; }
[dir="rtl"] .channel:hover { background: linear-gradient(270deg, rgba(255,209,42,.07), transparent 70%); }
[dir="rtl"] .hours-plaque dt { letter-spacing: 0; font-family: var(--ar-display); }

/* ---------- 404 ---------- */
.notfound { min-height: 68vh; display: grid; place-items: center; text-align: center; }
.notfound .sign { display: inline-flex; font-size: clamp(1.6rem, 5vw, 3rem); margin: 0 auto 44px; }
.notfound h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.notfound .lead { margin: 16px auto 30px; }
.notfound .btn-row { justify-content: center; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .sign[data-sign]:not(.is-on) { filter: none; }
  .js .sign[data-sign]:not(.is-on)::after { opacity: 1; }
  .js .street-hero .shopfront:not(.is-lit) .shopfront__glass { filter: none; }
  .js .street-hero .pin { opacity: 1; transform: none; }
  .js .open-sign[data-sign]:not(.is-on) { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .wa-float, .toc, .street-hero, .pavement { display: none !important; }
  body, .page-hero { background: #fff; color: #000; }
  .sign { filter: none !important; }
}
.hero-en { font-family: var(--display) !important; font-stretch: 112%; font-weight: 700; letter-spacing: -0.01em; }

/* Bidi: every Arabic run reads right-to-left, every English run inside Arabic reads left-to-right */
[lang="ar"] { direction: rtl; unicode-bidi: isolate; }
[lang="en"] { direction: ltr; unicode-bidi: isolate; }
html:not([dir="rtl"]) .hero-ar { text-align: left; }
[dir="rtl"] .hero-en { text-align: right; }
[dir="rtl"] .side-notes [lang="en"] { text-align: right; }

/* Mobile flagship decals stay off the phone's content */
@media (max-width: 560px) {
  .decal--lang { display: none; }
  .decal--days { top: auto; bottom: 70px; right: -4px; }
}

/* Shop door with vinyl lettering (house rules) */
.door-grid { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .door-grid { grid-template-columns: 1fr; } }
.door { position: relative; padding: 14px 14px 0; background: linear-gradient(90deg, #44444f, #373741 40%, #44444f); border-radius: 3px 3px 0 0; box-shadow: 0 40px 60px -40px rgba(0,0,0,.8); }
.door__glass { position: relative; padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px) 64px;
  background: linear-gradient(112deg, rgba(255,255,255,.08) 0 12%, transparent 12% 32%, rgba(255,255,255,.035) 32% 36%, transparent 36%), radial-gradient(80% 50% at 50% 0%, rgba(255,200,120,.14), transparent 70%), #0e0e12; }
.door__bar { position: absolute; left: 28px; right: 28px; bottom: 22px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #c4c4cc, #6c6c76); box-shadow: 0 6px 10px rgba(0,0,0,.5); }
.door__bar::before, .door__bar::after { content: ""; position: absolute; top: -6px; width: 14px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, #8a8a94, #55555e); }
.door__bar::before { left: 10px; } .door__bar::after { right: 10px; }
.door__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid rgba(255,255,255,.9); color: #fff; }
.door__hours { font: 700 .8rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #cfcfd6; }
.door__title span:lang(ar) { font: 800 1.3rem/1.3 var(--ar-display); }
.door ul { list-style: none; margin: 0; padding: 0; }
.door li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: #d8d8dc; font-size: .95rem; line-height: 1.5; }
.door li b { display: block; color: #fff; font: 800 1rem/1.3 var(--display); font-stretch: 110%; margin-bottom: 2px; }
.door__foot { margin-top: 18px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #a9a9b2; }
.door + .kerb { margin-top: 0; }
.sign__en { direction: ltr; unicode-bidi: isolate; }


/* ---------- Storefront heroes (inner pages) ---------- */
.page-hero .container { padding-block: clamp(28px, 3.5vw, 44px) clamp(40px, 5vw, 64px); }
.storefront { margin-top: 18px; background: #1c1c24; border: 10px solid #26262e; border-bottom: 0; }
.storefront__fascia { padding: 14px; background: linear-gradient(180deg, #22222b, #1c1c24); }
.page-hero .storefront .sign { display: inline-flex; margin: 0; font-size: clamp(1.3rem, 3.6vw, 2.6rem); }
.storefront__window { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4px; margin: 0 14px; border: 4px solid #30303a; border-bottom: 0; background: #30303a; }
.storefront__copy { background: linear-gradient(112deg, rgba(255,255,255,.06) 0 12%, transparent 12% 32%, rgba(255,255,255,.03) 32% 36%, transparent 36%), radial-gradient(80% 90% at 20% 0%, rgba(255,196,120,.14), transparent 70%), #141318; }
.storefront__copy { padding: clamp(24px, 3.6vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.storefront__copy .lead { margin: 0; }
.storefront__scene { position: relative; min-height: 240px; overflow: hidden; background: #0e0d0c; }
.storefront__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero .pave, .page-hero .kerb { margin-inline: 0; }
.page-hero--flagship .flagship { margin-top: 18px; }
.flagship__h { font: 800 clamp(1.9rem, 3.6vw, 3rem)/1.04 var(--display); font-stretch: 112%; letter-spacing: -0.025em; color: var(--on-dark); margin: 0 0 18px; text-wrap: balance; }
[dir="rtl"] .flagship__h { font-family: var(--ar-display); letter-spacing: 0; line-height: 1.4; }
@media (max-width: 760px) {
  .storefront__window { grid-template-columns: 1fr; }
  .storefront__scene { min-height: 170px; }
  .storefront { border-width: 6px; }
  .storefront__window { margin: 0 8px; }
}

/* ---------- Services: one continuous street ---------- */
.svc-street { background: #2a2a33; border: 10px solid #26262e; border-bottom: 0; }
.svc-floors { background: linear-gradient(180deg, #22222b, #1c1c24); border-bottom: 8px solid #2a2a33; }
.svc-floors .floors { padding: 12px 16px 14px; }
.svc-row { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); grid-auto-rows: auto; }
.svc { grid-row: span 5; display: grid; grid-template-rows: subgrid; min-width: 0; }
.svc__fascia { margin: 0 4px; padding: 12px 10px 0; background: #1c1c24; display: flex; }
.svc__fascia .sign { flex: 1; font-size: clamp(.8rem, 1.05vw, 1rem); margin: 0; }
.svc__front { margin: 0 4px; padding: 0 10px; background: #1c1c24; }
.svc__glass { display: grid; place-items: center; height: 240px; margin-top: 14px; box-sizing: border-box; padding: 14px 10px; border: 3px solid #30303a; border-bottom: 0; overflow: hidden;
  background: linear-gradient(118deg, rgba(255,255,255,.055) 0 16%, transparent 16% 36%, rgba(255,255,255,.03) 36% 40%, transparent 40%), radial-gradient(90% 70% at 50% 0%, rgba(255,196,120,.16), transparent 70%), #141318; }
.svc__pave { height: 26px; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0,0,0,.35) 58px 60px), linear-gradient(180deg, #34343a, #2a2a30); }
.svc__kerb { height: 12px; background: repeating-linear-gradient(90deg, var(--yellow) 0 44px, #17171b 44px 88px); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.35); }
.svc__caption { padding: 20px 14px 28px; background: var(--asphalt); }
.svc__caption p { margin: 0 0 12px; color: var(--on-dark-muted); font-size: .95rem; }
.svc__caption ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.svc__caption li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: .9rem; color: var(--on-dark-muted); }
.svc__caption li svg { width: 16px; height: 16px; color: var(--yellow); margin-top: 3px; }
.svc__caption .via { display: block; font-size: .82rem; font-weight: 700; color: var(--yellow); }
.svc .phone--sm { width: 128px; }
.svc .mapcard, .svc .chat, .svc .adcard, .svc .cal { max-width: 100%; }
.svc .grid9 { grid-template-columns: repeat(3, 50px); }
.svc .grid9 i { height: 50px; }
.svc .chat p { font-size: 11px; }
@media (max-width: 1080px) {
  .svc-floors { display: none; }
  .svc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc-street { border-width: 6px; }
  .svc-row { grid-template-columns: 1fr; }
  .svc__glass { height: 220px; }
}

/* ---------- Builder: the shuttered unit ---------- */
.builder { align-items: start; }
.builder__stage { padding: 14px 14px 0; background: #1c1c24; border: 10px solid #26262e; border-bottom: 0; }
.builder__stage .sign { font-size: clamp(1.05rem, 2.4vw, 1.8rem); min-height: 5em; margin: 0; }
.builder__stage .sign--blank .sign__en { font-size: .6em; }
.b-glass { position: relative; height: clamp(200px, 22vw, 290px); margin-top: 14px; border: 4px solid #30303a; border-bottom: 0; overflow: hidden; background: #0e0d0c; }
.b-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.b-scene.is-active { opacity: 1; }
.b-scene svg { width: 100%; height: 100%; display: block; }
.b-shutter { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 30%), repeating-linear-gradient(180deg, #3b3b44 0 9px, #2c2c34 9px 11px, #34343c 11px 12px); transition: transform 1.2s var(--ease-out); }
.b-shutter::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 60px; height: 8px; margin-left: -30px; background: #5a5a64; border-radius: 4px; }
.b-shutter.is-up { transform: translateY(-100%); }
.builder__note { display: flex; justify-content: flex-end; margin-top: 12px; }
.sign__domain[hidden] { display: none; }
.shopfront--shut { text-decoration: none; color: inherit; cursor: pointer; }
.shopfront--shut:hover .sign--blank { border-color: rgba(255, 209, 42, .7); color: var(--yellow); }
.svc__fascia, .svc__front, .svc__caption, .svc__glass { min-width: 0; }
.svc__fascia .sign { min-width: 0; overflow-wrap: anywhere; }
.svc .grid9 { grid-template-columns: repeat(3, 44px); gap: 4px; }
.svc .grid9 i { height: 44px; font-size: 10px; }
.svc .grid9 i[lang="ar"] { font-size: 11px; }


/* Services: the building stops at the kerb; captions sit on the open street */
.svc__caption--inline { display: none; }
.svc-caps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); padding-inline: 10px; }
.svc-caps .svc__caption { background: transparent; padding: 20px 14px 8px; }
.svc { grid-row: span 4; }
@media (max-width: 1080px) { .svc-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc-caps { display: none; }
  .svc { grid-row: span 5; }
  .svc__caption--inline { display: block; background: var(--asphalt); padding: 18px 4px 28px; }
  .svc-street { border-inline-width: 0; border-top-width: 0; background: transparent; }
  .svc__fascia, .svc__front { margin: 0; }
  .svc__fascia { border-inline: 6px solid #26262e; border-top: 6px solid #26262e; }
  .svc__front { border-inline: 6px solid #26262e; }
}

/* Door: the copy column rides alongside the door; the header never breaks times */
.door-grid > :first-child { position: sticky; top: 110px; }
.door__hours { white-space: nowrap; }
@media (max-width: 900px) { .door-grid > :first-child { position: static; } }
@media (max-width: 480px) {
  .door__title { flex-direction: column; align-items: flex-start; gap: 6px; }
  .door__title span:lang(ar) { white-space: nowrap; }
}