/* ==== icons.css ==== */
/*!
 * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 * Subset for fds-shipping.com: only the solid icons used in src/ (regenerate with pyftsubset when adding icons).
 */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(/assets/fonts/fa-solid-subset.woff2) format("woff2")}
.fa-solid{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;font-family:"Font Awesome 6 Free";font-weight:900}
.fa-truck-fast:before{content:"\f48b"}
.fa-ship:before{content:"\f21a"}
.fa-shield-halved:before{content:"\f3ed"}
.fa-plane-up:before{content:"\e22d"}
.fa-file-shield:before{content:"\e4f0"}
.fa-anchor:before{content:"\f13d"}
.fa-wheat-awn:before{content:"\e2cd"}
.fa-truck-ramp-box:before{content:"\f4de"}
.fa-truck-moving:before{content:"\f4df"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-trailer:before{content:"\e041"}
.fa-snowflake:before{content:"\f2dc"}
.fa-prescription-bottle-medical:before{content:"\f486"}
.fa-plane-circle-check:before{content:"\e555"}
.fa-phone-volume:before{content:"\f2a0"}
.fa-oil-well:before{content:"\e532"}
.fa-location-dot:before{content:"\f3c5"}
.fa-industry:before{content:"\f275"}
.fa-helmet-safety:before{content:"\f807"}
.fa-globe:before{content:"\f0ac"}
.fa-compass:before{content:"\f14e"}
.fa-certificate:before{content:"\f0a3"}
.fa-cart-flatbed:before{content:"\f474"}
.fa-car-side:before{content:"\f5e4"}
.fa-boxes-stacked:before{content:"\f468"}
.fa-award:before{content:"\f559"}


/* ==== tokens.css ==== */
:root {
  /* Brand — sampled directly from the FDS company profile */
  --color-brand-orange: #F39200;
  --color-brand-orange-dark: #D67F00;
  --color-peach: #FBE8CF;
  --color-cream: #FCF4EB;

  /* Ink & warm grays */
  --color-ink: #0E1116;
  --color-ink-soft: #2A2C31;
  --color-gray: #6A6660;
  --color-gray-soft: #8A867F;

  --color-neutral-50: #FAF9F7;
  --color-neutral-100: #EFECE6;
  --color-neutral-200: #E2DED7;
  --color-neutral-900: #16181C;

  --color-bg: #FFFFFF;
  --color-bg-alt: var(--color-neutral-50);
  --color-bg-peach: var(--color-cream);
  --color-text: var(--color-ink-soft);
  --color-text-muted: var(--color-gray);
  --color-heading: var(--color-ink);
  --color-border: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-200);

  --color-accent: var(--color-brand-orange);
  --color-accent-hover: var(--color-brand-orange-dark);

  /* Type — matches the profile: Georgia (serif) for editorial, Arial for labels/UI, Consolas for codes */
  --font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-sans: Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  --font-arabic: "Noto Kufi Arabic", system-ui, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.0625rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.625rem;
  --font-size-xl: 2.25rem;
  --font-size-2xl: 3rem;
  --font-size-3xl: 4rem;

  --line-height-tight: 1.08;
  --line-height-snug: 1.3;
  --line-height-base: 1.7;

  --tracking-label: 0.22em;
  --tracking-tight: -0.01em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --radius-sm: 3px;
  --radius-base: 6px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --shadow-card: 0 1px 3px rgba(14, 17, 22, 0.06), 0 8px 24px rgba(14, 17, 22, 0.05);
  --shadow-card-hover: 0 2px 6px rgba(14, 17, 22, 0.08), 0 16px 40px rgba(14, 17, 22, 0.10);

  --container-max: 1180px;
  --transition-base: 200ms ease;
}

/* ==== base.css ==== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-serif);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height-base);
  font-size: var(--font-size-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Arabic pages: switch to the Arabic face; logical properties handle the RTL flip */
[lang="ar"] {
  font-family: var(--font-arabic);
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 {
  font-family: var(--font-arabic);
}

img, picture, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7.5vw, var(--font-size-3xl)); overflow-wrap: break-word; }
h2 { font-size: clamp(1.7rem, 5.5vw, var(--font-size-2xl)); overflow-wrap: break-word; }
h3 { font-size: var(--font-size-lg); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

/* UI chrome (nav, buttons, labels, captions) uses the sans face — Latin only */
button, input, textarea, select,
.eyebrow, .btn, .site-nav__link, .lang-toggle,
.label, .mono, .badge, .stat__label, .credential__code {
  font-family: var(--font-sans);
}

/* Arabic: all UI chrome uses the Arabic face too, so header/nav match the body.
   Codes & numbers (.mono, .port__code, .credential__code) intentionally stay Latin/mono.
   Wide letter-spacing is dropped — it breaks Arabic's connected letterforms. */
[lang="ar"] body,
[lang="ar"] p, [lang="ar"] .lead, [lang="ar"] .section-head__sub,
[lang="ar"] button, [lang="ar"] input, [lang="ar"] textarea, [lang="ar"] select,
[lang="ar"] .eyebrow, [lang="ar"] .btn, [lang="ar"] .site-nav__link, [lang="ar"] .lang-toggle,
[lang="ar"] .label, [lang="ar"] .badge, [lang="ar"] .badge-note, [lang="ar"] .stat__label,
[lang="ar"] .section-head__label, [lang="ar"] .credential__meta, [lang="ar"] .credential__title,
[lang="ar"] .credential__body, [lang="ar"] .service__title, [lang="ar"] .service__body,
[lang="ar"] .pillar__title, [lang="ar"] .pillar__body, [lang="ar"] .reason__title, [lang="ar"] .reason__body,
[lang="ar"] .industry__note, [lang="ar"] .industry__name, [lang="ar"] .port__name,
[lang="ar"] .form-field label, [lang="ar"] .site-footer h4, [lang="ar"] .site-footer h2, [lang="ar"] .site-footer li,
[lang="ar"] .testimonial__author, [lang="ar"] .testimonial__quote,
[lang="ar"] .tracking-step__label, [lang="ar"] .quote-result__label, [lang="ar"] .quote-result__badge,
[lang="ar"] .tag, [lang="ar"] .photo-strip figcaption {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

/* The language toggle shows Arabic text ("العربية") even on English pages — give it the Arabic face */
.lang-toggle[lang="ar"] {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

ul, ol { padding-inline-start: var(--space-3); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection { background: var(--color-peach); color: var(--color-ink); }

/* ==== layout.css ==== */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 640px) { .container { padding-inline: var(--space-4); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-6); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-block-end: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.site-header__logo img { block-size: 38px; inline-size: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav__link {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-soft);
  padding-block: var(--space-1);
  border-block-end: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-block-end-color: var(--color-accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.nav-toggle {
  display: none;
  inline-size: 40px; block-size: 40px;
  border: none; background: transparent; cursor: pointer;
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .site-nav {
    position: fixed;
    inset-block-start: 63px;
    inset-inline: 0;
    background: #fff;
    border-block-end: 1px solid var(--color-border);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
  }
  .site-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav__list { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-3); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-12); }
.section--tight { padding-block: var(--space-8); }
.section--alt { background: var(--color-bg-alt); }
.section--cream { background: var(--color-bg-peach); }
.section--ink { background: var(--color-ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--orange { background: var(--color-accent); color: #fff; }
.section--orange h1, .section--orange h2, .section--orange h3 { color: #fff; }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-8);
  align-items: center;
}
/* Hero reads as one centred column: copy, buttons, then the icon row beneath.
   All centring uses text-align / justify-*, so it mirrors correctly in RTL. */
.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-inline-size: 70ch;
  margin-inline: auto;
}
.hero__inner .lead,
.hero__inner .section-head__sub { margin-inline: auto; max-inline-size: 64ch; }
.hero__inner .btn-row { justify-content: center; }
.hero__media {
  position: relative;
  inline-size: 100%;
  max-inline-size: 560px;
  display: flex;
  flex-direction: column;
  /* stretch, not center: the icon mosaic is a grid that otherwise collapses to
     its min-content width and the four tiles turn tiny */
  align-items: stretch;
  justify-content: center;
}
.hero__media .icon-scene { inline-size: 100%; }
.hero__media img {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.hero__diamond {
  position: absolute;
  z-index: 1;
  inset-inline-end: -34px;
  inset-block-start: -34px;
  inline-size: 230px;
  block-size: 230px;
  transform: rotate(45deg);
  background: var(--color-peach);
  border-radius: 30px;
}
@media (max-width: 900px) {
  .hero__grid { gap: var(--space-6); }
  .hero__diamond { inline-size: 160px; block-size: 160px; }
}

/* ---------- Page header ---------- */
.page-header { padding-block: var(--space-12) var(--space-8); border-block-end: 1px solid var(--color-border); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-12) var(--space-6);
  margin-block-start: 0;
}
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-block-end: var(--space-6);
}
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.site-footer h4,
.site-footer h2 {
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-block-end: var(--space-2);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: var(--space-1); font-size: var(--font-size-sm); }
.site-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  padding-block-start: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.5);
}

/* ==== components.css ==== */
/* ---------- Editorial primitives ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-block-end: var(--space-2);
}
.eyebrow--muted { color: var(--color-gray-soft); }
.section--ink .eyebrow, .section--orange .eyebrow { color: var(--color-peach); }

/* Section number + label header (03 · WHAT WE STAND FOR) */
.section-head { margin-block-end: var(--space-6); max-width: 720px; }
.section-head__index {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}
.section-head__num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-accent);
  line-height: 1;
}
.section-head__label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-soft);
}
.section--ink .section-head__label { color: rgba(255,255,255,0.7); }
.section-head__sub {
  font-style: italic;
  color: var(--color-accent);
  font-size: var(--font-size-md);
  margin-block-start: var(--space-2);
}

.rule-bar {
  inline-size: 44px;
  block-size: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-block-end: var(--space-3);
}

.lead {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text);
}
.italic-accent { font-style: italic; color: var(--color-accent); }

/* Serif "FDS" monogram */
.monogram {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-ink); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--on-ink { border-color: rgba(255,255,255,0.3); color: #fff; }
.btn--on-ink:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  inline-size: 16px; block-size: 16px; margin-inline-start: -8px; margin-block-start: -8px;
  border: 2px solid rgba(255,255,255,0.45); border-block-start-color: #fff;
  border-radius: var(--radius-full); animation: fdsSpin 700ms linear infinite;
}
@keyframes fdsSpin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }

/* ---------- Stat row ---------- */
.stat { border-block-start: 2px solid var(--color-ink); padding-block-start: var(--space-2); }
.stat__value { display: block; font-family: var(--font-serif); font-weight: 700; font-size: var(--font-size-xl); color: var(--color-accent); line-height: 1; }
.stat__label { display: block; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); margin-block-start: var(--space-1); }
.section--ink .stat { border-block-start-color: var(--color-accent); }
.section--ink .stat__label { color: rgba(255,255,255,0.7); }

/* ---------- Service block ---------- */
.service {
  padding-block-start: var(--space-3);
  border-block-start: 2px solid var(--color-ink);
}
.service__title { font-size: var(--font-size-lg); margin-block-end: var(--space-2); }
.service__body { color: var(--color-text-muted); font-size: var(--font-size-base); }
.service__icon { inline-size: 40px; block-size: 40px; margin-block-end: var(--space-2); }

/* ---------- Value prop / VMV column ---------- */
.pillar__title { font-size: var(--font-size-lg); margin-block-end: var(--space-2); }
.pillar__body { color: var(--color-text-muted); font-size: var(--font-size-base); }

/* ---------- Ports ---------- */
.port {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}
.port__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--font-size-md); color: var(--color-heading); }
.port__code { font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: 0.1em; color: var(--color-accent); }

/* ---------- Credentials ---------- */
.credential {
  background: #fff;
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-accent);
  border-radius: var(--radius-base);
  padding: var(--space-4);
}
.credential__title { font-size: var(--font-size-md); margin-block-end: var(--space-1); }
.credential__meta { font-family: var(--font-sans); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-block-end: var(--space-3); }
.credential__code { display: block; font-family: var(--font-mono); font-size: var(--font-size-md); color: var(--color-ink); margin-block-end: var(--space-3); }
.credential__body { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Why-us numbered ---------- */
.reason { display: flex; gap: var(--space-3); }
.reason__num { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-size-md); color: var(--color-accent); line-height: 1.2; }
.reason__title { font-size: var(--font-size-md); margin-block-end: var(--space-1); }
.reason__body { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Chips / tag lists (industries, regions, corridors) ---------- */
.taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.tag {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
}
.section--ink .tag { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
.industry { }
.industry__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--font-size-md); color: var(--color-heading); }
.industry__note { display: block; font-family: var(--font-sans); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-block-start: 2px; }

/* ---------- Split panel (thank-you / CTA) ---------- */
.panel-split { display: grid; grid-template-columns: 1fr 1.3fr; min-block-size: 380px; }
@media (max-width: 820px) { .panel-split { grid-template-columns: 1fr; } }
.panel-split__brand { background: var(--color-accent); color: #fff; padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }
.panel-split__brand .monogram { font-size: 5rem; color: #fff; }
.panel-split__body { background: var(--color-ink); color: #fff; padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; }

/* ---------- Testimonial ---------- */
.testimonial { max-width: 820px; }
.testimonial__quote { font-family: var(--font-serif); font-size: var(--font-size-lg); font-style: italic; line-height: 1.5; color: var(--color-heading); margin-block-end: var(--space-3); }
.testimonial__author { font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.testimonial__author span { color: var(--color-text-muted); font-weight: 400; }

/* ---------- Forms ---------- */
.form-field { margin-block-end: var(--space-3); }
.form-field label { display: block; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-soft); margin-block-end: var(--space-1); }
.form-field input, .form-field textarea, .form-field select {
  inline-size: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; font-family: var(--font-serif); font-size: var(--font-size-base); color: var(--color-ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-accent); outline: 2px solid rgba(243,146,0,0.25); outline-offset: 0; }
.form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: var(--color-gray); }
/* Placeholders are examples, not instructions. Smaller, italic and lighter than the
   value the visitor types, so a filled field is never mistaken for an empty one at a
   glance. --color-gray-soft is theme-aware, so this holds on the light designs and on
   Midnight 3's dark inputs. */
input::placeholder,
textarea::placeholder {
  color: var(--color-gray-soft);
  /* Setting opacity explicitly also overrides Firefox's own placeholder dimming,
     so every browser lands on the same fade instead of Firefox double-fading it. */
  opacity: 0.78;
  font-style: italic;
  font-size: 0.92em;
}
.form-field--required label::after { content: " *"; color: var(--color-accent); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-inline-end: var(--space-6); cursor: pointer; }
.select-wrap::after { content: ""; position: absolute; inset-inline-end: var(--space-2); inset-block-start: 50%; inline-size: 9px; block-size: 9px; margin-block-start: -6px; border-right: 2px solid var(--color-gray); border-bottom: 2px solid var(--color-gray); transform: rotate(45deg); pointer-events: none; }

/* ---------- Preview note ---------- */
.preview-note { background: var(--color-cream); border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-ink-soft); margin-block-end: var(--space-4); }
.badge-note { display: inline-block; background: var(--color-peach); color: var(--color-brand-orange-dark); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.9rem; border-radius: var(--radius-full); margin-block-end: var(--space-3); }

/* ---------- Quote result ---------- */
.result-reveal { opacity: 0; transform: translateY(14px); }
.result-reveal.is-visible { animation: fdsFadeInUp 450ms ease forwards; }
@keyframes fdsFadeInUp { to { opacity: 1; transform: translateY(0); } }
.quote-result, .track-result { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-block-start: 3px solid var(--color-accent); border-radius: var(--radius-base); padding: var(--space-4); }
.quote-result__badge { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-block-end: var(--space-3); }
.quote-result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-block-end: var(--space-3); }
@media (max-width: 600px) { .quote-result__grid { grid-template-columns: 1fr; } }
.quote-result__metric { background: #fff; border-radius: var(--radius-sm); padding: var(--space-3); }
.quote-result__label { display: block; font-family: var(--font-sans); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.quote-result__value { display: block; font-family: var(--font-serif); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-heading); margin-block-start: 2px; }

/* ---------- Tracking timeline ---------- */
.tracking-timeline { list-style: none; padding: 0; margin-block: var(--space-4); }
.tracking-step { position: relative; padding-inline-start: var(--space-4); padding-block-end: var(--space-4); border-inline-start: 2px solid var(--color-border-strong); opacity: 0; transform: translateY(8px); }
.tracking-timeline.is-visible .tracking-step { animation: fdsFadeInUp 400ms ease forwards; animation-delay: calc(var(--step-index, 0) * 90ms); }
.tracking-step:last-child { border-inline-start-color: transparent; padding-block-end: 0; }
.tracking-step__marker { position: absolute; inset-inline-start: -7px; inset-block-start: 3px; inline-size: 12px; block-size: 12px; border-radius: var(--radius-full); background: #fff; border: 2px solid var(--color-border-strong); }
.tracking-step--done .tracking-step__marker, .tracking-step--current .tracking-step__marker { border-color: var(--color-accent); background: var(--color-accent); }
.tracking-step--current .tracking-step__marker { box-shadow: 0 0 0 4px var(--color-peach); }
.tracking-step__label { display: block; font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-sm); }
.tracking-step--current .tracking-step__label { color: var(--color-accent); }
.tracking-step__date { display: block; font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---------- Photo strip (freight modes) ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.photo-strip figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.photo-strip img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform var(--transition-base); }
.photo-strip figure:hover img { transform: scale(1.04); }
.photo-strip figcaption {
  position: absolute;
  inset-inline-start: var(--space-2);
  inset-block-end: var(--space-2);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) { .photo-strip { grid-template-columns: 1fr; } }

/* ---------- Language toggle ---------- */
.lang-toggle { font-family: var(--font-sans); font-weight: 700; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.45rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-ink-soft); transition: border-color var(--transition-base), color var(--transition-base); }
.lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .btn--loading::after, .result-reveal.is-visible, .tracking-timeline.is-visible .tracking-step { animation: none; }
  .result-reveal.is-visible, .tracking-timeline.is-visible .tracking-step { opacity: 1; transform: none; }
}

/* ---------- Partners ("We work with") logo wall ---------- */
.partners { border-block: 1px solid var(--color-border); }
.partners__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-4); }
.partners__head .eyebrow { margin: 0; }
.partners__sub { font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }
.partners__track { display: flex; gap: var(--space-6); overflow: hidden; }
[data-theme^="night"] .partners__track { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); flex: 0 0 100%; inline-size: 100%; justify-content: center; }
.partners__item { display: flex; align-items: center; justify-content: center; block-size: 64px; padding-inline: var(--space-2); }
.partners__item img {
  block-size: 48px; inline-size: auto; max-inline-size: 220px; object-fit: contain; display: block;
  /* Mono: normalise each logo's own lightness (--tone, measured per file),
     flatten to the page's ink, then soften. Without --tone the gold marks
     (Etihad, Oman Air) read faint here and near-invisible once inverted. */
  filter: brightness(var(--tone, 1)) grayscale(1) contrast(1.15) opacity(.8);
  transition: filter var(--transition-base), transform var(--transition-base);
}
.partners__item:hover img { filter: brightness(var(--tone, 1)) grayscale(1) contrast(1.15) opacity(1); transform: translateY(-2px); }
/* Static wall by default; Midnight designs animate the marquee (see themes.css) */
.partners__row[aria-hidden="true"] { display: none; }
@media (max-width: 700px) { .partners__item img { block-size: 30px; max-inline-size: 110px; } }

/* ---------- IATA badge (footer, all designs) ---------- */
.iata-badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); padding: .6rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-base); text-decoration: none; transition: border-color var(--transition-base); }
.iata-badge:hover { border-color: var(--color-accent); }
.iata-badge img { block-size: 28px; inline-size: auto; filter: brightness(0) invert(1); }
.iata-badge__text { display: flex; flex-direction: column; font-family: var(--font-sans); line-height: 1.25; }
.iata-badge__text strong { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.iata-badge__text span { font-family: var(--font-mono); font-size: var(--font-size-xs); color: rgba(255,255,255,.6); }

/* IATA logo inside the credential card + hero accreditation chip */
.credential__logo { display: block; block-size: 56px; inline-size: auto; margin-block-end: var(--space-3); }
[data-theme^="night"] .credential__logo { filter: brightness(0) invert(1); }
.hero__badges { margin-block-start: var(--space-4); }
.hero__badges .iata-badge { margin: 0; border-color: var(--color-border-strong); background: var(--color-bg-alt); }
.hero__badges .iata-badge img { filter: none; }
.hero__badges .iata-badge__text strong { color: var(--color-heading); }
.hero__badges .iata-badge__text span { color: var(--color-text-muted); }
[data-theme^="night"] .hero__badges .iata-badge img { filter: brightness(0) invert(1); }
[data-theme^="night"] .site-footer .iata-badge img { filter: brightness(0) invert(1); }
[data-theme^="night"] .hero__badges .iata-badge { background: rgba(255,255,255,.04); }

.cred-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.cred-badges .iata-badge { margin: 0; }
.iata-badge--caa img { block-size: 32px; }
.hero__badges { margin-block-start: var(--space-4); }
.hero__badges .cred-badges { margin: 0; }

/* Mono brand logo (replaces the "FDS" text monogram in the CTA panel + footer) */
.brand-logo { display: block; inline-size: auto; block-size: 44px; margin-block-end: var(--space-3); }
.brand-logo--on-dark { filter: brightness(0) invert(1); }
.brand-logo--on-accent { block-size: 64px; filter: brightness(0) invert(1); margin-inline: 0; }
.panel-split__brand .brand-logo { margin-block-end: var(--space-3); align-self: flex-start; }
[dir="rtl"] .panel-split__brand .brand-logo { align-self: flex-start; }

/* ---------- Industries (icon cards) ---------- */
/* This section is defined by its icons, so they show in every design — including
   Classic, where .ic is otherwise hidden. */
.industries .ic { display: inline-flex; }
.industry-card .service__title { font-size: var(--font-size-md); }
.industry-card .service__body { font-size: var(--font-size-sm); }
@media (max-width: 900px) { .industries .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .industries .grid--4 { grid-template-columns: 1fr; } }

/* ---------- Dynamic quote fields + phone country picker ---------- */
/* Mode-specific groups are toggled by site-forms.js; be explicit so a grid or
   flex display rule can never win over [hidden]. */
.form-field[hidden], .field-row[hidden] { display: none !important; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.form-field--full { grid-column: 1 / -1; }
p.form-help { margin-block-end: var(--space-3); }
.form-help a { color: var(--color-heading); text-decoration: underline; text-underline-offset: 2px; }
.cta-band h2 { margin-block-end: var(--space-2); }
.form-help { display: block; margin-block-start: var(--space-1); font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Country dial-code picker.
   Closed, the control shows only the flag and the dial code; the list adds the
   country name. That needs a real combobox — a native <select> renders the same
   label in both places — so site-forms.js builds .cc__btn/.cc__pop and hides the
   <select>, which stays in the DOM as the thing that actually submits. Until the
   script runs (or if it never does) the plain select is what shows. */
.phone-field .phone-row { display: flex; gap: var(--space-2); align-items: stretch; }
.phone-field .phone-row input[type="tel"] { flex: 1 1 auto; min-inline-size: 0; }
.cc { position: relative; flex: 0 0 auto; inline-size: 8.5rem; }
.cc .cc__native { inline-size: 100%; }
.cc .cc__native select { inline-size: 100%; text-overflow: ellipsis; }
.cc--ready .cc__native { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Closed control — matches .form-field input exactly so the row reads as one unit. */
.cc__btn {
  display: none; inline-size: 100%; align-items: center; gap: var(--space-2);
  padding: 0.85rem 1rem; padding-inline-end: var(--space-6);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; font-family: var(--font-serif); font-size: var(--font-size-base);
  color: var(--color-ink); cursor: pointer; text-align: start; position: relative;
  min-block-size: 100%;
}
.cc--ready .cc__btn { display: inline-flex; }
.cc__btn:hover { border-color: var(--color-gray); }
.cc__btn:focus-visible { border-color: var(--color-accent); outline: 2px solid rgba(243,146,0,0.25); outline-offset: 0; }
.cc__btn .cc__dial { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc__chev {
  position: absolute; inset-inline-end: var(--space-2); inset-block-start: 50%;
  inline-size: 9px; block-size: 9px; margin-block-start: -6px;
  border-right: 2px solid var(--color-gray); border-bottom: 2px solid var(--color-gray);
  transform: rotate(45deg);
}
.cc__flag { font-size: 1.15em; line-height: 1; }

/* Open list */
.cc__pop {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; z-index: 40;
  inline-size: 20rem; max-inline-size: min(20rem, calc(100vw - 2rem));
  background: #fff; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base); box-shadow: 0 12px 32px rgba(0,0,0,.16);
  padding: var(--space-2);
}
.cc__search {
  inline-size: 100%; padding: 0.5rem 0.7rem; margin-block-end: var(--space-2);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--font-size-sm); background: #fff; color: var(--color-ink);
}
.cc__search:focus { border-color: var(--color-accent); outline: none; }
.cc__list { list-style: none; margin: 0; padding: 0; max-block-size: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.cc__opt {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-ink);
}
/* .cc__opt sets display:flex, which outranks the UA stylesheet's [hidden]{display:none},
   so the search filter has to hide rows explicitly or it filters nothing on screen. */
.cc__opt[hidden] { display: none !important; }
.cc__opt .cc__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__opt .cc__code { flex: 0 0 auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cc__opt.is-active { background: var(--color-cream, #F5F2EC); }
.cc__opt[aria-selected="true"] { font-weight: 700; }
.cc__opt[aria-selected="true"] .cc__code { color: var(--color-accent); }
/* The control sits at the row's start, which on an Arabic page is the RIGHT edge —
   anchoring the list to its left there pushes it off-screen. Pin the other edge. */
[dir="rtl"] .cc__pop { inset-inline-start: auto; inset-inline-end: 0; }
/* Near the bottom of the viewport the list opens upward instead (set by site-forms.js). */
.cc__pop.cc__pop--up { inset-block-start: auto; inset-block-end: calc(100% + 4px); }
.cc__empty { margin: 0; padding: 0.6rem; font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (max-width: 420px) { .cc { inline-size: 7.5rem; } }

/* ==== themes.css ==== */
/* ==========================================================================
   FDS design variants — switched via <html data-theme="...">.
   Default (no attribute / "classic") = the editorial serif design in tokens.css.
   Same markup + content everywhere; these override tokens and reskin details.
   ========================================================================== */

/* ======================== MIDNIGHT 3 — base tokens ====================== */
/* From the approved social-post mockup: dark navy, orange-topped rounded
   cards, bold sans headings, pill buttons, soft orange glows. */

[data-theme^="night"]{
  --color-brand-orange: #E7611A;
  --color-brand-orange-dark: #F2743A;
  --color-peach: rgba(231, 97, 26, 0.16);
  --color-cream: #202F42;

  --color-ink: #111B28;
  --color-ink-soft: #E7EDF5;
  --color-gray: #93A3B8;
  --color-gray-soft: #6C7E94;

  --color-neutral-50: #1E2A3C;
  --color-neutral-100: #2A3A50;
  --color-neutral-200: #3C4E68;
  --color-neutral-900: #111B28;

  --color-bg: #192533;
  --color-bg-alt: #202F42;
  --color-bg-peach: #1D2A3B;
  --color-text: #D9E1EC;
  --color-text-muted: #93A3B8;
  --color-heading: #FFFFFF;
  --color-border: #29384C;
  --color-border-strong: #3A4C66;

  --color-accent: #E7611A;
  --color-accent-hover: #F2743A;

  /* sans throughout — no serif editorial voice in this design */
  --font-serif: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;

  --radius-sm: 10px;
  --radius-base: 14px;
  --radius-lg: 18px;

  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 10px 32px rgba(0, 0, 0, 0.45);
}

[data-theme^="night"] h1,
[data-theme^="night"] h2,
[data-theme^="night"] h3,
[data-theme^="night"] h4{
  letter-spacing: -0.02em;
  font-weight: 800;
}

[data-theme^="night"] .site-header{
  background: rgba(15, 22, 33, 0.92);
  border-block-end-color: var(--color-border);
}
[data-theme^="night"] .site-header__logo img{
  filter: brightness(0) invert(1);
}
[data-theme^="night"] .nav-toggle{ color: #FFFFFF; }
[data-theme^="night"] .site-nav__link{ color: var(--color-text); }
[data-theme^="night"] .site-nav__link:hover,
[data-theme^="night"] .site-nav__link[aria-current="page"]{ color: var(--color-accent); }
@media (max-width: 900px) {
  [data-theme^="night"] .site-nav{ background: #131E2C; }}

/* Hero: replace the rotated diamond with the mockup's soft ring glow */
[data-theme^="night"] .hero__diamond{
  transform: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 97, 26, 0.35) 0%, rgba(231, 97, 26, 0.08) 45%, transparent 70%);
  inset-block-start: -60px;
  inset-inline-end: -60px;
}
[data-theme^="night"] .hero__media img{ box-shadow: 0 16px 48px rgba(0,0,0,.5); }

/* Cards: dark panels with the signature orange top bar */
[data-theme^="night"] .service,
[data-theme^="night"] .reason,
[data-theme^="night"] .pillar-card{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-accent);
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-3);
}
[data-theme^="night"] .stat{
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-accent);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  text-align: center;
}
[data-theme^="night"] .credential{
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}
[data-theme^="night"] .credential__code{ color: #FFFFFF; }
/* Eyebrow labels on dark panels used --color-peach (now a 16%-alpha glow tint) — give them a solid readable orange */
[data-theme^="night"] .section--ink .eyebrow,
[data-theme^="night"] .section--orange .eyebrow{ color: #F49B62; }
[data-theme^="night"] .quote-result,
[data-theme^="night"] .track-result{
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}
[data-theme^="night"] .quote-result__metric{ background: #16202E; }
[data-theme^="night"] .port{ border-block-end-color: var(--color-border); }
[data-theme^="night"] .industry{ border-block-start-color: var(--color-border) !important; }

[data-theme^="night"] .section--ink{ background: #111B28; }
[data-theme^="night"] .panel-split__body{ background: #111B28; }

/* Pill buttons like the mockup CTA */
[data-theme^="night"] .btn{ border-radius: 999px; font-weight: 700; }
[data-theme^="night"] .btn--outline{ border-color: var(--color-border-strong); color: var(--color-text); }
[data-theme^="night"] .btn--outline:hover{ border-color: var(--color-accent); color: var(--color-accent); }

[data-theme^="night"] .form-field input,
[data-theme^="night"] .form-field textarea,
[data-theme^="night"] .form-field select{
  background: #16202E;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
[data-theme^="night"] .preview-note{ background: var(--color-cream); color: var(--color-text); }
[data-theme^="night"] .tracking-step__marker{ background: #16202E; }
[data-theme^="night"] .tracking-step--done .tracking-step__marker,
[data-theme^="night"] .tracking-step--current .tracking-step__marker{ background: var(--color-accent); }
[data-theme^="night"] .lang-toggle{ border-color: var(--color-border-strong); color: var(--color-text); background: transparent; }
[data-theme^="night"] .theme-select{
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background-color: transparent; /* NOT the shorthand — it would erase the chevron image */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.5l3 3 3-3' fill='none' stroke='%23AFBDD0' stroke-width='1.5'/%3E%3C/svg%3E");
}
[data-theme^="night"] ::selection{ background: rgba(231,97,26,.4); color: #fff; }

/* ========================= Theme dropdown control ======================== */
.theme-select{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 2rem 0.45rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.5l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
[dir="rtl"] .theme-select{
  padding: 0.45rem 0.9rem 0.45rem 2rem;
  background-position: left 0.7rem center;
}
.theme-select:hover{ border-color: var(--color-accent); color: var(--color-accent); }
[lang="ar"] .theme-select{ font-family: var(--font-arabic); letter-spacing: normal; }

/* ================= Icon slots, floats, reveal — shared plumbing ========== */
/* Hidden by default; Midnight 3 and Daylight switch them on. Classic unchanged. */
.ic,
.hero-scene,
.icon-scene,
.float{ display: none; }
.scene{ position: relative; }
.scene > .container,
.scene > .panel-split__brand,
.scene > .panel-split__body{ position: relative; z-index: 1; }

.ic{
  /* Icon tone is set per SECTION (see "Icon tones" below) so the page reads as
     distinct bands instead of one long run of identical orange tiles. */
  --ic-bg: linear-gradient(145deg, #F2743A, #D9531A);
  --ic-fg: #fff;
  --ic-bd: rgba(255,255,255,.12);
  inline-size: 56px; block-size: 56px;
  align-items: center; justify-content: center;
  border-radius: 14px;
  font-size: 1.5rem;
  color: var(--ic-fg);
  background: var(--ic-bg);
  border: 1px solid var(--ic-bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(231,97,26,0);
  margin-block-end: var(--space-2);
  transition: transform 350ms cubic-bezier(.2,.8,.2,1), box-shadow 350ms, background 350ms;
  flex-shrink: 0;
}
.reason .ic{ margin-block-end: 0; inline-size: 52px; block-size: 52px; }
.stat .ic{ margin-inline: auto; }
[data-theme="night3"] .ic{ display: inline-flex; }
[data-theme="night3"] .reason__num{ display: none; }
.reason,
.pillar,
.credential,
.stat):hover .ic,
[data-theme="night3"] :is(.service,
.reason,
.pillar,
.credential,
.stat):hover .ic{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(231,97,26,.28);
}

/* Reveal-on-scroll: inert unless a motion theme is active */
[data-theme="night3"] .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-theme="night3"] .reveal.is-in{ opacity: 1; transform: none; }
[data-theme="night3"] .hero__inner.reveal{ transform: translateY(12px); }

/* ============================== MIDNIGHT 3 ============================== */
/* Quiet, icon-led. No large imagery. Crisp outlines, subtle grid texture. */
[data-theme="night3"]{
  --color-bg: #0F1722;
  --color-bg-alt: #131D2B;
  --color-bg-peach: #121B28;
  --color-border: #24313F;
  --color-border-strong: #344456;
  --radius-base: 12px;
  --radius-lg: 16px;
  --shadow-card: none;
}
[data-theme="night3"] body{
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 44px 44px;
}
[data-theme="night3"] .site-header{ background: rgba(15, 23, 34, 0.85); }
[data-theme="night3"] .section--alt{ background: var(--color-bg-alt); border-block: 1px solid var(--color-border); }
[data-theme="night3"] .section--ink,
[data-theme="night3"] .panel-split__body{ background: #0A1119; }

/* Hero: photo out, compact icon mosaic in */
[data-theme="night3"] .hero{ padding-block: var(--space-12); }
[data-theme="night3"] .hero__media > img,
[data-theme="night3"] .hero__diamond{ display: none; }
[data-theme="night3"] .icon-scene{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  position: relative;
  max-inline-size: 380px;
  margin-inline: auto;
  padding: var(--space-3);
}
[data-theme="night3"] .icon-scene__tile{
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.6rem;
  color: var(--color-accent);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  animation: fdsTilePulse 5s ease-in-out infinite;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), border-color 300ms, color 300ms;
}
[data-theme="night3"] .icon-scene__tile:nth-child(2){ animation-delay: 1.2s; }
[data-theme="night3"] .icon-scene__tile:nth-child(3){ animation-delay: 2.4s; }
[data-theme="night3"] .icon-scene__tile:nth-child(4){ animation-delay: 3.6s; }
@keyframes fdsTilePulse { 50%{ border-color: rgba(231,97,26,.6); box-shadow: 0 0 28px rgba(231,97,26,.18); }}
[data-theme="night3"] .icon-scene__tile:hover{ transform: scale(1.06); color: #fff; border-color: var(--color-accent); }

/* Cards: flat outline, icon-first, accent only on hover */
[data-theme="night3"] .service,
[data-theme="night3"] .reason,
[data-theme="night3"] .pillar,
[data-theme="night3"] .stat,
[data-theme="night3"] .credential{
  background: transparent;
  border: 1px solid var(--color-border);
  border-block-start: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-4);
  box-shadow: none;
  transition: border-color 250ms, background 250ms, transform 300ms cubic-bezier(.2,.8,.2,1);
}
[data-theme="night3"] .pillar .rule-bar{ display: none; }
[data-theme="night3"] :is(.service,
.reason,
.pillar,
.stat,
.credential):hover{
  border-color: var(--color-accent);
  background: rgba(231,97,26,.05);
  transform: translateY(-3px);
}
[data-theme="night3"] .ic{ border-radius: 12px; --ic-bg: var(--color-accent); --ic-fg: #fff; --ic-bd: transparent; }
[data-theme="night3"] :is(.service,
.reason,
.pillar,
.credential,
.stat):hover .ic{ background: #fff; color: var(--color-accent); transform: none; box-shadow: none; }
[data-theme="night3"] .reason{ align-items: flex-start; }
[data-theme="night3"] .photo-strip{ display: none; }
[data-theme="night3"] .float{ display: none; }
[data-theme="night3"] .section-head__num{ font-family: var(--font-mono); font-weight: 400; color: var(--color-text-muted); font-size: var(--font-size-sm); }
[data-theme="night3"] .section-head__num::before{ content: "// "; color: var(--color-accent); }
[data-theme="night3"] .btn{ border-radius: 10px; }
[data-theme="night3"] .btn--primary::after{ content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8em; transition: transform 250ms; }
[dir="rtl"][data-theme="night3"] .btn--primary::after{ content: "\f060"; }
[data-theme="night3"] .btn--primary:hover::after{ transform: translateX(3px); }
[dir="rtl"][data-theme="night3"] .btn--primary:hover::after{ transform: translateX(-3px); }
[data-theme="night3"] .tag{ border-radius: 6px; }
[data-theme="night3"] .tag::before{ content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-accent); margin-inline-end: .5em; font-size: .85em; }
[data-theme="night3"] .port__name::before{ content: "\f13d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-accent); margin-inline-end: .6em; font-size: .8em; }

@media (prefers-reduced-motion: reduce) {
  [data-theme^="night"] .float,
[data-theme^="night"] .hero-scene__glow,
[data-theme^="night"] .icon-scene__tile{ animation: none; }
  [data-theme^="night"] .reveal{ opacity: 1; transform: none; transition: none; }}

/* ========================== Page transitions ============================ */
/* Native cross-document view transitions where supported; the header is pinned
   so only the page body slides. Fallback below is driven by main.js. */
@view-transition{ navigation: auto; }
.site-header{ view-transition-name: site-header; }
@keyframes fdsPageOut { to{ opacity: 0; transform: translateY(-14px); }}
@keyframes fdsPageIn  { from{ opacity: 0; transform: translateY(18px); }}
::view-transition-old(root){ animation: 220ms cubic-bezier(.4,0,1,1) both fdsPageOut; }
::view-transition-new(root){ animation: 420ms 80ms cubic-bezier(.2,.8,.2,1) both fdsPageIn; }
::view-transition-old(site-header),
::view-transition-new(site-header){ animation: none; }

/* Fallback (no View Transitions): JS toggles these on <html> */
html.page-leaving main,
html.page-leaving .site-footer{ opacity: 0; transform: translateY(-14px); transition: opacity 200ms ease, transform 200ms ease; }
html.page-entering main,
html.page-entering .site-footer{ opacity: 0; transform: translateY(18px); }
html.page-entered main,
html.page-entered .site-footer{ opacity: 1; transform: none; transition: opacity 420ms cubic-bezier(.2,.8,.2,1), transform 420ms cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
::view-transition-new(root){ animation: none; }
  html.page-leaving main,
html.page-leaving .site-footer,
html.page-entering main,
html.page-entering .site-footer{ opacity: 1; transform: none; transition: none; }}

/* ===================== Partners wall — Midnight 3 ======================== */
/* Logos go white-mono on dark; the strip becomes an infinite marquee */
[data-theme^="night"] .partners__item img{ filter: brightness(var(--tone, 1)) grayscale(1) invert(1) contrast(1.1) brightness(1.15) opacity(.8); }
[data-theme^="night"] .partners__item:hover img{ filter: brightness(var(--tone, 1)) grayscale(1) invert(1) contrast(1.1) brightness(1.2) opacity(1); }
[data-theme="night3"] .partners{ border-color: var(--color-border); }
[data-theme="night3"] .partners__track{ gap: 0; }
[data-theme="night3"] .partners__row[aria-hidden="true"]{ display: flex; }
[data-theme="night3"] .partners__row{
  display: flex; flex: 0 0 auto; inline-size: auto; flex-wrap: nowrap; justify-content: flex-start; gap: var(--space-10, 5rem); padding-inline-end: var(--space-10, 5rem);
  animation: fdsMarquee 38s linear infinite;
}
[data-theme="night3"] .partners__track:hover .partners__row{ animation-play-state: paused; }
@keyframes fdsMarquee { to{ transform: translateX(-100%); }}
[dir="rtl"] .partners__row{ animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  /* Stopping the marquee is not enough: night3/day lay the wall out as one
     nowrap row wider than its overflow:hidden track, so a frozen row hides
     most of the carriers. Fall back to the static wrapped wall. */
  .partners__row{ animation: none !important; }
  .partners__row[aria-hidden="true"]{ display: none !important; }
  [data-theme="night3"] .partners__row,
  [data-theme="day"] .partners__row{
    flex: 0 0 100% !important; inline-size: 100% !important;
    flex-wrap: wrap !important; justify-content: center !important;
    gap: var(--space-4) var(--space-6) !important; padding-inline-end: 0 !important;
  }
}

[data-theme="night3"] .credential--logo{ position: relative; }

/* ============================== DAYLIGHT ================================ */
/* Midnight 3's layout, typography and icon language, in the Classic palette.
   The colours need no overrides — this theme key does not match
   [data-theme^="night"], so it inherits :root. Only the structure, the sans
   headings, and the handful of values Midnight 3 hard-coded for a dark
   ground are restated here for paper. */
[data-theme="day"]{
  --font-serif: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --radius-sm: 10px;
  --radius-base: 12px;
  --radius-lg: 16px;
  --shadow-card: none;
  --shadow-card-hover: none;
}
[data-theme="day"] h1,
[data-theme="day"] h2,
[data-theme="day"] h3,
[data-theme="day"] h4{ letter-spacing: -0.02em; font-weight: 800; }

/* The same faint grid, drawn in ink instead of light */
[data-theme="day"] body{
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(14, 17, 22, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 17, 22, .035) 1px, transparent 1px);
  background-size: 44px 44px;
}
[data-theme="day"] .site-header{ background: rgba(255, 255, 255, 0.88); }
[data-theme="day"] .section--alt{ background: var(--color-bg-alt); border-block: 1px solid var(--color-border); }

/* Icon-led: no photography anywhere */
[data-theme="day"] .hero{ padding-block: var(--space-12); }
[data-theme="day"] .hero__media > img,
[data-theme="day"] .hero__diamond,
[data-theme="day"] .photo-strip,
[data-theme="day"] .float,
[data-theme="day"] .pillar .rule-bar{ display: none; }
[data-theme="day"] .ic{ display: inline-flex; }
[data-theme="day"] .reason__num{ display: none; }

/* Hero mosaic + its slow orbit */
[data-theme="day"] .icon-scene{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  position: relative;
  max-inline-size: 380px;
  margin-inline: auto;
  padding: var(--space-3);
}
[data-theme="day"] .icon-scene__tile{
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.6rem;
  color: var(--color-accent);
  background: linear-gradient(160deg, #FFFFFF, var(--color-cream));
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  animation: fdsTilePulseDay 5s ease-in-out infinite;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), border-color 300ms, color 300ms, background 300ms;
}
[data-theme="day"] .icon-scene__tile:nth-child(2){ animation-delay: 1.2s; }
[data-theme="day"] .icon-scene__tile:nth-child(3){ animation-delay: 2.4s; }
[data-theme="day"] .icon-scene__tile:nth-child(4){ animation-delay: 3.6s; }
@keyframes fdsTilePulseDay { 50%{ border-color: rgba(243, 146, 0, .55); box-shadow: 0 0 26px rgba(243, 146, 0, .16); }}
[data-theme="day"] .icon-scene__tile:hover{
  transform: scale(1.06);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Cards: flat outline, icon-first, accent only on hover */
[data-theme="day"] .service,
[data-theme="day"] .reason,
[data-theme="day"] .pillar,
[data-theme="day"] .stat,
[data-theme="day"] .credential{
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-block-start: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  padding: var(--space-4);
  box-shadow: none;
  transition: border-color 250ms, background 250ms, transform 300ms cubic-bezier(.2,.8,.2,1);
}
[data-theme="day"] :is(.service,
.reason,
.pillar,
.stat,
.credential):hover{
  border-color: var(--color-accent);
  background: var(--color-cream);
  transform: translateY(-3px);
}
[data-theme="day"] .ic{ border-radius: 12px; --ic-bg: var(--color-accent); --ic-fg: #fff; --ic-bd: transparent; }
[data-theme="day"] :is(.service,
.reason,
.pillar,
.credential,
.stat):hover .ic{
  background: #fff; color: var(--color-accent); border-color: var(--color-accent);
  transform: none; box-shadow: none;
}
[data-theme="day"] .reason{ align-items: flex-start; }

/* Mono section numbers, arrow buttons, icon-prefixed tags and ports */
[data-theme="day"] .section-head__num{ font-family: var(--font-mono); font-weight: 400; color: var(--color-text-muted); font-size: var(--font-size-sm); }
[data-theme="day"] .section-head__num::before{ content: "// "; color: var(--color-accent); }
[data-theme="day"] .btn{ border-radius: 10px; }
[data-theme="day"] .btn--primary::after{ content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8em; transition: transform 250ms; }
[dir="rtl"][data-theme="day"] .btn--primary::after{ content: "\f060"; }
[data-theme="day"] .btn--primary:hover::after{ transform: translateX(3px); }
[dir="rtl"][data-theme="day"] .btn--primary:hover::after{ transform: translateX(-3px); }
[data-theme="day"] .tag{ border-radius: 6px; }
[data-theme="day"] .tag::before{ content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-accent); margin-inline-end: .5em; font-size: .85em; }
[data-theme="day"] .port__name::before{ content: "\f13d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-accent); margin-inline-end: .6em; font-size: .8em; }

/* Scroll reveal (same cadence as the Midnight designs) */
[data-theme="day"] .reveal{
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-theme="day"] .reveal.is-in{ opacity: 1; transform: none; }

/* Partner wall as a marquee; logos keep the light-theme ink treatment */
[data-theme="day"] .partners__track{
  gap: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
[data-theme="day"] .partners__row[aria-hidden="true"]{ display: flex; }
[data-theme="day"] .partners__row{
  display: flex; flex: 0 0 auto; inline-size: auto; flex-wrap: nowrap; justify-content: flex-start;
  gap: var(--space-10, 5rem); padding-inline-end: var(--space-10, 5rem);
  animation: fdsMarquee 38s linear infinite;
}
[data-theme="day"] .partners__track:hover .partners__row{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="day"] .icon-scene__tile{ animation: none; }
  [data-theme="day"] .reveal{ opacity: 1; transform: none; transition: none; }}

/* Country picker (built by site-forms.js) is outside .form-field, so it needs its
   own dark skin to match the inputs beside it. */
[data-theme^="night"] .cc__btn{ background: #16202E; border-color: var(--color-border-strong); color: var(--color-text); }
[data-theme^="night"] .cc__pop{ background: #16202E; border-color: var(--color-border-strong); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
[data-theme^="night"] .cc__search{ background: #101823; border-color: var(--color-border-strong); color: var(--color-text); }
[data-theme^="night"] .cc__opt{ color: var(--color-text); }
[data-theme^="night"] .cc__opt.is-active{ background: rgba(255,255,255,.08); }
[data-theme^="night"] .cc__empty{ color: var(--color-text-muted); }

/* ---------------- Icon tones (per section) --------------------------------
   Every card macro renders the same .ic tile, so five consecutive sections of
   solid orange read as one heavy block. Each SECTION gets one tone instead —
   brand orange, ink, or a light outline — which differentiates the bands while
   keeping a single three-colour system. Only the tokens change; size, radius,
   hover and motion stay shared.
   Order down the home page: stats orange -> services ink -> industries soft ->
   why-us orange -> vision ink.                                             */
[data-theme="night3"] :is(.service, .pillar) .ic,
[data-theme="day"]    :is(.service, .pillar) .ic{
  --ic-bg: var(--ic-ink-bg); --ic-fg: var(--ic-ink-fg); --ic-bd: var(--ic-ink-bd);
}
/* Industries is the densest grid (8 tiles) — give it the lightest treatment. */
[data-theme="night3"] .industries .service .ic,
[data-theme="day"]    .industries .service .ic{
  --ic-bg: var(--ic-soft-bg); --ic-fg: var(--ic-soft-fg); --ic-bd: var(--ic-soft-bd);
}

/* Light designs: ink is a true near-black tile. */
[data-theme="day"]{
  --ic-ink-bg: #14181F; --ic-ink-fg: #fff;             --ic-ink-bd: transparent;
  --ic-soft-bg: rgba(231,97,26,.10); --ic-soft-fg: var(--color-accent); --ic-soft-bd: rgba(231,97,26,.28);
}
/* Midnight 3 sits on a dark ground, so a black tile would disappear — the neutral
   tone there is a raised steel tile that still reads as "not orange". */
[data-theme="night3"]{
  --ic-ink-bg: rgba(255,255,255,.10); --ic-ink-fg: #fff; --ic-ink-bd: rgba(255,255,255,.20);
  --ic-soft-bg: transparent; --ic-soft-fg: var(--color-accent); --ic-soft-bd: rgba(231,97,26,.45);
}