/* =============================================================
   NexaReach Digital — design system
   Light, professional, conversion-led. One file, no build step.
   ============================================================= */

:root {
  /* Blue / grey / yellow.
     Blue carries structure and links, grey carries surfaces and text,
     yellow is the accent and sits on every primary call to action —
     always with dark ink on top of it, never as light text. */
  --ink:        #16202e;   /* headings, and text on yellow */
  --ink-2:      #333f4e;   /* body copy */
  --muted:      #5e6b7a;
  --muted-2:    #78848f;
  --line:       #e0e4e9;
  --line-soft:  #eef0f3;
  --bg:         #ffffff;
  --bg-soft:    #f4f6f8;   /* grey section bands */
  --bg-deep:    #16202e;   /* dark band + footer */

  --brand:      #1d4e89;   /* links, icons, structure */
  --brand-dark: #163d6d;
  --brand-soft: #e7eef6;

  --accent:     #f5b301;   /* yellow — CTAs and highlights */
  --accent-dark:#dc9f00;
  --accent-soft:#fdf3d7;
  --warn:       #f59e0b;

  /* Type — Space Grotesk carries the headings, Inter the reading copy */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Space */
  --wrap: 1180px;
  --gut: 24px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(13,21,38,.06), 0 1px 3px rgba(13,21,38,.04);
  --shadow:    0 4px 16px rgba(13,21,38,.07), 0 1px 3px rgba(13,21,38,.04);
  --shadow-lg: 0 18px 48px rgba(13,21,38,.12);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.14;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 3.9rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: 78px 0; }
.sec-sm { padding: 52px 0; }
.sec-soft { background: var(--bg-soft); }
.sec-line { border-top: 1px solid var(--line-soft); }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.split-4060 { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: start; }

/* ---------- Bits ---------- */
.eyebrow {
  font-family: var(--display);
  display: inline-block;
  font-size: .755rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.eyebrow-light { color: #9dc0e8; }

/* Highlighter sweep behind a key phrase, sitting under the text baseline so
   the words stay at full contrast on top of it. */
.mark {
  background-image: linear-gradient(transparent 58%, rgba(245,179,1,.55) 58%, rgba(245,179,1,.55) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 .06em;
}
.sec-dark .mark {
  background-image: linear-gradient(transparent 86%, var(--accent) 86%, var(--accent) 95%, transparent 95%);
}

.lede { font-size: 1.11rem; color: var(--muted); max-width: 62ch; }
.lede-lg { font-size: 1.19rem; color: var(--muted); max-width: 60ch; }

.sec-head { max-width: 68ch; margin-bottom: 42px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* keep the yellow eyebrow rule under the middle of a centred eyebrow */
.sec-head.center .eyebrow::after { margin-left: auto; margin-right: auto; }

.btn {
  font-family: var(--display);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 650;
  font-size: .955rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  text-decoration: none !important;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
/* Yellow with dark ink reads far more strongly than blue-on-white and keeps
   well above the contrast threshold. */
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: 0 6px 18px rgba(245,179,1,.32); }
.btn-primary:hover { background: var(--accent-dark); color: var(--ink); }
.btn-blue { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(29,78,137,.26); }
.btn-blue:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { padding: 10px 18px; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.arrow { transition: transform .18s ease; }
.btn:hover .arrow, .card:hover .arrow { transform: translateX(3px); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: .8rem; font-weight: 620;
}
.pill-plain { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card { position: relative; overflow: hidden; }
/* A yellow hairline that wipes across the top edge on hover */
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.card:hover::after { transform: scaleX(1); }
.card-link:hover { border-color: #b9cbdf; box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .955rem; margin-bottom: 0; }

.ico {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 16px;
}
.ico svg { width: 21px; height: 21px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.hdr-in { display: flex; align-items: center; gap: 20px; height: 70px; }

.logo { font-family: var(--display); display: flex; align-items: center; gap: 10px; font-weight: 750; color: var(--ink); font-size: 1.06rem; letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--brand), #3a7ac0);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 3px 10px rgba(29,78,137,.28);
}
.logo-mark .blimp-mark { width: 22px; height: auto; }
.ftr .logo-mark { background: #ffffff; color: var(--brand); box-shadow: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.nav > a, .nav-drop > .nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 12px; border-radius: 8px;
  font-size: .93rem; font-weight: 550; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav > a:hover, .nav-drop > .nav-drop-trigger:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.nav-drop > .nav-drop-trigger { text-decoration: none; }
.nav > a[aria-current="page"] { color: var(--brand); font-weight: 650; }

/* Dropdown opens on hover and on keyboard focus, with no JS involved, so a
   mouse click on the trigger navigates to the services hub as expected. */
.nav-drop { position: relative; }
.nav-drop > .nav-drop-trigger svg { width: 13px; height: 13px; transition: transform .18s ease; }
.nav-drop:hover > .nav-drop-trigger svg,
.nav-drop:focus-within > .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop:hover > .nav-drop-trigger,
.nav-drop:focus-within > .nav-drop-trigger { background: var(--bg-soft); color: var(--ink); }
.drop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 560px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 14px;
  display: none;
  grid-template-columns: 1fr 1fr; gap: 2px;
}
.nav-drop:hover .drop,
.nav-drop:focus-within .drop { display: grid; }
/* Invisible bridge so the menu does not close in the 8px gap under the trigger */
.nav-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.drop a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-size: .9rem; font-weight: 550; }
.drop a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.drop-all { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.drop-all a { color: var(--brand); font-weight: 650; }

.hdr-cta { display: flex; align-items: center; gap: 10px; }
.hdr-tel { font-size: .9rem; font-weight: 650; color: var(--ink); white-space: nowrap; }
.hdr-tel:hover { color: var(--brand); text-decoration: none; }

.burger {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; margin-left: auto;
}
.burger svg { width: 20px; height: 20px; color: var(--ink); }

.mnav {
  display: none; border-top: 1px solid var(--line-soft);
  background: #fff; padding: 12px var(--gut) 24px;
  max-height: calc(100vh - 70px); overflow-y: auto;
}
.mnav[data-open="true"] { display: block; }
.mnav a { display: block; padding: 11px 4px; color: var(--ink-2); font-weight: 570; border-bottom: 1px solid var(--line-soft); }
.mnav a:hover { text-decoration: none; color: var(--brand); }
.mnav .mnav-sub a { padding-left: 18px; font-size: .92rem; font-weight: 500; color: var(--muted); }
.mnav .mnav-lbl { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; padding: 18px 4px 6px; }
.mnav .btn { width: 100%; justify-content: center; margin-top: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f7fafd 0%, #ffffff 62%);
  padding: 82px 0 76px;
}
/* Layered sky wash */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(820px 420px at 10% -12%, rgba(29,78,137,.14), transparent 64%),
    radial-gradient(680px 380px at 88% -4%, rgba(245,179,1,.20), transparent 62%),
    radial-gradient(520px 320px at 62% 96%, rgba(29,78,137,.07), transparent 66%);
  pointer-events: none;
}
/* Fine grain so the flat colour has some tooth */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* The airship the brand is named after, drifting behind the copy */
.hero-blimp {
  position: absolute; top: 4%; right: -3%;
  width: min(560px, 50vw); color: var(--brand);
  opacity: .11; pointer-events: none; z-index: 0;
  animation: drift 22s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50%      { transform: translate3d(-26px, 20px, 0) rotate(1.5deg); }
}
.hero-in { position: relative; }
.hero h1 { max-width: 24ch; }
.hero .lede-lg { margin-bottom: 26px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 54px; align-items: center; }

.hero-checks { margin-top: 28px; gap: 11px; }
.hero-checks li { font-size: .975rem; }

.steps-tight .step { padding: 14px 0; grid-template-columns: 1fr; }
.steps-tight .step::before { display: none; }
.steps-tight .step h3 {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: .3em;
}
.steps-tight .step p { font-size: .92rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-badge {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: .82rem; box-shadow: var(--shadow-sm);
}
.hero-badge b { color: var(--ink); font-weight: 700; }
.hero-badge span { color: var(--muted); }

/* Hero side panel */
.hero-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 26px;
}
.hero-panel h3 { font-size: 1.05rem; margin-bottom: 4px; }
.hero-panel .sub { font-size: .875rem; color: var(--muted); margin-bottom: 18px; }

.meter { margin-bottom: 15px; }
.meter-top { display: flex; justify-content: space-between; font-size: .875rem; margin-bottom: 6px; }
.meter-top b { color: var(--ink); font-weight: 620; }
.meter-top span { color: var(--muted); font-variant-numeric: tabular-nums; }
.meter-track { height: 7px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.meter-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #4a86c8);
  width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Logo strip ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; justify-content: center; }
.logos span {
  font-weight: 650; color: var(--muted-2); font-size: .98rem;
  letter-spacing: -.01em; white-space: nowrap;
}
.logos-lbl { text-align: center; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-bottom: 22px; }

/* ---------- Service marquee ----------
   Two identical tracks scrolling as one continuous loop. Decorative, so it is
   hidden from assistive tech and stopped entirely under reduced motion. */
.marquee {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-block: 1px solid rgba(255,255,255,.08);
  padding: 16px 0;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: 0 0 auto; }
.marquee-item {
  font-family: var(--display);
  display: inline-flex; align-items: center; gap: 22px;
  padding: 0 22px; white-space: nowrap;
  font-size: 1.02rem; font-weight: 600; color: #e6ecf5; letter-spacing: -.01em;
}
.marquee-item::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 7px;
}
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: #fff; padding: 28px 24px; text-align: center; border-top: 3px solid var(--accent); }
.stat b { display: block; font-size: clamp(1.75rem, 3.4vw, 2.45rem); color: var(--ink); font-weight: 780; letter-spacing: -.03em; line-height: 1; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.stat span { font-size: .875rem; color: var(--muted); }

/* ---------- Service cards ---------- */
/* Flex column so the "Explore" link pins to the bottom and lines up across a
   row regardless of how long each description runs. */
.svc-card { display: flex; flex-direction: column; height: 100%; }
.svc-card .more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 16px;
  font-size: .885rem; font-weight: 650; color: var(--brand);
}
.svc-card h3 { min-height: 2.32em; }

/* ---------- Sliding service cards ----------
   The track is a scroll-snap row, so swipe and keyboard scrolling work with no
   JavaScript at all; the buttons, dots and autoplay are progressive extras. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* overflow-x: clip stops the track's scroll width propagating up to <body>
   (which otherwise inflates every ancestor's scrollWidth). clip, not hidden,
   because hidden would force the vertical axis to scroll and break the sticky
   headings elsewhere on the page. The negative inline margin plus matching
   padding keeps the cards flush with the heading above while still leaving
   room for the hover shadow. */
.carousel {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  margin-inline: -8px;
  padding-inline: 8px;
}

.carousel-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.carousel-hint { margin: 0; font-size: .85rem; color: var(--muted-2); }
.carousel-nav { display: flex; gap: 8px; }
.carousel-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

.carousel-track {
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 0 10px;
  margin: -6px 0 -10px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--r); }

.carousel-card {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.carousel-card:hover { border-color: #b9cbdf; box-shadow: var(--shadow); transform: translateY(-2px); }
.carousel-card h3 { margin-bottom: 14px; min-height: 2.32em; }

.carousel-list { list-style: none; padding: 0; margin: 0 0 18px; }
.carousel-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: .93rem; color: var(--muted);
}
.carousel-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}

.carousel-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand);
}
.carousel-more:hover { text-decoration: none; color: var(--brand-dark); }
.carousel-card:hover .arrow { transform: translateX(3px); }

.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 26px; }
.carousel-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.carousel-dot[aria-selected="true"] { background: var(--accent); width: 26px; border-radius: 999px; }

@media (max-width: 1024px) {
  .carousel-card { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 700px) {
  .carousel-card { flex: 0 0 100%; }
  .carousel-hint { display: none; }
  .carousel-bar { justify-content: flex-end; }
}

/* ---------- Process ---------- */
.steps { counter-reset: s; display: grid; gap: 2px; position: relative; }
/* Vertical rail linking the numbered markers */
.steps::before {
  content: ""; position: absolute; left: 21px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(245,179,1,.15));
  border-radius: 2px;
}
.steps-tight::before { display: none; }
.step {
  counter-increment: s;
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.step:last-child { border-bottom: 0; }
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display);
  font-size: .92rem; font-weight: 700; color: var(--ink);
  background: var(--accent); border-radius: 50%;
  width: 42px; height: 42px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px var(--bg);
  position: relative; z-index: 1;
}
.step h3 { margin-bottom: .28em; font-size: 1.07rem; }
.step p { margin: 0; color: var(--muted); font-size: .955rem; }

.sec-soft .step::before { box-shadow: 0 0 0 5px var(--bg-soft); }

/* ---------- Checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin: 0; font-size: .975rem; }
.checks svg { width: 20px; height: 20px; color: var(--brand); margin-top: 3px; }

/* ---------- Testimonials ---------- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; }
.quote-mark { color: var(--accent); opacity: .85; font-family: var(--serif); font-size: 3.2rem; line-height: .7; height: 26px; }
.quote p { font-size: 1.015rem; color: var(--ink-2); margin-bottom: 20px; }
.quote footer { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: 0 0 40px; }
.quote footer b { display: block; color: var(--ink); font-size: .93rem; }
.quote footer span { color: var(--muted); font-size: .84rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0; position: relative;
  font-weight: 620; color: var(--ink); font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details[open] summary { color: var(--brand); }
.faq .faq-body { padding: 0 56px 22px 0; color: var(--muted); font-size: .98rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Case studies ---------- */
.case { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.case-body { padding: 34px; }
.case-side { background: var(--bg-soft); padding: 34px; border-left: 1px solid var(--line); }
.case h3 { font-size: 1.42rem; letter-spacing: -.025em; }
.case-metrics { display: grid; gap: 18px; }
.case-metric b { display: block; font-size: 1.85rem; color: var(--brand-dark); font-weight: 780; letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.case-metric span { font-size: .86rem; color: var(--muted); }
.case-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-bottom: 6px; }
.case-block { margin-bottom: 20px; }
.case-block p { font-size: .955rem; color: var(--muted); margin: 0; }

/* ---------- Dark feature section ---------- */
.sec-dark {
  background: var(--bg-deep); color: #b9c6da; position: relative; overflow: hidden;
}
.sec-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 340px at 8% 0%, rgba(29,78,137,.55), transparent 62%),
    radial-gradient(560px 300px at 92% 100%, rgba(245,179,1,.14), transparent 62%);
}
.sec-dark > * { position: relative; }
.sec-dark .sec-blimp {
  position: absolute; right: -4%; top: 8%;
  width: min(520px, 44vw); color: #ffffff;
  opacity: .045; pointer-events: none;
  animation: drift 26s ease-in-out infinite reverse;
}
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark .lede { color: #a8b6cc; }
.sec-dark .eyebrow { color: var(--accent); }
.sec-dark .eyebrow::after { background: var(--accent); }

.numcard {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  display: flex; flex-direction: column; height: 100%;
}
.numcard:hover { border-color: rgba(245,179,1,.5); background: rgba(255,255,255,.06); transform: translateY(-3px); }
.numcard .num {
  font-family: var(--display);
  font-size: 3.2rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px rgba(245,179,1,.75);
  letter-spacing: -.04em; margin-bottom: 18px; font-variant-numeric: tabular-nums;
}
.numcard h3 { font-size: 1.32rem; margin-bottom: .5em; }
.numcard p { color: #a8b6cc; font-size: .96rem; }
.numcard .pillar-list { border-top-color: rgba(255,255,255,.12); }
.numcard .pillar-list li { color: #dbe4f0; }

/* ---------- Dark CTA band ---------- */
.band { background: var(--bg-deep); color: #cdd6e8; position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(720px 320px at 20% 0%, rgba(29,78,137,.55), transparent 62%),
              radial-gradient(560px 300px at 88% 100%, rgba(245,179,1,.16), transparent 60%);
}
.band-in { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: 48px; align-items: center; }
.band h2 { color: #fff; }
.band p { color: #a9b6d0; margin-bottom: 0; }
.band .btn-row { justify-content: flex-end; }

/* ---------- Form ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .875rem; font-weight: 620; color: var(--ink); margin-bottom: 6px; }
.field .req { color: #d33; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: .96rem; color: var(--ink);
  background: #fff; transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(29,78,137,.14); }
.field textarea { min-height: 104px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.consent input { width: 17px; height: 17px; margin-top: 3px; }
.form-note { font-size: .82rem; color: var(--muted-2); margin: 14px 0 0; }
.form-err { color: #c62828; font-size: .82rem; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #d33; }
.field.invalid .form-err { display: block; }
.form-ok { display: none; background: var(--brand-soft); border: 1px solid #c7d8ea; border-radius: var(--r); padding: 22px; }
.form-ok h3 { color: var(--brand-dark); }
.form-ok p { color: var(--brand-dark); margin-bottom: 0; font-size: .95rem; }

/* ---------- Page hero (inner pages) ---------- */
.phero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 54px 0 50px; position: relative; overflow: hidden; }
.phero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 300px at 8% 0%, rgba(29,78,137,.09), transparent 60%);
}
.phero-in { position: relative; }
.crumbs { font-size: .82rem; color: var(--muted-2); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 7px; opacity: .6; }

/* ---------- Misc ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: .845rem; color: var(--muted); background: #fff; }

.sticky-side { position: sticky; top: 92px; }

.post { display: flex; flex-direction: column; height: 100%; }
.post-meta { font-size: .8rem; color: var(--muted-2); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-meta .dot { opacity: .5; }
.post h3 { font-size: 1.09rem; }
.post .more { margin-top: auto; padding-top: 14px; font-size: .875rem; font-weight: 650; color: var(--brand); display: inline-flex; gap: 6px; align-items: center; }

.member b { display: block; color: var(--ink); font-size: 1.02rem; }
.member .role { color: var(--brand); font-size: .855rem; font-weight: 600; margin-bottom: 8px; }
.member p { font-size: .925rem; color: var(--muted); margin: 0; }
.member .avatar { width: 48px; height: 48px; flex: 0 0 48px; font-size: 1rem; margin-bottom: 14px; }

.pillar-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  border-top: 1px solid var(--line-soft); padding-top: 14px;
}
.pillar-list li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: .89rem; color: var(--ink-2); font-weight: 550;
}
.pillar-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
}

.ind-card { display: grid; grid-template-columns: 1fr; gap: 4px; }
.ind-card b { color: var(--ink); font-size: 1rem; }
.ind-card span { color: var(--muted); font-size: .91rem; }

.legal { max-width: 74ch; }
.legal h2 { font-size: 1.35rem; margin-top: 2em; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: .985rem; }

/* ---------- Footer ---------- */
.ftr { background: var(--bg-deep); color: #97a5c2; padding: 62px 0 0; font-size: .93rem; }
.ftr a { color: #b9c5dd; }
.ftr a:hover { color: #fff; }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 44px; }
.ftr h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 9px; }
.ftr .logo { color: #fff; margin-bottom: 14px; }
.ftr .about { max-width: 34ch; margin-bottom: 18px; }
.ftr .addr { font-style: normal; line-height: 1.75; }
.ftr .addr a { display: inline-block; }
.ftr-socials { display: flex; gap: 8px; margin-top: 18px; }
.ftr-socials a {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.14);
  display: grid; place-items: center; font-size: .78rem; font-weight: 650;
}
.ftr-socials a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.ftr-bot {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: .855rem;
}
.ftr-bot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Sticky mobile CTA ---------- */
.mcta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px 12px; gap: 8px;
  box-shadow: 0 -6px 20px rgba(13,21,38,.09);
}
.mcta a { flex: 1; justify-content: center; }

/* ---------- Reveal ----------
   Only applied when JS is confirmed running (the .js class is set by an inline
   script in <head>). Without JS every .rev element stays fully visible. */
.js .rev { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .rev.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js .rev { opacity: 1; transform: none; }
  .hero-blimp, .sec-dark .sec-blimp { animation: none; }
  .marquee-track { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .split, .split-4060, .band-in { grid-template-columns: 1fr; gap: 36px; }
  .band .btn-row { justify-content: flex-start; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ftr-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .case { grid-template-columns: 1fr; }
  .case-side { border-left: 0; border-top: 1px solid var(--line); }
  .sticky-side { position: static; }
}

@media (max-width: 900px) {
  .hero-blimp { width: 82vw; top: auto; bottom: -6%; right: -26%; opacity: .07; }
  .sec-dark .sec-blimp { display: none; }
  .numcard { padding: 26px 22px; }
  .numcard .num { font-size: 2.6rem; }
  .marquee-item { font-size: .92rem; padding: 0 16px; gap: 16px; }
  .nav, .hdr-cta { display: none; }
  .burger { display: flex; }
  .hero { padding: 46px 0 52px; }
  .sec { padding: 58px 0; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mcta { display: flex; }
  body { padding-bottom: 66px; }
  .ftr { padding-bottom: 60px; }
}

@media (max-width: 620px) {
  :root { --gut: 18px; }
  /* Two trust badges per row instead of four stacked rows above the fold */
  .hero-badges { gap: 8px; }
  .hero-badge { padding: 6px 11px; font-size: .74rem; gap: 6px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr; }
  .case-body, .case-side { padding: 26px 22px; }
  .logos { gap: 10px 22px; }
  .logos span { font-size: .89rem; }
  h1 { font-size: 1.95rem; }
  .hero-panel { padding: 22px; }
}