@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
/* ============================================================
   Freedom Engineer — Amir Shurrab · Personal brand webfonts
   Latin:  Montserrat (headlines) + Open Sans (body).
   Arabic: Cairo (headlines) + IBM Plex Sans Arabic (body).
   Arabic is first-class — the site is bilingual (RTL-ready).
   All via Google Fonts — these ARE the brand typefaces.
   ============================================================ */


/* ============================================================
   London Gulf Nexus — Color tokens
   Deep navy authority + gold accent, on warm ivory paper.
   ============================================================ */
:root {
  /* ---- Navy (primary) ---- */
  --navy-50:  #eef1f8;
  --navy-100: #d4ddee;
  --navy-200: #a6b6d9;
  --navy-300: #7088bd;
  --navy-400: #3f5a99;
  --navy-500: #1b3576;
  --navy-600: #002060; /* BRAND PRIMARY */
  --navy-700: #001b52;
  --navy-800: #001440;
  --navy-900: #000d2a;
  --navy-950: #00081b;

  /* ---- Gold (accent) — premium #B8860B base; brighter crest gold on hover ---- */
  --gold-50:  #fbf6e8;
  --gold-100: #f5e9c3;
  --gold-200: #ead289;
  --gold-300: #ddb84f;
  --gold-400: #cd9f29;
  --gold-500: #b8860b; /* BRAND ACCENT — premium dark gold */
  --gold-600: #9c6f08;
  --gold-700: #7d5708;
  --gold-800: #5f420b;
  --gold-900: #4a340c;
  --gold-bright: #edb41e; /* the crest gold — for hover / highlight accents */

  /* ---- Neutrals (warm stone) ---- */
  --white:    #ffffff;
  --ivory:    #f9f8f3; /* paper / page background */
  --stone-50:  #f6f5f1;
  --stone-100: #ece9e2;
  --stone-200: #ddd8cd;
  --stone-300: #c4bdae;
  --stone-400: #9c9484;
  --stone-500: #756d5e;
  --stone-600: #564f44;
  --stone-700: #3d382f;
  --stone-800: #292620;
  --stone-900: #1a1813;

  /* ---- Semantic status ---- */
  --success-500: #1f7a4d;
  --success-50:  #e8f3ec;
  --warning-500: #c77d11;
  --warning-50:  #fbf1e1;
  --danger-500:  #a02a23;
  --danger-50:   #f7e8e7;
  --info-500:    #1b3576;
  --info-50:     #eef1f8;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Text */
  --text-strong:  var(--navy-700);
  --text-body:    var(--stone-700);
  --text-muted:   var(--stone-500);
  --text-faint:   var(--stone-400);
  --text-inverse: var(--ivory);
  --text-on-navy: #e7ecf7;
  --text-accent:  var(--gold-700);

  /* Surfaces */
  --surface-page:    var(--ivory);
  --surface-card:    var(--white);
  --surface-sunken:  var(--stone-50);
  --surface-raised:  var(--white);
  --surface-navy:    var(--navy-600);
  --surface-navy-deep: var(--navy-800);
  --surface-gold:    var(--gold-500);

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--navy-600);
  --border-gold:    var(--gold-500);

  /* Accent / interactive */
  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-bright);
  --accent-press:  var(--gold-700);
  --primary:       var(--navy-600);
  --primary-hover: var(--navy-700);
  --primary-press: var(--navy-800);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--gold-500) 55%, transparent);

  /* ============================================================
     FREEDOM ENGINEER — personal-brand layer (darker, cinematic).
     Deep midnight #000D2A is the DOMINANT background here — a darker
     register of the same navy family. #002060 survives in gradients.
     ============================================================ */
  --midnight:       #000d2a;  /* dominant cinematic base (= navy-900) */
  --midnight-deep:  #00081b;  /* deepest field / footer (= navy-950) */
  --midnight-lift:  #061539;  /* raised dark panel */

  /* Text on the dark brand fields — ivory, never gold for body */
  --ink-text:       var(--ivory);              /* primary text on midnight */
  --ink-text-soft:  rgba(249, 248, 243, 0.72); /* secondary body on midnight */
  --ink-text-faint: rgba(249, 248, 243, 0.48); /* meta / captions on midnight */
  --ink-hairline:   rgba(249, 248, 243, 0.14); /* dividers on midnight */
  --ink-hairline-strong: rgba(249, 248, 243, 0.24);

  /* Cinematic hero wash — Gaza-night navy, gold survives only here */
  --hero-wash: radial-gradient(130% 120% at 78% -10%,
                 var(--navy-500) 0%, var(--navy-700) 34%,
                 var(--midnight) 72%, var(--midnight-deep) 100%);
}
/* ============================================================
   London Gulf Nexus — Typography tokens
   Montserrat = display / headlines (tight, confident).
   Open Sans  = body / UI (legible, neutral).
   ============================================================ */
:root {
  /* Families — Latin */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

  /* Families — Arabic (bilingual, first-class) */
  --font-display-ar: 'Cairo', 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body-ar:    'IBM Plex Sans Arabic', 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Type scale (rem, 16px base) */
  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-6xl:  5.25rem;   /* 84px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* eyebrows / labels */
  --tracking-widest: 0.22em;  /* logotype lockups */

  /* ---- Semantic roles ---- */
  --display-font:   var(--font-display);
  --display-weight: var(--weight-bold);
  --display-tracking: var(--tracking-tight);

  --eyebrow-font:    var(--font-display);
  --eyebrow-weight:  var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-wider);
  --eyebrow-size:    var(--text-xs);

  --body-font:   var(--font-body);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-relaxed);
}
/* ============================================================
   London Gulf Nexus — Spacing & layout tokens
   8px base grid; generous, architectural whitespace.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* Container widths */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1280px;
  --gutter:        2rem;

  /* Section rhythm */
  --section-y:     6rem;
  --section-y-lg:  8rem;
}
/* ============================================================
   London Gulf Nexus — Effects: radii, borders, shadows, motion
   Restrained, precise. Crisp hairlines over heavy shadows.
   ============================================================ */
:root {
  /* Corner radii — tight & architectural, never pill-soft */
  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hairline: 1px;
  --border-medium:   1.5px;
  --border-thick:    2px;
  --border-rule:     3px; /* gold underrule accents */

  /* Shadows — low, cool, diffuse (navy-tinted, never black) */
  --shadow-xs: 0 1px 2px rgba(0, 13, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 13, 42, 0.08), 0 1px 2px rgba(0, 13, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 13, 42, 0.08), 0 2px 4px rgba(0, 13, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(0, 13, 42, 0.10), 0 4px 8px rgba(0, 13, 42, 0.05);
  --shadow-xl: 0 24px 60px rgba(0, 13, 42, 0.14);

  /* Gold glow — for accent focus / hero CTAs only */
  --shadow-gold: 0 6px 20px rgba(184, 134, 11, 0.28);

  /* Ring */
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-fast:   140ms; /* @kind other */
  --duration-normal: 220ms; /* @kind other */
  --duration-slow:   380ms; /* @kind other */
}


  /* ============================================================
     THE FREEDOM ENGINEER · Amir Shurrab — homepage
     Dark, cinematic register of the LGN navy+gold DNA.
     All values reference design-system tokens; page-local
     custom props below so the system transfers to other pages.
     ============================================================ */
  :root {
    --fe-maxw: 1240px;
    --fe-pad: clamp(20px, 5vw, 72px);
    --fe-section-y: clamp(72px, 10vw, 132px);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--midnight);
    color: var(--ink-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  img, svg { display: block; }
  a { color: var(--gold-300); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
  a:hover { color: var(--gold-bright); }
  ::selection { background: var(--gold-500); color: var(--midnight); }

  .fe-wrap { max-width: var(--fe-maxw); margin: 0 auto; padding-inline: var(--fe-pad); }

  /* ---- Shared type ---- */
  .fe-kicker {
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-wider); color: var(--gold-bright);
    display: inline-flex; align-items: center; gap: 14px; margin: 0;
  }
  .fe-kicker::before { content: ""; width: 34px; height: 2px; background: var(--gold-500); flex: none; }
  .fe-h2 {
    font-family: var(--font-display); font-weight: var(--weight-bold);
    font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05;
    letter-spacing: var(--tracking-tight); color: var(--ink-text);
    margin: 22px 0 0; text-wrap: balance;
  }
  .fe-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-text-soft); margin: 0; max-width: 58ch; text-wrap: pretty; }
  .fe-arrowlink {
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--gold-bright); display: inline-flex; align-items: center; gap: 10px;
  }
  .fe-arrowlink .fe-arw { transition: transform var(--duration-normal) var(--ease-out); }
  .fe-arrowlink:hover .fe-arw { transform: translateX(6px); }
  [dir="rtl"] .fe-arrowlink .fe-arw { transform: scaleX(-1); }
  [dir="rtl"] .fe-arrowlink:hover .fe-arw { transform: scaleX(-1) translateX(6px); }

  /* ---- Buttons (real, focus-visible, press states) ---- */
  .fe-btn {
    font-family: var(--font-display); font-weight: var(--weight-semibold);
    font-size: var(--text-sm); letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 28px; border-radius: var(--radius-sm); cursor: pointer;
    border: var(--border-medium) solid transparent; white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }
  .fe-btn:active { transform: translateY(1px); }
  .fe-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .fe-btn--gold { background: var(--gold-bright); color: var(--midnight); }
  .fe-btn--gold:hover { background: var(--gold-500); box-shadow: var(--shadow-gold); transform: translateY(-1px); }
  .fe-btn--ghost { background: transparent; color: var(--ink-text); border-color: var(--ink-hairline-strong); }
  .fe-btn--ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(237,180,30,0.06); }

  /* ============================================================ NAV */
  .fe-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--midnight) 72%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: background var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
  }
  .fe-nav.is-scrolled { background: color-mix(in srgb, var(--midnight) 92%, transparent); border-bottom-color: var(--ink-hairline); }
  .fe-nav__inner { display: flex; align-items: center; gap: 28px; height: 78px; }
  .fe-brand { display: flex; align-items: center; gap: 12px; }
  .fe-brand__mark { width: 26px; color: var(--gold-bright); flex: none; }
  .fe-brand__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: 0.18em; color: var(--ink-text); }
  .fe-nav__links { display: flex; gap: 4px; margin-inline-start: auto; }
  .fe-nav__link {
    font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 14px;
    color: var(--ink-text-soft); padding: 9px 15px; border-radius: var(--radius-sm);
    position: relative; transition: color var(--duration-fast) var(--ease-standard);
  }
  .fe-nav__link::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1.5px; background: var(--gold-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-out); }
  [dir="rtl"] .fe-nav__link::after { transform-origin: right; }
  .fe-nav__link:hover { color: var(--ink-text); }
  .fe-nav__link:hover::after { transform: scaleX(1); }
  .fe-nav__actions { display: flex; align-items: center; gap: 12px; }
  .fe-langtoggle {
    font-family: var(--font-display-ar), var(--font-display); font-weight: var(--weight-semibold); font-size: 14px;
    color: var(--ink-text); background: transparent; border: 1px solid var(--ink-hairline-strong);
    height: 40px; padding: 0 16px; border-radius: var(--radius-pill); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }
  .fe-langtoggle:hover { background: var(--gold-bright); color: var(--midnight); border-color: var(--gold-bright); }
  .fe-langtoggle:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .fe-navcta { display: inline-flex; }
  .fe-burger {
    display: none; width: 40px; height: 40px; border: 1px solid var(--ink-hairline-strong);
    background: transparent; border-radius: var(--radius-sm); cursor: pointer;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  }
  .fe-burger:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .fe-burger span { display: block; width: 17px; height: 1.6px; background: var(--ink-text); transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
  .fe-nav.is-open .fe-burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .fe-nav.is-open .fe-burger span:nth-child(2) { opacity: 0; }
  .fe-nav.is-open .fe-burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
  .fe-mobilemenu {
    display: none; flex-direction: column; gap: 4px;
    padding: 8px var(--fe-pad) 24px; border-top: 1px solid var(--ink-hairline);
    background: color-mix(in srgb, var(--midnight) 96%, transparent);
  }
  .fe-nav.is-open .fe-mobilemenu { display: flex; }
  .fe-mobilemenu a:not(.fe-btn) { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 17px; color: var(--ink-text-soft); padding: 13px 2px; border-bottom: 1px solid var(--ink-hairline); }
  .fe-mobilemenu a:not(.fe-btn):hover { color: var(--gold-bright); }
  .fe-mobilemenu .fe-btn { margin-top: 16px; }

  /* ============================================================ HERO */
  .fe-hero { position: relative; background: var(--hero-wash); overflow: hidden; }
  .fe-hero__king {
    position: absolute; top: -6%; inset-inline-end: -4%; width: min(46vw, 620px);
    color: var(--gold-500); opacity: 0.05; pointer-events: none; z-index: 0;
  }
  .fe-hero__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 72px);
    align-items: center; padding-block: clamp(56px, 8vw, 104px) clamp(120px, 14vw, 180px);
    min-height: min(92vh, 860px);
  }
  .fe-hero__copy { max-width: 40ch; }
  .fe-hero__h1 {
    font-family: var(--font-display); font-weight: var(--weight-extra);
    font-size: clamp(46px, 8.5vw, 104px); line-height: 0.96;
    letter-spacing: -0.03em; color: var(--ink-text); margin: 24px 0 0; text-wrap: balance;
  }
  .fe-hero__h1 em { font-style: normal; color: var(--gold-bright); }
  .fe-hero__lead { margin-top: 28px; }
  .fe-hero__actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

  /* Portrait placeholder */
  .fe-portrait {
    position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
    border: 1px solid var(--ink-hairline-strong);
    background:
      repeating-linear-gradient(135deg, rgba(249,248,243,0.05) 0 2px, transparent 2px 11px),
      linear-gradient(160deg, var(--navy-600), var(--midnight-deep));
    overflow: hidden; box-shadow: var(--shadow-xl);
  }
  .fe-portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -90px 90px -40px rgba(0,8,27,0.9); }
  .fe-portrait__tag {
    position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 2;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--ink-text-faint); text-transform: uppercase;
    background: rgba(0,8,27,0.5); padding: 6px 10px; border: 1px solid var(--ink-hairline); border-radius: var(--radius-xs);
  }
  .fe-portrait__corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold-500); z-index: 2; }
  .fe-portrait__corner--tl { top: 14px; inset-inline-start: 14px; border-inline-end: 0; border-bottom: 0; }
  .fe-portrait__corner--br { bottom: 14px; inset-inline-end: 14px; border-inline-start: 0; border-top: 0; }

  /* Skyline motif — one continuous thin gold line across hero base */
  .fe-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(72px, 12vw, 150px); z-index: 1; color: var(--gold-500); opacity: 0.5; pointer-events: none; }
  .fe-skyline svg { width: 100%; height: 100%; }
  .fe-skyline__label { position: absolute; bottom: 14px; inset-inline-start: var(--fe-pad); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-text-faint); text-transform: uppercase; z-index: 2; }

  /* Arabic hero state */
  .fe-hero[dir="rtl"] { direction: rtl; }
  .fe-hero[dir="rtl"] .fe-kicker, 
  .fe-hero[dir="rtl"] .fe-hero__h1 { font-family: var(--font-display-ar); }
  .fe-hero[dir="rtl"] .fe-hero__h1 { font-weight: 800; letter-spacing: 0; line-height: 1.08; }
  .fe-hero[dir="rtl"] .fe-hero__lead { font-family: var(--font-body-ar); }
  .fe-hero[dir="rtl"] .fe-kicker::before { display: none; }
  .fe-hero[dir="rtl"] .fe-kicker { gap: 0; }
  .fe-lang-en { display: contents; }
  .fe-lang-ar { display: none; }
  .fe-hero[dir="rtl"] .fe-lang-en { display: none; }
  .fe-hero[dir="rtl"] .fe-lang-ar { display: contents; }

  /* ---- Light-section theme (ivory / stone editorial bands) ---- */
  .fe-light { background: var(--ivory); color: var(--text-body); }
  .fe-light .fe-kicker { color: var(--gold-700); }
  .fe-light .fe-kicker::before { background: var(--gold-600); }
  .fe-light .fe-h2 { color: var(--text-strong); }
  .fe-light .fe-lead { color: var(--text-body); }
  .fe-light .fe-arrowlink { color: var(--gold-700); }
  .fe-light .fe-arrowlink:hover { color: var(--gold-800); }
  .fe-light .fe-btn--ghost { color: var(--text-strong); border-color: var(--border-default); }
  .fe-light .fe-btn--ghost:hover { color: var(--gold-800); border-color: var(--gold-600); background: rgba(184,134,11,0.06); }

  /* ============================================================ CREDIBILITY STRIP (light) */
  .fe-cred { border-block: 1px solid var(--border-subtle); background: var(--ivory); }
  .fe-cred__inner { padding-block: 34px; }
  .fe-cred__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
  .fe-cred__cell { display: flex; flex-direction: column; gap: 5px; padding: 2px 26px; border-inline-start: 1px solid var(--border-subtle); }
  .fe-cred__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .fe-cred__lead { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; color: var(--text-strong); letter-spacing: -0.01em; }
  .fe-cred__lead b { color: var(--gold-700); font-weight: var(--weight-extra); font-size: 21px; }
  .fe-cred__sub { font-size: 12.5px; color: var(--text-muted); letter-spacing: 0.02em; }
  .fe-cred__press { display: none; }
  .fe-footer__press .fe-social__links span { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 14px; color: var(--ink-text-soft); }

  /* ============================================================ PROOF */
  .fe-proof { padding-block: var(--fe-section-y); position: relative; }
  .fe-proof__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
  .fe-proof__body { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.62; color: var(--text-body); margin: 0; text-wrap: pretty; }
  .fe-proof__body b { color: var(--text-strong); font-weight: var(--weight-semibold); }
  .fe-proof__cta { margin-top: 34px; }
  .fe-proof__year { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: clamp(76px, 13vw, 168px); line-height: 0.82; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--stone-300); }
  .fe-proof__yearcap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 14px; }

  /* ============================================================ PILLARS */
  .fe-pillars { padding-block: var(--fe-section-y); border-top: 1px solid var(--border-subtle); background: var(--stone-50); }
  .fe-pillars__head { max-width: 46ch; margin-bottom: clamp(40px, 6vw, 68px); }
  .fe-pillars__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
  .fe-pillar { background: var(--white); padding: clamp(30px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 14px; position: relative; transition: background var(--duration-normal) var(--ease-standard); }
  .fe-pillar::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 2px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-out); }
  [dir="rtl"] .fe-pillar::before { transform-origin: right; }
  .fe-pillar:hover { background: var(--stone-50); }
  .fe-pillar:hover::before { transform: scaleX(1); }
  .fe-pillar__no { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 13px; color: var(--gold-600); letter-spacing: 0.14em; }
  .fe-pillar__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(21px, 2vw, 27px); letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
  .fe-pillar__desc { font-size: 15.5px; line-height: 1.6; color: var(--text-body); margin: 0; }

  /* ============================================================ NEWSLETTER (dark cinematic band) */
  .fe-letter { padding-block: var(--fe-section-y); position: relative; overflow: hidden; background: var(--hero-wash); border-top: 1px solid var(--ink-hairline); }
  .fe-letter__king { position: absolute; bottom: -18%; inset-inline-start: -6%; width: min(38vw, 420px); color: var(--gold-500); opacity: 0.045; pointer-events: none; }
  .fe-letter__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
  .fe-letter__inner .fe-kicker { justify-content: center; }
  .fe-letter__lead { margin: 24px auto 0; }
  .fe-form { display: flex; gap: 12px; margin: 40px auto 0; max-width: 540px; }
  .fe-form__field { flex: 1; }
  .fe-input {
    width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink-text);
    background: rgba(249,248,243,0.04); border: 1px solid var(--ink-hairline-strong);
    border-radius: var(--radius-sm); padding: 15px 18px; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  }
  .fe-input::placeholder { color: var(--ink-text-faint); }
  .fe-input:hover { border-color: rgba(249,248,243,0.34); }
  .fe-input:focus { outline: none; border-color: var(--gold-bright); box-shadow: var(--ring-focus); }
  .fe-form__note { font-size: 13px; color: var(--ink-text-faint); margin: 18px 0 0; }
  .fe-form__ok { display: none; font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--gold-bright); margin: 28px 0 0; font-size: 17px; }
  .fe-form.is-sent .fe-form__row { display: none; }
  .fe-form.is-sent + .fe-form__ok { display: block; }
  .fe-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}

  /* ============================================================ FOOTER */
  .fe-footer { background: var(--midnight-deep); border-top: 1px solid var(--ink-hairline); padding-block: clamp(56px, 7vw, 80px) 28px; }
  .fe-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--ink-hairline); }
  .fe-footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 42ch; }
  .fe-footer__brandhead { display: flex; gap: 14px; align-items: flex-start; }
  .fe-footer__brandhead .fe-brand__mark { width: 36px; margin-top: 2px; color: var(--gold-bright); flex: none; }
  .fe-footer__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 17px; letter-spacing: 0.06em; color: var(--ink-text); margin: 0; }
  .fe-footer__tag { font-size: 13.5px; color: var(--ink-text-soft); margin: 6px 0 0; }
  .fe-footer__role { font-size: 14px; color: var(--ink-text-soft); margin: 0; line-height: 1.55; }
  .fe-footer__col h5 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-text-faint); margin: 0 0 16px; }
  .fe-footer__col a { display: block; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-text-soft); margin-bottom: 11px; transition: color var(--duration-fast) var(--ease-standard); }
  .fe-footer__col a:hover { color: var(--gold-bright); }
  .fe-footer__meta { display: flex; flex-wrap: wrap; gap: 14px 44px; padding: 22px 0; border-bottom: 1px solid var(--ink-hairline); }
  .fe-footer__metaitem { display: flex; align-items: baseline; gap: 12px; }
  .fe-footer__metalabel { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--ink-text-faint); }
  .fe-footer__metaval { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 13.5px; color: var(--ink-text-soft); letter-spacing: 0.02em; }
  .fe-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
  .fe-signature { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.16em; color: var(--gold-bright); margin: 0; }
  .fe-footer__legal { font-size: 12.5px; color: var(--ink-text-faint); margin: 0; }
  @media (max-width: 820px) { .fe-footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .fe-footer__grid { grid-template-columns: 1fr; gap: 30px; } }

  /* ============================================================ RESPONSIVE */
  @media (max-width: 940px) {
    .fe-nav__links { display: none; }
    .fe-navcta { display: none; }
    .fe-hero__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 120px; min-height: 0; }
    .fe-hero__copy { max-width: none; order: 1; }
    .fe-portrait { order: 2; max-width: 420px; aspect-ratio: 5 / 4; }
    .fe-burger { display: inline-flex; }
    .fe-proof__inner { grid-template-columns: 1fr; gap: 24px; }
    .fe-proof__aside { order: -1; }
    .fe-cred__grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
    .fe-cred__cell:nth-child(3n+1) { border-inline-start: 0; padding-inline-start: 0; }
  }
  @media (max-width: 620px) {
    body { font-size: 16px; }
    .fe-pillars__grid { grid-template-columns: 1fr; }
    .fe-form { flex-direction: column; }
    .fe-hero__actions .fe-btn, .fe-form .fe-btn { width: 100%; }
    .fe-cred__grid { grid-template-columns: repeat(2, 1fr); }
    .fe-cred__cell { padding-inline: 20px; }
    .fe-cred__cell:nth-child(3n+1) { border-inline-start: 1px solid var(--border-subtle); padding-inline-start: 20px; }
    .fe-cred__cell:nth-child(2n+1) { border-inline-start: 0; padding-inline-start: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .fe-arrowlink .fe-arw, .fe-pillar::before, .fe-nav__link::after { transition: none !important; }
  }

  

/* ============ v2 build additions (RTL, interior pages, animation) ============ */
html[dir=rtl] body{font-family:var(--font-body-ar,'IBM Plex Sans Arabic'),var(--font-body)}
html[dir=rtl] .fe-h2,html[dir=rtl] .fe-hero__h1,html[dir=rtl] .fe-kicker,html[dir=rtl] .fe-pillar__title,html[dir=rtl] .fe-btn,html[dir=rtl] .fe-brand__name,html[dir=rtl] .fe-footer__name,html[dir=rtl] .fe-signature,html[dir=rtl] .fe-nav__link{font-family:var(--font-display-ar,'Cairo'),var(--font-display)}
html[dir=rtl] .fe-hero__h1{letter-spacing:0;line-height:1.08;font-size:clamp(40px,7.5vw,92px)}
html[dir=rtl] .fe-h2{letter-spacing:0}
html[dir=rtl] .fe-signature{letter-spacing:.02em}
label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fe-portrait__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:1}
/* burger + mobile menu */
.fe-burger{display:none;background:none;border:1px solid var(--ink-hairline-strong);border-radius:var(--radius-sm);width:42px;height:40px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.fe-burger span{display:block;width:18px;height:2px;background:var(--ink-text)}
.fe-mobilemenu{display:none;flex-direction:column;gap:4px;padding:14px 24px 22px;background:var(--midnight-deep);border-bottom:1px solid var(--ink-hairline)}
.fe-mobilemenu.is-open{display:flex}
.fe-mobilemenu a{font-family:var(--font-display);font-size:16px;color:var(--ink-text);padding:10px 0}
html[dir=rtl] .fe-mobilemenu a{font-family:var(--font-display-ar),var(--font-display)}
@media(max-width:940px){.fe-burger{display:inline-flex}}
/* interior page hero (compact dark band) */
.fe-pagehero{background:var(--hero-wash);position:relative;overflow:hidden}
.fe-pagehero__inner{position:relative;z-index:2;padding-block:clamp(56px,8vw,96px);max-width:820px}
.fe-pagehero__h1{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:-0.02em;color:var(--ink-text);margin:22px 0 0;text-wrap:balance}
html[dir=rtl] .fe-pagehero__h1{font-family:var(--font-display-ar),var(--font-display);letter-spacing:0;line-height:1.12}
.fe-pagehero__lead{margin-top:22px}
.fe-pagehero .fe-hero__king{width:min(34vw,420px);top:-10%}
/* light editorial timeline */
.fe-tlwrap{padding-block:var(--fe-section-y)}
.fe-tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fe-tl li{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,56px);padding-block:30px;border-top:1px solid var(--border-subtle)}
.fe-tl li:first-child{border-top:0}
.fe-tl .yr{font-family:var(--font-display);font-weight:var(--weight-extra);font-size:clamp(20px,2.4vw,30px);letter-spacing:-0.02em;color:var(--gold-700);line-height:1.1}
html[dir=rtl] .fe-tl .yr{font-family:var(--font-display-ar),var(--font-display);letter-spacing:0}
.fe-tl h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(19px,1.8vw,24px);color:var(--text-strong);margin:0 0 8px;letter-spacing:-0.01em}
html[dir=rtl] .fe-tl h3{font-family:var(--font-display-ar),var(--font-display);letter-spacing:0}
.fe-tl p{margin:0;color:var(--text-body);font-size:16px;line-height:1.65;max-width:62ch}
@media(max-width:700px){.fe-tl li{grid-template-columns:1fr;gap:8px}}
.fe-quote{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2.6vw,30px);line-height:1.4;color:var(--text-strong);border-inline-start:3px solid var(--gold-500);padding-inline-start:26px;margin:clamp(40px,6vw,64px) 0;max-width:34ch}
html[dir=rtl] .fe-quote{font-family:var(--font-display-ar),var(--font-display)}
.fe-photogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:clamp(36px,5vw,56px)}
.fe-photogrid figure{margin:0;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--white)}
.fe-photogrid img{width:100%;height:220px;object-fit:cover;display:block}
.fe-photogrid figcaption{padding:12px 16px;font-size:13px;color:var(--text-muted)}
/* dark form band variants */
.fe-form--stack{flex-direction:column;max-width:560px}
.fe-form--stack .fe-input,.fe-form--stack textarea{width:100%}
textarea.fe-input{resize:vertical;min-height:110px}
/* book panel */
.fe-bookcard{background:var(--midnight-lift);border:1px solid var(--ink-hairline-strong);border-radius:var(--radius-lg);padding:clamp(32px,4vw,52px);text-align:center;max-width:320px;box-shadow:var(--shadow-xl)}
.fe-bookcard h3{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--ink-text);font-size:20px;margin:10px 0 0}
html[dir=rtl] .fe-bookcard h3{font-family:var(--font-display-ar),var(--font-display)}
.fe-bookcard p{color:var(--ink-text-soft);font-size:13.5px;margin:14px 0 0;line-height:1.7}
.fe-pagehero__split{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(56px,8vw,96px)}
.fe-pagehero__split>div:last-child{justify-self:center}
@media(max-width:820px){.fe-pagehero__split{grid-template-columns:1fr}}
/* ============ animations (reduced-motion safe) ============ */
@media(prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out,cubic-bezier(.2,.7,.3,1)),transform .7s var(--ease-out,cubic-bezier(.2,.7,.3,1));transition-delay:calc(var(--d,0)*90ms)}
 .rv.in{opacity:1;transform:none}
 .fe-hero__king,.fe-letter__king{animation:kingfloat 11s ease-in-out infinite alternate}
 @keyframes kingfloat{from{transform:translateY(0)}to{transform:translateY(-16px)}}
 .fe-skypath{stroke-dasharray:4200;stroke-dashoffset:4200;animation:skydraw 2.6s .3s cubic-bezier(.4,0,.2,1) forwards}
 @keyframes skydraw{to{stroke-dashoffset:0}}
 .fe-hero__copy>span>*{opacity:0;transform:translateY(18px);animation:riseup .8s cubic-bezier(.2,.7,.3,1) forwards}
 .fe-hero__copy>span>*:nth-child(1){animation-delay:.05s}.fe-hero__copy>span>*:nth-child(2){animation-delay:.15s}
 .fe-hero__copy>span>*:nth-child(3){animation-delay:.28s}.fe-hero__copy>span>*:nth-child(4){animation-delay:.4s}
 @keyframes riseup{to{opacity:1;transform:none}}
 .fe-portrait{opacity:0;transform:scale(.97);animation:portin 1s .25s cubic-bezier(.2,.7,.3,1) forwards}
 @keyframes portin{to{opacity:1;transform:none}}
}