/* ============================================================
   SELF-HOSTED FONTS
   Google-hosted Cairo was arriving ~4s on a throttled connection and
   reflowing the Arabic hero when it swapped in — measured CLS 0.224 on
   /advisory/. Serving the faces same-origin, preloading the two the hero
   needs, and using `font-display: optional` so a late font is never
   swapped in mid-view. Both families are SIL OFL (redistribution allowed).
   ============================================================ */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/Cairo-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/Cairo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/Cairo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/Cairo-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/Cairo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/Cairo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/Cairo-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/Cairo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/Cairo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Khaleej AI — landing page styles
   Visual system: flat / neo-brutalist. Cream ground, 2px ink
   borders, hard offset shadows, pastel fills, medium-weight
   headings with negative tracking.

   MOBILE-FIRST: base rules target ~360px. All breakpoints use
   min-width. No max-width media queries anywhere in this file.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* grounds */
  --bg:        #FFFEF8;   /* warm cream */
  --bg-2:      #FAF3E3;   /* cream tint band */
  --surface:   #FFFFFF;
  --surface-2: #E5F4F8;   /* sky tint */
  --ink-surface: #222424; /* dark inversion block */

  /* ink + text */
  --txt:       #0A0C0C;
  --txt-dim:   #43474A;   /* 9.6:1 on cream */
  --txt-mute:  #6B6F6C;   /* 5.06:1 on cream — AA for normal text */
  --on-dark:   #FFFEF8;
  --on-dark-dim: #C9CBCA;

  /* accents (fills, never text) */
  --sky:       #9EDDED;
  --amber:     #FDEEC4;
  --mint-2:    #D8EDD2;   /* hub destination card ground */
  --sky-2:     #D6E9F5;   /* hub destination card ground */
  --line:      #0A0C0C;   /* the hairline IS ink in this system */
  --line-soft: #DADADA;

  /* the signature: 2px border + hard offset shadow */
  --bw: 2px;
  --shx: 4px;             /* mirrored under RTL below */
  --shadow:      var(--shx) 4px 0 0 var(--line-soft);
  --shadow-ink:  var(--shx) 4px 0 0 var(--txt);
  --shadow-lift: calc(var(--shx) * 1.75) 7px 0 0 var(--line-soft);

  --r-sm: 8px;
  --r:    16px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* fluid type */
  --fs-h1:   clamp(2.05rem, 7.4vw, 3.2rem);
  --fs-h2:   clamp(1.65rem, 5.2vw, 2.75rem);
  --fs-h3:   clamp(1.18rem, 3.5vw, 1.5rem);
  --fs-lead: clamp(1rem, 3.4vw, 1.125rem);
  --fs-body: clamp(.95rem, 3.1vw, 1rem);

  --pad: 20px;
  --sect-y: 64px;
  --nav-h: 62px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* RTL: the hard shadow falls away from the reading origin */
[dir="rtl"] { --shx: -4px; }

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/SpaceGrotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Cairo', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* Latin runs inside RTL Arabic: Space Grotesk carries no Arabic glyphs,
   so it is scoped to Latin/numeric runs only and isolated for bidi. */
.en {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  letter-spacing: -.01em;
}

/* ---------- a11y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 0; top: -100px;
  background: var(--txt); color: var(--on-dark);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  z-index: 999; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

:where(a, button, [tabindex], summary, input):focus-visible {
  outline: 3px solid var(--txt);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%; max-width: 1140px; margin-inline: auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

section { padding-block: var(--sect-y); }

.sec-head { text-align: center; max-width: 740px; margin-inline: auto; margin-bottom: 38px; }

.eyebrow {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--txt);
  background: var(--sky);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 14px;
  margin-bottom: 16px;
}

/* headings: medium weight, tight negative tracking */
h1 { font-size: var(--fs-h1); line-height: 1.16; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.2;  font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.32; font-weight: 600; letter-spacing: -.012em; }

.sec-sub { color: var(--txt-dim); font-size: var(--fs-lead); margin-top: 14px; }

/* highlighter block instead of a gradient fill */
.hl {
  background: var(--sky);
  box-shadow: 0 0 0 4px var(--sky);
  border-radius: 3px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm);
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  min-height: 50px;
  box-shadow: var(--shadow-ink);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .16s;
}
/* press = the block sinks into its own shadow */
.btn:active { transform: translate(var(--shx), 4px); box-shadow: 0 0 0 0 var(--txt); }

.btn-primary { background: var(--txt); color: var(--on-dark); }
.btn-ghost   { background: var(--surface); color: var(--txt); }
.btn-dark    { background: var(--sky); color: var(--txt); }
.btn-block   { width: 100%; }

.btn .arw { transition: transform .16s var(--ease); }
[dir="rtl"] .btn .arw { transform: scaleX(-1); }

@media (hover: hover) {
  .btn:hover { transform: translate(calc(var(--shx) * -.5), -2px); box-shadow: var(--shadow-lift); }
  .btn-primary:hover { background: #1b1f1f; }
  .btn-ghost:hover   { background: var(--surface-2); }
  .btn-dark:hover    { background: #b6e6f2; }
  .btn:hover .arw { transform: translateX(3px); }
  [dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(3px); }
}

/* ---------- scroll progress ---------- */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 4px;
  background: var(--txt);
  transform: scaleX(0); transform-origin: right center;
  z-index: 90; pointer-events: none;
}
[dir="ltr"] .progress { transform-origin: left center; }

/* ---------- draft banner ---------- */
.draft {
  background: var(--amber); color: var(--txt);
  text-align: center; padding: 8px 16px;
  font-size: .8rem; font-weight: 600;
  border-bottom: var(--bw) solid var(--txt);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: var(--bw) solid var(--txt);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--nav-h);
}
.logo {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.35rem; letter-spacing: -.04em;
  direction: ltr; display: inline-flex;
  color: var(--txt);
}
.logo span {
  background: var(--sky);
  border: var(--bw) solid var(--txt);
  border-radius: 6px;
  padding: 0 6px;
  margin-inline-end: 3px;
}
.logo .ar-mark,
.hub-word .ar-mark {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
  font-weight: 700;
}

/* No-JS baseline: real links visible. With JS, mobile swaps to the drawer. */
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.nav-links a { color: var(--txt-dim); font-size: .84rem; padding: 4px 2px; font-weight: 500; }
.nav-cta { display: none; }

.js .nav-links { display: none; }

.burger { display: none; }
.js .burger {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--txt);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.burger span {
  display: block; width: 20px; height: 2.5px;
  background: var(--txt); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 75;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 24px)
           max(var(--pad), env(safe-area-inset-right))
           calc(32px + env(safe-area-inset-bottom))
           max(var(--pad), env(safe-area-inset-left));
  gap: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  overflow-y: auto;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-size: 1.2rem; font-weight: 600;
  padding: 15px 4px;
  border-bottom: var(--bw) solid var(--txt);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer .btn { margin-top: 22px; }
body[data-lock="true"] { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-block: 48px 40px;
  text-align: center;
  overflow: hidden;
}
.hero > * { position: relative; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--surface); border: var(--bw) solid var(--txt);
  box-shadow: var(--shadow);
  font-size: .8rem; color: var(--txt); font-weight: 500;
  margin-bottom: 24px;
}
.pill b { font-weight: 700; }
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--txt); flex: none;
}

.hero .sub {
  color: var(--txt-dim);
  font-size: var(--fs-lead);
  max-width: 640px; margin: 20px auto 30px;
}

.hero-cta { display: flex; flex-direction: column; gap: 12px; }

.proof { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stack { display: flex; }
.stack i {
  width: 38px; height: 38px; border-radius: 50%;
  margin-inline-start: -10px;
  border: var(--bw) solid var(--txt);
  background: var(--sky);
  display: block;
}
.stack i:first-child { margin-inline-start: 0; }
.stack i:nth-child(2) { background: var(--amber); }
.stack i:nth-child(3) { background: #F6C9D8; }
.stack i:nth-child(4) { background: #C9E8C4; }
.stack i:nth-child(5) { background: var(--bg-2); }

.proof-txt { color: var(--txt-dim); font-size: .9rem; }
.proof-txt b { color: var(--txt); font-weight: 700; }

/* hero product mock */
.mock {
  margin-top: 42px;
  border-radius: var(--r);
  border: var(--bw) solid var(--txt);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-ink);
  text-align: start;
}
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: var(--bg-2);
  border-bottom: var(--bw) solid var(--txt);
}
.mock-bar i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--txt); flex: none; }
.mock-bar i:nth-child(1) { background: #FF8A8A; }
.mock-bar i:nth-child(2) { background: var(--amber); }
.mock-bar i:nth-child(3) { background: #A8E0A0; }
.mock-url {
  margin-inline-start: 10px; flex: 1;
  background: var(--surface); border: 1.5px solid var(--txt); border-radius: var(--r-pill);
  padding: 4px 12px; font-size: .72rem; color: var(--txt-mute);
  direction: ltr; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
}
.mock-body { display: grid; grid-template-columns: 1fr; }
.mock-side { display: none; }
.mock-main { padding: 16px; display: grid; gap: 12px; }
.mock-row {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm); padding: 12px 13px;
  display: flex; align-items: center; gap: 11px;
}
.mock-row .ic {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--surface-2); border: 1.5px solid var(--txt);
}
.mock-row .tx { flex: 1; min-width: 0; }
.mock-row .tx b { display: block; font-size: .88rem; font-weight: 700; }
.mock-row .tx span { font-size: .76rem; color: var(--txt-mute); }
.mock-row .badge {
  font-size: .68rem; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--amber); border: 1.5px solid var(--txt);
  color: var(--txt); font-weight: 700; flex: none;
}

/* ---------- marquee ---------- */
.marq-wrap {
  padding-block: 26px;
  border-block: var(--bw) solid var(--txt);
  background: var(--surface-2);
}
.marq-label {
  text-align: center; color: var(--txt); font-size: .78rem;
  margin-bottom: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.marq { display: flex; width: max-content; direction: ltr; }
/* One run = the items + a trailing gap, so cloning the RUN (not the items)
   makes translateX(-50%) land exactly on the clone with no half-gap jump. */
.marq-run { display: flex; gap: 40px; padding-inline-end: 40px; }
.marq-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marq span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  color: var(--txt); font-size: 1.05rem;
  white-space: nowrap; direction: ltr;
  letter-spacing: -.02em;
}
@keyframes slide { to { transform: translateX(-50%); } }
/* motion only when JS can offer the pause control (WCAG 2.2.2) */
.js .marq { animation: slide 30s linear infinite; }
.js .marq[data-paused="true"] { animation-play-state: paused; }
.marq-mask:hover .marq { animation-play-state: paused; }

.marq-toggle {
  display: block; margin: 16px auto 0;
  padding: 7px 16px; min-height: 32px;
  border: var(--bw) solid var(--txt); border-radius: var(--r-pill);
  background: var(--surface); color: var(--txt);
  font-size: .76rem; font-weight: 600;
}
.marq-toggle:hover { background: var(--amber); }

/* ---------- tabbed feature explorer ---------- */
.tabs-menu { display: none; }
.js .tabs-menu {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 12px;
  margin-bottom: 24px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.tabs-menu::-webkit-scrollbar { display: none; }
.tab-link {
  flex: none; scroll-snap-align: start;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--txt);
  background: var(--surface);
  color: var(--txt);
  font-weight: 600; font-size: .9rem;
  white-space: nowrap;
  min-height: 46px;
  box-shadow: var(--shadow);
  transition: background .18s, box-shadow .14s var(--ease), transform .14s var(--ease);
}
.tab-link[aria-selected="true"] {
  background: var(--sky);
  box-shadow: var(--shadow-ink);
}

/* no-JS baseline: all panes visible and separated */
.tab-pane + .tab-pane { margin-top: 34px; padding-top: 34px; border-top: var(--bw) solid var(--txt); }
.js .tab-pane + .tab-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.js .tab-pane { display: none; }
.js .tab-pane[data-active="true"] { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tab-grid { display: grid; gap: 22px; }
.tab-copy h3 { margin-bottom: 10px; }
.tab-copy p { color: var(--txt-dim); margin-bottom: 16px; }
.tab-copy ul { display: grid; gap: 10px; margin-bottom: 22px; }
.tab-copy li { display: flex; gap: 10px; align-items: flex-start; }
.tab-copy li::before { content: "✓"; font-weight: 800; flex: none; }

.tab-visual {
  background: var(--bg-2); border: var(--bw) solid var(--txt);
  border-radius: var(--r); padding: 18px;
  box-shadow: var(--shadow-ink);
  display: grid; gap: 10px;
  align-content: start;
}
.vis-row {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm); padding: 11px 13px;
  display: flex; align-items: center; gap: 10px;
  font-size: .86rem; font-weight: 500;
}
.vis-row .n {
  width: 28px; height: 28px; border-radius: 6px; flex: none;
  display: grid; place-items: center;
  background: var(--sky); border: 1.5px solid var(--txt);
  font-weight: 700; font-size: .78rem;
}
.vis-row .meta { margin-inline-start: auto; color: var(--txt-mute); font-size: .74rem; flex: none; }

/* ---------- feature cards ---------- */
.grid { display: grid; gap: 18px; }
.card {
  background: var(--surface);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
/* rotate the fills so the grid reads as a set, not a repeat */
.card:nth-child(3n+1) { background: var(--surface); }
.card:nth-child(3n+2) { background: var(--bg-2); }
.card:nth-child(3n+3) { background: var(--surface-2); }

@media (hover: hover) {
  .card:hover { transform: translate(calc(var(--shx) * -.5), -3px); box-shadow: var(--shadow-lift); }
}
.ico {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--surface); border: var(--bw) solid var(--txt);
  display: grid; place-items: center;
  font-size: 1.35rem; margin-bottom: 16px;
}
.card p { color: var(--txt-dim); margin-top: 8px; }
.card ul { display: grid; gap: 9px; margin-top: 14px; }
.card li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.card li::before { content: "✓"; font-weight: 800; flex: none; }

/* ---------- stats band ---------- */
.stats { background: var(--ink-surface); color: var(--on-dark); border-block: var(--bw) solid var(--txt); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; text-align: center; }
.stat .num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1;
  color: var(--sky);
  letter-spacing: -.03em;
  direction: ltr;
}
.stat .lbl { color: var(--on-dark-dim); font-size: .86rem; margin-top: 8px; }

/* ---------- timeline / stepper ---------- */
.steps { display: grid; gap: 16px; counter-reset: step; }
.step {
  position: relative;
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r); padding: 22px 20px;
  box-shadow: var(--shadow);
}
.step:nth-child(even) { background: var(--bg-2); }
.step .wk {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--amber); border: 1.5px solid var(--txt);
  border-radius: var(--r-pill); padding: 2px 10px;
  margin-bottom: 10px;
}
.step p { color: var(--txt-dim); margin-top: 8px; font-size: .93rem; }

/* ---------- pricing ---------- */
.pricing { background: var(--bg-2); border-block: var(--bw) solid var(--txt); }

.toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r-pill); padding: 5px;
  box-shadow: var(--shadow);
  margin-inline: auto; margin-bottom: 32px;
}
.toggle button {
  padding: 9px 18px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .87rem; color: var(--txt);
  min-height: 42px;
  transition: background .18s;
}
.toggle button[aria-pressed="true"] { background: var(--sky); border: 1.5px solid var(--txt); }
.toggle .save {
  font-size: .68rem; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--amber); border: 1px solid var(--txt);
  margin-inline-start: 6px; font-weight: 700;
}

.plans { display: grid; gap: 22px; max-width: 880px; margin-inline: auto; }
.plan {
  position: relative;
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r-lg); padding: 32px 24px;
  box-shadow: var(--shadow);
}
.plan.feat { background: var(--surface); box-shadow: var(--shadow-ink); }
.tag {
  position: absolute; top: -15px; inset-inline-start: 24px;
  background: var(--sky); color: var(--txt);
  border: var(--bw) solid var(--txt); border-radius: var(--r-pill);
  font-weight: 700; font-size: .76rem;
  padding: 4px 15px;
}
.plan .kind {
  color: var(--txt-mute); font-size: .76rem;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600;
}
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-block: 16px 4px; }
.price .amt {
  font-family: 'Space Grotesk', sans-serif; font-size: 2.7rem; font-weight: 700;
  line-height: 1; direction: ltr; letter-spacing: -.035em;
}
.price .per { color: var(--txt-dim); font-size: .95rem; }
.sar { color: var(--txt-mute); font-size: .87rem; font-weight: 600; margin-bottom: 20px; }
.plan .desc { color: var(--txt-dim); font-size: .94rem; margin-bottom: 20px; }
.plan ul { display: grid; gap: 11px; margin-bottom: 24px; }
.plan li { display: flex; gap: 10px; font-size: .94rem; align-items: flex-start; }
.plan li::before { content: "✓"; font-weight: 800; flex: none; }
.plan .note { color: var(--txt-mute); font-size: .8rem; text-align: center; margin-top: 12px; }

/* ---------- testimonials ---------- */
.tw { display: grid; gap: 16px; }
.tcard {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r); padding: 20px;
  box-shadow: var(--shadow);
  break-inside: avoid;
}
.tcard .who { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.tcard .av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--sky); border: var(--bw) solid var(--txt);
  font-weight: 700; font-size: .9rem;
  font-family: 'Space Grotesk', sans-serif;
}
.tcard .nm { font-weight: 700; font-size: .94rem; line-height: 1.3; }
.tcard .rl { color: var(--txt-mute); font-size: .8rem; }
.tcard p { color: var(--txt-dim); font-size: .92rem; }

/* placeholder slot — must be visually obvious it is not real */
.tcard.slot {
  border-style: dashed; box-shadow: none;
  background: repeating-linear-gradient(45deg, var(--bg) 0 10px, var(--bg-2) 10px 20px);
}
.tcard.slot .hint { color: var(--txt-mute); font-size: .85rem; text-align: center; padding: 14px 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow);
}
.faq details[open] { background: var(--bg-2); }
.faq summary {
  padding: 17px 20px;
  font-weight: 600; font-size: 1rem;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  transition: transform .24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans {
  padding: 0 20px 20px; color: var(--txt-dim); font-size: .94rem;
}

/* ---------- final CTA ---------- */
.final .box {
  background: var(--sky);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-ink);
  padding: 44px 24px;
  text-align: center;
  color: var(--txt);
}
.final h2 { color: var(--txt); }
.final p { color: var(--txt-dim); font-size: var(--fs-lead); margin: 14px auto 28px; max-width: 540px; }

/* ---------- footer ---------- */
footer {
  border-top: var(--bw) solid var(--txt);
  background: var(--bg-2);
  padding-block: 34px 96px; color: var(--txt-dim); font-size: .88rem;
}
.foot-grid { display: grid; gap: 26px; }
.foot-grid h3 {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt); margin-bottom: 12px; font-weight: 700;
}
.foot-grid a { display: block; padding: 5px 0; }
@media (hover: hover) { .foot-grid a:hover { color: var(--txt); text-decoration: underline; } }
.foot-bot {
  border-top: var(--bw) solid var(--txt); margin-top: 28px; padding-top: 20px;
  text-align: center; color: var(--txt-mute); font-size: .82rem;
}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: var(--bw) solid var(--txt);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.sticky-cta[data-show="true"] { transform: none; }
.sticky-cta .btn { box-shadow: none; }

/* ---------- scroll reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .rv[data-in="true"] { opacity: 1; transform: none; }

/* ============================================================
   BREAKPOINTS — min-width only (mobile-first)
   ============================================================ */

@media (min-width: 480px) {
  :root { --pad: 24px; }
  .hero-cta { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .hero-cta .btn { flex: 0 1 auto; }
  .proof { flex-direction: row; justify-content: center; gap: 14px; }
}

@media (min-width: 700px) {
  :root { --sect-y: 88px; --nav-h: 68px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tw { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .mock-body { grid-template-columns: 200px 1fr; }
  .mock-side {
    display: grid; gap: 6px; align-content: start;
    padding: 14px 12px;
    border-inline-end: var(--bw) solid var(--txt);
    background: var(--bg-2);
  }
  .mock-side b { font-size: .68rem; color: var(--txt-mute); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; }
  .mock-side a { font-size: .8rem; padding: 7px 9px; border-radius: 6px; color: var(--txt-dim); }
  .mock-side a[data-on="true"] { background: var(--sky); border: 1.5px solid var(--txt); color: var(--txt); font-weight: 600; }
  .tab-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 34px; }
  .hero { padding-block: 68px 56px; }
  .final .box { padding: 60px 40px; }
}

@media (min-width: 960px) {
  :root { --sect-y: 104px; }
  .js .burger { display: none; }
  .drawer { display: none !important; }
  .nav-links, .js .nav-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 26px; }
  .nav-links a { color: var(--txt-dim); font-size: .93rem; padding: 4px 2px; transition: color .18s; }
  .nav-links a:hover { color: var(--txt); }
  .nav-cta { display: inline-flex; padding: 9px 20px; min-height: 42px; font-size: .9rem; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .tw { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .sticky-cta { display: none; }
  .hero { padding-block: 92px 64px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .marq { animation: none; }
}

/* ---------- print ---------- */
@media print {
  .nav, .drawer, .sticky-cta, .progress, .draft, .marq-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .plan, .tcard { border-color: #000; box-shadow: none; break-inside: avoid; }
  .stats { background: #fff; }
  .stat .num, .stat .lbl { color: #000; }
}

/* ============================================================
   LINK HUB (index) — compact router page.
   Scoped under .hub so none of it touches /advisory/.
   ============================================================ */
.hub {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  /* faint engineering grid */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, rgba(10,12,12,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,12,12,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}

.hub-in {
  width: 100%; max-width: 940px; margin-inline: auto;
  padding: 44px max(var(--pad), env(safe-area-inset-left))
           64px max(var(--pad), env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 30px;
}

/* ---- masthead ---- */
.hub-mast { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.hub-mark {
  width: 78px; height: 78px;
  border: 3px solid var(--txt); border-radius: 16px;
  background: var(--surface);
  display: grid; place-items: center;
  box-shadow: var(--shadow-ink);
}
.hub-mark svg { width: 52px; height: 52px; }

.hub-word {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 8vw, 2.9rem); font-weight: 700;
  letter-spacing: -.045em; direction: ltr;
  display: inline-flex; align-items: center; gap: 4px;
}
.hub-word b {
  background: var(--sky); border: 2.5px solid var(--txt);
  border-radius: 8px; padding: 0 8px; font-weight: 700;
}
.hub-tag { color: var(--txt-dim); font-size: clamp(.95rem, 3.4vw, 1.08rem); max-width: 34em; }
.hub-lead {
  color: var(--txt-dim);
  font-size: var(--fs-lead);
  max-width: 36em;
  margin: 10px auto 0;
}

.hub-social { display: flex; gap: 16px; justify-content: center; margin-top: 2px; }
.hub-social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 8px; color: var(--txt);
  transition: background .16s, transform .14s var(--ease);
}
.hub-social a:hover { background: var(--sky); transform: translateY(-2px); }
.hub-social svg { width: 22px; height: 22px; fill: currentColor; }

/* ---- panels ---- */
.panel {
  background: var(--bg-2);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  box-shadow: var(--shadow-ink);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.panel > h2 {
  text-align: center;
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  letter-spacing: -.02em;
}
.panel > p { text-align: center; color: var(--txt-dim); font-size: .96rem; margin-top: -8px; }

.panel-grid { display: grid; gap: 18px; }

/* ---- destination cards ---- */
.dest {
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.dest.mint { background: var(--mint-2); }
.dest.sky  { background: var(--sky-2); }

@media (hover: hover) {
  .dest:hover { transform: translate(calc(var(--shx) * -.5), -3px); box-shadow: var(--shadow-lift); }
}

.dest-art {
  border-radius: 10px;
  display: grid; place-items: center;
  padding: 6px 0 2px;
}
.dest-art svg { width: min(190px, 62%); height: auto; }

.dest h3 { font-size: clamp(1.15rem, 4.4vw, 1.4rem); }
.dest p { color: var(--txt-dim); font-size: .92rem; flex: 1; }
.dest .btn { align-self: flex-start; margin-top: 4px; }

/* ---- hub footer ----
   Overrides the generic `footer` rule (cream band + 96px pad + top border)
   that exists for the /advisory/ page; the hub footer is a plain caption. */
.hub-foot {
  margin-top: auto; text-align: center;
  color: var(--txt-mute); font-size: .8rem;
  background: none;
  border-top: 0;
  padding: 10px 0 0;
}

@media (min-width: 700px) {
  .hub-in { padding-block: 60px 80px; gap: 36px; }
  .panel { padding: 28px 26px; gap: 22px; }
  .panel-grid.two { grid-template-columns: repeat(2, 1fr); }
  .dest { padding: 22px; }
}

/* ============================================================
   SUB-PAGES (/agency/, /careers/, /contact/)
   Compact shell: back-nav, hero, content, CTA, footer.
   ============================================================ */
.subnav {
  position: sticky; top: 0; z-index: 80;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: var(--bw) solid var(--txt);
}
.subnav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--nav-h);
}
.subnav .back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--txt-dim);
  padding: 8px 4px; min-height: 44px;
}
.subnav .back:hover { color: var(--txt); }

.page-hero { padding-block: 44px 8px; text-align: center; }
.page-hero .sub {
  color: var(--txt-dim); font-size: var(--fs-lead);
  max-width: 620px; margin: 18px auto 26px;
}

/* numbered service pillars */
.pillars { display: grid; gap: 18px; counter-reset: pil; }
.pillar {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r); padding: 24px 22px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.pillar:nth-child(3n+2) { background: var(--bg-2); }
.pillar:nth-child(3n+3) { background: var(--surface-2); }
.pillar .num {
  counter-increment: pil;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .06em;
  background: var(--sky); border: 1.5px solid var(--txt);
  border-radius: var(--r-pill); padding: 2px 12px;
  align-self: flex-start;
}
.pillar .num::before { content: counter(pil, decimal-leading-zero); }
.pillar p { color: var(--txt-dim); font-size: .94rem; }
.pillar ul { display: grid; gap: 8px; margin-top: 2px; }
.pillar li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.pillar li::before { content: "✓"; font-weight: 800; flex: none; }

/* ordered "how it works" strip */
.flow { display: grid; gap: 14px; }
.flow-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm); padding: 16px 18px;
}
.flow-item .k {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--amber); border: 1.5px solid var(--txt);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .86rem;
}
.flow-item h3 { font-size: 1.02rem; margin-bottom: 2px; }
.flow-item p { color: var(--txt-dim); font-size: .9rem; }

/* contact method blocks */
.ways { display: grid; gap: 16px; }
.way {
  background: var(--surface); border: var(--bw) solid var(--txt);
  border-radius: var(--r); padding: 22px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.way h3 { font-size: 1.08rem; }
.way p { color: var(--txt-dim); font-size: .92rem; flex: 1; }
.way .btn { align-self: flex-start; margin-top: 6px; }

/* unresolved endpoint — deliberately reads as not-real (same language as
   the testimonial slots). Must never look like a working control. */
.pending {
  border: var(--bw) dashed var(--txt-mute);
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, var(--bg) 0 10px, var(--bg-2) 10px 20px);
  padding: 12px 14px;
  color: var(--txt-mute); font-size: .86rem; font-weight: 600;
  text-align: center;
}

@media (min-width: 700px) {
  .page-hero { padding-block: 64px 8px; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .ways { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   ENGLISH (LTR) — Space Grotesk becomes the primary face.
   All directional CSS already uses logical properties, and the hard
   shadow flips via --shx, so LTR needs no per-rule mirroring.
   ============================================================ */
html[lang="en"] body,
html[lang="en"] .btn { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; }
html[lang="en"] .en { font-family: inherit; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -.03em; }

/* ---------- language toggle ---------- */
.lang {
  display: inline-flex; align-items: stretch;
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  flex: none;
}
.lang a {
  display: grid; place-items: center;
  padding: 0 13px; min-height: 40px; min-width: 44px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--txt-dim);
  transition: background .16s, color .16s;
}
.lang a[aria-current="true"] { background: var(--sky); color: var(--txt); }
.lang a:not([aria-current="true"]):hover { background: var(--bg-2); color: var(--txt); }
.lang a + a { border-inline-start: var(--bw) solid var(--txt); }

/* hub places the toggle above the mark */
.hub-lang { display: flex; justify-content: center; margin-bottom: 4px; }

/* sub-page / advisory nav: toggle sits beside the back link */
.subnav-in .lang, .nav-in .lang { margin-inline-start: auto; }
.subnav-in > .navright, .nav-in > .navright { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   SCOPING TOOL (/agency/) — six questions, a recommendation
   rendered on the page. No backend: everything here is state that
   lives in the DOM.

   Progressive enhancement: with no `.js` on <html> the radios and
   the submit row are hidden and the options render as a plain
   readable list, so the page never shows a control that cannot
   work. The fallback note is the reverse — hidden once JS runs.
   ============================================================ */
.scoper { background: var(--surface-2); border-block: var(--bw) solid var(--txt); }

.sc { max-width: 780px; margin-inline: auto; }

/* ---------- progress ---------- */
.sc-prog {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: var(--txt-dim);
  background: var(--surface);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-pill);
  padding: 7px 18px;
  width: max-content;
  margin: 0 auto 26px;
  transition: background .2s var(--ease);
}
.sc-prog[data-complete="true"] { background: var(--amber); color: var(--txt); }
.sc-prog b { font-weight: 700; color: var(--txt); }

/* ---------- one question ---------- */
.sc-steps { display: grid; gap: 16px; list-style: none; counter-reset: scq; }

.sc-step {
  background: var(--surface);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  padding: 20px 18px;
  transition: box-shadow .2s var(--ease);
}
.sc-step[data-answered="true"] { box-shadow: var(--shadow-ink); }
.sc-step[data-missing="true"] { border-color: #C2453F; box-shadow: var(--shx) 4px 0 0 #C2453F; }

.sc-step fieldset { border: 0; }

.sc-step legend {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.012em;
  line-height: 1.32;
  margin-bottom: 16px;
  padding: 0;
}
.sc-n {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  margin-top: 2px;
  background: var(--amber);
  border: var(--bw) solid var(--txt);
  border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .84rem; font-weight: 700;
}
.sc-step[data-answered="true"] .sc-n { background: var(--sky); }

/* ---------- options ---------- */
.sc-opts { display: grid; gap: 9px; }

/* position:relative anchors the hidden radio inside its own label —
   without a positioned ancestor the absolute input escapes to the
   initial containing block and lands on top of unrelated content. */
.sc-opt { display: block; position: relative; cursor: pointer; border-radius: var(--r-sm); }
/* kept in the a11y tree and focusable; the .sc-face carries the visuals */
.sc-opt input {
  position: absolute; inset-inline-start: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; margin: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sc-opt:focus-within { outline: 3px solid var(--txt); outline-offset: 2px; }

.sc-face {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 11px 14px;
  background: var(--bg);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm);
  font-size: .94rem;
  line-height: 1.45;
  transition: background .16s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}
.sc-dot {
  flex: none;
  width: 20px; height: 20px;
  border: var(--bw) solid var(--txt);
  border-radius: 50%;
  background: var(--surface);
  position: relative;
}
.sc-opt input:checked + .sc-face { background: var(--sky); box-shadow: var(--shadow-ink); }
.sc-opt input:checked + .sc-face .sc-dot::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--txt); border-radius: 50%;
}
@media (hover: hover) {
  .sc-opt:hover .sc-face { background: var(--bg-2); }
  .sc-opt input:checked + .sc-face { background: var(--sky); }
}

/* ---------- actions ---------- */
.sc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.sc-note { color: var(--txt-dim); font-size: .85rem; text-align: center; }

/* ---------- no-JS fallback ---------- */
.sc-nojs {
  background: var(--surface);
  border: var(--bw) dashed var(--txt);
  border-radius: var(--r);
  padding: 18px;
  margin-top: 22px;
  font-size: .93rem;
  color: var(--txt-dim);
}
.sc-nojs a { font-weight: 700; color: var(--txt); text-decoration: underline; }
.js .sc-nojs { display: none; }

/* JS absent: strip the controls, leave the questions readable */
html:not(.js) .sc-opt input,
html:not(.js) .sc-dot,
html:not(.js) .sc-actions,
html:not(.js) .sc-prog { display: none; }
html:not(.js) .sc-face {
  border: 0; background: none; min-height: 0; padding: 3px 0;
  box-shadow: none;
}
html:not(.js) .sc-face::before { content: "—"; flex: none; font-weight: 700; }

/* ---------- the result ---------- */
.sc-out {
  margin-top: 28px;
  background: var(--surface);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.sc-verdict { background: var(--amber); border-block-end: var(--bw) solid var(--txt); padding: 22px 20px; }
.sc-out[data-verdict="notready"] .sc-verdict { background: var(--bg-2); }
.sc-verdict h3 { margin-bottom: 8px; }
.sc-verdict h3:focus-visible { outline: 3px solid var(--txt); outline-offset: 3px; }
.sc-verdict p { color: var(--txt-dim); font-size: .96rem; }

.sc-body { padding: 20px; display: grid; gap: 22px; }
.sc-body .sc-lbl {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 11px;
}
.sc-body ul { display: grid; gap: 9px; }
.sc-body li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.sc-why li::before { content: "✓"; font-weight: 800; flex: none; }
.sc-prep li::before { content: "→"; font-weight: 800; flex: none; }
[dir="rtl"] .sc-prep li::before { content: "←"; }

.sc-band {
  background: var(--bg-2);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.sc-band b { display: block; font-size: 1.06rem; font-weight: 700; margin-block: 2px 6px; }
.sc-band small { display: block; color: var(--txt-mute); font-size: .8rem; line-height: 1.5; }

.sc-cta { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 700px) {
  .sc-step { padding: 26px 24px; }
  .sc-opts { grid-template-columns: repeat(2, 1fr); }
  .sc-actions { flex-direction: row; justify-content: center; align-items: center; }
  .sc-body { padding: 26px; }
  .sc-verdict { padding: 28px 26px; }
  .sc-cta { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-face, .sc-step, .sc-prog { transition: none; }
}

/* The result is the thing worth keeping — print it, drop the form. */
@media print {
  .scoper { background: #fff; border: 0; }
  .sc, .sc-prog, .sc-nojs, .sc-cta { display: none !important; }
  .sc-out { box-shadow: none; border-color: #000; break-inside: avoid; }
  .sc-verdict, .sc-band { background: #fff !important; border-color: #000; }
  .sc-verdict p, .sc-body li, .sc-band small, .sc-body .sc-lbl { color: #000 !important; }
}

/* ============================================================
   SCOPING RESULT + HANDOFF PAGE (/agency/scope/)

   Reuses .sc-out / .sc-band / .sc-why / .sc-prep from the tool
   above; only the page states and the send block are new.

   The state blocks are empty shells that JavaScript fills, not
   content — so hiding them in base CSS does not breach the
   progressive-enhancement rule. The only real content in the
   no-JS case is the nojs block, and that is what shows.
   ============================================================ */
/* The hero belongs to the ready state: on an unreadable link or a
   failed fetch it would otherwise still promise "here is what your
   answers point at" above an error. Those states carry their own h1,
   so the section takes the top padding instead. */
.sc-result-sec { padding-block-start: 40px; }

/* Reserve a viewport-and-a-bit while the bank is in flight, so the footer
   sits below the fold and the result arriving underneath it shifts nothing
   that was visible. A real result is always taller than this, so the
   reservation never shows as dead space once it renders. Deliberately not
   applied to the short states — they never follow a loading state, because
   a malformed code is rejected before the fetch starts. */
.js #scPage[data-state="loading"],
.js #scPage[data-state="ready"] { min-height: 120vh; }

.sc-state { display: none; }
.sc-state[data-for="nojs"] { display: block; }
.js .sc-state[data-for="nojs"] { display: none; }

.js #scPage[data-state="loading"] .sc-state[data-for="loading"],
.js #scPage[data-state="invalid"] .sc-state[data-for="invalid"],
.js #scPage[data-state="error"]   .sc-state[data-for="error"],
.js #scPage[data-state="ready"]   .sc-state[data-for="ready"] { display: block; }

/* the three non-ready states share a centred, quiet treatment */
.sc-state[data-for="loading"],
.sc-state[data-for="invalid"],
.sc-state[data-for="error"],
.sc-state[data-for="nojs"] {
  max-width: 620px; margin-inline: auto; text-align: center;
  padding-block: 32px;
}
.sc-state h2 { margin-bottom: 12px; }
.sc-state p { color: var(--txt-dim); margin-bottom: 22px; }
.sc-state[data-for="nojs"] a:not(.btn) { font-weight: 700; color: var(--txt); text-decoration: underline; }

.sc-spin {
  width: 34px; height: 34px; margin: 0 auto 18px;
  border: 3px solid var(--txt);
  border-top-color: transparent;
  border-radius: 50%;
  animation: sc-spin .9s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ---------- the send block ---------- */
.sc-send {
  max-width: 780px;
  margin: 26px auto 0;
  background: var(--surface-2);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r);
  padding: 24px 20px;
  text-align: center;
}
.sc-send h3 { margin-bottom: 8px; }
.sc-send-sub { color: var(--txt-dim); font-size: .93rem; margin-bottom: 20px; }
.sc-send .sc-cta { justify-content: center; }
.sc-cta-2 { margin-top: 10px; }

#scCopy[data-copied="true"] { background: var(--amber); }

/* ---------- the answers, folded away ---------- */
.sc-summary {
  margin-top: 20px;
  text-align: start;
  background: var(--surface);
  border: var(--bw) solid var(--txt);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.sc-summary summary {
  cursor: pointer; font-weight: 600; font-size: .93rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 26px;
}
.sc-summary summary::-webkit-details-marker { display: none; }
.sc-summary summary::after {
  content: "+"; font-weight: 800; font-size: 1.15rem; flex: none;
  transition: transform .2s var(--ease);
}
.sc-summary[open] summary::after { transform: rotate(45deg); }
.sc-summary ul { display: grid; gap: 7px; margin-top: 12px; }
.sc-summary li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .88rem; color: var(--txt-dim);
}
.sc-summary li::before { content: "•"; font-weight: 800; flex: none; color: var(--txt); }

.sc-send .sc-note { margin-top: 16px; }
/* inline-block + padding so this clears the 24px minimum target (WCAG 2.5.8);
   as bare inline text it measured 17px tall */
.sc-send .sc-note a {
  display: inline-block; padding: 6px 4px; min-height: 24px;
  text-decoration: underline; color: var(--txt-dim);
}
.sc-send .sc-note a:hover { color: var(--txt); }

@media (min-width: 700px) {
  .sc-send { padding: 30px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-spin { animation: none; border-top-color: var(--txt); opacity: .4; }
  .sc-summary summary::after { transition: none; }
}

@media print {
  .sc-send, .sc-spin { display: none !important; }
}


/* ============================================================
   Khaleej AI — news layout
   Extends the cream/ink system. Unused hub/agency rules remain
   in this file but are not referenced by generated pages.
   ============================================================ */

body.news {
  padding-bottom: 0;
}

.news-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: var(--bw) solid var(--line);
}

.news-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px var(--pad);
  min-height: var(--nav-h);
}

.news-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.news-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--amber);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
}

.news-mark .mark-svg { width: 28px; height: 28px; }

.news-word {
  font-family: 'Cairo', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.04em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .28em;
}

.news-word .ar-mark { font-weight: 700; }
.news-word .en { font-size: .86em; font-weight: 700; }

.news-util {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.news-about-link {
  font-weight: 600;
  font-size: .92rem;
  border-bottom: 2px solid transparent;
}
.news-about-link[aria-current="page"] { border-bottom-color: var(--txt); }

.news-util .lang {
  display: inline-flex;
  border: var(--bw) solid var(--line);
  background: var(--surface);
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.news-util .lang a {
  padding: 5px 9px;
}
.news-util .lang a[aria-current="true"] {
  background: var(--txt);
  color: var(--on-dark);
}

.cat-rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--pad);
  scrollbar-width: none;
  border-top: 1px solid var(--line-soft);
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail a {
  flex: 0 0 auto;
  padding: 10px 14px 11px;
  font-weight: 600;
  font-size: .86rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.cat-rail a[aria-current="page"] {
  border-bottom-color: var(--txt);
}

.news-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px var(--pad) 72px;
}

.home-mast { margin-bottom: 22px; }
.home-tag {
  font-weight: 600;
  color: var(--txt-dim);
  margin-bottom: 4px;
}
.home-mast h1 {
  font-size: var(--fs-h2);
  letter-spacing: -.03em;
  line-height: 1.15;
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--txt-dim);
  margin-bottom: 8px;
}
.kicker time { font-weight: 600; color: var(--txt-mute); }

.story-card {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--r-sm);
}
.story-link { display: block; padding: 18px 18px 20px; }
.story-card h2 {
  font-size: var(--fs-h3);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.story-card .dek { color: var(--txt-dim); }

.story-card-lead {
  background: var(--bg-2);
  margin-bottom: 22px;
}
.story-card-lead .story-link { padding: 22px 20px 24px; }
.story-card-lead h2 {
  font-size: clamp(1.55rem, 4.6vw, 2.35rem);
  letter-spacing: -.03em;
  line-height: 1.2;
}

.story-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.newsletter {
  margin-top: 48px;
  padding: 24px 22px;
  background: var(--sky-2);
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow-ink);
}
.newsletter h2 {
  font-size: var(--fs-h3);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.newsletter p { color: var(--txt-dim); max-width: 46rem; }
.news-btn {
  margin-top: 16px;
  display: inline-block;
  background: var(--txt);
  color: var(--on-dark);
  font-weight: 700;
  padding: 11px 18px;
  border: var(--bw) solid var(--line);
  box-shadow: var(--shadow);
}
.news-btn:hover { background: #222424; }
.newsletter-status {
  margin-top: 12px;
  font-weight: 600;
  color: var(--txt);
}

.empty-cat { color: var(--txt-dim); margin: 12px 0 8px; }

.article { max-width: 46rem; }
.article-head { margin-bottom: 24px; }
.article-head h1 {
  font-size: var(--fs-h1);
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 6px 0 12px;
}
.lede {
  font-size: var(--fs-lead);
  color: var(--txt-dim);
  line-height: 1.55;
}
.byline { margin-top: 12px; font-weight: 700; }

.article-body { font-size: 1.05rem; }
.article-body p,
.article-body li { margin-bottom: 1em; }
.article-body h2,
.article-body h3 {
  margin: 1.6em 0 .5em;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.article-body ul { padding-inline-start: 1.2em; list-style: disc; }
.article-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body blockquote {
  margin: 1.2em 0;
  padding: 12px 16px;
  background: var(--bg-2);
  border-inline-start: 4px solid var(--txt);
}
.article-body blockquote p { margin: 0; }

.sources, .related {
  margin-top: 36px;
  padding-top: 20px;
  border-top: var(--bw) solid var(--line);
}
.sources h2, .related h2, .about-page h1 {
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.sources ul, .related ul { list-style: none; }
.sources li, .related li { margin-bottom: 8px; }
.sources a { text-decoration: underline; text-underline-offset: 3px; }
.related .kicker { display: block; margin-bottom: 2px; }

.about-page { max-width: 46rem; margin-bottom: 36px; }
.about-page h1 {
  font-size: var(--fs-h1);
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: 6px 0 14px;
}
.about-page p { margin-bottom: 1em; }

.news-foot {
  background: var(--ink-surface);
  color: var(--on-dark);
  padding: 36px var(--pad) 48px;
}
.news-foot-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.news-foot .news-word { color: var(--on-dark); margin-bottom: 10px; }
.news-foot .news-word .mark-svg g,
.news-foot .news-word { color: var(--on-dark); }
.news-foot-about { color: var(--on-dark-dim); max-width: 36rem; }
.news-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 20px 0 16px;
  font-weight: 600;
}
.news-foot-nav a { color: var(--on-dark); }
.news-copy { color: var(--on-dark-dim); font-size: .88rem; }

@media (min-width: 720px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card-lead { grid-column: 1 / -1; }
  .newsletter { padding: 32px 36px; }
}

@media (min-width: 960px) {
  .story-grid { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .story-card-lead h2 { max-width: 28rem; }
  .news-main { padding-top: 36px; }
}


/* News photography */
.story-card .story-link { padding: 0; }
.story-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); border-bottom: var(--bw) solid var(--line); }
.story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-copy { padding: 18px 18px 20px; }
.story-card-lead .story-media { aspect-ratio: 16 / 8; }
.story-card-lead .story-copy { padding: 22px 20px 24px; }

.article-hero { margin: 0 0 22px; }
.article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--bw) solid var(--line); box-shadow: var(--shadow); background: var(--bg-2); }
.article-hero figcaption {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--txt-mute);
  line-height: 1.45;
}
.article-hero figcaption a { text-decoration: underline; text-underline-offset: 2px; color: var(--txt-dim); }

@media (min-width: 960px) {
  .story-card-lead .story-media { aspect-ratio: 16 / 7; }
}