/* =========================================================================
   Expanvia — U.S. Market Expansion Platform
   Single stylesheet. Section order matches the document order of index.html.
   ========================================================================= */

/* Tokens ------------------------------------------------------------------ */

:root {
  --navy-950: #030d28;   /* header, footer, deepest ground */
  --navy-900: #061634;
  --navy-800: #0b1f41;
  --navy-700: #122b54;
  --navy-600: #1b3a6b;
  --navy-line: rgba(255, 255, 255, .14);

  --gold: #e2b476;
  --gold-deep: #c9964f;
  /* Same family, dark enough to clear AA as small caps on paper. */
  --gold-ink: #85631f;
  --gold-pale: #f3e0c2;

  --paper: #f4f6f8;
  --paper-2: #fafbfc;
  --white: #fff;

  --ink: #0f1e3d;        /* headings on light */
  --body: #5a6478;       /* body copy on light */
  --muted: #646e82;
  --rule: #e3e7ec;

  --on-dark: rgba(255, 255, 255, .78);
  --on-dark-soft: rgba(255, 255, 255, .58);

  /* The comp puts the content edge at 5% of the viewport, so the gutter is
     folded into the shell rather than sitting outside it. */
  --gut: 24px;
  --shell: 1344px;
  --pad-x: max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
  --r: 6px;

  /* Prose that sits directly in the shell shares the same right edge as the
     header (logo → Let's Talk). Text inside a narrower column or card is
     bounded by that column, so the token is a no-op there. */
  --measure: 100%;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
}

/* Base -------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* --header-h is measured by nav.js; the literal is the desktop height. */
  scroll-padding-top: calc(var(--header-h, 93px) + 16px);
  /* Mac trackpad overscroll pulls the hero down and leaves the transparent
     header sitting on the white page ground. The logo is white, so it vanishes. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* If the root still bounces, the gap matches the photograph instead of flashing white. */
body.home { background: var(--navy-950); }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

/* Two-tone focus ring. The site mixes white, pale grey, gold and navy
   surfaces, and no single colour clears 3:1 against all of them — gold is
   invisible on a gold button, navy is invisible on a navy band. Pairing a navy
   outline with a gold halo means at least one half always shows. */
:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--gold);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--navy-950);
  font-weight: 700;
  transition: top .18s;
}
.skip-link:focus { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Icons ------------------------------------------------------------------- */

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-lg { width: 30px; height: 30px; stroke-width: 1.4; }
.ico-xl { width: 54px; height: 54px; stroke-width: 1.15; }

/* Wordmark ---------------------------------------------------------------- */
/* Real logo asset (navy + orange X-arrow). Dark surfaces use the white cut. */

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.brand-logo {
  display: block;
  width: auto;
  height: 34px;
}
.brand-sub {
  display: block;
  margin-top: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2;
  color: var(--on-dark-soft);
  white-space: nowrap;
}
/* Between the drawer breakpoint and roughly 1280px the nav squeezes the
   lockup and the tagline wraps onto two or three lines. The logo carries the
   brand on its own there, so the line is dropped rather than broken up. */
@media (min-width: 1001px) and (max-width: 1279px) {
  .site-header .brand-sub { display: none; }
}

/* Type helpers ------------------------------------------------------------ */

.eyebrow {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* On navy the bright gold already clears AA, so it stays. */
.houston .eyebrow,
.industries .eyebrow,
.next .eyebrow { color: var(--gold); }

/* Every heading size below was read off the comp: the ratio of a rendered
   line's width to the viewport width fixes the type size independently of the
   width the comp was drawn at. */
.h2 {
  font-size: clamp(25px, 2.36vw, 34px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
}
.h2-light { color: #fff; }

.houston .h2 { font-size: clamp(26px, 2.5vw, 36px); }
.challenge .h2 { font-size: clamp(21px, 2.03vw, 29px); }
.industries .h2 { font-size: clamp(21px, 1.95vw, 28px); }
.next .h2 { font-size: clamp(23px, 2.15vw, 31px); }

.how .h2 { font-size: clamp(20px, 1.81vw, 26px); }
.services .h2,
.reach .h2,
.impact .h2 { font-size: clamp(18px, 1.53vw, 22px); }

.lede { margin-top: 15px; max-width: var(--measure); font-size: 16px; }

/* Handwritten asides. On the photographs the writing is white and only the
   underline is gold; on the pale solution photo the writing is navy. */
.script {
  position: relative;
  font-family: var(--font-hand);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.swoosh {
  position: absolute;
  left: 8%;
  bottom: -30px;
  width: 150%;
  height: 42px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* The comp's pills are 36px tall; the touch-friendly size returns at 900px. */
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn .ico { width: 16px; height: 16px; stroke-width: 1.9; }
.btn:hover { transform: translateY(-1px); }

.btn-sm { padding: 11px 22px; font-size: 13px; }

.btn-gold { background: var(--gold); color: var(--navy-950); }
.btn-gold:hover { background: var(--gold-pale); }

.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }

.btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn-outline { border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

/* World map --------------------------------------------------------------- */

/* One cached SVG, recoloured per context through a mask so the same file can
   be pale grey behind the purpose copy and blue inside the reach panel. */
.world { position: absolute; pointer-events: none; }
.world::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  /* contain, never stretch: the container carries the map's own 2:1 ratio. */
  -webkit-mask: url(../img/world.svg) center / contain no-repeat;
  mask: url(../img/world.svg) center / contain no-repeat;
}
.world-light { color: #d6d9dd; }
.world-navy { color: #2c4d82; }

.arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Hairline routes with a fine dash: the comp draws them almost as pencil. */
.arcs path {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  opacity: .46;
}
.arcs circle { fill: var(--gold-deep); opacity: .8; }
.arcs .pin { fill: var(--navy-800); stroke: none; opacity: 1; }
.arcs circle[fill="#fff"] { opacity: 1; }

/* Header ------------------------------------------------------------------ */

/* The comp has no header bar: the row floats on the hero photograph, which is
   why it is taken out of flow and the hero carries the padding for it. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: transparent;
  padding-top: env(safe-area-inset-top);
  transition: background .2s, border-color .2s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--navy-950);
  border-bottom-color: var(--navy-line);
}
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto max-content;
  align-items: center;
  gap: 24px;
  /* The comp hangs the header a little below the optical centre of its band. */
  padding-top: 21px;
  min-height: 92px;
}
.brand { justify-self: start; }
.header-cta {
  justify-self: end;
  /* Long locale labels (TR/ES) must stay one line — never grow the pill vertically. */
  white-space: nowrap;
  flex-shrink: 0;
}
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.header-actions .header-cta { justify-self: auto; }

.lang-switch {
  position: relative;
  z-index: 55;
}
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.lang-switch-btn:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.lang-flag.fi {
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  font-size: 14px;
}
.lang-switch-btn .ico {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
  transition: transform .2s;
  opacity: .85;
}
.lang-switch[data-open="true"] .lang-switch-btn .ico { transform: rotate(180deg); }

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: none;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: var(--r);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.lang-switch[data-open="true"] .lang-switch-menu { display: grid; gap: 2px; }
.lang-switch-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: calc(var(--r) - 2px);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lang-switch-menu li:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.lang-switch-menu li.is-current {
  color: var(--gold-pale);
  background: rgba(212, 175, 55, .12);
}

.main-nav { justify-self: center; }
.nav-list { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.main-nav a {
  position: relative;
  padding-block: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  transition: color .18s;
  white-space: nowrap;
}
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s;
}
.main-nav a:hover { color: #fff; }
.nav-item > a:hover::after { transform: scaleX(1); }

/* Dropdowns. The panel opens on hover for pointers and on the toggle button
   for keyboard and touch, so neither input mode depends on the other. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
}
.nav-toggle .ico { width: 13px; height: 13px; stroke-width: 2.4; transition: transform .2s; }
.nav-toggle:hover { color: #fff; }
.nav-item[data-open="true"] .nav-toggle .ico { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 60;
  min-width: 232px;
  padding: 8px;
  display: grid;
  gap: 1px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(3, 13, 40, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-item[data-open="true"] .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Bridges the gap between the trigger and the panel so the pointer can travel
   without closing the menu. */
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: -14px;
  height: 12px;
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark);
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: var(--navy-700);
  color: #fff;
}
.nav-menu a.is-current { color: var(--gold); font-weight: 700; }
.nav-menu a.is-current::before { content: "\2014\00a0"; }

.burger {
  display: none;
  width: 42px;
  height: 38px;
  padding: 9px 8px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-950);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, #02102b 16%, rgba(2, 16, 43, .93) 32%,
                    rgba(2, 16, 43, .55) 52%, rgba(2, 16, 43, .12) 78%),
    /* The comp's sky is cooler than the source photograph. */
    linear-gradient(to right, transparent 38%, rgba(12, 34, 78, .3)),
    linear-gradient(to bottom, rgba(2, 16, 43, .55), transparent 26%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "place  place"
    "copy   script"
    "strip  strip";
  align-items: start;
  padding-block: 106px 42px;
}

.hero-place {
  grid-area: place;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--on-dark-soft);
}
.hero-place .ico { width: 14px; height: 14px; }

.hero-copy { grid-area: copy; max-width: 640px; padding-top: 29px; }

.hero-title > span,
.hero-sub > span { display: block; }

.hero-title {
  font-size: clamp(38px, 3.78vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: #fff;
}
.hero-sub {
  margin-top: 12px;
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: #fff;
}
.hero-text {
  margin-top: 16px;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.64;
  color: var(--on-dark);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }

.script-hero {
  grid-area: script;
  align-self: start;
  margin: 40px 0 0 40px;
  text-align: left;
  transform: rotate(-8deg);
}

.hero-strip {
  grid-area: strip;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 46px;
  max-width: 520px;
  margin-top: 54px;
}
.hero-strip li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .015em;
  color: #fff;
}
.hero-strip .ico { width: 30px; height: 30px; stroke-width: 1.35; color: var(--gold-pale); }

/* Our purpose ------------------------------------------------------------- */

.purpose {
  position: relative;
  overflow: hidden;
  padding-block: 30px 24px;
  background: var(--paper);
}
.purpose .h2 { line-height: 1.18; }
/* Box must carry the map's own 2:1 ratio, or the continents flatten. */
.purpose .world-light {
  inset: auto;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(calc(-50% + 10px));
  width: min(58%, 826px);
  aspect-ratio: 2 / 1;
  height: auto;
}

.purpose-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 40px;
}
.purpose-copy { grid-column: 1; }

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 15px 0 27px;
  max-width: 510px;
}
.pillars li {
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .015em;
  color: var(--ink);
  text-align: center;
}
.pillar-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border: 1px solid var(--navy-800);
  border-radius: 50%;
  color: var(--navy-800);
}
.pillar-badge .ico { width: 18px; height: 18px; }

/* Sits over the map's lower right, not below it. */
.purpose-claim {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  margin-right: clamp(16px, 3.05vw, 44px);
  margin-bottom: 8px;
}
.claim {
  font-size: clamp(16px, 1.36vw, 19.5px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}
.claim-sub { margin-top: 10px; font-size: 13px; line-height: 1.6; }

/* Split scaffolding ------------------------------------------------------- */

/* Panel splits are taken from where the background colour changes in the
   comp, which is different for each of the three split rows. */
.duo { display: grid; grid-template-columns: 56.5fr 43.5fr; align-items: stretch; }
.duo-work { grid-template-columns: 50fr 50fr; }
.duo-reach { grid-template-columns: 53fr 47fr; }

/* Houston ----------------------------------------------------------------- */

.houston {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-950);
  padding: 23px 36px 47px var(--pad-x);
}
/* The comp cuts the photograph with a diagonal that leaves the navy wedge
   widest at the top: the seam travels from 68% of this column down to 42%. */
.houston-media {
  position: absolute;
  inset: 0 0 0 41.6%;
  z-index: -1;
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
}
.houston-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.houston-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #030d28 2%, rgba(3, 13, 40, .58) 20%,
                              rgba(3, 13, 40, .12) 52%, rgba(3, 13, 40, .3) 100%);
}
.houston-body { max-width: 860px; }
.houston-sub, .ticks { max-width: 560px; }
.houston-sub {
  margin-top: 12px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.34;
  color: #fff;
}

.ticks { display: grid; gap: 10px; margin: 47px 0 24px; }
.ticks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-dark);
}
.tick {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: none;
  border: 1px solid var(--navy-line);
  border-radius: 50%;
  color: var(--gold-pale);
}
.tick .ico { width: 15px; height: 15px; }

/* Wider than the copy column on purpose: the stats run out over the photo. */
.houston-foot {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

.stats { display: flex; gap: 30px; flex-wrap: wrap; }
.stats dt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.stats dt .ico { width: 13px; height: 13px; color: var(--gold); }
.stats dd {
  margin: 3px 0 0;
  font-size: 9.5px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--on-dark-soft);
}

/* The challenge ----------------------------------------------------------- */

.challenge {
  background: var(--white);
  /* The comp runs this panel's cards nearer the viewport edge than the shell
     allows, so the right inset drops the extra gutter. */
  padding: 27px max(var(--gut), calc((100vw - var(--shell)) / 2)) 0 40px;
  display: flex;
  flex-direction: column;
}
.challenge .lede { margin-top: 14px; font-size: 13.5px; }

.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 21px 0 18px;
}
.options li {
  padding: 24px 19px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.options .ico-lg {
  width: 34px;
  height: 34px;
  color: var(--navy-700);
  margin-bottom: 12px;
}
.options h3 {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}
.options p { margin-top: 9px; font-size: 11.5px; line-height: 1.72; }

.fourth {
  margin-top: auto;
  padding: 12px 22px 14px;
  background: var(--navy-900);
  border-radius: var(--r) var(--r) 0 0;
  text-align: center;
}
.fourth span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
}
.fourth strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(12.5px, 1.12vw, 16px);
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
}

/* The Expanvia model ------------------------------------------------------ */

.solution {
  display: grid;
  grid-template-columns: 55.2fr 44.8fr;
  align-items: stretch;
  background: var(--paper-2);
}
.solution-body { padding: 36px 24px 48px var(--pad-x); }
.solution-sub {
  margin-top: 14px;
  max-width: var(--measure);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--body);
}

/* Hub and spoke. Two node columns flank a central disc; the connectors are
   drawn as hairlines from each node toward the middle. */
.orbit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 22px 14px;
  margin-top: 16px;
  max-width: 600px;
}
.orbit-hub {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-content: center;
  gap: 12px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--navy-700), var(--navy-950) 78%);
  text-align: center;
}
.hub-logo { display: block; width: 118px; height: auto; margin-inline: auto; }
.hub-sub {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.node { display: flex; align-items: flex-start; gap: 9px; }
.node > div { width: 132px; }
.node-1 { grid-area: 1 / 1; }
.node-2 { grid-area: 1 / 3; }
.node-3 { grid-area: 2 / 1; }
.node-4 { grid-area: 2 / 3; }
.node-1, .node-3 { justify-content: flex-end; text-align: left; }

.node-badge {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-pale);
}
.node-badge .ico { width: 20px; height: 20px; stroke-width: 1.4; }
.node h3 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
}
.node p { margin-top: 4px; font-size: 10px; line-height: 1.55; }

/* Connectors, decorative only. */
.node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  background: var(--rule);
  z-index: -1;
}
.node-1::after, .node-3::after { left: calc(50% - 84px); }
.node-2::after, .node-4::after { right: calc(50% - 84px); }
.node-1::after, .node-2::after { transform: rotate(14deg); }
.node-3::after, .node-4::after { transform: rotate(-14deg); }
.node-1::after, .node-2::after { top: 62%; }
.node-3::after, .node-4::after { top: 38%; }

/* In the comp the photograph runs off the right edge of the page and the
   handwritten line sits on its pale right-hand side, so the caption is an
   overlay rather than a neighbouring column. */
.solution-media { position: relative; overflow: hidden; }
/* Absolute so the photograph's intrinsic ratio cannot set the row height —
   the copy column owns that. */
.solution-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 52%;
}
/* Just enough wash to seat the handwritten line on the wall. */
.solution-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(250, 251, 252, .34) 0%, transparent 26%);
}
.script-quote {
  position: absolute;
  z-index: 1;
  right: var(--gut);
  top: 50%;
  width: 9.3em;
  transform: translateY(calc(-50% - 9px)) rotate(-2deg);
  color: var(--navy-800);
  font-size: 21px;
  text-align: left;
}
.script-quote .swoosh { left: 6%; bottom: -20px; width: 86%; height: 22px; }

/* How it works ------------------------------------------------------------ */

.how {
  background: var(--paper-2);
  padding: 14px 40px 26px var(--pad-x);
}
.flow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 35px 0 47px;
}
.flow li:not(.flow-arrow) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 104px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
}
.flow .ico-xl { color: var(--navy-800); }
.flow-arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -18px;
  color: var(--body);
}
.flow-arrow .ico { width: 24px; height: 24px; stroke-width: 1.5; }

/* Our services ------------------------------------------------------------ */

.services {
  background: var(--white);
  padding: 9px max(var(--gut), calc((100vw - var(--shell)) / 2)) 27px 41px;
}
/* This panel's eyebrow sits tighter to its heading than the rest of the page. */
.services .eyebrow { margin-bottom: 0; }
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--navy-900);
  min-height: 102px;
}
.tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The comp keeps the photograph readable at the top of the tile and sinks it
   into navy behind the description. */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(4, 17, 44, .42) 0%, rgba(4, 17, 44, .72) 45%, rgba(4, 17, 44, .94) 100%);
}
.tile > a {
  display: block;
  height: 100%;
  text-decoration: none;
}
.tile > a:hover .tile-body h3 { color: var(--gold); }
.tile-body { padding: 18px 16px; }
.tile-body .ico { display: none; }
.tile-body h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #fff;
}
.tile-body p { margin-top: 6px; font-size: 10px; line-height: 1.4; color: rgba(255, 255, 255, .86); }

/* Industries -------------------------------------------------------------- */

.industries { background: var(--navy-950); padding-block: 25px 25px; }
.industries-inner {
  display: grid;
  grid-template-columns: minmax(0, 294px) minmax(0, 758px) minmax(0, 184px);
  align-items: center;
  gap: 30px;
}
.industries-head .h2 { font-size: clamp(19px, 1.6vw, 22.5px); }

.sectors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sectors li {
  overflow: hidden;
  border-radius: var(--r);
  background: #0c2949;
}
/* The comp cools the sector photographs down so the strip reads as one band
   rather than five competing pictures. */
.sectors img {
  width: 100%;
  aspect-ratio: 1 / .705;
  object-fit: cover;
  filter: saturate(.62) brightness(.9);
}
.sectors li > a { display: block; text-decoration: none; }
.sectors li > a:hover img { filter: saturate(.85) brightness(1); }
.sectors li > a:hover span { color: var(--gold); }
.sectors span {
  display: block;
  padding: 22px 8px 25px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  color: #fff;
}

.industries-aside p {
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark);
}

/* Global reach ------------------------------------------------------------ */

.reach {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  padding: 22px 36px 17px var(--pad-x);
}
/* The reach map shares the corrected 5:3 globe; keep it clear of the band edges. */
.reach .world-navy {
  inset: auto;
  top: 50%;
  right: 3.4%;
  left: auto;
  transform: translateY(-50%);
  width: min(56.3%, 425px);
  aspect-ratio: 2 / 1;
  height: auto;
}
.reach .arcs path { opacity: .75; }

.checks { display: grid; gap: 4px; margin-top: 18px; max-width: 300px; }
.checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--body);
}
.checks .ico { width: 17px; height: 17px; color: var(--gold-deep); }

/* Proven impact ----------------------------------------------------------- */

.impact {
  background: var(--white);
  padding: 22px max(var(--gut), calc((100vw - var(--shell)) / 2)) 18px 20px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 16px;
}
.metrics li {
  padding: 20px 14px 19px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  text-align: center;
}
.metrics b {
  display: block;
  font-size: clamp(23px, 2.08vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.metrics span { display: block; margin-top: 6px; font-size: 11.5px; }

/* The next step ----------------------------------------------------------- */

.next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-950);
}
.next-media { position: absolute; inset: 0; z-index: -1; }
.next-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 56%; }
.next-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg, #02102b 24%, rgba(2, 16, 43, .9) 38%,
                              rgba(2, 16, 43, .3) 62%, rgba(2, 16, 43, .46) 100%);
}
.next-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 20px 22px;
}
.next-inner > div { flex: 1; }
.next-text { margin-top: 10px; font-size: 13.5px; line-height: 1.62; color: var(--on-dark); }
.script-next { flex: none; text-align: center; transform: rotate(-7deg); }

/* Footer ------------------------------------------------------------------ */

.site-footer { background: var(--navy-950); color: var(--on-dark); }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 36px;
  padding-block: 27px;
}
.footer-brand .brand-logo { height: 28px; }
.footer-brand .brand-sub { font-size: 11.5px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 28px; justify-content: flex-start; }
.footer-nav a { font-size: 12.5px; font-weight: 600; transition: color .18s; }
.footer-nav a:hover { color: var(--gold); }

.footer-contact { display: grid; gap: 9px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.footer-contact .ico { width: 15px; height: 15px; color: var(--gold); }
.footer-contact a { transition: color .18s; }
.footer-contact a:hover { color: var(--gold); }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color .18s;
}
.footer-social a:hover { background: var(--gold); color: var(--navy-950); }
.footer-social .ico { width: 17px; height: 17px; }

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 15px;
  border-top: 1px solid var(--navy-line);
  font-size: 11px;
  color: var(--on-dark-soft);
}
.footer-bar nav { display: flex; gap: 22px; }
.footer-bar a { transition: color .18s; }
.footer-bar a:hover { color: var(--gold); }

/* ==========================================================================
   Docx home wireframe additions (content-first pass)
   ========================================================================== */

.h3 {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 18px;
}

.core-line {
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  max-width: var(--measure);
  margin-inline: auto;
}

.problem {
  background: var(--paper);
  padding-block: 56px 48px;
}
.problem-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}
.problem-punch {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  max-width: 640px;
}
.challenge-block .options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.challenge-block .options li {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 20px 16px;
}
.challenge-block .options h3 {
  margin: 12px 0 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.challenge-block .options p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.challenge-block .fourth {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.challenge-block .fourth span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.challenge-block .fourth strong {
  font-size: 16px;
  font-weight: 800;
}

.solution-cap {
  margin-top: 22px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.compare {
  background: var(--paper-2);
  padding-block: 56px;
  border-block: 1px solid var(--rule);
}
.compare-inner .h2 { margin-bottom: 28px; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare-col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 32px 28px;
}
.compare-col h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare-col-accent {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.compare-col-accent h3 { color: var(--gold); }
.compare-col ul { display: grid; gap: 8px; }
.compare-col li {
  font-size: 14.5px;
  font-weight: 600;
  padding-left: 16px;
  position: relative;
}
.compare-col li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-deep);
}
.compare-col-accent li::before { background: var(--gold); }
.compare-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* Inline "read the full version" link that sends each home teaser to its
   dedicated page. */
.section-more { margin-top: 22px; }
.section-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-800);
  text-decoration: none;
}
.section-more .ico {
  width: 16px;
  height: 16px;
  transition: transform .18s;
}
.section-more a:hover { color: var(--gold-ink); }
.section-more a:hover .ico { transform: translateX(3px); }
.industries .section-more a,
.h2-light ~ .section-more a { color: var(--gold); }

/* Closing row of a teaser block: the fine print and the "see everything" link
   share one baseline instead of stacking loose under the cards. */
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.section-foot > * { margin: 0; }
.section-foot .section-more a { padding-block: 0; }

.cost {
  background: #fff;
  padding-block: 56px;
}
.cost-lede { max-width: var(--measure); }
.cost-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.cost-flow {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 28px 26px;
  background: var(--paper);
}
.cost-flow h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cost-flow-accent {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.cost-flow-accent h3 { color: var(--gold); }
.cost-flow ol {
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: step;
}
.cost-flow li {
  counter-increment: step;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.cost-flow li::before {
  content: counter(step);
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-ink);
  min-width: 1.4em;
}
.cost-flow-accent li::before { color: var(--gold); }

.cost-table-wrap { margin-top: 40px; }
.cost-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cost-table th,
.cost-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
/* Column headers get the label treatment. Row headers are component names —
   they are <th scope="row"> for assistive technology but should read as
   ordinary cells. */
.cost-table thead th {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}
.cost-table tbody th {
  font-weight: 500;
  color: var(--body);
}
.cost-table td:last-child,
.cost-table thead th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cost-total th,
.cost-total td {
  font-weight: 800;
  color: var(--ink);
  border-bottom: 0;
  background: var(--paper);
}

.cost-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.cost-vs > div {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 32px 28px;
}
.cost-vs > div:last-child {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.cost-vs-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cost-vs > div:last-child .cost-vs-label { color: var(--gold); }
.cost-vs-num {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.cost-vs > div:last-child .cost-vs-num { color: #fff; }
.cost-vs-sub { margin-top: 6px; font-size: 13px; color: var(--body); }
.cost-vs > div:last-child .cost-vs-sub { color: var(--on-dark); }
.cost-question {
  margin-top: 32px;
  max-width: var(--measure);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.how-band {
  background: var(--paper);
  padding-block: 52px;
}
.how-band-inner .h2 { margin-bottom: 28px; }
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}
.steps li {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 14px;
  display: grid;
  gap: 6px;
}
.step-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--gold-ink);
}
.steps strong {
  font-size: 16px;
  color: var(--ink);
}
.steps li > span:last-child {
  font-size: 12.5px;
  color: var(--body);
  line-height: 1.4;
}
.how-tag {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
}

.services-band {
  padding-block: 52px;
  background: #fff;
}
.services-band .h2 { margin-bottom: 24px; }
.services-band .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.services-band .tile {
  position: relative;
  min-height: 200px;
  border-radius: var(--r);
  overflow: hidden;
  color: #fff;
}
.services-band .tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-band .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,13,40,.15), rgba(3,13,40,.82));
  z-index: 1;
}
.services-band .tile-body {
  position: relative;
  z-index: 2;
  padding: 22px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}
.services-band .tile-body h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}
.services-band .tile-body p {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
}

.solutions {
  background: var(--paper);
  padding-block: 56px;
}
.solutions .h2 { margin-bottom: 28px; }
.packages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.packages > li {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkg-flagship {
  background: var(--navy-900) !important;
  border-color: var(--navy-900) !important;
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(3, 13, 40, .18);
}
.pkg-flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.pkg-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.pkg-flagship .pkg-name { color: #fff; }
.pkg-tag { font-size: 13px; color: var(--body); font-weight: 600; }
.pkg-flagship .pkg-tag { color: var(--on-dark); }
.pkg-price {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
}
.pkg-flagship .pkg-price { color: var(--gold); }
.pkg-price span { font-size: 12px; font-weight: 600; color: var(--muted); }
.pkg-flagship .pkg-price span { color: var(--on-dark-soft); }
.pkg-time { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pkg-flagship .pkg-time { color: var(--on-dark-soft); }
.pkg-line {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.packages ul {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  flex: 1;
}
.packages li li {
  font-size: 12.5px;
  line-height: 1.4;
  padding-left: 12px;
  position: relative;
  color: var(--body);
}
.packages li.pkg-flagship li { color: var(--on-dark); }
.packages li li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-weight: 800;
}
/* Request-pricing state. Sized down from the figure it stands in for, so the
   card keeps its proportions without shouting a non-number. */
.pkg-price.is-ask,
.pkg-ask {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-ink);
}
.pkg-flagship .pkg-price.is-ask,
.pkg-flagship .pkg-ask { color: var(--gold); }
.cost-vs-num.is-ask { font-size: 30px; }

.pkg-disclaimer {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Home teasers: the full package detail lives on the Solutions pages, so the
   home cards carry only the headline commercial facts. */
.packages-teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.packages-teaser > li { padding: 0; }
.packages-teaser > li > a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 22px 18px;
  text-decoration: none;
  border-radius: var(--r);
}
.packages-teaser > li > a:hover .pkg-name { color: var(--gold-ink); }
.packages-teaser .pkg-flagship > a:hover .pkg-name { color: var(--gold); }
.packages-teaser .pkg-time { margin-bottom: 0; }

.setup {
  padding-block: 52px;
  background: #fff;
}
.setup-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}
/* The imported page prints the heading, the lead and the list as separate
   grid items, so the lead lands beside the heading and the list drops under
   it. Stack the copy in the first column and keep the list beside both. */
.prose-section .setup-inner > h2 { grid-column: 1; grid-row: 1; }
.prose-section .setup-inner > p { grid-column: 1; grid-row: 2; margin: 0; }
.prose-section .setup-inner > .check-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  max-width: none;
}
.setup-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.setup-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.setup-list .ico { color: var(--gold-ink); width: 18px; height: 18px; margin-top: 2px; }

.about {
  padding-block: 56px;
  background: var(--paper);
}
/* Copy on the left, a compact partner strip on the right — the full profiles
   live on the Leadership page. */
.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 56px;
  align-items: start;
}
.about-lede { font-weight: 700; color: var(--ink); }
.about-text { margin-top: 14px; max-width: var(--measure); }
.about-copy .link-row { margin-top: 24px; }

.about-team {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.about-team .eyebrow { color: var(--gold-ink); }
.team-strip {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}
.team-strip li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-person {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
a.team-person:hover .team-name { color: var(--gold-ink); }
.team-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-600));
  color: var(--gold-pale);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
}
.team-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
}
.team-mark img[src*="leader-tolga"] {
  object-position: center 45%;
}
.team-mark img[src*="leader-riza"] {
  object-position: center center;
}
.team-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.team-line {
  margin: 20px 0 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-ink);
}
.leaders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.leaders > li {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px;
}
/* Monogram avatar rather than a full-bleed photo frame: until the client
   supplies headshots, a sized portrait slot reads as a missing image, while a
   monogram reads as a deliberate choice. Dropping an <img> in keeps the
   layout; the rule below crops it to the same circle. */
.leader-li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.leader-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-600));
  color: var(--gold-pale);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
a.leader-mark:hover { opacity: 0.92; }
.leader-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
}
.leader-mark img[src*="leader-tolga"] {
  object-position: center 45%;
}
.leader-mark img[src*="leader-riza"] {
  object-position: center center;
}
.leader-copy { min-width: 0; }
.leader-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy-800);
  text-decoration: none;
}
.leader-link .ico { width: 15px; height: 15px; }
.leader-link:hover { color: var(--gold-ink); }
/* Hidden until site-config.js supplies the URL, so no dead link ships. */
.leader-link.is-pending { display: none; }
/* A visible icon that does nothing invites clicks, so a social link with no
   URL yet is removed rather than dimmed. The markup ships with .is-pending, so
   it never flashes; setting the URL in site-config.js brings the icon back. */
.footer-social li:has(a.is-pending) { display: none; }
.footer-social:not(:has(a:not(.is-pending))) { display: none; }
.leaders h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.leaders p,
.leader-role { font-size: 13px; color: var(--body); }
.leader-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.leader-tags li {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-800, #1a2f55);
  background: #eef2f7;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 3px 8px;
}
.leader-bio {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.about-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}

.why {
  padding-block: 52px;
  background: #fff;
}
.why-inner .h2 { margin-bottom: 28px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.why-grid li {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 20px 18px;
  display: grid;
  gap: 8px;
}
.why-grid strong {
  font-size: 15px;
  color: var(--ink);
}
.why-grid span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.next-brand {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

/* Footer columns (docx) --------------------------------------------------- */

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 40px;
  padding-block: 36px 28px;
  align-items: start;
}
.footer-tag {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 200px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.footer-col-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-cols ul { display: grid; gap: 8px; }
.footer-cols a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on-dark);
  transition: color .18s;
}
.footer-cols a:hover { color: var(--gold); }

/* Sticky CTA -------------------------------------------------------------- */

/* ==========================================================================
   Inner pages — Let's Talk, FAQ, Legal
   ========================================================================== */

/* Inner pages have no hero for the header to float over, so it stays sticky
   and occupies flow — which is what keeps .page-hero starting below it —
   and is solid from the first pixel rather than waiting for the sentinel.
   Only the home page needs the fixed overlay treatment. */
body.inner .site-header {
  position: sticky;
  top: 0;
  background: var(--navy-950);
  border-bottom-color: var(--navy-line);
}
/* The active group is underlined on every page, the home page included — it
   was previously scoped to body.inner, which index.html does not carry. */
.main-nav a.is-active { color: #fff; }
.main-nav a.is-active::after { transform: scaleX(1); }

.page-hero {
  background: var(--paper);
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--rule);
}
/* Breadcrumbs give the 50-page inner site a sense of place and back the
   BreadcrumbList schema with something the visitor can actually see. */
.crumbs { margin-bottom: 18px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--rule);
}
.crumbs a {
  color: var(--body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover { color: var(--navy-800); border-bottom-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--gold-ink); }
.page-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.page-lede {
  margin-top: 12px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--ink);
  max-width: var(--measure);
}
.page-intro {
  margin-top: 12px;
  max-width: var(--measure);
  font-size: 15.5px;
  color: var(--body);
}

.talk { padding-block: 48px 64px; background: #fff; }
.talk-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr);
  gap: 40px;
  align-items: start;
}
.talk-note {
  margin: 8px 0 22px;
  font-size: 13px;
  color: var(--muted);
}
.talk-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.field label span { color: var(--gold-ink); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper-2);
  transition: border-color .18s, background-color .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 120px; }
.form-actions { margin-top: 8px; }

.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.calc-hint { margin: 4px 0 0; }
/* --muted is calibrated for the light surfaces; on the navy comparison card it
   only reaches 3.5:1, so the note switches to the on-dark ramp. */
.calc-result-accent .cost-note { color: var(--on-dark); }
.calc-diff {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--gold-pale);
}

/* Validation state. The error text is tied to its input with
   aria-describedby by forms.js, so the message is announced on focus rather
   than only being visible. */
.field-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #a3272b;
}
.field-error:empty { display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #a3272b;
  background: #fff;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus { border-color: #a3272b; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields. Never focusable — the input carries tabindex="-1". */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
}
.form-status:empty { display: none; }
.form-status.is-error { color: #a3272b; }
.form-status.is-success { color: #1d6b3f; }
.form-status.is-notice {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 16px 18px;
  color: var(--body);
  font-weight: 500;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-deep);
  border-radius: var(--r);
}
.form-status.is-notice p { margin: 0; }

.consult-card {
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r);
  padding: 28px 24px;
  margin-bottom: 16px;
}
.consult-card .eyebrow { color: var(--gold); }
.consult-card .h3 { color: #fff; margin-bottom: 14px; }
.consult-points {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}
.consult-points li {
  font-size: 14px;
  padding-left: 14px;
  position: relative;
  color: var(--on-dark);
}
.consult-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.consult-note {
  font-size: 12.5px;
  color: var(--on-dark-soft);
  margin-bottom: 16px;
}
.consult-soft {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.consult-soft .eyebrow { color: var(--gold-ink); }
.consult-soft .consult-note { color: var(--muted); }
.consult-soft a { font-weight: 700; color: var(--navy-800); }

.thanks { padding-block: 48px 72px; background: #fff; }
.thanks .h2 { margin-bottom: 24px; }
.thanks-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.thanks-cards li {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 24px 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.thanks-cards h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.thanks-cards p { font-size: 14px; color: var(--body); margin: 0 0 8px; }
.thanks-back { margin-top: 28px; }
.thanks-back a { font-weight: 700; color: var(--navy-800); }

.faq { padding-block: 40px 72px; background: #fff; }
.faq-inner .faq-item { max-width: var(--measure); }
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-ink);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
  max-width: var(--measure);
}
.faq-close {
  margin-top: 32px;
  padding: 20px 22px;
  background: var(--paper);
  border-radius: var(--r);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}

.legal { padding-block: 40px 72px; background: #fff; }
.legal-inner p,
.legal-inner li { max-width: var(--measure); }
.legal-inner h2 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.legal-inner p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
}
.legal-inner a { color: var(--navy-800); font-weight: 700; }
.legal-inner ul {
  margin: 0 0 16px;
  padding-left: 22px;
  max-width: var(--measure);
  list-style: disc outside;
}
.legal-inner li {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--body);
}
.legal-inner li::marker { color: var(--gold-deep); }
.legal-note {
  margin-top: 28px !important;
  padding: 14px 16px;
  background: var(--part-bg, #fdf1da);
  border-radius: var(--r);
  font-size: 13px !important;
  color: var(--part, #8a5a06) !important;
}

/* Subpage layouts (F4–F8) ------------------------------------------------- */

.page-cta {
  background: var(--navy-900);
  padding: 40px 0;
}
.page-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.prose-section { padding: 48px 0 56px; background: #fff; }
.prose-section.prose-alt { background: var(--paper); }
/* Prose blocks share the shell so they line up with page heroes; the reading
   measure is capped on the text itself rather than the container. */
.narrow > p,
.narrow > ul,
.narrow > ol,
.narrow > .lede { max-width: var(--measure); }
.narrow > p + p { margin-top: 14px; }
.principle {
  margin-top: 22px;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.45;
}
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.service-detail p:has(> .btn) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn-ghost-dark {
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--navy-800);
}
.btn-ghost-dark:hover { border-color: var(--navy-800); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.feature-grid li {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 16px;
  background: #fff;
  display: grid;
  gap: 6px;
}
.feature-grid strong { color: var(--ink); font-size: 15px; }
.feature-grid span { font-size: 13.5px; color: var(--body); line-height: 1.5; }

.vs-table-wrap { overflow-x: auto; margin-top: 24px; }
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: #fff;
}
.vs-table th,
.vs-table td {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.vs-table thead th {
  background: var(--navy-900);
  color: #fff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* The corner cell is an empty <td> rather than a <th>, so it is not announced
   as a heading for either axis. */
.vs-table-3 thead td:first-child,
.vs-table-3 tbody th {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  width: 22%;
}
.vs-table tbody td:last-child { font-weight: 600; color: var(--navy-800); }

.check-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-width: var(--measure);
}
/* Short labels would stack into one thin ribbon down the shell, so they flow
   into columns instead. Long items stay single-column — see ul_checks(). */
.check-list-cols {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: 28px;
}
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.check-list .ico { color: var(--gold-ink); width: 18px; height: 18px; margin-top: 2px; flex: none; }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hub-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
.hub-card img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
}
.hub-card > div {
  padding: 16px 16px 16px 0;
  display: grid;
  align-content: center;
  gap: 8px;
}
.hub-card h2 { margin: 0; font-size: 17px; color: var(--ink); }
.hub-card p { margin: 0; font-size: 13.5px; color: var(--body); }
.hub-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--navy-800);
  font-size: 13.5px;
}
.hub-card a .ico { width: 14px; height: 14px; }

.packages.packages-page {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.packages-page .btn { margin-top: 14px; align-self: start; }

.packages-page > li:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 2.2fr) auto;
  grid-template-rows: auto auto auto auto;
  gap: 4px 28px;
  align-items: start;
}
.packages-page > li:last-child .pkg-name { grid-area: 1 / 1; }
.packages-page > li:last-child .pkg-tag { grid-area: 2 / 1; }
.packages-page > li:last-child .pkg-price { grid-area: 3 / 1; }
.packages-page > li:last-child .pkg-time { grid-area: 4 / 1; }
.packages-page > li:last-child > ul {
  grid-area: 1 / 2 / 5 / 3;
  /* Multi-column so seven inclusions read across rather than stacking the
     card seven rows tall. .packages ul is a grid, and multi-column has no
     effect on a grid container, so the display value has to go back to block. */
  display: block;
  columns: 2;
  column-gap: 28px;
}
.packages-page > li:last-child > ul > li { margin-bottom: 6px; }
.packages-page > li:last-child .btn {
  grid-area: 1 / 3 / 5 / 4;
  margin-top: 0;
  align-self: center;
}

/* Column counts for the solutions grid, in one place. The class is doubled
   because the .packages media queries further down the sheet share its
   specificity and would otherwise win on source order. */
@media (min-width: 1201px) {
  .packages-page > li:last-child > ul { columns: 3; }
}
@media (max-width: 1200px) {
  .packages.packages-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below the drawer breakpoint everything stacks, Enterprise included: a
   horizontal card has no room to be horizontal. */
@media (max-width: 1000px) {
  .packages.packages-page > li:last-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .packages-page > li:last-child > .pkg-name,
  .packages-page > li:last-child > .pkg-tag,
  .packages-page > li:last-child > .pkg-price,
  .packages-page > li:last-child > .pkg-time,
  .packages-page > li:last-child > ul,
  .packages-page > li:last-child > .btn { grid-area: auto; columns: auto; }
  .packages-page > li:last-child > .btn { margin-top: 14px; align-self: start; }
}
@media (max-width: 760px) {
  .packages.packages-page { grid-template-columns: minmax(0, 1fr); }
}

/* Two across keeps the cards readable where four would not fit, and
   Enterprise still spans the full row. */

.principles { margin-top: 40px; }

.calc-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: start;
}
.calc-side {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
.calc-result { grid-column: 2; grid-row: 1; align-self: start; }
.calc-form {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
}
.calc-form .field label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.calc-form .field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--navy-700);
}
.calc-form .hint {
  display: block;
  margin-left: 26px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
/* Collapsed by default so it does not compete with the estimate, but present
   on the page rather than hidden in a tooltip. */
.calc-assumptions {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
}
.calc-assumptions > summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.calc-assumptions > div { padding: 0 18px 18px; }
.calc-assumptions p,
.calc-assumptions li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
}
.calc-assumptions ul {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
  list-style: disc outside;
}
.calc-assumptions strong { color: var(--ink); }

.calc-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 0;
  align-content: start;
  align-items: stretch;
}
.calc-result > .calc-result-card:not(.calc-result-accent) {
  grid-column: 1;
  grid-row: 1;
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding-bottom: 14px;
}
.calc-result > .calc-result-accent {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.calc-result > .wpcf7,
.calc-result > .calc-lead { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
.calc-result-card .cost-vs-num.is-ask { font-size: 22px; }
/* An explicit display value outranks the browser's [hidden] rule, so without
   this the panel showed a meaningless $0 before anything was calculated. */
.calc-result[hidden] { display: none; }
.calc-result-card {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 22px;
  background: #fff;
}
.calc-result-accent {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.calc-result-accent .cost-vs-label { color: var(--gold); }
.calc-result-accent .cost-vs-num { color: #fff; }
.calc-result-accent .cost-vs-sub { color: var(--on-dark); }
.calc-breakdown { margin: 0; display: grid; gap: 0; }
.calc-result > .calc-breakdown {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r) var(--r);
  padding: 0 22px 8px;
}
.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
}
.calc-breakdown li span { min-width: 0; }
.calc-breakdown li strong { flex-shrink: 0; white-space: nowrap; }
.calc-lead {
  margin-top: 8px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
}

.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 36px;
  align-items: start;
}
.service-photo {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
}
.service-photo img { width: 100%; height: auto; object-fit: cover; }

.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
.pill-grid li {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-800);
  background: #fff;
}

.insight-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.insight-cat {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px;
  background: #fff;
}
.insight-cat h2 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.insight-cat ul { display: grid; gap: 8px; }
.insight-cat a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.insight-cat a:hover { color: var(--navy-600); }
.guide-card {
  margin-top: 36px;
  padding: 28px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r);
}
.guide-card .eyebrow { color: var(--gold); }
.guide-card .h2 { color: #fff; margin-bottom: 10px; }
.guide-card p { color: var(--on-dark); max-width: var(--measure); margin-bottom: 18px; }
/* Long-form article typography. The Insights pieces are the only place on the
   site with sustained running prose, so they get a slightly larger body size
   and generous leading. */
/* Three-stage process diagram: origin, Expanvia, destination. Built from an
   ordered list so the sequence survives without the arrows, which are
   decorative and drop away when the stages stack on narrow screens. */
.flow-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.flow-stage {
  position: relative;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  text-align: center;
}
.flow-stage + .flow-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -40px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: var(--gold-deep);
  clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%);
}
.flow-stage.is-hub {
  background: var(--navy-900);
  border-color: var(--navy-900);
  box-shadow: 0 18px 40px rgba(3, 13, 40, .22);
}
.flow-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}
.flow-desc {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
}
.flow-stage.is-hub .flow-label { color: var(--gold); }
.flow-stage.is-hub .flow-desc { color: var(--on-dark); }
.flow-note { margin-top: 18px; margin-bottom: 0; }

@media (max-width: 860px) {
  .flow-band { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Rotate the connector to point down once the stages stack. */
  .flow-stage + .flow-stage::before {
    top: -32px;
    left: 50%;
    margin: 0 0 0 -12px;
    transform: rotate(90deg);
  }
}

.article-body { margin-top: 24px; }
.article-body > * { max-width: var(--measure); }
.article-body p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--body);
}
.article-body h2 {
  margin: 40px 0 14px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  margin: 28px 0 10px;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
}
/* Markers have to be restored explicitly: the global reset strips list styling
   site-wide, and article prose is the one place that genuinely wants it. Kept
   in normal flow rather than grid, since grid children stop being list items
   and lose their markers again. */
.article-body ul,
.article-body ol {
  margin: 0 0 18px;
  padding-left: 24px;
}
.article-body ul { list-style: disc outside; }
.article-body ol { list-style: decimal outside; }
.article-body li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
}
.article-body li + li { margin-top: 9px; }
.article-body li::marker { color: var(--gold-deep); font-weight: 700; }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body a {
  color: var(--navy-700);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-pale);
}
.article-body a:hover { color: var(--gold-ink); border-bottom-color: currentColor; }

/* Related reading inside the same category. */
.article-more {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.article-more h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-more ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.article-more a {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-800);
  border-bottom: 1px solid transparent;
}
.article-more a:hover { color: var(--gold-ink); border-bottom-color: currentColor; }

@media (max-width: 1000px) {
  .talk-inner { grid-template-columns: minmax(0, 1fr); }
  .thanks-cards { grid-template-columns: minmax(0, 1fr); }
  .feature-grid,
  .hub-grid,
  .service-detail,
  .insight-cats { grid-template-columns: minmax(0, 1fr); }
  .hub-card { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr); }
  .calc-side,
  .calc-result { grid-column: 1; grid-row: auto; }
  .calc-result { row-gap: 16px; }
  .calc-result > .calc-result-card,
  .calc-result > .calc-result-accent,
  .calc-result > .calc-breakdown {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .calc-result > .calc-result-card:not(.calc-result-accent) {
    border-bottom: 1px solid var(--rule);
    border-radius: var(--r);
    padding-bottom: 22px;
  }
  .calc-result > .calc-breakdown {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 2px;
  }
}
@media (max-width: 760px) {
  .talk-form { grid-template-columns: minmax(0, 1fr); }
  .insight-cats { grid-template-columns: minmax(0, 1fr); }
  .hub-card { grid-template-columns: minmax(0, 1fr); }
  .hub-card img { min-height: 160px; }
  /* Stacked cards need equal inner padding — desktop uses 0 left next to the thumb. */
  .hub-card > div { padding: 18px 18px 20px; }
}

/* ==========================================================================
   Responsive (home / legacy)
   ========================================================================== */

@media (max-width: 1180px) {
  .hero-strip { gap: 12px 36px; }
  .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pkg-flagship { transform: none; }
  .industries-inner { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
  .industries-aside { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; }
  .industries-aside p { margin: 0; }
  .about-inner { gap: 36px; }
  .packages-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .main-nav {
    position: absolute;
    justify-self: stretch;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    background: var(--navy-950);
    border-top: 1px solid var(--navy-line);
  }
  .nav-open .main-nav {
    display: block;
    max-height: calc(100dvh - var(--header-h, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .nav-list { flex-direction: column; gap: 0; }
  .btn { padding: 13px 22px; font-size: 14px; }
  .main-nav a { padding-block: 12px; font-size: 15px; }
  .nav-item > a::after { display: none; }
  .burger { display: flex; }

  /* On small screens the dropdown becomes an inline accordion instead of a
     floating panel. */
  .nav-item {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--navy-line);
  }
  .nav-item.has-menu::after { display: none; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle .ico { width: 16px; height: 16px; }
  .nav-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 2px solid var(--navy-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item[data-open="true"] .nav-menu { display: grid; }
  .nav-menu a { padding: 10px 8px; font-size: 14px; }
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding-top: 0;
    min-height: 72px;
  }
  .header-cta { display: none; }
  /* Language FAB — out of header flow so brand + burger stay on one row */
  .header-actions {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 80;
    justify-self: auto;
    gap: 0;
  }
  .lang-switch-btn {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    background: var(--navy-900);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  }
  .lang-switch-btn:hover {
    background: var(--navy-800);
  }
  .lang-switch-btn .lang-switch-code,
  .lang-switch-btn .ico {
    display: none;
  }
  .lang-switch-btn .lang-flag.fi {
    font-size: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  }
  .lang-switch-menu {
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 176px;
  }
  .brand-logo { height: 26px; }
  .brand-sub { font-size: 11px; }
  .hero-inner { padding-top: 96px; }

  .duo, .solution { grid-template-columns: minmax(0, 1fr); }
  .houston, .challenge, .solution-body, .how, .services, .reach, .impact {
    padding-inline: var(--pad-x);
  }
  /* Photo was absolute-filled against a collapsed column (desktop stretch).
     On a single column it needs its own height or it shrinks to padding. */
  .solution-media {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 240px;
    max-height: 420px;
    padding: 0;
    margin: 0;
  }
  .solution-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 32% 36%;
  }
  .solution-media::after {
    background: linear-gradient(
      180deg,
      transparent 58%,
      rgba(250, 251, 252, .55) 100%
    );
  }
  .script-quote {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 32px;
    width: min(14em, 90%);
    transform: translateX(-50%) rotate(-1.5deg);
    text-align: center;
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.15;
  }
  .script-quote .swoosh {
    left: 0;
    right: auto;
    width: 100%;
    height: 16px;
    bottom: -18px;
  }

  .problem-inner,
  .setup-inner,
  .cost-flows,
  .cost-vs,
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .prose-section .setup-inner > h2,
  .prose-section .setup-inner > p,
  .prose-section .setup-inner > .check-list { grid-column: 1; grid-row: auto; }
  .prose-section .setup-inner > .check-list { margin-top: 18px; }
  .challenge-block .options { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-band .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid,
  .leaders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .orbit { max-width: none; }
  .orbit-hub { width: 164px; height: 164px; }
  .node::after { display: none; }
  /* Desktop nodes use a fixed 132px label column; full-width when stacked. */
  .node > div { width: auto; max-width: none; flex: 1; min-width: 0; }
  .node h3 { font-size: 13px; }
  .node p { font-size: 12.5px; }
  /* Forced desktop line-breaks become spaces on narrow screens. */
  .node h3 br,
  .node p br { display: none; }

  /* Final CTA: stack script → copy → button (left-aligned). */
  .next-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding-block: 40px 44px;
    text-align: left;
  }
  .next-inner > div {
    flex: none;
    width: 100%;
  }
  .next-inner > .btn {
    align-self: flex-start;
    width: auto;
    max-width: none;
    justify-content: center;
    order: 2;
  }
  .script-next {
    order: -1;
    align-self: flex-start;
    margin: 0 0 2px;
    transform: rotate(-4deg);
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.12;
    text-align: left;
  }
  .script-next .swoosh {
    left: 4%;
    bottom: -22px;
    width: 110%;
    height: 32px;
  }
  .next-media img { object-position: 68% 48%; }
  .next-media::after {
    background: linear-gradient(
      180deg,
      rgba(2, 16, 43, .94) 0%,
      rgba(2, 16, 43, .82) 48%,
      rgba(2, 16, 43, .9) 100%
    );
  }
  .next-text { font-size: 14.5px; }
  .next .h2 { font-size: clamp(22px, 5.8vw, 28px); }

  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "place" "copy" "script" "strip";
    padding-block: 88px 40px;
  }
  .hero-place { justify-self: start; }
  .hero-copy { padding-top: 18px; }
  .hero-title > span, .hero-sub > span { display: inline; }
  .script-hero { margin: 30px 0 0; justify-self: start; }
  .hero-strip { gap: 20px 32px; margin-top: 40px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .services-band .tiles,
  .packages,
  .setup-list,
  .why-grid,
  .leaders,
  .sectors { grid-template-columns: minmax(0, 1fr); }

  .orbit { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .orbit-hub { grid-area: auto; margin: 0 auto; }
  .node-1, .node-2, .node-3, .node-4 { grid-area: auto; justify-content: flex-start; }
  .node { width: 100%; max-width: none; margin-inline: 0; align-items: flex-start; }
  .node > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
  }
  .node h3 {
    margin: 0;
    white-space: normal;
  }
  .node h3::after { content: none; }
  .node p {
    margin: 0;
  }

  .solution-media {
    aspect-ratio: 5 / 4;
    min-height: 240px;
    max-height: 380px;
  }
  .solution-media img { object-position: 30% 32%; }
  .script-quote {
    bottom: 28px;
    font-size: clamp(19px, 5.2vw, 22px);
  }

  .industries-inner { grid-template-columns: minmax(0, 1fr); }
  .industries-aside { flex-direction: column; align-items: flex-start; }

  .about-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .packages-teaser { grid-template-columns: minmax(0, 1fr); }
  .section-foot { justify-content: flex-start; }

  .compare-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .compare-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .cost-flows { gap: 14px; margin-top: 22px; }
  .cost-flow { padding: 20px 18px; }
  .cost-flow ol { gap: 8px; }
  .cost-flow li { font-size: 14px; }
  .cost-vs > div { padding: 22px 18px; }
  .cost-question { margin-top: 24px; font-size: 16px; }

  .next-inner { padding-block: 44px 48px; gap: 20px; }
  .script-next { font-size: clamp(26px, 9vw, 34px); }
  .next-brand { font-size: 13.5px; }

  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-bar { justify-content: flex-start; }

  .brand-sub,
  .sectors span { font-size: 11.5px; }
  .footer-bar,
  .hub-sub { font-size: 11.5px; }
  .tile-body h3,
  .tile-body p { font-size: 12px; }
  .options p,
  .node p { font-size: 12.5px; }

  }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}