@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+Devanagari:wght@300;400;500;700&display=swap');
/* ==========================================================================
   LCS — tokens.css  v4          the single source. nothing else defines these.

   Arabic (--arab) renders in IBM Plex Sans Arabic; the @import above loads it
   at every weight the design uses (300 body/headings … 500 switcher … 600/700),
   so Arabic never falls back off it. Loaded here because every page links this
   file (the home page links ONLY this one).

   Changed from v3
   ---------------
   · Type scale corrected to the scale the homepage actually renders
     (74px display, weight 300, 16.8px body). v3 still carried the abandoned
     68px scale while index.html silently overrode it inline. That drift is
     why a second page could not be built from tokens alone.
   · ROYAL jewel grounds promoted from preview experiment to the ground
     system. Eight grounds, used in rotation and repeated — never one per
     section. Pages alternate light and dark and never run three the same.
   · Mint demoted to --brand: chrome only (logo mark). Section accents are
     inherited from the ground, so no component ever names a colour.
   · Motion primitives live here, not in base.css, so the homepage can link
     this file alone.

   Motion values measured 2026-08-22 from shopify.com @60fps. Do not speed up.
   ========================================================================== */

:root{

  /* ── BRAND — chrome only. Sections inherit accent from their ground. ──── */
  --brand:        #3FCF7F;
  --brand-hi:     #63E29B;
  --brand-ink:    #05140C;   /* text on brand fill — never white */

  /* ── NEUTRAL GROUNDS — header, footer, and any page not using ROYAL ──── */
  --ink:          #08090A;
  --ink-2:        #0E1A14;
  --ink-3:        #14261C;
  --paper:        #F7F8F7;
  --paper-2:      #EAEFEA;
  --paper-3:      #DCE4DC;

  --on-ink:       #F5F7F5;
  --on-ink-mid:   #9BA8A0;
  --on-ink-low:   #6A7670;
  --on-paper:     #08090A;
  --on-paper-mid: #566058;
  --on-paper-low: #838E86;

  --rule-ink:     #1B2A21;
  --rule-ink-2:   #294034;
  --rule-paper:   #DCE3DC;
  --rule-paper-2: #C7D2C8;

  --accent:       var(--brand);
  --accent-hi:    var(--brand-hi);
  --accent-ink:   var(--brand-ink);

  /* ── SEMANTIC — muted on purpose ─────────────────────────────────────── */
  --pos:          #2E7D53;
  --neg:          #B3402B;

  /* ── TYPE ────────────────────────────────────────────────────────────── */
  --sans:  "Instrument Sans", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --arab:  "IBM Plex Sans Arabic", var(--sans);
  --cjk:   "Noto Sans SC", var(--sans);
  --deva:  "Noto Sans Devanagari", var(--sans);

  --fs-display: clamp(40px, 5.6vw, 74px);
  --fs-h2:      clamp(30px, 3.6vw, 50px);
  --fs-h3:      21px;
  --fs-lede:    clamp(17.5px, 1.4vw, 20px);
  --fs-body:    16.8px;
  --fs-small:   14px;
  --fs-eyebrow: 11.5px;
  --fs-stat:    clamp(60px, 8.6vw, 130px);

  --tr-display: -0.030em;
  --tr-h2:      -0.024em;
  --tr-h3:      -0.014em;
  --tr-eyebrow:  0.16em;

  /* weight ceiling is 500. 600 and above do not exist in this system. */
  --w-thin: 300;
  --w-reg:  400;
  --w-med:  500;

  /* ── SPACE — 8px base, these values only ─────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  --container: 1240px;
  --gutter:    24px;

  /* section padding is deliberately uneven — see base.css */
  --sec-y:     clamp(72px, 8vw, 124px);
  --sec-y-t:   clamp(56px, 6vw, 88px);
  --sec-y-l:   clamp(88px, 10vw, 148px);

  /* ── RADIUS — scales with element size ───────────────────────────────── */
  --r-sm: 6px;    /* ≤32px tall  — chips, inputs   */
  --r-md: 10px;   /* 33–56px     — buttons          */
  --r-lg: 14px;   /* 57–200px    — cards, media     */
  --r-xl: 20px;   /* >200px      — panels, bands    */
  --r-device: 36px;

  /* ── ELEVATION — only on things that genuinely float ─────────────────── */
  --shadow-float:
    0 1px 2px rgb(8 9 10 / .04),
    0 8px 24px -8px rgb(8 9 10 / .10);

  /* ══════════════════════════════════════════════════════════════════════
     MOTION — measured. --t-micro and --t-state remain UNVERIFIED and
     await one 60fps hover clip. Do not treat 180ms as measured.
     ══════════════════════════════════════════════════════════════════════ */
  --t-micro:   180ms;   /* hover, focus, press          [unverified] */
  --t-state:   320ms;   /* accordion, tab, menu         [unverified] */
  --t-reveal: 1200ms;   /* scroll reveal                MEASURED     */
  --t-set:    2000ms;   /* section set-piece            MEASURED     */
  --t-hero:   2350ms;   /* largest single move          MEASURED     */
  --t-count:  1400ms;   /* number count-up                          */

  --e-out:    cubic-bezier(0, 0, .58, 1);     /* 4 of 6 fits — plain ease-out */
  --e-heavy:  cubic-bezier(.25, 1, .5, 1);    /* quart-out                     */
  --e-set:    cubic-bezier(.22, 1, .36, 1);   /* quint-out                     */

  --stagger:  150ms;    /* max 6 in a group */
  --rise:      20px;
  --rise-set:  32px;

  /* globe — the sphere does NOT rotate. Arcs are the only motion. */
  --globe-rotation:  0;
  --globe-arc-cycle: 2400ms;
  --globe-arc-draw:   900ms;
  --globe-arc-hold:   600ms;
  --globe-arc-fade:   900ms;
}

/* ══════════════════════════════════════════════════════════════════════════
   GROUNDS

   Every ground sets --bg --fg --rule --accent. Components read those
   variables and never name a colour, so the accent flows through the whole
   section automatically.
   ══════════════════════════════════════════════════════════════════════════ */

/* neutral pair — header, footer, utility pages */
.on-ink{
  --bg:var(--ink); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
  --fg:var(--on-ink); --fg-mid:var(--on-ink-mid); --fg-low:var(--on-ink-low);
  --rule:var(--rule-ink); --rule-2:var(--rule-ink-2);
  background:var(--bg); color:var(--fg);
}
.on-paper{
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
  --fg:var(--on-paper); --fg-mid:var(--on-paper-mid); --fg-low:var(--on-paper-low);
  --rule:var(--rule-paper); --rule-2:var(--rule-paper-2);
  background:var(--bg); color:var(--fg);
}

/* ── ROYAL ────────────────────────────────────────────────────────────────
   Eight jewel grounds. Use four or five per page, repeated, alternating
   light and dark. All eight in a row reads as a swatch sheet, not a site.
   ─────────────────────────────────────────────────────────────────────── */

.r{position:relative}
.r > .wrap, .r > .bleed, .r > .wall{position:relative; z-index:1}

/* 1 · MIDNIGHT SAPPHIRE — dark. Heroes. */
.r-sapphire{
  --bg:#070B1A; --bg-2:#0D1430;
  --fg:#F2F4FB; --fg-mid:#A2A9C8; --fg-low:#6C7396;
  --rule:#1A2246; --rule-2:#2A3468;
  --accent:#C9A227; --accent-hi:#E3BE45; --accent-ink:#0A0803;
  background:radial-gradient(120% 80% at 22% 8%,#101A44 0%,#070B1A 62%);
  color:var(--fg);
}

/* 2 · IMPERIAL EMERALD — dark. */
.r-emerald{
  --bg:#04140E; --bg-2:#0A2318;
  --fg:#F0F7F2; --fg-mid:#9BBCA8; --fg-low:#67856F;
  --rule:#12331F; --rule-2:#1D4E2F;
  --accent:#D4AF37; --accent-hi:#EBC85A; --accent-ink:#0A0803;
  background:radial-gradient(110% 76% at 78% 10%,#0B2A1B 0%,#04140E 64%);
  color:var(--fg);
}

/* 3 · OXBLOOD — dark. The cash-on-delivery signature ground. */
.r-oxblood{
  --bg:#170609; --bg-2:#2A0B12;
  --fg:#FBF1F1; --fg-mid:#C9A0A4; --fg-low:#8E666B;
  --rule:#3A1219; --rule-2:#571A26;
  --accent:#E0B15E; --accent-hi:#F2CB84; --accent-ink:#1A0A03;
  background:radial-gradient(110% 78% at 26% 6%,#33101A 0%,#170609 60%);
  color:var(--fg);
}

/* 4 · PARCHMENT + GOLD — light. */
.r-parchment{
  --bg:#F7F3E9; --bg-2:#EFE8D7;
  --fg:#161208; --fg-mid:#57503C; --fg-low:#8A8267;
  --rule:#DED4BC; --rule-2:#C9BC9C;
  --accent:#8A6A16; --accent-hi:#A88422; --accent-ink:#FFFBF0;
  background:linear-gradient(180deg,#FAF7EF,#F2ECDD);
  color:var(--fg);
}

/* 5 · ROYAL VIOLET — dark. */
.r-violet{
  --bg:#0C0718; --bg-2:#180E2E;
  --fg:#F5F1FC; --fg-mid:#B3A6CE; --fg-low:#7B6E96;
  --rule:#241640; --rule-2:#3A2465;
  --accent:#CBA6F7; --accent-hi:#DEC5FF; --accent-ink:#100A1C;
  background:radial-gradient(120% 82% at 80% 8%,#1D1140 0%,#0C0718 62%);
  color:var(--fg);
}

/* 6 · LAPIS — dark. The globe lives here. */
.r-lapis{
  --bg:#050C1F; --bg-2:#0A1738;
  --fg:#EFF3FC; --fg-mid:#9FB0D4; --fg-low:#6979A4;
  --rule:#132353; --rule-2:#1E3576;
  --accent:#7FB2FF; --accent-hi:#A5CBFF; --accent-ink:#040A18;
  background:radial-gradient(120% 84% at 18% 12%,#0C1C46 0%,#050C1F 64%);
  color:var(--fg);
}

/* 7 · IVORY — light. The one big number. */
.r-ivory{
  --bg:#FAF8F4; --bg-2:#F1EDE5;
  --fg:#12100C; --fg-mid:#544E44; --fg-low:#89827A;
  --rule:#E3DDD2; --rule-2:#CFC7B8;
  --accent:#8C5A2B; --accent-hi:#A96F37; --accent-ink:#FFFCF7;
  background:linear-gradient(180deg,#FCFAF7,#F4F0E8);
  color:var(--fg);
}

/* 8 · OBSIDIAN — dark, neutral. Dense type and set-pieces. */
.r-obsidian{
  --bg:#0A0A0C; --bg-2:#141418;
  --fg:#F6F5F3; --fg-mid:#A5A29B; --fg-low:#6F6C65;
  --rule:#1E1E23; --rule-2:#30303A;
  --accent:#D9B45B; --accent-hi:#EDCC7C; --accent-ink:#100C02;
  background:radial-gradient(110% 70% at 50% 0%,#15151A 0%,#0A0A0C 60%);
  color:var(--fg);
}

/* light grounds invert glass and need a darker media border */
.r-parchment, .r-ivory{--is-light:1}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION PRIMITIVES
   Progressive enhancement: content is visible without JS. The .js class on
   <html> enables the from-state.
   ══════════════════════════════════════════════════════════════════════════ */

.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--rise));
  transition:opacity var(--t-reveal) var(--e-out),
             transform var(--t-reveal) var(--e-out);
}
.js [data-reveal].is-in{opacity:1; transform:none}

.js [data-reveal="set"]{
  transform:translateY(var(--rise-set)) scale(.98);
  transition:opacity var(--t-set) var(--e-heavy),
             transform var(--t-set) var(--e-heavy);
}
.js [data-reveal="hero"]{
  transform:translateY(var(--rise-set));
  transition:opacity var(--t-hero) var(--e-set),
             transform var(--t-hero) var(--e-set);
}

.js [data-stagger="1"]{transition-delay:calc(var(--stagger) * 1)}
.js [data-stagger="2"]{transition-delay:calc(var(--stagger) * 2)}
.js [data-stagger="3"]{transition-delay:calc(var(--stagger) * 3)}
.js [data-stagger="4"]{transition-delay:calc(var(--stagger) * 4)}
.js [data-stagger="5"]{transition-delay:calc(var(--stagger) * 5)}

/* ── RTL — logical properties only. `margin-left` is a lint error. ─────── */
[dir="rtl"] .icon-directional{transform:scaleX(-1)}
[dir="rtl"]{--arabic-scale:1.06}

/* ── REDUCED MOTION — off, not reduced ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1 !important; transform:none !important}
}

/* ── RTL Arabic typography — applies to any dir="rtl" page (the /ar/* tree). ── */
[dir="rtl"] body{font-family:var(--arab)}
[dir="rtl"] .display,[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .lede,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .eyebrow{font-family:var(--arab)}

/* ── CJK + Devanagari typography — the /zh/* and /hi/* trees (both LTR). ── */
[lang="zh"] body,[lang="zh"] .display,[lang="zh"] .h2,[lang="zh"] .h3,[lang="zh"] .lede,[lang="zh"] h1,[lang="zh"] h2,[lang="zh"] h3,[lang="zh"] .eyebrow{font-family:var(--cjk)}
[lang="hi"] body,[lang="hi"] .display,[lang="hi"] .h2,[lang="hi"] .h3,[lang="hi"] .lede,[lang="hi"] h1,[lang="hi"] h2,[lang="hi"] h3,[lang="hi"] .eyebrow{font-family:var(--deva)}

/* ── Language switcher — segmented pill (EN · FR · ع). In tokens.css so the home
   page (which loads only tokens.css) styles it too. Ground-adaptive via --fg. ── */
.lang{
  display:inline-flex; align-items:stretch;
  border:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius:999px; overflow:hidden;
  font:var(--w-med) 11.5px/1 var(--mono); letter-spacing:.04em;
}
.lang a{
  display:inline-flex; align-items:center; padding:6px 8px;
  color:var(--fg-mid);
  transition:color .18s ease, background-color .18s ease;
}
.lang a + a{ border-inline-start:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.lang a:hover{ color:var(--fg); background-color:color-mix(in srgb, var(--fg) 8%, transparent); }
.lang a.on{ color:var(--accent-ink); background-color:var(--accent); }
.lang a[hreflang="ar"]{ font-family:var(--arab); font-size:14px; letter-spacing:0; }
.lang a[hreflang="zh"]{ font-family:var(--cjk); font-size:14px; letter-spacing:0; }
.lang a[hreflang="hi"]{ font-family:var(--deva); font-size:13px; letter-spacing:0; }
@media(max-width:900px){.lang a{padding:6px 8px;font-size:11px}}
@media(max-width:560px){.lang{letter-spacing:.02em}.lang a{padding:5px 6px;font-size:10.5px}}

/* Header room: with 7 languages + translated nav labels, hide the primary nav
   and the Sign-in link below 1200px so the switcher + Start-free never collide
   (they stay in the footer). Kept here so home + every page pick it up. */
@media(max-width:1200px){.nav,.hdr__e .btn--s{display:none}}