/* =============================================================================
   WK Hub — site styles
   Tokens → base → backdrop → nav → screens → views → bottom bar → responsive → RTL

   The look follows the reference design, WK Hub.dc.html: flat surfaces, text set
   straight on the scene, night only. Where the site departs from it,
   the comment says why: honest labels, the contact form, touch targets or contrast.
   ============================================================================= */

/* ---------- 1. tokens ---------- */
:root {
  /* night: the only theme */
  --bg: #040806;
  --pnl: 6, 13, 10;            /* panel rgb */
  --pnlS: #070f0c;             /* solid panel */
  --ln: 232, 243, 228;         /* line rgb (ink-ish) */
  --shd: 2, 7, 5;              /* shadow rgb */
  --scr: 4, 9, 7;              /* scrim / text-glow rgb */
  --scan: 4, 9, 7;             /* scanline rgb */
  --scan-op: .4;
  --vig: rgba(2, 6, 4, .62);
  --ink: #e8f3e4;
  --ink2: #cfe3d0;
  --dim: #9cbaa3;
  --dim2: #7e9a86;
  --onacc: #08170f;
  --acc: #8adc6a;  --accrgb: 138, 220, 106;
  --teal: #7ed9c3; --tealrgb: 126, 217, 195;
  --amber: #e8b45a; --amberrgb: 232, 180, 90;
  --pink: #e9a8c8;  --pinkrgb: 233, 168, 200;
  --red: #ff7a63;

  --font: 'Space Mono', ui-monospace, monospace;
  --fontd: 'Space Grotesk', system-ui, sans-serif;
  --fontpx: 'Press Start 2P', monospace;
  --ls1: .1em; --ls2: .16em; --ls3: .22em;     /* letter-spacing steps; zeroed for Arabic */
  --gx: clamp(18px, 3.2vw, 48px);              /* horizontal gutter */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-fs: 11px;
  --glow: 0 4px 26px rgba(var(--scr), .92);
  --glow-sm: 0 1px 3px rgba(var(--scr), .95);
}

/* Arabic: IBM Plex Sans Arabic throughout, as in the reference, and no letter-spacing,
   because tracking breaks Arabic joining. The colours are the same as in English. */
html[lang^="ar"] {
  --font: 'IBM Plex Sans Arabic', 'Space Mono', system-ui, sans-serif;
  --fontd: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ls1: 0; --ls2: 0; --ls3: 0;
  --nav-fs: 13.5px;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .5s ease, color .5s ease;
}
/* The reference sets no size on the page, so its nav and home run at 16px with normal
   line height; that is what sizes the chip rows, the pills and the cards. */
.nav, .home { font-size: 16px; line-height: normal; }
::selection { background: var(--acc); color: var(--onacc); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc); }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
input, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(var(--ln), .16); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
a[href^="mailto:"], .card-num, .bar-mark, [dir="rtl"] .brand { unicode-bidi: isolate; }
.skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 12px; z-index: 100; padding: 12px 18px; background: var(--pnlS); color: var(--ink); translate: 0 -180%; }
.skip-link:focus { translate: 0 0; }
.no-script { position: fixed; inset: 20%; z-index: 100; background: #fff; color: #172b24; padding: 30px; }

/* Animations use translate, scale and opacity, never transform, because the pointer
   parallax writes an inline transform on the same elements. (spin runs only on the map
   ring, which has no parallax of its own.) */
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes dash  { to { stroke-dashoffset: -64 } }
@keyframes bob   { 0%, 100% { translate: 0 0 } 50% { translate: 0 -7px } }
@keyframes pulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
@keyframes spin  { to { transform: rotate(360deg) } }

/* ---------- 3. backdrop ---------- */
#city { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; image-rendering: pixelated; touch-action: none; }
.scrim, .vignette, .scan { position: fixed; inset: 0; pointer-events: none; }
.scrim { z-index: 1; background: linear-gradient(100deg, rgba(var(--scr), .9) 0%, rgba(var(--scr), .74) 30%, rgba(var(--scr), .26) 52%, rgba(var(--scr), 0) 72%); transition: background .5s ease; }
.vignette { z-index: 1; background: radial-gradient(ellipse 122% 86% at 50% 44%, rgba(0, 0, 0, 0) 44%, var(--vig) 100%); }
.scan { z-index: 6; opacity: var(--scan-op); background: repeating-linear-gradient(180deg, rgba(var(--scan), .2) 0 1px, rgba(var(--scan), 0) 1px 3px); }
html[data-scanlines="off"] .scan { display: none; }
/* The blog is the one long-form list on the scene, so its scrim keeps a floor across the
   whole width instead of fading to nothing at 72%: the right-hand column reads as well. */
html[data-view="blog"] .scrim { background: linear-gradient(100deg, rgba(var(--scr), .9) 0%, rgba(var(--scr), .74) 30%, rgba(var(--scr), .52) 58%, rgba(var(--scr), .42) 100%); }
/* the dark side of the scrim follows the text into right-to-left layouts */
[dir="rtl"] .scrim { transform: scaleX(-1); }

/* ---------- 4. nav ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 8px 14px;
  width: max-content; max-width: calc(100% - 20px);
  padding: 6px; padding-inline: 16px 6px;
  border: 1px solid rgba(var(--ln), .12); border-radius: 999px;
  background: rgba(var(--pnl), .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(var(--shd), .66);
  transition: background .5s ease, border-color .5s ease;
}
.brand { position: relative; display: flex; align-items: center; gap: 6px; font-family: var(--fontpx); font-size: 9.5px; color: var(--ink); white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand::after { content: ""; position: absolute; inset: -16px -6px; }   /* a 44px target around the small logo */
.brand i { width: 6px; height: 12px; background: var(--acc); display: block; animation: blink 1.2s steps(1) infinite; }
.nav-links { display: flex; align-items: center; gap: 14px; }
.nav-link { position: relative; font-size: var(--nav-fs); letter-spacing: .06em; color: var(--dim); padding: 9px 4px; white-space: nowrap; transition: color .2s; }
.nav-link i { font-style: normal; opacity: .5; margin-inline-end: 5px; }
.nav-link:hover { color: var(--dim); }
.nav-link.is-active { color: var(--ink); }
.nav-tools { display: flex; align-items: center; gap: 14px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px;
  font-size: 9.5px; letter-spacing: var(--ls1); color: var(--dim);
  border: 1px solid rgba(var(--ln), .16); border-radius: 999px; padding: 9px 13px; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.pill:hover { color: var(--ink); border-color: rgba(var(--ln), .4); }
.js-motion { padding-inline: 10px; }
.btn-contact { position: relative; font-size: var(--nav-fs); font-weight: 700; letter-spacing: .02em; color: var(--onacc); background: var(--ink); border-radius: 999px; padding: 11px 18px; white-space: nowrap; }
.btn-contact:hover { color: var(--onacc); }
.burger { display: none; width: 38px; height: 38px; min-height: 44px; min-width: 44px; border-radius: 50%; border: 1px solid rgba(var(--ln), .16); position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: .25s var(--ease); }
.burger::before { top: 14px; } .burger::after { bottom: 14px; }
html[data-menu="open"] .burger::before { top: 18px; transform: rotate(45deg); }
html[data-menu="open"] .burger::after { bottom: 18px; transform: rotate(-45deg); }
/* The reference draws 34px pills; an invisible strip above and below each keeps every
   control in the full nav a 44px target. */
@media (min-width: 801px) {
  .nav .pill { position: relative; min-height: 0; min-width: 0; }
  .nav .js-motion { min-width: 44px; }
  .nav .pill::after, .nav-link::after, .btn-contact::after { content: ""; position: absolute; inset: -5px 0; }
}

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 35; display: none; flex-direction: column; justify-content: safe center; overflow-y: auto; padding: 100px var(--gx) 40px; background: rgba(var(--pnl), .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-menu="open"] .menu { display: flex; }
.menu-link { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(var(--ln), .12); font-family: var(--fontd); font-size: clamp(26px, 7vw, 40px); font-weight: 700; color: var(--ink); text-align: start; }
.menu-link i { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--dim2); letter-spacing: var(--ls1); }
.menu-link.is-active { color: var(--acc); }
.menu-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(var(--ln), .12); }

/* ---------- 5. screens ---------- */
main { position: fixed; inset: 0; z-index: 10; }
main:focus, .screen:focus { outline: none; }
/* Views cross-fade over .6s as in the reference; the outgoing view stays visible while it
   fades (it is already inert), then hides. */
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; translate: 0 16px; visibility: hidden; transition: opacity .6s ease, translate .6s ease, visibility 0s linear .6s; }
.screen.is-active { opacity: 1; pointer-events: auto; translate: none; visibility: visible; transition: opacity .6s ease, translate .6s ease, visibility 0s; }
/* scrollbar-gutter keeps the same gutter on every scrolling screen, so moving between a
   view that scrolls and one that does not never shifts the layout sideways. */
.screen-inner { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 96px 124px; padding: 96px var(--gx) 124px; max-width: 2200px; margin: 0 auto; }
@supports not selector(::-webkit-scrollbar) { .screen-inner { scrollbar-width: thin; scrollbar-color: rgba(var(--ln), .16) transparent; } }
#home .screen-inner { scrollbar-gutter: auto; padding-bottom: 116px; }
.screen:not(#home) .screen-inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-bottom: 104px; }
.screen:not(#home) .screen-inner > * { flex-shrink: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.sec-head.is-split { justify-content: space-between; }
.px { font-family: var(--fontpx); font-size: 10px; color: var(--dim); text-shadow: var(--glow-sm); }
.sub { font-size: 11px; letter-spacing: var(--ls2); text-transform: uppercase; color: var(--dim); text-shadow: var(--glow-sm); }
/* each view is labelled with the small pixel marker, as in the reference */
.screen:not(#home) .sec-head h1 { font-family: var(--fontpx); font-weight: 400; font-size: 10px; letter-spacing: 0; line-height: 1.7; color: var(--dim); }
.screen:not(#home) .sub { max-width: none; line-height: 1.8; }

/* generic card */
.card { border: 1px solid rgba(var(--ln), .16); border-radius: 8px; padding: 11px 13px; background: linear-gradient(180deg, rgba(var(--accrgb), .06), rgba(var(--pnl), .9)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 14px 34px rgba(var(--shd), .55); }
.card-label { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .2em; color: var(--dim2); text-transform: uppercase; }
.card-num { margin-top: 7px; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.card-note { margin-top: 5px; font-size: 9.5px; color: var(--dim2); }
.tag { display: inline-block; font-size: 8.5px; letter-spacing: .14em; border: 1px solid rgba(var(--accrgb), .4); color: var(--acc); padding: 3px 6px; margin-top: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(11px, .8vw, 13px); letter-spacing: var(--ls3); text-transform: uppercase; font-weight: 700; border-radius: 4px; padding: 19px 32px; transition: translate .2s var(--ease), border-color .2s; }
.btn-acc { color: var(--onacc); background: var(--acc); box-shadow: 0 0 24px rgba(var(--accrgb), .22); }
.btn-acc:hover { translate: 0 -2px; color: var(--onacc); }
.btn-acc:active { translate: 0 0; }
.btn-ghost { color: var(--ink); border: 1px solid rgba(var(--ln), .26); background: rgba(var(--pnl), .35); }
.btn-ghost:hover { translate: 0 -2px; border-color: var(--acc); color: var(--acc); }
.btn-sm { padding: 14px 22px; letter-spacing: var(--ls1); text-transform: none; font-weight: 400; font-size: 12px; }

/* ---------- 6. home ---------- */
.home { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-content: center; align-items: center; gap: clamp(24px, 3vw, 56px); }
.hero { min-width: 0; container-type: inline-size; }
.h1 { font-weight: 400; font-size: clamp(26px, 8.4cqw, 96px); line-height: 1.08; letter-spacing: -.02em; text-shadow: var(--glow); text-wrap: pretty; }
.h1 > span { display: block; }
.h1 .br { color: var(--dim2); }
.w-amber { color: var(--amber); } .w-pink { color: var(--pink); } .w-teal { color: var(--teal); }
.caret { display: inline-block; width: .3em; height: .64em; margin-inline-start: .04em; background: var(--amber); vertical-align: -.02em; animation: blink 1.1s steps(1) infinite; }
.lede { margin-top: clamp(20px, 2.2vw, 32px); max-width: 46ch; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.8; color: var(--dim); text-shadow: var(--glow-sm); }
.chips { margin-top: clamp(18px, 1.8vw, 28px); display: flex; flex-wrap: wrap; gap: 7px; max-width: 56ch; }
.chip { font-size: clamp(9px, .62vw, 11px); letter-spacing: var(--ls2); text-transform: uppercase; border-radius: 999px; padding: 8px 13px; background: rgba(var(--pnl), .55); color: var(--ink2); border: 1px solid rgba(var(--ln), .18); }
.chip.is-amber { color: var(--amber); border-color: rgba(var(--amberrgb), .28); }
.chip.is-teal { color: var(--teal); border-color: rgba(var(--tealrgb), .28); }
.chip.is-pink { color: var(--pink); border-color: rgba(var(--pinkrgb), .28); }
.hero .btn { margin-top: clamp(24px, 2.6vw, 38px); }
/* The demonstration-data note labels the cards honestly. On wide screens it hangs below the
   call to action, out of the flow, so the hero centres on the same block as the reference's. */
.preview-note { margin-top: 22px; font-size: 9px; letter-spacing: var(--ls1); color: var(--dim2); }
@media (min-width: 901px) { .hero { position: relative; } .preview-note { position: absolute; } }

/* Card cluster: the absolute composition is the default (tall screens); a compact grid on
   wide but short screens; nothing on phones and short narrow screens, as in the reference. */
.cluster { position: relative; width: 100%; max-width: 640px; min-height: 520px; aspect-ratio: 560 / 620; justify-self: end; }
.cluster svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cluster .links-grid { display: none; }
.cluster .card { position: absolute; }
.card-win { left: 44.6%; top: 0; width: 55.4%; padding: 0; overflow: hidden; transform: rotate(-1.4deg); background: rgba(var(--pnl), .92); border-color: rgba(var(--ln), .18); box-shadow: 0 16px 40px rgba(var(--shd), .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.win-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid rgba(var(--ln), .12); }
.win-bar span { display: flex; gap: 4px; }
.win-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--ln), .26); display: block; }
.win-bar small { font-size: 9.5px; letter-spacing: .06em; color: var(--dim2); }
.win-body { height: 104px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: linear-gradient(165deg, rgba(var(--accrgb), .18), rgba(var(--pnl), .92) 74%), repeating-linear-gradient(180deg, rgba(var(--scr), .2) 0 1px, rgba(var(--scr), 0) 1px 3px); }
.win-title { font-family: var(--fontd); font-size: 17px; font-weight: 700; line-height: 1.1; }
.win-cta { align-self: flex-start; font-size: 9px; letter-spacing: .14em; border: 1px solid rgba(var(--ln), .4); padding: 5px 9px; }
.card-comp { left: 0; top: 26.5%; width: 27%; }
.card-auto { right: 0; top: 47%; width: 46%; }
.card-auto ul { list-style: none; margin-top: 8px; display: grid; gap: 6px; font-size: 10.5px; color: var(--ink2); }
.card-auto li::before { content: "✓"; color: var(--acc); margin-inline-end: 6px; }
.card-erp { left: 2.5%; top: 63.5%; width: 38%; }
.erp-row { margin-top: 7px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.erp-row .card-num { margin-top: 0; }
.erp-row .card-note { margin-top: 4px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.bars i { display: block; width: 3px; background: rgba(var(--accrgb), .55); }
.bars i:first-child { background: rgba(var(--accrgb), .45); }
.bars i:nth-child(4) { background: rgba(var(--accrgb), .7); }
.bars i:nth-child(n+5) { background: var(--acc); }
.card-ai { right: 1%; top: 84%; width: 41%; }
.card-ai .card-num { font-size: 22px; color: var(--teal); }
.card-ops { left: 8%; top: 88%; width: 26%; display: flex; flex-direction: column; align-items: center; gap: 9px; border: 0; background: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px; border: 1px solid rgba(var(--ln), .18); border-radius: 4px; background: rgba(var(--pnl), .88); box-shadow: 0 0 22px rgba(var(--amberrgb), .14); }
.ops-grid i { display: block; width: 6px; height: 6px; background: rgba(var(--ln), .14); }
.ops-grid i.a { background: var(--amber); } .ops-grid i.g { background: var(--acc); }
.ops-label { font-size: 8.5px; letter-spacing: .18em; color: var(--dim2); text-align: center; }
/* tall and wide: the composition is centred and spills into the padding instead of scrolling */
@media (min-width: 901px) and (min-height: 860px) { .home { height: 100%; min-height: 0; } }
/* wide but short: the reference's compact grid of four cards, which float gently */
@media (min-width: 901px) and (max-height: 859px) {
  .cluster { aspect-ratio: auto; min-height: 0; max-width: none; justify-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: clamp(12px, 1.2vw, 22px); padding: 8px 0; align-content: center; }
  .cluster .links-roomy { display: none; }
  .cluster .links-grid { display: block; z-index: -1; }
  .cluster .card { position: static; width: auto; transform: none; border-radius: 4px; padding: 10px 12px; background: linear-gradient(180deg, rgba(var(--accrgb), .07), rgba(var(--pnl), .9)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 12px 30px rgba(var(--shd), .6); animation: bob 9s ease-in-out infinite; }
  .cluster .card-win, .cluster .card-ops { display: none; }
  .cluster .card-auto { animation-duration: 11s; animation-delay: -2s; }
  .cluster .card-erp { animation-duration: 10s; animation-delay: -4s; }
  .cluster .card-ai { animation-duration: 12s; animation-delay: -6s; background: linear-gradient(180deg, rgba(var(--tealrgb), .07), rgba(var(--pnl), .9)); }
  .cluster .card-label { font-size: clamp(9px, .6vw, 11px); }
  .cluster .card-num { margin-top: 8px; font-size: clamp(20px, 1.7vw, 30px); line-height: normal; }
  .cluster .erp-row { margin-top: 6px; }
  .cluster .erp-row .card-num { margin-top: 0; line-height: 1; }
  .cluster .card-note { margin-top: 4px; }
  .cluster .card-auto ul { gap: 5px; }
  .cluster .tag { display: block; border: 0; padding: 0; margin-top: 6px; font-size: 9px; letter-spacing: .14em; }
  html[lang^="ar"] .cluster .tag { letter-spacing: 0; }
}
@media (min-width: 901px) and (max-height: 639px) { .card-auto { display: none; } }
@media (max-width: 900px) and (max-height: 859px), (max-width: 640px) { .cluster { display: none; } }
@media (max-height: 640px) { .chips { display: none; } }

/* ---------- 7. work ---------- */
.work { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 34px); align-items: start; }
#tabPanel { grid-column: span 2; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab { flex: none; display: flex; align-items: center; gap: 11px; min-height: 48px; text-align: start; background: rgba(var(--pnl), .5); border: 1px solid rgba(var(--ln), .16); border-radius: 4px; padding: 13px 14px; font-size: 11.5px; letter-spacing: .04em; color: var(--dim); }
.tab:hover { border-color: rgba(var(--accrgb), .45); }
.tab[aria-selected="true"] { color: var(--ink); border-color: rgba(var(--accrgb), .55); background: rgba(var(--accrgb), .08); }
.tab-glyph { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(var(--ln), .16); display: grid; place-items: center; font-size: 11px; }
.tab[aria-selected="true"] .tab-glyph { border-color: rgba(var(--accrgb), .55); }
.panel { border: 1px solid rgba(var(--ln), .14); border-radius: 6px; background: linear-gradient(180deg, rgba(var(--accrgb), .04), rgba(var(--pnl), .86)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: clamp(18px, 2.4vw, 30px); }
html:not([lang^="ar"]) #tabPanel { line-height: normal; }
#tabPanel:focus-visible { outline: 2px solid var(--acc); }
.badge { display: inline-block; font-size: 9.5px; letter-spacing: var(--ls3); color: var(--ink); border: 1px solid rgba(var(--ln), .26); border-radius: 999px; padding: 7px 13px; text-transform: uppercase; }
.panel h2 { margin-top: 16px; max-width: 34ch; font-family: var(--fontd); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.015em; line-height: 1.24; text-wrap: pretty; }
.panel > p { margin-top: 13px; max-width: 62ch; font-size: 12.5px; line-height: 1.75; color: var(--dim); }
.checks { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(var(--ln), .12); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 11px 32px; list-style: none; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink2); }
.checks li::before { content: "✓"; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(var(--ln), .3); display: grid; place-items: center; font-size: 9px; color: var(--acc); }
.examples { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.example { flex: 1 1 220px; display: block; min-width: 0; border: 1px solid rgba(var(--ln), .14); border-radius: 5px; padding: 12px; background: rgba(var(--pnl), .6); transition: border-color .25s; }
.example:hover { border-color: rgba(var(--accrgb), .45); color: inherit; }
.ex-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; letter-spacing: calc(var(--ls2) * 1.125); color: var(--dim2); }
.ex-tag b { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: pulse 2.4s ease-in-out infinite; }
.ex-name { margin-top: 10px; font-size: 13px; }
.ex-kind { margin-top: 5px; font-size: 11px; color: var(--dim2); }
/* the practice panel runs to the foot of the screen, as in the reference, and scrolls
   inside itself when its content is longer; short windows scroll the whole view instead */
@media (min-width: 800px) { .screen[data-view="work"] .work { flex: 1 0 auto; align-items: stretch; } }
@media (min-width: 800px) and (min-height: 641px) {
  .screen#work .screen-inner { padding-bottom: 88px; }
  .screen[data-view="work"] .work { flex: 1 0 0; min-height: 0; }
  #tabPanel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 799px) {
  .work { grid-template-columns: 1fr; }
  #tabPanel { grid-column: auto; }
  /* a sideways strip of tabs; the padding keeps their focus ring inside the scroll box */
  .tabs { flex-direction: row; overflow-x: auto; padding: 5px 5px 6px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ---------- 8. services ---------- */
.services-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.services-inner .sec-head { width: 100%; max-width: 1680px; margin-inline: auto; }
.screen#services .sec-head h1, .screen#services .sec-head .sub { line-height: normal; }
.map-wrap { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* the reference sizes the map to 88% of the height left under the header, up to 820px */
.map { position: relative; width: min(820px, 100%, calc((100dvh - 192px) * .88)); min-width: 0; aspect-ratio: 1; margin: 0 auto; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map .ring { transform-origin: 50px 50px; animation: spin 120s linear infinite; }
.map .spokes path { stroke: rgba(var(--ln), .22); stroke-width: .3; fill: none; transition: stroke .3s; }
.map .spokes path.is-hot { stroke: rgba(var(--accrgb), .7); }
.map .dots circle { fill: rgba(var(--ln), .45); transition: fill .3s; }
.map .dots circle.is-hot { fill: var(--acc); }
.node { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.node-core { font-family: var(--fontpx); font-size: clamp(9px, .95vw, 14px); line-height: 1; color: var(--ink); border: 1px solid rgba(var(--ln), .5); border-radius: 999px; padding: 14px 20px; background: var(--pnlS); box-shadow: 0 0 30px rgba(var(--accrgb), .16); }
.node-spoke { font-size: clamp(11px, .85vw, 14px); line-height: normal; color: var(--ink); border: 1px solid rgba(var(--ln), .32); border-radius: 999px; padding: 10px 16px; background: rgba(var(--pnl), .96); cursor: pointer; transition: border-color .3s, box-shadow .3s, color .3s; }
.node-spoke::before { content: ""; position: absolute; inset: -4px 0; }   /* keeps a 44px target around the drawn pill */
.node-spoke:hover, .node-spoke.is-hot, .node-spoke:focus-visible { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 24px rgba(var(--accrgb), .25); }
.node-leaf { font-size: clamp(10.5px, .72vw, 13px); line-height: normal; color: var(--dim); text-align: center; transition: color .3s; }
.node-leaf.is-hot { color: var(--ink); }
/* The description of the practice under the pointer or keyboard focus. It is not in the
   reference, so it takes no space and only shows while it is relevant; screen readers hear
   it through the live region. */
.map-desc { position: absolute; inset-inline: 0; bottom: 0; margin: 0 auto; text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--dim); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); text-shadow: var(--glow-sm); }
.map-wrap:has(.node-spoke:hover, .node-spoke:focus-visible) .map-desc { opacity: 1; }
.map-desc b { margin-inline-end: .5ch; font-weight: 400; color: var(--ink); }
.map-desc b::after { content: " —"; color: var(--dim2); }
/* the fourteen practice tags drift either side of the map */
.float-tags { position: absolute; inset: 0; pointer-events: none; }
.float-tag { position: absolute; font-size: 10.5px; line-height: normal; letter-spacing: var(--ls1); color: var(--dim); border: 1px solid rgba(var(--ln), .16); border-radius: 999px; padding: 9px 15px; background: rgba(var(--pnl), .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); white-space: nowrap; animation: bob var(--dur, 8s) var(--del, 0s) ease-in-out infinite; }
.float-tag.is-ink { color: var(--ink); border-color: rgba(var(--ln), .26); }
.float-tag.is-teal { color: var(--teal); border-color: rgba(var(--tealrgb), .24); }
.float-tag.is-amber { color: var(--amber); border-color: rgba(var(--amberrgb), .26); }
.float-tag.is-pink { color: var(--pink); border-color: rgba(var(--pinkrgb), .26); }
/* too small for the map: the centre pill and a grid of practice chips */
.spoke-list { display: none; }
.spoke-core { font: 10px/1 var(--fontpx); color: var(--ink); border: 1px solid rgba(var(--ln), .5); border-radius: 999px; padding: 12px 18px; background: var(--pnlS); }
.spoke-chips { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.spoke-chip { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 11px; line-height: normal; color: var(--ink); border: 1px solid rgba(var(--ln), .3); border-radius: 999px; padding: 12px 14px; text-align: center; background: rgba(var(--pnl), .9); }
.spoke-chip:hover { border-color: rgba(var(--accrgb), .45); }
/* html raises these above the shared phone padding further down */
@media (min-width: 580px) { html .screen#services .screen-inner { padding-top: 92px; padding-bottom: 84px; gap: 0; } }
@media (max-width: 579px) { html .screen#services .screen-inner { padding-top: 92px; gap: 0; } }
@media (max-width: 899px), (max-height: 669px) { .map .node-leaf { display: none; } }
@media (max-width: 899px), (max-height: 539px) { .float-tags { display: none; } }
@media (max-width: 579px), (max-height: 539px) {
  .map-wrap { flex: none; justify-content: flex-start; }
  .map, .map-desc { display: none; }
  .spoke-list { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
}
/* ---------- 9. blog ---------- */
/* Posts are cards with their sharing image, summary, reading time and tags; the columns
   sit on near-solid panels so the moon and the city never run through the text. */
.blog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(20px, 3vw, 52px); }
@media (min-width: 1000px) { .blog { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.blog-posts, .blog-scripts { padding: clamp(16px, 2vw, 24px); border: 1px solid rgba(var(--ln), .1); border-radius: 14px; background: rgba(var(--pnl), .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.post-card { display: grid; margin-top: 14px; overflow: hidden; border: 1px solid rgba(var(--ln), .14); border-radius: 12px; background: var(--pnlS); color: inherit; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.post-card:hover, .post-card:focus-visible { border-color: rgba(var(--accrgb), .55); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(var(--shd), .7), 0 0 0 1px rgba(var(--accrgb), .12); color: inherit; }
.post-cover { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; border-bottom: 1px solid rgba(var(--ln), .1); }
.post-body { padding: 16px 18px 18px; }
/* wide enough: a thumbnail beside the text, so one post never fills the screen */
@media (min-width: 720px) {
  .post-card { grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); align-items: center; }
  .post-cover { margin: 14px; margin-inline-end: 0; width: calc(100% - 14px); border: 1px solid rgba(var(--ln), .1); border-radius: 8px; }
  .post-body { padding: 14px 18px; }
  .post-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.post-card .post-title { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; line-height: 1.3; }
.post-card:hover .post-title, .post-card:focus-visible .post-title { color: var(--acc); }
.post-desc { margin-top: 10px; font-family: var(--fontd); font-size: 14px; line-height: 1.65; color: var(--ink2); }
.post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 10.5px; letter-spacing: var(--ls1); color: var(--dim); }
.post-time { color: var(--amber); }
.post-tag { padding: 3px 9px; border: 1px solid rgba(var(--ln), .16); border-radius: 999px; }
.post-go { margin-inline-start: auto; color: var(--acc); font-weight: 700; }
.soon-head { margin-top: 26px; font-size: 10.5px; font-weight: 400; letter-spacing: var(--ls2); text-transform: uppercase; color: var(--dim2); }
.soon-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.soon-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1px dashed rgba(var(--ln), .18); border-radius: 10px; font-family: var(--fontd); font-size: 14.5px; color: var(--ink2); }
.soon-badge { font-family: var(--font); font-size: 9.5px; letter-spacing: var(--ls1); text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--amber); border: 1px solid rgba(var(--amberrgb), .35); }
.gh-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; padding: 0 16px; border: 1px solid rgba(var(--accrgb), .4); border-radius: 999px; font-size: 11px; letter-spacing: var(--ls1); text-transform: uppercase; color: var(--acc); }
.gh-link:hover { background: rgba(var(--accrgb), .1); }
/* older posts: a small thumbnail, the title and one line of facts; no summary, no tags */
.post-card.is-compact { grid-template-columns: 112px minmax(0, 1fr); align-items: center; margin-top: 10px; }
.post-card.is-compact .post-cover { margin: 10px; margin-inline-end: 0; width: calc(100% - 10px); border: 1px solid rgba(var(--ln), .1); border-radius: 6px; }
.post-card.is-compact .post-body { padding: 10px 14px; }
.post-card.is-compact .post-title { margin-top: 4px; font-size: 15px; }
.post-card.is-compact .post-desc, .post-card.is-compact .post-tag, .post-card.is-compact .post-go { display: none; }
.post-card.is-compact .post-foot { margin-top: 6px; }
.post-card.is-compact:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .post-card, .post-card:hover { transition: none; transform: none; } }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 10.5px; font-weight: 400; letter-spacing: var(--ls2); text-transform: uppercase; color: var(--dim2); text-shadow: var(--glow-sm); }
.list-head a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; color: var(--acc); }
.post { display: block; margin-top: 14px; padding: 15px 0; border-top: 1px solid rgba(var(--ln), .12); transition: border-color .25s; }
.post + .post { margin-top: 0; }
.post:last-child { border-bottom: 1px solid rgba(var(--ln), .12); }
a.post:hover, a.post:focus-visible { border-color: rgba(var(--accrgb), .4); color: inherit; }
.post-meta { font-size: 9.5px; letter-spacing: var(--ls2); color: var(--dim2); text-shadow: var(--glow-sm); }
.post-title { margin-top: 8px; font-family: var(--fontd); font-size: 15px; font-weight: 500; line-height: 1.35; text-shadow: var(--glow-sm); }
a.post:hover .post-title, a.post:focus-visible .post-title, a.post:hover .script-name, a.post:focus-visible .script-name { color: var(--acc); }
.script { display: flex; gap: 13px; align-items: flex-start; }
.script-kind { flex: none; font-size: 8.5px; letter-spacing: var(--ls2); color: var(--amber); border: 1px solid rgba(var(--amberrgb), .28); border-radius: 3px; padding: 5px 7px; }
.script-kind.is-sh { color: var(--teal); border-color: rgba(var(--tealrgb), .28); }
.script-body { display: block; min-width: 0; }
.script-name { display: block; font-size: 12.5px; line-height: 1.5; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; text-shadow: var(--glow-sm); }
.script-desc { display: block; margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--dim); text-shadow: var(--glow-sm); }

/* ---------- 10. studio ---------- */
.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(22px, 3vw, 56px); }
.studio h2 { font-family: var(--fontd); font-size: clamp(21px, 2.5vw, 34px); font-weight: 700; letter-spacing: -.015em; line-height: 1.24; max-width: 24ch; text-wrap: pretty; text-shadow: var(--glow-sm); }
.studio p { margin-top: 14px; max-width: 54ch; font-size: 12.5px; line-height: 1.85; color: var(--dim); text-shadow: var(--glow-sm); }
.studio h2 + p { margin-top: 18px; }
.stats { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; }
.stats:empty { display: none; }
.stat b { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 400; line-height: 1; }
.stat:nth-child(1) b { color: var(--amber); } .stat:nth-child(2) b { color: var(--teal); } .stat:nth-child(3) b { color: var(--pink); }
.stat span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: var(--ls2); text-transform: uppercase; color: var(--dim2); }
.facts { align-self: start; }
/* The facts run across the moon at some sizes (in both directions), so each line carries a
   wider halo than the rest of the page. */
.fact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(var(--ln), .12); font-size: 11px; line-height: normal; letter-spacing: var(--ls1); text-transform: uppercase; text-shadow: 0 0 6px rgba(var(--scr), .95), 0 1px 3px rgba(var(--scr), .95); }
.fact:last-child { border-bottom: 1px solid rgba(var(--ln), .12); }
.fact span:first-child { color: var(--dim2); }
.fact.is-acc span:last-child { color: var(--acc); }
/* the process steps are the site's own addition: ruled rows on the scene, like the facts */
.process { margin-top: 34px; }
.steps { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.step { border-top: 1px solid rgba(var(--ln), .12); padding: 12px 0; }
.step i { font-style: normal; font-size: 9px; letter-spacing: var(--ls2); color: var(--acc); text-shadow: var(--glow-sm); }
.step b { display: block; margin-top: 8px; font-family: var(--fontd); font-size: 14px; font-weight: 700; text-shadow: var(--glow-sm); }
.step p { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--dim); }

/* ---------- 11. contact ---------- */
.contact { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-content: center; align-items: start; gap: 36px; padding: 12px 0; }
.contact :is(h1, h2) { margin-top: clamp(20px, 2.6vw, 34px); font-size: clamp(26px, 4.2vw, 56px); font-weight: 400; line-height: 1.14; text-shadow: var(--glow); }
.contact :is(h1, h2) span { color: var(--acc); }
.contact p { margin-top: 20px; max-width: 52ch; font-size: 13px; line-height: 1.85; color: var(--dim); text-shadow: var(--glow-sm); }
/* the reference's two buttons: the address filled, the call outlined */
.contact-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.contact-ctas .btn { padding: 16px 26px; }
.contact-ctas .btn-acc { font-weight: 700; box-shadow: none; }
.contact-ctas .btn-ghost { padding: 16px 24px; background: none; border-color: rgba(var(--ln), .24); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact-ctas .btn-ghost:hover { border-color: var(--acc); }
/* the form is the site's addition: a surface only where something is typed */
.form { display: grid; gap: 16px; padding: 28px; border: 1px solid rgba(var(--ln), .14); border-radius: 8px; background: rgba(var(--pnl), .97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.form-header { padding-bottom: 18px; border-bottom: 1px solid rgba(var(--ln), .18); }
.form-header h2 { margin: 0; font: 700 21px/1.6 var(--fontd); text-shadow: none; }
.contact .form p { margin: 0; font-size: 12px; line-height: 1.85; text-shadow: none; }
.contact .form-header p { margin-top: 8px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 11px; letter-spacing: var(--ls2); text-transform: uppercase; color: var(--dim2); }
.field input, .field textarea { width: 100%; min-height: 48px; background: rgba(var(--pnl), .6); border: 1px solid rgba(var(--ln), .18); border-radius: 8px; padding: 12px 13px; font-size: 13px; color: var(--ink); transition: border-color .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--acc); }
.field textarea { min-height: 140px; line-height: 1.8; resize: vertical; }
.field textarea::placeholder { color: var(--dim2); opacity: 1; }
.field input[type="email"] { font-family: var(--font); }
.field [aria-invalid="true"] { border-color: var(--red); }
/* name and email share a row on a wide column and stack as soon as it narrows */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.field-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.field-error { color: var(--red); font-size: 13px; }
.message-count { justify-self: end; margin-inline-start: auto; white-space: nowrap; font-size: 11px; color: var(--dim2); }
.request-reply { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid rgba(var(--ln), .16); border-radius: 8px; background: rgba(var(--pnl), .5); font-size: 13px; line-height: 1.8; cursor: pointer; }
.request-reply input { flex: none; width: 22px; height: 22px; margin-top: 4px; accent-color: var(--acc); }
.privacy-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--ink2); text-decoration: underline; text-underline-offset: 4px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 8px; font-size: 11px; color: var(--dim2); }
.form-foot a { color: var(--acc); }
.form-foot > span { overflow-wrap: anywhere; }
.form-foot button { min-height: 48px; font-weight: 700; }
.form-help { font-size: 12px; line-height: 1.7; color: var(--dim); }
.form-note { min-height: 1.4em; padding-top: 12px; border-top: 1px solid rgba(var(--ln), .16); font-size: 12px; line-height: 1.8; color: var(--dim2); }
/* two columns: the copy is centred in the screen's height like the reference, the form
   sits at the trailing edge */
@media (min-width: 901px) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(min(380px, 100%), 1fr); }
  .contact > div:first-child { max-width: 820px; align-self: start; min-height: calc(100dvh - 270px); display: flex; flex-direction: column; justify-content: center; }
  .contact .form { width: 100%; max-width: 560px; justify-self: end; align-self: center; }
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- 12. bottom bar ---------- */
/* the reference's single fade along the foot of the screen */
.hud-fade { position: fixed; inset-inline: 0; bottom: 0; height: 150px; z-index: 9; pointer-events: none; background: linear-gradient(0deg, rgba(var(--scr), .92) 0%, rgba(var(--scr), .68) 45%, rgba(var(--scr), 0) 100%); }
/* One bar for the whole site: identity on the lead side, the site-information links in the
   middle, live scene status on the trailing side. It replaces the reference's two corner
   blocks so the links exist once. The bar ignores the pointer; only its links take clicks. */
.statusbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 2px clamp(14px, 2.4vw, 34px);
  padding: 4px var(--gx) max(6px, env(safe-area-inset-bottom));
  pointer-events: none;
  font-size: 9px; letter-spacing: var(--ls3); text-transform: uppercase;
  color: var(--dim); text-shadow: var(--glow-sm);
}
/* edgeless: content scrolls underneath, so the bar keeps a ground that fades out upward */
.statusbar::before { content: ""; position: absolute; inset: -34px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(var(--scr), .94) 0%, rgba(var(--scr), .86) 52%, rgba(var(--scr), 0) 100%); }
.statusbar a { pointer-events: auto; }
.bar-id, .bar-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar-status { justify-content: flex-end; }
.bar-mark { flex: none; font-size: clamp(14px, 1.2vw, 17px); line-height: 1; letter-spacing: .02em; text-transform: none; color: var(--teal); }
.bar-sep { flex: none; width: 1px; height: 11px; background: rgba(var(--ln), .22); }
.bar-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-live { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bar-live b { color: var(--acc); font-weight: 400; }
.hud-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: pulse 2.6s ease-in-out infinite; }
.policy-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 clamp(12px, 1.6vw, 18px); min-width: 0; }
.policy-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 9px; letter-spacing: var(--ls3); text-transform: uppercase; color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.policy-footer a:hover, .policy-footer a:focus-visible { color: var(--acc); border-color: currentColor; }
/* wide screens: identity and status become the reference's two-line corner stacks */
@media (min-width: 901px) {
  .statusbar { align-items: end; padding: 4px var(--gx) max(26px, env(safe-area-inset-bottom)); }
  .statusbar::before { top: auto; height: 88px; }
  .bar-id, .bar-status { flex-direction: column; gap: 8px; }
  .bar-id { align-items: flex-start; }
  .bar-status { align-items: flex-end; }
  .bar-sep { display: none; }
  .bar-mark { font-size: clamp(18px, 2vw, 26px); text-shadow: 0 2px 14px rgba(var(--scr), .9); }
  .policy-footer { align-self: end; margin-bottom: -15px; }
  /* blog and contact scroll long text: the fade sits over it as in the reference, with
     room at the end so every line can scroll fully clear */
  html:is([data-view="blog"], [data-view="contact"]) .hud-fade { z-index: 29; }
  html:is([data-view="blog"], [data-view="contact"]) .statusbar::before { display: none; }
  .screen#blog .screen-inner, .screen#contact .screen-inner { padding-bottom: 150px; scroll-padding-bottom: 150px; }
}
/* a tall home does not scroll, so the bar needs no ground of its own there */
@media (min-width: 1101px) and (min-height: 861px) { html[data-view="home"] .statusbar::before { display: none; } }
/* tablets: identity and status on one row, the links on a row of their own beneath */
@media (min-width: 641px) and (max-width: 900px) {
  .statusbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .policy-footer { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1000px) { .bar-hint, .bar-status .bar-sep { display: none; } }
/* phones: the scene label stays (it is the honest label), above the links */
@media (max-width: 640px) {
  .statusbar { grid-template-columns: 1fr; justify-items: center; padding: 4px 12px max(6px, env(safe-area-inset-bottom)); }
  .bar-status { display: none; }
  .bar-id { justify-content: center; }
  .bar-id .bar-mark, .bar-id .bar-sep { display: none; }
  .bar-id .bar-note { line-height: 1.4; }
  .policy-footer { gap: 0 14px; }
}
/* the parallax hint is meaningless without a pointer */
@media (hover: none) { .bar-hint { display: none; } }

/* ---------- 13. responsive ---------- */
@media (max-width: 900px) {
  .screen-inner { padding-top: 104px; }
  .home { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .nav { width: calc(100% - 28px); justify-content: space-between; padding: 6px; padding-inline: 14px 6px; gap: 10px; }
  .nav-links, .btn-contact { display: none; }
  .nav-tools { gap: 5px; }
  .nav-tools > .pill { padding: 8px 10px; font-size: 10px; }
  .burger { display: block; }
  .brand { font-size: 9px; }
}
@media (max-width: 640px) {
  .screen-inner { padding-bottom: 118px; }
  .screen:not(#home) .screen-inner { padding: 96px 18px 118px; gap: 20px; }
  .form { padding: 20px; }
  .form-foot { align-items: stretch; }
  .form-foot button { width: 100%; justify-content: center; }
  .steps { grid-template-columns: 1fr; }
  .contact-ctas .btn { width: 100%; justify-content: center; }
  .menu-link { padding: 10px 0; }
}
@media (max-width: 360px) {
  .nav { padding-inline: 10px 5px; gap: 6px; }
  .brand { font-size: 8px; }
  .nav-tools { gap: 2px; }
  .nav-tools > .pill { padding-inline: 5px; }
}
/* Reduced motion and the pause button: everything still arrives at its final state; there
   is simply no travel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-px] { transform: none !important; }
}
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation: none !important; transition: none !important; }
html[data-motion="paused"] [data-px] { transform: none !important; }
@media (forced-colors: active) {
  .card, .panel, .form, .nav, .tab { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .scrim, .vignette, .scan, #city { display: none; }
}

/* ---------- 14. Arabic ---------- */
html[lang^="ar"] body { line-height: 1.75; }
html[lang^="ar"] .px, html[lang^="ar"] .screen:not(#home) .sec-head h1 { font-family: var(--fontd); font-weight: 700; font-size: 12.5px; }
html[lang^="ar"] .sub { font-size: 12.5px; }
html[lang^="ar"] .nav-link, html[lang^="ar"] .btn-contact { letter-spacing: 0; }
html[lang^="ar"] .pill { font-size: 11.5px; }
@media (min-width: 861px) {
  html[lang^="ar"] .pill { font-size: 12px; }
  html[lang^="ar"] .brand { font-size: 11px; }
  html[lang^="ar"] .nav, html[lang^="ar"] .nav-links, html[lang^="ar"] .nav-tools { column-gap: 18px; }
  html[lang^="ar"] .nav { padding-block: 8px; padding-inline: 18px 8px; }
}
/* The reference's sizes, with taller leading: in Plex Arabic the marks above and below a
   line collide at the Latin line heights. */
html[lang^="ar"] .h1 { font-family: var(--font); font-weight: 400; font-size: clamp(26px, 8.4cqw, 96px); line-height: 1.5; letter-spacing: 0; }
html[lang^="ar"] .lede { font-size: clamp(13px, 1.15vw, 17px); line-height: 1.8; }
html[lang^="ar"] .chip { font-size: clamp(11px, .72vw, 12.5px); padding: 7px 13px; }
html[lang^="ar"] .btn { font-size: clamp(13px, .9vw, 15px); }
html[lang^="ar"] .preview-note { font-size: 11px; }
html[lang^="ar"] .card-label { font-size: 10.5px; }
html[lang^="ar"] .card-label, html[lang^="ar"] .tag, html[lang^="ar"] .win-cta, html[lang^="ar"] .ops-label { letter-spacing: 0; }
html[lang^="ar"] .tab { font-size: 13px; letter-spacing: 0; }
html[lang^="ar"] .panel h2, html[lang^="ar"] .studio h2 { line-height: 1.6; }
html[lang^="ar"] .panel > p, html[lang^="ar"] .studio p, html[lang^="ar"] .contact p { font-size: 14px; line-height: 2; }
html[lang^="ar"] .checks li { font-size: 13px; }
html[lang^="ar"] .node-spoke { font-size: clamp(12px, .9vw, 15px); }
html[lang^="ar"] .node-leaf { font-size: clamp(11.5px, .78vw, 13.5px); }
html[lang^="ar"] .map-desc { font-size: 14px; }
html[lang^="ar"] .list-head { font-size: 12px; }
html[lang^="ar"] .post-meta { font-size: 11px; }
html[lang^="ar"] .post-title { line-height: 1.6; }
html[lang^="ar"] .script-desc { font-size: 12px; line-height: 1.85; }
html[lang^="ar"] .fact { font-size: 12px; line-height: 1.75; }
html[lang^="ar"] .step p { font-size: 12.5px; line-height: 1.9; }
html[lang^="ar"] .contact :is(h1, h2) { line-height: 1.5; }
html[lang^="ar"] .contact .form p { font-size: 14px; }
html[lang^="ar"] .field label { font-size: 12px; }
html[lang^="ar"] .statusbar { font-size: 10.5px; }
html[lang^="ar"] .policy-footer a { font-size: 11.5px; text-transform: none; }
html[lang^="ar"] .menu-link { font-weight: 500; }