/* ============================================================
   DuTecHub: palette
   Only the 6 brand colors below are used (with opacity variants).
   ------------------------------------------------------------
   #242B3E: Hub navy        (dark surface, globe sphere)
   #575A7E: Periwinkle      (muted text, borders, non-featured land)
   #3D4FB5: Electric blue   (accent, links, featured countries)
   #9FA3C9: Soft lavender   (very muted text, hover tint)
   #EDEEF5: Mist            (page background)
   #14182A: Ink             (body text)
   ============================================================ */

:root {
  --navy:        #242B3E;
  --periwinkle:  #575A7E;
  --blue:        #3D4FB5;
  --blue-bright: #596EE6;   /* brighter electric blue: hero accent text + featured countries */
  --lavender:    #9FA3C9;
  --mist:        #EDEEF5;
  --ink:         #14182A;

  /* Functional aliases */
  --bg:          var(--mist);
  --bg-dark:     var(--navy);
  --text:        var(--ink);
  --text-soft:   var(--periwinkle);
  --text-mute:   var(--lavender);
  --accent:      var(--blue);
  --accent-tint: var(--lavender);

  --line:        rgba(87, 90, 126, 0.18);    /* periwinkle @ 18% */
  --line-strong: rgba(87, 90, 126, 0.32);
  --line-dark:   rgba(237, 238, 245, 0.10);  /* mist @ 10%, for use on navy */

  --radius:      16px;
  --radius-lg:   22px;
  --radius-sm:   8px;
  --maxw:        1180px;

  /* Single source of truth for the page's horizontal gutter. The nav, hero,
     sections and footer all consume it, so content lines up on every edge and
     one override per breakpoint re-flows the whole page. Retuned in the
     RESPONSIVE block below. */
  --gutter:      36px;

  /* Soft, layered card lift: a crisp contact line + two diffuse ambients
     (negative spreads keep them tucked under the card, no wide bleed) so the
     raised cards read smoothly instead of as a flat, hard-edged outline. */
  --shadow-card:
    0 1px 2px rgba(20, 24, 42, 0.05),
    0 6px 16px -6px rgba(20, 24, 42, 0.11),
    0 16px 34px -14px rgba(20, 24, 42, 0.12);
  --shadow-card-hover:
    0 2px 6px rgba(20, 24, 42, 0.06),
    0 10px 24px -8px rgba(20, 24, 42, 0.13),
    0 24px 48px -16px rgba(20, 24, 42, 0.15);
  --shadow-pop:  0 18px 50px rgba(20, 24, 42, 0.22);
  --shadow-globe:0 30px 80px rgba(20, 24, 42, 0.28);

  /* ----------------------------------------------------------
     Semantic theme tokens: LIGHT is the default here; the
     [data-theme="dark"] block below re-points them to the
     "What we offer" navy palette. Rules consume these (not the
     raw brand tokens) so a single override flips the whole site.
     ---------------------------------------------------------- */
  --surface-alt:      var(--bg);                     /* "What we offer" band: mist in light, re-pointed to navy for dark */
  --surface-card:     var(--mist);                   /* raised cards on a normal section */
  --card-shadow:      var(--shadow-card);
  --card-shadow-hover:var(--shadow-card-hover);
  --card-border:      rgba(87, 90, 126, 0.14);       /* softer than --line so the raised card leans on its shadow, not a hard outline */
  --nav-bg:           rgba(237, 238, 245, 0.82);     /* frosted navbar */
  --who-bg:           rgba(237, 238, 245, 0.85);     /* frosted "Who we are" card */
  --heading:          var(--ink);                    /* h1 */
  --heading-section:  var(--accent);                 /* h2..h6, .section-tag */
  --link:             var(--accent);                 /* inline links */
  --chip-bg:          rgba(87, 90, 126, 0.10);       /* region chips */
  --tooltip-bg:       var(--navy);                   /* globe tooltip */
  --poster-page-bg:   var(--mist);                   /* poster "desk" behind the sheet */
  --poster-sheet:     var(--mist);                   /* the A4 sheet, mist to match "Who we are" */
  --poster-shadow:    0 20px 60px rgba(20, 24, 42, 0.12);

  /* ----------------------------------------------------------
     "What we offer" alt band, LIGHT values. The [data-theme="dark"]
     block re-points these to the navy palette, so this one section
     keeps its dark treatment in dark mode and turns light otherwise.
     ---------------------------------------------------------- */
  --alt-text:         var(--text);                   /* body copy: ink */
  --alt-text-soft:    var(--text-soft);              /* muted copy: periwinkle */
  --alt-heading:      var(--heading-section);        /* h2/h3: electric blue */
  --alt-line:         var(--line);                   /* hairline dividers */
  --alt-panel:        var(--surface-card);           /* accordion card: same surface as other cards */
  --alt-panel-border: var(--line);
  --alt-panel-shadow: var(--shadow-card);
  --alt-icon:         var(--text-soft);              /* chevron: periwinkle */
  --alt-icon-active:  var(--accent);                 /* chevron open/hover: electric blue */
  --alt-card:         var(--surface-card);           /* nested mission/advantage cards */
  --alt-card-border:  var(--line);
  --alt-card-shadow:  var(--shadow-card);

  /* Scrollbar: track is fully transparent; the thumb is a periwinkle
     pill that lifts to electric blue on hover/active. */
  --scrollbar-track:       transparent;
  --scrollbar-thumb:       rgba(87, 90, 126, 0.38);   /* periwinkle @ 38% */
  --scrollbar-thumb-hover: rgba(61, 79, 181, 0.60);   /* blue @ 60% */
  --scrollbar-thumb-active:var(--blue);               /* full electric blue */
}

/* ============================================================
   DARK THEME: re-points the semantic tokens to the navy
   "What we offer" palette. Set via data-theme on <html> (theme.js);
   the inline <head> snippet applies it before first paint (no flash).
   ============================================================ */
:root[data-theme="dark"] {
  --bg:               var(--navy);                   /* #242B3E */
  --text:             var(--mist);                   /* #EDEEF5 */
  --text-soft:        var(--lavender);               /* #9FA3C9 */
  --text-mute:        var(--lavender);

  --line:             rgba(237, 238, 245, 0.10);     /* mist @ 10% */
  --line-strong:      rgba(237, 238, 245, 0.18);

  --surface-alt:      #2C3346;                        /* subtly raised navy band */
  --surface-card:     rgba(237, 238, 245, 0.05);     /* mist @ 5% over navy */
  --card-shadow:      none;                            /* navy cards read via surface + border, not shadow */
  --card-shadow-hover:none;
  --card-border:      var(--line-dark);
  --nav-bg:           rgba(36, 43, 62, 0.82);         /* frosted navy */
  --who-bg:           rgba(36, 43, 62, 0.85);
  --heading:          var(--mist);
  --heading-section:  var(--lavender);
  --link:             #7E8AE6;                        /* lifted blue, legible on navy */
  --chip-bg:          rgba(237, 238, 245, 0.08);
  --tooltip-bg:       #2C3346;
  --poster-page-bg:   #1C2233;                        /* deep navy so the sheet reads as raised */
  --poster-sheet:     var(--navy);                    /* navy sheet, matches "What we offer" */
  --poster-shadow:    0 30px 80px rgba(20, 24, 42, 0.45);

  /* "What we offer" alt band, DARK values keep the original navy look. */
  --alt-text:         var(--mist);
  --alt-text-soft:    var(--lavender);
  --alt-heading:      var(--lavender);
  --alt-line:         var(--line-dark);
  --alt-panel:        rgba(237, 238, 245, 0.05);
  --alt-panel-border: var(--line-dark);
  --alt-panel-shadow: none;
  --alt-icon:         var(--lavender);
  --alt-icon-active:  var(--mist);
  --alt-card:         rgba(237, 238, 245, 0.04);
  --alt-card-border:  var(--line-dark);
  --alt-card-shadow:  none;

  /* Scrollbar: fully transparent track over navy, lavender thumb that
     lifts to the same "link" blue used elsewhere in dark mode. */
  --scrollbar-track:       transparent;
  --scrollbar-thumb:       rgba(159, 163, 201, 0.30);  /* lavender @ 30% */
  --scrollbar-thumb-hover: rgba(126, 138, 230, 0.60);  /* lifted blue @ 60% */
  --scrollbar-thumb-active:#7E8AE6;                    /* full lifted blue */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* clip (not hidden) prevents horizontal bleed WITHOUT making <body> a scroll
   container; hidden would coerce overflow-y:auto and break position:sticky. */
body { overflow-x: clip; }

/* ============================================================
   SCROLLBAR: brand-tinted, theme-aware.
   The tokens (--scrollbar-*) flip with data-theme, so light and
   dark each get a matching track/thumb pair. Firefox uses the
   two-value scrollbar-color (thumb, track); WebKit/Blink use the
   ::-webkit-scrollbar pseudo-elements below for finer styling
   (channel padding via a transparent border + padding-box clip).
   ============================================================ */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit / Blink: the bar itself */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* the track (channel behind the thumb) */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

/* the corner where a vertical + horizontal bar meet */
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* the thumb: pill shape, inset from the track edges via a
   transparent border clipped to the padding box */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}

a { color: var(--link); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--text); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
h1 { color: var(--heading); }
h2, h3, h4, h5, h6 { color: var(--heading-section); }   /* accent blue (light) / lavender (dark) */

p { margin: 0 0 1rem 0; color: var(--text-soft); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   NAV
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* brand (left) | links (centered) | Join us (right) */
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  justify-self: start;      /* grid col 1, flush left */
}
.brand-mark { color: var(--accent); }
.brand-rest { color: var(--text); }

.nav-links {
  display: flex;
  gap: 20px;
  /* Absolutely centred so the wider right group (Get in touch + theme toggle)
     never pushes the links off the viewport centre. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-nav > .nav-cta { justify-self: end; }   /* grid col 3, Join us flush right */
.nav-links a {
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: all 0.2s ease;
}
.nav-cta:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--mist);
}
/* "Join us" temporarily hidden. !important overrides the responsive rules
   that otherwise reveal one copy per breakpoint. */
.nav-cta--hidden {
  display: none !important;
}

/* Hamburger toggle: hidden on desktop, revealed at the mobile breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Bars morph into an X while the menu is open */
.site-nav.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The "Join us" that lives inside the collapsible menu; desktop uses the
   standalone .nav-cta instead, so hide this copy until mobile. */
.nav-cta-inline { display: none; }

/* ------------------------------------------------------------
   Theme toggle: icon button in the navbar's right grid slot (col 3).
   The sun/moon icons swap on <html data-theme>. Starts [hidden] and is
   revealed by theme.js, so it never shows as a dead control with JS off.
   ------------------------------------------------------------ */
.theme-toggle {
  justify-self: end;        /* grid col 3, flush right, balancing the brand */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Respect the boolean attribute (author display:inline-flex would otherwise
   defeat the UA [hidden] rule). */
.theme-toggle[hidden] { display: none; }

.theme-icon { display: block; width: 20px; height: 20px; }
/* Light shows the moon (click → dark); dark shows the sun (click → light). */
.theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-icon--sun  { display: block; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }

/* ------------------------------------------------------------
   "Get in touch": gradient trigger (top-right, grouped with the
   theme toggle) opening a centred, theme-aware modal popup.
   ------------------------------------------------------------ */
.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Vibrant gradient pill; the gradient flows across it on hover. */
.contact-trigger {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  padding: 11px 22px;
  color: var(--mist);                 /* always light on the blue gradient */
  border: none;
  border-radius: 999px;
  background-image: linear-gradient(120deg, #3d4fb5, #5468e6, #2b3566, #3d4fb5);
  background-size: 220% 220%;
  background-position: 0% 50%;
  box-shadow: 0 6px 18px -6px rgba(61, 79, 181, 0.55);
  transition: box-shadow 0.25s ease, transform 0.18s ease, background-position 0.6s ease;
}
.contact-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px rgba(61, 79, 181, 0.85);
  animation: contact-gradient-flow 3s ease infinite;   /* moving gradient on hover */
}
.contact-trigger:active { transform: translateY(0); }
.contact-trigger:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
@keyframes contact-gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Modal popup: backdrop + centred dialog; surfaces use theme tokens. */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 42, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.contact-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0s;
}
.contact-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 32px 30px 28px;
  background: var(--bg);                 /* mist (light) / navy (dark) */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}
.contact-overlay.open .contact-panel { transform: none; }

.contact-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-close:hover { color: var(--text); border-color: var(--line-strong); }

.contact-title { font-size: 1.4rem; margin: 0 0 6px; }   /* h2 → --heading-section */
.contact-sub { font-size: 0.92rem; color: var(--text-soft); margin: 0 0 20px; }

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
}
.contact-row a { font-size: 0.98rem; font-weight: 500; word-break: break-word; }   /* colour: base a{} = var(--link) */

.copy-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.copy-btn:hover { color: var(--link); border-color: var(--link); }
.copy-btn .check-icon  { display: none; }
.copy-btn.copied       { color: var(--link); border-color: var(--link); }
.copy-btn.copied .copy-icon  { display: none; }
.copy-btn.copied .check-icon { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .contact-trigger:hover { animation: none; }
  .contact-panel { transform: none; transition: opacity 0.12s ease; }
  .contact-overlay.open .contact-panel { transform: none; }
  .contact-overlay { transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
}

@media (max-width: 960px) {
  .site-nav {
    display: flex;                 /* back to flex for the mobile dropdown layout */
    align-items: center;
    padding: 13px var(--gutter);
    gap: 14px;
    flex-wrap: wrap;
  }
  .nav-toggle { display: flex; order: 3; }
  .nav-right { order: 2; margin-left: auto; gap: 10px; }   /* float the CTA to the right */
  /* Desktop standalone CTA hides; the in-menu one takes over */
  .site-nav > .nav-cta { display: none; }
  /* Phone: no manual theme switch; the page follows the OS colour scheme
     automatically (inline <head> snippet + theme.js), so drop the control. */
  .theme-toggle { display: none !important; }

  .nav-links {
    display: none;
    /* undo the desktop absolute-centring; flow as a full-width dropdown */
    position: static;
    transform: none;
    left: auto;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 4;                 /* drop below the brand + right group + toggle row */
    margin-top: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }
  .site-nav.nav-open .nav-links { display: flex; }

  .nav-links a {
    padding: 14px 2px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; }

  .nav-cta-inline {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 14px;
    border: 1px solid var(--line-strong);
  }
  .nav-cta-inline.nav-cta { border-radius: 999px; }
}

/* ============================================================
   HERO: full-bleed; globe is the background, text overlays
   ============================================================ */

/* .parallax-stage wraps the hero + #who and bounds the sticky pin below
   (z-index stays auto so it creates no new stacking context). */
.parallax-stage { position: relative; }

.hero {
  position: relative;
  z-index: 1;              /* collapse hero (globe z0 + content z2) into one layer a sibling can paint over */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 88vh;
  overflow: hidden;        /* keep faded mask within hero bounds */
  display: flex;
  align-items: center;
}

/* Pin the globe backdrop in place while the "Who we are" card rises over it.
   Bounded by .parallax-stage, so the pin releases at the end of #who and never
   sticks behind later sections. Desktop only; at <=720px the hero stays
   position:relative (static overlap fallback, matching the JS isSmall guard). */
@media (min-width: 721px) {
  .hero { position: sticky; top: 0; }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--text-mute);
  margin: 0 0 18px 0;
  font-weight: 500;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  margin: 0 0 22px 0;
}
.accent { color: var(--blue-bright); }
.hero h1 .nowrap { white-space: nowrap; }

.lede {
  font-size: 1.06rem;
  color: var(--text-soft);
  max-width: 460px;
  margin-bottom: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: var(--mist);
}
.btn-primary:hover {
  background: var(--navy);
  color: var(--mist);
  transform: translateY(-1px);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   GLOBE  (full-bleed background of the hero)
   ============================================================ */

/* Container fills the entire hero; globe is the backdrop */
#globe-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 0;
  pointer-events: none;    /* re-enabled on the SVG below */
}

#globe {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: auto;
  /* Soft radial fade so the globe blends into the page, no rectangular
     edges, no visible bounding box. The fade is centered where the
     projection focus sits (see script.js). */
  -webkit-mask-image: radial-gradient(circle at 72% 50%, #000 24%, rgba(0,0,0,0.55) 50%, transparent 78%);
          mask-image: radial-gradient(circle at 72% 50%, #000 24%, rgba(0,0,0,0.55) 50%, transparent 78%);
}

/* Text content overlays the globe */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--gutter);
  pointer-events: none;    /* let globe receive events through empty areas */
}
.hero-content > * { pointer-events: auto; }

.hero-content-inner {
  max-width: 540px;
  pointer-events: auto;
}
.hero-content-inner > * { pointer-events: auto; }

/* The single merged non-featured land mass: quiet lavender wash, faint
   enough that the blue featured countries clearly dominate. */
.land-base {
  fill: var(--lavender);
  fill-opacity: 0.18;
  stroke: none;
  pointer-events: none;
}

/* Every internal country boundary, meshed back after the merge dissolved
   them: a thin periwinkle hairline so each country reads as its own shape. */
.land-borders {
  fill: none;
  stroke: var(--periwinkle);
  stroke-opacity: 0.38;
  stroke-width: 0.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* The 13 featured countries: solid blue, hover shifts to navy. A crisp
   mist outline separates them from each other and from neighbouring land. */
.country.featured {
  fill: var(--blue-bright);
  stroke: var(--mist);
  stroke-width: 0.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.22s ease;
  pointer-events: all;
}
.country.featured:hover,
.country.featured.is-hovered {
  fill: var(--navy);
}

/* Dark theme: over the navy sphere the default land wash and hairline
   borders nearly vanish. Lift the non-featured land to a lighter grey and
   brighten the boundary strokes so each country reads as its own shape. */
:root[data-theme="dark"] .land-base {
  fill: var(--lavender);
  fill-opacity: 0.34;
}
:root[data-theme="dark"] .land-borders {
  stroke: var(--lavender);
  stroke-opacity: 0.55;
}

.globe-hint {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  z-index: 3;
  pointer-events: none;
}

/* Tooltip: dark navy card on the light page → clear contrast */
.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 0;
  max-width: 280px;
  white-space: nowrap;
  padding: 12px 16px;
  background: var(--tooltip-bg);
  border: 1px solid rgba(159, 163, 201, 0.18);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: 0.88rem;
  color: var(--mist);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}
.tooltip.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) translateY(0);
}
.tooltip h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mist);
  letter-spacing: -0.005em;
}
/* Real flag image (assets/flags/*.png). Height tracks the heading font-size;
   width:auto keeps the 4:3 aspect. A hairline ring defines the edge so
   light-heavy flags read cleanly on the dark tooltip card. */
.tooltip-flag {
  flex: 0 0 auto;
  width: auto;
  height: 1.15em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.tooltip-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.82rem;
  border-top: 1px dashed rgba(159, 163, 201, 0.14);
}
.tooltip-row:first-of-type { border-top: none; }
.tooltip-row .k { color: var(--lavender); }
.tooltip-row .v { color: var(--mist); font-weight: 500; }
.tooltip-note {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--lavender);
  font-style: italic;
  opacity: 0.7;
}

/* ============================================================
   SECTIONS: alternating mist and navy
   ============================================================ */

.section {
  padding: 90px var(--gutter);
  background: var(--bg);
  color: var(--text);
}
.section-alt {
  background: var(--surface-alt);
  color: var(--alt-text);
}
.section-alt h2,
.section-alt h3 { color: var(--alt-heading); }
.section-alt p,
.section-alt .lead-paragraph {
  color: var(--alt-text-soft);
}
.section-alt .lead-paragraph { color: var(--alt-text); }

/* ============================================================
   "Who we are": frosted glass panel that rises over the hero.
   The globe behind it is pinned (position: sticky on .hero), so it
   stays put while this card lifts and shrinks slightly on scroll
   (script.js §9), revealing the globe around its edges. This rule is
   the static overlap and works on its own even with JS disabled.
   ============================================================ */
#who {
  position: relative;
  z-index: 2;                                 /* paints above the hero (z-index: 1) */
  max-width: 94%;                             /* floating inset card, never full-bleed; the side gutters reveal the pinned globe */
  margin: -88px auto 0;                        /* -88px overlaps the hero; auto centres the inset card */
  border-top-left-radius:  var(--radius-lg);  /* 22px rounded top lip */
  border-top-right-radius: var(--radius-lg);
  background:                                  /* frosted: mist@85% (light) / navy@85% (dark) */
    linear-gradient(to bottom,                 /* fading to solid page bg over the bottom lip so the */
      var(--who-bg) 0,                          /* card melts into the section below with no visible */
      var(--who-bg) calc(100% - 200px),         /* edge: the frost (and any globe tint) is fully gone */
      var(--bg)     100%);                       /* by the bottom, matching #solve exactly */
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  box-shadow:
    0 -22px 50px -20px rgba(20, 24, 42, 0.22),  /* soft lift shadow cast upward onto the hero */
    inset 0 1px 0 rgba(255, 255, 255, 0.55);    /* crisp frosted top-edge highlight */
}

.section-head,
.section-body {
  max-width: var(--maxw);
  margin: 0 auto;
}

.section-head { margin-bottom: 38px; }
.section-tag {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--heading-section);
  margin-bottom: 14px;
  font-weight: 500;
}
.section-alt .section-tag { color: var(--alt-heading); }

.section h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.lead-paragraph {
  font-size: 1.08rem;
  color: var(--text);
  max-width: 760px;
  margin-bottom: 18px;
}

/* "Who we are" intro: heading on the left, description on the right. */
.who-intro {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.5fr);
  gap: 40px 60px;
  align-items: start;
}
.who-intro-head h2 { margin: 0; }
.who-intro-text p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .who-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Sub-blocks inside a section (e.g. Vision / Mission under "Who we are",
   "Why it works" under "What we offer"). */
.subsection {
  margin-top: 52px;
  padding-top: 4px;
}
.subsection-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.section-alt .subsection-title { border-color: var(--alt-line); }
.subsection-title-spaced { margin-top: 52px; }

/* mission */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mission-card {
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mission-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.section-alt .mission-card {
  background: var(--alt-card);
  border-color: var(--alt-card-border);
  box-shadow: var(--alt-card-shadow);
}
.section-alt .mission-card h3 { color: var(--alt-text); }
.section-alt .mission-card p  { color: var(--alt-text-soft); }

.mission-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 20px;
}
.section-alt .mission-num { color: var(--alt-heading); border-color: var(--alt-line); }
/* On the dark theme the cards sit on navy; render the numbers white for contrast. */
:root[data-theme="dark"] .mission-num { color: var(--mist); }
:root[data-theme="dark"] .section-alt .mission-num { color: var(--mist); }

.mission-card h3 {
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 10px 0;
}
.mission-card p { font-size: 0.95rem; }

/* ---- Scroll-reveal closing statement (bottom of #who): dark navy band.
   Each word carries --lit (0=dim, 1=lit), written by script.js §9b per frame;
   color interpolates dim -> lit via color-mix. .reveal-line's base color is the
   lit color, so the no-JS / unsupported path renders fully lit and readable. ---- */
.who-reveal {
  --reveal-dim: rgba(89, 110, 230, 0.5);     /* brand blue, faded words stay blue */
  --reveal-lit: var(--text);                  /* near-black when lit (theme-aware) */
  --villa-progress: 1;                        /* 0 -> 1, reversible; written by §9b. Default 1
                                                 so the no-JS / reduced-motion baseline shows the
                                                 villa settled (§9b sets it to 0 before pinning). */
  position: relative;
  margin-top: 16px;                          /* snug separation from the mission cards */
  background: transparent;
  text-align: left;
}
/* The pin is opt-in: §9b adds .reveal-pin only on desktop with motion allowed,
   turning the block into a runway whose sticky inner box holds the statement
   while the words light. Without JS (or on phones / reduced-motion) the block
   stays its natural height and simply renders the lit sentence + settled villa.
   Gated to >=721px so a desktop->narrow resize can't strand a pinned runway (the
   class stays but goes inert), matching the .hero pin guard above. */
@media (min-width: 721px) {
  .who-reveal.reveal-pin {
    min-height: 112vh;                       /* runway = 72vh band + 40vh pin travel. The block holds
                                                pinned (text at centre) for that 40vh while the words
                                                light and the villa rises; §9b maps progress 0..1 across
                                                it (pinTravel = runway - band). */
  }
  .who-reveal.reveal-pin .reveal-sticky {
    position: sticky;
    top: 14vh;                               /* centre the 72vh band: 14vh clear above + 72vh + 14vh
                                                below = 100vh, so the flex-centred statement lands at the
                                                EXACT viewport centre (50vh) YET the sections above and
                                                below still peek in, no full-screen takeover. */
    min-height: 72vh;                        /* band height, NOT the full viewport: tall enough to seat
                                                the villa (<=62vh) but short enough that the neighbouring
                                                sections stay visible top and bottom, with no inflated
                                                empty margin padding the statement. */
    display: flex;
    align-items: center;
  }
  /* Tighten the seam where the pinned reveal meets the next section, so the
     closing statement doesn't trail off into a near-empty band before
     "Where teams get stuck" (ids beat the responsive .section padding). */
  #who   { padding-bottom: 60px; }
  #solve { padding-top: 62px; }
}
/* Two columns: the sentence (wide, left) and the villa (right gutter). */
.reveal-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  width: 100%;
}
.reveal-line {
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.15rem);  /* large, statement-scale */
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 0 0.55em 0;
  color: var(--reveal-lit);                  /* baseline = fully lit (no-JS safe) */
}
.reveal-line:last-child { margin-bottom: 0; }
/* No CSS transition on color: the reveal is scroll-driven per rAF frame. */
.reveal-word {
  --lit: 0;
  color: color-mix(in srgb,
           var(--reveal-lit) calc(var(--lit) * 100%),
           var(--reveal-dim));
}
/* Villa in the right gutter. --villa-progress (0..1, written per rAF by §9b;
   reversible) slides it straight up, no fade, no scale, just vertical travel.
   It STARTS just below the fold (out of frame at progress 0), rises into view as
   the FIRST word lights, and lands settled (centred at 50vh alongside the text)
   the moment the LAST word lights, so its travel spans the whole highlight and the
   two finish together; scroll back up and it slides back down in step. No CSS
   transition: the value is written per rAF frame, so scroll position IS the timeline.
   Travel = 52vh + 50%, where 50% is half the villa's OWN height: since it settles
   centred at 50vh, dropping it by (50vh + half its height) puts its top exactly at
   the fold, and the +2vh margin clears any sub-pixel sliver, so it hides fully and
   re-enters as the first word lights on EVERY viewport, tall or short. */
.reveal-visual {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reveal-villa {
  display: block;
  width: auto;
  height: auto;
  max-width: 340px;
  max-height: 62vh;
  border-radius: var(--radius-lg);           /* 22px, echoes the #who lip */
  box-shadow: var(--shadow-pop);
  transform: translate3d(0, calc((1 - var(--villa-progress)) * (52vh + 50%)), 0);
  will-change: transform;
}
@media (max-width: 720px) {
  /* Phones: single column, drop the villa. The word-by-word highlight still
     runs here; §9b drives it from raw scroll position (no pin / runway on
     phones), so the sentence lights up as it passes through the viewport. */
  .who-reveal    { margin-top: 40px; padding: 4px 0; }
  .reveal-grid   { grid-template-columns: 1fr; gap: 0; }
  .reveal-visual { display: none; }
  .reveal-line   { font-size: clamp(1.35rem, 6.4vw, 1.7rem); line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-word { --lit: 1; }                  /* fully lit, no effect (villa default is settled) */
}

/* "What we offer": intro on the left, accordion panel on the right. */
.offer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
  gap: 60px;
  align-items: start;
}
.offer-intro .lead-paragraph { margin-bottom: 0; }

/* The accordion is one rounded panel of divider-separated rows, echoing the
   reference card, kept on the site's navy palette (subtle raised surface). */
.offer-accordion {
  list-style: none;
  margin: 0;
  padding: 2px 30px;
  background: var(--alt-panel);
  border: 1px solid var(--alt-panel-border);
  box-shadow: var(--alt-panel-shadow);
  border-radius: var(--radius-lg);
}
.offer-item { border-top: 1px solid var(--alt-line); }
.offer-item:first-child { border-top: none; }

.offer-item-head { margin: 0; font: inherit; }

/* Clickable row: title + chevron. Button reset. */
.offer-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--alt-text);
  transition: color 0.2s ease;
}
.offer-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.offer-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Chevron drawn from two borders; points down, flips up when open. */
.offer-icon {
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--alt-icon);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease, color 0.2s ease;
}
.offer-trigger:hover .offer-icon { color: var(--alt-icon-active); }
.offer-item.is-open .offer-icon {
  transform: rotate(-135deg);
  color: var(--alt-icon-active);
}

/* Collapsible body: grid-template-rows 0fr -> 1fr (no height measuring). */
.offer-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.offer-item.is-open .offer-panel { grid-template-rows: 1fr; }
.offer-panel-inner { overflow: hidden; }
.offer-panel-inner p {
  margin: 0;
  padding: 0 0 26px;
  font-size: 1.02rem;
  color: var(--alt-text-soft);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .offer-panel,
  .offer-icon { transition: none; }
}

/* Stack the two columns before they get cramped. */
@media (max-width: 860px) {
  .offer-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* advantage */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.advantage-card {
  background: var(--surface-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.advantage-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.advantage-card h3 {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 10px 0;
}
.advantage-card p { font-size: 0.95rem; color: var(--text-soft); }

/* region chips: two-row auto-scrolling marquee */
.region-marquee {
  margin: 28px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  /* Fade the chips into the page at both edges so they slide in/out softly. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.region-row {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Top row drifts right, bottom row drifts left. The two identical tracks in
   each row make translateX(-50%) land exactly on a repeat = seamless loop. */
.region-row--right { animation: region-scroll-right 44s linear infinite; }
.region-row--left  { animation: region-scroll-left  44s linear infinite; }

.region-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.region-track li {
  /* Spacing lives on the item (not flex gap) so each track's width (and thus
     the -50% loop distance) stays exact. */
  margin-right: 12px;
  padding: 9px 18px;
  white-space: nowrap;
  /* Soft filled tag (no border, softer corners) so these read as passive
     labels, distinct from the outlined pill of the "Join us" CTA. No hover
     state: the chips are decorative and always in motion. */
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--chip-bg);
}
/* Alt-band variant, if the Regions chips are ever moved into the offer band */
.section-alt .region-track li {
  color: var(--alt-text);
  background: var(--chip-bg);
}
/* Dark theme sits on the navy page background, so lift the country names from
   muted lavender to (near-)white for stronger contrast. Light theme keeps the
   darker periwinkle text; white would be invisible on the mist background. */
:root[data-theme="dark"] .region-track li {
  color: var(--mist);
}

@keyframes region-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes region-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Reduced motion: stop the drift and fall back to a static wrapped layout. */
@media (prefers-reduced-motion: reduce) {
  .region-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .region-row {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    gap: 10px;
  }
  .region-track {
    flex-wrap: wrap;
    gap: 10px;
  }
  .region-track[aria-hidden="true"] { display: none; }
  .region-track li { margin-right: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 60px var(--gutter) 30px;
  background: var(--bg);
  color: var(--text);
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
.brand-footer {
  font-size: 1.2rem;
  margin: 0 0 10px 0;
}
.footer-note {
  font-size: 0.92rem;
  color: var(--text-soft);
  max-width: 320px;
}
.footer-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.copyright {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text-mute);
}

/* ============================================================
   RESPONSIVE
   --gutter is the single knob for horizontal rhythm: the nav, hero,
   sections and footer all read from it, so each breakpoint mostly
   retunes the gutter and the vertical spacing. padding-block keeps
   the horizontal padding (= --gutter) from the base rules intact.
   ============================================================ */

/* ---- Tablet / small laptop ---- */
@media (max-width: 960px) {
  :root { --gutter: 30px; }
  #globe-container { max-width: 100%; }
  .mission-grid   { grid-template-columns: 1fr; gap: 18px; }
  .advantage-grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 28px; }
  .section        { padding-block: 76px; }
  .hero-content   { padding-block: 66px; }
}

/* ---- Phones (large) ---- */
@media (max-width: 720px) {
  :root { --gutter: 22px; }

  .section      { padding-block: 62px; }
  .section-head { margin-bottom: 26px; }

  /* ----------------------------------------------------------
     Hero: a clean, copy-only vertical stack. The interactive globe
     is a desktop-only backdrop; on phones it's hidden (below) so the
     hero is just the headline + lede on a solid background.
     ---------------------------------------------------------- */
  .hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 6px;
    overflow: visible;   /* no globe to mask-clip here (it's hidden on mobile);
                            keeping it visible stops overflow:hidden from
                            cropping the copy's reveal rise. */
  }
  .hero-content    { padding-block: 40px 22px; }
  .eyebrow         { margin-bottom: 14px; }
  .hero h1         { margin-bottom: 16px; }
  .hero h1 .nowrap { white-space: normal; }        /* let the first line wrap on very narrow screens */
  .lede            { max-width: none; font-size: 1.02rem; margin-bottom: 0; }

  /* The globe is a desktop backdrop only; hide it entirely on phones so the
     hero reads as a clean copy block. (script.js skips its boot to match, so
     the world atlas isn't fetched and no animation loop runs here.) */
  #globe-container { display: none; }

  /* "Who we are": full-width, flat section flush under the hero.
     No negative overlap and no frosted card (that treatment is desktop-only,
     where the globe is pinned behind it). */
  #who {
    max-width: none;
    margin-top: 0;
    border-radius: 0;
    background: var(--bg);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
  }

  .subsection              { margin-top: 42px; }
  .subsection-title-spaced { margin-top: 42px; }

  .mission-card,
  .advantage-card { padding: 24px; }

  /* "What we offer": tighter accordion rows so titles + copy breathe. */
  .offer-accordion     { padding: 2px 20px; }
  .offer-trigger       { padding: 20px 0; gap: 16px; }
  .offer-title         { font-size: 1.1rem; }
  .offer-panel-inner p { font-size: 0.98rem; padding-bottom: 22px; }

  .site-footer { padding-block: 50px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .footer-note { max-width: none; }

  /* Contact modal: comfortable padding, full-width sheet feel. */
  .contact-overlay { padding: 16px; }
  .contact-panel   { padding: 28px 22px 24px; }
}

/* ---- Phones (standard) ---- */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .section        { padding-block: 54px; }
  .hero-content   { padding-block: 34px 18px; }
  .mission-card,
  .advantage-card { padding: 20px; }
  .region-marquee  { gap: 10px; }
  .region-track li { font-size: 0.82rem; padding: 7px 14px; margin-right: 8px; }
}

/* ---- Very small phones: keep the nav row from crowding ---- */
@media (max-width: 380px) {
  :root { --gutter: 15px; }
  .brand           { font-size: 1.05rem; }
  .contact-trigger { padding: 10px 15px; font-size: 0.82rem; }
  .nav-toggle      { width: 38px; height: 38px; }
  .hero h1         { font-size: 2rem; }
}

/* ============================================================
   SCROLL REVEAL: staggered entrance for text & imagery
   ------------------------------------------------------------
   Elements tagged [data-reveal] start hidden and rise into place
   as they scroll into view. reveal.js gives each a --reveal-i (its
   index among the reveal items sharing its parent); that fans the
   transition-delay out into a soft left->right / top->down stagger,
   then adds .is-revealed to play it. One-shot: revealed elements
   stay put.

   The hidden state is scoped under html.reveal-armed, a class the
   inline <head> snippet sets ONLY when JS is on AND motion is allowed,
   so no-JS, reduced-motion, and the "Visit us" poster page (which never
   arms it) all render fully visible with no effect. A <head> safety
   timer clears the arm if reveal.js never initialises, so content can
   never get stuck hidden.

   The rise uses the standalone `translate` property (not `transform`)
   so it composes with (rather than clobbering) the transform-based
   hover lifts on the cards and the marquee's own motion.
   ============================================================ */
html.reveal-armed [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity   0.68s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.68s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* --reveal-i (index within the parent group, capped in reveal.js) fans the
     cascade; the will-change hint keeps the composited rise smooth. */
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, translate;
}
/* Images / figures travel a little further and ease in from a hair
   smaller, so visuals settle rather than merely fade. */
html.reveal-armed [data-reveal="image"] {
  translate: 0 40px;
  scale: 0.98;
}
html.reveal-armed [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;   /* release the compositor hint once settled */
}

/* Motion off → no reveal. (Belt-and-suspenders: the <head> snippet
   already skips arming under reduced motion, so this rarely matters.) */
@media (prefers-reduced-motion: reduce) {
  html.reveal-armed [data-reveal] {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}