/* ============================================================
   ACIT — homepage prototype
   Brand: bold Red Hat Display, outline accents, hard blue + hard yellow
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --hard-blue: #0e0048;
  --hard-blue-90: #0e0048ee;
  --hard-yellow: #f9c612;
  --bright-blue: #2b3990;
  --mid-blue: #1AA4DA;
  --soft-blue: #b7dbf3;
  --soft-white: #f0f7f7;
  --white: #ffffff;
  --ink-on-light: var(--hard-blue);
  --ink-on-dark: var(--soft-white);

  --font-display: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 4px;

  /* yellow bar height = ~E arm height — derived from headline cap height */
  --bar-h: 10px;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-on-light);
  background: var(--white);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; }
p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hard-blue);
}
.eyebrow--light { color: var(--soft-blue); }

.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--hard-blue);
  text-stroke: 2px var(--hard-blue);
  font-weight: 900;
}
.outline--light {
  -webkit-text-stroke: 2px var(--soft-white);
  text-stroke: 2px var(--soft-white);
}
.hl { color: var(--hard-yellow); }

.yellow-bar {
  display: block;
  width: 88px;
  height: var(--bar-h);
  background: var(--hard-yellow);
  margin: 1.1rem 0 1.5rem;
}
.yellow-bar--hero {
  width: 140px;
  height: 14px;
  margin: 1.6rem 0 2rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--yellow { background: var(--hard-yellow); color: var(--hard-blue); }
.btn--yellow:hover { background: #ffd647; }
.btn--ghost { color: var(--soft-white); border-color: var(--soft-white); }
.btn--ghost:hover { background: var(--soft-white); color: var(--hard-blue); }
.btn--ghost-dark { color: var(--hard-blue); border-color: var(--hard-blue); }
.btn--ghost-dark:hover { background: var(--hard-blue); color: var(--soft-white); }
.btn--block { display: flex; justify-content: center; }
.btn--lg { padding: 1.1rem 1.8rem; font-size: 1rem; }

/* ============================================================
   TOP UTILITY BAR — remote support downloads
   ============================================================ */
.topbar {
  background: #06002b;
  color: var(--soft-white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #ffffff10;
  position: relative;
  z-index: 60;
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 6px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;   /* single centred "Need remote support?" link */
  gap: 8px;
}
.topbar__label {
  color: #ffffffaa;
  font-weight: 500;
  margin-right: 2px;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft-white);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.topbar__link:hover {
  background: #ffffff14;
  color: var(--hard-yellow);
}
.topbar__link--full strong { color: var(--hard-yellow); font-weight: 800; }
.topbar__link--full:hover strong { color: var(--soft-white); }
.topbar__link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .topbar__inner { gap: 4px; padding: 5px var(--gutter); }
  .topbar__label { display: none; }
  .topbar__link span { display: none; }
  .topbar__link { padding: 6px 8px; }
  .topbar__link svg { width: 16px; height: 16px; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px var(--gutter);
  background: var(--hard-blue);
  color: var(--soft-white);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ffffff10;
}
.nav__brand img { height: 28px; width: auto; }
.nav__primary ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2.3vw, 28px);
  justify-content: center;
}
.nav__primary a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft-white);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav__primary a:hover { border-bottom-color: var(--hard-yellow); }
.nav__cta { padding: 0.7rem 1.1rem; font-size: 0.82rem; }

/* Dropdown menus */
.nav__has-dropdown { position: relative; }
.nav__has-dropdown > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  vertical-align: middle;
  opacity: 0.7;
}
.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: -16px;
  background: var(--soft-white);
  color: var(--hard-blue);
  min-width: 280px;
  padding: 14px 0;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.35);
  border-top: 4px solid var(--hard-yellow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 100;
}
.nav__has-dropdown:hover > .nav__dropdown,
.nav__has-dropdown:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.nav__dropdown a {
  display: block;
  padding: 8px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hard-blue);
  border-bottom: none;
}
.nav__dropdown a:hover {
  background: var(--hard-blue);
  color: var(--hard-yellow);
  border-bottom: none;
}
.nav__dropdown-group {
  padding: 6px 0 8px;
  margin: 6px 0;
  border-top: 1px solid #0e004810;
  border-bottom: 1px solid #0e004810;
}
.nav__dropdown-heading {
  display: block;
  padding: 6px 22px 4px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-blue);
}

/* Mega menu (Capabilities) */
.nav__has-megamenu { position: static; }
.nav__has-megamenu > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  vertical-align: middle;
  opacity: 0.7;
}
.nav__megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--soft-white);
  color: var(--hard-blue);
  width: min(960px, calc(100vw - 32px));
  padding: 32px 36px;
  border-radius: var(--radius);
  border-top: 4px solid var(--hard-yellow);
  box-shadow: 0 18px 48px -8px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.nav__has-megamenu:hover > .nav__megamenu,
.nav__has-megamenu:focus-within > .nav__megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}
.nav__megamenu--2col {
  grid-template-columns: repeat(2, 1fr);
  width: min(640px, calc(100vw - 32px));
  gap: 48px;
}
.nav__megamenu-col h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hard-blue);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hard-yellow);
}
.nav__megamenu-col h4 a {
  color: var(--hard-blue);
  display: block;
  padding: 0;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: none;
}
.nav__megamenu-col h4 a:hover { color: var(--mid-blue); background: transparent; }
.nav__megamenu-col ul {
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav__megamenu-col a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hard-blue);
  padding: 6px 8px;
  border-radius: 3px;
  border-bottom: none;
  transition: background .15s ease, color .15s ease;
}
.nav__megamenu-col a:hover {
  background: var(--hard-blue);
  color: var(--hard-yellow);
  border-bottom: none;
}
.nav__megamenu-col p {
  font-size: 0.82rem;
  color: #0e0048aa;
  margin: 0 0 10px;
  line-height: 1.45;
}
@media (max-width: 960px) {
  .nav__megamenu { display: none; }
}

@media (max-width: 960px) {
  .nav { grid-template-columns: auto auto; }
  .nav__primary { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* Auckland skyline photo, blended to a Hard Blue duotone so it reads as
     brand rather than a literal photo. Drop auckland-hero.jpg in images/ at the repo
     root; if it's missing the hero falls back to the flat Hard Blue below. */
  background-color: var(--hard-blue);
  background-image: url("images/auckland-hero.jpg");
  background-size: cover;
  background-position: center 38%;
  background-blend-mode: luminosity;
  color: var(--soft-white);
  overflow: hidden;
  padding: clamp(40px, 6vw, 90px) 0 clamp(48px, 7vw, 110px);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  /* blue vignette: dark top + bottom keep the headline and CTAs readable,
     the skyline shows through the lighter middle band, plus the brand glows */
  background:
    radial-gradient(1100px 600px at 92% -10%, #2b39903a, transparent 62%),
    radial-gradient(700px 500px at -10% 115%, #1AA4DA2b, transparent 60%),
    linear-gradient(100deg, rgba(14, 0, 72, 0.9) 0%, rgba(14, 0, 72, 0.66) 30%, rgba(14, 0, 72, 0.32) 58%, rgba(14, 0, 72, 0.16) 100%);
  z-index: -1;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero .eyebrow { color: var(--soft-blue); }
.hero__headline {
  font-size: clamp(2.2rem, 6.2vw, 5.6rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
}
.hero__headline .line { display: block; }
.hero__headline .outline {
  -webkit-text-stroke: 2.5px var(--soft-white);
  text-stroke: 2.5px var(--soft-white);
}
@media (min-width: 700px) {
  .hero__headline .outline { -webkit-text-stroke-width: 3px; }
}
.hero__sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: #ffffffcc;
  margin-bottom: 2rem;
  font-weight: 500;
  line-height: 1.55;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- entrance animation: headline punches in together on load ---- */
.hero__headline .line {
  opacity: 0;
  transform: translateY(60px) scale(0.94);
  animation: heroPunchIn 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.40s;
}

@keyframes heroPunchIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__headline .line {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* wedge accent — nod to the logo's "A" trapezoid */
.hero__corner {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 360px;
  height: 220px;
  background: linear-gradient(135deg, #ffffff15, #ffffff04);
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
  z-index: 0;
}

/* ============================================================
   REFRAME
   ============================================================ */
.reframe {
  background: var(--soft-white);
  padding: clamp(70px, 9vw, 130px) 0;
}
.reframe__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 860px) {
  .reframe__grid { grid-template-columns: 1fr; }
}
.reframe__title {
  font-size: clamp(2rem, 5vw, 4.4rem);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.reframe__body { color: var(--hard-blue); font-size: 1.05rem; display: grid; gap: 1rem; padding-top: 0.4rem; }

/* ============================================================
   LANES (three search-intent entries)
   ============================================================ */
.lanes { padding: clamp(80px, 10vw, 140px) 0; background: var(--white); }
.section-head { max-width: 800px; margin: 0 0 clamp(40px, 5vw, 64px); }
.section-head--light { color: var(--soft-white); }
.section-title {
  font-size: clamp(2rem, 5vw, 4.2rem);
  text-transform: uppercase;
  line-height: 0.95;
}
.section-title--light { color: var(--soft-white); }
.section-lead {
  margin-top: 1rem;
  font-size: 1.05rem;
  max-width: 56ch;
  color: inherit;
  opacity: 0.92;
}

.lanes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 960px) { .lanes__grid { grid-template-columns: 1fr; } }

.lane {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--soft-white);
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
}
.lane::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 180px; height: 120px;
  background: var(--hard-yellow);
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}
.lane:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px #0e004830;
  border-color: var(--hard-blue);
}
.lane:hover::after { opacity: 0.15; }
.lane--alt { background: var(--hard-blue); color: var(--soft-white); }
.lane--alt .outline { -webkit-text-stroke-color: var(--soft-white); }
.lane--alt .lane__chips li { background: #ffffff14; color: var(--soft-white); }

.lane__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 1.6rem;
}
.lane__title {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}
.lane p { font-size: 1rem; line-height: 1.55; opacity: 0.9; margin-bottom: 1.2rem; }
.lane__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 1.6rem;
}
.lane__chips li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: #0e004810;
  border-radius: 999px;
}
.lane__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hard-yellow);
}
.lane:not(.lane--alt) .lane__cta { color: var(--hard-blue); }

/* ============================================================
   CONNECTED TECHNOLOGY MODEL
   ============================================================ */
.ctm {
  background: var(--hard-blue);
  color: var(--soft-white);
  padding: clamp(90px, 11vw, 160px) 0;
  position: relative;
  overflow: hidden;
}
.ctm::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 10% 0%, #2b399050, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, #1AA4DA30, transparent 60%);
}
.ctm > .container { position: relative; }

/* ---- concentric diagram ---- */
.ctm__diagram-wrap {
  max-width: 640px;
  margin: clamp(8px, 1.5vw, 24px) auto clamp(28px, 3.5vw, 44px);
  position: relative;
}
.ctm__diagram { width: 100%; height: auto; display: block; }

/* ---- supporting layer cards ---- */
.ctm__layers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .ctm__layers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ctm__layers { grid-template-columns: 1fr; } }
.ctm__layer {
  position: relative;
  padding: 20px 18px;
  border: 1.5px solid #ffffff22;
  background: #ffffff08;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ctm__layer:hover { transform: translateY(-2px); border-color: var(--hard-yellow); background: #ffffff10; }
.ctm__layer h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--soft-white);
}
.ctm__layer p { font-size: 0.9rem; color: #ffffffcc; line-height: 1.5; }
.ctm__tag {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hard-yellow);
}
.ctm__layer--featured {
  background: #f9c61218;
  border-color: var(--hard-yellow);
  border-top: 4px solid var(--hard-yellow);
}
.ctm__layer--featured .ctm__tag { color: var(--hard-yellow); }
.ctm__layer--featured h3 { color: var(--soft-white); }

/* ---- security strip below the rings ---- */
.ctm__security {
  margin-top: clamp(22px, 3vw, 36px);
  padding: 18px 24px;
  background: var(--hard-yellow);
  color: var(--hard-blue);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 18px;
}
.ctm__security-shield { flex-shrink: 0; width: 32px; height: 36px; color: var(--hard-blue); }
.ctm__security-copy { display: grid; gap: 3px; }
.ctm__security strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ctm__security p { font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 600px) {
  .ctm__security { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Tighten the CTM section padding overall */
.ctm { padding: clamp(70px, 9vw, 130px) 0; }
.ctm .section-head { margin-bottom: clamp(20px, 3vw, 36px); }

/* ---- scroll-pinned build animation (homepage variant) ---- */
.ctm--scroll-pin {
  padding: 0;
  overflow: visible; /* let the sticky element be positioned against the viewport */
}
.ctm--scroll-pin .ctm__pin-region {
  position: relative;
  min-height: 400vh;
}
.ctm--scroll-pin .ctm__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* writeup + diagram pinned side by side so the copy gives the diagram context */
.ctm__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
}
.ctm__stage .ctm__intro { margin: 0; max-width: 36rem; }
.ctm--scroll-pin .ctm__stage .ctm__diagram-wrap {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 540px;
}
.ctm--scroll-pin .ctm-anim {
  opacity: 0;
  transition: opacity 0.18s linear;
  will-change: opacity;
}
.ctm--scroll-pin .ctm__supporting {
  /* sits after the pinned region; keep clear space so the layer cards never
     overlap the pinned diagram + copy */
  margin-top: 0;
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

/* stack the writeup above the diagram and unwind the pin on narrow viewports */
@media (max-width: 900px) {
  .ctm__stage {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 36px);
    justify-items: center;
    text-align: left;
  }
  .ctm__stage .ctm__intro { max-width: 640px; }
  .ctm--scroll-pin .ctm__stage .ctm__diagram-wrap { margin: 0 auto; }
  .ctm--scroll-pin { padding: clamp(70px, 9vw, 130px) 0; }
  .ctm--scroll-pin .ctm__pin-region { min-height: auto; }
  .ctm--scroll-pin .ctm__sticky { position: static; height: auto; padding: clamp(28px, 5vw, 48px) 0; }
  .ctm--scroll-pin .ctm-anim { opacity: 1; }
  .ctm--scroll-pin .ctm__supporting { margin-top: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ctm--scroll-pin .ctm__pin-region { min-height: auto; }
  .ctm--scroll-pin .ctm__sticky { position: static; height: auto; padding: clamp(28px, 5vw, 48px) 0; }
  .ctm--scroll-pin .ctm-anim { opacity: 1; transition: none; }
  .ctm--scroll-pin .ctm__supporting { margin-top: 0; }
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .industries__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .industries__grid { grid-template-columns: 1fr; } }

.industries__card {
  background: var(--white);
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 230px;
  text-decoration: none;
  color: inherit;
}
.industries__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px #0e004830;
}
.industries__card h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
  color: var(--hard-blue);
}
.industries__card p { font-size: 0.92rem; color: #0e0048cc; flex: 1; }
.industries__cta {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hard-blue);
  padding-top: 0.8rem;
  white-space: nowrap;
  position: relative;
}
.industries__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--hard-yellow);
}

/* ============================================================
   OUTCOMES
   ============================================================ */
.outcomes {
  background: var(--hard-blue);
  color: var(--soft-white);
  padding: clamp(80px, 10vw, 140px) 0;
}
.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #ffffff18;
}
@media (max-width: 700px) { .outcomes__grid { grid-template-columns: 1fr; } }
.outcomes__grid li {
  border-bottom: 1px solid #ffffff18;
  border-right: 1px solid #ffffff18;
}
.outcomes__grid li:nth-child(2n) { border-right: 0; }
.outcomes__grid a {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--soft-white);
  transition: background .15s ease, color .15s ease;
}
.outcomes__grid a:hover { background: var(--hard-yellow); color: var(--hard-blue); }
.outcomes__arrow { color: var(--hard-yellow); font-weight: 900; transition: color .15s ease; }
.outcomes__grid a:hover .outcomes__arrow { color: var(--hard-blue); }

/* ============================================================
   CASE STUDY
   ============================================================ */
.case {
  padding: clamp(90px, 11vw, 160px) 0;
  background: var(--soft-white);
}
.case__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .case__grid { grid-template-columns: 1fr; } }
.case__title {
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
  display: grid;
  gap: 0.1em;
  margin: 1rem 0 1.5rem;
}
.case__copy p { font-size: 1.05rem; color: #0e0048; margin-bottom: 1.4rem; max-width: 56ch; }
.case__stats {
  display: grid;
  gap: 18px;
  padding: 36px 28px;
  background: var(--hard-blue);
  color: var(--soft-white);
  border-radius: var(--radius);
}
.case__stats > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid #ffffff20; }
.case__stats > div:last-child { border-bottom: 0; }
.case__stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: 0.95;
  color: var(--hard-yellow);
}
.case__stat.outline { -webkit-text-stroke: 2.5px var(--soft-white); color: transparent; }
.case__stats > div > span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft-blue);
}

/* ============================================================
   TIERS
   ============================================================ */
.tiers { padding: clamp(90px, 11vw, 150px) 0; background: var(--white); }
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 2rem;
}
@media (max-width: 880px) { .tiers__grid { grid-template-columns: 1fr; } }
/* two-path variant (partnership: whole stack vs just the parts you need) */
.tiers__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
@media (max-width: 880px) { .tiers__grid--two { grid-template-columns: 1fr; } }
/* single-card variant (security per-server: same cover on every plan) */
.tiers__grid--one { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }

.tier {
  border: 1.5px solid #0e004820;
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px #0e004830; }
.tier header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.tier h3 {
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--hard-blue);
}
.tier__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.tier ul { display: grid; gap: 0.6rem; }
.tier li {
  font-size: 0.95rem;
  padding-left: 1.4rem;
  position: relative;
  color: #0e0048;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 4px;
  background: var(--hard-yellow);
}
.tier__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--hard-blue);
}
.tier__for {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #0e0048b3;
}
.tier__inherits {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--hard-blue);
  margin-bottom: -0.4rem;
}
/* keep the CTA pinned to the bottom so cards of different length line up */
.tier > .btn { margin-top: auto; }
.tier__extras {
  border-top: 1px solid #0e004822;
  padding-top: 1rem;
  display: grid;
  gap: 0.6rem;
}
.tier__extras-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.tier__extras-list { display: grid; gap: 0.6rem; }
.tier__extras-list li::before {
  content: "+";
  background: none;
  color: var(--mid-blue);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  top: 0.05em;
  left: 0;
  width: auto;
  height: auto;
}
.tiers__note {
  text-align: center;
  max-width: 62ch;
  margin: clamp(28px, 3.5vw, 40px) auto 0;
  color: #0e004899;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* sub-group heading within a tiers section (e.g. per-user / per-server) */
.tiers__group {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--hard-blue);
  margin: clamp(32px, 4vw, 52px) 0 1rem;
}
.tiers__group:first-of-type { margin-top: 2rem; }
.tiers__group-note {
  color: #0e004899;
  font-size: 0.95rem;
  margin: -0.6rem 0 1rem;
}
/* "charged as used / not included" block: muted, $ markers */
.tier__metered {
  border-top: 1px dashed #0e00483a;
  padding-top: 1rem;
  display: grid;
  gap: 0.6rem;
}
.tier__metered-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0e004899;
}
.tier__metered-list { display: grid; gap: 0.6rem; }
.tier__metered-list li { color: #0e004899; }
.tier__metered-list li::before {
  content: "$";
  background: none;
  color: #0e004866;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  top: 0.1em;
  left: 0;
  width: auto;
  height: auto;
}
.tier--mid .tier__metered { border-color: #ffffff40; }
.tier--mid .tier__metered-title { color: #ffffffcc; }
.tier--mid .tier__metered-list li { color: #ffffffcc; }
.tier--mid .tier__metered-list li::before { color: #ffffff99; }

.tier--mid { background: var(--hard-blue); color: var(--soft-white); border-color: var(--hard-blue); }
.tier--mid h3 { color: var(--soft-white); }
.tier--mid .tier__tag { color: var(--hard-yellow); }
.tier--mid .tier__price { color: var(--soft-white); }
.tier--mid .tier__for { color: #ffffffcc; }
.tier--mid .tier__inherits { color: var(--hard-yellow); }
.tier--mid li { color: var(--soft-white); }
.tier--mid .tier__extras { border-color: #ffffff33; }
.tier--mid .tier__extras-title { color: var(--hard-yellow); }
.tier--mid .tier__extras-list li::before { color: var(--hard-yellow); }
.tier--top { background: var(--soft-white); border-color: var(--hard-blue); }

/* ============================================================
   IMPACT
   ============================================================ */
.impact {
  background: var(--hard-blue);
  color: var(--soft-white);
  padding: clamp(90px, 11vw, 160px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.impact::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 50% 0%, #2b399060, transparent 60%);
}
.impact__inner { position: relative; }
.impact__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.85;
  margin: 1rem 0 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}
.impact__num .outline { -webkit-text-stroke-width: 4px; }
.impact__copy {
  max-width: 64ch;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #ffffffd9;
}
.impact__copy strong { color: var(--hard-yellow); font-weight: 900; }
.impact__copy + .btn { margin-top: clamp(28px, 4vw, 44px); }

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 960px) { .insights__grid { grid-template-columns: 1fr; } }
.insights__card {
  background: var(--white);
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 280px;
}
.insights__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px #0e004830; }
.insights__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.insights__card h3 {
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--hard-blue);
}
.insights__card p { color: #0e0048cc; flex: 1; font-size: 0.95rem; }
.insights__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hard-blue);
  padding-top: 0.7rem;
  white-space: nowrap;
  position: relative;
  align-self: flex-start;
}
.insights__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--hard-yellow);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  background: linear-gradient(135deg, var(--hard-blue), var(--bright-blue));
  color: var(--soft-white);
  padding: clamp(90px, 11vw, 160px) 0;
  text-align: center;
}
.cta__title {
  font-size: clamp(2.2rem, 6vw, 5rem);
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 1rem;
}
.cta__title .hl { color: var(--hard-yellow); }
.cta p { max-width: 56ch; margin: 0 auto 2rem; font-size: 1.1rem; color: #ffffffd9; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #06002a; color: var(--soft-white); padding-top: clamp(60px, 7vw, 90px); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: clamp(50px, 6vw, 80px);
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__brand img { height: 36px; margin-bottom: 1rem; }
.footer__brand p { font-size: 0.9rem; color: #ffffffaa; line-height: 1.5; }
.footer__brand .footer__contact { margin-top: 0.85rem; }
.footer__brand .footer__contact a { color: #ffffffcc; border-bottom: 1px solid var(--hard-yellow); }
.footer__brand .footer__contact a:hover { color: var(--hard-yellow); }
.footer__col h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hard-yellow);
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: 0.55rem; }
.footer__col a { font-size: 0.92rem; color: #ffffffcc; transition: color .15s ease; }
.footer__col a:hover { color: var(--hard-yellow); }
.footer__bar { border-top: 1px solid #ffffff14; padding: 22px 0; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: #ffffff80; }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--hard-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   INNER-PAGE PRIMITIVES
   ============================================================ */

/* breadcrumbs */
.crumbs {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft-blue);
  margin-bottom: 1.8rem;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.crumbs a { color: var(--soft-blue); border-bottom: 2px solid transparent; transition: border-color .15s ease; }
.crumbs a:hover { border-bottom-color: var(--hard-yellow); }
.crumbs > span:not([aria-current]) { color: #ffffff60; }
.crumbs [aria-current] { color: var(--soft-white); }

/* inner page hero — compact variant of the homepage hero */
.page-hero {
  position: relative;
  background: var(--hard-blue);
  color: var(--soft-white);
  overflow: hidden;
  padding: clamp(50px, 7vw, 110px) 0 clamp(70px, 9vw, 140px);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, #2b399060, transparent 60%),
    radial-gradient(700px 500px at -10% 110%, #1AA4DA40, transparent 60%);
  z-index: -1;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.8vw, 6.4rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-top: 0.6rem;
}
.page-hero__headline span { display: block; }
.page-hero__sub {
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: #ffffffcc;
  margin: 1rem 0 2rem;
  line-height: 1.55;
}
.page-hero .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.page-hero--case .page-hero__headline { font-size: clamp(2.6rem, 7vw, 6.6rem); }

/* meta bar — info strip below a case-study hero */
.meta-bar {
  background: var(--soft-white);
  padding: 22px 0;
  border-bottom: 1px solid #0e004810;
}
.meta-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.meta-bar__grid > div { display: grid; gap: 4px; }
.meta-bar__grid span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0e004890;
}
.meta-bar__grid strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.98rem;
  color: var(--hard-blue);
  text-transform: uppercase;
}
@media (max-width: 800px) { .meta-bar__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   JOURNEY / STORY TIMELINES
   ============================================================ */
.journey, .story { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.journey__grid, .story__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 2rem;
}
@media (max-width: 900px) { .journey__grid, .story__list { grid-template-columns: 1fr; } }
.journey__step, .story__step {
  background: var(--white);
  padding: 36px 32px 32px;
  border: 1px solid #0e004810;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.journey__step:hover, .story__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px #0e004830;
}
.journey__year, .story__year {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.journey__step h3, .story__step h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--hard-blue);
}
.journey__step p, .story__step p { font-size: 0.98rem; color: #0e0048cc; line-height: 1.55; }

/* ============================================================
   COMMAND CENTER
   ============================================================ */
.cmdcenter { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.cmdcenter__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .cmdcenter__grid { grid-template-columns: 1fr; } }
.cmdcenter__copy h2 { margin: 1rem 0 1.4rem; }
.cmdcenter__copy p { font-size: 1.05rem; max-width: 56ch; margin-bottom: 1.4rem; color: #ffffffd9; }
.cmdcenter__list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}
.cmdcenter__list li {
  font-size: 0.98rem;
  padding-left: 1.4rem;
  position: relative;
  color: var(--soft-white);
}
.cmdcenter__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 14px; height: 4px;
  background: var(--hard-yellow);
}
.cmdcenter__visual {
  display: grid;
  gap: 12px;
  padding: 22px;
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
}
.cmdcenter__panel {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: #ffffff0c;
  border-radius: var(--radius);
  border-left: 4px solid var(--hard-yellow);
}
.cmdcenter__panel span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-blue);
}
.cmdcenter__panel strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--soft-white);
}

/* ============================================================
   TWO-COL SECTION (capability page problem statement)
   ============================================================ */
.twocol { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.twocol__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 860px) { .twocol__grid { grid-template-columns: 1fr; } }
.twocol__body { display: grid; gap: 1rem; color: #0e0048; font-size: 1.05rem; padding-top: 0.4rem; line-height: 1.6; }

/* ============================================================
   PROCESS STEPS (numbered)
   ============================================================ */
.steps { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.steps__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 2rem;
  counter-reset: step;
}
@media (max-width: 800px) { .steps__list { grid-template-columns: 1fr; } }
.steps__item {
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.steps__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.steps__item h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--soft-white); }
.steps__item p { color: #ffffffcc; font-size: 0.98rem; line-height: 1.55; }

/* ============================================================
   BENEFITS GRID (reused by Pressures and Outcomes-Grid sections)
   ============================================================ */
.outcomes-grid, .pressures, .benefits { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.outcomes-grid, .benefits { background: var(--white); }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .benefits__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .benefits__grid { grid-template-columns: 1fr; } }
/* two-up variant (remote-support.html) */
.benefits__grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .benefits__grid--two { grid-template-columns: 1fr; } }
/* pin a card's CTA to the bottom so uneven cards line up */
.benefits__card > .btn { margin-top: auto; }
.benefits__card {
  background: var(--white);
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  border-top: 4px solid var(--hard-yellow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pressures .benefits__card { background: var(--soft-white); }
.benefits__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px #0e004830; }
.benefits__card h3 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--hard-blue);
}
.benefits__card p { font-size: 0.95rem; color: #0e0048cc; line-height: 1.55; }

/* ============================================================
   "WHERE THIS FITS" SECTION
   ============================================================ */
.fits { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); text-align: left; }
.fits__inner { max-width: 760px; }
.fits__copy { font-size: 1.1rem; color: #ffffffd9; margin: 1rem 0 1.6rem; max-width: 60ch; }

/* ============================================================
   HOW WE HELP (industry page capability grid)
   ============================================================ */
.howhelp { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.howhelp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2rem;
}
@media (max-width: 800px) { .howhelp__grid { grid-template-columns: 1fr; } }
.howhelp__card {
  padding: 30px 28px;
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.howhelp__tag {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hard-yellow);
}
.howhelp__card h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--soft-white); }
.howhelp__card p { color: #ffffffcc; font-size: 0.98rem; line-height: 1.55; }
.howhelp__link, .howhelp__card p a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hard-yellow);
  margin-top: 0.4rem;
  border-bottom: 2px solid var(--hard-yellow);
  align-self: flex-start;
}

/* ------------------------------------------------------------
   howhelp --photo: section sits over a background photo with
   opaque light-blue cards floating on top (used on industry pages).
   The shared modifier carries the treatment; a per-page modifier
   supplies the image (paths are relative to this file at the root).
   ------------------------------------------------------------ */
.howhelp--photo {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.howhelp--photo-healthcare { background-image: url("images/NurseClear.jpg"); }
.howhelp--photo-creative { background-image: url("images/creative.jpg"); }
.howhelp--photo-professional-services { background-image: url("images/professional.jpg"); }
.howhelp--photo-manufacturing { background-image: url("images/manufacturing.jpg"); }
.howhelp--photo-financial-services { background-image: url("images/financial.jpg"); }
.howhelp--photo-construction { background-image: url("images/construction.jpg"); }
/* blue wash keeps the light header text readable and the section
   reading as Hard Blue while the photo shows through underneath */
.howhelp--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    rgba(14, 0, 72, 0.9) 0%,
    rgba(14, 0, 72, 0.7) 42%,
    rgba(14, 0, 72, 0.32) 100%
  );
}
.howhelp--photo .howhelp__card {
  /* opaque light blue box floating on the photo */
  background: rgba(219, 235, 247, 0.94);
  border: 1.5px solid rgba(14, 0, 72, 0.12);
  box-shadow: 0 18px 40px rgba(14, 0, 72, 0.28);
  backdrop-filter: blur(2px);
}
.howhelp--photo .howhelp__card h3 { color: var(--hard-blue); }
.howhelp--photo .howhelp__card p { color: rgba(14, 0, 72, 0.82); }
.howhelp--photo .howhelp__tag { color: var(--bright-blue); }
.howhelp--photo .howhelp__link,
.howhelp--photo .howhelp__card p a {
  color: var(--hard-blue);
  border-bottom-color: var(--hard-yellow);
}

/* ============================================================
   CASE LIST (industry page case study teaser)
   ============================================================ */
.case-list { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.case-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 2rem;
}
@media (max-width: 800px) { .case-list__grid { grid-template-columns: 1fr; } }
.case-list__card {
  background: var(--white);
  padding: 32px 30px;
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.case-list__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px #0e004830;
  border-color: var(--hard-blue);
}
.case-list__client {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.case-list__card h3 { font-size: 1.4rem; text-transform: uppercase; color: var(--hard-blue); }
.case-list__card p { color: #0e0048cc; font-size: 0.95rem; line-height: 1.55; }
.case-list__cta {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hard-blue);
  padding-top: 0.7rem;
  white-space: nowrap;
  position: relative;
  align-self: flex-start;
}
.case-list__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--hard-yellow);
}

/* ============================================================
   INDUSTRY PACK
   ============================================================ */
.pack { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.pack__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .pack__grid { grid-template-columns: 1fr; } }
.pack__copy { font-size: 1.05rem; color: #ffffffd9; margin: 1rem 0 1.6rem; max-width: 56ch; }
.pack__list {
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
  padding: 28px;
}
.pack__list ul { display: grid; gap: 0.7rem; }
.pack__list li {
  font-size: 0.98rem;
  padding-left: 1.4rem;
  position: relative;
  color: var(--soft-white);
}
.pack__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 12px; height: 4px;
  background: var(--hard-yellow);
}
.pack__list strong { color: var(--hard-yellow); font-weight: 900; }

/* ============================================================
   CSO (challenge / solution / outcome)
   ============================================================ */
.cso { padding: clamp(60px, 8vw, 120px) 0; background: var(--white); }
.cso__block {
  padding: clamp(40px, 6vw, 80px) clamp(30px, 4vw, 60px);
  border-radius: var(--radius);
  margin-bottom: 18px;
  background: var(--soft-white);
}
.cso__block:last-child { margin-bottom: 0; }
.cso__block--alt { background: var(--hard-blue); color: var(--soft-white); }
.cso__block h2 { margin: 0.8rem 0 1.2rem; }
.cso__body { font-size: 1.08rem; line-height: 1.65; color: #0e0048; max-width: 70ch; }
.cso__body--light { color: #ffffffd9; }

/* ============================================================
   STATS GRID (case-study outcomes)
   ============================================================ */
.stats { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .stats__grid { grid-template-columns: 1fr 1fr; } }
.stats__grid li {
  padding: 28px 24px;
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
  display: grid;
  gap: 0.4rem;
}
.stats__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: 1;
}
.stats__grid li > span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-blue);
}

/* ============================================================
   STACK GRID (case-study stack breakdown)
   ============================================================ */
.stack { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.stack__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2rem;
}
@media (max-width: 800px) { .stack__grid { grid-template-columns: 1fr; } }
.stack__card {
  background: var(--white);
  border: 1px solid #0e004810;
  border-top: 4px solid var(--hard-blue);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stack__card:nth-child(4) { border-top-color: var(--hard-yellow); }
.stack__tag {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.stack__card h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--hard-blue); }
.stack__card p { color: #0e0048cc; font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote {
  background: linear-gradient(135deg, var(--hard-blue), var(--bright-blue));
  color: var(--soft-white);
  padding: clamp(80px, 11vw, 160px) 0;
}
.quote__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.quote blockquote cite {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hard-yellow);
}

/* ============================================================
   RELATED CASE STUDIES
   ============================================================ */
.related { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 2rem;
}
@media (max-width: 900px) { .related__grid { grid-template-columns: 1fr; } }
.related__card {
  background: var(--white);
  border: 1px solid #0e004810;
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 200px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.related__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px #0e004830; }
.related__card h3 { font-size: 1.2rem; text-transform: uppercase; color: var(--hard-blue); }
.related__card .case-list__cta { margin-top: auto; }

/* ============================================================
   REGION (Trans-Tasman section on About)
   ============================================================ */
.region { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.region__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .region__grid { grid-template-columns: 1fr; } }
.region__copy { font-size: 1.05rem; color: #ffffffd9; margin: 1rem 0 0; max-width: 56ch; }
.region__stats {
  display: grid;
  gap: 14px;
  padding: 28px;
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
}
.region__stats > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid #ffffff20; }
.region__stats > div:last-child { border-bottom: 0; }
.region__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}
.region__stats > div > span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-blue);
}

/* ============================================================
   PARTNERS / CERTIFICATIONS
   ============================================================ */
.partners { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.partners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 2rem;
}
@media (max-width: 880px) { .partners__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .partners__grid { grid-template-columns: 1fr; } }
.partners__card {
  background: var(--white);
  border: 1px solid #0e004810;
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-bottom: 4px solid var(--hard-yellow);
}
.partners__card h3 { font-size: 1.05rem; text-transform: uppercase; color: var(--hard-blue); letter-spacing: 0.02em; }
.partners__card p { font-size: 0.92rem; color: #0e0048cc; line-height: 1.55; }

/* ============================================================
   LEADERSHIP
   ============================================================ */
.leadership { padding: clamp(80px, 10vw, 140px) 0; background: var(--hard-blue); color: var(--soft-white); }
.leadership__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 2rem;
}
@media (max-width: 900px) { .leadership__grid { grid-template-columns: 1fr; } }
.leadership__card {
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.leadership__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--hard-yellow);
  color: var(--hard-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}
.leadership__card h3 { font-size: 1.3rem; text-transform: uppercase; color: var(--soft-white); }
.leadership__role {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hard-yellow);
}
.leadership__card > p:last-child { color: #ffffffcc; font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   EDITORIAL CASE STUDY — long-form, narrative-led template
   ============================================================ */

/* Article hero — more refined than the bold .page-hero */
.article-hero {
  position: relative;
  background: var(--hard-blue);
  color: var(--soft-white);
  padding: clamp(60px, 8vw, 110px) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.article-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, #2b399060, transparent 60%),
    radial-gradient(700px 500px at -10% 110%, #1AA4DA40, transparent 60%);
  z-index: -1;
}
.article-hero .container { position: relative; z-index: 1; max-width: 980px; }
.article-hero__meta {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft-blue);
  margin: 1.4rem 0 1.4rem;
}
.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--soft-white);
  text-transform: none;
  max-width: 20ch;
  margin: 0 0 1rem;
}
.article-hero__sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: #ffffffcc;
  max-width: 64ch;
}
.article-hero__bar {
  display: block;
  width: 88px;
  height: 8px;
  background: var(--hard-yellow);
  margin: 1.4rem 0 1.4rem;
}

/* Article body */
.article {
  background: var(--soft-white);
  padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 9vw, 130px);
}
.article__wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 960px) {
  .article__wrap { grid-template-columns: 1fr; gap: 32px; }
}

.article__meta {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 18px;
  padding: 26px 24px;
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--hard-yellow);
  font-family: var(--font-body);
}
@media (max-width: 960px) {
  .article__meta { position: static; }
}
.article__meta > div { display: grid; gap: 4px; }
.article__meta span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-blue);
}
.article__meta strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hard-blue);
  line-height: 1.35;
}

.article__body {
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--hard-blue);
}
.article__body p { margin: 0 0 1.4rem; }
.article__body p:last-child { margin-bottom: 0; }

.article__lead {
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--hard-blue);
  line-height: 1.6;
  margin-bottom: 1.8rem !important;
}

.article__body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--hard-blue);
  text-transform: none;
  margin: 2.6rem 0 1rem;
  padding-top: 0.9rem;
  position: relative;
}
.article__body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--hard-yellow);
}

.article__body h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--hard-blue);
  margin: 2rem 0 0.6rem;
  text-transform: none;
}

.article__body ul, .article__body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
  list-style: disc;
}
.article__body li { margin-bottom: 0.5rem; }

.article__body strong { font-weight: 700; }
.article__body em { font-style: italic; }
.article__body a {
  color: var(--mid-blue);
  border-bottom: 1px solid var(--mid-blue);
}
.article__body a:hover {
  color: var(--hard-yellow);
  border-bottom-color: var(--hard-yellow);
}

/* Pull quote inside an article */
.article__pull {
  margin: 2.4rem -8px;
  padding: 30px 34px;
  background: var(--hard-blue);
  color: var(--soft-white);
  border-radius: var(--radius);
  border-left: 6px solid var(--hard-yellow);
}
.article__pull p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--soft-white);
  margin: 0 0 1rem;
  font-style: italic;
}
.article__pull cite {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hard-yellow);
  font-style: normal;
}

/* Section divider within long-form */
.article__divider {
  height: 2px;
  background: #0e004820;
  margin: 2rem 0;
  border: 0;
}

/* ============================================================
   PILLAR — used on the capabilities landing page for each of
   the three pillar deep-dive sections (Support / Solutions / Security)
   ============================================================ */
.pillar__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: flex-start;
  max-width: none;
  margin-bottom: clamp(32px, 4vw, 52px);
}
@media (max-width: 720px) { .pillar__head { grid-template-columns: 1fr; gap: 12px; } }
.pillar__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  display: block;
}
.pillar__intro { max-width: 720px; }
.pillar__intro .section-lead { margin-top: 1rem; }

/* Footer CTA below the pillar grid */
.pillar__footer {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex;
  justify-content: flex-start;
}

/* Solutions pillar grid is 3-up on the capabilities page */
.pillar--solutions .howhelp__grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .pillar--solutions .howhelp__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pillar--solutions .howhelp__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BELIEF — manifesto setup for the $100m goal
   ============================================================ */
.belief { background: var(--soft-white); padding: clamp(80px, 10vw, 140px) 0; }
.belief--with-impact { padding-bottom: 0; }
.belief--with-impact .belief__grid { margin-bottom: clamp(80px, 10vw, 140px); }
.belief__intro {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.belief__intro .eyebrow { display: inline-block; }
.belief__intro .section-title { margin-top: 1rem; }
.belief__intro .yellow-bar { margin: 1.6rem auto 1.6rem; }
.belief__intro > p {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--hard-blue);
  max-width: 64ch;
  margin: 0 auto;
  line-height: 1.6;
}
.belief__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 900px) { .belief__grid { grid-template-columns: 1fr; } }
.belief__card {
  background: var(--white);
  padding: 34px 30px 32px;
  border-radius: var(--radius);
  border: 1px solid #0e004810;
  border-top: 4px solid var(--hard-yellow);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.belief__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px #0e004830; }
.belief__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}
.belief__card h3 {
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--hard-blue);
}
.belief__card p { color: #0e0048cc; font-size: 0.98rem; line-height: 1.6; }

/* ============================================================
   CAREERS
   ============================================================ */
.careers { padding: clamp(80px, 10vw, 140px) 0; background: var(--soft-white); }
.careers__inner { max-width: 760px; }
.careers__copy { font-size: 1.1rem; color: #0e0048; line-height: 1.6; margin: 1rem 0 1.8rem; max-width: 60ch; }

/* ============================================================
   HAMBURGER BUTTON + MOBILE NAV
   ============================================================ */
.nav__hamburger {
  display: none; /* desktop hidden; mobile media query turns it on */
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 8px;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--soft-white);
  border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
.nav.is-open .nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  /* backdrop-filter creates a containing block for fixed descendants, which
     would trap the .nav__primary overlay inside the short header. Drop it here
     (the bar is a solid colour on mobile anyway) so the overlay sizes to the
     viewport. */
  .nav {
    grid-template-columns: auto 1fr auto auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__hamburger { display: flex; }

  /* Hide primary nav by default; flip to a vertical overlay when open */
  .nav__primary {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    background: var(--hard-blue);
    z-index: 90;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 24px 64px;
  }
  .nav.is-open .nav__primary { display: block; }

  .nav__primary > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav__primary > ul > li {
    border-bottom: 1px solid #ffffff18;
    padding: 4px 0;
  }
  .nav__primary > ul > li > a {
    display: block;
    padding: 16px 4px 12px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  /* Mega menu becomes an inline accordion, collapsed by default */
  .nav__megamenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    max-width: 100%;
    padding: 0 0 16px;
    background: transparent;
    box-shadow: none;
    border-top: none;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .nav__has-megamenu.is-expanded > .nav__megamenu { display: block; }
  .nav__megamenu-col h4 {
    color: var(--hard-yellow);
    border-bottom-color: #ffffff22;
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  .nav__megamenu-col h4 a { color: var(--hard-yellow); }
  .nav__megamenu-col p { color: #ffffff88; font-size: 0.8rem; margin-bottom: 8px; }
  .nav__megamenu-col a {
    color: var(--soft-white);
    padding: 8px 12px;
    font-size: 0.95rem;
  }
  .nav__megamenu-col a:hover {
    background: #ffffff10;
    color: var(--hard-yellow);
  }

  /* Dropdowns (Industries, Outcomes) become inline lists, collapsed by default */
  .nav__dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    max-width: 100%;
    padding: 0 0 16px;
    background: transparent;
    box-shadow: none;
    border-top: none;
  }
  .nav__has-dropdown.is-expanded > .nav__dropdown { display: block; }
  .nav__dropdown a {
    color: var(--soft-white);
    padding: 8px 12px;
    font-size: 0.95rem;
  }
  .nav__dropdown a:hover { background: #ffffff10; color: var(--hard-yellow); }
  .nav__dropdown-heading {
    color: var(--hard-yellow);
    padding: 4px 12px 6px;
  }
  .nav__dropdown-group {
    border-top-color: #ffffff22;
    border-bottom-color: #ffffff22;
  }

  /* Dropdown caret indicator stays, and rotates when its section is open */
  .nav__has-dropdown > a::after,
  .nav__has-megamenu > a::after {
    color: var(--hard-yellow);
    float: right;
    opacity: 1;
    transition: transform 0.15s ease;
  }
  .nav__has-dropdown.is-expanded > a::after,
  .nav__has-megamenu.is-expanded > a::after { transform: rotate(180deg); }

  /* The desktop reveal rules slide the panel in with translateX(-50%). On
     mobile that pushes an open section off-screen, so neutralise it here.
     Visibility is driven by .is-expanded (display), not hover/focus. */
  .nav__has-megamenu:hover > .nav__megamenu,
  .nav__has-megamenu:focus-within > .nav__megamenu,
  .nav__has-dropdown:hover > .nav__dropdown,
  .nav__has-dropdown:focus-within > .nav__dropdown {
    transform: none;
  }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact { background: var(--soft-white); padding: clamp(60px, 8vw, 120px) 0; }
.contact__intro { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }

/* With every form closed on load, this line tells people the four cards are a
   choice. Without it the page opens as a bare strip of buttons. */
.contact-picker__prompt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--hard-blue);
  margin: 0 0 1.1rem;
}
.contact-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
/* the forms are siblings of the buttons so they can be interleaved on mobile;
   on desktop each one spans the full row under the button strip */
.contact-picker > .contact-form { grid-column: 1 / -1; }

.contact-tabs__tab {
  background: var(--white);
  border: 1.5px solid #0e004820;
  border-bottom: 4px solid transparent;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hard-blue);
  cursor: pointer;
  text-align: left;
  border-radius: 4px 4px 0 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.contact-tabs__tab:hover { background: #0e00480a; }
.contact-tabs__tab.is-active {
  background: var(--hard-blue);
  color: var(--soft-white);
  border-color: var(--hard-blue);
  border-bottom-color: var(--hard-yellow);
  position: relative;
  z-index: 1;
}
.contact-tabs__tab.is-active small { color: #ffffffb3; }
.contact-tabs__tab.is-active:hover { background: var(--hard-blue); }
.contact-tabs__tab small {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  color: #0e004890;
}

.contact-form {
  background: var(--white);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 0 4px 4px 4px;
  border: 1.5px solid #0e004820;
  border-top: none;
}
.contact-form__fields { display: grid; gap: 22px; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hard-blue);
  margin-bottom: 8px;
}
.contact-form label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: #0e004880; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #0e004830;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--hard-blue);
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--hard-yellow);
  box-shadow: 0 0 0 3px #f9c61230;
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-body);
}
.contact-form__urgency {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contact-form__urgency label {
  flex: 1;
  min-width: 140px;
  margin: 0;
  cursor: pointer;
  padding: 14px 16px;
  border: 1.5px solid #0e004830;
  border-radius: 4px;
  text-align: center;
  background: var(--white);
  transition: border-color .15s ease, background .15s ease;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hard-blue);
}
.contact-form__urgency input { position: absolute; opacity: 0; }
.contact-form__urgency input:checked + span {
  display: block;
  font-weight: 900;
}
.contact-form__urgency label:has(input:checked) {
  border-color: var(--hard-yellow);
  background: #f9c61210;
}

.contact-form__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contact-form__note {
  font-size: 0.85rem;
  color: #0e004890;
  max-width: 50ch;
}
.contact-form__error {
  font-size: 0.9rem;
  font-weight: 600;
  color: #c0262d;
  margin-top: 8px;
}

.contact-form__thanks {
  text-align: center;
  padding: 60px 24px;
}
.contact-form__thanks h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--hard-blue);
  margin-bottom: 16px;
  line-height: 1;
}
.contact-form__thanks p {
  font-size: 1.05rem;
  color: var(--hard-blue);
  max-width: 50ch;
  margin: 0 auto;
}

/* Direct-contact block under the form */
.contact-direct { background: var(--hard-blue); color: var(--soft-white); padding: clamp(60px, 8vw, 100px) 0; }
.contact-direct__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 2rem;
}
@media (max-width: 800px) { .contact-direct__grid { grid-template-columns: 1fr; } }
.contact-direct__item {
  background: #ffffff08;
  border: 1.5px solid #ffffff22;
  border-radius: 4px;
  padding: 28px;
}
.contact-direct__item h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hard-yellow);
  margin-bottom: 12px;
}
.contact-direct__item p {
  font-size: 1.1rem;
  color: var(--soft-white);
  margin-bottom: 6px;
}
.contact-direct__item a {
  color: var(--soft-white);
  border-bottom: 2px solid var(--hard-yellow);
}
.contact-direct__item a:hover { color: var(--hard-yellow); }

/* ============================================================
   SCALE / HEADCOUNT (partnership.html)
   Animated 10x10 dot grid that fills to show we handle 5-100
   people, scaling up and down. Driven by scripts.js.
   ============================================================ */
.scale {
  background: var(--hard-blue);
  color: #fff;
  padding: clamp(64px, 9vw, 120px) 0;
}
.scale__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.scale__copy .section-lead { color: rgba(255, 255, 255, 0.82); }
.scale__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vw, 26px);
}
.scale__readout {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.scale__count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  color: var(--hard-yellow);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;          /* stop reflow as the number changes width */
  text-align: right;
}
.scale__count-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}
.headcount-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: clamp(7px, 1.3vw, 13px);
  width: min(420px, 100%);
}
.headcount-grid__dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid rgba(183, 219, 243, 0.30);
  background: transparent;
  transition: background-color 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
}
.headcount-grid__dot.is-on {
  background: var(--hard-yellow);
  border-color: var(--hard-yellow);
  transform: scale(1.14);
}
.scale__caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 860px) {
  .scale__inner { grid-template-columns: 1fr; }
  .scale__visual { align-items: flex-start; }
  .scale__caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .headcount-grid__dot { transition: none; }
}

/* ============================================================
   MOBILE FIXES (2026-08)
   Spacing/alignment issues found in a mobile review.
   ============================================================ */

/* --- Contact picker becomes a true accordion below 880px ---------------
   The four forms are siblings of the four buttons, so `order` interleaves
   them: button 1, form 1, button 2, form 2 ... That means the open form
   always sits directly under the button you tapped, instead of below all
   four (which made it look like it belonged to "Careers"). */
@media (max-width: 880px) {
  .contact-picker { grid-template-columns: 1fr; gap: 0; }
  .contact-picker > .contact-tabs__tab { margin-top: 10px; border-radius: 4px; }
  .contact-picker > .contact-tabs__tab.is-active { border-radius: 4px 4px 0 0; }
  .contact-picker > .contact-form {
    margin-top: 0;
    border-radius: 0 0 4px 4px;
    border-color: var(--hard-blue);
    padding: 24px 20px;
  }
  /* button i -> order 2i-1, its form -> order 2i */
  .contact-picker > *:nth-child(1) { order: 1; }
  .contact-picker > *:nth-child(5) { order: 2; }
  .contact-picker > *:nth-child(2) { order: 3; }
  .contact-picker > *:nth-child(6) { order: 4; }
  .contact-picker > *:nth-child(3) { order: 5; }
  .contact-picker > *:nth-child(7) { order: 6; }
  .contact-picker > *:nth-child(4) { order: 7; }
  .contact-picker > *:nth-child(8) { order: 8; }
}

/* --- Mobile nav overlay must start BELOW the header ---------------------
   It was hard-coded to top:64px, which assumed no topbar and a 64px header.
   With the topbar the header bottom is ~106px, so the overlay covered the
   logo and the Talk to us button. scripts.js measures the real header
   bottom and sets --nav-bottom. */
@media (max-width: 960px) {
  .nav.is-open .nav__primary { top: var(--nav-bottom, 106px); }
}

/* --- Mobile megamenu link alignment -------------------------------------
   The column <ul> is a grid whose single column sized to max-content and
   then centred, so each group indented by a different amount (Systems 91px,
   Solutions 73px). Stretch the column so every link starts at the same x. */
@media (max-width: 960px) {
  .nav__megamenu-col ul {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
  }
  .nav__megamenu-col ul a { padding-left: 4px; }
  /* breathing room between column groups, which ran together before */
  .nav__megamenu-col + .nav__megamenu-col { margin-top: 22px; }
  .nav__megamenu-col ul { margin-bottom: 2px; }
}

/* --- Package cards swipe instead of stacking ----------------------------
   Below 880px the tier grids become a horizontal snap-scroller. Cards are
   78% wide so the neighbours peek, which is the affordance that tells you
   to swipe. scripts.js centres the starting card (middle of 3, second of
   2). The single-card variant is excluded: nothing to swipe. */
@media (max-width: 880px) {
  .tiers__grid:not(.tiers__grid--one) {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* NB the % resolves against the padded content box, so 100% here plus 9%
       side padding gives a card ~82% of the scroller with a ~9% peek either
       side. (78% + 11% padding rendered only ~61% wide, which read as narrow.) */
    grid-auto-columns: 100%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 9% 18px;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }
  .tiers__grid:not(.tiers__grid--one)::-webkit-scrollbar { display: none; }
  .tiers__grid:not(.tiers__grid--one) > .tier { scroll-snap-align: center; }
  /* the highlighted middle card no longer needs to lift on mobile */
  .tiers__grid:not(.tiers__grid--one) > .tier:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   LEGAL (privacy-policy.html)
   ============================================================ */
.legal { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); background: var(--white); }
.legal__list {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.7rem;
}
.legal__list li { padding-left: 0.2rem; }
.legal__list strong { color: var(--hard-blue); }