/* ============================================================
   APLS.ai — Base layer: tokens, reset, type, nav, preloader, footer
   ============================================================ */

:root {
  /* ---- Palette (6 named tokens) — apls.ai cool slate + emerald ---- */
  --ink:        #15171C; /* cool slate base — dark chapters */
  --ink-raise:  #1C1F26; /* raised panels on dark */
  --ink-line:   #2C3039; /* hairline borders on dark */
  --paper:      #F2F3F5; /* cool off-white — light chapters */
  --paper-raise:#E6E8EC; /* raised panels on light */
  --amber:      #16C794; /* apls emerald — the one accent */

  /* ---- Derived text neutrals ---- */
  --mist:       #939AA4; /* muted text on dark */
  --mist-dim:   #646B74; /* dimmer text on dark */
  --graphite:   #3B404A; /* muted text on light */
  --amber-deep: #0E9E76; /* emerald deep — for light backgrounds */

  /* ---- Type ---- */
  --font-display: "Archivo", "Noto Sans Devanagari", "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", "Noto Sans Devanagari", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Spacing scale (8px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 192px;

  /* ---- Layout ---- */
  --maxw: 1360px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* long expo */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

html[lang="hi"] body {
  font-family: "Noto Sans Devanagari", "Hanken Grotesk", "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-wrap: pretty;
}

html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] .hero-head,
html[lang="hi"] .ch-title,
html[lang="hi"] .manifesto,
html[lang="hi"] .contact-lead .cl-title,
html[lang="hi"] .proof-statement,
html[lang="hi"] .insight .in-title,
html[lang="hi"] .stack-card .sc-name,
html[lang="hi"] .gov-item .gi-name,
html[lang="hi"] .step .st-name,
html[lang="hi"] .article-hero h1,
html[lang="hi"] .prose h2,
html[lang="hi"] .work-card .wc-title,
html[lang="hi"] .team-card .tc-name,
html[lang="hi"] .panel .p-name,
html[lang="hi"] .nav-link,
html[lang="hi"] .nav-cta,
html[lang="hi"] .mega-item,
html[lang="hi"] .mg-link,
html[lang="hi"] .mm-link,
html[lang="hi"] .mm-sub a,
html[lang="hi"] .mega-all,
html[lang="hi"] .btn,
html[lang="hi"] .hero-eyebrow,
html[lang="hi"] .display {
  font-family: "Noto Sans Devanagari", "Archivo", "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.12;
}

html[lang="hi"] p,
html[lang="hi"] li,
html[lang="hi"] span,
html[lang="hi"] a,
html[lang="hi"] .eyebrow,
html[lang="hi"] .mono,
html[lang="hi"] .hero-support,
html[lang="hi"] .pg-lead,
html[lang="hi"] .ph-lead,
html[lang="hi"] .sc-out,
html[lang="hi"] .tc-bio,
html[lang="hi"] .mgl-desc,
html[lang="hi"] .mi-desc,
html[lang="hi"] .mm-foot,
html[lang="hi"] .creds-track,
html[lang="hi"] .hero-cue,
html[lang="hi"] .pa-v,
html[lang="hi"] .lead,
html[lang="hi"] .hot,
html[lang="hi"] .dim {
  font-family: "Noto Sans Devanagari", "Hanken Grotesk", "Segoe UI", sans-serif;
  line-height: 1.65;
  letter-spacing: 0;
}

html[lang="hi"] .hero-head {
  font-size: clamp(2.375rem, 1.4rem + 4vw, 5.125rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: none;
  max-width: 20ch;
}

html[lang="hi"] .hero .hero-head {
  font-size: clamp(3.25rem, 6.2vw, 7rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  max-width: 10ch;
}

html[lang="hi"] .hero .hero-foot {
  margin-top: clamp(24px, 3vw, 44px);
}

html[lang="hi"] .ch-title {
  /* !important: inner-page .ch-title carries an inline font-size in the HTML
     (clamp(30px,4.4vw,64px)) that a normal rule cannot beat. */
  font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem) !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

html[lang="hi"] .hero-eyebrow,
html[lang="hi"] .eyebrow,
html[lang="hi"] .mono,
html[lang="hi"] .nav-link,
html[lang="hi"] .nav-cta,
html[lang="hi"] .btn,
html[lang="hi"] .mega-item .mi-idx,
html[lang="hi"] .mg-label,
html[lang="hi"] .mm-idx {
  font-weight: 500;
  letter-spacing: 0;
}

html[lang="hi"] .display {
  text-transform: none;
  letter-spacing: -0.015em;
}

html[lang="hi"] .btn,
html[lang="hi"] .nav-cta,
html[lang="hi"] .mega-all,
html[lang="hi"] .mg-link,
html[lang="hi"] .mm-link {
  font-size: 0.95rem;
  line-height: 1.3;
}

html[lang="hi"] .hero-head .accent,
html[lang="hi"] .hero-support b,
html[lang="hi"] .nav-cta,
html[lang="hi"] .mega-item .mi-arrow,
html[lang="hi"] .mg-link .mgl-name .arr,
html[lang="hi"] .step.is-active .st-idx,
html[lang="hi"] .proof-metric .pm-num {
  letter-spacing: 0;
}

html[lang="hi"] .brand-logo,
html[lang="hi"] .brand,
html[lang="hi"] .nav,
html[lang="hi"] .mega,
html[lang="hi"] .mobile-menu,
html[lang="hi"] .nav-links {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Center nav-links in Hindi */
html[lang="hi"] .nav-links {
  margin: 0 auto;
  flex: 0 1 auto;
}

/* Mono/eyebrow label classes carry 0.12em–0.28em tracking + uppercase for the
   Latin design. On Devanagari that spreads the aksharas apart and breaks the
   visual word unit (and detaches matras from their base), so neutralise the
   tracking and the no-op uppercase for every mono-label class that can hold
   Hindi text. */
html[lang="hi"] .pl-label,
html[lang="hi"] .mega-strip .ms-label,
html[lang="hi"] .mg-label,
html[lang="hi"] .footer-col h5,
html[lang="hi"] .creds-head,
html[lang="hi"] .stack-card .sc-fn,
html[lang="hi"] .sv-panel .sv-cap,
html[lang="hi"] .proof-metric .pm-note,
html[lang="hi"] .proof-right .pr-corner,
html[lang="hi"] .cs-arch .pr-corner,
html[lang="hi"] .ph-facts .fact .fk,
html[lang="hi"] .hero-cue span,
html[lang="hi"] .proof-tags span,
html[lang="hi"] .work-card .wc-tags span,
html[lang="hi"] .field label,
html[lang="hi"] .form label,
html[lang="hi"] .insights-head .ih-t,
html[lang="hi"] .insight .in-meta,
html[lang="hi"] .article-hero .ah-cat,
html[lang="hi"] .article-hero .ah-idx,
html[lang="hi"] .row-item .r-sub,
html[lang="hi"] .row-item .r-tag,
html[lang="hi"] .team-card .tc-role,
html[lang="hi"] .cs-aside .ca-item .ck,
html[lang="hi"] .cs-sec .cs-k .ci,
html[lang="hi"] .prose h3,
html[lang="hi"] .prose .key h4,
html[lang="hi"] .related-wrap .rw-label,
html[lang="hi"] .related .rl-cat,
html[lang="hi"] .article-row .ar-meta,
html[lang="hi"] .panel .p-idx,
html[lang="hi"] .panel .p-note,
html[lang="hi"] .mega-item .mi-name,
html[lang="hi"] .mg-link .mgl-name,
html[lang="hi"] .eyebrow,
html[lang="hi"] .ch-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

/* Devanagari headings have no width axis and no case forms — strip the Latin
   display font's condensed 125% setting and the uppercase treatment so the
   aksharas render at their true proportions. */
html[lang="hi"] .hero-head,
html[lang="hi"] .ch-title,
html[lang="hi"] .display,
html[lang="hi"] .manifesto,
html[lang="hi"] .page-hero .ph-title,
html[lang="hi"] .contact-lead .cl-title,
html[lang="hi"] .article-hero h1,
html[lang="hi"] .proof-statement,
html[lang="hi"] .step .st-name,
html[lang="hi"] .row-item .r-name,
html[lang="hi"] .stack-card .sc-name,
html[lang="hi"] .gov-item .gi-name,
html[lang="hi"] .work-card .wc-title,
html[lang="hi"] .insight .in-title,
html[lang="hi"] .panel .p-name,
html[lang="hi"] .prose h2 {
  font-stretch: normal;
  font-variation-settings: normal;
  text-transform: none;
}

/* Inner-page hero H1 (.page-hero .ph-title) — the biggest offender: Latin scale
   is clamp(44px,7.6vw,124px). Bring it to a Devanagari-appropriate size, just
   under the homepage hero, with room to wrap. */
html[lang="hi"] .page-hero .ph-title {
  font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  max-width: 22ch;
}

/* Row-item names carry an inline font-size (clamp(22px,2.6vw,36px)); calm them
   for Devanagari with !important. */
html[lang="hi"] .row-item .r-name {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem) !important;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 700;
}

/* Devanagari heading hierarchy — compact, premium, clearly stepped down from
   the H1, sized for Noto Sans Devanagari rather than the Latin display scale. */
html[lang="hi"] .contact-lead .cl-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

html[lang="hi"] .article-hero h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

html[lang="hi"] .step .st-name {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

html[lang="hi"] .manifesto {
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.15rem);
  line-height: 1.4;
  letter-spacing: 0;
  max-width: 24ch;
}

html[lang="hi"] .proof-statement {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  line-height: 1.4;
  letter-spacing: 0;
}

html[lang="hi"] .stack-card .sc-name,
html[lang="hi"] .work-card .wc-title,
html[lang="hi"] .insight .in-title,
html[lang="hi"] .panel .p-name,
html[lang="hi"] .gov-item .gi-name,
html[lang="hi"] .prose h2 {
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0;
}

/* Large Devanagari headings need less breathing room than the Latin display
   type they replace — tighten the hero and section-head gaps to match. */
html[lang="hi"] .ch-head {
  margin-bottom: clamp(28px, 4vw, 56px);
}

html[lang="hi"] .hero-foot {
  margin-top: clamp(24px, 3vw, 44px);
}

html[lang="hi"] .hero-inner {
  padding-bottom: clamp(36px, 5vh, 72px);
}

html[lang="hi"] .page-hero {
  padding-top: clamp(116px, 15vh, 168px);
  padding-bottom: clamp(40px, 6vh, 72px);
}

html[lang="hi"] .page-hero .ph-lead {
  margin-top: clamp(20px, 3vw, 32px);
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--amber); color: var(--ink); }

/* ---- Display type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---- Mono utility layer (indices, eyebrows, metrics) ---- */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.chapter { position: relative; padding-block: clamp(80px, 12vh, 160px); }
.chapter--dark  { background: var(--ink);   color: var(--paper); }
.chapter--light { background: var(--paper); color: var(--ink); }
/* The chapter directly before a CTA band already gets breathing room from
   the CTA's own padding-top — trim the redundant half of that combined gap. */
.chapter:has(+ .cta-band) { padding-bottom: clamp(48px, 6vh, 96px); }

/* Chapter header block */
.ch-head { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-bottom: clamp(40px, 6vw, 88px); }
.page-solutions .ch-head { margin-bottom: clamp(12px, 2vw, 24px); }
.ch-meta { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.ch-index {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; color: var(--amber);
}
.ch-rule { height: 1px; flex: 1 1 60px; min-width: 40px; background: currentColor; opacity: 0.18; align-self: center; }
.ch-eyebrow { color: var(--mist); }
.chapter--light .ch-eyebrow { color: var(--graphite); }
.ch-title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase; line-height: 0.94; letter-spacing: -0.02em;
  font-size: clamp(36px, 6vw, 92px); max-width: 16ch;
}

/* ============================================================
   PRELOADER  (hidden by default; JS adds .is-loading to <body>)
   ============================================================ */
#preloader { display: none; }
body.is-loading { overflow: hidden; }
body.is-loading #preloader {
  display: flex; position: fixed; inset: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  flex-direction: column; justify-content: flex-end;
  padding: var(--gutter);
  transition: transform 0.9s var(--ease), opacity 0.6s ease;
}
#preloader.is-done { transform: translateY(-101%); }
.pl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.pl-count {
  font-family: var(--font-display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: clamp(80px, 22vw, 300px); line-height: 0.8; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pl-count sup { font-size: 0.28em; vertical-align: super; color: var(--amber); font-family: var(--font-mono); }
.pl-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--mist); text-transform: uppercase; padding-bottom: 0.8em; text-align: right; }
.pl-bar { height: 2px; width: 100%; background: var(--ink-line); margin-top: var(--s5); position: relative; overflow: hidden; }
.pl-bar i { position: absolute; inset: 0 100% 0 0; background: var(--amber); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: clamp(32px, 4vw, 48px);
  padding: 18px var(--gutter);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--ink-line);
  padding-block: 12px;
}
.nav.on-light { color: var(--ink); }
.nav.on-light.is-stuck { background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom-color: rgba(21,23,28,0.12); }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; max-width: none; }
.brand-logo--dark { display: none; }
.nav.on-light .brand-logo--light { display: none; }
.nav.on-light .brand-logo--dark { display: block; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-link {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  position: relative; padding-block: 6px; text-transform: uppercase; color: inherit; opacity: 0.82;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap; flex-shrink: 1; min-width: min-content;
}
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

/* Language switcher in nav */
.lang-switcher { flex-shrink: 0; }
/* Theme follows the navbar: dark by default (styles injected by server/i18n.js), light while the nav is over a light chapter (.nav.on-light) */
.nav.on-light .lang-switcher__trigger { border-color: rgba(21,23,28,0.22); color: var(--ink); }
.nav.on-light .lang-switcher__trigger:hover,
.nav.on-light .lang-switcher.is-open .lang-switcher__trigger { border-color: rgba(21,23,28,0.5); }
.nav.on-light .lang-switcher__menu { background: var(--paper); border-color: rgba(21,23,28,0.16); box-shadow: 0 8px 24px rgba(21,23,28,0.14); }
.nav.on-light .lang-switcher__item { color: var(--ink); border-bottom-color: rgba(21,23,28,0.1); }
.nav.on-light .lang-switcher__item:hover { background: rgba(21,23,28,0.06); }
.nav.on-light .lang-switcher__item.is-current { background: rgba(21,23,28,0.1); }

.nav-cta {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); padding: 11px 18px; border-radius: 2px; font-weight: 600;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
  white-space: nowrap; margin-left: auto; flex-shrink: 0; order: 2;
}
.nav-cta:hover { transform: translateY(-2px); background: #23DDA8; }

/* Spanish/French desktop header — compact only to fit longer translations */
@media (min-width: 1025px) {
  html[lang="es"] .nav,
  html[lang="fr"] .nav {
    gap: clamp(20px, 2.4vw, 30px);
  }

  html[lang="es"] .nav-links,
  html[lang="fr"] .nav-links {
    gap: clamp(12px, 1.5vw, 24px);
  }

  html[lang="es"] .nav-link,
  html[lang="fr"] .nav-link {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  html[lang="es"] .nav-cta,
  html[lang="fr"] .nav-cta {
    font-size: 12px;
    padding-inline: 14px;
  }
}

.nav-burger { display: none; }

/* ---- Mega menu ---- */
.has-mega { position: relative; }
.mega {
  position: fixed; left: 0; right: 0; top: 0;
  background: var(--ink-raise); color: var(--paper);
  border-bottom: 1px solid var(--ink-line);
  padding: clamp(76px, 9vh, 96px) var(--gutter) clamp(28px, 4vh, 48px);
  display: grid; grid-template-columns: 0.6fr 2fr; gap: clamp(28px, 4vw, var(--s8));
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.6s var(--ease), opacity 0.4s ease;
  z-index: 150;
  max-height: 100dvh; overflow-y: auto; align-content: start;
}
.mega.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mega-aside { border-right: 1px solid var(--ink-line); padding-right: var(--s7); }
.mega-aside h4 { font-family: var(--font-display); font-stretch:125%; font-variation-settings:"wdth" 125; text-transform: uppercase; font-size: 28px; line-height: 0.96; margin-bottom: var(--s4); }
.mega-aside p { color: var(--mist); font-size: 15px; max-width: 26ch; }
.mega-all { display: inline-block; margin-top: var(--s5); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.mega-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega-strip { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--s5); align-items: center; border-top: 1px solid var(--ink-line); margin-top: var(--s4); padding-top: var(--s5); }
.mega-strip .ms-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist-dim); padding-right: var(--s5); }
.mega-strip a { display: block; padding: 10px 12px; margin: -10px 0; border-radius: 2px; transition: background 0.3s var(--ease); }
.mega-strip a:hover { background: rgba(255,255,255,0.04); }
.mega-strip .ms-name { font-family: var(--font-display); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.mega-strip .ms-name .arr { color: var(--amber); }
.mega-strip .ms-desc { color: var(--mist); font-size: 13px; margin-top: 3px; }
/* Products / Solutions split footer in mega-menu */
.mega-foot { grid-column: 1 / -1; display: flex; gap: clamp(32px,5vw,80px); border-top: 1px solid var(--ink-line); margin-top: var(--s4); padding-top: var(--s5); flex-wrap: wrap; }
.mega-group { flex: 1; min-width: 220px; }
.mega-group.is-solutions { flex: 2.1; }
.mg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist-dim); display: block; margin-bottom: var(--s4); }
.mg-items { display: grid; gap: 4px; }
.mega-group.is-solutions .mg-items { grid-template-columns: 1fr 1fr; gap: var(--s5); }
.mg-link { display: block; padding: 9px 0; }
.mg-link .mgl-name { font-family: var(--font-display); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 700; text-transform: uppercase; font-size: 16px; }
.mg-link .mgl-name .arr { color: var(--amber); transition: transform 0.35s var(--ease); display: inline-block; }
.mg-link:hover .mgl-name { color: var(--amber); }
.mg-link:hover .mgl-name .arr { transform: translateX(5px); }
.mg-link .mgl-desc { color: var(--mist); font-size: 13px; margin-top: 4px; max-width: 38ch; }
@media (max-width: 1024px) {
  .mega-foot { gap: var(--s5); }
  .mega-group.is-solutions .mg-items { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 1024px) {
  .mega-strip { grid-template-columns: 1fr; gap: var(--s4); }
  .mega-strip .ms-label { padding: 0; }
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.mega-item { display: block; background: var(--ink-raise); padding: clamp(16px,2vh,24px) var(--s5) clamp(20px,2.6vh,28px); transition: background 0.3s var(--ease); }
.mega-item:hover { background: #232730; }
.mega-item .mi-idx { font-family: var(--font-mono); font-size: 12px; color: var(--amber); letter-spacing: 0.1em; }
.mega-item .mi-name { font-family: var(--font-display); font-stretch:115%; font-variation-settings:"wdth" 115; text-transform: uppercase; font-weight: 700; font-size: 20px; margin-top: 6px; }
.mega-item .mi-desc { color: var(--mist); font-size: 14px; margin-top: 6px; max-width: 32ch; }
.mega-item .mi-arrow { color: var(--amber); font-family: var(--font-mono); margin-top: 10px; display: inline-block; transform: translateX(0); transition: transform 0.35s var(--ease); }
.mega-item:hover .mi-arrow { transform: translateX(6px); }
.mega-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 140; }
.mega-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Products mega-menu only: tighter vertical rhythm so AI PRODUCTS + the
   More products / Platform & capabilities footer fit without scrolling. */
#productsMega { row-gap: clamp(8px, 1vh, 16px); }
#productsMega .mega-foot { margin-top: var(--s1); padding-top: var(--s2); }
#productsMega .mega-group .mg-label { margin-bottom: var(--s3); }

/* Solutions mega-menu: match the Products dropdown's tighter rhythm between
   the aside/industry row and the By team / By business outcome footer.
   The divider line itself (mega-foot's border-top) is untouched. */
/* #solutionsMega { row-gap: clamp(20px, 3vw, 36px); } */
#solutionsMega {  row-gap: clamp(8px, 1vh, 16px); }
#solutionsMega .mega-foot { margin-top: var(--s2); padding-top: var(--s3); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  padding: 16px 24px; border-radius: 2px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn .arr { transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { transform: translateY(-2px); background: #23DDA8; }
.btn--ghost { border: 1px solid currentColor; color: inherit; }
.btn--ghost:hover { background: currentColor; }
.chapter--dark .btn--ghost:hover { color: var(--ink); }
.chapter--light .btn--ghost:hover { color: var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #101216; color: var(--paper); padding-block: var(--s8) var(--s6); border-top: 1px solid var(--ink-line); }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 0.95fr 0.7fr 0.7fr 1fr; gap: var(--s6); padding-bottom: var(--s8); border-bottom: 1px solid var(--ink-line); }
.footer-brand .brand { font-size: 30px; margin-bottom: var(--s4); }
.footer-logo img { height: 40px; width: auto; display: block; margin-bottom: var(--s5); }
.footer-brand p { color: var(--mist); max-width: 34ch; font-size: 15px; }
.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--s5); }
.footer-social a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); transition: color 0.3s; }
.footer-social a:hover { color: var(--amber); }
.footer-col h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: var(--s4); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 15px; color: var(--paper); opacity: 0.82; transition: color 0.3s, opacity 0.3s; }
.footer-col a:hover { color: var(--amber); opacity: 1; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-top: var(--s6); flex-wrap: wrap; }
.footer-bottom p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--mist-dim); }
.footer-bottom .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom .footer-legal a { color: inherit; transition: color 0.3s; }
.footer-bottom .footer-legal a:hover { color: var(--amber); }

/* ============================================================
   Reduced motion — the brand owner has opted into full motion for all
   visitors, so we no longer suppress transitions/animations here. The
   preloader/overflow safeguards are retained.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.is-loading #preloader { display: none !important; }
  body.is-loading { overflow: auto !important; }
}

/* ============================================================
   RTL Support (Arabic)
   ============================================================ */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .nav-link::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

[dir="rtl"] .nav-cta {
  margin-left: 0;
  margin-right: auto;
  order: 1;
}

[dir="rtl"] .brand {
  order: 2;
}

[dir="rtl"] .lang-switcher__menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .mega {
  grid-template-columns: 2fr 0.6fr;
  direction: rtl;
}

[dir="rtl"] .mega-aside {
  border-right: none;
  border-left: 1px solid var(--ink-line);
  padding-right: 0;
  padding-left: var(--s7);
}

[dir="rtl"] .mega-strip {
  grid-template-columns: 1fr 1fr 1fr auto;
}

[dir="rtl"] .mega-strip .ms-label {
  padding-right: 0;
  padding-left: var(--s5);
}

[dir="rtl"] .mg-link:hover .mgl-name .arr {
  transform: translateX(-5px);
}

[dir="rtl"] .btn .arr {
  transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .arr {
  transform: scaleX(-1) translateX(-5px);
}

[dir="rtl"] .mg-link .mgl-name .arr,
[dir="rtl"] .mega-item .mi-arrow {
  transform: scaleX(-1);
  display: inline-block;
}

[dir="rtl"] .mega-item:hover .mi-arrow {
  transform: scaleX(-1) translateX(-6px);
}

[dir="rtl"] .nav-link:hover::after,
[dir="rtl"] .nav-link[aria-expanded="true"]::after {
  transform: scaleX(1);
}

[dir="rtl"] .ch-meta {
  flex-direction: row-reverse;
}

[dir="rtl"] .ch-rule {
  order: -1;
}

[dir="rtl"] .hero-eyebrow {
  text-align: right;
}

[dir="rtl"] .ch-title {
  text-align: right;
}

[dir="rtl"] .mega-foot {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-top {
  grid-template-columns: 1fr 0.7fr 0.7fr 0.95fr 1fr 1.7fr;
}

[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-social {
  flex-direction: row-reverse;
}

[dir="rtl"] button {
  text-align: right;
}

[dir="rtl"] .wrap {
  padding-inline: var(--gutter);
}

/* Ensure RTL text alignment for paragraphs and lists */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] .eyebrow,
[dir="rtl"] .mono {
  text-align: right;
}

/* Flex and grid adjustments for RTL */
[dir="rtl"] .pl-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .pl-label {
  text-align: left;
}

[dir="rtl"] .mega-grid {
  direction: rtl;
}

/* Language switcher RTL-aware positioning */
@media (max-width: 768px) {
  [dir="rtl"] .lang-switcher__menu {
    right: auto;
    left: 0;
  }
}

/* Ensure Arabic font support across all text elements */
[dir="rtl"] body,
[dir="rtl"] html {
  direction: rtl;
  text-align: right;
}

/* ============================================================
   Arabic typography (html[lang="ar"])
   Mirrors the html[lang="hi"] approach: swap in an Arabic
   webfont, strip Latin uppercase/tracking/width tricks, and
   relax line-heights so Arabic sets comfortably. Scoped to
   lang="ar" only — no effect on en/hi/es/fr.
   ============================================================ */
html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
  text-wrap: pretty;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] .hero-head,
html[lang="ar"] .ch-title,
html[lang="ar"] .manifesto,
html[lang="ar"] .contact-lead .cl-title,
html[lang="ar"] .proof-statement,
html[lang="ar"] .insight .in-title,
html[lang="ar"] .stack-card .sc-name,
html[lang="ar"] .gov-item .gi-name,
html[lang="ar"] .step .st-name,
html[lang="ar"] .article-hero h1,
html[lang="ar"] .prose h2,
html[lang="ar"] .prose h3,
html[lang="ar"] .work-card .wc-title,
html[lang="ar"] .team-card .tc-name,
html[lang="ar"] .panel .p-name,
html[lang="ar"] .nav-link,
html[lang="ar"] .nav-cta,
html[lang="ar"] .mega-item,
html[lang="ar"] .mg-link,
html[lang="ar"] .mm-link,
html[lang="ar"] .mm-sub a,
html[lang="ar"] .mega-all,
html[lang="ar"] .btn,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .eyebrow,
html[lang="ar"] .mono,
html[lang="ar"] .display {
  font-family: "Noto Sans Arabic", "Archivo", "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-stretch: normal;
  font-variation-settings: normal;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] .hero-support,
html[lang="ar"] .pg-lead,
html[lang="ar"] .ph-lead,
html[lang="ar"] .sc-out,
html[lang="ar"] .tc-bio,
html[lang="ar"] .mgl-desc,
html[lang="ar"] .mi-desc,
html[lang="ar"] .mm-foot,
html[lang="ar"] .creds-track,
html[lang="ar"] .hero-cue,
html[lang="ar"] .pa-v,
html[lang="ar"] .lead,
html[lang="ar"] .hot,
html[lang="ar"] .dim,
html[lang="ar"] .prose p,
html[lang="ar"] .prose li {
  font-family: "Noto Sans Arabic", "Hanken Grotesk", "Segoe UI", sans-serif;
  line-height: 1.9;
  letter-spacing: 0;
}

html[lang="ar"] .hero-head {
  font-size: clamp(2.4rem, 6vw, 6rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  max-width: 20ch;
}

html[lang="ar"] .ch-title {
  font-size: clamp(1.9rem, 3.6vw, 4.2rem);
  line-height: 1.3;
  letter-spacing: 0;
}

html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .eyebrow,
html[lang="ar"] .mono,
html[lang="ar"] .ch-eyebrow,
html[lang="ar"] .nav-link,
html[lang="ar"] .nav-cta,
html[lang="ar"] .btn,
html[lang="ar"] .mega-item .mi-idx,
html[lang="ar"] .mg-label,
html[lang="ar"] .mm-idx {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ar"] .display {
  text-transform: none;
  letter-spacing: 0;
  font-stretch: normal;
  font-variation-settings: normal;
  line-height: 1.2;
}

html[lang="ar"] .btn,
html[lang="ar"] .nav-cta,
html[lang="ar"] .mega-all,
html[lang="ar"] .mg-link,
html[lang="ar"] .mm-link {
  font-size: 0.95rem;
  line-height: 1.4;
}

html[lang="ar"] .hero-support b,
html[lang="ar"] .hero-head .accent {
  letter-spacing: 0;
}

/* directional arrows/glyphs inside Arabic UI: keep the mirrored
   transform that [dir="rtl"] already applies, just ensure they
   are inline so the flip renders */
html[lang="ar"] .arr,
html[lang="ar"] .mi-arrow {
  display: inline-block;
}

/* Center nav-links in Arabic, matching the Hindi treatment */
html[lang="ar"] .nav-links {
  margin: 0 auto;
  flex: 0 1 auto;
}

/* The contact-form honeypot is positioned at left:-9999px inline. In RTL that
   negative offset extends the scrollable area and creates page-wide horizontal
   overflow. Re-hide it with the standard visually-hidden clip so it stays in
   the DOM (and submittable) without affecting layout. */
html[lang="ar"] input[name="company_url"] {
  position: absolute !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The [dir="rtl"] .mega / .footer-top grid overrides in base.css are not
   media-scoped, so they out-specify the responsive collapse in chapters.css and
   Arabic keeps the desktop multi-column mega menu and footer at every width —
   which forces horizontal page overflow below ~412px. Re-assert the tablet /
   mobile layout for Arabic only, matching what the base stylesheet already does
   for LTR locales. */
@media (max-width: 1024px) {
  html[lang="ar"] .mega { grid-template-columns: 1fr; }
  html[lang="ar"] .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  html[lang="ar"] .footer-top { grid-template-columns: 1fr; }
}

/* ============================================================
   Localized mobile-menu language selector
   (markup is injected by server/i18n.js on localized pages only —
   English pages never carry .mm-lang, so plain selectors are safe)
   ============================================================ */
.mm-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s4);
}
.mm-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--paper);
  opacity: 0.72;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.mm-lang__item:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.45);
}
.mm-lang__item.is-current {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
[dir="rtl"] .mm-lang {
  direction: rtl;
}

/* Below ~430px, longer translated strings overflow their box in a few places:
   section-header eyebrows ("Pourquoi — Le problème") and the reused .nav-link
   CTA ("Todos los artículos →", white-space:nowrap) do not wrap in .ch-head /
   .insights-head; and long compound words ("responsabilidad", "preocupaciones")
   do not break inside the display headings. Fix the presentation for the
   non-English locales only — English is verified unaffected and untouched. */
@media (max-width: 560px) {
  html[lang="hi"] .ch-head,
  html[lang="es"] .ch-head,
  html[lang="fr"] .ch-head,
  html[lang="ar"] .ch-head,
  html[lang="hi"] .cta-band,
  html[lang="es"] .cta-band,
  html[lang="fr"] .cta-band,
  html[lang="ar"] .cta-band {
    overflow-x: clip;
  }
  html[lang="hi"] .insights-head,
  html[lang="es"] .insights-head,
  html[lang="fr"] .insights-head,
  html[lang="ar"] .insights-head {
    flex-wrap: wrap;
  }
  html[lang="hi"] .hero-head, html[lang="es"] .hero-head, html[lang="fr"] .hero-head, html[lang="ar"] .hero-head,
  html[lang="hi"] .ph-title, html[lang="es"] .ph-title, html[lang="fr"] .ph-title, html[lang="ar"] .ph-title,
  html[lang="hi"] .ch-title, html[lang="es"] .ch-title, html[lang="fr"] .ch-title, html[lang="ar"] .ch-title,
  html[lang="hi"] .cb-title, html[lang="es"] .cb-title, html[lang="fr"] .cb-title, html[lang="ar"] .cb-title,
  html[lang="hi"] .cl-title, html[lang="es"] .cl-title, html[lang="fr"] .cl-title, html[lang="ar"] .cl-title,
  html[lang="hi"] .st-name, html[lang="es"] .st-name, html[lang="fr"] .st-name, html[lang="ar"] .st-name {
    overflow-wrap: break-word;
  }
}