/* ============================================================================
   DCA — theme.css  (BUILD ARTIFACT — production bundle, do not edit by hand)
   ----------------------------------------------------------------------------
   Flattened concatenation of the ITCSS source layers (tokens → base →
   components) into ONE file to remove the @import request waterfall on the
   critical path. Edit the SOURCE layers, then re-bundle. The generic utility
   layer was removed: Tailwind (tw.css) already provides sr-only/line-clamp/etc.
   ============================================================================ */
/* ==== tokens.css ==== */
/* ============================================================================
   DCA — Design Tokens (single source of truth for the hand-written CSS)
   ----------------------------------------------------------------------------
   Two-tier token system:
     1. PRIMITIVES  — raw, context-free values (the palette, the scales).
     2. SEMANTIC    — purpose-named tokens that REFERENCE primitives. Components
                      only ever consume semantic tokens, so a brand change is a
                      one-line edit at the primitive layer.

   Brand identity is LOCKED: editorial / "exaggerated minimalism" — sharp 0-radius
   corners, hard offset shadows, Archivo Narrow display + Work Sans body + Space
   Mono labels, near-black ink with a single DCA-red accent. These tokens
   FORMALISE that identity; they do not change any rendered value.

   WordPress migration: the semantic tokens map 1:1 to Gutenberg theme.json
   (settings.color.palette / typography / spacing) and mirror the Tailwind keys
   in assets/js/tailwind.config.js. See doc/WORDPRESS-MIGRATION.md §2.
   ============================================================================ */
:root {

  /* ========================================================================
     1 · PRIMITIVES
     ===================================================================== */

  /* ---- Colour ramp — Neutral / ink --------------------------------------- */
  --dca-c-black:        #000000;
  --dca-c-ink-900:      #0a0a0a;
  --dca-c-ink-800:      #1a1c1c;
  --dca-c-grey-600:     #525252;
  --dca-c-grey-500:     #858383;
  --dca-c-grey-300:     #d4d4d4;
  --dca-c-surface-200:  #eeeeee;
  --dca-c-surface-50:   #f9f9f9;
  --dca-c-white:        #ffffff;

  /* ---- Colour ramp — DCA red (the single accent) ------------------------- */
  --dca-c-red-800:      #7a0e15;   /* pressed / shadow            */
  --dca-c-red-600:      #b61722;   /* accent (brand red)          */
  --dca-c-red-500:      #da3437;   /* bright hover container      */

  /* ---- Colour ramp — Alpha (translucent ink + accent) -------------------- */
  --dca-c-black-a02:    rgba(0, 0, 0, 0.02);   /* monogram watermark   */
  --dca-c-black-a06:    rgba(0, 0, 0, 0.06);   /* resting card shadow  */
  --dca-c-black-a12:    rgba(0, 0, 0, 0.12);   /* hover shadow / focus */
  --dca-c-red-a15:      rgba(182, 23, 34, 0.15); /* error focus halo   */

  /* ---- Type families ----------------------------------------------------- */
  --dca-font-display: 'Archivo Narrow', 'Archivo Narrow Fallback', sans-serif;  /* headings / hero    */
  --dca-font-body:    'Work Sans', 'Work Sans Fallback', sans-serif;       /* body + UI          */
  --dca-font-mono:    'Space Mono', 'Space Mono Fallback', monospace;        /* labels / metadata  */

  /* ---- Type scale (px) — the brand modular scale ------------------------- */
  --dca-fs-display: 80px;   /* hero            */
  --dca-fs-h1:      56px;   /* headline-lg     */
  --dca-fs-h2:      38px;   /* headline-md     */
  --dca-fs-h3:      24px;   /* sub-section     */
  --dca-fs-xl:      20px;   /* large body / lede (also article h3) */
  --dca-fs-lg:      19px;   /* prose summary   */
  --dca-fs-md:      17px;   /* article prose   */
  --dca-fs-base:    16px;   /* body            */
  --dca-fs-sm:      15px;   /* small body      */
  --dca-fs-label:   14px;   /* UI label / mono */
  --dca-fs-xs:      13px;   /* fine label      */
  --dca-fs-2xs:     11px;   /* overline        */
  --dca-fs-3xs:     10px;   /* micro label     */

  /* ---- Line heights ------------------------------------------------------ */
  --dca-lh-tight:   1.1;
  --dca-lh-snug:    1.3;
  --dca-lh-normal:  1.5;
  --dca-lh-relaxed: 1.7;
  --dca-lh-loose:   1.75;

  /* ---- Letter spacing ---------------------------------------------------- */
  --dca-tracking-tight:  -0.02em;
  --dca-tracking-label:   0.04em;
  --dca-tracking-button:  0.06em;
  --dca-tracking-wide:    0.08em;
  --dca-tracking-overline:0.12em;

  /* ---- Font weights ------------------------------------------------------ */
  --dca-fw-regular: 400;
  --dca-fw-bold:    700;
  --dca-fw-black:   900;

  /* ---- Spacing — 8-pt grid (index = ×4px; even steps = 8-pt aligned) ----- */
  --dca-space-0:   0;
  --dca-space-1:   4px;
  --dca-space-2:   8px;
  --dca-space-3:   12px;
  --dca-space-4:   16px;
  --dca-space-5:   20px;
  --dca-space-6:   24px;
  --dca-space-8:   32px;
  --dca-space-10:  40px;
  --dca-space-12:  48px;
  --dca-space-14:  56px;
  --dca-space-16:  64px;
  --dca-space-20:  80px;
  --dca-space-24:  96px;
  /* Optical sub-steps used inside dense components (kept off-grid on purpose). */
  --dca-space-2-5: 10px;
  --dca-space-3-5: 14px;
  --dca-space-4-5: 18px;
  --dca-space-5-5: 22px;
  --dca-space-6-5: 26px;

  /* ---- Radius — brand is intentionally sharp ----------------------------- */
  --dca-radius-none: 0;
  --dca-radius-full: 9999px;

  /* ---- Border widths ----------------------------------------------------- */
  --dca-border-hairline: 1px;   /* dividers / underlines */
  --dca-border-width:    2px;   /* brutalist frame       */
  --dca-border-accent:   4px;   /* left-rule emphasis    */

  /* ---- Elevation — the editorial hard-offset shadow scale ---------------- */
  --dca-shadow-card:        0 1px 3px var(--dca-c-black-a06);
  --dca-shadow-card-hover:  0 14px 34px var(--dca-c-black-a12);
  --dca-shadow-accent:      5px 5px 0 0 var(--dca-c-red-600);
  --dca-shadow-accent-press:2px 2px 0 0 var(--dca-c-red-800);
  --dca-shadow-editorial:     8px 8px 0 0 var(--dca-c-black);
  --dca-shadow-editorial-red: 6px 6px 0 0 var(--dca-c-red-600);
  --dca-shadow-editorial-red-press: 3px 3px 0 0 var(--dca-c-red-800);

  /* ---- Z-index scale ----------------------------------------------------- */
  --dca-z-base:      0;     /* monogram watermark        */
  --dca-z-raised:    10;
  --dca-z-dropdown:  50;    /* nav mega-menu / lang menu */
  --dca-z-header:    50;    /* sticky header             */
  --dca-z-skip-link: 100;   /* skip-to-content           */

  /* ---- Motion — durations + easings -------------------------------------- */
  --dca-duration-fast:   150ms;
  --dca-duration-base:   200ms;
  --dca-duration-slow:   250ms;
  --dca-duration-slower: 300ms;
  --dca-duration-panel:  350ms;
  --dca-duration-nav:    500ms;
  --dca-ease-standard: ease;
  --dca-ease-linear:   linear;
  --dca-ease-out:      cubic-bezier(.22, .61, .36, 1); /* easeOutCubic */

  /* ---- Layout ------------------------------------------------------------ */
  --dca-container-max: 1440px;
  /* Breakpoints (reference only — CSS media queries can't read custom props).
     sm 640 · md 768 · lg 1024 · xl 1280 — md/lg are the project's real cuts.   */
  --dca-bp-sm: 640px;
  --dca-bp-md: 768px;
  --dca-bp-lg: 1024px;
  --dca-bp-xl: 1280px;


  /* ========================================================================
     2 · SEMANTIC ALIASES  (components consume only these)
     ===================================================================== */

  /* ---- Colour: brand ----------------------------------------------------- */
  --dca-color-primary:             var(--dca-c-black);      /* nav / footer / ink frame */
  --dca-color-ink:                 var(--dca-c-ink-900);    /* button + border ink      */
  --dca-color-ink-strong:          var(--dca-c-ink-800);    /* body text on light       */
  --dca-color-secondary:           var(--dca-c-red-600);    /* DCA red accent           */
  --dca-color-secondary-strong:    var(--dca-c-red-800);    /* red pressed / shadow     */
  --dca-color-secondary-bright:    var(--dca-c-red-500);    /* red hover container      */
  --dca-color-on-primary:          var(--dca-c-white);      /* on dark                  */
  --dca-color-on-primary-container:var(--dca-c-grey-500);   /* muted on dark            */

  /* ---- Colour: surfaces -------------------------------------------------- */
  --dca-color-background:        var(--dca-c-surface-50);
  --dca-color-surface:           var(--dca-c-surface-50);
  --dca-color-surface-container: var(--dca-c-surface-200);
  --dca-color-white:             var(--dca-c-white);

  /* ---- Colour: text ------------------------------------------------------ */
  --dca-color-text:          var(--dca-c-ink-800);
  --dca-color-text-muted:    var(--dca-c-grey-600);
  --dca-color-border-subtle: var(--dca-c-grey-300);

  /* ---- Spacing aliases (used by layout + carried for theme.json) --------- */
  --dca-space-unit:           var(--dca-space-2);   /* 8px  base unit         */
  --dca-space-gutter:         var(--dca-space-6);   /* 24px grid gutter       */
  --dca-space-margin-mobile:  var(--dca-space-6);   /* 24px page margin (sm)  */
  --dca-space-margin-desktop: var(--dca-space-16);  /* 64px page margin (lg)  */

  /* ---- Motion aliases (duration + easing, ready for `transition`) -------- */
  --dca-transition-fast: var(--dca-duration-fast) var(--dca-ease-standard); /* .15s ease */
  --dca-transition-base: var(--dca-duration-base) var(--dca-ease-standard); /* .2s  ease */
  --dca-ease-nav: var(--dca-ease-out);  /* legacy alias for the sticky-nav slide */
}

/* ==== base.css ==== */
/* ============================================================================
   DCA — Base layer (resets, document defaults, accessibility baseline)
   ----------------------------------------------------------------------------
   ITCSS layer: Elements + a11y. No components here — only bare element
   defaults and the site-wide accessibility primitives that every page relies
   on. Consumes design tokens from tokens.css.

   WordPress: enqueue after tokens.css; equivalent to the theme's global
   element styles (theme.json `styles.elements` + a small base stylesheet).
   ============================================================================ */

/* ---- Document --------------------------------------------------------- */
body {
  background: var(--dca-color-background);
  color: var(--dca-color-text);
  font-family: var(--dca-font-body);
  overflow-x: hidden;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Oversized brand monogram watermark (decorative, non-interactive) */
.d-monogram {
  position: fixed;
  top: 10%;
  left: -5%;
  font-size: 80rem;
  line-height: 1;
  font-weight: var(--dca-fw-black);
  color: var(--dca-c-black-a02);
  pointer-events: none;
  z-index: var(--dca-z-base);
  font-family: var(--dca-font-display);
}

/* ---- Accessibility baseline ------------------------------------------- */
/* Skip link — visible only on keyboard focus, jumps past the nav (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: var(--dca-space-2);
  top: -48px;
  z-index: var(--dca-z-skip-link);
  background: var(--dca-color-secondary);
  color: var(--dca-color-white);
  padding: var(--dca-space-2-5) var(--dca-space-4-5);
  font-family: var(--dca-font-body);
  font-weight: var(--dca-fw-bold);
  font-size: var(--dca-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--dca-tracking-button);
  transition: top var(--dca-transition-fast);
}
.skip-link:focus { top: var(--dca-space-2); }

/* Consistent keyboard focus ring on every interactive element (WCAG 2.4.7).
   Single source for focus styling — components must NOT redefine this. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: var(--dca-border-width) solid var(--dca-color-secondary);
  outline-offset: 3px;
}

/* ---- Reduced motion (WCAG 2.3.3) -------------------------------------- */
/* Calms hover/scroll transitions and one-shot animations when the user (or OS,
   e.g. Windows "Animation effects: Off") requests reduced motion. The partner
   marquee is deliberately EXEMPT (:not(.marquee)) — it is a core brand element
   the site keeps moving; the partner names are also exposed as text via the
   marquee's aria-label, so no information is lost when motion is reduced.
   .js-nav (the sticky header) is exempt too so its hide/show slide stays
   smooth — both are deliberate, owner-chosen brand motions. */
@media (prefers-reduced-motion: reduce) {
  *:not(.marquee):not(.js-nav),
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ==== components.css ==== */
/* ============================================================================
   DCA — Component layer (reusable UI primitives)
   ----------------------------------------------------------------------------
   ITCSS layer: Components. Every reusable, page-agnostic component lives here
   as a single class contract that consumes ONLY semantic tokens (tokens.css).
   Page-specific one-offs live in a page stylesheet (e.g. contact.css) or as
   Tailwind utilities in the markup.

   Each block maps to a WordPress Template Part / Gutenberg Block — see
   doc/WORDPRESS-MIGRATION.md §3.
   ============================================================================ */

/* ---- Buttons ----------------------------------------------------------- */
/* Shared base for all button variants (single source for the button shape). */
.btn-primary,
.btn-ghost,
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  line-height: 1.25;
  padding: var(--dca-space-3) var(--dca-space-6);
  font-family: var(--dca-font-body);
  font-size: var(--dca-fs-label);
  font-weight: var(--dca-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dca-tracking-button);
  border: var(--dca-border-width) solid var(--dca-color-ink);
  transition: all var(--dca-transition-base);
  cursor: pointer;
}

/* Outline variant — .btn-ghost is a legacy alias of .btn-primary. */
.btn-primary,
.btn-ghost {
  background: transparent;
  color: var(--dca-color-ink);
}
.btn-primary:hover,
.btn-ghost:hover {
  background: var(--dca-color-secondary);
  border-color: var(--dca-color-secondary);
  color: var(--dca-color-white);
}

/* Solid accent variant — carries the offset shadow. */
.btn-accent {
  background: var(--dca-color-ink);
  color: var(--dca-color-white);
  box-shadow: var(--dca-shadow-accent);
}
.btn-accent:hover {
  background: var(--dca-color-secondary);
  border-color: var(--dca-color-secondary);
  box-shadow: var(--dca-shadow-accent-press);
}

/* ---- Editorial accents ------------------------------------------------- */
.editorial-shadow { box-shadow: var(--dca-shadow-editorial); }
.editorial-shadow-red {
  box-shadow: var(--dca-shadow-editorial-red);
  transition: box-shadow var(--dca-transition-base), transform var(--dca-transition-fast);
}
.editorial-shadow-red:hover {
  box-shadow: var(--dca-shadow-editorial-red-press);
  transform: translate(3px, 3px);
}

/* ---- FAQ accordion (button-driven; see assets/js/main.js) -------------- */
/* Focus ring is inherited from the global button:focus-visible rule in base.css. */
.faq-content { max-height: 0; overflow: hidden; transition: max-height var(--dca-duration-panel) var(--dca-ease-standard); }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-card { border: var(--dca-border-width) solid var(--dca-color-ink); transition: border-color var(--dca-transition-base); }
.faq-card:hover { border-color: var(--dca-color-secondary); }
.faq-card.open { border-color: var(--dca-color-secondary); }

/* ---- Mobile menu ------------------------------------------------------- */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ---- Scroll-to-top button (revealed by assets/js/main.js) -------------- */
/* Hidden until JS adds .is-visible past the first viewport. Uses visibility so
   it stays out of the tab order while hidden. Shares the .btn-accent language:
   ink square, red offset shadow, hover flips to red. */
.scroll-top {
  position: fixed;
  right: var(--dca-space-5);
  bottom: var(--dca-space-5);
  z-index: var(--dca-z-header);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--dca-color-ink);
  color: var(--dca-color-white);
  border: var(--dca-border-width) solid var(--dca-color-ink);
  box-shadow: var(--dca-shadow-accent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--dca-space-2));
  transition: opacity var(--dca-transition-base), visibility var(--dca-transition-base),
              transform var(--dca-transition-base), background var(--dca-transition-base),
              box-shadow var(--dca-transition-base);
}
.scroll-top .material-symbols-outlined { font-size: 24px; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover {
  background: var(--dca-color-secondary);
  border-color: var(--dca-color-secondary);
  box-shadow: var(--dca-shadow-accent-press);
}
@media (min-width: 768px) {
  .scroll-top { right: var(--dca-space-8); bottom: var(--dca-space-8); }
}

/* ---- Sticky nav: hide on scroll-down, reveal on scroll-up -------------- */
/* The .js-nav hook is added by assets/js/main.js so the transition only
   applies when JS is active (no-JS users keep a normal fixed header).
   easeOut gives a soft, decelerating slide rather than a rigid move. */
header.js-nav {
  transition: transform var(--dca-duration-nav) var(--dca-ease-out);
  will-change: transform;
}
header.js-nav.nav-hidden { transform: translateY(-100%); }

/* ---- Hero -------------------------------------------------------------- */
/* Home split-hero hugs its content with a modest floor (was forced to 100vh,
   which centred a tall column and left a large gap above the overline and
   clipped the CTAs). A 30rem floor is close to the English copy height, so the
   overline sits just under the section padding (no centred void above it) and
   the CTAs stay on one desktop view. Kept centred (not top-aligned) so the more
   compact CJK/Arabic copy is balanced rather than empty at the bottom. */
.hero-section { min-height: auto; }
@media (min-width: 768px) {
  .hero-section { min-height: min(calc(100vh - 5rem), 30rem); }
}

/* ---- Partner marquee (track duplicated by JS to exceed the viewport) --- */
.marquee-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--dca-c-black) 6%, var(--dca-c-black) 94%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--dca-c-black) 6%, var(--dca-c-black) 94%, transparent);
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 60s var(--dca-ease-linear) infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-set { display: flex; align-items: center; flex: 0 0 auto; }
.marquee-logo { display: flex; align-items: center; flex: 0 0 auto; padding: 0 2.5rem; }
@media (min-width: 768px) {
  .marquee-logo { padding: 0 4rem; }
}

/* ---- Legal pages (privacy / terms / disclaimer) ------------------------ */
.legal-content h2 {
  font-family: var(--dca-font-display);
  font-weight: var(--dca-fw-black);
  text-transform: uppercase;
  font-size: var(--dca-fs-h3);
  line-height: 1.2;
  margin-top: var(--dca-space-12);
  margin-bottom: var(--dca-space-4);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: var(--dca-space-4); color: var(--dca-color-text-muted); line-height: var(--dca-lh-relaxed); }
.legal-content ul { margin-bottom: var(--dca-space-4); padding-left: 0; list-style: none; }
.legal-content li {
  position: relative;
  padding-left: var(--dca-space-6);
  margin-bottom: var(--dca-space-2-5);
  color: var(--dca-color-text-muted);
  line-height: var(--dca-lh-relaxed);
}
.legal-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: var(--dca-color-secondary);
}
.legal-content a { color: var(--dca-color-secondary); border-bottom: var(--dca-border-hairline) solid var(--dca-color-secondary); }

/* ============================================================================
   RTL (Arabic) mirroring
   ----------------------------------------------------------------------------
   The design is authored LTR; Arabic pages only set dir="rtl" on <html>. These
   rules flip the direction-dependent bits that Tailwind utilities and CSS
   custom properties do not mirror on their own. (Previously missing — noted as
   the pending "RTL stylesheet" in the migration notes.)
   ============================================================================ */
/* The hard-offset "editorial" shadows point to the bottom-right in LTR. Flip
   their X so they fall bottom-left — the correct light direction once the
   card sits on the right of an RTL layout (fixes the heavy black slab that
   read as broken on the Arabic credibility case-summary panel). */
html[dir="rtl"] {
  --dca-shadow-accent:              -5px 5px 0 0 var(--dca-c-red-600);
  --dca-shadow-accent-press:        -2px 2px 0 0 var(--dca-c-red-800);
  --dca-shadow-editorial:           -8px 8px 0 0 var(--dca-c-black);
  --dca-shadow-editorial-red:       -6px 6px 0 0 var(--dca-c-red-600);
  --dca-shadow-editorial-red-press: -3px 3px 0 0 var(--dca-c-red-800);
}
/* Case-summary featured card: the "verified" watermark is pinned top-right in
   LTR (away from the tag row, which starts at the left). In RTL the tags start
   at the right, so mirror the badge to the top-left corner so it stops sitting
   on top of the first tag. */
html[dir="rtl"] .editorial-shadow > .absolute.top-0.right-0 { right: auto; left: 0; }
/* Legal pages: the custom list bullets are anchored on the left in LTR. */
html[dir="rtl"] .legal-content ul { padding-right: 0; }
html[dir="rtl"] .legal-content li { padding-left: 0; padding-right: var(--dca-space-6); }
html[dir="rtl"] .legal-content li::before { left: auto; right: 0; }

.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;}

/* Metric-matched fallback faces (computed via fontTools from the actual
   served woff2 files vs. local Arial/Courier New) so the fallback occupies
   the same line-box as the real webfont, eliminating the reflow that occurs
   when Work Sans / Archivo Narrow / Space Mono finish loading and swap in. */
@font-face{font-family:'Work Sans Fallback';font-style:normal;src:local('Arial');size-adjust:135.2496%;ascent-override:68.7618%;descent-override:17.9668%;line-gap-override:0%;}
@font-face{font-family:'Work Sans Fallback';font-style:italic;src:local('Arial');size-adjust:120.2973%;ascent-override:77.3084%;descent-override:20.1999%;line-gap-override:0%;}
@font-face{font-family:'Archivo Narrow Fallback';font-style:normal;src:local('Arial');size-adjust:106.4779%;ascent-override:97.2033%;descent-override:29.3019%;line-gap-override:0%;}
@font-face{font-family:'Space Mono Fallback';font-style:normal;src:local('Courier New');size-adjust:101.9834%;ascent-override:109.8218%;descent-override:35.3979%;line-gap-override:0%;}