/* ==========================================================================
   Bigmate home page: 2026 redesign
   Imported from Claude Design project "Mining Solutions navbar redesign"
   (Landing Page.dc.html). Vanilla CSS, no framework dependency.
   Prefix: hp-
   ========================================================================== */

/* --------------------------------------------------------------- tokens */

:root {
  --hp-shell: 1302px;
  /* The pinned stage is the page's one full-screen moment, so it runs wider
     than the reading shell. At 1302 it left ~310px of margin either side on a
     1920 display and the whole section read as a small card in a big window. */
  --hp-shell-wide: 1660px;

  --hp-ink: #0d1526;
  --hp-body: #4b5563;
  --hp-muted: #65676b;
  --hp-navy: #041349;
  --hp-deep: #02102f;

  --hp-blue: #076EE8;
  --hp-blue-bright: #059DFF;
  --hp-cyan: #1ACEE1;
  --hp-cyan-soft: #36C6F0;
  --hp-ice: #8fe6f5;
  --hp-violet: #9A9BFF;
  --hp-indigo: #4648cf;

  --hp-good: #1c7a5c;
  /* risk, and only risk: the zone in how it works. Same value as the PAS
     page's --pd-warn; the lighter one holds up over photography. */
  --hp-warn: #b5761c;
  --hp-warn-on-photo: #f2a93b;
  /* darkened brand blue, for 10px uppercase text on a tinted pill: the pure
     brand value falls just under 4.5:1 at that size */
  --hp-blue-deep: #0a5fc4;

  /* chip surface. The solutions pages sit their pill on flat white; these
     sections are already near-white, so the fill is a shade deeper and carries
     a hairline to keep the pill shape legible. */
  --hp-chip-bg: #eef3f8;
  --hp-chip-line: #dfe8f1;

  --hp-line: #e8eef6;
  --hp-line-mid: #dde6f1;
  --hp-surface: #f5f8fa;

  /* One corner radius for every large surface on the page. Pills stay at
     100px, hairline rules at 2-3px. Anything in between was drift. */
  --hp-radius: 18px;

  /* One shadow scale, so depth reads as a rank rather than a per-section
     decision: sm for a surface nested inside another, md for a lifted card,
     lg for a card that floats over the page. */
  --hp-sh-sm: 0 8px 24px rgba(4, 19, 73, 0.10);
  --hp-sh-md: 0 14px 38px rgba(7, 110, 232, 0.16), 0 2px 6px rgba(4, 19, 73, 0.06);
  --hp-sh-lg: 0 24px 60px rgba(4, 19, 73, 0.18);
  --hp-sh-hover: 0 18px 44px rgba(7, 110, 232, 0.20), 0 2px 6px rgba(4, 19, 73, 0.06);

  /* One section rhythm below the hero. */
  --hp-section-y: 96px;

  /* Two more radius tiers, so the whole page runs on three values:
     surface (18px), an element nested inside a surface (10px), pill (100px). */
  --hp-radius-sm: 10px;
  --hp-radius-pill: 100px;

  /* Overlay tier of the shadow scale: nav panels and menus, which float above
     the page rather than sitting on it. */
  --hp-sh-pop: 0 18px 34px rgba(4, 19, 73, 0.16);

  /* ONE micro-label recipe. Every uppercase tracked label on the page is this
     size and this tracking; the xs size exists only for labels inside a pill
     too short to hold 11.5px. Weight is the only variable: 600 on light
     ground, 700 where the label is reversed out over navy or photography. */
  --hp-label: 11.5px;
  --hp-label-xs: 10px;
  --hp-label-track: 0.14em;

  /* Two button heights: page and compact. */
  --hp-btn-h: 52px;
  --hp-btn-h-sm: 44px;
}

/* ---------------------------------------------------------------- reset */

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

body {
  margin: 0;
  background: #fff;
  color: var(--hp-body);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hp-blue); }
p, h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { border: 0; font: inherit; background: transparent; color: inherit; cursor: pointer; }

@font-face {
  font-family: "feather";
  src: url("../fonts/Feather.woff") format("woff"),
       url("../fonts/Feather.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.hp-icon {
  font-family: "feather";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
}

.hp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--hp-navy);
  color: #fff;
  font-weight: 600;
}

.hp-skip:focus { left: 12px; color: #fff; }

/* ------------------------------------------------------------ keyframes */


/* --------------------------------------------------------------- layout */

.hp-page {
  width: 100%;
  /* overflow-x:clip, not overflow:hidden. Hidden makes this a scroll container
     and that stops the machines section from sticking. clip does not. */
  overflow-x: clip;
  background:
    radial-gradient(52% 44% at 0% 22%, rgba(7, 110, 232, 0.07), transparent 62%),
    radial-gradient(46% 52% at 100% 4%, rgba(26, 206, 225, 0.06), transparent 58%),
    #fff;
}

.hp-shell {
  width: 100%;
  max-width: var(--hp-shell);
  margin-inline: auto;
  padding: 0 12px;
}

/* ------------------------------------------------------------ keyframes */

@keyframes hpHeroDrift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes hpTickerScroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 40px)); } }
@keyframes hpTickerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* The chip itself stays put. Only the hue around it swells and recedes. */
@keyframes hpBadgeBreathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28),
                0 0 10px 1px rgba(0, 212, 255, 0.13),
                0 6px 14px rgba(0, 212, 255, 0.15);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.36),
                0 0 18px 4px rgba(0, 212, 255, 0.27),
                0 6px 18px rgba(0, 212, 255, 0.21);
  }
}
@keyframes hpRingPulse { 0% { transform: scale(0.82); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes hpRuleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hpDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }

/* ============================================================ HERO ===== */

/* The hero is the page's dark moment. Everything from the proof section down is
   light, so this is the one place with real tonal separation: measured, every
   other light surface on the page sits between L* 93 and 100, which is not
   enough for the eye to read the hero as its own thing. Here it is L* 5.

   It runs up underneath the nav, which goes transparent over it and returns to
   the solid bar once the hero has passed. The client logos stay inside this
   block, knocked out white: a white band between the navy hero and the navy
   ticker below would read as a mistake rather than an edge. */

.hp-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: calc(-1 * var(--nv-offset, 80px));
  padding-bottom: 56px;
  background: var(--hp-deep);
}

.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 66% at 20% 4%, rgba(7, 110, 232, 0.26) 0%, transparent 62%),
    radial-gradient(66% 56% at 90% 0%, rgba(26, 206, 225, 0.15) 0%, transparent 58%);
}

.hp-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hp-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(143, 230, 245, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 230, 245, 0.07) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}

/* Duotoned into brand blue rather than desaturated: a grey photograph on a blue
   ground reads as two materials, a blue one reads as a single surface. */
.hp-hero__ghost {
  position: absolute;
  right: -90px;
  top: -120px;
  width: 1020px;
  height: 760px;
  opacity: 0.4;
  background: url(../images/home/hero-ghost.jpg) center / cover no-repeat;
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.6) brightness(1.1);
  -webkit-mask-image: radial-gradient(78% 74% at 66% 34%, #000 22%, transparent 76%);
  mask-image: radial-gradient(78% 74% at 66% 34%, #000 22%, transparent 76%);
}

/* Marker at the very top of the page. The nav observes it instead of polling
   scroll position: while any of it is on screen we are at the top, and the
   moment it leaves the bar goes solid. Two pixels rather than one so the
   observer is not deciding on a knife edge. */
.hp-hero__sentinel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.hp-hero__inner { position: relative; padding-top: calc(var(--nv-offset, 80px) + 56px); }

.hp-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 0 72px;
  align-items: end;
}

.hp-hero__eyebrow {
  margin: 0;
  color: var(--hp-ice);
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

/* Heading emphasis by ground: theme gradient on light, ice on dark. The
   gradient opens on navy and would vanish here. The closing CTA adds an
   animated underline to the ice as its own flourish; the hero does not. */
/* Block, so the accent phrase keeps its own line. Left to wrap naturally at
   76px it broke as "See it. Stop it. Keep / producing.", splitting the phrase
   across lines. This is the reason the old headline carried a hard <br>; doing
   it in CSS keeps the markup a plain sentence and lets it reflow on mobile. */
.hp-hero__accent { display: block; color: var(--hp-ice); }

/* 76px, up from 64px. The old headline forced three lines with a hard <br>,
   so the scale was capped by a line count it had chosen for itself. A shorter
   headline breaks naturally in two, which frees the type to go up and still
   ends shorter than before. This also repairs an inverted ladder: the base
   was 64px while the 1280px breakpoint below set 72px. */
.hp-hero__title {
  margin: 18px 0 0;
  color: #fff;
  font-size: 76px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -2.9px;
}

.hp-hero__aside { padding-bottom: 6px; }

.hp-hero__lead {
  margin: 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
}

.hp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* -- the four contexts -- */

.hp-hero__quad {
  display: grid;
  grid-template-columns: 1.62fr 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}

.hp-ctx {
  position: relative;
  display: block;
  height: 308px;
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-navy);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-ctx:hover { color: #fff; transform: translateY(-4px); }

.hp-ctx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-ctx--lead .hp-ctx__img { object-position: 66% 56%; }
.hp-ctx:nth-child(4) .hp-ctx__img { object-position: 72% 50%; }
.hp-ctx:hover .hp-ctx__img { transform: scale(1.04); }

.hp-ctx__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 16, 47, 0) 32%, rgba(2, 16, 47, 0.92) 100%);
}

.hp-ctx__body { position: absolute; left: 20px; right: 20px; bottom: 18px; }

.hp-ctx__fam {
  display: block;
  color: var(--hp-ice);
  font-size: var(--hp-label-xs);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.hp-ctx__name {
  display: block;
  margin-top: 7px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* The body block is anchored to the bottom of the card, so a sub-line that
   wraps to two lines pushes its title up while a one-line neighbour's stays
   put. Reserving two lines here keeps every title on the same baseline
   whatever the copy does - in em so it holds at the lead card's larger size
   and at the tablet size too. */
.hp-ctx__act {
  display: block;
  margin-top: 6px;
  min-height: 2.9em;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.hp-ctx--lead .hp-ctx__name { font-size: 25px; letter-spacing: -0.7px; }
.hp-ctx--lead .hp-ctx__act { font-size: 14px; max-width: 34ch; }

/* -- client logos, lifted above the fold -- */

/* Wraps at every width rather than only below 1099px. The row has a hard
   minimum of about 1200px (label + seven logos at their floor + the chip), so
   a wrap that only starts at the tablet breakpoint leaves 1100-1200px unable
   to fit and unable to reflow - which is exactly iPad landscape. */
.hp-hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 44px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hp-hero__logos-label {
  margin: 0;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--hp-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.hp-hero__logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 18px 30px;
}

/* Equal boxes, not equal heights. These logos range from a 1536x-wide BMA
   wordmark to a near-square Kestrel mark: sizing them all to one height makes
   the wide ones three times the width of the narrow ones and leaves BMA
   illegible at 36px. Each gets the same cell and is fitted inside it. */
.hp-hero__logos-row img {
  flex: 1 1 0;
  min-width: 66px;
  height: 34px;
  object-fit: contain;
  object-position: center;
  /* These marks are a mix of transparent PNGs, an SVG and a JPEG with a solid
     white background, so a plain knockout turns the JPEG ones into white
     blocks. Inverting first makes every background black and every mark light;
     blending with lighten then drops the black against the navy and keeps the
     mark. Works whatever the source artwork does. */
  filter: grayscale(1) invert(1);
  mix-blend-mode: lighten;
  opacity: 0.66;
}

/* The row holds the logos that fit; this carries the rest. */
.hp-hero__logos-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--hp-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(143, 230, 245, 0.3);
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.hp-hero__logos-more span {
  color: var(--hp-ice);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.hp-hero__logos-more:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(143, 230, 245, 0.5);
  color: #fff;
}

/* -- news ticker -- */

.hp-ticker-slot { position: relative; }

.hp-ticker {
  position: relative;
  z-index: 80;
  padding: 16px 0 15px;
  background: linear-gradient(180deg, rgba(3, 20, 56, 0.93) 0%, rgba(5, 28, 72, 0.95) 100%);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

/* Diagonal hatch, carried over from the previous ticker treatment. */
.hp-ticker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 8px,
    rgba(255, 255, 255, 0) 8px,
    rgba(255, 255, 255, 0) 16px
  );
}

.hp-ticker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.9) 50%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* Full-bleed, both sides. The band spans the viewport, so its contents do too
   rather than sitting inside the 1302px shell, which boxed the track into the
   middle and clipped headlines mid-sentence on wide screens. Deliberately not
   aligned to the shell gutter: this strip runs edge to edge. */
.hp-ticker__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  width: 100%;
  min-width: 0;
  padding: 0 clamp(12px, 1vw, 20px);
}

.hp-ticker__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--hp-radius-pill);
  background: linear-gradient(90deg, #059DFF, #00D4FF);
  color: #021022;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28),
              0 0 10px 1px rgba(0, 212, 255, 0.13),
              0 6px 14px rgba(0, 212, 255, 0.15);
  /* slow enough to read as breathing rather than blinking */
  animation: hpBadgeBreathe 3.6s ease-in-out infinite;
}

.hp-ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp-navy);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.9);
  animation: hpTickerPulse 1.8s ease-in-out infinite;
}

.hp-ticker__viewport {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.hp-ticker__list {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Duration is overwritten by home-2026.js so the speed stays constant in
     px/sec however many clones the list needs. This value only applies without
     JS, where the list is the three authored items. */
  animation: hpTickerScroll 30s linear infinite;
}

.hp-ticker__viewport:hover .hp-ticker__list { animation-play-state: paused; }

.hp-ticker__link {
  display: inline-flex;
  align-items: baseline;
  color: #f8fbff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hp-ticker__link:hover { color: var(--hp-ice); }

.hp-ticker__date {
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  color: rgba(168, 205, 255, 0.95);
  text-transform: uppercase;
}

.hp-ticker__date b {
  margin: 0 10px;
  font-weight: inherit;
  letter-spacing: normal;
  color: rgba(0, 212, 255, 0.9);
}

/* ============================================== PROOF / HIERARCHY ======= */

/* Tinted ground, so the lit .hp-panel reads as lit and the section is not a
   third consecutive white band. */

/* The hierarchy runs left to right across the full shell, split by a dashed
   ceiling into what is not available on a working machine and what is. The
   headline sits left of that ceiling because it states the left side's problem;
   the panel sits right of it because it is the answer.

   The two Bigmate levels are one lit panel rather than two cards: white on
   white needed a hairline and a shadow to carry the whole elevation claim, two
   38px shadows 23px apart merged into one block with a seam, and the Bigmate
   mark appeared twice inside 250px. The panel is lit with a brand wash instead
   of raised off a tinted ground, so the page keeps its white.

   The accuracy figure closes the panel rather than sitting in a band beneath
   the section: it is the performance of exactly the two levels above it, and
   across a hairline it read as tacked on. */

.hp-proof {
  /* extra below: the customer-story card overhangs up into this section */
  padding: var(--hp-section-y) 0 calc(var(--hp-section-y) + 56px);
  background: var(--hp-surface);
  border-bottom: 1px solid var(--hp-line);
}

.hp-proof__label {
  margin: 0 0 28px;
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: var(--hp-muted);
}

.hp-proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 44px 1.3fr 1.3fr 0.84fr;
  grid-template-rows: auto auto auto;
  gap: 0 38px;
}

.hp-proof__title {
  grid-column: 1 / 3;
  grid-row: 1;
  margin: 0 0 40px;
  color: var(--hp-ink);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.4px;
  /* the column is fixed by the grid, so without this the last line came down
     to a single word */
  text-wrap: balance;
}

/* THE ONE HEADING-EMPHASIS DEVICE ON LIGHT GROUND is the site's theme
   gradient (.hp-gradient, defined below and shared with chips and figures).
   The navy CTA uses .hp-cta__mark, the same move inverted, because the
   gradient opens on navy and would vanish against that background.
   Two grounds, two variants, no third device. Emphasis keeps the heading's
   own weight: the colour is doing the work. */
.hp-proof__title em,
.hp-section__title em { font-style: normal; font-weight: inherit; }

.hp-proof__ceiling {
  grid-column: 3;
  grid-row: 1 / 4;
  justify-self: center;
  width: 1px;
  margin-bottom: -30px;
  background: repeating-linear-gradient(180deg, #c5cfdc 0 6px, transparent 6px 13px);
}

.hp-level { grid-row: 3; display: flex; flex-direction: column; }
.hp-level--01 { grid-column: 1; }
.hp-level--02 { grid-column: 2; }
.hp-level--05 { grid-column: 6; }

.hp-level__rank {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #a6adba;
  font-variant-numeric: tabular-nums;
}

.hp-level__name {
  margin: 9px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.25px;
  color: #7b8492;
}

.hp-level__note {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #8a93a1;
}

.hp-level__flag {
  align-self: flex-start;
  margin: 14px 0 0;
  font-size: var(--hp-label-xs);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: #8a93a1;
}

.hp-level__flag span {
  border: 1px solid #e2e8f0;
  background: #f7f9fc;
  border-radius: var(--hp-radius-pill);
  padding: 3px 9px;
}

/* PPE is available, just least effective, so it is a shade less recessed than
   the two that are out. */
.hp-level--05 .hp-level__name { color: #5c6472; }
.hp-level--05 .hp-level__note { color: #7b8492; }

/* --- the lit panel: levels 03 and 04, and what they measure ------------- */

.hp-panel {
  grid-column: 4 / 6;
  grid-row: 1 / 4;
  position: relative;
  /* optical, not geometric: lines the panel's top edge up with the headline's
     cap height rather than its line box */
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
  border: 1px solid #cfe1f7;
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(7, 110, 232, 0.16), 0 2px 6px rgba(4, 19, 73, 0.05);
}

.hp-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--hp-blue), var(--hp-cyan));
}

/* cursor spotlight, the treatment the previous cards used, driven by
   data-spotlight in home-2026.js */
.hp-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(7, 110, 232, 0.09), transparent 40%);
}

.hp-panel:hover::after { opacity: 1; }

.hp-panel__head,
.hp-panel__pair,
.hp-panel__stat { position: relative; z-index: 1; }

.hp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 17px;
  border-bottom: 1px solid #dbe7f6;
}

.hp-panel__label {
  margin: 0;
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: var(--hp-blue-deep);
}

/* The mark is cropped out of the nav's own logo-dark.png rather than a new
   asset, so it costs no extra request. The monogram occupies x 45-275,
   y 40-211 of the 1381x300 source, which is where these percentages come
   from. It appears once on the panel, not once per level. */
.hp-panel__mark {
  flex-shrink: 0;
  width: 22px;
  aspect-ratio: 230 / 171;
  background-image: url(../images/logo/logo-dark.png);
  background-repeat: no-repeat;
  background-size: 600.43% 175.44%;
  background-position: 3.91% 31.01%;
}

/* Subgrid so the two level names and the two notes share rows: 03 fits on one
   line and 04 does not, and without it the notes started at different heights. */
.hp-panel__pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto auto auto;
  gap: 0 22px;
}

.hp-panel__half {
  display: grid;
  grid-column: 1;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.hp-panel__half--also { grid-column: 3; }
.hp-panel__rule { grid-column: 2; grid-row: 1 / 4; background: #dbe7f6; }

.hp-panel__half > * { padding-left: 24px; padding-right: 24px; }
.hp-panel__half > :first-child { padding-top: 22px; }
.hp-panel__half > :last-child { padding-bottom: 26px; }

.hp-panel__rank {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--hp-blue);
  font-variant-numeric: tabular-nums;
}

.hp-panel__half--also .hp-panel__rank { color: var(--hp-cyan); }

.hp-panel__name {
  margin: 9px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: var(--hp-ink);
}

.hp-panel__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hp-body);
}

.hp-panel__stat {
  margin-top: auto;
  padding: 24px 24px 26px;
  border-top: 1px solid #dbe7f6;
}

.hp-proof__stat-value {
  margin: 0;
  font-size: 84px;
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -4.2px;
  font-variant-numeric: tabular-nums;
}

.hp-proof__stat-unit { font-size: 42px; letter-spacing: -1.8px; }

.hp-proof__stat-label {
  margin: 16px 0 0;
  color: var(--hp-ink);
  font-size: 16px;
  font-weight: 600;
}

.hp-proof__stat-sub {
  margin: 6px 0 0;
  color: var(--hp-muted);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hp-proof__stat-sub [data-count-to] { color: var(--hp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The rail is the row's baseline and the effectiveness axis: pale under the
   two levels that are out, navy to cyan across the three in play. Availability
   is on a different channel (the ceiling and the flags), so neither encoding
   has to compromise for the other. */
.hp-proof__rail {
  margin-top: 30px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--hp-line-mid) 0%, var(--hp-line-mid) 28%,
    var(--hp-navy) 37%, var(--hp-blue) 67%, var(--hp-cyan) 89%, var(--hp-line-mid) 100%);
}

.hp-proof__axes { display: flex; justify-content: space-between; margin-top: 13px; }

.hp-proof__axis {
  margin: 0;
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: #a6adba;
}

/* brand-blue emphasis on the load-bearing phrases, so the argument is
   skimmable without reading the whole paragraph */

.hp-hl {
  font-style: normal;
  color: var(--hp-blue);
  font-weight: 600;
}

/* The site's .theme-gradient, and the page's single accent-colour device. It
   carries highlighted words in section headings and chip text. Nothing else on
   the page is gradient-filled. */
.hp-gradient {
  background: linear-gradient(95deg,
    var(--hp-navy) 15%,
    var(--hp-cyan) 45%,
    var(--hp-indigo) 75%,
    var(--hp-blue) 100%) 98% / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ====================================================== HOW IT WORKS ==== */

/* The core every system shares, as a pyramid: Act is a dark block across the
   full width, held up by Sense and Understand. The list stays in 01 to 03
   order and the grid lifts Act to row one, so phones get the natural order
   back just by dropping the placement.

   Lower-page grounds alternate: proof (tint) / how (white) / cases (tint) /
   CTA (dark). That run used to be five light sections with a 2% step between
   them. */

.hp-how {
  /* No top padding: the customer-story card opens this section and overhangs
     up into the hierarchy of control. White, because that section is tinted
     and a bridge between two identical grounds has nothing to bridge. */
  padding: 0 0 var(--hp-section-y);
}

.hp-how__core {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 40px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.hp-how__act { grid-column: 1 / -1; grid-row: 1; }
.hp-how__pillar--sense { grid-column: 1; grid-row: 2; }
.hp-how__pillar--understand { grid-column: 2; grid-row: 2; }

.hp-how__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--hp-radius-sm);
  overflow: hidden;
  background: var(--hp-deep);
}

.hp-how__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

.hp-how__label { display: flex; align-items: baseline; gap: 12px; }

.hp-how__rank {
  margin: 0;
  color: var(--hp-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.hp-how__name {
  margin: 0;
  color: var(--hp-ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.45px;
}

.hp-how__body {
  margin: 10px 0 0;
  color: var(--hp-body);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- 03, the top block ---------------------------------------------- */

.hp-how__act {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 20px;
  border-radius: var(--hp-radius);
  background: var(--hp-deep);
  box-shadow: 0 30px 70px rgba(4, 19, 73, 0.30);
}

.hp-how__act-copy { padding: 4px 18px 4px 0; }
.hp-how__act .hp-how__rank { color: var(--hp-ice); }
.hp-how__act .hp-how__name { color: #fff; }

.hp-how__lede {
  margin: 14px 0 0;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.6px;
  text-wrap: balance;
}

.hp-how__act .hp-how__body { margin-top: 12px; color: rgba(255, 255, 255, 0.72); }

.hp-how__responses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.hp-how__responses li {
  position: relative;
  padding-left: 25px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
  line-height: 1.45;
}

.hp-how__responses li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--hp-cyan);
}

/* --- 01 and 02, the pillars ----------------------------------------- */

.hp-how__pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 22px;
  border: 1px solid var(--hp-line-mid);
  border-radius: var(--hp-radius);
  background: #fff;
  box-shadow: 0 16px 40px rgba(4, 19, 73, 0.08);
}

.hp-how__pillar .hp-how__label { margin: 20px 8px 0; }
.hp-how__pillar .hp-how__body { margin-left: 8px; margin-right: 8px; }
.hp-how__key + .hp-how__label { margin-top: 18px; }

/* the dotted pillar up to the block it holds */
.hp-how__pillar::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 44px;
  margin-left: -1px;
  background: radial-gradient(circle, var(--hp-blue) 0.9px, transparent 1.3px) 0 3px / 2px 8px repeat-y;
}

/* --- Understand: marks drawn over the plate ------------------------- */

.hp-how__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hp-how__marks * { vector-effect: non-scaling-stroke; }

.hp-how__halo { fill: none; stroke: rgba(2, 16, 47, 0.55); stroke-width: 3; stroke-linecap: round; }
.hp-how__halo--bracket { stroke-width: 3.5; stroke-linecap: butt; }
.hp-how__bracket { fill: none; stroke: #fff; stroke-width: 1.75; }
.hp-how__path { fill: none; stroke: #fff; stroke-width: 1.5; }
.hp-how__dot-halo { fill: rgba(2, 16, 47, 0.55); }
.hp-how__dot { fill: #fff; }
.hp-how__edge { fill: none; stroke: var(--hp-ice); stroke-width: 1.5; stroke-dasharray: 7 5; stroke-linecap: round; }
.hp-how__zone-fill { fill: var(--hp-warn-on-photo); fill-opacity: 0.12; }
.hp-how__zone { fill: none; stroke: var(--hp-warn-on-photo); stroke-width: 2; }

.hp-how__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: var(--hp-radius-pill);
  background: rgba(2, 16, 47, 0.62);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hp-how__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 8px 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--hp-line);
  list-style: none;
}

.hp-how__key li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hp-body);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}

.hp-how__key svg { flex-shrink: 0; color: var(--hp-ink); }
.hp-how__key-edge { fill: none; stroke: var(--hp-blue); stroke-width: 1.8; stroke-dasharray: 4 3; stroke-linecap: round; }
.hp-how__key-zone { fill: var(--hp-warn); fill-opacity: 0.14; stroke: var(--hp-warn); stroke-width: 1.6; }

/* --- proof: merged-in support rows and the two-up stat --------------- */

/* The stat used to read "99.99986% detection accuracy across 2,689,870
   minutes", which reads as a per-minute rate. One headline figure now, with
   the dataset behind it stated in the sub line. Two display figures side by
   side also did not fit the panel: both overflowed their column. */
.hp-proof__stat-inline {
  color: var(--hp-blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ====================================================== CASE STUDIES ==== */

/* tinted, so it steps away from the white how it works above; the ways band
   below carries the same tint on to the CTA */
.hp-cases {
  padding: var(--hp-section-y) 0;
  background: var(--hp-surface);
}

/* Heading and link share a baseline. */
.hp-cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}

.hp-cases__title {
  margin: 0;
  color: var(--hp-ink);
  /* Below the 48px section h2s: the quote above is the display element here. */
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.7px;
}

.hp-section__head { max-width: 620px; }

/* title left, supporting line and link right, sharing a baseline */
.hp-section__head--row {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 60px;
  align-items: end;
}

.hp-section__head--row .hp-section__title { max-width: 16ch; margin-top: 20px; }

.hp-section__aside { padding-bottom: 6px; }

.hp-section__aside p {
  margin: 0;
  max-width: 38ch;
  color: var(--hp-body);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.hp-section__aside .hp-textlink { margin-top: 16px; }

/* Chip lifted from .section-title .subtitle on the solutions pages, in its
   .radius-rounded variant. Text inside carries .hp-gradient, exactly as the
   inner .theme-gradient span does there. */
.hp-chip {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 15px;
  border-radius: var(--hp-radius-pill);
  background: var(--hp-chip-bg);
  border: 1px solid var(--hp-chip-line);
  box-shadow: 0 1px 2px rgba(4, 19, 73, 0.04);
  color: var(--hp-navy);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 18px;
}


.hp-section__title {
  margin: 0;
  color: var(--hp-ink);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.4px;
}

.hp-cases__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
  margin-top: 50px;
}

.hp-cases__stack { display: grid; gap: 26px; }

.hp-case {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-navy);
  box-shadow: var(--hp-sh-lg);
  color: #fff;
}

.hp-case:hover { color: #fff; }

.hp-case--lead { min-height: 420px; padding: 38px; }
.hp-case--small { min-height: 196px; padding: 28px; }

.hp-case__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-case:hover .hp-case__img { transform: scale(1.04); }

.hp-case__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 12, 38, 0.24) 0%, rgba(2, 12, 38, 0.72) 52%, rgba(2, 12, 38, 0.94) 100%);
}

.hp-case--small .hp-case__scrim {
  background: linear-gradient(180deg, rgba(2, 12, 38, 0.2) 0%, rgba(2, 12, 38, 0.74) 54%, rgba(2, 12, 38, 0.94) 100%);
}

.hp-case__body { position: relative; }

.hp-case__meta {
  margin: 0 0 8px;
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: var(--hp-cyan);
}

.hp-case__title {
  margin: 0;
  max-width: 26ch;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.hp-case__cta {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

.hp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hp-blue);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- customer voice: the quote leads the section ---------------------- */

/* The quote does the job a section heading usually does, at display size, with
   the video and the award beside it as a quieter credential column. It is a
   blockquote, not a heading: it outranks the h2 visually, the h2 still names
   the section, and the outline stays honest. */

/* The bridge: lifted up into the tinted section above so the two meet on an
   object. Same device as the ways card over the CTA, deliberately reused. */
.hp-voice {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  margin-top: -92px;
  margin-bottom: 52px;
  padding: 38px 40px;
  border-radius: var(--hp-radius);
  background: #fff;
  box-shadow: var(--hp-sh-lg);
}

.hp-voice__quote { margin: 0; }

.hp-voice__quote blockquote { margin: 0; }

.hp-voice__quote blockquote p {
  margin: 0;
  max-width: 21ch;
  color: var(--hp-ink);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.8px;
  text-wrap: pretty;
}

.hp-voice__quote figcaption {
  margin-top: 22px;
  color: var(--hp-body);
  font-size: 14.5px;
  line-height: 1.5;
}

.hp-voice__quote figcaption strong { color: var(--hp-ink); font-weight: 700; }

.hp-voice__media { position: relative; }

.hp-voice__play-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-navy);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: var(--hp-sh-lg);
}

.hp-voice__play-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-voice__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 34px rgba(4, 19, 73, 0.34);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-voice__play::after {
  content: "";
  margin-left: 3px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--hp-navy);
}

.hp-voice__play-btn:hover .hp-voice__play { transform: scale(1.08); }

/* The button's own display:block outranks the UA rule for the hidden
   attribute, so without this the poster stays put and the player opens
   underneath it. */
.hp-voice__play-btn[hidden] { display: none; }

.hp-voice__play-btn:focus-visible {
  outline: 2px solid var(--hp-blue-bright);
  outline-offset: 3px;
}

/* Swapped in by home-2026.js on click, and shown by the <noscript> block. */
.hp-voice__video {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--hp-radius);
  background: var(--hp-navy);
  box-shadow: var(--hp-sh-lg);
}

.hp-voice__video.is-on { display: block; }

/* --- award credential ------------------------------------------------- */

.hp-award {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hp-line-mid);
  text-decoration: none;
}

/* The logo is a light JPG with no alpha, so it keeps a chip of its own rather
   than bleeding into the page ground. */
.hp-award__chip {
  flex: 0 0 auto;
  display: block;
  padding: 8px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hp-line-mid);
  box-shadow: 0 4px 14px rgba(4, 19, 73, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.hp-award__chip img {
  display: block;
  width: 104px;
  height: auto;
}

.hp-award:hover .hp-award__chip {
  transform: translateY(-2px);
  border-color: var(--hp-blue);
}

.hp-award__text {
  color: var(--hp-body);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 28ch;
}

.hp-award__text strong {
  display: block;
  color: var(--hp-ink);
  font-weight: 700;
}

.hp-award:hover .hp-award__text strong { color: var(--hp-blue); }

/* ============================================================= WAYS ===== */

/* shares the case studies' tint, so the card lifts off one ground into the CTA */
.hp-ways { padding: 40px 0 0; background: var(--hp-surface); }

/* The card sits above the dark CTA and overhangs it, so the two sections read
   as one closing move. z-index keeps it over the dark block. */
.hp-ways__card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) repeat(3, minmax(0, 1fr));
  gap: 0 36px;
  align-items: start;
  margin-bottom: -70px;
  padding: 38px 40px;
  border-radius: var(--hp-radius);
  background: #fff;
  box-shadow: var(--hp-sh-lg);
}

/* Explicit, rather than relying on being the first implicit grid child. */
.hp-ways__head { grid-column: 1; }

.hp-ways__kicker {
  margin: 0;
  color: var(--hp-muted);
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.hp-ways__title {
  margin: 10px 0 0;
  color: var(--hp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.hp-way {
  display: block;
  padding-top: 4px;
}

.hp-way__num {
  display: block;
  color: var(--hp-blue);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.hp-way:hover .hp-way__num,
.hp-way:hover .hp-way__title { color: var(--hp-blue-deep); }

.hp-way__title {
  margin: 8px 0 0;
  color: var(--hp-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.hp-way__body {
  margin: 6px 0 0;
  color: var(--hp-body);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hp-way__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--hp-blue);
  font-size: 13.5px;
  font-weight: 600;
}

.hp-way__arrow {
  font-size: 15px;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-way:hover .hp-way__arrow { transform: translateX(5px); }

/* ============================================================== CTA ===== */

.hp-cta {
  position: relative;
  overflow: hidden;
  background: var(--hp-navy);
}

.hp-cta__bg { position: absolute; inset: 0; }

.hp-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 42%;
  transform-origin: 54% 46%;
  animation: hpHeroDrift 30s ease-in-out infinite alternate;
}

.hp-cta__scrim,
.hp-cta__glow { position: absolute; inset: 0; }

.hp-cta__scrim {
  background: linear-gradient(104deg, rgba(2, 12, 38, 0.94) 0%, rgba(2, 12, 38, 0.8) 42%, rgba(2, 12, 38, 0.44) 74%, rgba(2, 12, 38, 0.3) 100%);
}

.hp-cta__glow {
  background: radial-gradient(62% 120% at 82% 4%, rgba(26, 206, 225, 0.2), transparent 62%);
}

.hp-cta__inner {
  position: relative;
  width: 100%;
  max-width: var(--hp-shell);
  margin-inline: auto;
  padding: 128px 12px;
}

.hp-cta__body { max-width: 760px; }

.hp-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}

.hp-cta__pulse {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
}

.hp-cta__pulse span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hp-ice);
}

.hp-cta__pulse span + span {
  background: transparent;
  border: 1.5px solid var(--hp-ice);
  animation: hpRingPulse 2.6s ease-out infinite;
}

.hp-cta__eyebrow-text {
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
  color: #a5eefb;
}

.hp-cta__title {
  position: relative;
  margin: 0 0 22px;
  max-width: 18ch;
  color: #fff;
  font-size: 72px;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -2.8px;
  text-shadow: 0 2px 44px rgba(2, 12, 38, 0.45);
}

.hp-cta__mark {
  position: relative;
  display: inline-block;
  color: var(--hp-ice);
}

.hp-cta__mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #36C6F0 0%, #059DFF 52%, #9A9BFF 100%);
  transform-origin: left center;
  animation: hpRuleIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hp-cta__lead {
  position: relative;
  margin: 0 0 34px;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: 19.5px;
  line-height: 1.58;
  letter-spacing: -0.1px;
  text-wrap: pretty;
}

.hp-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.hp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--hp-btn-h);
  padding: 0 28px;
  border-radius: var(--hp-radius-pill);
  background: #fff;
  color: var(--hp-navy);
  font-size: 16px;
  font-weight: 600;
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(2, 12, 38, 0.24);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}

.hp-btn-primary:hover {
  color: var(--hp-navy);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(2, 12, 38, 0.42);
}

.hp-btn-primary .hp-icon {
  font-size: 16px;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-btn-primary:hover .hp-icon { transform: translateX(5px); }

.hp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--hp-btn-h);
  padding: 0 26px;
  border: 1px solid rgba(143, 230, 245, 0.4);
  border-radius: var(--hp-radius-pill);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.3s;
}

.hp-btn-ghost:hover { background: rgba(143, 230, 245, 0.14); color: #fff; }

/* Both buttons sit on dark ground everywhere they appear now: the hero and the
   closing CTA. A light-ground pair lived here while the hero was tinted - it is
   in git history if a light section ever needs it back. */

/* The footer lives in site-footer-2026.css, shared with every page. */

/* ====================================================== RESPONSIVE ====== */

@media (max-width: 1280px) {
  .hp-hero__title { font-size: 72px; letter-spacing: -2.8px; }
  .hp-cta__title { font-size: 60px; letter-spacing: -2.2px; }
}

@media (max-width: 1099px) {
  :root { --hp-section-y: 72px; }

  .hp-hero__title { font-size: 50px; letter-spacing: -1.8px; }
  .hp-hero__head { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .hp-hero__aside { padding-bottom: 0; }
  .hp-hero__lead { max-width: 54ch; }

  /* Lead card across the top, the other three as a row beneath it. Two-up left
     the fourth card orphaned on a row of its own with an empty cell beside it. */
  .hp-hero__quad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hp-ctx { height: 240px; }
  .hp-ctx--lead { grid-column: 1 / -1; height: 300px; }
  .hp-ctx--lead .hp-ctx__name { font-size: 23px; }
  .hp-ctx__act { font-size: 12.5px; }

  .hp-hero__logos-row { justify-content: flex-start; }

  /* Five across does not survive tablet. The row folds to 01 and 02 side by
     side, then the panel full width, then PPE: the 01 to 05 reading order is
     preserved and the panel keeps its two columns. The ceiling has nothing
     left to divide, so it goes. */
  .hp-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
  .hp-proof__title { grid-column: 1 / -1; font-size: 38px; max-width: 22ch; margin-bottom: 32px; }
  .hp-proof__ceiling { display: none; }
  .hp-level--01 { grid-column: 1; grid-row: 3; }
  .hp-level--02 { grid-column: 2; grid-row: 3; }
  .hp-panel { grid-column: 1 / -1; grid-row: 4; margin: 34px 0 0; }
  .hp-level--05 { grid-column: 1 / -1; grid-row: 5; margin-top: 30px; }
  .hp-proof__stat-value { font-size: 64px; letter-spacing: -3.2px; }
  .hp-proof__stat-unit { font-size: 34px; }

  /* Image over copy, still bleeding to both edges rather than boxed in. */

  .hp-section__head--row { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .hp-ways__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .hp-ways__head { grid-column: 1 / -1; }
  .hp-section__head--row .hp-section__title { max-width: 22ch; }

  /* the top block stacks its image over its copy; the pillars hold */
  .hp-how__act { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 16px; }
  .hp-how__act-copy { padding: 0 8px 8px; }
  .hp-how__lede { font-size: 24px; }
  .hp-how__core { gap: 36px 24px; }
  .hp-how__pillar::before { height: 36px; }

  .hp-proof__sup-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-proof__s-body { max-width: 62ch; }

  .hp-voice { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: -72px; padding: 32px; }
  .hp-voice__quote blockquote p { font-size: 26px; letter-spacing: -0.5px; max-width: 34ch; }
  .hp-cases__head { flex-direction: column; align-items: flex-start; gap: 18px; }


  .hp-cases__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-section__title { font-size: 38px; }


  .hp-ways { padding: 24px 0 72px; }
  .hp-ways__card { margin-bottom: 0; }

  .hp-cta__inner { padding: 96px 12px; }
  .hp-cta__title { font-size: 46px; letter-spacing: -1.6px; }
  .hp-cta__lead { font-size: 17px; }
}

/* Phone, not small tablet. The divide sits at 700 rather than the usual 767
   because iPad mini portrait is 744 wide: at 767 it took the phone layout
   and stacked the four context cards one per row, each 720px wide, on a
   tablet with room for three across. Nothing common lives between 700 and
   767 except small tablets, and iPhone SE landscape at 667 stays a phone
   by width and is covered by the short-landscape rules regardless. */
@media (max-width: 700px) {
  :root { --hp-section-y: 56px; }

  /* One column in reading order, 01 to 03. The pillars have nothing to hold
     up here, so they go. */
  .hp-how__core { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 34px; }
  .hp-how__act,
  .hp-how__pillar--sense,
  .hp-how__pillar--understand { grid-column: auto; grid-row: auto; }
  .hp-how__pillar::before { content: none; }
  .hp-how__pillar { padding: 12px 12px 20px; }
  .hp-how__act { padding: 12px; }
  .hp-how__lede { font-size: 22px; letter-spacing: -0.4px; }
  .hp-how__responses { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hp-how__key { gap: 8px 14px; }
  .hp-how__key li { font-size: 12.5px; }

  .hp-hero__title { font-size: 38px; letter-spacing: -1.3px; }
  /* Must still clear the bar: the hero is pulled up underneath it by a
     negative margin, so a bare 40px puts the eyebrow behind the logo. */
  .hp-hero__inner { padding-top: calc(var(--nv-offset, 80px) + 28px); }
  .hp-hero__ghost { width: 760px; height: 560px; right: -180px; top: -90px; opacity: 0.3; }

  .hp-hero__quad { grid-template-columns: minmax(0, 1fr); }
  .hp-ctx, .hp-ctx--lead { height: 236px; }
  .hp-ctx--lead .hp-ctx__name { font-size: 21px; }
  .hp-hero__actions .hp-btn-primary,
  .hp-hero__actions .hp-btn-ghost { flex: 1 1 auto; justify-content: center; }
  .hp-hero__logos-row img { height: 22px; }

  .hp-voice { margin-top: -52px; margin-bottom: 40px; padding: 26px 22px; gap: 24px; }
  .hp-voice__quote blockquote p { font-size: 22px; letter-spacing: -0.3px; max-width: none; }
  .hp-voice__quote figcaption { margin-top: 18px; }
  .hp-cases__title { font-size: 24px; letter-spacing: -0.4px; }
  .hp-award { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hp-award__text { max-width: none; }

  .hp-ticker__inner { gap: 12px; }
  .hp-ticker__badge { font-size: 11px; padding: 5px 10px; letter-spacing: 0.14em; }
  .hp-ticker__link { font-size: 15px; }
  /* One column: every level stacked, the panel's two halves stacked with it. */
  .hp-proof__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-proof__title { font-size: 30px; margin-bottom: 26px; }
  .hp-level--01, .hp-level--02 { grid-column: 1; }
  .hp-level--01 { grid-row: 3; }
  .hp-level--02 { grid-row: 4; margin-top: 26px; }
  .hp-panel { grid-column: 1; grid-row: 5; margin-top: 30px; }
  .hp-level--05 { grid-column: 1; grid-row: 6; margin-top: 26px; }
  .hp-panel__pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hp-panel__half { grid-column: 1; grid-row: auto; grid-template-rows: none; }
  .hp-panel__half--also { grid-column: 1; border-top: 1px solid #dbe7f6; }
  .hp-panel__half > :first-child { padding-top: 20px; }
  .hp-panel__half > :last-child { padding-bottom: 22px; }
  .hp-panel__rule { display: none; }
  .hp-proof__stat-value { font-size: 52px; letter-spacing: -2.6px; }
  .hp-proof__stat-unit { font-size: 28px; }
  .hp-proof__axes { gap: 12px; }


  .hp-section__title { font-size: 30px; }
  .hp-case--lead { min-height: 320px; padding: 26px; }
  .hp-case__title { font-size: 20px; }

  .hp-ways__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 30px 24px; }
  .hp-ways__head { margin-bottom: 4px; }
  /* Reads as a list at this width, so the ways get rules between them rather
     than the 24px indent the old rule gave them. */
  .hp-way { min-height: 0; padding: 22px 0 0; margin-top: 22px; border-top: 1px solid var(--hp-line); }
  .hp-way__body { max-width: none; }

  .hp-cta__inner { padding: 72px 12px; }
  .hp-cta__title { font-size: 34px; letter-spacing: -1px; max-width: none; }
}

/* Landscape phone. Wide enough to take the tablet layout, far too short for
   it: at 852x393 the hero delivered the headline and nothing else - the CTA
   sat at 436px and the cards at 480px, both below a 393px fold. Compacting the
   type and the cards, and putting the head back into two columns, brings the
   claim, the CTA and all four contexts into the first screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hp-hero__inner { padding-top: calc(var(--nv-offset, 80px) + 22px); }

  .hp-hero__head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0 36px;
    align-items: end;
  }

  .hp-hero__title { font-size: 32px; letter-spacing: -1.1px; }
  .hp-hero__aside { padding-bottom: 0; }
  .hp-hero__lead { font-size: 15px; max-width: 34ch; }
  .hp-hero__actions { margin-top: 16px; }
  .hp-hero__actions { gap: 10px; }

  .hp-hero__actions .hp-btn-primary,
  .hp-hero__actions .hp-btn-ghost {
    height: 42px;
    padding: 0 16px;
    font-size: 14.5px;
    gap: 7px;
    flex: 0 0 auto;
  }

  /* All four contexts stay on screen; the descriptions are unreadable at this
     card size, so they go and the family and name carry it. */
  .hp-hero__quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
  }

  /* The tablet breakpoint makes the lead card span the row; at four across it
     has to go back to one column of its own. */
  .hp-ctx--lead { grid-column: auto; }

  .hp-ctx,
  .hp-ctx--lead { height: 148px; }
  .hp-ctx__act { display: none; }
  .hp-ctx__body { left: 14px; right: 14px; bottom: 12px; }
  .hp-ctx__name,
  .hp-ctx--lead .hp-ctx__name { font-size: 16px; letter-spacing: -0.3px; }

  .hp-hero__logos { margin-top: 20px; padding-top: 16px; }
  .hp-hero { padding-bottom: 28px; }
}

/* The button pair on one line costs ~52px less height than stacked, which on a
   393px viewport is the difference between seeing the cards and not. Only
   above 700px though: at 667 the aside column cannot hold both and the ghost
   button runs 3px off the edge. */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 700px) {
  .hp-hero__actions { flex-wrap: nowrap; }
}

/* The two short-viewport blocks that used to sit here stepped the step type
   down on laptops, because the pinned column was clipped to 100vh and a tall
   panel lost its CTA off the bottom. The section is no longer pinned, so a
   short viewport just scrolls; both blocks are gone, and with them the rule
   that hid the annotation bodies on short laptops. */

@media (prefers-reduced-motion: reduce) {
  .hp-cta__bg img,
  .hp-ticker__list,
  .hp-ticker__dot,
  .hp-ticker__badge,
  .hp-cta__pulse span + span { animation: none !important; }

  .hp-cta__mark::after { animation: none !important; }

  *, *::before, *::after { transition-duration: 0.01ms !important; }
}