:root {
  --navy: #1a2535;
  --navy-mid: #253347;
  --ice: #f4f6f8;
  --white: #ffffff;
  --red: #c8102e;
  --muted: #6b7785;
  --border: rgba(26,37,53,0.1);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", sans-serif;
}

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

/* Eliminate the 300ms tap-delay that some mobile browsers (older Safari,
   quirky Chromium forks like Comet) still apply while waiting to see if the
   user will double-tap to zoom. `manipulation` tells the browser: skip that
   wait, commit the tap immediately. Applied to all interactive elements
   (links, buttons, tabs, form controls, pills) — does NOT affect hover or
   click behaviour on desktop, and does NOT disable pinch-to-zoom elsewhere. */
a, button, [role="button"], [role="tab"], input[type="button"],
input[type="submit"], input[type="reset"], select, summary,
.stab, .hero-sector, .region-card, .cap-item, .step, .why-card,
.stat-item, .nav-burger, .lang-btn {
  touch-action: manipulation;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Prevent mobile Safari from auto-inflating text on orientation change,
     and stabilize text rendering across browsers. Does not override user's
     own browser zoom or OS accessibility settings (those remain respected). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Skip-to-content link — visible only when keyboard-focused */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 20px;
  background: #1a2535;
  color: #ffffff;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  transform: translateY(-140%);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid rgba(200,16,46,0.58);
  outline-offset: 3px;
}
body { background: var(--white); color: var(--navy); font-family: var(--sans); font-weight: 300; overflow-x: hidden; font-size: 16px; line-height: 1.75; text-rendering: optimizeLegibility; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(200,16,46,0.58);
  outline-offset: 3px;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 56px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: background 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.55s cubic-bezier(0.16,1,0.3,1), padding 0.55s cubic-bezier(0.16,1,0.3,1);
}
nav.scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.88) 100%);
  box-shadow: 0 1px 0 rgba(26,37,53,0.08), 0 10px 24px rgba(11,18,28,0.04);
  padding: 6px 56px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; position: relative; isolation: isolate; padding: 0; border: none; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: none; }
.nav-logo img { height: 120px; width: auto; display: block; transition: height 0.45s cubic-bezier(0.16,1,0.3,1), filter 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.45s cubic-bezier(0.16,1,0.3,1); filter: none; position: relative; z-index: 1; }
nav.scrolled .nav-logo img { height: 78px; filter: none; }
nav.scrolled .nav-logo {
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.nav-links { display: flex; gap: 44px; list-style: none; }
.nav-links a { font-family: var(--sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,37,53,0.78); text-decoration: none; transition: color 0.2s; position: relative; padding-bottom: 3px; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #c8102e; transition: width 0.3s ease; }
.nav-links a:hover { color: #1a2535; }
.nav-links a:hover::after { width: 100%; }
.nav-cta { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26,37,53,0.88); background: rgba(255,255,255,0.18); border: 1px solid rgba(26,37,53,0.18); border-radius: 50px; padding: 10px 26px; text-decoration: none; transition: background 0.25s, border-color 0.25s, color 0.25s, letter-spacing 0.25s; }
.nav-cta:hover { background: rgba(255,255,255,0.34); border-color: rgba(26,37,53,0.32); letter-spacing: 0.2em; color: #1a2535; }
.nav-scrolled .nav-cta,
nav.scrolled .nav-cta { background: transparent; border-color: rgba(26,37,53,0.3); color: #1a2535; }
nav.scrolled .nav-cta:hover { background: rgba(26,37,53,0.05); border-color: rgba(26,37,53,0.6); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.lang-switch { display: flex; align-items: center; gap: 6px; }
.lang-sep { font-size: 0.6rem; color: rgba(26,37,53,0.25); line-height: 1; }
.lang-btn { font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26,37,53,0.46); background: none; border: none; padding: 2px 0; cursor: pointer; transition: color 0.2s; line-height: 1; }
.lang-btn:hover { color: rgba(26,37,53,0.86); }
.lang-btn.active { color: rgba(26,37,53,0.94); border-bottom: 1px solid rgba(200,16,46,0.52); }
nav.scrolled .lang-btn { color: rgba(26,37,53,0.4); }
nav.scrolled .lang-btn:hover { color: var(--navy); }
nav.scrolled .lang-btn.active { color: var(--navy); border-bottom-color: var(--red); }

/* ── HERO ── */
#hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: block;
  padding-top: 0;
  /* Poster JPG has the video's filters (brightness 0.82 · saturation 0.84 ·
     contrast 0.92) baked in via ffmpeg — its look matches the played video
     exactly, so the poster→video swap is imperceptible on refresh. */
  background: #1a2535 url('images/video-poster.jpg') center 38% / cover no-repeat;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: brightness(0.82) saturate(0.84) contrast(0.92);
  transform: scale(1.03);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-bg.is-playing {
  opacity: 1;
}
/* Hide native browser play button overlay on mobile */
.hero-bg::-webkit-media-controls,
.hero-bg::-webkit-media-controls-enclosure,
.hero-bg::-webkit-media-controls-panel,
.hero-bg::-webkit-media-controls-play-button,
.hero-bg::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
/* heroFadeIn replaced by JS-driven .is-playing class — the video now fades
   in only once its first decoded frame is about to render, not on a blind
   CSS timer. Poster sits as #hero background underneath for zero-jerk swap. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(245,248,252,0.34) 0%,
      rgba(232,238,245,0.18) 16%,
      rgba(20,30,43,0.08) 34%,
      rgba(10,16,24,0.18) 54%,
      rgba(8,13,21,0.34) 100%
    ),
    linear-gradient(
      105deg,
      rgba(10,16,24,0.34) 0%,
      rgba(14,22,34,0.2) 34%,
      rgba(18,28,41,0.1) 62%,
      transparent 100%
    );
}
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), transparent 26%),
    radial-gradient(circle at 24% 38%, rgba(255,255,255,0.06), transparent 34%),
    radial-gradient(circle at 84% 66%, rgba(8,13,21,0.18), transparent 24%),
    radial-gradient(circle at 92% 74%, rgba(8,13,21,0.24), transparent 20%),
    linear-gradient(to top, rgba(8,13,21,0.22), transparent 32%),
    linear-gradient(to bottom, rgba(8,13,21,0.08), transparent 18%);
}
.hero-overlay::before {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: 42%;
  height: 46%;
  background:
    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.08), transparent 34%),
    radial-gradient(circle at 58% 54%, rgba(8,13,21,0.16), transparent 58%);
  filter: blur(26px);
  opacity: 0.56;
  pointer-events: none;
}
.hero-content {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 128px 72px 88px 64px;
  z-index: 2;
}
.hero-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11,18,28,0.18) 0%,
    rgba(11,18,28,0.06) 42%,
    transparent 78%
  );
  pointer-events: none;
  z-index: 0;
}
.hero-content > * { position: relative; z-index: 1; }
/* Hero text — white over image */
.hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 32px; }
.hero-dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.hero-headline { font-family: var(--serif); font-size: clamp(3.1rem,4.6vw,5.2rem); font-weight: 300; line-height: 1.01; letter-spacing: -0.02em; color: rgba(255,255,255,0.96); margin-bottom: 22px; opacity: 0; transform: translateY(24px); animation: fadeUp 1.1s 0.3s cubic-bezier(0.16,1,0.3,1) forwards; max-width: 560px; text-shadow: 0 8px 30px rgba(0,0,0,0.18); overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.hero-headline em { font-style: italic; color: rgba(255,255,255,0.62); opacity: 1; }
.hero-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; opacity: 0; animation: fadeUp 1.1s 0.45s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-sector { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.86); padding: 8px 13px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; cursor: pointer; text-decoration: none; position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.08); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; overflow: hidden; }
.hero-sector:last-child { border-right: none; }
/* Sequential shimmer — unified 10.5s master cycle shared with btn-primary below.
   Sweep occupies ~13% (~1.37s); rest of cycle the pill waits off-screen.
   Delays domino: pill1=0, pill2=1.5s, pill3=3s, pill4=4.5s, pill5=6s, btn-primary=7.5s.
   Only ONE element is lit at any moment. */
.hero-sector::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-160%);
  animation: sequentialShimmer 10.5s ease-in-out 0s infinite;
  pointer-events: none;
}
.hero-sector:nth-child(2)::after { animation-delay: 1.5s; }
.hero-sector:nth-child(3)::after { animation-delay: 3s; }
.hero-sector:nth-child(4)::after { animation-delay: 4.5s; }
.hero-sector:nth-child(5)::after { animation-delay: 6s; }
@keyframes sequentialShimmer {
  0% { transform: translateX(-160%); }
  13%, 100% { transform: translateX(240%); }
}
/* Mobile variant: 12s cycle with 7 elements (5 pills + 2 buttons).
   Sweep = 11% (~1.32s) keeps the glide speed consistent with desktop. */
@keyframes sequentialShimmerMobile {
  0% { transform: translateX(-160%); }
  11%, 100% { transform: translateX(240%); }
}
/* One-shot red sheen for Five Sectors tiles on mobile when a tile becomes
   active. Runs once (no infinite). Starts at -95% instead of -160% so the
   leading edge of the sweep is almost inside the tile at t=0 — user sees the
   effect within ~50ms of click (vs. 250ms with the longer runway), matching
   the mental model "click → immediate visual confirmation". */
@keyframes stabActivateShimmer {
  0% { transform: translateX(-95%); }
  100% { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sector::after { animation: none; display: none; }
}

/* Premium CTAs — OUR SERVICES (desktop) runs as step 5 in the sequential chain,
   sharing the 9s cycle with the hero pills. Delay 6s so it fires after pill 4. */
.btn-primary { overflow: hidden; position: relative; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: translateX(-160%);
  animation: sequentialShimmer 10.5s ease-in-out 7.5s infinite;
  pointer-events: none;
  z-index: 1;
}
.btn-primary > * { position: relative; z-index: 2; }
/* Submit button (contact form) — own loop, twice as frequent as the hero chain.
   Cycle 3.5s with a 28% sweep window keeps the sweep duration ~1s (same glide
   speed as hero shimmer) while doubling how often it fires. Delay 1.5s so the
   first pass is visible soon after the form renders. */
.btn-submit { position: relative; overflow: hidden; }
.btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  transform: translateX(-160%);
  animation: submitShimmer 3.5s ease-in-out 1.5s infinite;
  pointer-events: none;
  z-index: 1;
}
.btn-submit > * { position: relative; z-index: 2; }
@keyframes submitShimmer {
  0% { transform: translateX(-160%); }
  28%, 100% { transform: translateX(240%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after,
  .btn-submit::after { animation: none; display: none; }
}
/* Hover/tap feedback: no red accent (the shimmer + constant red dot in the
   hero-eyebrow already carry enough red). Signal instead through a blur-bump
   + whiter neutral edges + denser frosted background — the pill "rises out
   of" the scene behind it. Works on all modern browsers; on the few without
   backdrop-filter the border + background still make the hover obvious.

   Split into two rules:
   (1) Desktop :hover — wrapped in @media (hover: hover) so touch devices
       don't get the "sticky hover" behavior that leaves a pill visually
       highlighted after the user has tapped it and walked away. This was
       the bug causing Commodities to look "stuck red" after tap on mobile.
   (2) Touch tap feedback — .is-pressed class added by JS on touchstart/click
       and auto-removed after 680ms, so the highlight is intentional and
       temporary, not sticky. */
@media (hover: hover) {
  .hero-sector:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,0.40);
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.hero-sector.is-pressed {
  color: #ffffff;
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-tagline { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.84); margin-top: 0; font-family: var(--sans); font-weight: 500; }
.hero-rule { width: 72px; height: 1px; background: linear-gradient(to right, rgba(200,16,46,0.95), rgba(26,37,53,0.14)); margin-bottom: 22px; margin-top: 18px; }
.hero-sub { font-size: 1rem; line-height: 1.92; color: rgba(255,255,255,0.82); font-weight: 300; max-width: 500px; margin-bottom: 42px; opacity: 0; animation: fadeUp 1.1s 0.55s cubic-bezier(0.16,1,0.3,1) forwards; text-shadow: 0 8px 26px rgba(0,0,0,0.14); }
.hero-actions { display: flex; gap: 24px; align-items: center; opacity: 0; animation: fadeUp 1.1s 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes fadeUp { to { opacity: 1; transform: none; } }

.btn-primary { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; background: #1a2535; border: none; border-radius: 50px; padding: 14px 36px; text-decoration: none; display: inline-block; cursor: pointer; transition: background 0.25s, transform 0.2s, letter-spacing 0.25s, box-shadow 0.25s; }
.btn-primary:hover { background: #253347; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,37,53,0.18); letter-spacing: 0.18em; }
.btn-link { font-family: var(--sans); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; transition: color 0.2s, gap 0.2s, opacity 0.2s; position: relative; padding-bottom: 3px; opacity: 0.92; }
.btn-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #c8102e; transition: width 0.3s ease; pointer-events: none; }
.btn-link:hover { color: rgba(255,255,255,1); gap: 14px; opacity: 1; }
.btn-link:hover::after { width: 100%; }

/* ── STATS ── */
.stats-strip { background: linear-gradient(180deg, #1a2535 0%, #1d2a3c 100%); display: grid; grid-template-columns: repeat(4,1fr); position: relative; z-index: 2; }
.stat-item { padding: 32px 40px 28px; border-right: 1px solid rgba(255,255,255,0.07); text-align: center; position: relative; transition: background 0.35s, transform 0.35s; cursor: default; }
/* Stat cards reveal faster than generic .reveal (0.9s → 0.5s, shorter lift) */
.js-ready .stat-item.reveal { transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1), background 0.35s; transform: translateY(10px); }
.stat-item.is-pressed::before { width: 54px; }
.stat-item:last-child { border-right: none; }
@media (hover: hover) {
  .stat-item:hover { background: rgba(255,255,255,0.03); transform: translateY(-2px); }
  .stat-item:hover::before { width: 54px; height: 2px; }
}
.stat-item::before { content: ''; position: absolute; top: 0; left: 40px; width: 30px; height: 2px; background: var(--red); transition: width 0.3s ease; transform: none; }
.stat-number { font-family: var(--serif); font-size: 2.4rem; font-weight: 300; color: var(--white); margin-bottom: 10px; line-height: 1; letter-spacing: 0.01em; position: relative; display: inline-block; padding-bottom: 12px; font-variant-numeric: lining-nums; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum"; }
.stat-number::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(200,16,46,0.85) 50%, transparent 100%); }
.stat-label { font-size: 0.66rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); }

/* ── SECTIONS ── */
section { padding: 100px 56px; }
.section-inner { max-width: none; margin: 0; }
.section-eyebrow { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 18px; }
.section-title { font-family: var(--serif); font-size: clamp(2.2rem,3.2vw,3.2rem); font-weight: 300; line-height: 1.06; color: var(--navy); }
.section-title em { font-style: italic; opacity: 0.5; }

/* ── ABOUT ── */
#about { background: linear-gradient(180deg, #f4f6f8 0%, #f7f8fa 100%); padding: 0; overflow: hidden; }
.about-intro { padding: 92px 56px 48px; border-bottom: 1px solid rgba(26,37,53,0.08); }
.about-headline { font-family: var(--serif); font-size: clamp(2.8rem,4.7vw,5rem); font-weight: 300; line-height: 1.04; color: var(--navy); margin-top: 18px; max-width: 920px; }
.about-headline em { font-style: italic; opacity: 0.42; }
.about-split { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr); padding: 54px 56px 0; gap: 72px; align-items: start; }
.about-lead { font-family: var(--serif); font-size: 1.58rem; font-weight: 300; line-height: 1.58; color: var(--navy); max-width: 520px; }
.about-body { font-size: 0.96rem; line-height: 1.9; color: var(--muted); max-width: 660px; }
.about-body + .about-body { margin-top: 18px; }
.about-caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 56px 56px 0; }
.cap-item { padding: 28px 26px 26px; border: 1px solid rgba(26,37,53,0.08); background: rgba(255,255,255,0.82); position: relative; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; border-radius: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-height: 182px; }
.cap-item:nth-child(1),
.cap-item:nth-child(2) { grid-column: span 6; }
.cap-item:nth-child(n+3) { grid-column: span 4; }
@media (hover: hover) {
  .cap-item:hover { background: rgba(255,255,255,0.98); border-color: rgba(200,16,46,0.16); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(26,37,53,0.07); }
  .cap-item:hover::before { width: 44px; }
}
.cap-item::before { content: ''; position: absolute; top: 24px; left: 26px; width: 22px; height: 2px; background: var(--red); transition: width 0.3s; }
.cap-item:active::before { width: 44px; }
.cap-item.is-pressed::before { width: 44px; }
.cap-num { display: none; }
.cap-title { font-size: 1.06rem; font-weight: 500; color: var(--navy); line-height: 1.30; margin-bottom: 10px; padding-top: 16px; max-width: none; }
.cap-desc { font-size: 0.91rem; line-height: 1.76; color: var(--muted); max-width: 400px; }
.about-quote-full { padding: 56px 56px 72px; background: transparent; border-top: none; }
.about-quote-full blockquote { font-family: var(--serif); font-size: 1.46rem; font-style: italic; font-weight: 300; line-height: 1.7; color: var(--navy); max-width: 900px; border-left: 3px solid var(--red); padding-left: 30px; }

/* ── SERVICES ── */
#services { background: var(--white); padding: 82px 0 0; }
.services-header { padding: 0 56px 18px; max-width: none; margin: 0; }
.services-header .section-title { max-width: 740px; }
.services-tabs {
  display: grid;
  grid-template-columns: 360px 1fr;
  border: 1px solid rgba(26,37,53,0.08);
  background: linear-gradient(180deg, rgba(244,246,248,0.72) 0%, rgba(255,255,255,0.96) 100%);
  box-shadow: 0 22px 58px rgba(26,37,53,0.06);
}
.services-tablist {
  border-right: 1px solid rgba(26,37,53,0.08);
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  background: linear-gradient(180deg, #fbfbfc 0%, #f5f7f9 100%);
}
.stab { display: block; width: 100%; padding: 22px 34px 22px 38px; text-align: left; font-family: var(--sans); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: rgba(26,37,53,0.62); background: none; border: none; border-bottom: 1px solid rgba(26,37,53,0.07); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease; position: relative; overflow: hidden; }
.stab:last-child { border-bottom: none; }
.stab::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, rgba(200,16,46,0.90) 0%, rgba(200,16,46,0.60) 100%); border-radius: 0 3px 3px 0; transition: width 0.28s ease; pointer-events: none; }
.stab:hover { background: rgba(255,255,255,0.72); color: rgba(26,37,53,0.88); padding-left: 44px; }
.stab:hover::before { width: 2px; }
.stab.active { background: linear-gradient(90deg, rgba(200,16,46,0.07) 0%, rgba(255,255,255,0.95) 56%); color: var(--navy); font-weight: 500; padding-left: 50px; }
.stab.active::before { width: 4px; }
/* One-shot activation shimmer — red sheen sweeps left→right once when a tab
   becomes active. Plays on page load for the default active tab, and again
   whenever user clicks a different tab (JS re-applies .active). Does NOT loop
   — settles into calm active state after 1.1s. Same effect on desktop and
   mobile (was previously mobile-only). */
.stab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 16, 46, 0.24) 50%,
    transparent 100%);
  transform: translateX(-95%);
  animation: stabActivateShimmer 1.1s ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .stab.active::after { animation: none; display: none; }
}
.services-panels { min-height: 420px; background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%); }
.spanel { display: none; padding: 46px 56px; }
.spanel.active { display: grid; grid-template-columns: minmax(360px, 1.02fr) minmax(320px, 0.98fr); gap: 42px; align-items: stretch; animation: fadePanel 0.42s ease; }
@keyframes fadePanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.spanel-left { padding-right: 12px; }
.spanel-right {
  background: linear-gradient(180deg, #fbfbfc 0%, #f8fafc 100%);
  border: 1px solid rgba(26,37,53,0.08);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 18px 42px rgba(26,37,53,0.05);
}
.spanel-num { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.spanel-num::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.spanel-title { font-family: var(--serif); font-size: 2.1rem; font-weight: 300; color: var(--navy); line-height: 1.1; margin-bottom: 18px; max-width: 520px; }
.spanel-desc { font-size: 0.98rem; line-height: 1.86; color: rgba(26,37,53,0.66); max-width: 600px; }
.spanel-list { list-style: none; border-top: none; padding-top: 0; margin-bottom: 26px; }
.spanel-list li { font-size: 0.93rem; line-height: 1.82; color: rgba(26,37,53,0.76); padding: 12px 0 12px 22px; position: relative; border-bottom: 1px solid rgba(26,37,53,0.05); }
.spanel-list li:last-child { border-bottom: none; }
.spanel-list li::before { content: "–"; position: absolute; left: 0; color: var(--red); }
.spanel-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { font-size: 0.60rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 6px 14px; border-radius: 50px; background: #fbfbfc; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tag:hover { border-color: rgba(200,16,46,0.2); color: var(--navy); background: #fff; }
.services-cta-bar { background: transparent; padding: 18px 56px 6px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid rgba(26,37,53,0.06); }
.services-cta-text { font-family: var(--serif); font-size: 1.06rem; font-weight: 300; color: var(--navy); }
.services-cta-text em { font-style: italic; opacity: 0.42; }
.btn-cta-light { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); background: var(--navy); padding: 14px 30px; text-decoration: none; display: inline-block; border-radius: 50px; flex-shrink: 0; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.btn-cta-light:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,37,53,0.15); }

/* ── APPROACH ── */
#approach { background: linear-gradient(180deg, #1b2839 0%, #1a2535 100%); padding: 56px 0 76px; overflow: hidden; position: relative; }
#approach::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent 18%);
  pointer-events: none;
}
#approach .section-inner { padding: 0 52px; position: relative; z-index: 1; }
#approach .section-title { color: var(--white); }
#approach .section-title em { color: rgba(255,255,255,0.52); opacity: 1; }
#approach .section-eyebrow { color: rgba(255,255,255,0.58); letter-spacing: 0.28em; }
#approach .section-inner > .reveal:first-child {
  display: grid;
  grid-template-columns: minmax(420px, 1.04fr) minmax(340px, 0.8fr);
  gap: 52px;
  align-items: end;
  margin-bottom: 28px;
}
#approach .section-inner > .reveal:first-child .section-eyebrow,
#approach .section-inner > .reveal:first-child .section-title { grid-column: 1; }
#approach .section-inner > .reveal:first-child .section-title { align-self: start; max-width: 700px; margin-top: 12px; }
#approach .section-inner > .reveal:first-child .approach-sub { grid-column: 2; align-self: end; max-width: 450px; margin-bottom: 4px; }
.approach-sub { font-size: 0.95rem; line-height: 1.92; color: rgba(255,255,255,0.58); max-width: 560px; margin-top: 0; margin-bottom: 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 42px;
  position: relative;
  align-items: start;
  margin-top: 8px;
  padding-left: 0;
  max-width: none;
}
.steps::before { display: none; }
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 18px 0 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: start;
  transition: transform 0.25s ease, opacity 0.25s ease, border-top-color 0.32s ease;
  cursor: default;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  position: relative;
  overflow: visible;
}
.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
  transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.step::after {
  display: none;
}
@media (hover: hover) {
  .step:hover {
    transform: translateY(-2px);
    border-top-color: rgba(200, 16, 46, 0.28);
  }
  .step:hover::before { width: 44px; }
  .step:hover .step-num { color: rgba(200, 16, 46, 1); }
  .step:hover .step-title { color: rgba(255, 255, 255, 1); }
}
.step.is-pressed::before { width: 44px; }
.step.is-pressed .step-num { color: rgba(200, 16, 46, 1); }
.step.is-pressed .step-title { color: rgba(255, 255, 255, 1); }
/* ── WHY ── */
#why { background: linear-gradient(180deg, #f6f8fa 0%, #ffffff 100%); }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.why-card { background: var(--white); padding: 32px 34px 34px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; position: relative; overflow: hidden; border: 1px solid rgba(26,37,53,0.08); border-radius: 22px; min-height: 204px; box-shadow: 0 10px 24px rgba(26,37,53,0.04); }
.why-card::before { content: ''; position: absolute; top: 14px; left: 34px; width: 22px; height: 2px; background: var(--red); transition: width 0.3s; }
@media (hover: hover) {
  .why-card:hover { background: #ffffff; border-color: rgba(200,16,46,0.18); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(26,37,53,0.08); }
  .why-card:hover::before { width: 42px; }
  .why-card:first-child:hover { background: linear-gradient(135deg, #1b293a 0%, #29384c 100%); }
}
.why-card:active::before { width: 42px; }
.why-card.is-pressed::before { width: 42px; }
/* Featured first card — spans both rows, dark */
.why-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 0.76fr) minmax(420px, 1fr); gap: 34px; align-items: start; background: linear-gradient(135deg, #1a2535 0%, #243245 100%); padding: 26px 34px 26px; min-height: 0; }
.why-card:first-child::before { background: var(--red); }
/* .why-card:first-child:hover moved to @media (hover: hover) block above */
.why-card:first-child .why-title { color: rgba(255,255,255,0.96); font-size: 1.44rem; margin-top: 6px; margin-bottom: 0; max-width: 320px; line-height: 1.22; }
.why-card:first-child .why-desc { color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.84; max-width: 640px; padding-top: 2px; }
.why-card:first-child .why-num { display: none; }
.why-num { display: none; }
.why-title { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; color: var(--navy); margin-bottom: 12px; line-height: 1.26; margin-top: 10px; max-width: none; }
.why-desc { font-size: 0.92rem; line-height: 1.84; color: rgba(26,37,53,0.64); max-width: 420px; }

/* ── GEOGRAPHY ── */
#geography {
  background: var(--navy);
  position: relative;
  /* overflow-x: clip prevents mobile map (width:175%) from triggering horizontal
     page drag on iOS. overflow-y stays visible so the map can extend 240px down
     into #credibility for the crossing effect. hidden fallback first for
     Safari <16 / older iOS where `clip` is not yet supported. */
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: visible;
  padding: 96px 56px 104px;
  z-index: 2;
}

/* Dotted world map — gray dots → white on dark navy */
.geo-bg-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% + 240px);
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.32;
  filter: brightness(6);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 68%, transparent 100%);
}

/* Two-column layout — text left, region cards right — full section width */
.geo-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(480px, 1fr);
  gap: 26px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.geo-intro {
  font-size: 0.94rem;
  line-height: 1.86;
  color: var(--muted);
  margin-top: 20px;
  margin-bottom: 0;
  max-width: 430px;
}

.geo-note {
  margin-top: 22px;
  font-size: 0.82rem;
  line-height: 1.76;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 18px;
  font-style: italic;
  max-width: 430px;
}

/* Region cards — stacked list with vertical accent line */
.geo-region-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  position: relative;
  max-width: 620px;
  justify-self: end;
  width: 100%;
  margin-left: -72px;
  padding-left: 72px;
}

/* Vertical red gradient line connecting all cards.
   At rest: subtle gradient (so it doesn't dominate).
   On hover-any-card (:has): brightens and gets a soft red halo, so the whole
   "circuit" reads as energized while any card is active. */
.geo-region-grid::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(200,16,46,0.30), rgba(26,37,53,0.07));
  /* Slower transition (0.45s) reads as "considered", not "snappy" — premium
     brands favor this timing over the default 0.2–0.3s of interactive UIs. */
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
/* JS-driven hover state. Replaces an earlier `.geo-region-grid:has(.region-card:hover)::before`
   selector. Safari has known performance issues with `:has()` on hover —
   each cursor pixel-move triggers re-evaluation of the entire selector,
   causing paint thrashing that manifested as "trembling" cards on macOS
   and iPad Pro. JS adds the class on mouseover/removes on mouseout (with
   relatedTarget check so card-to-card transitions don't flicker). Same
   visual effect, no Safari-specific perf penalty. See main.js geo-region
   block for the handler. */
.geo-region-grid.is-grid-hovered::before {
  background: linear-gradient(to bottom, rgba(200,16,46,0.85), rgba(200,16,46,0.42));
  box-shadow: 0 0 4px rgba(200,16,46,0.28);
}

/* Region card — fully transparent, only text and border visible.
   Hover state is purely paint-based (no transform) so the card cannot
   "jitter" or "jump" during the transition on any device. This replaces
   an earlier attempt that used translateY(-2px) + GPU layer promotion —
   the translate was the jitter source (subpixel shifts during repaint),
   and will-change: transform created a separate compositor layer that
   caused a brief white-dots flash in the map on reload. Both removed. */
.region-card {
  background: transparent;
  padding: 16px 22px 16px 36px;
  position: relative;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  cursor: default;
  overflow: visible;
  border: 1px solid rgba(26, 37, 53, 0.11);
  border-radius: 16px;
  display: grid;
  /* Min widths (150/220) kept identical to the original — proven to keep the
     longest region name and longest sector list each on one line. Only the
     fr ratio is shifted (0.68fr → 0.82fr on the left) so the region-name
     column claims a larger share of available space, which pushes the sector
     text start a few pixels rightward inside each card. The card's overall
     width is unchanged; only the internal balance moves. */
  grid-template-columns: minmax(150px, 0.82fr) minmax(220px, 1fr);
  gap: 16px;
  align-items: center;
}

@media (hover: hover) {
  .region-card:hover {
    border-color: rgba(200, 16, 46, 0.28);
    box-shadow: 0 10px 32px rgba(26, 37, 53, 0.08);
    background: rgba(255, 255, 255, 0.26);
  }
}

/* Red accent dot before card content.
   The dot carries the "movement" part of the hover animation — it scales up
   and its red halo expands. Moving the dot (a small absolutely-positioned
   pseudo-element) instead of the whole card guarantees no jitter: the dot
   has its own render layer by nature, so GPU composition is clean, and the
   card itself stays perfectly still while its colors transition. */
.region-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 6px rgba(200,16,46,0.08);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.32s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .region-card:hover::before {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 0 7px rgba(200,16,46,0.22);
  }
}

/* Horizontal connector lines from vertical bar to cards.
   At rest they are faint (rgba 0.18 on light bg, rgba 0.15 white on dark).
   On hover, the connector to the hovered card lights up bright red with a
   soft red halo — reading visually as "current flowing from the vertical
   line into the card". Pure paint transition (no layout change), so it's
   completely jitter-proof on every device. */
.region-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -68px;
  width: 68px;
  height: 1px;
  background: rgba(200,16,46,0.18);
  pointer-events: none;
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.region-card:nth-child(2)::after,
.region-card:nth-child(5)::after { width: 100px; left: -100px; }
.region-card:nth-child(3)::after,
.region-card:nth-child(6)::after { width: 60px; left: -60px; }

/* "Power on" — connector lights up as a closed circuit:
   (1) Gradient along the line: brightest at the junction end (where it meets the
       vertical spine), softer toward the card — reads as "energy flowing from
       the backbone to the region".
   (2) Asymmetric box-shadow with -x offset concentrates the halo on the junction
       side. That concentrated halo visually illuminates the vertical spine at
       exactly the hovered card's height — giving the "local current" feel
       without any brittle per-card positioning logic.
   (3) Gentle ambient glow along the whole line keeps it cohesive.
   All at 0.45s transition (set on .region-card::after rule above), synchronized
   with the vertical line's own fade. The previous version used a keyframe
   animation `circuitPowerOn` that played once on every mouseenter — that
   animation re-fired on micro sub-pixel cursor flicker at card edges,
   causing visible "shake" on Mac/iPad Safari. Replaced with smooth transition
   only — no overshoot peak, but no re-fire jitter either. */
@media (hover: hover) {
  .region-card:hover::after,
  #geography .region-card:hover::after {
    background: linear-gradient(to right,
      rgba(200, 16, 46, 1) 0%,
      rgba(200, 16, 46, 0.92) 20%,
      rgba(200, 16, 46, 0.48) 100%);
    box-shadow:
      -4px 0 0 rgba(200, 16, 46, 0.95),
      -6px 0 8px rgba(200, 16, 46, 0.85),
      -10px 0 20px rgba(200, 16, 46, 0.55),
      0 0 5px rgba(200, 16, 46, 0.45);
  }
}

.region-name {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--navy);
  line-height: 1.18;
}

.region-sectors {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.62;
}

/* ── Dark navy background overrides for #geography ── */
#geography .section-eyebrow { color: rgba(255,255,255,0.62); }
#geography .section-title { color: #ffffff; }
#geography .section-title em { color: rgba(255,255,255,0.52); }
#geography .geo-intro { color: rgba(255,255,255,0.74); }
#geography .geo-note {
  color: rgba(255,255,255,0.58);
  border-top-color: rgba(255,255,255,0.14);
}
#geography .region-name { color: #ffffff; }
#geography .region-sectors { color: rgba(255,255,255,0.52); }
#geography .region-card {
  border-color: rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
}
@media (hover: hover) {
  #geography .region-card:hover {
    border-color: rgba(200,16,46,0.45);
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    background: rgba(255,255,255,0.07);
  }
}
#geography .geo-region-grid::before {
  background: linear-gradient(to bottom, rgba(200,16,46,0.55), rgba(255,255,255,0.04));
}
#geography .geo-region-grid.is-grid-hovered::before {
  /* Dark-theme version: slightly stronger than light theme because on navy
     background a softer red reads as faded. 0.9 → 0.45 is the sweet spot —
     clearly "active" without becoming a neon stripe. Halo tightened to 5px. */
  background: linear-gradient(to bottom, rgba(200,16,46,0.90), rgba(200,16,46,0.45));
  box-shadow: 0 0 5px rgba(200,16,46,0.38);
}
#geography .region-card::after {
  background: rgba(255,255,255,0.15);
}

@media (max-width: 1024px) {
  #geography { padding: 72px 36px 80px; }
  .geo-layout { grid-template-columns: 1fr; gap: 44px; }
  .geo-region-grid { max-width: none; justify-self: stretch; margin-left: 0; padding-left: 0; }
  .geo-region-grid::before { left: 15px; }
  .region-card { grid-template-columns: minmax(150px, 0.54fr) 1fr; }
  .region-card::after { display: none; }
}
@media (max-width: 899px) {
  #geography { padding: 56px 24px 64px; }
  .geo-region-grid { grid-template-columns: 1fr; gap: 8px; }
  .geo-region-grid::before { left: 12px; }
  .region-card { grid-template-columns: 1fr; gap: 8px; padding: 14px 18px 14px 32px; }
  .region-card::before { left: 9px; }
  .region-name { font-size: 1.02rem; }
  .region-sectors { font-size: 0.58rem; }
}
@media (max-width: 480px) {
  #geography { padding: 44px 20px 52px; }
}


/* ── CREDIBILITY ── */
#credibility {
  background: linear-gradient(180deg, #1a2535 0%, #1c293b 100%);
  padding: 82px 56px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#credibility::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 104%, rgba(200,16,46,0.04) 0%, transparent 44%),
    linear-gradient(to bottom, transparent 0%, rgba(10,16,24,0.12) 100%);
  pointer-events: none;
}
.cred-quotemark {
  font-family: var(--serif);
  font-size: 8rem;
  line-height: 0.7;
  color: rgba(200,16,46,0.28);
  font-weight: 300;
  display: block;
  margin-bottom: 2px;
  user-select: none;
  position: relative;
  z-index: 0;
}
.cred-text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.62;
  color: rgba(255,255,255,0.88);
  max-width: 1160px;
  margin: 0 auto 38px;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.cred-divider {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cred-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.cred-info {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── CONTACT ── */
#contact { padding: 0; position: relative; background: #f5f7fa; border-top: none; z-index: 1; }

/* Second map — navy dots, same overflow trick as geo-bg-map.
   Navy on dark (contact-left) = invisible. Navy on white (contact-right) = visible texture. */
.geo-bg-map-navy {
  filter: none;
  opacity: 0.45;
  z-index: 0;
  /* extend mask further into contact so dots reach the white area */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
}
#contact::before { display: none; }
.contact-split { display: grid; grid-template-columns: 1fr 1.08fr; min-height: 0; position: relative; z-index: 1; max-width: none; margin: 0; box-shadow: none; }
.contact-left { background: var(--navy); padding: 82px 56px 72px; position: relative; overflow: hidden; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.contact-left::before { display: none; }
.contact-left::after { display: none; }
.contact-left .section-eyebrow { color: rgba(200,16,46,0.85); }
.contact-left .section-title { color: rgba(255,255,255,0.92); margin-bottom: 24px; margin-top: 14px; }
.contact-left .section-title em { color: rgba(255,255,255,0.35); opacity: 1; font-style: italic; }
.contact-body { font-size: 0.92rem; line-height: 1.82; color: rgba(255,255,255,0.56); margin-bottom: 28px; max-width: 500px; }
.contact-details { display: flex; flex-direction: column; }
.contact-row { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: flex-start; }
.contact-row:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.contact-row-label { font-size: 0.54rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,16,46,0.75); min-width: 70px; padding-top: 2px; }
.contact-row-value { font-size: 0.84rem; color: rgba(255,255,255,0.65); line-height: 1.6; }
.contact-row-value a { color: rgba(255,255,255,0.65); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); transition: border-color 0.2s, color 0.2s; }
.contact-row-value a:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.contact-right { background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%); padding: 82px 56px 70px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Floating label form */
.form-float { display: flex; flex-direction: column; }
.form-float-row { display: grid; grid-template-columns: 1fr 1fr; }
.ff-field { position: relative; border-bottom: 1px solid rgba(26,37,53,0.1); padding-top: 22px; }
.ff-field + .ff-field.split { border-left: none; padding-left: 0; }
.ff-field label {
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(26,37,53,0.44);
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
  pointer-events: none;
}
.ff-field.split label { left: 0; }
.ff-field input, .ff-field textarea, .ff-field select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--navy);
  padding: 4px 0 14px;
  resize: none;
  -webkit-appearance: none;
}
.ff-field.split input, .ff-field.split textarea, .ff-field.split select { padding-left: 0; }
.ff-field input::placeholder, .ff-field textarea::placeholder { color: transparent; }
.ff-field:has(input:focus) label,
.ff-field:has(input:not(:placeholder-shown)) label,
.ff-field:has(textarea:focus) label,
.ff-field:has(textarea:not(:placeholder-shown)) label,
.ff-field:has(select.filled) label,
.ff-field.ff-focused label,
.ff-field.ff-filled label {
  top: 6px;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.ff-field:has(input:focus), .ff-field:has(textarea:focus),
.ff-field.ff-focused { border-bottom-color: var(--navy); }
.ff-field:has(select:focus) { border-bottom-color: var(--navy); }
.ff-field select { color: var(--muted); }
.ff-field select.filled { color: var(--navy); }
.ff-field.select-ff label { top: 6px; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.form-submit-row { padding-top: 24px; }
.btn-submit {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white); background: var(--navy); border: none;
  border-radius: 50px; padding: 16px 44px; cursor: pointer;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s, letter-spacing 0.25s;
  display: inline-flex; align-items: center; gap: 12px;
}
.btn-submit:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,37,53,0.2); letter-spacing: 0.2em; }

/* ── MODAL ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: var(--white); max-width: 660px; width: 90%; max-height: 80vh; overflow-y: auto; padding: 52px; position: relative; }
.modal-close { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.modal h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; color: var(--navy); margin-bottom: 22px; }
.modal h3 { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--navy); margin: 20px 0 7px; }
.modal p { font-size: 0.83rem; line-height: 1.8; color: var(--muted); margin-bottom: 10px; }

/* ── FOOTER ── */
footer { background: var(--ice); border-top: 1px solid var(--border); padding: 48px 64px; }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; max-width: 1180px; margin: 0 auto; }
.footer-logo img { height: 100px; width: auto; display: block; }
.footer-mid { text-align: center; }
.footer-copy { font-size: 0.74rem; color: var(--muted); display: block; margin-bottom: 8px; letter-spacing: 0.04em; }
.footer-tagline { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--navy-mid); opacity: 0.65; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.footer-links { display: flex; gap: 28px; list-style: none; }
.footer-link-btn { font: inherit; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; cursor: pointer; background: none; border: none; padding: 0; }
.footer-link-btn:hover { color: var(--navy); }
.social-link { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.social-link:hover { color: var(--navy); }
.social-link svg { width: 16px; height: 16px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* Make .reveal elements unconditionally visible — don't depend on IntersectionObserver firing */
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── ANIMATIONS ── */
/* Reveal animation only activates when JS confirms it's running (js-ready on <html>).
   Without JS or in unsupported browsers, all content is visible immediately. */
.js-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.js-ready .reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; }

/* ── HAMBURGER MENU ── */
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: rgba(255,255,255,0.9); transition: all 0.3s; }
nav.scrolled .nav-burger span { background: var(--navy); }
/* When burger is open (X state), mobile menu overlay is white — force navy bars so the X remains visible even at top of page */
.nav-burger.open span { background: var(--navy); }
.nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 199; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { font-family: var(--sans); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); text-decoration: none; }
.nav-mobile-menu .nav-cta-mobile { color: var(--white); background: var(--navy); padding: 14px 36px; margin-top: 12px; border-radius: 50px; }

/* ── TABLET ── */
@media (max-width: 1024px) {
  nav { padding: 12px 36px; gap: 24px; }
  nav.scrolled { padding: 8px 36px; }
  .nav-logo { flex-shrink: 0; }
  .nav-logo img { height: 96px; }
  nav.scrolled .nav-logo img { height: 68px; }
  .nav-links { flex-shrink: 1; min-width: 0; gap: 32px; }
  section { padding: 80px 36px; }
  /* About */
  .about-intro { padding: 72px 36px 48px; }
  .about-split { grid-template-columns: 1fr; gap: 32px; padding: 48px 36px 0; }
  .about-caps { grid-template-columns: repeat(2, 1fr); margin: 56px 36px 0; }
  .cap-item,
  .cap-item:nth-child(1),
  .cap-item:nth-child(2),
  .cap-item:nth-child(n+3) { grid-column: span 1; }
  .cap-item { padding: 32px 32px 34px; }
  .cap-item::before { left: 32px; }
  .about-quote-full { padding: 48px 36px; }
  /* Services */
  .services-header { padding: 0 36px 48px; }
  .services-tabs { grid-template-columns: 250px 1fr; }
  .spanel.active { grid-template-columns: 1fr; gap: 36px; }
  .services-cta-bar { padding: 40px 36px; flex-direction: column; align-items: flex-start; gap: 24px; }
  /* Steps */
  #approach .section-inner { padding: 0 36px; }
  .step { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px 20px; min-height: 0; }
  .step-desc { display: block; grid-column: auto; }
  .step-num { display: none; }
  /* Why */
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-card:first-child { grid-row: auto; grid-column: 1 / 3; grid-template-columns: 1fr; gap: 18px; padding: 28px 30px 30px; }
  /* Geography */
  .geo-layout { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .geo-region-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Contact */
  .contact-split { grid-template-columns: 1fr; }
  .contact-left { padding: 64px 36px 56px; }
  .contact-right { padding: 58px 36px 52px; }
  /* Footer / misc */
  .footer-inner { grid-template-columns: auto 1fr; gap: 24px; }
  .footer-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .footer-mid { text-align: left; }
}

/* ── MOBILE ── */
@media (max-width: 899px) {
  /* Nav */
  nav { padding: 10px 20px; }
  nav.scrolled { padding: 8px 20px; }
  .nav-logo img { height: 88px; }
  nav.scrolled .nav-logo img { height: 62px; }
  .nav-logo { padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }

  /* Hero */
  #hero { min-height: 100svh; height: auto; }
  .hero-bg { object-position: center 40%; filter: brightness(0.8) saturate(0.84) contrast(0.92); transform: scale(1.04); }
  /* justify-content: flex-start is safe default — on short viewports
     (MacBook 12, DevTools scaled, landscape phone, iPhone SE) content
     can't overflow the top padding into the nav/logo area.
     On tall phones (iPhone 16 Pro etc.) the min-height: 720px media
     below restores the cinematic bottom-anchored look.
     padding-top 120px > nav height (88px logo + 10*2 padding = 108) + 12px clearance. */
  .hero-content { width: 100%; min-height: 100svh; padding: 120px 22px 44px; justify-content: flex-start; }
  .hero-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(245,248,252,0.26) 0%,
        rgba(232,238,245,0.12) 16%,
        rgba(20,30,43,0.08) 34%,
        rgba(10,16,24,0.18) 54%,
        rgba(8,13,21,0.3) 100%
      ),
      linear-gradient(160deg, rgba(9,15,24,0.46) 0%, rgba(14,22,34,0.24) 55%, rgba(18,28,41,0.1) 100%);
  }
  .hero-overlay::after {
    background:
      radial-gradient(circle at 18% 8%, rgba(255,255,255,0.14), transparent 22%),
      radial-gradient(circle at 88% 72%, rgba(8,13,21,0.2), transparent 22%),
      linear-gradient(to top, rgba(8,13,21,0.24), transparent 44%);
  }
  .hero-overlay::before {
    right: -14%;
    bottom: -4%;
    width: 54%;
    height: 40%;
    opacity: 0.42;
  }
  .hero-eyebrow { margin-bottom: 20px; font-size: 0.58rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.84); }
  .hero-headline { font-size: clamp(2.6rem, 11vw, 3.4rem); margin-bottom: 18px; max-width: 100%; }
  /* Narrow viewport: switch from flex (natural wrap) to a 4-column grid so the
     5th pill (Capital) can span exactly the width of the 4 pills above.
     - auto columns: each column sizes to its pill's natural content
     - justify-content: start: grid tracks don't stretch to fill container
     - Capital at grid-column 1/-1: spans from left edge of Commodities to
       right edge of Logistics, matching the row above pixel-for-pixel.
     Auto-adapts to language (e.g. German "Rohstoffe" is longer → grid widens,
     Capital follows). */
  .hero-sectors {
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: start;
    gap: 8px;
    margin-bottom: 18px;
  }
  .hero-sector {
    font-size: 0.58rem;
    padding: 8px 12px;
    margin-right: 0;
    background: rgba(255,255,255,0.12);
    letter-spacing: 0.1em;
    /* No backdrop frost on mobile — pills are pure transparent glass so the
       mountain/video stays fully visible through them. Matches the aesthetic
       the owner described as "version A". Desktop keeps its subtle 8px blur
       because on a wide screen pills are small relative to the background
       and a touch of frost reads as premium without blocking the image. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Capital — "foundation plate" under the 4 sector pills. Spans all 4 columns
     so its width matches the top row exactly. */
  .hero-sector:nth-child(5) {
    grid-column: 1 / -1;
    text-align: center;
    padding: 9px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(255,255,255,0.22);
  }
  /* Mobile hover/tap feedback — same no-red principle as desktop.
     :hover wrapped in (hover: hover) so touch devices don't get sticky hover. */
  @media (hover: hover) {
    .hero-sector:hover {
      background: rgba(255,255,255,0.26);
      border-color: rgba(255,255,255,0.45);
      color: #ffffff;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
  }
  .hero-sector.is-pressed {
    background: rgba(255,255,255,0.26);
    border-color: rgba(255,255,255,0.45);
    color: #ffffff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .hero-tagline { font-size: 0.64rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.84); }
  .hero-rule { width: 56px; margin-top: 14px; margin-bottom: 18px; }
  /* max-width 540px caps line length to ~60-70 characters — within the
     readable optimum (45-75 char). Without this cap, sub-text spans the
     full ~840px viewport at ≤899, producing 85+ char lines that fatigue
     the eye and make the hero feel "undesigned" (text crammed edge-to-edge). */
  .hero-sub { font-size: 0.94rem; line-height: 1.82; max-width: 540px; margin-bottom: 26px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-link { width: 100%; justify-content: center; }
  .hero-actions .btn-link { padding: 15px 20px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
  /* Mobile sequential chain: 7 elements over a 12s master cycle.
     Order: pill1 → pill2 → pill3 → pill4 → pill5 (Capital) → OUR SERVICES → GET IN TOUCH → loop.
     Stagger 1.6s keeps ~28ms gap between sweeps so only one is lit at a time. */
  .hero-sector::after {
    animation: sequentialShimmerMobile 12s ease-in-out 0s infinite;
  }
  .hero-sector:nth-child(2)::after { animation-delay: 1.6s; }
  .hero-sector:nth-child(3)::after { animation-delay: 3.2s; }
  .hero-sector:nth-child(4)::after { animation-delay: 4.8s; }
  .hero-sector:nth-child(5)::after { animation-delay: 6.4s; }
  .hero-actions .btn-primary::after {
    animation: sequentialShimmerMobile 12s ease-in-out 8s infinite;
  }
  .hero-actions .btn-link::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
    transform: translateX(-160%);
    animation: sequentialShimmerMobile 12s ease-in-out 9.6s infinite;
    pointer-events: none;
    z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-actions .btn-link::after { animation: none; display: none; }
  }
  .nav-right { gap: 14px; }
  .lang-switch { display: flex; }
  /* Expand lang-btn tap target to 44×44 (iOS/Android guideline) without
     shifting visual position. Negative margin compensates for the extra
     padding so surrounding layout is unchanged. */
  .lang-btn { padding: 14px 8px; min-width: 44px; min-height: 44px; margin: -14px -4px; }

  /* Stats — mobile 2×2 grid, centered: breaks the "linear list" feel
     of 4 stacked rows and cuts strip height roughly in half.
     All 4 labels fit in 1 line → cells equal height, symmetric. */
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stat-item {
    padding: 14px 12px 12px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }
  .stat-item::before {
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
  }
  .stat-item.is-pressed::before { width: 46px; }
  .stat-number {
    font-size: 1.55rem;
    margin-bottom: 6px;
    letter-spacing: 0.005em;
    padding-bottom: 0;
  }
  /* Hide the red underline under numbers on mobile — top red bar is enough,
     two red accents per cell feels cluttered. */
  .stat-number::after { display: none; }
  .stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    line-height: 1.4;
  }

  /* Sections */
  section { padding: 52px 20px; }
  #approach { padding: 52px 0; }
  #credibility { padding: 56px 20px 48px !important; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }

  /* About */
  .about-intro { padding: 52px 20px 36px; }
  .about-split { grid-template-columns: 1fr; gap: 24px; padding: 40px 20px 0; }
  .about-headline { font-size: clamp(2.15rem,9vw,3rem); }
  .about-lead { font-size: 1.14rem; line-height: 1.56; }
  .about-caps { grid-template-columns: 1fr; margin: 48px 20px 0; gap: 14px; }
  /* Mobile: desktop min-height:182px forces empty space when content is short.
     Reset to auto + tighten padding so cards hug their content. */
  .cap-item { min-height: auto; padding: 22px 20px 24px; border-right: none; border-bottom: none; border-radius: 18px; }
  .cap-item::before { left: 20px; top: 18px; }
  .cap-title { padding-top: 12px; font-size: 1.00rem; margin-bottom: 8px; }
  .cap-desc { font-size: 0.87rem; line-height: 1.62; }
  .cap-item,
  .cap-item:nth-child(1),
  .cap-item:nth-child(2),
  .cap-item:nth-child(n+3) { grid-column: span 1; }
  .cap-item:last-child { border-bottom: none; }
  .about-quote-full { padding: 40px 20px; }
  .about-quote-full blockquote { font-size: 1.15rem; padding-left: 24px; }

  /* Services */
  .services-header { padding: 0 20px 34px; }
  #services { padding: 52px 0 0; }
  .services-tabs { grid-template-columns: 1fr; }
  .services-tablist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-right: none;
    border-bottom: 1px solid rgba(26,37,53,0.08);
    background: #fbfbfc;
    padding: 0;
  }
  .stab {
    border-bottom: 1px solid rgba(26,37,53,0.08);
    border-right: 1px solid rgba(26,37,53,0.08);
    white-space: normal;
    padding: 18px 12px;
    /* Mobile: switch to serif for a more editorial, premium feel that matches
       site headings. All 5 tiles share the same typographic weight — Capital's
       distinction comes from layout (full-width + bg gradient), not font. */
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.28;
    min-height: 72px;
    display: flex;
    align-items: center;
    /* Centered text for the 2×2 tile look */
    justify-content: center;
    text-align: center;
    color: rgba(26,37,53,0.78);
    letter-spacing: 0.005em;
    /* No left-stripe on non-active tabs — would conflict with centered text */
    box-shadow: none;
    /* Contain the activation shimmer (::after) inside the tile bounds */
    overflow: hidden;
  }
  /* Disable desktop hover padding-shift on touch devices */
  .stab:hover { padding-left: 14px; background: none; }
  .stab:nth-child(2n) { border-right: none; }
  /* Capital — the "foundation plate" under the 2×2 grid of physical sectors.
     Full-width last row, subtle tonal distinction so the eye reads it as the
     base on which the four tiles rest, not as a fifth peer. */
  .stab:last-child {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(26,37,53,0.10);
    background: linear-gradient(180deg, #fbfbfc 0%, #f5f6f8 100%);
    /* Capital's "foundation" reading comes purely from layout (full-width span,
       bg gradient, border-top) — typography stays identical to the 4 tiles. */
    min-height: 60px;
  }
  .stab::before { top: auto; bottom: 0; height: 0; width: 100%; left: 0; border-radius: 3px 3px 0 0; }
  /* Active state: bottom red bar + gentle tint. Bar sits at the bottom so it
     aligns with centered text (a left stripe would look like a layout bug). */
  .stab.active {
    font-size: 1.14rem;
    /* Color: 0.92 opacity navy (not solid 1.0) — keeps a hint of the navy tint
       visible instead of reading as solid black. Passive tabs are 0.78, so
       active is still noticeably more saturated but without the "heavy black"
       punch. */
    color: rgba(26,37,53,0.92);
    /* Weight: stays at 500 — same as passive. Differentiation comes from
       size (+0.06rem), color saturation (+0.14), red gradient bg, red bottom
       bar, and shimmer. Five simultaneous mechanisms already = no need for
       a weight jump, which previously made the text read as "too bold". */
    font-weight: 500;
    background: linear-gradient(180deg, rgba(200,16,46,0.07) 0%, rgba(200,16,46,0.02) 100%);
    box-shadow: inset 0 -3px 0 rgba(200,16,46,0.82);
    padding-left: 12px;
  }
  /* Active Capital keeps its foundation tone but also lights up with the red bar */
  .stab.active:last-child {
    background: linear-gradient(180deg, rgba(200,16,46,0.08) 0%, rgba(200,16,46,0.03) 100%);
  }
  /* Shimmer rule moved to global scope — see `.stab.active::after` near the
     desktop `.stab` definition. Same effect now plays on desktop and mobile. */
  .spanel.active { grid-template-columns: 1fr; gap: 22px; }
  .spanel { padding: 30px 20px; }
  .spanel-title { font-size: 1.72rem; }
  .spanel-num { font-size: 0.56rem; letter-spacing: 0.2em; }
  .spanel-desc { font-size: 0.9rem; line-height: 1.82; }
  .spanel-list li { font-size: 0.82rem; line-height: 1.7; }
  .services-cta-bar { padding: 36px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Approach */
  #approach .section-inner { padding: 0 20px; }
  #approach .section-inner > .reveal:first-child {
    display: block;
    padding: 0;
    margin-bottom: 18px;
  }
  #approach .section-inner > .reveal:first-child .section-title { max-width: 100%; }
  #approach .section-inner > .reveal:first-child .approach-sub {
    max-width: 100%;
    margin-top: 14px;
  }
  .steps { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px 22px; border-radius: 18px; min-height: 0; margin: 0; }
  .step::before,
  .step::after { display: none; }
  .step-desc { display: block; font-size: 0.84rem; }
  .step-num { font-size: 1.1rem; }
  .step-title { font-size: 1.02rem; padding-left: 0; }

  /* Why */
  #why { padding-bottom: 30px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card:first-child { grid-row: auto; grid-column: auto; }
  .why-card { min-height: auto; padding: 24px 20px 24px; border-radius: 18px; }
  .why-card::before { left: 20px; top: 12px; }
  .why-card:first-child { gap: 16px; padding: 24px 20px 24px; }
  .why-card:first-child::before { left: 20px; top: 12px; width: 20px; }
  .why-card:first-child .why-title { font-size: 1.34rem; max-width: 100%; }
  .why-card:first-child .why-title { margin-top: 12px; }
  .why-card:first-child .why-desc { font-size: 0.88rem; line-height: 1.76; }
  .why-desc { font-size: 0.88rem; line-height: 1.78; }

  /* Geography */
  #geography { padding-top: 30px; padding-bottom: 52px; }
  .geo-layout { grid-template-columns: 1fr; gap: 36px; }
  .geo-region-grid { grid-template-columns: 1fr; padding: 0; }
  .geo-region-grid::before { display: none; }
  .region-card::after { display: none; }
  .region-card { min-height: 0; padding: 26px 18px 18px 18px; border-radius: 16px; }
  /* Mobile: dots must STAY VISIBLE through the card as ambient texture —
     very light bg (0.10) + no blur lets the map show clearly. Text readability
     comes from strong layered shadows, not from darkening the card. */
  #geography .region-card {
    background: rgba(10,15,25,0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #geography .region-name {
    text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 10px rgba(10,15,25,0.75);
  }
  #geography .region-sectors {
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(10,15,25,0.75);
  }
  /* Zoom into the Marlin corridor: Europe + Black Sea + Ukraine + MENA + Africa.
     No Americas/ocean, no Russia/Asia. Image at 175% width (more zoom), shifted
     so the horizontal crop centers on 20°E (Europe/Africa meridian).
     Map extends full section height so it runs the full length of region cards. */
  .geo-bg-map {
    object-fit: cover;
    object-position: 60% 42%;
    opacity: 0.32;
    width: 175%;
    left: -37%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 82%, transparent 100%);
  }
  /* Thin 2px bar — matches why-card / cap-item style on mobile */
  .region-card::before {
    left: 16px;
    top: 14px;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    box-shadow: none;
    transform: none;
    transition: width 0.28s ease;
  }
  /* Tap feedback on mobile: ONLY width change (stripe extends 24→44px). No
     scale, no halo. Explicitly resets transform + box-shadow inherited from
     the desktop hover rule, which was styled for a circular dot (scale 1.2 +
     red halo) — inappropriate for the mobile horizontal bar variant. */
  .region-card:hover::before,
  .region-card:active::before,
  .region-card.is-pressed::before {
    width: 44px;
    transform: none;
    box-shadow: none;
  }
  .region-name { font-size: 1.02rem; }
  .region-sectors { font-size: 0.58rem; line-height: 1.66; }
  /* Map: horizontal 60% centers on Europe/Africa meridian (~20°E) so we see
     Europe, Black Sea, Ukraine, MENA, and Africa — without Americas or Russia. */
  #geography .geo-bg-map { object-position: 60% 42%; }

  /* Credibility */
  .cred-quotemark { font-size: 5rem; margin-bottom: 10px; }
  .cred-text { font-size: 1rem; line-height: 1.64; }
  .cred-divider { flex-direction: column; gap: 12px; text-align: center; }
  .cred-divider-line { width: 60px; flex: none; height: 1px; }

  /* Contact */
  #contact { padding: 0; background: #f5f7fa; }
  .contact-split { grid-template-columns: 1fr; margin: 0; box-shadow: none; }
  .contact-left { padding: 50px 20px 42px; border-top-right-radius: 0; border-bottom-left-radius: 0; }
  .contact-right { padding: 42px 20px 38px; border-top-right-radius: 0; border-bottom-left-radius: 0; }
  .form-float-row { grid-template-columns: 1fr; }
  .ff-field + .ff-field.split { border-left: none; padding-left: 0; border-top: 1px solid var(--border); }
  .contact-row { flex-direction: column; gap: 6px; }
  .contact-row-label { min-width: auto; }
  .btn-submit { width: 100%; justify-content: center; }

  /* Footer */
  footer { padding: 36px 20px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .footer-logo { display: flex; justify-content: center; }
  .footer-right {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }
  .footer-links { flex-direction: column; gap: 10px; }
  .footer-mid { order: 2; text-align: center; }
  .footer-copy { color: rgba(111, 126, 145, 0.88); }
  .social-link { justify-content: center; }

  /* Modal */
  .modal { padding: 36px 24px; }
}

/* Tall-phone cinematic restore: on phones ≥720px tall (iPhone 16 Pro ≈874px,
   iPhone 13 ≈844px, even modest Android ≈720px), the hero has enough room
   to anchor content to the bottom like the design intends. On shorter viewports
   (iPhone SE 568px, MacBook 12 short window, landscape phone) the default
   `flex-start` from the 899px block keeps content safely below the nav/logo. */
@media (max-width: 899px) and (min-height: 720px) {
  .hero-content { justify-content: flex-end; }
}

/* Short-viewport safety (windowed Safari/Chrome on laptop, landscape tablets).
   At widths ≥900px the desktop `.hero-content` uses `justify-content: center`
   with `position: absolute; top:0; bottom:0`. When viewport height is short
   the centered content can rise above padding-top 128px and into the fixed
   nav (logo 120px + nav padding 20px ≈ 140px tall on desktop). Visually the
   hero text starts overlapping the logo around 780px viewport height —
   centered top edge = (V - content_height) / 2 ≈ (780 - 500) / 2 = 140px,
   exactly touching nav. Below ~720 it gets worse, content actually overflows
   upward. Threshold raised from the original 720→820 to catch the entire
   overlap-then-overflow zone with safety margin (820 − 500 / 2 = 160 ≥ 140).
   Scoped min-width:900 so mobile (≤899) keeps its own rules. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-content { justify-content: flex-start; padding-top: 150px; }
}

/* Narrow-desktop range (900–1199px): cinematic look preserved identically to
   ≥1200px (54% left column, vertical centering, 64px left padding aligned
   with logo). Only structural change: hero is allowed to grow vertically if
   pills wrap to 2 rows at the narrowest end of this range. Without this,
   `#hero { overflow: hidden }` + `.hero-content { position: absolute; bottom: 0 }`
   would clip the CTA buttons (OUR SERVICES, GET IN TOUCH) when content
   exceeds 100vh. Switching .hero-content to relative positioning + min-height
   lets it dictate hero's height, so content always stays accessible. No
   visual discontinuity at the 1199↔1200 boundary — same layout both sides. */
@media (min-width: 900px) and (max-width: 1199px) {
  /* Kill ALL inherited section padding on #hero here. In cinematic mode
     (≥1200px) `.hero-content` is position:absolute and ignores parent padding
     entirely — so `section { padding: 100px 56px }` is inert. Switching to
     relative positioning makes that padding suddenly active: the 100px bottom
     adds to hero height, and the 56px sides shift hero-content (and thus the
     text) right relative to logo. Zero out so hero-content sits at x=0 inside
     #hero, matching cinematic geometry exactly. */
  #hero { height: auto; min-height: 100vh; min-height: 100svh; padding: 0; }
  .hero-content {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* Hero text-vs-logo alignment in 900–1024 sub-range. Legacy tablet block uses
   `nav { padding: 12px 36px }` here (logo at x=36) to keep nav links from
   wrapping. Default `.hero-content { padding-left: 64px }` would put hero
   text 28px right of logo — visibly mismatched. Match the +8px breathing
   convention used at wider widths (logo 56 → text 64): logo 36 → text 44. */
@media (min-width: 900px) and (max-width: 1024px) {
  .hero-content { padding-left: 44px; }
}

/* Narrow-desktop (900–1199): stats-strip switches from 4-in-a-row to 2×2
   grid. At 4 cols the columns become ~220px and longer values like "B2B · B2G"
   and "LC · SBLC" wrap to 2 lines while "5" and "AG" stay on 1 line — broken
   visual rhythm. 2×2 gives each cell ~440px, all values fit comfortably,
   uniform cell heights. Plus compact typography (between desktop 2.4rem and
   mobile 1.55rem) — at 440px-wide cells the desktop-size text felt floating
   in too much empty space, the mobile-size text felt too small for desktop;
   1.8rem + tighter padding lands in the right scale. Underline beneath the
   numbers (`.stat-number::after`) stays visible at this range — the cells
   are wide enough that the small accent reads as elegant rather than busy. */
@media (min-width: 900px) and (max-width: 1199px) {
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stat-item {
    padding: 22px 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }
  .stat-number {
    font-size: 1.8rem;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }
}

/* Narrow-desktop (900–1024) About-caps: legacy 1024 block forces 2-column grid
   with all 5 cap-items spanning 1 col → row 3 has only the 5th item with empty
   space on the right. Make the 5th card full-width so it reads as an intentional
   final accent ("Full Party Coordination" thematically IS the umbrella role).
   Above 1024 the default 12-col grid already balances 5 items as 2+3 (cards
   1-2 span 6, cards 3-5 span 4). Below 900 mobile @media takes over. */
@media (min-width: 900px) and (max-width: 1024px) {
  .cap-item:nth-child(5) { grid-column: 1 / -1; }
}

/* Narrow-desktop (900–1024) Geography: legacy 1024 block sets the outer
   `.geo-region-grid` to 2 columns. The vertical red gradient stripe drawn by
   `.geo-region-grid::before` is positioned at left:15-31px — it only runs
   through the LEFT column of cards, leaving the RIGHT column unconnected →
   asymmetric "half-filament" effect. Hiding the connecting line is cleaner
   than duplicating it. The red dots on each individual card (.region-card
   ::before) stay — they work independently and brighten on hover. */
@media (min-width: 900px) and (max-width: 1024px) {
  .geo-region-grid::before { display: none; }
}

/* Narrow-desktop (900–1199): region cards in #geography stack name above
   sectors instead of side-by-side. The default `.region-card` template
   `minmax(150px, 0.82fr) minmax(220px, 1fr)` and the legacy 1024 block
   `minmax(150px, 0.54fr) 1fr` both produce a name-column too narrow at this
   range to hold "Middle East & North Africa" on one line — that single card
   wraps to 2 lines while the others stay 1 line, breaking the grid rhythm.
   Stacking name-over-sectors mirrors the ≤899 mobile pattern and keeps all
   six cards at uniform height. */
@media (min-width: 900px) and (max-width: 1199px) {
  .region-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 18px 14px 32px;
  }
  .region-card::before { left: 9px; }
}


@media (max-width: 420px) {
  nav { padding: 8px 16px; }
  nav.scrolled { padding: 7px 16px; }
  /* 420-block nav padding is 8*2=16, logo 88 → nav height 104. padding-top
     116 gives 12px clearance past the logo bottom edge. */
  .hero-content { padding: 160px 16px 34px; }
  .hero-headline { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .hero-sector { font-size: 0.54rem; padding: 7px 10px; }
  .hero-sub { font-size: 0.9rem; }
  section { padding: 46px 16px; }
  .services-header { padding: 0 16px 30px; }
  /* At ≤420px (iPhone 16 Pro = 402px viewport) KEEP the 2×2 + Capital-bottom
     layout — don't collapse to 1fr. Proportionally tighter than 899px block. */
  .stab { padding: 14px 10px; font-size: 1.02rem; min-height: 62px; }
  .stab.active { font-size: 1.08rem; }
  .stab:last-child { min-height: 54px; font-size: 1.02rem; }
  .stab.active:last-child { font-size: 1.08rem; }
  .spanel { padding: 26px 16px; }
  .services-cta-bar { padding: 30px 16px; }
  #contact { padding: 0; }
  .contact-left { padding: 42px 16px 36px; }
  .contact-right { padding: 38px 16px 34px; }
  footer { padding: 30px 16px; }
}




/* Approach step text fix */
.step-num {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  color: rgba(200,16,46,0.82);
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.step-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  line-height: 1.28;
  position: relative;
  padding-left: 0;
  margin-bottom: 4px;
  max-width: none;
}
.step-title::before {
  display: none;
}
.step-desc {
  font-size: 0.86rem;
  line-height: 1.74;
  color: rgba(255,255,255,0.6);
  max-width: none;
  margin: 0;
}
@media (max-width: 1024px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step-title { max-width: none; }
}
@media (max-width: 899px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 22px 16px 20px; min-height: 0; }
  .step-title { margin-bottom: 8px; }
  .step-desc { max-width: none; }
}

/* ── MOBILE TAP EFFECTS ── */
/* How We Work: refined indicator — no pink wash, just a crisp red stripe on the
   LEFT of the card + brightened number/title. Feels editorial, not "selected". */
@media (max-width: 899px) {
  .step.is-pressed {
    background: transparent;
    border-top-color: rgba(255,255,255,0.08);
  }
  /* Repurpose the top ::before line as a vertical left stripe on mobile when active */
  .step.is-pressed::before {
    display: block;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, rgba(200,16,46,1) 0%, rgba(200,16,46,0.45) 100%);
    border-radius: 0 2px 2px 0;
    transition: none;
  }

  /* Why Marlin dark card: make tap visible on dark background */
  .why-card:first-child.is-pressed {
    background: linear-gradient(135deg, #22303f 0%, #2e3f52 100%);
  }
  .why-card:first-child.is-pressed::before { width: 48px; }
}

/* Burger-mode-on-desktop hover for "How We Work" steps: match the real-mobile
   tap visual EXACTLY — vertical red side-stripe on the left of the card,
   transparent background, dimmed top border. In single-column narrow layouts
   this feels more dynamic and editorial than the top horizontal stripe used
   at ≥900px. Effectively unifies the burger-mode hover (desktop with mouse
   at narrow width) with the touch-press visual (real phones), so one mental
   model regardless of input method. Step number → red, title → white still
   come from the default `.step:hover` typography rule. Full desktop ≥900
   keeps its original 44px top-stripe hover effect untouched. */
@media (max-width: 899px) and (hover: hover) {
  .step:hover {
    transform: none;
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .step:hover::before {
    /* display: block needed because the parent @media (max-width: 899px) block
       at line ~1468 sets `.step::before { display: none }` for mobile layout
       cleanup. Without re-enabling display here, none of the hover overrides
       below have any visible effect — the pseudo is hidden. The mobile press
       rule `.step.is-pressed::before` has the same explicit `display: block`
       for the same reason. */
    display: block;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, rgba(200, 16, 46, 1) 0%, rgba(200, 16, 46, 0.45) 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: none;
    transition: none;
  }
}

/* ── MOBILE: GEOGRAPHY TEXT READABILITY ──
   Dotted world map bleeds through the translucent (52–74 % white) text on
   phones. Translucent glyphs let text-shadow pass through them instead of
   forming a halo, so the shadow alone cannot fix it. Solution: bump opacity
   on mobile (keeping the grayscale hierarchy intact, just less faded) and
   add a dark halo for extra separation from the dotted map. Desktop
   styling is unchanged. */
@media (max-width: 899px) {
  #geography .section-eyebrow { color: rgba(255,255,255,0.92); }
  #geography .section-title em { color: rgba(255,255,255,0.88); }
  #geography .geo-intro { color: rgba(255,255,255,0.96); }
  #geography .geo-note { color: rgba(255,255,255,0.86); }

  #geography .section-eyebrow,
  #geography .section-title,
  #geography .section-title em,
  #geography .geo-intro,
  #geography .geo-note {
    text-shadow:
      0 0 3px rgba(5,10,16,1),
      0 0 8px rgba(5,10,16,0.95),
      0 1px 3px rgba(0,0,0,0.65);
  }
}