:root {
  /* Dark, futuristic base */
  --bg: #070B14;
  --bg-soft: #0A1120;
  --bg-deepest: #04070E;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-solid: #0E1626;
  --glass: rgba(13, 22, 40, 0.55);

  /* Brand accents (kept) */
  --navy: #0B1F3A;
  --navy-deep: #050E1F;
  --navy-soft: #14304F;
  --gold: #D4AF5A;
  --gold-deep: #C9A14A;
  --saffron: #EE7F23;
  --cream: #FAF7F2;

  /* Text */
  --text: #EAEEF6;
  --text-soft: #9FAEC4;
  --text-dim: #66758E;
  /* Legacy aliases remapped for the dark theme */
  --ink: #EAEEF6;
  --ink-soft: #9FAEC4;
  --paper: rgba(255, 255, 255, 0.04);

  --line: rgba(255, 255, 255, 0.09);
  --line-light: rgba(255, 255, 255, 0.14);
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-md: 0 22px 60px rgba(0,0,0,0.55);
  --glow-saffron: 0 0 50px rgba(232,119,34,0.22);
  --glow-gold: 0 0 40px rgba(212,175,90,0.16);
  --serif: "Cormorant Garamond", "Georgia", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plex: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -8%, rgba(232,119,34,0.10), transparent 60%),
    radial-gradient(1000px 700px at -10% 12%, rgba(212,175,90,0.08), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(20,48,79,0.35), transparent 60%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(232,119,34,0.35); color: #fff; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.12; }
h3 { font-size: 1.35rem; line-height: 1.25; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--text-soft); }
a { color: var(--text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.eyebrow.light { color: var(--gold); }
.accent { color: var(--saffron); font-style: italic; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--sans);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--saffron), var(--gold-deep));
  color: #160C02;
  box-shadow: 0 10px 30px rgba(232,119,34,0.28);
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(232,119,34,0.4);
}
.btn-gold { background: var(--gold); color: #160C02; }
.btn-gold:hover { background: var(--gold-deep); color: #160C02; transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,0.03); color: var(--text); border-color: var(--line-light); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn.full { width: 100%; justify-content: center; }

/* Header */
.site-header {
  /* Overlaid on top of the hero (not sticky) so the hero's background shows
     through the translucent bar — yet the bar still scrolls away with the page
     instead of following. The hero adds matching top padding (below) so its
     content clears the bar. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(7, 11, 20, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Inherits the shared .container max-width (1320px) and centring, so the
     brand's left edge and the actions' right edge line up exactly with the
     content borders of every section below. Match the container's 24px
     side padding; keep 1rem of vertical padding for header height. */
  padding: 1rem 24px;
}
.brand { display: flex; align-items: flex-end; gap: 0; color: var(--text); }
.brand-logo { height: 32px; width: auto; display: block; }
/* PALACE wordmark logo — bold grotesque, rendered light for the dark header. */
.brand-wordmark {
  font-family: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 800;
  font-stretch: 125%; /* expanded width to match the wide wordmark art */
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}
.brand-mark svg { display: block; }
/* Periwinkle accent dot sitting on the wordmark baseline — matches the
   "Access, structure, and execution" highlight colour. */
.brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a7ce0;
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 2px;
  flex: 0 0 auto;
}
/* Footer wordmark — same treatment as the header, scaled down. */
.brand.small .brand-wordmark { font-size: 1.5rem; }
.brand.small .brand-dot { width: 7px; height: 7px; margin-bottom: 2px; }
.brand-mark { color: var(--gold); display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.45rem; color: var(--text); }
.brand-name-light { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; color: var(--gold); }
.brand-tag { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.brand.small .brand-name, .brand.small .brand-name-light { font-size: 1.2rem; }

/* --- Region switcher (India / China) sitting under the wordmark ------- */
.brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.34rem; }
.region-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-left: 1px;
}
.region-nav a {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.region-nav a:hover { color: var(--gold); }
.region-nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.region-nav .region-sep { color: var(--line-light); font-size: 0.62rem; }

/* --- Menu button (top-right) ----------------------------------------- */
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
  color: var(--text);
}
.menu-toggle-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
  transition: color 0.25s ease;
}
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; }
.menu-toggle-bars span {
  height: 2px;
  width: 26px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, background 0.25s ease;
}
.menu-toggle:hover .menu-toggle-label { color: var(--gold); }
.menu-toggle:hover .menu-toggle-bars span { background: var(--gold); }

/* --- Full-screen overlay menu ---------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 8vw;
  background:
    radial-gradient(900px 600px at 82% 12%, rgba(232,119,34,0.16), transparent 60%),
    radial-gradient(700px 600px at 8% 88%, rgba(212,175,90,0.12), transparent 55%),
    rgba(5, 9, 17, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
.menu-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  background: rgba(5, 9, 17, 0.55);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.menu-close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }
.menu-close:hover { border-color: var(--gold); }
.menu-close:hover span { background: var(--gold); }

.menu-nav ul { list-style: none; margin: 0; padding: 0; }
.menu-nav li {
  overflow: hidden;
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-overlay.open .menu-nav li { transform: translateY(0); }
.menu-overlay.open .menu-nav li:nth-child(1) { transition-delay: 0.10s; }
.menu-overlay.open .menu-nav li:nth-child(2) { transition-delay: 0.16s; }
.menu-overlay.open .menu-nav li:nth-child(3) { transition-delay: 0.22s; }
.menu-overlay.open .menu-nav li:nth-child(4) { transition-delay: 0.28s; }
.menu-overlay.open .menu-nav li:nth-child(5) { transition-delay: 0.34s; }
.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.12;
  /* room for serif descenders (g, y) so the overflow:hidden li doesn't clip them */
  padding-bottom: 0.18em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.menu-index {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
  transform: translateY(-0.6em);
}
.menu-nav a:hover { color: var(--gold); }
.menu-foot {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}
.menu-foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.menu-meta { display: flex; flex-direction: column; gap: 1.1rem; }
.menu-meta-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
/* Three evenly-spread columns across the full menu width, like the reference. */
.menu-meta-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 2.4rem;
  width: 100%;
}
.menu-meta-col { display: flex; flex-direction: column; gap: 0.35rem; }
.menu-meta-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.15rem;
}
.menu-meta-col > span:not(.menu-meta-label),
.menu-meta-col > a {
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.menu-meta-col > a {
  text-decoration: underline;
  text-decoration-color: rgba(157, 170, 194, 0.45);
  text-underline-offset: 3px;
}
.menu-meta-col > a:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* --- Pop-up quote form (shares the menu-overlay look & feel) --------- */
.form-overlay {
  justify-content: center;
  /* The overlay itself must NOT scroll: it carries the backdrop-filter, which
     makes it the containing block for the fixed close button. If it scrolled,
     the "fixed" button would scroll away with it. So the inner panel scrolls. */
  overflow: hidden;
  padding-top: 4.5rem;
  padding-bottom: 2rem;
}
.form-overlay-inner {
  width: 100%;
  max-width: 720px;
  /* Cap to the overlay's content box and scroll internally when the form is
     taller than the viewport — keeps the top reachable on short screens. */
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease 0.06s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}
.form-overlay.open .form-overlay-inner { opacity: 1; transform: translateY(0); }
.form-overlay-intro { margin-bottom: 2.1rem; }
.form-overlay-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.9rem;
  color: var(--text);
}
.form-overlay-title em { font-style: italic; color: var(--gold); }
.form-overlay-sub {
  color: var(--text-soft);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
}
.overlay-form { display: flex; flex-direction: column; gap: 1.4rem; }
.overlay-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.overlay-form .btn.full { margin-top: 0.5rem; }

/* --- Custom cursor: colour-inverting dot with a soft inner pulse ----- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;          /* centre on the pointer */
  border-radius: 50%;
  background: #E53935;            /* red base — difference blend inverts it against the page */
  mix-blend-mode: difference;     /* colours invert against whatever sits behind it */
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              margin 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
  will-change: transform;
}
/* Gentle opacity pulse that stays inside the dot — no expanding ring, no flash. */
.cursor-ring.active {
  animation: cursorPulseRest 1.6s ease-in-out infinite;
}
.cursor-ring.hovering {           /* grows over links/buttons/images, keeps pulsing */
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
}
@keyframes cursorPulseRest {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}
/* Hide the custom cursor where there's no fine pointer (touch) or reduced motion */
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
}

.primary-nav { display: flex; gap: 1.8rem; }
.primary-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-soft);
}
.primary-nav a:hover { color: var(--text); }
/* Outlined "ghost" CTA in the nav — mono, uppercase, with a trailing arrow */
.nav-cta {
  background: linear-gradient(135deg, var(--saffron), var(--gold-deep));
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0.62rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;        /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #160C02;
  box-shadow: 0 8px 22px rgba(232, 119, 34, 0.28);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(232, 119, 34, 0.4);
  color: #160C02;
}
.nav-cta .nav-cta-arrow {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); }

/* Hero */
.hero {
  position: relative;
  /* Extra 4.5rem of top padding (~the header's height) so the hero copy sits
     where it always has, while the absolutely-positioned header overlays the
     hero's textured background above it. */
  padding: calc(9rem + 0.5cm) 0 calc(3.5rem + 0.5cm);
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(232,119,34,0.14), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(212,175,90,0.10), transparent 55%);
  overflow: hidden;
}
/* Dotted "world-map" texture, zoomed in and concentrated behind the globe */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(180, 200, 235, 0.10) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 100% at 78% 32%, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 74%);
          mask-image: radial-gradient(130% 100% at 78% 32%, #000 0%, rgba(0, 0, 0, 0.5) 42%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.hero-copy { align-self: center; }
.hero-copy h1 { line-height: 1.2; }
.hero-copy .lede {
  font-family: var(--plex);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.62;
  letter-spacing: 0.005em;
  max-width: 540px;
  color: var(--text-soft);
  margin-top: 1.6rem;
}
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 2.2rem 0 3.4rem; }
.hero-ctas .btn { border-radius: 7px; }
.hero-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 2.4rem;
}
.hero-stats li { display: flex; flex-direction: column; gap: 0.45rem; }
.hero-stats strong { font-family: var(--serif); font-size: 1.85rem; color: var(--text); font-weight: 500; line-height: 1; }
.hero-stats span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.hero-card, .hero-globe {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-md);
  position: relative;
}
.card-head, .globe-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
}

/* 3D globe (cobe) — v2 hero, frameless / floating */
.hero-globe.v2 {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.globe-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
}
.cobe-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.globe-arcs {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  z-index: 5;
}
/* Floating stat cards around the globe — translucent glass */
.stat-card {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.9rem;
  border-radius: 11px;
  background: rgba(13, 22, 40, 0.66);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  color: var(--text);
  white-space: nowrap;
}
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Thin outlined glyphs in the original brand gold. */
  color: var(--gold);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.stat-icon svg {
  width: 20px; height: 20px; display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.1;
}
.stat-value {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* positions mirror the reference layout */
.stat-tl     { top: 14%; left: -7%; }
.stat-right  { top: 45%; right: -9%; }
.stat-bottom { bottom: -3%; left: 50%; transform: translateX(-50%); }

/* Interactive globe */
.globe-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(212,175,90,0.05) 100%);
  border-radius: 10px;
  padding: 0.6rem;
  margin-bottom: 1.2rem;
}
.globe-svg { width: 100%; height: auto; display: block; }
.globe-svg .dest { cursor: pointer; outline: none; }
.globe-svg .dest-dot {
  transition: r .25s ease, fill .25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.globe-svg .dest:hover .dest-dot,
.globe-svg .dest:focus .dest-dot,
.globe-svg .dest.is-active .dest-dot {
  fill: #E87722;
  r: 8;
}
.globe-svg .route {
  transition: stroke-width .25s ease, opacity .25s ease;
  animation: routeFlow 18s linear infinite;
}
.globe-svg .route.is-active { stroke-width: 2.4; opacity: 1; }
@keyframes routeFlow {
  to { stroke-dashoffset: -200; }
}

.globe-detail {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.35rem;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}
.globe-detail strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 700;
}
#globeTransit {
  font-size: 0.78rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  white-space: nowrap;
}
#globeCarriers {
  font-size: 0.85rem;
  color: var(--text-soft);
}
.pulse {
  width: 10px; height: 10px;
  background: var(--saffron);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(232,119,34,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232,119,34,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(232,119,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,119,34,0); }
}
.card-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 1.6rem;
}
.card-stats div { border-left: 2px solid var(--gold); padding-left: 0.9rem; }
.card-stats dt { font-size: 0.78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.card-stats dd { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--text); }
.card-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: 0.8rem;
  color: var(--text-soft);
}

.hero-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  padding: 1.1rem 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  animation: scroll 46s linear infinite;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.marquee-track span { opacity: 0.85; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Sections */
.section { padding: 6rem 0; position: relative; border-top: 1px solid var(--line); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.section-head .eyebrow { justify-content: center; }
.section-lede { font-family: var(--plex); font-weight: 300; font-size: 1.15rem; line-height: 1.62; letter-spacing: 0.005em; color: var(--text-soft); margin-top: 1.25rem; }
.section-lede.light { color: var(--text-soft); }

.grid { display: grid; gap: 1.4rem; }
.services-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
.service {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  transition: border-color .25s ease;
}
.service:hover { border-top-color: var(--gold); }
.service .icon {
  color: var(--gold);
  display: inline-flex;
  margin-bottom: 1.1rem;
}
.service .icon svg { width: 28px; height: 28px; }
.service h3 { margin-bottom: 0.6rem; }
.service p { margin: 0; font-size: 0.95rem; }

/* Left-aligned section heads (Platform / Framework) */
.section-head-left {
  text-align: left;
  max-width: 820px;
  margin-left: 0;
  margin-right: 0;
}

/* The Platform — Primal-style framed pillars */
.platform-head {
  max-width: 920px;
  margin: 0 0 clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.platform-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron);
}
.platform-headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  font-weight: 600;
}
.platform-headline em {
  font-style: italic;
  color: var(--gold);
}
.platform-lead {
  font-family: var(--plex);
  font-weight: 300;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.62;
  letter-spacing: 0.005em;
  color: var(--text-soft);
  max-width: 64ch;
  margin: 0;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px) clamp(36px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  transition: background 0.35s ease, border-color 0.35s ease;
}
.pcard:hover {
  background: var(--surface-2);
  border-color: var(--line-light);
}
.pcard .ptag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}
.pcard .ptag .glyph {
  width: 32px;
  height: 32px;
  color: var(--gold);
}
.pcard h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 20px;
}
.pcard h3 em {
  font-style: italic;
  color: var(--saffron);
}
.pcard > p {
  font-family: var(--sans);
  color: var(--text-soft);
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.55;
  flex: 1 0 auto;
}
.pcard ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  border-top: 1px solid var(--line);
}
.pcard ul li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.pcard ul li span:last-child {
  color: var(--text-dim);
  font-size: 11px;
  text-align: right;
}
.pcard .plink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.pcard .plink:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* The Framework — three numbered tiers */
.framework { margin-bottom: 2.4rem; }
.tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding: clamp(24px, 3vw, 38px) 0;
  border-top: 1px solid var(--line);
}
.tier:last-child { border-bottom: 1px solid var(--line); }
.tier-num {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 0.9;
  color: var(--gold);
}
.tier-body h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.45rem;
}
.tier-body p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text-soft);
}
.tier-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  align-content: start;
}
.tier-tags li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.tier-tags li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.75;
  flex: 0 0 auto;
}

/* Coverage (deep panel) */
.section-dark {
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(232,119,34,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--text);
}
.section-dark h2 { color: var(--text); }
.world-map {
  position: relative;
  max-width: 1160px;
  margin: 0 auto 3rem;
}
.coverage-canvas { display: block; width: 100%; }

.coverage-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.4rem;
}
.cov-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.2rem;
}
.coverage-cta { text-align: center; }

/* --- Coverage: pinned, scroll-driven reveal (Primal-style) ------------- */
.coverage-pin {
  position: relative;
  background: var(--navy);
  color: var(--text);
}
.coverage-head {
  padding-top: clamp(56px, 11vh, 132px);
}
/* Tighten the space between the heading and the map below it. */
.coverage-head .section-head { margin-bottom: clamp(6px, 0.9vh, 12px); }
.coverage-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Less padding up top pulls the map closer to the heading; keep room below. */
  padding: clamp(2px, 0.5vh, 8px) 0 clamp(24px, 4.5vh, 72px);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.coverage-pin h2 { color: var(--text); }

/* One-by-one fade-up reveal (matches Primal's .rb-stagger / .rb-in). */
[data-cov-step] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
[data-cov-step].is-in { opacity: 1; transform: translateY(0); }

/* When pinned: hold the panel in the viewport and pack the original stacked
   arrangement (header, map, then the three tiers) into a single screen. */
.coverage-pin.cov-pinned .coverage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}
.coverage-pin.cov-pinned .world-map {
  /* Grow the map to soak up the centering slack so the gap above it (and the
     matching gap below the CTA) both shrink. Height-budget-aware so it can't
     overflow short viewports: ~1013px @900h, ~745px @768h, capped at 1040px. */
  max-width: min(1160px, calc(212vh - 850px));
  margin: 0 auto clamp(16px, 3vh, 36px);
}
.coverage-pin.cov-pinned .framework { margin-bottom: clamp(12px, 2vh, 24px); }
.coverage-pin.cov-pinned .tier { padding: clamp(11px, 1.6vh, 22px) 0; }

/* No pin (small screens / short viewports / reduced motion): the original
   full-size stacked section with everything visible. */
@media (max-width: 899px) {
  [data-cov-step] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-cov-step] { opacity: 1; transform: none; transition: none; }
}

.hub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hub-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.hub-list strong { font-family: var(--serif); font-size: 1.15rem; color: var(--text); }
.hub-list span { font-size: 0.88rem; color: var(--text-soft); }

.hint { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }
.field select[multiple] {
  border: 1px solid var(--line-light);
  border-radius: 8px;
  min-height: 110px;
  padding: 0.4rem 0.6rem;
}
.field select[multiple]:focus { border-color: var(--gold); }

/* Why */
.why-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.why-item {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
  margin-bottom: 0.95rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.why-icon svg { width: 100%; height: 100%; display: block; }
.why-item h3 { margin-bottom: 0.5rem; }
.why-item p { margin: 0; }

/* Industries */
.section-soft { background: rgba(255,255,255,0.02); }

/* Big Primal-style statement quote */
.statement-section { padding: clamp(88px, 14vw, 200px) 0; }
.big-quote {
  font-family: var(--plex);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-align: left;
  max-width: 100%;
  margin: 0;
  color: var(--text);
}
.big-quote em {
  color: #5a7ce0; /* Primal "cream" palette accent-2 — the periwinkle blue */
  font-style: italic;
}
.industries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 44px) 2rem;
}
.industry {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  transition: border-color .2s ease;
}
.industry:hover { border-top-color: var(--gold); }
.industry h4 { color: var(--text); margin-bottom: 0.5rem; font-weight: 600; }
.industry p { margin: 0; font-size: 0.9rem; }

/* CTA */
.section-cta {
  background:
    radial-gradient(900px 400px at 90% 110%, rgba(232,119,34,0.22), transparent 50%),
    radial-gradient(700px 400px at 0% 0%, rgba(212,175,90,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--text);
  border-top: 1px solid var(--line);
}
.section-cta h2 { color: var(--text); }
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.9rem;
  font-family: var(--plex);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: var(--text-soft);
}
.contact-list li { display: flex; gap: 0.7rem; align-items: center; }
.contact-list span { color: var(--gold); }

.quote-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  color: var(--text);
}
.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--gold-deep);
  background: var(--surface-2);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.18);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
}
.field select:invalid { color: var(--text-dim); }
.field select option { background: var(--surface-solid); color: var(--text); }
.form-success {
  margin: 0.2rem 0 0;
  color: var(--gold);
  font-size: 0.92rem;
}

/* Footer */
/* Primal-style footer (site-footer-v2) */
.site-footer-v2 {
  background: var(--bg-deepest);
  color: var(--text);
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.sfv2-inner { display: flex; flex-direction: column; }
.sfv2-rule { height: 1px; width: 100%; background: rgba(255, 255, 255, 0.1); }
.sfv2-rule-top { margin-bottom: clamp(44px, 7vw, 84px); }
.sfv2-t1 + .sfv2-rule { margin-top: clamp(48px, 7vw, 84px); margin-bottom: clamp(32px, 5vw, 56px); }
.sfv2-t2 + .sfv2-rule { margin-top: clamp(32px, 4vw, 44px); margin-bottom: clamp(24px, 3vw, 36px); }

.sfv2-t1 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
.sfv2-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sfv2-mark { text-decoration: none; color: var(--text); }
.sfv2-mark.brand { align-items: flex-end; gap: 0; }
.sfv2-brand .brand-name { color: var(--text); }
.sfv2-tag {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.sfv2-email {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.sfv2-email:hover { opacity: 0.72; color: var(--gold); }

.sfv2-col { display: flex; flex-direction: column; gap: 0.85rem; }
.sfv2-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.sfv2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sfv2-list a {
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sfv2-list a:hover { color: var(--gold); }

.sfv2-t2 { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); }
.sfv2-disc { display: flex; flex-direction: column; gap: 0.4rem; max-width: 92ch; }
.sfv2-disc p { margin: 0; font-size: 0.78rem; line-height: 1.55; color: var(--text-soft); }
.sfv2-disc + .sfv2-disc { padding-top: clamp(14px, 1.4vw, 20px); border-top: 1px solid rgba(255, 255, 255, 0.08); }

.sfv2-t3 { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sfv2-copy { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-soft); }
.sfv2-legal { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sfv2-legal a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sfv2-legal a:hover { color: var(--gold); }
.sfv2-legal span { color: rgba(255, 255, 255, 0.3); }

.sfv2-news { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; max-width: 380px; width: 100%; }
.sfv2-news-heading {
  font-family: var(--plex);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}
.sfv2-news-row { display: flex; gap: 0.5rem; align-items: stretch; }
.sfv2-news-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text);
  padding: 0.6rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s ease;
}
.sfv2-news-input::placeholder { color: var(--text-soft); }
.sfv2-news-input:focus { border-color: var(--gold); }
.sfv2-news-btn {
  background: var(--gold);
  color: var(--navy-deep);
  border: 1px solid var(--gold);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.sfv2-news-btn:hover { opacity: 0.88; }
.sfv2-news-note { margin: 0; font-family: var(--plex); font-size: 0.72rem; color: var(--text-soft); }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .coverage-cols { grid-template-columns: 1fr; gap: 2rem; }
  .services-grid, .industries { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .tier { grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.6rem; }
  .tier-tags { grid-column: 1 / -1; padding-left: calc(2.7rem + 1.6rem); }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .sfv2-t1 { grid-template-columns: 1fr 1fr; }
  .primary-nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .primary-nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(7, 11, 20, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 1rem 24px;
    border-bottom: 1px solid var(--line);
    gap: 0.8rem;
  }
}
@media (max-width: 600px) {
  .section { padding: 4rem 0; }
  /* Let the coverage map break out of the container's side padding so it runs
     edge-to-edge — noticeably larger on phones. Height derives from width in JS. */
  .world-map {
    max-width: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
  }
  .services-grid, .industries, .card-stats { grid-template-columns: 1fr; }
  .pcard { padding: 28px 22px 36px; }
  .tier { grid-template-columns: 1fr; gap: 0.85rem; }
  .tier-tags { padding-left: 0; }
  .hero-stats { grid-template-columns: 1fr; gap: 1rem; }
  .stat-card { padding: 0.5rem 0.7rem; gap: 0.45rem; border-radius: 10px; }
  .stat-icon svg { width: 17px; height: 17px; }
  .stat-value { font-size: 0.88rem; }
  .stat-label { font-size: 0.54rem; }
  .stat-tl { top: 5%; left: 0; }
  .stat-right { top: 44%; right: 0; }
  .stat-bottom { bottom: 1%; }
  .quote-form .row { grid-template-columns: 1fr; }
  .overlay-form .row { grid-template-columns: 1fr; }
  .sfv2-t1 { grid-template-columns: 1fr; }
  .sfv2-t3 { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .brand-tag { display: none; }
  .menu-meta-cols { grid-template-columns: 1fr; gap: 1.4rem; }
}