@charset "utf-8";
/* ==========================================================================
   LUMERA Health and Energy - onelumera.com
   Design system + site styles. Light mode.
   Sections: 1 Tokens  2 Fonts  3 Reset  4 Layout  5 Typography  6 Components
             7 Sections  8 Footer  9 Utilities  10 Responsive  11 Motion/print
   ========================================================================== */

/* 1 ----------------------------------------------------------- TOKENS ---- */
:root {
  /* Brand spectrum */
  --violet: #4f1aea;
  --indigo: #4430e9;
  --blue: #1f3de8;
  --sky: #2894e4;
  --cyan: #48e8ee;

  /* Ink + text */
  --ink: #0a1230;
  --ink-deep: #0e296e;
  --body: #47536d;
  --muted: #5f6e8c;

  /* Surfaces */
  --white: #ffffff;
  --surface: #f4f7fc;
  --surface-2: #f9fbfe;
  --hero: #f2f6fd;
  --footer: #edf2fa;

  /* Lines */
  --line: #e3e9f3;
  --line-soft: #e2e8f4;
  --line-strong: #d8e0ee;
  --line-hard: #c9d4ea;

  /* Gradients.
     --grad          full signature spectrum, decorative only (bars, glows)
     --grad-cta      compressed so white text stays >= 4.5:1 (WCAG AA) at every
                     stop (the lightest stop, #2e63e6, measures ~4.9:1)
     --grad-text     display-size gradient text (>= 3:1)
     --grad-eyebrow  small gradient text (>= 4.5:1) */
  --grad: linear-gradient(95deg, #4f1aea 0%, #4430e9 22%, #1f3de8 52%, #2894e4 76%, #48e8ee 100%);
  --grad-cta: linear-gradient(95deg, #4f1aea 0%, #4430e9 26%, #1f3de8 62%, #2e63e6 100%);
  --grad-text: linear-gradient(95deg, #4f1aea 0%, #1f3de8 55%, #1c86d8 100%);
  --grad-eyebrow: linear-gradient(95deg, #4f1aea 0%, #1f3de8 70%, #1d5fdf 100%);
  --grad-dot: linear-gradient(95deg, #4f1aea, #1f3de8 55%, #48e8ee);

  /* Type */
  --font-display: "Nexa", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  --fs-display: clamp(2.35rem, 1.45rem + 4.1vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 1.28rem + 2.5vw, 3.1rem);
  --fs-h2-sm: clamp(1.75rem, 1.3rem + 2vw, 2.9rem);
  --fs-h3: clamp(1.18rem, 1.08rem + 0.45vw, 1.34rem);
  --fs-h4: clamp(1.04rem, 1rem + 0.28vw, 1.14rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.34vw, 1.14rem);
  --fs-lead-lg: clamp(1.04rem, 0.98rem + 0.42vw, 1.16rem);
  --fs-base: 1rem;
  --fs-sm: 0.94rem;
  --fs-xs: 0.86rem;
  --fs-2xs: 0.79rem;
  --fs-mono: 0.72rem;
  --fs-mono-xs: 0.67rem;

  /* Space (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4.4vw, 30px);
  --section-y: clamp(68px, 8.5vw, 120px);
  --nav-h: 76px;
  --scroll-offset: 92px;

  /* Radius */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-hairline: 0 1px 2px rgba(16, 24, 48, 0.04);
  --sh-sm: 0 16px 34px -20px rgba(28, 52, 120, 0.3);
  --sh-md: 0 22px 44px -26px rgba(28, 52, 120, 0.4);
  --sh-lg: 0 30px 64px -30px rgba(28, 52, 120, 0.4);
  --sh-cta: 0 12px 36px -12px rgba(31, 61, 232, 0.55);
  --sh-cta-hover: 0 18px 48px -12px rgba(31, 61, 232, 0.6);
  --sh-card-hover: -14px 30px 60px -34px rgba(79, 26, 234, 0.5),
    14px 30px 60px -34px rgba(40, 148, 228, 0.55),
    0 8px 30px -18px rgba(72, 232, 238, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-slow: 0.45s;
}

/* 2 ------------------------------------------------------------ FONTS ---- */
/* Only Nexa Bold and Regular are referenced by the design; Light ships in
   /brand for print use. Declared faces that never match are never fetched. */
@font-face {
  font-family: "Nexa";
  src: url("../fonts/Nexa-Regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("../fonts/Nexa-Bold.otf") format("opentype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--ink-deep);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

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

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(72, 232, 238, 0.4);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Offset in-page anchor jumps so a target is not hidden under the fixed nav */
section,
header,
footer {
  scroll-margin-top: var(--scroll-offset);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: var(--fs-xs);
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus-visible {
  top: var(--sp-4);
  color: var(--white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4 ----------------------------------------------------------- LAYOUT ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--white {
  background: var(--white);
}

.section--soft {
  background: var(--surface);
}

.section--clip {
  overflow: hidden;
}

/* Decorative radial glows. Positioned by modifier classes. */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}

.glow--violet {
  background: radial-gradient(circle, rgba(79, 26, 234, 0.1), transparent 62%);
}

.glow--cyan {
  background: radial-gradient(circle, rgba(72, 232, 238, 0.14), transparent 62%);
}

.glow--sky {
  background: radial-gradient(circle, rgba(40, 148, 228, 0.1), transparent 62%);
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* Thin luminous rule between sections */
.section-rule {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 2;
}

.section-rule::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 148, 228, 0.55) 32%,
    var(--blue) 50%,
    rgba(40, 148, 228, 0.55) 68%,
    transparent
  );
  filter: drop-shadow(0 0 8px rgba(40, 148, 228, 0.35));
}

/* Auto-fitting card grids.
   The min() guard matters: a bare minmax(300px, 1fr) keeps a 300px track even
   when the container is narrower, which overflows below ~330px viewports. */
.grid {
  display: grid;
  gap: var(--sp-5);
}

/* Column counts are explicit rather than auto-fit where the item count is
   fixed, so rows stay balanced instead of leaving orphans (a 6-item grid
   must go 3+3, never 4+2). */

/* 4 items */
.grid--proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* 3 and 5 items: auto-fit is right here, 5 never divides evenly anyway */
.grid--feature {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-5);
}

/* 6 items */
.grid--tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* 8 items */
.grid--tiles-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--mini {
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: var(--sp-4);
}

/* 5 ------------------------------------------------------- TYPOGRAPHY ---- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
}

.eyebrow__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--grad-eyebrow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Smaller mono variant used inside sub-sections */
.eyebrow--mono {
  display: inline-flex;
  gap: 11px;
  margin-bottom: var(--sp-5);
}

.eyebrow--mono::before {
  width: 28px;
  height: 2px;
  border-radius: 2px;
}

.eyebrow--mono .eyebrow__text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--blue);
}

.title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.018em;
}

.lead {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead-lg);
  line-height: 1.62;
  color: var(--body);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.mono-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 6 ------------------------------------------------------- COMPONENTS ---- */
/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding-inline: var(--sp-7);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.006em;
  text-align: center;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base),
    filter 0.25s, border-color 0.25s, color 0.25s, background 0.25s;
}

/* Inline SVG arrow rather than a "→" character: the glyph's vertical position
   varies by font (and shifts noticeably if Inter falls back to a system font),
   which made the arrow look off-centre. An SVG is geometrically centred in its
   own box and flex-centred in the button, so it sits dead-centre regardless of
   font. */
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-base) var(--ease);
}

.btn__arrow svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--primary {
  background: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--sh-cta);
}

.btn--primary:hover {
  color: var(--white);
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: var(--sh-cta-hover);
}

.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 14px 34px -18px rgba(31, 61, 232, 0.35);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* --- Header / navigation --- */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  z-index: 80;
  background: var(--grad);
  will-change: width;
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  border-bottom: 1px solid transparent;
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow),
    box-shadow var(--t-slow);
}

.nav.is-stuck {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 32px -20px rgba(14, 41, 110, 0.22);
}

/* Browsers without backdrop-filter get an opaque bar instead of a washed one */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav.is-stuck {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* While the mobile drawer is open, drop the header's backdrop-filter.
   An element with a backdrop-filter becomes the containing block for its
   position:fixed descendants, and the drawer (.nav__menu) is fixed and lives
   inside the header. With the filter active (i.e. once the page is scrolled and
   .is-stuck applies) the drawer would be clamped to the header's height instead
   of the viewport and appear cut off. The scrim covers the header area while
   open, so the blur is not needed. Higher specificity than .nav.is-stuck, so it
   wins regardless of source order. Keep the bar opaque so it still reads. */
body.is-locked .nav {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--nav-h);
}

.nav__logo {
  flex: none;
  display: block;
  line-height: 0;
}

.nav__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
}

.nav__link {
  color: var(--body);
  font-size: 0.91rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--blue);
}

.nav__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1;
  min-height: 38px;
  padding-inline: var(--sp-5);
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  color: var(--ink);
  border: 1px solid var(--line-hard);
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}

.nav__cta:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* Hamburger (mobile only) */
.nav__toggle {
  display: none;
  /* Above the open drawer panel (z-index 75) so the button, which animates into
     the Close X, stays visible and tappable while the drawer is open. */
  position: relative;
  z-index: 80;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  place-items: center;
  flex: none;
}

.nav__toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.nav__burger {
  display: block;
  width: 18px;
  height: 12px;
  position: relative;
}

.nav__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
}

.nav__burger span:nth-child(1) {
  top: 0;
}
.nav__burger span:nth-child(2) {
  top: 5px;
}
.nav__burger span:nth-child(3) {
  top: 10px;
}

.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.nav__scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 18, 48, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-base) ease;
}

.nav__scrim.is-open {
  opacity: 1;
}

/* --- Cards --- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  box-shadow: var(--sh-hairline);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base),
    border-color var(--t-base);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: var(--line-hard);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}

.card__icon svg {
  width: 26px;
  height: 26px;
}

.card__icon--violet {
  background: rgba(79, 26, 234, 0.09);
}
.card__icon--sky {
  background: rgba(40, 148, 228, 0.1);
}
.card__icon--blue {
  background: rgba(31, 61, 232, 0.08);
}

.card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--muted);
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin-bottom: 7px;
}

.card__text {
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Numbered proof cards */
.proof-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 27px 22px 29px;
  box-shadow: 0 18px 50px -40px rgba(31, 61, 232, 0.45);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base),
    border-color var(--t-base);
}

.proof-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-hard);
}

.proof-card__step {
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  color: var(--blue);
}

.proof-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.proof-card__text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--body);
}

/* Large feature cards with a gradient top bar */
.feature {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 36px 32px 38px;
  box-shadow: var(--sh-hairline);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base),
    border-color var(--t-base), background var(--t-base);
}

.feature::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0.85;
  transition: height var(--t-base) var(--ease), opacity var(--t-base),
    box-shadow var(--t-base), filter var(--t-base);
}

.feature:hover {
  transform: translateY(-6px);
  border-color: rgba(31, 61, 232, 0.35);
  background: linear-gradient(
    135deg,
    rgba(79, 26, 234, 0.035),
    rgba(255, 255, 255, 0) 40%,
    rgba(72, 232, 238, 0.05)
  );
  box-shadow: var(--sh-card-hover);
}

.feature:hover::before {
  height: 5px;
  opacity: 1;
  filter: brightness(1.12) saturate(1.25);
  box-shadow: 0 3px 16px -2px rgba(31, 61, 232, 0.6), 0 0 22px rgba(72, 232, 238, 0.45);
}

.feature__icon {
  width: 92px;
  height: 92px;
  border-radius: var(--r-2xl);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-6);
  background: linear-gradient(
    135deg,
    rgba(79, 26, 234, 0.07),
    rgba(31, 61, 232, 0.05) 50%,
    rgba(72, 232, 238, 0.09)
  );
  border: 1px solid var(--line);
}

.feature__icon svg {
  width: 60px;
  height: 60px;
  shape-rendering: geometricPrecision;
}

.feature__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin-bottom: var(--sp-3);
}

.feature__text {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--body);
}

/* Bullet list with gradient dots */
.dot-list {
  display: grid;
  gap: var(--sp-4);
}

.dot-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
}

.dot-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--grad-dot);
}

/* Check list */
.check-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-block: 6px;
  color: var(--body);
  font-size: 0.93rem;
  line-height: 1.55;
}

.check-list svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 7 --------------------------------------------------------- SECTIONS ---- */
/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(48px, 7vw, 82px)) 0 clamp(60px, 7vw, 84px);
  background: linear-gradient(180deg, var(--hero) 0%, #fbfcfe 62%, var(--white) 100%);
}

.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  background-image: linear-gradient(rgba(14, 41, 110, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 41, 110, 0.055) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 28%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 70% 28%, #000 35%, transparent 78%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 4vw, 48px);
}

.hero__copy {
  flex: 1.1 1 420px;
  max-width: 640px;
  min-width: 0;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.04;
}

.hero__lead {
  margin-top: var(--sp-7);
  max-width: 540px;
  font-size: var(--fs-lead-lg);
  font-weight: 400;
  line-height: 1.62;
  color: var(--body);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: clamp(28px, 3.4vw, 36px);
  flex-wrap: wrap;
}

.hero__art {
  flex: 0.9 1 380px;
  max-width: 760px;
  min-width: 0;
}

.hero__art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Proof header (two-column intro) --- */
.split-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7) clamp(40px, 5vw, 72px);
  align-items: flex-end;
}

.split-head__main {
  flex: 1.05 1 380px;
  min-width: 0;
}

.split-head__aside {
  flex: 0.95 1 340px;
  min-width: 0;
  max-width: 620px;
  margin: 0;
  color: var(--body);
  font-size: 1.06rem;
  line-height: 1.68;
}

.split-head .title {
  max-width: 700px;
}

/* --- Suppliers strip --- */
.suppliers {
  position: relative;
  z-index: 3;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0 30px;
}

.suppliers::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
}

.suppliers__row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
}

.suppliers__label {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-mono);
  color: var(--muted);
}

.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee var(--marquee-duration, 38s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  padding-right: clamp(40px, 6vw, 72px);
  flex: none;
}

.marquee__group img {
  display: block;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s, opacity 0.25s;
}

.marquee__group img:hover {
  filter: none;
  opacity: 1;
}

.logo-siemens {
  height: 26px;
}
.logo-draeger,
.logo-medtron {
  height: 30px;
}
.logo-deye {
  height: 28px;
}
.logo-dalton {
  height: 20px;
}

.suppliers__more {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--body);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.suppliers__more:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(31, 61, 232, 0.06);
}

.suppliers__more svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform var(--t-base) var(--ease);
}

.suppliers__more[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.suppliers__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  /* visibility:hidden removes the collapsed content from the accessibility tree
     so a screen reader does not announce it while the toggle says collapsed.
     Delayed so it flips only after the collapse animation finishes. */
  visibility: hidden;
  transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-base),
    visibility 0s linear var(--t-slow);
}

.suppliers__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows var(--t-slow) var(--ease), opacity var(--t-base),
    visibility 0s;
}

.suppliers__panel > div {
  overflow: hidden;
  min-height: 0;
}

.suppliers__panel-inner {
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.sourced {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.sourced:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}

.sourced::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--grad-dot);
}

.sourced h4 {
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 4px;
}

.sourced small {
  display: block;
  color: var(--body);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* --- kW to MW scale --- */
.scale {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-1) 0 var(--sp-3);
  cursor: crosshair;
}

.scale__unit {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.scale__unit--mw {
  display: inline-block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: flash 2.8s cubic-bezier(0.55, 0, 0.85, 0.4) infinite;
}

.scale__beam {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.scale__pulse {
  position: absolute;
  top: 50%;
  left: -60px;
  width: 60px;
  height: 5px;
  border-radius: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(31, 61, 232, 0), var(--blue) 35%, var(--sky) 70%, var(--cyan));
  filter: drop-shadow(0 0 7px rgba(40, 148, 228, 0.6));
  opacity: 0;
  animation: sweep 2.8s cubic-bezier(0.55, 0, 0.85, 0.4) infinite;
}

.scale__readout {
  position: absolute;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 22px -8px rgba(11, 18, 59, 0.5);
}

/* --- Capabilities table --- */
.caps {
  border-top: 1px solid var(--line-strong);
  margin-top: 10px;
}

.caps__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(64px, 112px) minmax(170px, 300px) 1fr;
  gap: var(--sp-3) clamp(24px, 3.4vw, 44px);
  align-items: baseline;
  padding: 30px 20px 30px 24px;
  border-bottom: 1px solid var(--line-strong);
  transition: background var(--t-base);
}

.caps__row:hover {
  background: linear-gradient(
    90deg,
    rgba(79, 26, 234, 0.07),
    rgba(40, 148, 228, 0.05) 55%,
    rgba(72, 232, 238, 0.02)
  );
}

.caps__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: transform var(--t-base) var(--ease);
}

.caps__row:hover .caps__num {
  transform: translateX(4px);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.caps__num--final {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.caps__tag {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  -webkit-text-fill-color: var(--blue);
  margin-left: 9px;
  vertical-align: 9px;
}

.caps__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.caps__desc {
  color: var(--body);
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 58ch;
}

/* --- Service teams --- */
.teams {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10) clamp(40px, 5vw, 72px);
  margin-top: clamp(52px, 6vw, 76px);
}

.teams__intro {
  flex: 0.92 1 320px;
  min-width: 0;
}

.teams__intro p {
  color: var(--body);
  font-size: 0.97rem;
  line-height: 1.65;
  max-width: 46ch;
}

.teams__intro p + p {
  margin-top: var(--sp-3);
}

.teams__cards {
  flex: 1.15 1 380px;
  min-width: 0;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.team-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 22px 26px 18px;
  background: var(--white);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}

.team-card:hover {
  border-color: rgba(31, 61, 232, 0.45);
  box-shadow: 0 20px 44px -26px rgba(31, 61, 232, 0.35);
  transform: translateY(-3px);
}

.team-card__mark {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.label-mono {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-mono);
  color: var(--blue);
  margin-bottom: var(--sp-2);
  padding-right: 38px;
}

.team-card h4,
.teams__intro h3 {
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
}

.team-card h4 {
  font-size: 1.12rem;
  margin-bottom: var(--sp-3);
}

.teams__intro h3 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin-bottom: var(--sp-3);
}

/* --- Contact --- */
.contact__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 52px) clamp(40px, 5vw, 62px);
}

.contact__intro {
  flex: 1 1 380px;
  min-width: 0;
}

.contact__lead {
  color: var(--body);
  margin-top: var(--sp-5);
  font-size: 1.06rem;
  line-height: 1.62;
  max-width: 440px;
}

.contact__tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
  margin-top: var(--sp-8);
  max-width: 560px;
}

.contact__tag {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--body);
  font-size: var(--fs-2xs);
  line-height: 1.35;
  background: var(--surface-2);
}

.contact__tag strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.004em;
  color: var(--ink);
  margin-bottom: 4px;
}

.contact__details {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-4);
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink);
  font-size: 1.02rem;
}

.contact__detail-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: rgba(31, 61, 232, 0.07);
  display: grid;
  place-items: center;
  flex: none;
}

.contact__detail-icon svg {
  width: 19px;
  height: 19px;
}

/* --- Form --- */
.form {
  flex: 1 1 400px;
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 30px 80px -48px rgba(20, 40, 110, 0.35);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  gap: var(--sp-4);
}

.field {
  min-width: 0;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--body);
}

.field__req {
  color: var(--blue);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  color: var(--ink);
  font-size: 0.96rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.field textarea {
  resize: vertical;
  min-height: 108px;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sky);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(40, 148, 228, 0.16);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #c9314b;
  background: #fef7f8;
}

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #b02a41;
}

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

/* Honeypot: hidden from humans, present for bots */
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.form__note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.8;
}

.form__status {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  line-height: 1.5;
}

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

.form__status--ok {
  background: rgba(31, 61, 232, 0.06);
  border: 1px solid rgba(31, 61, 232, 0.22);
  color: var(--ink);
}

.form__status--error {
  background: #fef7f8;
  border: 1px solid rgba(176, 42, 65, 0.28);
  color: #8f2135;
}

.form__status a {
  color: inherit;
  text-decoration: underline;
}

/* Button spinner. Injected into an inline label span, so it needs an explicit
   inline-block: width/height and the rotation transform do not apply to a plain
   inline box (the same reason .scale__unit--mw sets inline-block). */
.spinner {
  display: inline-block;
  vertical-align: -2px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* 8 ----------------------------------------------------------- FOOTER ---- */
.footer {
  position: relative;
  background: var(--footer);
  color: var(--body);
  padding: var(--sp-16) 0 38px;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-strong);
}

.footer__brand {
  max-width: 340px;
}

.footer__brand img {
  height: 34px;
  width: auto;
  display: block;
}

.footer__brand p {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.footer__cols {
  display: flex;
  gap: clamp(32px, 5vw, 56px);
  flex-wrap: wrap;
}

.footer__col h2 {
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

.footer__col h2 a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
}

.footer__col h2 a::after {
  content: "\2192";
  color: var(--blue);
  font-size: 0.92rem;
  line-height: 1;
  opacity: 0.6;
}

.footer__col h2 a:hover {
  color: var(--blue);
}

.footer__col li + li {
  margin-top: 11px;
}

.footer__col a {
  display: inline-block;
  color: var(--body);
  font-size: 0.92rem;
  transition: color var(--t-fast), transform var(--t-fast);
}

.footer__col a:hover {
  color: var(--blue);
  transform: translateX(2px);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-7);
  flex-wrap: wrap;
  font-size: 0.84rem;
}

.footer__legal {
  max-width: 620px;
  line-height: 1.5;
  color: var(--muted);
}

.footer__legal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__legal a:hover {
  color: var(--blue);
}

.footer__tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-mono);
  background: var(--grad-eyebrow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 9 -------------------------------------------------------- UTILITIES ---- */
/* Reveal elements are hidden ONLY once site.js confirms it is running and will
   animate them (it adds .js-reveal to <html>). If the script is disabled OR
   fails to load, the class is never added and everything stays visible, so a
   flaky network or blocked script can never leave the page blank below the
   hero. site.js reveals each element on scroll by adding .is-in. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease) var(--reveal-delay, 0ms),
    transform 0.8s var(--ease) var(--reveal-delay, 0ms);
}

/* Simple content pages (privacy, 404) */
.page {
  padding: calc(var(--nav-h) + clamp(48px, 7vw, 88px)) 0 clamp(64px, 8vw, 110px);
  background: linear-gradient(180deg, var(--hero) 0%, var(--white) 46%);
}

.prose {
  max-width: 68ch;
  color: var(--body);
}

.prose h1 {
  font-size: var(--fs-h2-sm);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin-bottom: var(--sp-5);
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--sp-10) 0 var(--sp-3);
}

.prose p,
.prose li {
  font-size: 1rem;
  line-height: 1.68;
}

.prose p + p {
  margin-top: var(--sp-4);
}

.prose ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page__actions {
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* 10 ------------------------------------------------------ RESPONSIVE ---- */
@media (max-width: 1180px) {
  .grid--tiles-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .hero__art {
    flex-basis: 340px;
  }
}

@media (max-width: 1000px) {
  .grid--proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Below this a third tile column drops under ~280px and the cards get cramped */
@media (max-width: 940px) {
  .grid--tiles,
  .grid--tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .grid--tiles,
  .grid--tiles-4,
  .grid--proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  :root {
    --nav-h: 68px;
    --scroll-offset: 80px;
  }

  /* Collapse the desktop menu into a slide-in drawer */
  .nav__toggle {
    display: grid;
  }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 86vw);
    z-index: 75;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--nav-h) + 20px) var(--sp-6) var(--sp-8);
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 70px -40px rgba(14, 41, 110, 0.4);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease), visibility var(--t-slow);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__menu.is-open {
    transform: none;
    visibility: visible;
  }

  /* Subpages (privacy, 404, thank-you) carry a single header link and no
     hamburger/drawer script, so their nav must stay inline and visible rather
     than becoming an off-canvas drawer that can never be opened. */
  .nav__menu--inline {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }

  .nav__menu--inline .nav__cta {
    margin-top: 0;
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    border-color: var(--line-hard);
    box-shadow: none;
  }

  .nav__link {
    padding: 16px 2px;
    font-size: 1.05rem;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
  }

  .nav__cta {
    margin-top: var(--sp-6);
    justify-content: center;
    min-height: 48px;
    font-size: 0.95rem;
    background: var(--grad-cta);
    color: var(--white);
    border-color: transparent;
    box-shadow: var(--sh-cta);
  }

  .nav__cta:hover {
    background: var(--grad-cta);
    color: var(--white);
    filter: brightness(1.07);
  }

  .nav__scrim {
    display: block;
    pointer-events: none;
  }

  .nav__scrim.is-open {
    pointer-events: auto;
  }

  .hero__inner {
    gap: var(--sp-10);
  }

  .hero__copy,
  .hero__art {
    flex: 1 1 100%;
    max-width: none;
  }

  .hero__art {
    max-width: 620px;
    margin-inline: auto;
  }

  .split-head {
    align-items: flex-start;
  }
}

/* Below this the third column gets too narrow to read, so the description
   drops under the step name instead of sharing the row. */
@media (max-width: 900px) {
  .caps__row {
    grid-template-columns: minmax(52px, 72px) 1fr;
    gap: var(--sp-2) var(--sp-5);
    padding: 26px 12px 28px 14px;
    align-items: start;
  }

  .caps__num {
    font-size: 1.7rem;
    grid-row: span 2;
    padding-top: 2px;
  }

  .caps__name {
    font-size: 1.14rem;
  }

  .caps__desc {
    grid-column: 2;
    margin-top: 6px;
    max-width: none;
  }

  .caps__tag {
    display: block;
    margin: 6px 0 0;
    vertical-align: baseline;
    font-size: 0.55rem;
  }
}

@media (max-width: 760px) {
  .suppliers__row {
    flex-wrap: wrap;
    row-gap: var(--sp-4);
  }

  .marquee {
    order: 3;
    flex-basis: 100%;
  }

  .suppliers__more {
    margin-left: auto;
  }

  .footer__top {
    gap: var(--sp-8);
  }

  .footer__brand {
    max-width: none;
  }
}

@media (max-width: 620px) {
  /* A full-height logo plus the inline subpage CTA would overflow a narrow
     phone header, so trim both. The homepage header at this width shows a
     hamburger instead of the CTA, and simply gets a slightly smaller logo. */
  .nav__logo img {
    height: 28px;
  }

  .nav__menu--inline .nav__cta {
    padding-inline: 14px;
    font-size: 0.82rem;
    min-height: 36px;
  }

  .feature {
    padding: 28px 24px 30px;
  }

  .feature__icon {
    width: 76px;
    height: 76px;
    margin-bottom: var(--sp-5);
  }

  .feature__icon svg {
    width: 50px;
    height: 50px;
  }

  .card {
    padding: 26px 22px;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .footer__cols {
    gap: var(--sp-8) var(--sp-10);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 18px;
  }

  /* Smallest phones: shrink the logo and CTA further so the subpage header
     still fits at 320px. */
  .nav__logo img {
    height: 24px;
  }

  .nav__menu--inline .nav__cta {
    padding-inline: 12px;
    font-size: 0.8rem;
  }

  .scale {
    gap: var(--sp-4);
  }

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

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

  .caps__num {
    grid-row: auto;
    margin-bottom: 4px;
  }

  .caps__desc {
    grid-column: 1;
  }
}

/* Coarse pointers get no hover-lift (it sticks after tap) */
@media (hover: none) {
  .card:hover,
  .feature:hover,
  .proof-card:hover,
  .sourced:hover,
  .team-card:hover,
  .btn:hover,
  .btn:hover .btn__arrow,
  .footer__col a:hover {
    transform: none;
  }

  /* The capabilities row hover (gradient background, shifted/gradient number)
     would otherwise stay stuck after a tap on touch, the artifact this block
     exists to prevent. */
  .caps__row:hover {
    background: transparent;
  }

  .caps__row:hover .caps__num:not(.caps__num--final) {
    transform: none;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--ink);
  }

  .sourced:hover {
    box-shadow: none;
  }

  .marquee__group img {
    filter: none;
    opacity: 0.72;
  }
}

/* 11 ----------------------------------------------- MOTION AND PRINT ---- */
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.22);
  }
}

@keyframes sweep {
  0% {
    left: -60px;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes flash {
  0%,
  86% {
    filter: none;
    transform: none;
  }
  94% {
    filter: drop-shadow(0 0 14px rgba(53, 198, 234, 0.85));
    transform: scale(1.05);
  }
  100% {
    filter: none;
    transform: none;
  }
}

@keyframes hit {
  0% {
    filter: drop-shadow(0 0 16px rgba(53, 198, 234, 0.9));
    transform: scale(1.07);
  }
  100% {
    filter: none;
    transform: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hero SVG line-draw entrance */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.05s var(--ease) var(--draw-delay, 0s) forwards;
}

.breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: breathe 3.6s ease-in-out infinite;
}

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

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

  .draw {
    stroke-dashoffset: 0;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .scale__pulse {
    opacity: 0;
  }
}

@media print {
  .nav,
  .progress,
  .nav__scrim,
  .marquee,
  .form,
  .hero__art,
  .glow,
  .hero__mesh {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  /* Force all reveal content visible: printing during the brief pre-reveal
     window would otherwise print blank space where unrevealed sections are. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .section {
    padding-block: 24px;
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}