@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(/assets/fonts/BarlowCondensed-SemiBold.94c961c025.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(/assets/fonts/BarlowCondensed-Bold.e638f2e49a.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:300;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Light.58b86d77c9.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:400;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Regular.f2c98dae87.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-Medium.295f58c23a.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Medium.46c12d2dec.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd0d.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.90aef64fea.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.16734a5adb.woff2) format('woff2')}
@charset "utf-8";
/* ════════════════════════════════════════════════════════════════════════
   ARKANA v3
   Built on Arkana Design System tokens.css v1.0.2.

   CANON AMENDMENT, WEBSITE ONLY, 23 Sep 2026, founder-approved.
   The base canon allows one accent, no gradients on brand elements, no
   shadows and no blur. That produces a disciplined page and a flat one. The
   following amendments apply to arkanaagency.com ONLY and do not extend to
   the consoles, the credentials deck or any brand application:

     A1  Signal cyan may carry a luminance ramp (--signal-lo/-hi) for depth on
         data, edges and connective lines. It remains ONE hue. No second accent.
     A2  Scrim and plate gradients are permitted as legibility instruments.
         Gradients are still forbidden on the lockup, the mark and the dot field.
     A3  Translucent material with backdrop blur is permitted on chrome only,
         which is the nav and the sheet. Content surfaces stay opaque.
     A4  Full-bleed video beats are permitted between sections, unscrimmed,
         PROVIDED no text sits over them. (Revised 23 Sep: the earlier limit of
         one per page was set before the credentials library was available. The
         constraint that matters is the no-text-over-it rule, not the count.
         Legibility is never traded for a beat.)
     A5  Website copy after the locked hero lead is written in the register of
         the credentials deck and of apple.com: short declaratives, concrete
         nouns, claims rather than wordplay. This supersedes PRODUCT_VOICE.md
         for the website only. The hero lead stays verbatim from
         ARKANA_Brand on a Page.docx.

   Radius stays 0. Crimson stays alert-only. Cyan stays the only hue.
   ════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --ground:#0D0F12; --surface:#1A1D22; --surface-2:#14171B;
  --line:#2A2F36; --line-strong:#636D7A;
  --text:#FFFFFF; --text-2:#B4BAC3; --text-3:#8A9098;
  --signal:#00F0FF; --signal-ink:#00F0FF; --signal-wash:#0A2A2E; --on-signal:#0D0F12;
  --signal-lo:#00778A; --signal-hi:#9BFBFF;          /* A1 */
  --alert:#FF003C; --alert-ink:#FF3D6B; --on-alert:#0D0F12;
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-text:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-ar:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --margin-outer:6.5%; --radius:0px; --hairline:1px; --focus:2px;
  --dur-instant:17ms; --dur-flash:33ms; --dur-fast:120ms; --dur-base:200ms;
  --dur-slow:320ms; --dur-heartbeat:625ms; --dur-sweep:400ms; --dur-contract:400ms;
  --ease-out:cubic-bezier(.33,1,.68,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-snap:cubic-bezier(.76,0,.24,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-settle:cubic-bezier(.2,0,0,1);
  --media-filter:none;
  --nav-h:76px;          /* the tall state */
  --nav-stuck:56px;      /* the condensed state, which is what a jump lands under */
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#E8ECF0;
    --line:#C8CFD6; --line-strong:#5D646F;
    --text:#0D0F12; --text-2:#4B5563; --text-3:#5D646F;
    --signal-ink:#006B73; --signal-wash:#D6FBFF;
    --signal-lo:#00454A; --signal-hi:#00A8B8;
    --alert-ink:#C2002E;
    --media-filter:invert(1) grayscale(.55) brightness(1.06) contrast(.72);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#E8ECF0;
  --line:#C8CFD6; --line-strong:#5D646F;
  --text:#0D0F12; --text-2:#4B5563; --text-3:#5D646F;
  --signal-ink:#006B73; --signal-wash:#D6FBFF;
  --signal-lo:#00454A; --signal-hi:#00A8B8;
  --alert-ink:#C2002E;
  --media-filter:invert(1) grayscale(.55) brightness(1.06) contrast(.72);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-stuck) + 20px);
  -webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);
  font:400 20px/1.55 var(--font-text);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overscroll-behavior-y:none}
body,.panel,.nav,.strip,.chip,.alloc{transition:background-color var(--dur-slow) var(--ease-in-out),
  color var(--dur-slow) var(--ease-in-out),border-color var(--dur-slow) var(--ease-in-out)}
img,svg,video{display:block;max-width:100%}
a{color:var(--signal-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:var(--focus) solid var(--signal-ink);outline-offset:3px}
*{border-radius:var(--radius)}
.shell{max-width:1440px;margin-inline:auto;padding-inline:var(--margin-outer)}
.skip{position:absolute;top:0;inset-inline-start:var(--space-4);
  background:var(--signal);color:var(--on-signal);
  padding:12px 18px;font:500 14px/1 var(--font-mono);letter-spacing:.2em;
  text-transform:uppercase;z-index:400;
  transform:translateY(-140%);transition:transform var(--dur-fast) var(--ease-out)}
.skip:focus{transform:translateY(var(--space-4))}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── TYPE ───────────────────────────────────────────────────────────────── */
.t-display{font:700 clamp(42px,8.4vw,132px)/.88 var(--font-display);letter-spacing:-.018em;
  text-transform:uppercase;margin:0}
.t-h1{font:600 clamp(32px,5.6vw,60px)/1.0 var(--font-display);letter-spacing:-.01em;
  text-transform:uppercase;margin:0}
.t-h2{font:600 clamp(25px,4vw,42px)/1.05 var(--font-display);letter-spacing:-.004em;
  text-transform:uppercase;margin:0}
.t-h3{font:500 clamp(19px,2.1vw,27px)/1.25 var(--font-text);letter-spacing:-.002em;margin:0}
.t-lead{font:300 clamp(19px,2.1vw,25px)/1.45 var(--font-text);margin:0;color:var(--text-2)}
.t-body{font:400 clamp(16px,1.6vw,20px)/1.6 var(--font-text);margin:0;color:var(--text-2)}
.t-sm{font:400 16px/1.55 var(--font-text);margin:0;color:var(--text-3)}
.t-label{font:500 13px/1 var(--font-mono);letter-spacing:.3em;text-transform:uppercase}
.measure{max-width:62ch}
.w{display:inline-block;overflow:hidden;vertical-align:top}
.c{display:inline-block;will-change:transform}

/* ── K2 CITATIONS ─────────────────────────────────────────────────────────
   A superscript that jumps to a numbered source, instead of repeating the
   same publisher's name under every figure on the page.                    */
.cit{font:500 .52em/1 var(--font-mono);vertical-align:super;margin-inline-start:.22em;
  letter-spacing:0}
/* WCAG 2.2 gives inline targets an exception from the 24px minimum, but the
   padding costs nothing and a one-digit link is genuinely hard to hit. The
   negative margin keeps the line box exactly where it was. */
.cit a{color:var(--signal-ink);display:inline-block;line-height:1;
  padding:9px 11px;margin:-9px -7px}
.cit a:hover{text-decoration:none;color:var(--signal-hi)}
:root[data-theme="light"] .cit a:hover,
:root:not([data-theme="dark"]) .cit a:hover{color:var(--signal-lo)}
.srcs{counter-reset:s;list-style:none;padding:0;margin:var(--space-6) 0 0;
  display:flex;flex-direction:column;gap:var(--space-4);max-inline-size:86ch}
.srcs li{counter-increment:s;display:flex;gap:var(--space-4);
  color:var(--text-2);font:400 15px/1.55 var(--font-text);
  padding-block-end:var(--space-4);border-block-end:var(--hairline) solid var(--line)}
.srcs li:last-child{border-block-end:0;padding-block-end:0}
.srcs li::before{content:counter(s);flex:0 0 2.4ch;color:var(--signal-ink);
  font:500 13px/1.7 var(--font-mono);letter-spacing:.08em}
.srcs a{color:var(--text-3);border-block-end:1px dotted var(--line-strong);
  display:inline-flex;align-items:center;min-block-size:24px}
.srcs a:hover{color:var(--signal-ink);text-decoration:none}
.srcs em{font-style:normal;color:var(--text-3)}

/* ── MEDIA FRAME. Behind a section, scrimmed, text may sit over it. ─────── */
.mediaframe{position:absolute;inset-block:0;left:50%;right:auto;inline-size:100vw;
  margin-left:-50vw;overflow:hidden;z-index:-2;pointer-events:none;contain:paint;
  --scrim:var(--scrim-d,.72);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 90%,transparent 100%)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .mediaframe{--scrim:var(--scrim-l,.86);--scrim-min:44%}}
:root[data-theme="light"] .mediaframe{--scrim:var(--scrim-l,.86);--scrim-min:44%}
.mediaframe__reel{position:absolute;left:0;right:0;top:-9%;block-size:118%}
.mediaframe img,.mediaframe video{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;filter:var(--media-filter)}
.mediaframe video{opacity:0;transition:opacity 700ms var(--ease-out)}
.mediaframe[data-playing] video{opacity:1}
.mediaframe[data-playing] img{opacity:0;transition:opacity 700ms var(--ease-out)}
.mediaframe__scrim{position:absolute;inset:0;opacity:var(--scrim);
  background:linear-gradient(97deg,var(--ground) 0%,var(--ground) 46%,
    color-mix(in srgb,var(--ground) 72%,transparent) 68%,
    color-mix(in srgb,var(--ground) 30%,transparent) 88%,
    color-mix(in srgb,var(--ground) var(--scrim-min,16%),transparent) 100%)}
[dir="rtl"] .mediaframe__scrim{transform:scaleX(-1)}
@media (min-width:900px) and (max-width:1399px){
  .mediaframe__scrim{background:linear-gradient(97deg,var(--ground) 0%,var(--ground) 68%,
    color-mix(in srgb,var(--ground) 76%,transparent) 84%,
    color-mix(in srgb,var(--ground) 44%,transparent) 95%,
    color-mix(in srgb,var(--ground) var(--scrim-min,26%),transparent) 100%)}
}
@media (max-width:899px){
  .mediaframe__scrim{background:var(--ground);opacity:max(var(--scrim),.82)}
}
.mediaframe__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,transparent 0 3px,
    color-mix(in srgb,var(--signal) 6%,transparent) 3px 4px)}
:root[data-theme="light"] .mediaframe__grain,
:root:not([data-theme="dark"]) .mediaframe__grain{mix-blend-mode:multiply;opacity:.3}


/* Real client footage is NEVER put through --media-filter. That filter exists
   to make the abstract brand-kit textures behind the hero sit down in light
   mode; run over the work, it inverts a client's logo colours, which is the
   one thing a credentials page must not do. Only .mediaframe inverts. */
/* ── M1 BAND. Full-bleed horizontal beat between sections, amendment A4.
   These live OUTSIDE .shell, so the element is simply 100% of the document
   width. 100vw would be the scrollbar wider than that and would push a real
   horizontal overflow behind body{overflow-x:hidden}.                      */
.band{position:relative;inline-size:100%;overflow:hidden;
  block-size:clamp(260px,52vh,540px);margin-block:clamp(40px,7vh,96px);
  background:var(--surface-2);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%)}
.band__reel{position:absolute;left:0;right:0;top:-11%;block-size:122%;will-change:transform}
.band img,.band video{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover}
.band video{opacity:0;transition:opacity 700ms var(--ease-out)}
.band[data-playing] video{opacity:1}
.band[data-playing] img{opacity:0;transition:opacity 700ms var(--ease-out)}
.band__edge{position:absolute;inset-inline:0;bottom:0;block-size:1px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.45}
.band__tag{position:absolute;inset-inline-end:clamp(14px,3vw,30px);bottom:clamp(14px,3vw,26px);
  max-inline-size:min(46ch,72vw);margin:0;
  font:500 11px/1.5 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);background:var(--ground);padding:9px 13px}
[dir="rtl"] .band__tag{letter-spacing:0;font-family:var(--font-ar);text-transform:none}

/* ── NAV. A1: pinned, condenses, material thickens, active link underlined.
   It does NOT hide on downward scroll. That was a deliberate call in the
   first build and it was the wrong one for a site this short.              */
.nav{position:fixed;top:0;inset-inline:0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) clamp(14px,3vw,28px);min-block-size:var(--nav-h);
  max-inline-size:100%;
  transition:min-block-size var(--dur-slow) var(--ease-settle),
             padding-block var(--dur-slow) var(--ease-settle)}
.nav[data-stuck]{min-block-size:56px;padding-block:9px}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--ground) var(--nav-mat,58%),transparent);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,#000 70%,transparent);
  transition:background-color var(--dur-base) var(--ease-out)}
.nav[data-stuck]::after{--nav-mat:93%;backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  -webkit-mask-image:none;mask-image:none;
  border-block-end:var(--hairline) solid var(--line)}
@media (prefers-reduced-transparency:reduce){
  .nav::after{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ground);
    mask-image:none;-webkit-mask-image:none}
  .nav[data-stuck]::after{background:var(--ground)}
}
/* B1: the lockup contracts to the mark. Both are in the DOM and Flip
   interpolates the real geometry between them. The wrappers need a box or
   block-size:100% has nothing to resolve against and the SVG renders at its
   intrinsic ~10,000px width for one frame. */
.brand{position:relative;display:flex;align-items:center;color:var(--text);
  block-size:30px;flex:0 0 auto;max-inline-size:52vw;
  transition:block-size var(--dur-slow) var(--ease-settle)}
.nav[data-stuck] .brand{block-size:24px}
.brand__lock,.brand__mark{display:flex;align-items:center;block-size:100%;max-inline-size:100%}
.brand__mark{display:none}
.brand svg{display:block;block-size:100%;inline-size:auto;max-inline-size:100%}
.nav[data-compact] .brand__lock{display:none}
.nav[data-compact] .brand__mark{display:block}
.nav__links{display:none;gap:clamp(14px,2.2vw,32px);align-items:center}
@media (min-width:960px){.nav__links{display:flex}}
.navlink{color:var(--text-2);font:500 12px/1 var(--font-mono);letter-spacing:.24em;
  text-transform:uppercase;position:relative;display:inline-flex;align-items:center;
  min-block-size:32px;padding-block:7px;white-space:nowrap}
.navlink::after{content:"";position:absolute;inset-inline:0;bottom:0;block-size:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-base) var(--ease-out)}
.navlink:hover,.navlink[aria-current]{color:var(--text);text-decoration:none}
.navlink:hover::after,.navlink[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__end{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.tgl{appearance:none;background:transparent;border:var(--hairline) solid var(--line-strong);
  color:var(--text-2);font:500 11px/1 var(--font-mono);letter-spacing:.2em;
  text-transform:uppercase;padding:0 12px;min-block-size:40px;min-inline-size:44px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tgl:hover{color:var(--signal-ink);border-color:var(--signal-ink)}
@media (max-width:479px){.tgl{padding:0 9px;min-inline-size:44px}
  .nav__end>.langlink{display:none}}
.langlink{font:500 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-2);
  border:var(--hairline) solid var(--line-strong);padding:0 12px;min-block-size:40px;
  display:inline-flex;align-items:center}
.langlink:hover{color:var(--signal-ink);border-color:var(--signal-ink);text-decoration:none}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  inline-size:44px;min-block-size:44px;padding:0 10px;background:transparent;
  border:var(--hairline) solid var(--line-strong);cursor:pointer}
@media (min-width:960px){.burger{display:none}}
.burger i{display:block;block-size:2px;background:var(--text);
  transition:transform var(--dur-base) var(--ease-snap),opacity var(--dur-fast) linear}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + 24px) clamp(20px,6vw,40px) max(28px,env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 96%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  visibility:hidden;opacity:0;transition:opacity var(--dur-base) var(--ease-out),
  visibility 0s linear var(--dur-base)}
.sheet[data-open]{visibility:visible;opacity:1;transition-delay:0s}
@media (min-width:960px){.sheet{display:none}}
.sheet a{color:var(--text);font:600 clamp(28px,8vw,44px)/1.1 var(--font-display);
  text-transform:uppercase;letter-spacing:-.004em;padding-block:var(--space-4);
  border-block-end:var(--hairline) solid var(--line);display:flex;
  align-items:center;justify-content:space-between;min-block-size:56px}
.sheet a:hover{text-decoration:none;color:var(--signal-ink)}
.sheet a span{font:500 12px/1 var(--font-mono);letter-spacing:.2em;color:var(--text-3)}
.sheet__foot{margin-block-start:auto;padding-block-start:var(--space-6);
  display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ── RETICLE ────────────────────────────────────────────────────────────── */
#reticle{position:fixed;top:0;left:0;z-index:75;pointer-events:none;opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);will-change:transform}
#reticle[data-on]{opacity:.9}
#reticle span{position:absolute;inline-size:12px;block-size:12px;border:2px solid var(--signal)}
#reticle span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
#reticle span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
#reticle span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
#reticle span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ── CHAPTERS ───────────────────────────────────────────────────────────── */
/* overflow-x:clip, not hidden: clip does not make main a scroll container, so
   position:sticky inside it still resolves against the viewport. */
main{position:relative;z-index:10;overflow-x:clip}
.chapter{position:relative;padding-block:clamp(60px,9vh,112px);isolation:isolate}
.chapter--tight{padding-block:clamp(40px,6vh,76px)}

/* D1 SECTION HEAD. An oversized cyan numeral leads; the label and the
   heading sit beside it. No plate, no bracket, no ghost numeral behind.
   The numeral is decorative, so it carries aria-hidden and the heading
   below it is the only thing in the accessibility tree.                    */
.chead{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,2.6vw,38px);
  align-items:start;margin-block-end:var(--space-7)}
.chead__n{grid-row:1/3;font:700 clamp(58px,10.5vw,152px)/.76 var(--font-display);
  color:var(--signal-ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  user-select:none;display:block;will-change:transform}
.chead__label{display:block;color:var(--text-3);font:500 12px/1 var(--font-mono);
  letter-spacing:.3em;text-transform:uppercase;padding-block-start:.34em}
.chead__h{display:block;margin-block-start:var(--space-4)}
@media (max-width:639px){
  .chead{grid-template-columns:1fr;row-gap:var(--space-2)}
  .chead__n{grid-row:auto;line-height:.82}
  .chead__label{padding-block-start:0}
  .chead__h{margin-block-start:var(--space-2)}
}
[dir="rtl"] .chead__label{letter-spacing:0;font-family:var(--font-ar)}
[dir="rtl"] .chead__n{font-family:var(--font-mono);direction:ltr;unicode-bidi:embed}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{min-block-size:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(128px,18vh,200px) clamp(72px,10vh,120px)}
.hero .t-display{max-inline-size:13ch}
/* E3: the company line sits under the headline as a credit, not as an
   eyebrow above it. A rule, then the line, at caption weight. */
/* --text-3 read at 4.2:1 over the hero clip at 1024, where the scrim is at its
   lightest. This line sits over moving footage, so it takes the body colour. */
.credit{display:flex;align-items:center;gap:var(--space-4);margin-block-start:var(--space-5);
  color:var(--text-2);font:500 12px/1.4 var(--font-mono);letter-spacing:.26em;
  text-transform:uppercase}
.credit::before{content:"";inline-size:clamp(28px,5vw,64px);block-size:1px;
  background:var(--signal-ink);flex:0 0 auto;transform:scaleX(0);transform-origin:left}
.credit.is-in::before{transform:scaleX(1);transition:transform 520ms var(--ease-expo) 120ms}
[dir="rtl"] .credit{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
[dir="rtl"] .credit::before{transform-origin:right}
.hero__lead{margin-block-start:var(--space-6);max-inline-size:52ch}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-block-start:var(--space-8)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-3);padding:0 28px;min-block-size:52px;
  font:500 13px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;
  border:var(--hairline) solid transparent;cursor:pointer;overflow:hidden;
  will-change:transform;touch-action:manipulation}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--signal);color:var(--on-signal)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--signal-ink);color:var(--signal-ink)}
.btn__fill{position:absolute;inset:0;background:var(--text);transform:scaleX(0);
  transform-origin:var(--from,left);z-index:0}
.btn--primary .btn__fill{transition:transform var(--dur-fast) var(--ease-out)}
.btn--primary:hover .btn__fill{transform:scaleX(1);transition:transform var(--dur-base) var(--ease-expo)}
.btn--primary:hover{color:var(--ground)}
.btn>span,.btn>.arw{position:relative;z-index:1}
.btn .arw{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arw{transform:translateX(5px)}
[dir="rtl"] .btn .arw{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arw{transform:scaleX(-1) translateX(5px)}
[dir="rtl"] .btn{letter-spacing:0;font-family:var(--font-ar)}

/* ── N2 STAT WALL. One dominant figure, three subordinate. Four numerals at
   display size on one screen was three too many.                          */
.statwall{margin-block-start:var(--space-8);border-block-start:var(--hairline) solid var(--line)}
.statlead{display:grid;gap:var(--space-4);padding-block:clamp(28px,4.5vh,52px);
  align-items:end}
@media (min-width:860px){.statlead{grid-template-columns:auto 1fr;
  column-gap:clamp(24px,4vw,60px)}}
.statlead__v{font:700 clamp(74px,14vw,190px)/.8 var(--font-display);color:var(--text);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;display:block}
.statlead__l{margin:0;color:var(--text-2);font:300 clamp(18px,2vw,26px)/1.4 var(--font-text);
  max-inline-size:26ch;padding-block-end:.5em}
.statrest{display:grid;gap:var(--hairline);background:var(--line);
  border-block:var(--hairline) solid var(--line)}
@media (min-width:640px){.statrest{grid-template-columns:repeat(3,1fr)}}
.statmini{background:var(--ground);padding:var(--space-5) var(--space-5) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);position:relative}
.statmini::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;inline-size:2px;
  background:linear-gradient(180deg,var(--signal-hi),var(--signal),var(--signal-lo));
  transform:scaleY(0);transform-origin:top}
.statmini.is-in::before{transform:scaleY(1);transition:transform 520ms var(--ease-expo) 80ms}
.statmini b{font:700 clamp(34px,4.4vw,52px)/1 var(--font-display);color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.statmini span{color:var(--text-3);font:400 15px/1.5 var(--font-text)}
[dir="rtl"] .statlead__v,[dir="rtl"] .statmini b{font-family:var(--font-mono);
  direction:ltr;unicode-bidi:embed;letter-spacing:0}

/* ── J1 MARKET. One figure leads. The country split sits under it as chips.
   One footnote, not a source line under every row.                        */
.mkt__lead{display:grid;gap:var(--space-5);align-items:end;
  padding-block-end:clamp(28px,4vh,48px);
  border-block-end:var(--hairline) solid var(--line)}
@media (min-width:860px){.mkt__lead{grid-template-columns:auto 1fr;
  column-gap:clamp(24px,4vw,60px)}}
.mkt__v{font:700 clamp(74px,14vw,190px)/.8 var(--font-display);color:var(--text);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;display:block}
.mkt__t{margin:0;color:var(--text-2);font:300 clamp(18px,2vw,26px)/1.4 var(--font-text);
  max-inline-size:30ch;padding-block-end:.4em}
.chips{list-style:none;padding:0;margin:0;display:grid;gap:var(--hairline);
  background:var(--line);border-block-end:var(--hairline) solid var(--line)}
@media (min-width:600px){.chips{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.chips{grid-template-columns:repeat(4,1fr)}}
.chip{background:var(--ground);padding:var(--space-5);display:flex;flex-direction:column;
  gap:var(--space-2)}
.chip b{font:700 clamp(30px,3.6vw,44px)/1 var(--font-display);color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.chip span{color:var(--text-2);font:400 15px/1.45 var(--font-text)}
.chip em{font-style:normal;color:var(--text-3);font:500 10px/1 var(--font-mono);
  letter-spacing:.18em;text-transform:uppercase;border:var(--hairline) solid var(--line-strong);
  padding:5px 7px;align-self:flex-start;margin-block-start:var(--space-1)}
.chip[data-kind="extrapolated"]{background:color-mix(in srgb,var(--signal) 7%,var(--ground))}
.chip[data-kind="extrapolated"] b{color:var(--signal-ink)}
.chip[data-kind="extrapolated"] em{border-color:var(--signal-ink);color:var(--signal-ink)}
[dir="rtl"] .chip b,[dir="rtl"] .mkt__v{font-family:var(--font-mono);direction:ltr;
  unicode-bidi:embed;letter-spacing:0}
[dir="rtl"] .chip em{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.mkt__foot{margin-block-start:var(--space-5);color:var(--text-3);
  font:400 15px/1.6 var(--font-text);max-inline-size:76ch}
.mkt__foot a{color:var(--text-3);border-block-end:1px dotted var(--line-strong)}
.mkt__foot a:hover{color:var(--signal-ink);text-decoration:none}

/* ── G1 FILMSTRIP + H1 TAKEOVER ───────────────────────────────────────────
   Four wide cards, one per service, each carrying real credentials footage.
   At rest the clip is a narrow vertical frame on the trailing edge, like a
   strip of film. On hover or focus the frame opens across the whole card
   and the caption arrives. clip-path inset is used rather than a transform
   so nothing in the footage is stretched on the way.                       */
.film{display:flex;flex-direction:column;gap:var(--hairline);background:var(--line);
  border-block:var(--hairline) solid var(--line)}
.strip{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--space-7);overflow:hidden;color:inherit;
  background:var(--ground);min-block-size:clamp(230px,34vh,340px);
  padding:clamp(22px,3vw,44px);isolation:isolate}
.strip__head{display:block}
.strip__foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-5);flex-wrap:wrap}
.strip:hover{text-decoration:none}
.strip__media{position:absolute;inset:0;z-index:-2;
  clip-path:inset(0 0 0 var(--rest,68%));
  transition:clip-path 620ms var(--ease-expo)}
[dir="rtl"] .strip__media{clip-path:inset(0 var(--rest,68%) 0 0)}

.strip__media img,.strip__media video{position:absolute;inset:0;inline-size:100%;
  block-size:100%;object-fit:cover}
.strip__media video{opacity:0;transition:opacity 600ms var(--ease-out)}
.strip[data-playing] .strip__media video{opacity:1}
.strip[data-playing] .strip__media img{opacity:0;transition:opacity 600ms var(--ease-out)}
/* Two layers. The horizontal one keeps the heading legible across the open
   card; the vertical one gives the caption row a floor. Measured, not guessed:
   the caption and the Open link were reading at 1.2:1 over bare footage with
   the card open, which is the state the whole component exists for. */
.strip__scrim{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 34%,
    color-mix(in srgb,var(--ground) 76%,transparent) 62%,
    color-mix(in srgb,var(--ground) 46%,transparent) 100%);
  transition:opacity 480ms var(--ease-out)}
/* Always on, not only on hover. At rest the clip still occupies the trailing
   third of the card and the Open link sits in it; on a bright frame that read
   as cyan on red. A lower-third floor costs nothing and covers both states. */
.strip__veil{position:absolute;inset-inline:0;bottom:0;z-index:-1;block-size:176px;
  pointer-events:none;
  background:linear-gradient(to top,var(--ground) 0,var(--ground) 88px,
    color-mix(in srgb,var(--ground) 74%,transparent) 130px,transparent 176px)}
[dir="rtl"] .strip__scrim{transform:scaleX(-1)}
.strip:hover .strip__media,.strip:focus-visible .strip__media,
.strip[data-open] .strip__media{clip-path:inset(0)}
.strip:hover .strip__scrim,.strip:focus-visible .strip__scrim,
.strip[data-open] .strip__scrim{opacity:1}
.strip__row{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.strip__idx{color:var(--signal-ink);font:500 12px/1 var(--font-mono);letter-spacing:.28em}
.strip__lt{color:var(--text-3);font:500 11px/1 var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;border:var(--hairline) solid var(--line-strong);padding:7px 10px}
[dir="rtl"] .strip__lt,[dir="rtl"] .strip__idx{letter-spacing:0;font-family:var(--font-ar)}
.strip__name{display:block;margin-block-start:var(--space-5);color:var(--text);
  font:600 clamp(28px,4.4vw,52px)/1 var(--font-display);text-transform:uppercase;
  letter-spacing:-.008em}
[dir="rtl"] .strip__name{font-family:var(--font-ar);text-transform:none;letter-spacing:0;
  line-height:1.24}
.strip__claim{display:block;margin-block-start:var(--space-3);color:var(--text-2);
  font:300 clamp(17px,1.8vw,22px)/1.4 var(--font-text);max-inline-size:34ch}
.strip__cap{display:block;max-inline-size:46ch;
  color:var(--text-2);font:500 11px/1.5 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
[dir="rtl"] .strip__cap{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.strip:hover .strip__cap,.strip:focus-visible .strip__cap,
.strip[data-open] .strip__cap{opacity:1;transform:translateY(0)}
.strip__go{color:var(--signal-ink);flex:0 0 auto;
  font:500 11px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:var(--space-2)}
[dir="rtl"] .strip__go{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.strip__go i{display:block;inline-size:20px;block-size:1px;background:var(--signal-ink);
  transition:inline-size var(--dur-base) var(--ease-out)}
.strip:hover .strip__go i,.strip:focus-visible .strip__go i{inline-size:34px}
/* On a phone the clip is a real 16:9 block at the top of the card rather than
   a wash behind the words. A 20% wash fails contrast in light mode and shows
   the work badly in both. */
@media (max-width:759px){
  .strip{min-block-size:0;gap:0;padding:0}
  .strip__media{position:relative;inset:auto;z-index:0;opacity:1;
    clip-path:none!important;aspect-ratio:16/9;inline-size:100%}
  .strip__scrim,.strip__veil{display:none}
  .strip__head{padding:var(--space-5) var(--space-5) 0}
  .strip__foot{padding:var(--space-4) var(--space-5) var(--space-5);
    flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .strip__cap{opacity:1;transform:none;max-inline-size:none}
  .strip__name{margin-block-start:var(--space-4)}
}

/* ── ALLOCATION CONSOLE ─────────────────────────────────────────────────── */
.doors{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-block-end:var(--space-7)}
.door{appearance:none;background:transparent;cursor:pointer;
  border:var(--hairline) solid var(--line-strong);color:var(--text-2);
  font:500 12px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  padding:0 20px;min-block-size:52px;display:inline-flex;align-items:center;gap:var(--space-3)}
[dir="rtl"] .door{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.door[aria-selected="true"]{border-color:var(--signal-ink);color:var(--text);
  background:color-mix(in srgb,var(--signal) 10%,transparent)}
.door::before{content:"";inline-size:8px;block-size:8px;border:1px solid currentColor;flex:0 0 auto}
.door[aria-selected="true"]::before{background:var(--signal);border-color:var(--signal)}
.door:hover{color:var(--text);border-color:var(--signal-ink)}

.alloc{margin-block-start:var(--space-7);border:var(--hairline) solid var(--line);
  background:var(--surface-2);padding:clamp(20px,3vw,36px)}
.alloc__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-4);flex-wrap:wrap;margin-block-end:var(--space-5)}
.alloc__rows{display:flex;flex-direction:column;gap:var(--space-4)}
.arow{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
@media (min-width:720px){.arow{grid-template-columns:19ch 1fr 6ch;align-items:center;gap:var(--space-4)}}
.arow__name{font:500 12px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2)}
[dir="rtl"] .arow__name{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.arow__track{position:relative;block-size:40px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--line) 60%,transparent);cursor:ew-resize;touch-action:none}
.arow__fill{position:absolute;inset-block:0;inset-inline-start:0;
  background:linear-gradient(90deg,var(--signal-lo),var(--signal));
  inline-size:var(--pct,0%)}
[dir="rtl"] .arow__fill{background:linear-gradient(270deg,var(--signal-lo),var(--signal))}
.arow__grip{position:absolute;inset-block:0;inset-inline-start:var(--pct,0%);
  inline-size:4px;background:var(--text);transform:translateX(-2px);pointer-events:none}
[dir="rtl"] .arow__grip{transform:translateX(2px)}
.arow__track:focus-visible{outline:var(--focus) solid var(--signal-ink);outline-offset:3px}
.arow__val{font:500 13px/1 var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums;
  text-align:end}
.arow[data-dim] .arow__name,.arow[data-dim] .arow__val{color:var(--text-3)}
.alloc__out{margin-block-start:var(--space-6);padding-block-start:var(--space-5);
  border-block-start:var(--hairline) solid var(--line);
  display:flex;gap:var(--space-5);align-items:flex-start;flex-wrap:wrap}
.meter{flex:0 0 auto;inline-size:min(240px,100%)}
.meter__bar{block-size:8px;background:color-mix(in srgb,var(--line) 70%,transparent);
  position:relative;overflow:hidden}
.meter__bar i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--v,0%);
  background:linear-gradient(90deg,var(--signal-lo),var(--signal),var(--signal-hi));
  transition:inline-size var(--dur-slow) var(--ease-out)}
.meter__label{display:flex;justify-content:space-between;margin-block-start:var(--space-2);
  font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.alloc__verdict{flex:1 1 32ch;color:var(--text-2);font:400 16px/1.55 var(--font-text);margin:0}
.alloc__note{margin-block-start:var(--space-4);color:var(--text-3);
  font:400 14px/1.5 var(--font-text)}
.whylist{margin-block-start:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);
  padding:0;list-style:none}
.whylist li{display:flex;gap:var(--space-3);color:var(--text-2);font:400 17px/1.5 var(--font-text)}
.whylist li::before{content:"";inline-size:7px;block-size:7px;background:var(--signal);
  flex:0 0 auto;margin-block-start:.55em}

/* ── I2 SERVICE PAGE. The media and the facts stay put; the argument
   scrolls past them. One screen of reading, no second scroll to find the
   proof.                                                                   */
.svc2{display:grid;gap:var(--space-8);margin-block-start:var(--space-7)}
@media (min-width:980px){.svc2{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  column-gap:clamp(40px,5vw,84px);align-items:start}}
.svc2__stick{position:static}
@media (min-width:980px){
  .svc2__stick{position:sticky;top:calc(56px + var(--space-6));align-self:start}
}
.svc2__fig{position:relative;margin:0;aspect-ratio:var(--ar,16/9);overflow:hidden;
  background:var(--surface-2);border:var(--hairline) solid var(--line)}
.svc2__fig img,.svc2__fig video{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover}
.svc2__fig video{opacity:0;transition:opacity 600ms var(--ease-out)}
.svc2__fig[data-playing] video{opacity:1}
.svc2__fig[data-playing] img{opacity:0;transition:opacity 600ms var(--ease-out)}

/* A phone-recorded vertical format gets a portrait figure, capped by height so
   it cannot run off the screen. Cropping a 9:20 clip into a 16:9 box throws
   away the thing the format IS. */
.svc2__fig[data-portrait]{max-inline-size:min(100%,calc(66vh * var(--arn,.45)));
  margin-inline:auto}
.svc2__cap{margin:var(--space-3) 0 0;color:var(--text-3);font:500 11px/1.5 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase}
[dir="rtl"] 
/* A phone-recorded vertical format gets a portrait figure, capped by height so
   it cannot run off the screen. Cropping a 9:20 clip into a 16:9 box throws
   away the thing the format IS. */
.svc2__fig[data-portrait]{max-inline-size:min(100%,calc(66vh * var(--arn,.45)));
  margin-inline:auto}
.svc2__cap{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.facts{margin:var(--space-6) 0 0;display:grid;gap:var(--hairline);background:var(--line);
  border:var(--hairline) solid var(--line)}
@media (min-width:480px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts>div{background:var(--ground);padding:var(--space-4) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-2)}
.facts dt{color:var(--text-3);font:500 10px/1 var(--font-mono);letter-spacing:.22em;
  text-transform:uppercase}
[dir="rtl"] .facts dt{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.facts dd{margin:0;color:var(--text);font:400 16px/1.4 var(--font-text)}
/* .flow p is more specific than .claim on its own, so the claim would render
   at body size. Both selectors, one rule. */
.flow .claim,.claim{font:600 clamp(26px,3.4vw,42px)/1.08 var(--font-display);
  text-transform:uppercase;letter-spacing:-.008em;color:var(--text);
  max-inline-size:22ch;margin:0}
[dir="rtl"] .flow .claim,[dir="rtl"] .claim{font-family:var(--font-ar);text-transform:none;
  letter-spacing:0;line-height:1.3}
.flow p{margin:var(--space-6) 0 0;color:var(--text-2);
  font:400 clamp(17px,1.7vw,20px)/1.62 var(--font-text);max-inline-size:56ch}
.fitlist{list-style:none;padding:0;margin:var(--space-6) 0 0;display:flex;
  flex-direction:column;gap:var(--space-3)}
.fitlist li{display:flex;gap:var(--space-4);color:var(--text-2);
  font:400 17px/1.5 var(--font-text);padding-block-end:var(--space-3);
  border-block-end:var(--hairline) solid var(--line)}
.fitlist li:last-child{border-block-end:0;padding-block-end:0}
.fitlist li::before{content:"";inline-size:7px;block-size:7px;background:var(--signal);
  flex:0 0 auto;margin-block-start:.6em}
.pairs{display:grid;gap:var(--hairline);background:var(--line);
  border:var(--hairline) solid var(--line);margin-block-start:var(--space-7)}
/* three items in a two-column grid leaves a visible empty cell, so the track
   count follows the item count instead of being fixed at two. */
@media (min-width:700px){.pairs{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.pair{background:var(--ground);padding:var(--space-5);display:flex;flex-direction:column;
  gap:var(--space-2);color:inherit}
.pair:hover{text-decoration:none;background:var(--surface-2)}
.pair strong{font:600 22px/1.15 var(--font-display);text-transform:uppercase;color:var(--text)}
[dir="rtl"] .pair strong{font-family:var(--font-ar);text-transform:none}
.pair span{color:var(--text-3);font:400 15px/1.45 var(--font-text)}

/* ── FORM ───────────────────────────────────────────────────────────────── */
.panel{border:var(--hairline) solid var(--line);background:var(--surface-2);
  padding:clamp(24px,3.6vw,46px)}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-block-start:var(--space-5)}
.field label{color:var(--text-3);font:500 12px/1 var(--font-mono);letter-spacing:.22em;
  text-transform:uppercase}
[dir="rtl"] .field label{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.field input,.field textarea{background:var(--ground);
  border:var(--hairline) solid var(--line-strong);color:var(--text);
  font:400 17px/1.4 var(--font-text);padding:14px 16px;inline-size:100%;min-block-size:52px;
  transition:border-color var(--dur-fast) var(--ease-out)}
.field textarea{min-block-size:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--signal-ink)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--alert-ink)}
.err{color:var(--alert-ink);font:400 14px/1.4 var(--font-text);min-block-size:1.4em}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;margin-block-start:var(--space-5)}
.consent input{inline-size:24px;block-size:24px;margin-block-start:1px;accent-color:var(--signal);
  flex:0 0 auto}
.consent label{color:var(--text-3);font:400 14px/1.5 var(--font-text)}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.note{margin-block-start:var(--space-5);padding:var(--space-4);
  border:var(--hairline) dashed var(--line-strong);color:var(--text-3);
  font:400 14px/1.5 var(--font-text)}
.note[data-ok]{border-color:var(--signal-ink);border-style:solid;color:var(--text-2)}

/* ── CONTACT: FORM AND CALL SIDE BY SIDE ─────────────────────────────────
   Tops aligned rather than stretched. The call block is short and stretching
   it to the form's height would leave a tall empty box beside a full one. It
   takes the .panel treatment so the two read as a pair rather than as a
   filled box next to an outlined one. */
.contact2{display:grid;gap:var(--space-6);margin-block-start:var(--space-8)}
@media (min-width:1024px){
  .contact2{grid-template-columns:1.15fr 1fr;column-gap:clamp(24px,3vw,48px);
    align-items:start}
}

/* ── CALL BLOCK + MISSING FLAG ──────────────────────────────────────────── */
.callblock{display:flex;flex-direction:column;gap:var(--space-4)}
.callrow{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.callblock a{display:inline-flex;align-items:center;min-block-size:24px}
/* With the phone number still missing, this is the only live route on the
   page, so it does not sit at caption weight. */
.calldirect{margin:0;color:var(--text-2);font:400 17px/1.55 var(--font-text)}
.calldirect a{border-block-end:1px solid color-mix(in srgb,var(--signal-ink) 45%,transparent);
  padding-block-end:1px}
.calldirect a:hover{text-decoration:none;border-block-end-color:var(--signal-ink)}
/* A build-time gap, shown rather than hidden. Crimson is alert-only per canon
   and a missing production value on a live page is exactly an alert. */
.missing{display:inline-flex;align-items:center;gap:var(--space-2);
  border:2px solid var(--alert);color:var(--alert-ink);background:transparent;
  font:500 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;min-block-size:44px}
.missing::before{content:"";inline-size:9px;block-size:9px;background:var(--alert);flex:0 0 auto;
  animation:mblink 1.6s steps(1,end) infinite}
@keyframes mblink{0%,50%{opacity:1}51%,100%{opacity:.25}}
.missing__why{color:var(--alert-ink);font:400 14px/1.5 var(--font-text);
  margin:var(--space-3) 0 0;max-inline-size:56ch}
@media (prefers-reduced-motion:reduce){.missing::before{animation:none}}


/* the registered address, privacy notice only */
.regaddr{display:block;font-style:normal;margin-block-start:var(--space-4);
  padding:var(--space-4) var(--space-5);border-inline-start:2px solid var(--signal-ink);
  background:var(--surface-2);color:var(--text);
  font:400 clamp(16px,1.6vw,19px)/1.6 var(--font-text);max-inline-size:52ch}

/* ── CONTACT DIALOG ───────────────────────────────────────────────────────
   Opened from any page that does not carry the contact section itself. A
   native <dialog> in the top layer, so focus trapping, Escape and the
   backdrop are the platform's job. Amendment A3 covers the blur: a modal is
   chrome, not a content surface.                                           */
.cdlg{border:0;padding:0;background:transparent;color:var(--text);
  inline-size:min(680px,92vw);max-block-size:88svh;margin:auto}
.cdlg::backdrop{background:rgba(3,5,8,.68);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px)}
body[data-dialog]{overflow:hidden}
.cdlg__inner{background:var(--surface-2);border:var(--hairline) solid var(--line-strong);
  padding:clamp(22px,3.6vw,44px);max-block-size:88svh;overflow-y:auto;
  overscroll-behavior:contain}
.cdlg__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-block-end:var(--space-5)}
[dir="rtl"] .cdlg__top .t-label{letter-spacing:0;font-family:var(--font-ar)}
.cdlg__x{appearance:none;background:transparent;cursor:pointer;flex:0 0 auto;
  border:var(--hairline) solid var(--line-strong);color:var(--text-2);
  inline-size:44px;block-size:44px;display:inline-flex;align-items:center;
  justify-content:center}
.cdlg__x svg{inline-size:15px;block-size:15px;fill:none}
.cdlg__x:hover{color:var(--signal-ink);border-color:var(--signal-ink)}
.cdlg__lead{margin-block-start:var(--space-4);max-inline-size:52ch}
.cdlg__call{margin-block-start:var(--space-7);padding-block-start:var(--space-5);
  border-block-start:var(--hairline) solid var(--line);
  display:flex;flex-direction:column;gap:var(--space-4)}
.cdlg .note{margin-block-start:var(--space-5)}
@media (prefers-reduced-motion:no-preference){
  .cdlg[open]{animation:cdlgIn 260ms var(--ease-expo)}
  .cdlg[open]::backdrop{animation:cdlgBd 260ms var(--ease-out)}
}
@keyframes cdlgIn{from{opacity:0;transform:translateY(12px) scale(.975)}
  to{opacity:1;transform:none}}
@keyframes cdlgBd{from{opacity:0}to{opacity:1}}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faqlist{margin-block-start:var(--space-7);border-block-start:var(--hairline) solid var(--line)}
.faq{border-block-end:var(--hairline) solid var(--line)}
.faq__q{inline-size:100%;appearance:none;background:transparent;border:0;cursor:pointer;
  text-align:start;color:var(--text);padding:var(--space-5) 0;display:flex;
  gap:var(--space-4);align-items:flex-start;justify-content:space-between;
  font:500 clamp(18px,2vw,23px)/1.35 var(--font-text);min-block-size:56px}
.faq__q:hover{color:var(--signal-ink)}
.faq__ico{flex:0 0 auto;inline-size:18px;block-size:18px;position:relative;margin-block-start:.3em}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--signal);
  transition:transform var(--dur-base) var(--ease-snap)}
.faq__ico::before{inset-inline:0;top:8px;block-size:2px}
.faq__ico::after{inset-block:0;left:8px;inline-size:2px}
.faq__q[aria-expanded="true"] .faq__ico::after{transform:scaleY(0)}
.faq__a{overflow:hidden}
.faq__a[hidden]{display:none}
.faq__a p{color:var(--text-2);font:400 17px/1.6 var(--font-text);margin:0 0 var(--space-5);
  max-inline-size:72ch}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.prefoot{border-block-start:var(--hairline) solid var(--line);
  padding-block:clamp(48px,7vh,80px);display:grid;gap:var(--space-7)}
@media (min-width:760px){.prefoot{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.prefoot{grid-template-columns:repeat(4,1fr)}}
.prefoot section{display:flex;flex-direction:column;gap:var(--space-3)}
.prefoot h2{color:var(--text-3);font:500 11px/1 var(--font-mono);letter-spacing:.28em;
  text-transform:uppercase;margin:0 0 var(--space-2)}
[dir="rtl"] .prefoot h2{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
/* min-inline-size, because the language switch reads "EN" on the Arabic
   pages and measured 21px wide, under the 24px target floor. */
.prefoot a{color:var(--text-2);font:400 15px/1.5 var(--font-text);display:inline-flex;
  align-items:center;min-block-size:26px;min-inline-size:24px;
  align-self:flex-start;padding-block:2px}
.prefoot a:hover{color:var(--signal-ink)}
.prefoot p{color:var(--text-2);font:400 15px/1.5 var(--font-text);margin:0}

/* C2: the SYS readout and the coordinates used to float in a fixed bar over
   the top of the page, crowding the corner. They belong at the end, where a
   colophon belongs. */
.readout{border-block-start:var(--hairline) solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) 0;font:500 11px/1.6 var(--font-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-3)}
.readout span{display:inline-flex;align-items:center;gap:8px}
.readout b{color:var(--text-2);font-weight:500}
.readout .sep{color:var(--signal-ink)}
#clock{font-variant-numeric:tabular-nums}
[dir="rtl"] .readout{direction:ltr}
.sitefoot{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 24px calc(38px + env(safe-area-inset-bottom));
  border-block-start:var(--hairline) solid var(--line);inline-size:100%}
.sitefoot .wm{color:var(--text)}
.sitefoot .wm svg{block-size:40px;inline-size:auto}
.sitefoot .pos{font:500 13px/1.5 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-3);text-align:center}
[dir="rtl"] .sitefoot .pos{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.sitefoot .line{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  font:500 12px/1 var(--font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)}
[dir="rtl"] .sitefoot .line{letter-spacing:0;font-family:var(--font-ar);text-transform:none}
.sitefoot .heart{inline-size:14px;block-size:14px;fill:#FF2D55}
.sitefoot .flag{inline-size:24px;block-size:16px}

@keyframes hb{0%,44%,100%{transform:scale(1);fill:currentColor}
  7%{transform:scale(1.32);fill:var(--signal)}
  18%{transform:scale(1);fill:currentColor}
  28%{transform:scale(1.16);fill:var(--signal)}}
@keyframes hbeat{0%,44%,100%{transform:scale(1)}7%{transform:scale(1.22)}
  18%{transform:scale(1)}28%{transform:scale(1.1)}}
.hb{animation:hb var(--dur-heartbeat) infinite linear;transform-box:fill-box;
  transform-origin:center}
.sitefoot .heart{animation:hbeat var(--dur-heartbeat) infinite linear;transform-box:fill-box;
  transform-origin:center}

/* ── SPLASH ─────────────────────────────────────────────────────────────── */
#splash{position:fixed;inset:0;z-index:300;background:#0D0F12;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8)}
#splash[hidden]{display:none}
#splashMark{color:#fff;inline-size:min(44vw,290px);opacity:0}
#splashLock{color:#fff;inline-size:min(72vw,560px);opacity:0;position:relative}
#splashMark svg,#splashLock svg{inline-size:100%;height:auto}
#sweep{position:absolute;top:-12%;bottom:-12%;width:2px;background:#00F0FF;left:-4%;opacity:0}
#splashFoot{opacity:0;display:flex;align-items:center;gap:10px;
  font:500 12px/1 var(--font-mono);letter-spacing:.3em;text-transform:uppercase;color:#8A9098}
#splashFoot .heart{inline-size:13px;block-size:13px;fill:#FF2D55}
#splashFoot .flag{inline-size:22px;block-size:15px}
.skipbtn{position:absolute;bottom:26px;right:26px;background:transparent;border:1px solid #636D7A;
  color:#8A9098;font:500 11px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  padding:0 14px;min-block-size:44px;cursor:pointer}
.skipbtn:hover{color:#00F0FF;border-color:#00F0FF}

/* ── RTL ────────────────────────────────────────────────────────────────── */
[dir="rtl"]{--font-display:var(--font-ar);--font-text:var(--font-ar)}
[dir="rtl"] body{font-family:var(--font-ar)}
[dir="rtl"] .t-display{font:700 clamp(34px,6.6vw,98px)/1.12 var(--font-ar);letter-spacing:0;
  text-transform:none}
[dir="rtl"] .t-h1{font:600 clamp(27px,4.6vw,48px)/1.28 var(--font-ar);letter-spacing:0;
  text-transform:none}
[dir="rtl"] .t-h2{font:600 clamp(21px,3.2vw,34px)/1.3 var(--font-ar);letter-spacing:0;
  text-transform:none}
[dir="rtl"] .t-h3{font:500 clamp(18px,2vw,25px)/1.5 var(--font-ar)}
[dir="rtl"] .t-label,[dir="rtl"] .navlink{letter-spacing:0;font-family:var(--font-ar)}
[dir="rtl"] .t-body,[dir="rtl"] .t-lead,[dir="rtl"] .t-sm{line-height:1.8}
[dir="rtl"] .cit{font-family:var(--font-mono);direction:ltr;unicode-bidi:embed}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #splash{display:none!important}
  .hb,.sitefoot .heart,.missing::before{animation:none!important}
  #reticle{display:none!important}
  .mediaframe video,.band video,.strip__media video,.svc2__fig video{display:none!important}
  .credit::before{transform:scaleX(1)!important}
  .statmini::before{transform:scaleY(1)!important}
  .strip__media{clip-path:none!important}
  .strip__scrim{opacity:1}
  .strip__cap{opacity:1;transform:none}
  .band{block-size:clamp(200px,32vh,320px)}
  body,.nav,.panel,.sheet,.strip{transition:none!important}
}
@media print{
  .mediaframe,.band,#splash,#reticle,.nav,.sheet,.readout{display:none!important}
  body{background:#fff;color:#000}
}