/* -- Floating Action Button v2 (glow-pulse, 72/64px, badge) -- */
    /* Badge placeholder (hidden by default, for future AI-chat count) */
/* About page responsive — mobile only, desktop not touched */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*# sourceURL=global-styles-inline-css */
    
/*# sourceURL=uaeprop-interactions-inline-css */
/* Contact page: ITI phone flag selector dark-mode override */
    /* input.is-invalid highlight */

    /* Contact page responsive — mobile only */
@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
/* ───────────────────────────────────────────────────────────────────────────
   P-Investor Mandates — spec-faithful CSS
   Palette: ink var(--wp--preset--color--ink) · bg-light var(--wp--preset--color--bg-light) · cream var(--wp--preset--color--cream) · copper var(--wp--preset--color--accent)
   Fonts: Fraunces (display) · IBM Plex Sans (body) · JetBrains Mono (kicker)
   v2.6.9 fixes: INV-01/02/04/05/06/07/08/09/10/11
─────────────────────────────────────────────────────────────────────────── */

/* Reset + page shell */
*, *::before, *::after { box-sizing: border-box; }
body.page-template-page-investor { background: var(--wp--preset--color--bg-light); }
.inv-page { background: var(--wp--preset--color--bg-light); font-family: 'IBM Plex Sans', sans-serif; color: var(--wp--preset--color--ink); }

/* Typography utilities */
.inv-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(14,14,16,0.6); /* INV-04 fix: was 0.55 */
  display: block; margin-bottom: 0;
}
.inv-h1 {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 400; line-height: 1.1;
  color: var(--wp--preset--color--cream); margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1; /* INV-03 */
}
.inv-h2 {
  font-family: 'Fraunces', serif;
  font-size: 36px; /* INV-02 fix: was clamp(22px,2.5vw,32px) */
  font-weight: 400; line-height: 1.2;
  color: var(--wp--preset--color--ink); margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1; /* INV-03 */
}
.inv-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px; line-height: 1.65;
  color: rgba(14,14,16,0.85); margin: 0; /* INV-09 fix: was 0.82 */
}
.inv-body-sm {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px; line-height: 1.55;
  color: rgba(14,14,16,0.85); margin: 0; /* INV-06 fix: was 0.75 */
}
.inv-legal {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 13px; line-height: 1.55;
  color: rgba(14,14,16,0.6); margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1; /* INV-03 */
}
.inv-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}
.inv-accent-rule {
  width: 40px; height: 2px;
  background: var(--wp--preset--color--accent); border: none;
  margin: 8px 0 16px 0; flex-shrink: 0;
}

/* Gutter helper: 80px each side, max 1280px centred */
.inv-gutter {
  padding-left: 80px; padding-right: 80px;
}
.inv-inner {
  max-width: 1280px; margin: 0 auto; padding-left: 80px; padding-right: 80px;
}
/* 26.08 (Mikhail, live tablet screenshot): desktop 80px base + a <=960px
   mobile tier (24px) below, but nothing for 961-1439px — every real tablet
   width in that band (1024/1194/1366, iPad mini/11"/13" landscape) fell
   through to the 80px desktop value instead of the sitewide 48px
   tablet-canon (matches header/footer's 961-1439 tier). The page's
   breadcrumb needed no equivalent fix — it's a bare `.t2-crumb` (shared
   global.css component, already fixed sitewide: live-verified 48px at
   1024px before this rule was even added). */
@media (min-width: 961px) and (max-width: 1439px) {
  .inv-inner { padding-left: 48px; padding-right: 48px; }
}

/* ── SECTION 3: Hero ── */
.inv-hero {
  padding: 80px 0;
  background: var(--wp--preset--color--bg-dark);
}
.inv-hero__kicker { margin-bottom: 44px; }
.inv-hero .inv-kicker { color: rgba(247,237,217,0.5); }
.inv-hero__h1 { max-width: 1280px; margin-bottom: 52px; }
.inv-hero__lead {
  max-width: 1100px;
  font-size: 18px;
  color: rgba(247,237,217,0.8);
}

/* ── SECTION 4: Who this is for ── */
.inv-who {
  padding: 80px 0;
  background: #FFFFFF; /* INV-11 fix: was var(--wp--preset--color--bg-light) */
}
.inv-who__head { margin-bottom: 56px; }
.inv-who__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.inv-who__col {}
.inv-who__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; /* INV-05 fix: was 400 */
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); margin-bottom: 10px; display: block;
}

/* ── SECTION 5: Process ── */
.inv-process {
  padding: 80px 0;
  background: #FFFFFF;
}
.inv-process__head { margin-bottom: 56px; }
.inv-process .inv-accent-rule { background: rgba(14,14,16,0.2); }
.inv-process__steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.inv-process__step {}
.inv-process__num {
  font-family: 'Fraunces', serif;
  font-size: 36px; font-weight: 300;
  line-height: 1; color: var(--wp--preset--color--accent);
  margin-bottom: 12px; display: block;
  font-variation-settings: "SOFT" 0, "WONK" 1; /* INV-03 */
}

/* ── SECTION 6: Sample mandates ── */
.inv-mandates {
  padding: 80px 0;
  background: var(--wp--preset--color--bg-light);
}
.inv-mandates__head { margin-bottom: 56px; }
.inv-mandates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.inv-mandate-card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 28px 24px;
  background: #FFFFFF;
}
.inv-mandate-card__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; /* INV-07 fix: was 400 */
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); margin-bottom: 24px; display: block;
}
.inv-mandate-card__label {
  /* INV-01 fix: was JetBrains Mono/12px/copper → IBM Plex Sans/13px/muted gray */
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: rgba(14,14,16,0.5); margin-bottom: 8px; display: block;
}
.inv-mandate-card__sep {
  width: 100%; height: 1px;
  background: rgba(14,14,16,0.12); /* INV-08 fix: was 0.15 */
  border: none; margin: 24px 0 16px;
}
.inv-mandate-card__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; line-height: 1.5;
  color: rgba(14,14,16,0.85); margin: 0; /* INV-09 fix: was 0.82 */
}

/* ── SECTION 7: Allocation thesis ── */
.inv-thesis {
  padding: 80px 0;
  background: var(--wp--preset--color--bg-dark);
}
.inv-thesis__head { margin-bottom: 44px; }
.inv-thesis .inv-kicker { color: rgba(247,237,217,0.6); }
/* 19.08 (Phase 5b cleanup): font-size dropped — dead, shadowed by
   .t2-section-title's own !important rules. Kept color, still live. */
.inv-thesis .inv-h2 { color: var(--wp--preset--color--cream); }
.inv-thesis .inv-body { color: rgba(247,237,217,0.85); }
/* INV-10: spacing between thesis paragraphs */
.inv-thesis__para + .inv-thesis__para { margin-top: 1.2em; }

/* ── SECTION 8: Fees ── */
.inv-fees {
  padding: 80px 0;
  background: #FFFFFF; /* INV-11 fix: was var(--wp--preset--color--bg-light) */
}
.inv-fees__head { margin-bottom: 44px; }
.inv-fees .inv-body { font-size: 16px; line-height: 1.55; }

/* ── SECTION 9: Intake form ── */
.inv-form {
  padding: 80px 0;
  background: #FFFFFF;
}
.inv-form__head { margin-bottom: 56px; }
.inv-form__fields { display: flex; flex-direction: column; gap: 0; }
.inv-field { margin-bottom: 32px; }
.inv-field__label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 12px; color: rgba(14,14,16,0.7);
  display: block; margin-bottom: 8px;
}
.inv-field__input {
  width: 100%;
  max-width: 1280px;
  height: 48px;
  padding: 0 16px;
  background: #F8F7F4;
  border: none;
  border-radius: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; color: var(--wp--preset--color--ink);
  outline: none;
  appearance: none;
}
.inv-field__input::placeholder { color: rgba(14,14,16,0.45); }
.inv-field__input:focus { border-color: var(--wp--preset--color--accent); }
/* 24.07: consent checkbox — this form posts straight to /api/lead-proxy, which now
   requires consent:true; was the one real lead-capture form on the site missed by the
   site-wide consent-checkbox pass (caught by an independent code-review round). */
.inv-form-privacy {
  display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 32px;
}
.inv-form-privacy input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--wp--preset--color--accent); cursor: pointer;
}
.inv-form-privacy input[type="checkbox"].is-invalid { outline: 2px solid var(--wp--preset--color--error, #e05353); outline-offset: 1px; }
.inv-form-privacy label {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5;
  color: rgba(14,14,16,0.7);
}
.inv-form-privacy label a { color: var(--wp--preset--color--accent); }
.inv-form-privacy label a:hover { text-decoration: underline; }
.inv-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; font-weight: 500;
  padding: 0 32px; height: 48px; min-width: 220px;
  border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none;
}
.inv-btn-primary:hover { background: #b8743e; }
.inv-form__msg {
  margin-top: 16px; font-size: 14px;
  display: none;
}
.inv-form__msg.success { display: block; color: #2a7a4b; }
.inv-form__msg.error   { display: block; color: #c0392b; }

/* ── SECTION 10: Confidentiality ── */
.inv-legal-block {
  padding: 80px 0;
  background: var(--wp--preset--color--bg-light);
}

/* ── Mobile (real redesign per specs/MOBILE_DESIGN_CANON_20260817.md, 17.08.2026) ── */
@media (max-width: 960px) {
  /* Side padding: 24px for the 481-960 full-page tablet tier (20px carved out for ≤480 below). */
  .inv-inner { padding-left: 24px; padding-right: 24px; }

  .inv-who__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .inv-process__steps { grid-template-columns: 1fr 1fr; gap: 24px; }
  .inv-mandates__grid { grid-template-columns: 1fr; }

  /* Section vertical rhythm: canon target 48-64px on mobile (was a flat 40px halving). */
  .inv-hero, .inv-who, .inv-process, .inv-mandates, .inv-thesis, .inv-fees, .inv-form, .inv-legal-block {
    padding: 56px 0;
  }

  /* Hero: compact vertically — desktop's generous kicker/H1 spacing reads as excess
     scroll before real content on a small screen. H1 gets a real size reduction
     (64px desktop is still too large at tablet/phone widths, no clamp() in play here). */
  .inv-hero { padding: 48px 0; }
  .inv-hero__kicker { margin-bottom: 24px; }
  .inv-h1 { font-size: 44px; }
  .inv-hero__h1 { margin-bottom: 24px; }
  .inv-hero__lead { font-size: 17px; }

  /* Section heads: tighten kicker→title→body rhythm to match the compressed section padding. */
  .inv-who__head, .inv-process__head, .inv-mandates__head,
  .inv-thesis__head, .inv-fees__head, .inv-form__head {
    margin-bottom: 32px;
  }
  /* 19.08 (Phase 5b cleanup): dropped — was dead, shadowed by
     .t2-section-title's own !important 28px at this width. */

  /* Mandate cards: slightly tighter padding at tablet width, cards still comfortable. */
  .inv-mandate-card { padding: 24px 20px; }

  /* Form: full-width primary CTA — matches "full-width inputs, single column" mobile
     form treatment; also gives the button a much larger, unambiguous touch target. */
  .inv-btn-primary { width: 100%; justify-content: center; }

  /* Consent checkbox: 16px native box is under the 44x44 touch-target minimum — grow
     the box and give the row real vertical padding so the effective tap column (box +
     surrounding padding, label already toggles via `for`) is much more forgiving. */
  .inv-form-privacy { padding: 8px 0; gap: 12px; }
  .inv-form-privacy input[type="checkbox"] { width: 20px; height: 20px; }
}

/* W4_documented: intentional 600px sub-breakpoint. Note this block's first rule,
   .inv-who__grid, is a plain 1-col reflow for a DIFFERENT section ("who this is
   for") and carries no padding/margin — it's grouped into this same @media block
   because it happens to share the 600px cutoff, not because it's part of the
   process-step layout below. The process-step micro-layout (the actual reason for
   choosing 600px over the canon 480/768) is the flagged .inv-process__num/
   .inv-accent-rule/p rules further down, not a rail boundary either way.
   Re-verified live 19.08.2026 (mobile-spacing deviation pass): 390px -> flex column step list,
   650px (601-768 tablet tier) -> reverts cleanly to a 2-col grid, no overlap/overflow either side.
   Note on audit tooling (NOT a build/lint failure — nothing is broken here):
   scripts/audit_mobile_spacing.mjs is a defect-MAP, not a pass/fail linter — its own
   header comment says explicitly "this script does NOT decide what's a real defect vs
   a legitimate exception... every row stays in the output regardless of the guess."
   `--check-baseline` (the actual gate that CAN fail a build) only fails on a count
   INCREASE vs the locked baseline; it does not require every individual row's
   isDeviation/whitelistGuess to flip. .inv-process__num / .inv-accent-rule / p (3
   selectors below) will keep showing up in the audit's raw row list with an empty
   whitelistGuess, because that field is populated from a comment immediately adjacent
   to EACH selector, and this file deliberately has ONE block-level comment above
   instead of three duplicated ones per MOBILE_DESIGN_CANON_20260817.md §4's guidance
   ("just add one explaining comment for the whole block") — a cosmetic gap in the
   script's per-row whitelist-detection granularity, verified by reading the script
   source directly, not something that fails --check-baseline or npm run build. */
@media (max-width: 600px) {
  .inv-who__grid { grid-template-columns: 1fr; gap: 16px; }

  /* Process steps: 7-square-grid doesn't read as a sequence once stacked to 1 column —
     reflow into a real step list (number + short vertical accent + label in a row)
     instead of just shrinking the grid to 1fr. Flex row direction follows the RTL
     `direction` on /ar/investor/ automatically, no separate RTL override needed. */
  .inv-process__steps { display: flex; flex-direction: column; gap: 20px; }
  .inv-process__step { display: flex; align-items: flex-start; gap: 16px; }
  .inv-process__num { flex-shrink: 0; width: 34px; margin-bottom: 0; font-size: 28px; }
  .inv-process__step .inv-accent-rule {
    width: 2px; height: 32px; flex-shrink: 0; margin: 4px 0 0;
  }
  .inv-process__step p { padding-top: 4px; }
}

@media (max-width: 480px) {
  /* Side padding: 20px on the primary 390px phone target. */
  .inv-inner { padding-left: 20px; padding-right: 20px; }
  .inv-h1 { font-size: 36px; }
  .inv-mandate-card { padding: 20px 16px; }
}
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Outer shell ── */

/* ── Logo (left) ── */

/* ── Nav wrapper — centered via flex grow trick ── */

/* ── Nav item gap: 28px between items (half each side = 14px) ── */

/* ── Top-level links / buttons ── */

/* chevron icon */

/* ── Dropdown panel ── */

/* ── Emirates flyout arrow ── */

/* ── Emirates sub-dropdown (flies right) ── */

/* ── Right side: lang switcher + CTA ── */

/* Language switcher */

/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */

/* ── Mobile hamburger ── */

/* ── Mobile menu panel ── */

/* ── Responsive breakpoint ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Top row: brand left + columns right ── */

/* ── Brand block (left ~44%) ── */

/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
/* Wave-G: gap handles spacing, no margin-left needed */

/* ── Bottom bar ── */

/* Lang switcher in footer bottom bar */

/* ── Responsive ── */