/* ==========================================================================
   SMOG CO. LTD. — site styles
   ========================================================================== */

:root {
  /* Surfaces */
  --navy:            #07162A;
  --navy-ink:        #0B2744;
  --navy-mid:        #16436F;
  --panel:           rgba(12, 29, 50, 0.72);
  --paper:           #F5F7FA;
  --white:           #FFFFFF;

  /* Text */
  --text:            #E8EEF5;
  --text-70:         rgba(232, 238, 245, 0.70);
  --text-72:         rgba(232, 238, 245, 0.72);
  --text-68:         rgba(232, 238, 245, 0.68);
  --text-75:         rgba(232, 238, 245, 0.75);
  --text-55:         rgba(232, 238, 245, 0.55);
  --text-50:         rgba(232, 238, 245, 0.50);
  --text-40:         rgba(232, 238, 245, 0.40);
  --ink-muted:       #51617A;

  /* Accents */
  --gold:            #C28748;
  --gold-light:      #E6B683;
  --gold-deep:       #A9762F;
  --blue:            #1B64A2;
  --cyan:            #38BDF8;

  /* Lines */
  --line-light:      #E1E7EF;
  --line-light-2:    #C3CEDC;
  --line-dark-14:    rgba(232, 238, 245, 0.14);
  --line-dark-10:    rgba(232, 238, 245, 0.10);
  --line-dark-08:    rgba(232, 238, 245, 0.08);

  /* Type */
  --font-display:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:       "DM Sans", system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --shell:           1240px;
  --gutter:          24px;
  --header-h:        84px;
}

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

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

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover { color: var(--gold); }

p { text-wrap: pretty; }

h1, h2, h3 { text-wrap: balance; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text);
  color: var(--navy);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
}

.skip-link:focus {
  left: 0;
  color: var(--navy);
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  /* max() keeps the normal gutter on ordinary screens and grows it only where
     a notch or rounded corner would otherwise clip the content. */
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.eyebrow--gold   { color: var(--gold-light); }
.eyebrow--bronze { color: var(--gold-deep); }

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--white);
  margin: 0;
}

.h2--sm { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -0.04em;  color: var(--navy-ink); }
.h2--md { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.04em;  color: var(--navy-ink); }
.h2--lg { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.00; letter-spacing: -0.045em; }

.h2--xl       { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.00; letter-spacing: -0.045em; }
.h2--services { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -0.04em; color: var(--navy-ink); }

.h2--dark { color: var(--navy-ink); }

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

.btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  padding: 18px 32px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn--sm { font-size: 14px; padding: 12px 22px; }

.btn--light {
  background: var(--text);
  color: var(--navy);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--gold);
  color: var(--navy);
}

/* Hero primary: the same light pill, lifted off the dark field. */
.btn--glow { box-shadow: 0 16px 40px rgba(232, 238, 245, 0.14); }

.btn--ghost {
  border: 1px solid rgba(232, 238, 245, 0.22);
  color: var(--text);
}

/* Hero secondary: carries a fill so it holds up against the grid overlay. */
.btn--ghost-filled {
  background: rgba(232, 238, 245, 0.06);
  border: 1px solid rgba(232, 238, 245, 0.18);
  color: var(--text);
}

.btn--ghost-filled:hover,
.btn--ghost-filled:focus-visible {
  background: rgba(232, 238, 245, 0.12);
  color: var(--text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(232, 238, 245, 0.10);
  color: var(--text);
}

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

/* Fixed, not sticky: as a sticky element it reserved 84px of layout space
   above the hero, so the hero's top glow began with a hard horizontal seam.
   Floating it clear lets each hero background run to the top of the page. */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding:
    18px
    max(var(--gutter), env(safe-area-inset-right))
    0
    max(var(--gutter), env(safe-area-inset-left));
}

.site-header {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px 10px 24px;
  background: var(--panel);
  border: 1px solid var(--line-dark-10);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(3, 10, 20, 0.45);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--white);
}

.brand:hover { color: var(--white); }

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.03em;
}


.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.nav__link {
  color: var(--text-70);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--white);
  background: rgba(232, 238, 245, 0.07);
}

.nav__link.is-active {
  color: var(--white);
  background: rgba(232, 238, 245, 0.10);
}

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

.hero { position: relative; }

.hero--about {
  background:
    radial-gradient(56% 60% at 16% 8%,  rgba(27, 100, 162, 0.40) 0%, rgba(7, 22, 42, 0) 62%),
    radial-gradient(44% 52% at 88% 84%, rgba(194, 135, 72, 0.28) 0%, rgba(7, 22, 42, 0) 64%),
    var(--navy);
}

.hero--home {
  background:
    radial-gradient(58% 62% at 16% 6%,  rgba(27, 100, 162, 0.42) 0%, rgba(7, 22, 42, 0) 62%),
    radial-gradient(46% 52% at 92% 82%, rgba(194, 135, 72, 0.30) 0%, rgba(7, 22, 42, 0) 64%),
    var(--navy);
}

.hero__grid {
  --grid-line: rgba(232, 238, 245, 0.05);
  --grid-mask: radial-gradient(70% 70% at 45% 25%, #000 0%, transparent 100%);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: var(--grid-mask);
          mask-image: var(--grid-mask);
}

.hero--home .hero__grid {
  --grid-line: rgba(232, 238, 245, 0.055);
  --grid-mask: radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 100%);
}

.hero__inner {
  position: relative;
  padding-block: calc(96px + var(--header-h)) 88px;
}

.hero .eyebrow { margin-bottom: 26px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6.8vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--white);
  margin: 0 0 32px;
  /* Was capped at 1000px inside a 1192px measure, which left the right of
     every hero conspicuously empty. The headline now uses the full column. */
  max-width: none;
}

.hero__lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--text-72);
  margin: 0;
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section > .shell { padding-block: var(--section-pad, 104px); }

.section--light {
  background: var(--paper);
  color: var(--navy-ink);
}

.section--model {
  --section-pad: 112px;
  background:
    radial-gradient(52% 60% at 82% 12%, rgba(194, 135, 72, var(--model-gold, 0.26)) 0%, rgba(7, 22, 42, 0) 62%),
    radial-gradient(50% 55% at 8% 88%,  rgba(27, 100, 162, var(--model-blue, 0.32)) 0%, rgba(7, 22, 42, 0) 62%),
    var(--navy);
}

/* The home page runs the same field a touch hotter. */
.section--model-strong {
  --section-pad: 120px;
  --model-gold: 0.28;
  --model-blue: 0.34;
}

.section--services { --section-pad: 112px; }

/* `why` and `industries` share one paper field: industries has no top padding
   and is separated by its own rule instead. */
.section--industries > .shell { padding-block: 0 104px; }

.section__head {
  max-width: 820px;
  margin-bottom: 72px;
}

.section__head .h2 { margin-bottom: 26px; }

.section__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-68);
  margin: 0;
  max-width: 640px;
}

/* Two-column "label / content" split */
.split {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: start;
}

.split--rule {
  border-top: 1px solid var(--line-light);
  padding-top: 64px;
}

.split__aside--sticky {
  position: sticky;
  top: 120px;
}

.split__aside .eyebrow { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Capability cards
   -------------------------------------------------------------------------- */

.cap-list {
  display: grid;
  gap: 16px;
}

.cap-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 40px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.cap-card:hover {
  box-shadow: 0 20px 42px rgba(11, 39, 68, 0.10);
  transform: translateY(-2px);
}

.cap-card--feature {
  background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy-mid) 100%);
  border-color: transparent;
  box-shadow: 0 24px 52px rgba(11, 39, 68, 0.20);
}

/* The feature card is the resting state of the section — it does not lift. */
.cap-card--feature:hover {
  box-shadow: 0 24px 52px rgba(11, 39, 68, 0.20);
  transform: none;
}

.cap-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  padding-top: 8px;
}

.cap-card--feature .cap-card__num { color: var(--gold-light); }

.cap-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--navy-ink);
  margin: 0 0 12px;
}

.cap-card--feature .cap-card__title { color: var(--white); }

.cap-card__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.cap-card--feature .cap-card__text { color: rgba(232, 238, 245, 0.74); }

/* --------------------------------------------------------------------------
   Partner-model rail
   -------------------------------------------------------------------------- */

.rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line-dark-14);
}

.rail__step {
  position: relative;
  padding: 28px 16px 0;
  border-right: 1px solid var(--line-dark-08);
}

.rail__step:last-child { border-right: none; }

.rail__dot {
  position: absolute;
  top: -5px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(232, 238, 245, 0.35);
}

.rail__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-75);
}

/* Stages SMOG is actively running */
.rail__step--live .rail__dot   { background: var(--cyan); }
.rail__step--live .rail__label { color: var(--white); }

/* Outcome stages, called out with a larger ringed dot */
.rail__step--convert .rail__dot,
.rail__step--grow .rail__dot {
  top: -6px;
  width: 11px;
  height: 11px;
}

.rail__step--convert .rail__dot   { background: var(--gold); box-shadow: 0 0 0 5px rgba(194, 135, 72, 0.22); }
.rail__step--convert .rail__label { color: var(--gold-light); }

.rail__step--grow .rail__dot   { background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16); }
.rail__step--grow .rail__label { color: var(--white); }

/* --------------------------------------------------------------------------
   Why SMOG
   -------------------------------------------------------------------------- */

.section--why .eyebrow { margin-bottom: 22px; }

.why__title {
  max-width: 700px;
  margin-bottom: 56px;
  line-height: 1.02;
  font-size: clamp(34px, 4vw, 56px);
}

.why-list {
  display: grid;
  gap: 14px;
}

.why-row {
  display: grid;
  grid-template-columns: 48px 0.7fr 1.3fr;
  gap: 32px;
  align-items: baseline;
  padding: 32px 36px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 20px;
  transition: border-color 160ms ease;
}

.why-row:hover { border-color: var(--line-light-2); }

.why-row--dark {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
}

.why-row--dark:hover { border-color: var(--navy-ink); }

.why-row__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}

.why-row--dark .why-row__num { color: var(--gold-light); }

.why-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--navy-ink);
  margin: 0;
}

.why-row--dark .why-row__title { color: var(--white); }

.why-row__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.why-row--dark .why-row__text { color: var(--text-72); }

/* --------------------------------------------------------------------------
   Industry tags
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag {
  padding: 15px 26px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy-ink);
}

.tag--dark {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
  color: var(--white);
}

.tag--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cta {
  background: var(--paper);
  padding: 0 var(--gutter) 112px;
}

.cta__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 80px 64px;
  border-radius: 32px;
  background:
    radial-gradient(60% 100% at 12% 0%,  rgba(27, 100, 162, 0.45) 0%, rgba(7, 22, 42, 0) 64%),
    radial-gradient(52% 90% at 92% 100%, rgba(194, 135, 72, 0.36) 0%, rgba(7, 22, 42, 0) 62%),
    var(--navy);
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: var(--white);
  margin: 0;
  max-width: 620px;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--line-dark-10);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
  padding-block: 64px 32px;
}

.footer__brand { margin-bottom: 16px; }

.footer__brand .brand__name { font-size: 22px; }

.footer__blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-55);
  margin: 0;
  max-width: 320px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 15px;
}

.footer__nav a { color: var(--text-75); }
.footer__nav a:hover { color: var(--gold); }

.footer__legal {
  padding-block: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark-10);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-40);
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 40px;
  padding: 8px 16px 8px 12px;
  background: rgba(232, 238, 245, 0.05);
  border: 1px solid rgba(232, 238, 245, 0.16);
  border-radius: 999px;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}

.badge__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 238, 245, 0.78);
}

.hero__title--home {
  font-size: clamp(52px, 12vw, 156px);
  line-height: 0.94;
  margin-bottom: 40px;
  max-width: none;
}

.hero__accent {
  background: linear-gradient(96deg, var(--gold) 0%, var(--gold-light) 42%, var(--cyan) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: end;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

/* Three capabilities as one inset panel — the 1px gap draws the dividers. */
.hero__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 88px;
  background: var(--line-dark-10);
  border: 1px solid var(--line-dark-10);
  border-radius: 24px;
  overflow: hidden;
}

.strip-cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 32px;
  background: rgba(12, 29, 50, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 160ms ease;
}

.strip-cell:hover { background: rgba(18, 40, 66, 0.75); }

.strip-cell__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.strip-cell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0;
}

.strip-cell__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232, 238, 245, 0.62);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Section bar (heading beside a secondary link)
   -------------------------------------------------------------------------- */

.section__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.section__bar-lead { max-width: 720px; }

.section__bar .eyebrow { margin-bottom: 22px; }

.section__head--wide { max-width: 840px; }

.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-ink);
  border: 1px solid rgba(11, 39, 68, 0.18);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.link-pill:hover,
.link-pill:focus-visible {
  background: var(--navy-ink);
  color: var(--white);
}

.link-underline {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-ink);
  border-bottom: 1px solid rgba(11, 39, 68, 0.3);
  padding-bottom: 3px;
  white-space: nowrap;
}

.link-underline:hover { color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   Services bento
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 16px;
}

.bento__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 24px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease;
}

.bento__card:hover { transform: translateY(-3px); }

.bento__card--wide { grid-column: span 2; }

.bento__card--feature {
  gap: 28px;
  padding: 40px;
  color: var(--white);
  background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy-mid) 100%);
  box-shadow: 0 20px 44px rgba(11, 39, 68, 0.22);
}

.bento__card--plain {
  gap: 24px;
  padding: 34px;
  color: var(--navy-ink);
  background: var(--white);
  border: 1px solid var(--line-light);
}

.bento__card--plain:hover { box-shadow: 0 18px 36px rgba(11, 39, 68, 0.12); }

.bento__card--rep {
  flex-direction: row;
  align-items: end;
  gap: 32px;
  padding: 40px;
  color: var(--white);
  background: #0F2A47;
}

.bento__card--feature:hover,
.bento__card--rep:hover { color: var(--white); }

.bento__card--plain:hover { color: var(--navy-ink); }

.bento__kicker,
.bento__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.bento__kicker { color: var(--gold-light); }
.bento__num    { color: var(--gold-deep); }

.bento__kicker--block {
  display: block;
  margin-bottom: 20px;
}

.bento__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: inherit;
}

.bento__title--xl { font-size: 34px; line-height: 1.10; letter-spacing: -0.035em; margin-bottom: 14px; max-width: 520px; }
.bento__title--lg { font-size: 28px; line-height: 1.14; }

.bento__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.bento__text--lg { font-size: 17px; color: rgba(232, 238, 245, 0.74); max-width: 560px; }
.bento__text--md { font-size: 16px; color: rgba(232, 238, 245, 0.70); max-width: 520px; }

.bento__arrow {
  font-size: 22px;
  color: var(--gold-light);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Partner-model stages
   -------------------------------------------------------------------------- */

.stage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 72px;
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 26px;
  background: rgba(12, 29, 50, 0.5);
  border: 1px solid rgba(232, 238, 245, 0.12);
  border-radius: 20px;
  transition: border-color 160ms ease;
}

.stage:hover { border-color: rgba(232, 238, 245, 0.28); }

.stage__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(232, 238, 245, 0.28);
}

.stage__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0;
}

.stage__text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(232, 238, 245, 0.6);
  margin: 0;
}

/* The outcome stage, tinted to match Convert/Grow on the rail. */
.stage--accent {
  background: rgba(194, 135, 72, 0.10);
  border-color: rgba(194, 135, 72, 0.45);
}

.stage--accent:hover { border-color: rgba(194, 135, 72, 0.7); }

.stage--accent .stage__num  { color: rgba(230, 182, 131, 0.6); }
.stage--accent .stage__text { color: rgba(232, 238, 245, 0.68); }

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

.industries {
  background: var(--paper);
  color: var(--navy-ink);
  padding-block: 96px;
  overflow: hidden;
}

.industries__bar {
  margin-bottom: 48px;
  align-items: end;
  gap: 24px;
}

.industries__bar .eyebrow { margin-bottom: 20px; }

/* The strip used to run edge to edge off both sides of the viewport, out of
   line with the heading above it. It now sits in the content column and fades
   at each end so the clipped tags read as deliberate rather than cut off. */
.marquee {
  overflow: hidden;
  --marquee-fade: 56px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    transparent 100%);
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: smog-marquee 38s linear infinite;
}

.marquee__group {
  display: flex;
  gap: 14px;
}

/* One group plus the inter-group gap — keeps the loop seam invisible. */
@keyframes smog-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}

.tag--lg {
  padding: 16px 30px;
  font-size: 18px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Split CTA (home)
   -------------------------------------------------------------------------- */

.cta__panel--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  padding: 88px 64px;
  overflow: hidden;
}

.cta__title--split {
  margin-bottom: 22px;
  font-size: clamp(34px, 3.8vw, 54px);
}

.cta__lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(232, 238, 245, 0.7);
  margin: 0 0 36px;
  max-width: 520px;
}

.cta__panel--split .btn { padding: 17px 30px; }

.cta__card {
  display: grid;
  gap: 22px;
  padding: 32px;
  background: rgba(12, 29, 50, 0.55);
  border: 1px solid rgba(232, 238, 245, 0.14);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cta__card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-50);
  margin: 0 0 8px;
}

.cta__card-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}

.cta__card-value a { color: inherit; }
.cta__card-value a:hover { color: var(--gold-light); }

.cta__card-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(232, 238, 245, 0.12);
}

.cta__card-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-72);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Header — scrolled state
   Content used to scroll straight through the translucent pill and turn
   unreadable. A scrim fades in once the page moves, so the bar always sits
   on its own ground.
   -------------------------------------------------------------------------- */

.header-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 132%;
  background: linear-gradient(to bottom,
    rgba(7, 22, 42, 0.94) 0%,
    rgba(7, 22, 42, 0.72) 52%,
    rgba(7, 22, 42, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.header-wrap.is-stuck::before { opacity: 1; }

.header-wrap.is-stuck .site-header {
  background: rgba(9, 25, 45, 0.90);
  border-color: rgba(232, 238, 245, 0.16);
}

.site-header { position: relative; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Deep links (#market-entry, #contact-form …) must clear the fixed bar. */
[id] { scroll-margin-top: 108px; }

/* --------------------------------------------------------------------------
   Mobile nav
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-dark-14);
  border-radius: 999px;
  background: rgba(232, 238, 245, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.nav-toggle:hover { background: rgba(232, 238, 245, 0.12); }

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 17px;
  height: 11px;
  margin-inline: auto;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), top 180ms ease;
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 9.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 5px; transform: rotate(-45deg); }

.nav__cta { display: none; }

/* --------------------------------------------------------------------------
   Page intro — shared sub-page hero
   -------------------------------------------------------------------------- */

.hero--services {
  background:
    radial-gradient(58% 62% at 12% 6%,  rgba(27, 100, 162, 0.42) 0%, rgba(7, 22, 42, 0) 62%),
    radial-gradient(46% 54% at 90% 86%, rgba(194, 135, 72, 0.30) 0%, rgba(7, 22, 42, 0) 64%),
    var(--navy);
}

.hero--contact {
  background:
    radial-gradient(54% 60% at 88% 10%, rgba(27, 100, 162, 0.40) 0%, rgba(7, 22, 42, 0) 62%),
    radial-gradient(46% 54% at 8% 88%,  rgba(194, 135, 72, 0.30) 0%, rgba(7, 22, 42, 0) 64%),
    var(--navy);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-70);
  padding: 9px 16px;
  border: 1px solid var(--line-dark-14);
  border-radius: 999px;
  background: rgba(232, 238, 245, 0.04);
}

/* --------------------------------------------------------------------------
   Service detail rows — what-we-do
   -------------------------------------------------------------------------- */

.svc-list {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 48px 44px;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line-light);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.svc:hover {
  border-color: var(--line-light-2);
  box-shadow: 0 20px 44px rgba(11, 39, 68, 0.10);
}

.svc__aside { border-top: 2px solid var(--gold); padding-top: 20px; }

.svc__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.svc__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.svc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--navy-ink);
  margin: 0 0 16px;
}

.svc__lede {
  font-size: 17px;
  line-height: 1.6;
  color: #45566E;
  margin: 0 0 28px;
  max-width: 640px;
}

.svc__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc__point {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #45566E;
}

.svc__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* The representation service closes the list and carries the dark treatment. */
.svc--feature {
  color: var(--white);
  background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy-mid) 100%);
  border-color: transparent;
}

.svc--feature:hover { border-color: transparent; }
.svc--feature .svc__aside     { border-top-color: var(--gold-light); }
.svc--feature .svc__num       { color: var(--gold-light); }
.svc--feature .svc__label     { color: var(--text-55); }
.svc--feature .svc__title     { color: var(--white); }
.svc--feature .svc__lede,
.svc--feature .svc__point     { color: var(--text-72); }
.svc--feature .svc__point::before { background: var(--gold-light); }

/* --------------------------------------------------------------------------
   Outcome stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  padding: 34px;
  border-radius: 20px;
  border: 1px solid var(--line-dark-14);
  background: rgba(232, 238, 245, 0.03);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 10px;
}

.stat__label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-68);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Contact — form
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: start;
}

.form-card {
  padding: 44px;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: 0 20px 44px rgba(11, 39, 68, 0.07);
}

.form-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.035em;
  color: var(--navy-ink);
  margin: 0 0 8px;
}

.form-card__note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 32px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field { margin-bottom: 18px; }

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 9px;
}

.field__req { color: var(--gold-deep); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy-ink);
  background: #FBFCFE;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  padding: 15px 17px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.field__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2351617A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 12px;
  padding-right: 44px;
  cursor: pointer;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(194, 135, 72, 0.16);
}

.field__error {
  display: none;
  font-size: 13.5px;
  color: #B4362F;
  margin-top: 8px;
}

.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__textarea { border-color: #B4362F; background: #FFF8F7; }

.field.is-invalid .field__error { display: block; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.btn--solid {
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--navy-ink);
  color: var(--white);
}

.btn--solid:hover,
.btn--solid:focus-visible { background: var(--gold-deep); color: var(--white); }

.form__hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

.form__status {
  display: none;
  font-size: 15px;
  line-height: 1.55;
  padding: 16px 20px;
  border-radius: 14px;
  margin-top: 24px;
}

.form__status.is-visible { display: block; }

.form__status--ok {
  color: #14532D;
  background: #EAF7EF;
  border: 1px solid #BFE3CC;
}

/* --------------------------------------------------------------------------
   Contact — side column
   -------------------------------------------------------------------------- */

.info-stack {
  display: grid;
  gap: 16px;
}

.info-card {
  padding: 32px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line-light);
}

.info-card--dark {
  color: var(--white);
  background: linear-gradient(150deg, var(--navy-ink) 0%, var(--navy-mid) 100%);
  border-color: transparent;
}

.info-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.info-card--dark .info-card__label { color: var(--gold-light); }

.info-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--navy-ink);
  margin: 0;
  word-break: break-word;
}

.info-card__value a { color: inherit; }
.info-card__value a:hover { color: var(--gold-deep); }

.info-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 12px 0 0;
}

.info-card--dark .info-card__value { color: var(--white); }
.info-card--dark .info-card__text  { color: var(--text-72); }

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.info-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-72);
}

.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
}


/* The base link colour is tuned for the dark sections. Links sitting on the
   light cards need an ink colour of their own to stay readable. */
.form__hint a,
.form__status a,
.faq__a a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__hint a:hover,
.form__status a:hover,
.faq__a a:hover { color: var(--navy-ink); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

/* Sits directly under the contact block, so it carries no top padding. */
.section--faq > .shell { padding-block: 0 104px; }

.faq {
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.faq__item {
  border: 1px solid var(--line-light);
  border-radius: 18px;
  background: var(--white);
  padding: 4px 28px;
  transition: border-color 180ms ease;
}

.faq__item[open] { border-color: var(--line-light-2); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--navy-ink);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold-deep);
  transition: transform 200ms ease;
}

.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  padding: 0 0 24px;
  max-width: 680px;
}

/* --------------------------------------------------------------------------
   Motion
   Hover intent on the arrow links, and a reveal-on-scroll for page content.
   Everything here is decorative: the reduced-motion block at the end of this
   file neutralises it, and the reveal is only armed once JS confirms support.
   -------------------------------------------------------------------------- */

/* Arrows lean in the direction they take you. */
.link-pill > span,
.link-underline > span,
.bento__arrow {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.34, 1.2, 0.44, 1);
  will-change: transform;
}

.link-pill:hover > span,
.link-pill:focus-visible > span,
.link-underline:hover > span,
.link-underline:focus-visible > span { transform: translateX(5px); }

.bento__card--rep:hover .bento__arrow,
.bento__card--rep:focus-visible .bento__arrow { transform: translateX(6px); }

.link-pill {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.link-pill:hover,
.link-pill:focus-visible {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
  color: var(--white);
}

/* The rule under the link sweeps in from the left on hover. */
.link-underline {
  position: relative;
  border-bottom-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 280ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms ease;
}

.link-underline:hover,
.link-underline:focus-visible { background-size: 100% 1px; }

/* Buttons lift a little under the cursor. */
.btn {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 180ms ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--light:hover  { box-shadow: 0 12px 28px rgba(194, 135, 72, 0.30); }
.btn--solid:hover  { box-shadow: 0 12px 28px rgba(169, 118, 47, 0.32); }
.btn--glow:hover   { box-shadow: 0 20px 44px rgba(194, 135, 72, 0.34); }

/* The brand mark and the nav toggle acknowledge the press. */
.brand { transition: opacity 180ms ease; }
.brand:hover { opacity: 0.82; }

.nav-toggle:active { transform: scale(0.94); }
.nav-toggle { transition: background-color 160ms ease, transform 160ms ease; }

/* Cards already lift; give the softer ones a matching shadow bloom. */
.stage,
.strip-cell,
.info-card,
.faq__item {
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 220ms ease;
}

.info-card:hover { transform: translateY(-3px); }

.svc { transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.svc:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Reveal on scroll

   The hiding rule is scoped to .js-reveal, which the script only adds when it
   can actually observe and un-hide again — so with JS off, or with reduced
   motion asked for, every element simply stays visible.
   -------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .bento      { grid-template-columns: repeat(2, 1fr); }
  .stage-grid { grid-template-columns: repeat(3, 1fr); }

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split__aside--sticky { position: static; }

  .why-row {
    grid-template-columns: 40px 1fr;
    gap: 16px 24px;
    align-items: start;
  }

  /* The description drops under the title, still aligned to its column. */
  .why-row__text { grid-column: 2; }
}

@media (max-width: 900px) {
  .hero__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero__actions { justify-content: flex-start; }

  .hero__strip {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }

  .cta__panel--split {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 36px;
  }

  .site-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 14px 14px 20px;
    border-radius: 28px;
  }

  .nav {
    order: 3;
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .nav::-webkit-scrollbar { display: none; }

  .nav__link { padding: 8px 14px; }

  /* The rail turns from a timeline into a vertical spine. */
  .rail {
    grid-template-columns: 1fr;
    border-top: none;
    border-left: 1px solid var(--line-dark-14);
  }

  .rail__step {
    padding: 0 0 26px 28px;
    border-right: none;
  }

  .rail__step:last-child { padding-bottom: 0; }

  .rail__dot { top: 5px; left: -5px; }

  .rail__step--convert .rail__dot,
  .rail__step--grow .rail__dot { top: 4px; left: -6px; }

  .section__head { margin-bottom: 48px; }

  .cta__panel { padding: 56px 36px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .section { --section-pad: 72px; }

  .section--industries > .shell { padding-block: 0 72px; }

  .hero__inner { padding-block: calc(64px + var(--header-h)) 64px; }

  .hero__lede { font-size: 19px; }

  .split--rule { padding-top: 48px; }

  .cap-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 28px;
  }

  .cap-card__num { padding-top: 0; }

  .why-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 26px;
  }

  .why-row__text { grid-column: 1; }

  .tag { font-size: 16px; padding: 13px 22px; }

  .bento { grid-template-columns: 1fr; }

  .bento__card--wide { grid-column: span 1; }

  .bento__card--feature,
  .bento__card--rep { padding: 32px 28px; }

  .bento__title--xl { font-size: 28px; }

  .stage-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }

  .industries { padding-block: 72px; }

  .industries__bar { margin-bottom: 36px; }

  .cta__panel--split { padding: 48px 28px; }

  .cta { padding-bottom: 80px; }

  .cta__panel {
    padding: 48px 28px;
    border-radius: 24px;
  }

  .footer__top { padding-block: 48px 28px; }

  /* The links sat 20px tall in one tight row — well under a comfortable
     tap target. Stacking them gives each a full-width, 48px-tall row. */
  .footer__nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--line-dark-08);
  }

  .footer__nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-dark-08);
  }
}

/* Keep all four nav items on one line on small phones. */
@media (max-width: 520px) {
  .stage-grid { grid-template-columns: 1fr; }

  .site-header { padding: 12px 12px 12px 18px; }

  .nav { justify-content: space-between; font-size: 13px; }

  .nav__link { padding: 8px 10px; }
}

/* --- Additions: new components + layout fixes ---------------------------- */

/* The representation card closes the bento. Spanning all three columns
   removes the empty cell the 2-span left behind on the last row. */
.bento__card--rep { grid-column: span 3; }

@media (max-width: 1080px) {
  .bento__card--rep { grid-column: span 2; }

  .contact-grid { grid-template-columns: 1fr; }

  .svc { grid-template-columns: 170px 1fr; gap: 32px; padding: 42px 36px; }
}

@media (max-width: 900px) {
  /* The nav becomes a drawer instead of a horizontal scroll strip. */
  .site-header {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 10px 10px 20px;
    border-radius: 999px;
  }

  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    order: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    overflow: visible;
    /* Fully opaque: at 97% the hero headline ghosted through the panel. */
    background: #0A1D35;
    border: 1px solid var(--line-dark-14);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(3, 10, 20, 0.5);
    /* On a landscape phone the drawer ran past the bottom of the screen and
       its call to action became unreachable, so cap it and let it scroll. */
    max-height: calc(100vh - var(--header-h) - 28px);
    max-height: calc(100dvh - var(--header-h) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
  }

  .nav__cta {
    display: block;
    margin-top: 8px;
    text-align: center;
  }

  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .bento__card--rep { grid-column: span 1; }

  [id] { scroll-margin-top: 92px; }

  .svc {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 26px;
  }

  .svc__points  { grid-template-columns: 1fr; }
  .form__row    { grid-template-columns: 1fr; gap: 0; }
  .form-card    { padding: 30px 24px; }
  .info-card    { padding: 26px 24px; }
  .faq__item    { padding-inline: 22px; }
  .hero__meta   { margin-top: 28px; }
}

@media (max-width: 560px) {
  /* The drawer carries the call to action at this width. */
  .header__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cap-card:hover,
  .bento__card:hover,
  .info-card:hover,
  .svc:hover,
  .btn:hover,
  .nav-toggle:active { transform: none; }

  .link-pill:hover > span,
  .link-underline:hover > span,
  .bento__card--rep:hover .bento__arrow { transform: none; }

  /* The underline sweep becomes a plain rule. */
  .link-underline { background-size: 100% 1px; }

  /* No auto-scroll: drop the duplicate track and let the row be swiped. */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__group--clone { display: none; }
}