/* Goodier Labs B2B Landing — Design Tokens + Layer Reset
 * Tokens extracted directly from goodierlabs.com production CSS, May 2026.
 * Stack: vanilla CSS + Google Fonts. No framework. No build step.
 */

:root {
  /* Brand color palette (verbatim from live site) */
  --c-ink:     #00112E;
  --c-navy:    #081C43;
  --c-blue:    #325598;
  --c-blue-2:  #445C8B;
  --c-aqua:    #76C8DA;
  --c-aqua-light: #92D5E5;
  --c-teal:    #4097AA;
  --c-slate:   #889DAA;
  --c-sage:    #ACC991;
  --c-sky:     #B8C9E1;
  --c-mist:    #C9DDFF;
  --c-fog:     #D9E0EA;
  --c-warm:    #F4B061;
  --c-paper:   #F7F8FB;
  --c-white:   #FFFFFF;

  /* Type stack — Goodier's actual Adobe Typekit fonts (kit rfn8zzf) */
  --ff-display: "ff-good-web-pro-wide", "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --ff-display-extd: "ff-good-web-pro-extended", "ff-good-web-pro-wide", "Inter", sans-serif;
  --ff-sans:    "aktiv-grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif:   "fairplex-wide", "Fraunces", Georgia, "Times New Roman", serif;

  /* Modular type scale (12-144) — matches live site */
  --fs-12:  0.75rem;
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;
  --fs-15:  0.9375rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-21:  1.3125rem;
  --fs-24:  1.5rem;
  --fs-30:  1.875rem;
  --fs-36:  2.25rem;
  --fs-48:  3rem;
  --fs-60:  3.75rem;
  --fs-72:  4.5rem;
  --fs-84:  5.25rem;
  --fs-108: 6.75rem;
  --fs-144: 9rem;

  /* Spacing scale */
  --sp-12:  0.75rem;
  --sp-18:  1.125rem;
  --sp-24:  1.5rem;
  --sp-36:  2.25rem;
  --sp-54:  3.375rem;
  --sp-72:  4.5rem;
  --sp-108: 6.75rem;
  --sp-144: 9rem;

  --nav-h: 84px;
  --max-w: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.25rem);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0, 17, 46, 0.06), 0 1px 1px rgba(0, 17, 46, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 17, 46, 0.08), 0 2px 6px rgba(0, 17, 46, 0.04);
  --shadow-lg: 0 24px 60px rgba(0, 17, 46, 0.18), 0 4px 12px rgba(0, 17, 46, 0.08);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body { margin: 0; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25em; }
:focus-visible { outline: 2px solid var(--c-aqua); outline-offset: 3px; border-radius: 2px; }

/* Base body */
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  font-feature-settings: "ss01", "cv11";
}

/* Default heading color in light contexts (overridable via .section--dark) */
main h1, main h2, main h3, main h4,
.cta h2, .cta h3, .ladder h2, .stats h2, .compare h2, .cap-card h4 {
  color: var(--c-ink);
}
.hero h1, .hero h2, .hero h3, .hero h4,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4,
.heritage h1, .heritage h2, .heritage h3, .heritage h4,
.problem h1, .problem h2, .problem h3, .problem h4,
.innovation h1, .innovation h2, .innovation h3, .innovation h4,
.trust h1, .trust h2, .trust h3, .trust h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5 {
  color: var(--c-white);
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: inherit; /* dark sections inherit white from .section--dark/.hero */
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6vw, var(--fs-84)); }
h2 { font-size: clamp(2rem, 4.5vw, var(--fs-60)); }
h3 { font-size: clamp(1.5rem, 2.4vw, var(--fs-30)); }
h4 { font-size: var(--fs-21); letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
strong { font-weight: 600; }

.eyebrow {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-18);
  display: inline-block;
}

.serif-flag { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-variation-settings: "slnt" -8; }

/* Layout helpers */
.container { width: min(100% - var(--gutter) * 2, var(--max-w)); margin-inline: auto; }
.section { padding-block: clamp(var(--sp-72), 10vw, var(--sp-144)); }
.section--tight { padding-block: clamp(var(--sp-54), 7vw, var(--sp-108)); }
.section--dark { background: var(--c-navy); color: var(--c-fog); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-white); }
.section--dark .eyebrow { color: var(--c-aqua); }
.section--ink { background: var(--c-ink); color: var(--c-fog); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--c-white); }
.section--ink .eyebrow { color: var(--c-aqua); }
.section--paper { background: var(--c-paper); }

.grid { display: grid; gap: var(--sp-36); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 1.6rem;
  font-weight: 600;
  font-size: var(--fs-15);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--c-aqua); color: var(--c-ink); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--c-aqua-light); box-shadow: var(--shadow-lg); }
.btn--ghost { background: transparent; color: currentColor; border: 1px solid currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,0.08); }
.btn--ghost-light { color: var(--c-white); border-color: rgba(255, 255, 255, 0.5); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--c-white); }
.btn--solid-navy { background: var(--c-navy); color: var(--c-white); }
.btn--solid-navy:hover { background: var(--c-blue); }

.btn-arrow { transition: transform 220ms var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"].is-in { transition-delay: 80ms; }
[data-reveal-delay="2"].is-in { transition-delay: 160ms; }
[data-reveal-delay="3"].is-in { transition-delay: 240ms; }
[data-reveal-delay="4"].is-in { transition-delay: 320ms; }
[data-reveal-delay="5"].is-in { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* === SITE NAV === */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 17, 46, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184, 201, 225, 0.12);
}
.site-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: var(--sp-36);
}
.site-nav__logo { width: 130px; }
.site-nav__logo svg { width: 100%; height: auto; fill: var(--c-white); }
.site-nav__links { display: none; gap: var(--sp-24); align-items: center; color: var(--c-fog); font-size: var(--fs-14); letter-spacing: 0.04em; }
@media (min-width: 880px) { .site-nav__links { display: flex; } }
.site-nav__links a { transition: color 220ms var(--ease-out); }
.site-nav__links a:hover { color: var(--c-aqua); }
.site-nav__cta { padding: 0.75rem 1.1rem; font-size: var(--fs-14); }
.site-nav__toggle { display: inline-flex; padding: 0.6rem; color: var(--c-fog); border-radius: var(--radius-sm); }
.site-nav__toggle:hover { color: var(--c-aqua); }
@media (min-width: 880px) { .site-nav__toggle { display: none; } }
.site-nav__links.is-open {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-12);
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--c-ink); padding: var(--sp-24);
  border-bottom: 1px solid rgba(184, 201, 225, 0.12);
}

/* === HERO === */
.hero {
  position: relative;
  min-height: clamp(720px, 100svh, 880px);
  background: var(--c-ink);
  color: var(--c-white);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("./assets/breakthroughs-hero.jpg");
  background-size: cover; background-position: center;
  filter: saturate(1.05);
}
@media (prefers-reduced-motion: reduce) { .hero__bg { display: block !important; } }
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 28% 35%, rgba(50, 85, 152, 0.45), transparent 70%),
    linear-gradient(180deg, rgba(0, 17, 46, 0.78) 0%, rgba(8, 28, 67, 0.92) 100%);
}
.hero__inner { padding-block: var(--sp-144) var(--sp-108); display: grid; gap: var(--sp-36); max-width: 60rem; }
.hero__eyebrow {
  font-size: var(--fs-13); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-aqua); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--c-aqua); }
.hero__title {
  font-family: var(--ff-display-extd); /* match goodierlabs.com H1: extended, not wide */
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: 0.06em; /* positive tracking, like wordmark — matches their 8.394px at 84px */
  font-weight: 300;
  text-transform: none;
}
.hero__title em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--c-aqua); letter-spacing: -0.01em; }
.hero__subhead { font-size: clamp(1.05rem, 1.6vw, 1.3125rem); color: var(--c-fog); max-width: 38rem; line-height: 1.55; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-18); margin-top: var(--sp-12); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-24); margin-top: var(--sp-36); font-size: var(--fs-13); color: var(--c-sky); letter-spacing: 0.04em; }
.hero__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-aqua); }

/* === TRUST STRIP === */
.trust {
  background: var(--c-ink);
  color: var(--c-fog);
  padding: var(--sp-54) 0;
  border-top: 1px solid rgba(184, 201, 225, 0.08);
}
.trust__lead { text-align: center; font-size: var(--fs-13); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-sky); margin-bottom: var(--sp-54); font-family: var(--ff-sans); font-weight: 500; }
.trust__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--sp-36) var(--sp-24); align-items: center; justify-items: center; }
.trust__row img { max-width: 100px; max-height: 100px; width: auto; height: auto; opacity: 0.72; filter: brightness(0.95) contrast(1.05); transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out); }
.trust__row img:hover { opacity: 1; filter: none; }

/* === LADDER === */
.ladder { background: var(--c-paper); }
.ladder__intro { max-width: 44rem; margin-bottom: var(--sp-72); }
.ladder__steps { display: grid; gap: 8px; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .ladder__steps { grid-template-columns: repeat(4, 1fr); }
}
.ladder__step {
  position: relative; padding: var(--sp-24); border-radius: var(--radius-md);
  color: var(--c-white);
  min-height: 200px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 320ms var(--ease-out);
}
.ladder__step:hover { transform: translateY(-4px); }
.ladder__step h4 { color: var(--c-white); font-size: var(--fs-21); margin-bottom: 0.4rem; }
.ladder__step p { color: rgba(255,255,255,0.85); font-size: var(--fs-14); margin: 0; line-height: 1.5; }

@media (min-width: 880px) {
  .ladder__step:nth-child(1) { min-height: 200px; }
  .ladder__step:nth-child(2) { min-height: 240px; }
  .ladder__step:nth-child(3) { min-height: 280px; }
  .ladder__step:nth-child(4) { min-height: 320px; }
  .ladder__step:nth-child(5) { min-height: 360px; }
}

.ladder__step--1 { background: var(--c-sage); color: var(--c-ink); }
.ladder__step--1 h4 { color: var(--c-ink); }
.ladder__step--1 p { color: rgba(0,17,46,0.78); }
.ladder__step--2 { background: var(--c-teal); }
.ladder__step--3 { background: var(--c-blue-2); }
.ladder__step--4 {
  background: var(--c-blue);
  box-shadow: 0 0 0 1px var(--c-warm), var(--shadow-lg);
  position: relative; z-index: 2;
}
.ladder__step--4::after {
  content: "Goodier"; position: absolute; top: -14px; right: var(--sp-18);
  background: var(--c-warm); color: var(--c-ink);
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
@media (min-width: 880px) {
  .ladder__step--4 { transform: translateY(-12px); }
  .ladder__step--4:hover { transform: translateY(-20px); }
}
.ladder__step--5 { background: var(--c-ink); border: 1px solid rgba(255,255,255,0.08); }

.ladder__step__tag { display: inline-block; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.5rem; }

/* === PROBLEM === */
.problem { background: var(--c-ink); color: var(--c-white); }
.problem__title { font-size: clamp(2rem, 5vw, var(--fs-72)); max-width: 24em; margin-bottom: var(--sp-54); }
.problem__title em { font-family: var(--ff-serif); font-style: italic; color: var(--c-aqua); font-weight: 300; font-variation-settings: "slnt" -10; }
.problem__bullets { display: grid; gap: var(--sp-36); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.problem__bullet { padding-top: var(--sp-24); border-top: 1px solid rgba(184, 201, 225, 0.18); }
.problem__bullet h4 { color: var(--c-white); margin-bottom: 0.5rem; font-size: var(--fs-21); }
.problem__bullet p { color: var(--c-sky); font-size: var(--fs-15); }

/* === THREE WAYS IN === */
.three-ways { background: var(--c-paper); }
.ways { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; }
@media (min-width: 880px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-md);
  padding: var(--sp-36);
  display: flex; flex-direction: column;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
  position: relative;
}
.way:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--c-blue); }
.way__num {
  font-family: var(--ff-serif); font-style: italic; font-size: var(--fs-15);
  color: var(--c-blue); letter-spacing: 0.04em;
  margin-bottom: var(--sp-18);
}
.way h3 { color: var(--c-ink); font-size: var(--fs-30); margin-bottom: var(--sp-18); letter-spacing: -0.02em; }
.way p { color: var(--c-blue-2); font-size: var(--fs-15); line-height: 1.6; margin-bottom: var(--sp-24); }
.way ul { list-style: none; padding: 0; margin: 0 0 var(--sp-36); flex-grow: 1; }
.way li { padding: 0.5rem 0 0.5rem 1.2rem; border-top: 1px solid var(--c-fog); position: relative; font-size: var(--fs-14); color: var(--c-ink); }
.way li::before { content: "+"; position: absolute; left: 0; top: 0.5rem; color: var(--c-blue); font-weight: 700; }
.way__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-14); font-weight: 600; color: var(--c-blue);
  letter-spacing: 0.02em; padding: var(--sp-18) 0 var(--sp-12); margin-top: var(--sp-12);
  border-top: 1px solid var(--c-fog);
  min-height: 44px;
  transition: color 220ms var(--ease-out), gap 220ms var(--ease-out);
}
.way__cta:hover { color: var(--c-ink); gap: 0.6rem; }
.way--featured {
  background: linear-gradient(160deg, var(--c-navy), var(--c-ink));
  border-color: var(--c-blue);
  color: var(--c-fog);
}
.way--featured h3 { color: var(--c-white); }
.way--featured p { color: var(--c-sky); }
.way--featured li { color: var(--c-fog); border-color: rgba(184,201,225,0.2); }
.way--featured li::before { color: var(--c-aqua); }
.way--featured .way__cta { color: var(--c-aqua); border-color: rgba(184,201,225,0.2); }
.way--featured .way__cta:hover { color: var(--c-white); }
/* "Most common" chip removed per Goodier feedback (read as commodity sign-up). The dark-themed card still emphasizes "Build" visually. */

/* === STAT WALL === */
.stats { background: var(--c-paper); position: relative; }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-fog); border: 1px solid var(--c-fog); }
@media (min-width: 720px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--sp-54) var(--sp-24); background: var(--c-paper); display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.stat__num { font-family: var(--ff-display); font-size: clamp(3.25rem, 6.5vw, 6.5rem); font-weight: 700; line-height: 0.95; color: var(--c-blue); letter-spacing: -0.035em; }
.stat__num sup { font-size: 0.5em; vertical-align: super; color: var(--c-blue-2); }
.stat__label { font-size: var(--fs-13); color: var(--c-slate); margin-top: 0.6rem; letter-spacing: 0.06em; line-height: 1.4; }

/* === LAB STRIP === */
.lab-strip { background: var(--c-ink); padding: 0; }
.lab-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--c-ink); }
@media (min-width: 720px) { .lab-strip__grid { grid-template-columns: repeat(5, 1fr); } }
.lab-strip__grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.lab-strip__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); filter: brightness(0.9) saturate(1.1); }
.lab-strip__grid figure:hover img { transform: scale(1.06); filter: brightness(1) saturate(1.2); }
.lab-strip__caption { padding: var(--sp-36) 0; text-align: center; }
.lab-strip__caption p { color: var(--c-sky); font-size: var(--fs-15); letter-spacing: 0.02em; max-width: 38rem; margin: 0 auto; }

/* === COMPARISON === */
.compare { }
.compare__table { width: 100%; border-collapse: collapse; margin-top: var(--sp-54); }
.compare__table th, .compare__table td { padding: var(--sp-18) var(--sp-24); text-align: left; border-bottom: 1px solid var(--c-fog); }
.compare__table th { font-size: var(--fs-13); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-slate); font-weight: 600; padding-block: var(--sp-12); }
.compare__table th:nth-child(2) { color: var(--c-slate); }
.compare__table th:nth-child(3) { color: var(--c-blue); }
.compare__table tbody tr:hover { background: var(--c-paper); }
.compare__capability { font-size: var(--fs-15); font-weight: 500; color: var(--c-ink); }
.compare__cell { width: 9rem; text-align: center; }
.compare__cell svg { display: inline-block; width: 22px; height: 22px; }
.compare__no { color: var(--c-slate); }
.compare__yes { color: var(--c-teal); }

/* === PROOF GALLERY === */
.proof-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--sp-24); align-items: end; }
.proof-gallery figure { margin: 0; text-align: center; }
.proof-gallery img {
  width: 100%; height: 220px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 10px 24px rgba(0,17,46,0.10));
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.proof-gallery figure:hover img { transform: translateY(-6px); filter: drop-shadow(0 18px 36px rgba(0,17,46,0.18)); }
.proof-gallery figcaption {
  margin-top: var(--sp-12);
  font-size: var(--fs-13); letter-spacing: 0.06em; color: var(--c-blue-2);
  font-family: var(--ff-sans); font-weight: 500;
}

/* === PROOF MARQUEE (auto-scrolling product carousel) === */
.proof-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.proof-marquee__track {
  display: flex; align-items: flex-end; gap: var(--sp-36);
  width: max-content;
  animation: proof-scroll 60s linear infinite;
}
.proof-marquee:hover .proof-marquee__track,
.proof-marquee:focus-within .proof-marquee__track { animation-play-state: paused; }
.proof-marquee figure { margin: 0; text-align: center; flex: 0 0 auto; width: 10rem; }
.proof-marquee img {
  width: 100%; height: 220px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 10px 24px rgba(0,17,46,0.10));
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.proof-marquee figure:hover img { transform: translateY(-6px); filter: drop-shadow(0 18px 36px rgba(0,17,46,0.18)); }
.proof-marquee figcaption {
  margin-top: var(--sp-12);
  font-size: var(--fs-13); letter-spacing: 0.06em; color: var(--c-blue-2);
  font-family: var(--ff-sans); font-weight: 500;
}
@keyframes proof-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .proof-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .proof-marquee__track { animation: none; }
}

/* === LAB TOUR REEL === */
.reel-block { display: grid; gap: var(--sp-54); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .reel-block { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-72); } }
.reel-block__media { display: flex; justify-content: center; }
.reel-block__media iframe {
  width: 100%; max-width: 400px; height: 640px;
  border: 0; border-radius: var(--radius-md);
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
}

/* === CAPABILITIES === */
.cap-grid { display: grid; gap: var(--sp-24); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cap-card {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-md);
  padding: var(--sp-36) var(--sp-24);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-blue); }
.cap-card__icon { width: 64px; height: 64px; margin-bottom: var(--sp-24); }
.cap-card__icon img { width: 100%; height: 100%; }
.cap-card h4 { color: var(--c-ink); font-size: var(--fs-18); margin-bottom: 0.5rem; }
.cap-card p { font-size: var(--fs-14); color: var(--c-slate); margin: 0 0 var(--sp-18); line-height: 1.55; }
.cap-card ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-13); color: var(--c-blue-2); }
.cap-card li { padding: 0.3rem 0; border-top: 1px solid var(--c-fog); }
.cap-card li:first-child { border-top: 0; }

/* === INNOVATION === */
.innovation { background: var(--c-navy); color: var(--c-fog); }
.innovation__pillars { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; margin-top: var(--sp-54); }
@media (min-width: 720px) { .innovation__pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .innovation__pillars { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); } }
.pillar {
  padding: var(--sp-24);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(184,201,225,0.1);
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 1024px) {
  .pillar { grid-column: span 2; }
  .pillar--hero { grid-column: span 4; grid-row: span 2; padding: var(--sp-54); background: linear-gradient(135deg, rgba(118,200,218,0.14), rgba(50,85,152,0.16)); border-color: rgba(118,200,218,0.3); }
  .pillar--hero .pillar__num { font-size: var(--fs-72); }
  .pillar--hero h4 { font-size: var(--fs-30); margin-top: var(--sp-24); }
  .pillar--hero p { font-size: var(--fs-18); line-height: 1.6; max-width: 32rem; }
}
.pillar:hover { background: rgba(118, 200, 218, 0.08); border-color: var(--c-aqua); }
.pillar__num { font-family: var(--ff-serif); font-size: var(--fs-30); color: var(--c-aqua); font-style: italic; font-variation-settings: "slnt" -10; line-height: 1; }
.pillar h4 { color: var(--c-white); margin: var(--sp-12) 0 0.4rem; font-size: var(--fs-18); }
.pillar p { color: var(--c-sky); font-size: var(--fs-14); margin: 0; line-height: 1.55; }

/* === INNOVATION SPLIT (field note + video) === */
.innovation__split { display: grid; gap: var(--sp-36); grid-template-columns: 1fr; margin-top: var(--sp-72); align-items: stretch; }
@media (min-width: 880px) { .innovation__split { grid-template-columns: 1fr 1fr; } }
.innovation__video { margin: 0; }
.innovation__video video { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: var(--radius-md); display: block; }
.innovation__video figcaption { margin-top: var(--sp-12); font-size: var(--fs-13); color: var(--c-sky); letter-spacing: 0.04em; }

/* === GLOBAL SCOUTING === */
.scouting { display: grid; gap: var(--sp-72); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .scouting { grid-template-columns: 1.1fr 1fr; } }
.scouting__list { list-style: none; padding: 0; margin: var(--sp-36) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); font-size: var(--fs-15); color: var(--c-ink); font-weight: 500; }
.scouting__list li { padding: 0.6rem 0 0.6rem 1.1rem; border-top: 1px solid var(--c-fog); position: relative; }
.scouting__list li::before { content: "+"; position: absolute; left: 0; top: 0.6rem; color: var(--c-blue); font-weight: 700; }
.scouting__visual { background: var(--c-white); padding: var(--sp-36); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.scouting__visual img { width: 100%; height: auto; }

/* === HERITAGE === */
.heritage { background: var(--c-ink); color: var(--c-white); position: relative; overflow: hidden; }
.heritage__head { max-width: 46rem; margin-bottom: var(--sp-72); }
.heritage__layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-72); align-items: start; }
@media (min-width: 980px) { .heritage__layout { grid-template-columns: 0.85fr 1fr; gap: var(--sp-108); } }
.heritage__archive { margin: 0; position: relative; align-self: start; }
.heritage__archive img {
  width: 100%; height: auto; border-radius: var(--radius-md);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid rgba(184,201,225,0.18);
  filter: saturate(1.05) contrast(1.05);
}
.heritage__archive figcaption {
  margin-top: var(--sp-18); font-size: var(--fs-13); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-aqua); font-family: var(--ff-sans); font-weight: 500;
}
.timeline { list-style: none; padding: 0; margin: 0; counter-reset: tl; }
.timeline__entry {
  display: grid; grid-template-columns: 6rem 1fr; gap: var(--sp-36);
  padding: var(--sp-24) 0; border-top: 1px solid rgba(184,201,225,0.18);
  align-items: baseline;
}
.timeline__entry:last-child { border-bottom: 1px solid rgba(184,201,225,0.18); }
.timeline__year {
  font-family: var(--ff-display); font-size: var(--fs-30); font-weight: 700;
  color: var(--c-aqua); letter-spacing: -0.02em; line-height: 1;
}
.timeline__copy { color: var(--c-fog); font-size: var(--fs-18); line-height: 1.5; }
.timeline__entry--now { background: rgba(118,200,218,0.06); margin: 0 calc(var(--sp-18) * -1); padding: var(--sp-24) var(--sp-18); border-radius: var(--radius-md); border-top-color: var(--c-aqua); }
.timeline__entry--now .timeline__year { color: var(--c-white); }
.heritage__quote {
  margin: var(--sp-108) auto 0;
  max-width: 46rem; padding: var(--sp-36) 0; border-top: 1px solid rgba(184,201,225,0.18);
  text-align: center;
}
.heritage__quote p {
  font-family: var(--ff-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, var(--fs-36)); color: var(--c-aqua);
  line-height: 1.3; margin: 0 0 var(--sp-18);
}
.heritage__quote cite { display: block; font-size: var(--fs-15); color: var(--c-sky); font-style: normal; line-height: 1.6; }

/* === CTA === */
.cta { background: var(--c-paper); position: relative; }
.cta__inner { display: grid; gap: var(--sp-72); grid-template-columns: 1fr; }
@media (min-width: 980px) { .cta__inner { grid-template-columns: 1fr 1fr; } }
.cta__copy h2 { font-size: clamp(2rem, 4vw, var(--fs-60)); }
.cta__copy h2 em { font-family: var(--ff-serif); font-style: italic; font-weight: 300; color: var(--c-blue); font-variation-settings: "slnt" -10; }

/* === DIRECT CONTACT (Prefer the human path) === */
.direct-contact {
  margin-top: var(--sp-36);
  padding: var(--sp-36);
  background: linear-gradient(160deg, var(--c-paper-2, #F4F6FA), var(--c-white));
  border: 1px solid var(--c-fog);
  border-left: 3px solid var(--c-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 17, 46, 0.04));
}
.direct-contact__eyebrow {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-12);
}
.direct-contact__head {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, var(--fs-32));
  color: var(--c-ink);
  line-height: 1.2;
  margin: 0 0 var(--sp-18);
  font-variation-settings: "slnt" -10;
}
.direct-contact__body {
  font-size: var(--fs-15);
  color: var(--c-blue-2);
  line-height: 1.6;
  margin: 0 0 var(--sp-24);
}
.direct-contact__list {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-24);
}
@media (min-width: 480px) {
  .direct-contact__list { grid-template-columns: 1fr 1fr; }
}
.direct-contact__phone,
.direct-contact__email {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-md);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.direct-contact__phone:hover,
.direct-contact__email:hover {
  border-color: var(--c-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(50, 85, 152, 0.10);
}
.direct-contact__phone svg,
.direct-contact__email svg {
  color: var(--c-blue);
  flex-shrink: 0;
}
.direct-contact__phone span,
.direct-contact__email span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.direct-contact__phone small,
.direct-contact__email small {
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-slate);
  font-weight: 600;
}
.direct-contact__phone strong,
.direct-contact__email strong {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-ink);
  word-break: break-word;
}
.direct-contact__expect {
  padding-top: var(--sp-18);
  border-top: 1px solid var(--c-fog);
}
.direct-contact__expect__label {
  display: block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--sp-12);
}
.direct-contact__steps {
  list-style: none;
  counter-reset: dc-step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.direct-contact__steps li {
  counter-increment: dc-step;
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-14);
  color: var(--c-blue-2);
  line-height: 1.55;
}
.direct-contact__steps li::before {
  content: counter(dc-step);
  position: absolute;
  left: 0; top: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: var(--fs-12);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.direct-contact__steps strong { color: var(--c-ink); font-weight: 600; }

.form { background: var(--c-white); padding: var(--sp-36); border-radius: var(--radius-lg); border: 1px solid var(--c-fog); box-shadow: var(--shadow-md); }
.form__row { display: grid; gap: var(--sp-18); margin-bottom: var(--sp-18); }
.form__row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form__row--2 { grid-template-columns: 1fr; } }
.form__field { display: grid; gap: 0.4rem; }
.form__field > span { font-size: var(--fs-13); font-weight: 600; color: var(--c-blue-2); letter-spacing: 0.04em; }
.form__field input, .form__field select, .form__field textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-fog); border-radius: var(--radius-md);
  background: var(--c-white); color: var(--c-ink);
  font-size: var(--fs-15); transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(50, 85, 152, 0.18);
}
.form__field textarea { resize: vertical; min-height: 6rem; }
.form__submit { width: 100%; justify-content: center; padding: 1.1rem; font-size: var(--fs-15); }
.form__reassure { font-size: var(--fs-13); color: var(--c-slate); text-align: center; margin-top: var(--sp-18); }
.form__success { display: none; padding: var(--sp-36); text-align: center; color: var(--c-teal); font-weight: 500; }
.form.is-success .form__fields { display: none; }
.form.is-success .form__success { display: block; }
.form__honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.req { color: var(--c-warm); margin-left: 2px; }
.form__field textarea { font-family: var(--ff-sans); }
.form__field textarea::placeholder, .form__field input::placeholder {
  color: var(--c-slate); opacity: 0.7; font-weight: 400;
}
.form__field input:placeholder-shown, .form__field textarea:placeholder-shown {
  background: #FBFCFE; /* very subtly differentiate empty fields from filled ones */
}

/* Checkbox grid for category interest */
.form__checks { border: 0; padding: 0; margin: 0 0 var(--sp-18); }
.form__checks legend {
  font-size: var(--fs-13); font-weight: 600; color: var(--c-blue-2);
  letter-spacing: 0.04em; padding: 0; margin-bottom: 0.6rem;
}
.form__checks__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
@media (min-width: 600px) { .form__checks__grid { grid-template-columns: 1fr 1fr; } }
.form__check {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 0.9rem; border: 1px solid var(--c-fog); border-radius: var(--radius-md);
  background: var(--c-white); cursor: pointer;
  font-size: var(--fs-14); color: var(--c-ink);
  min-height: 48px;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.form__check:hover { border-color: var(--c-blue); background: #F7FAFE; }
.form__check input { accent-color: var(--c-blue); margin: 0; flex-shrink: 0; cursor: pointer; width: 18px; height: 18px; }
.form__check:has(input:checked) { border-color: var(--c-blue); background: rgba(50, 85, 152, 0.06); }
.form__check span { line-height: 1.3; }

.form__consent { display: flex; gap: 0.7rem; align-items: flex-start; padding: var(--sp-18) 0; font-size: var(--fs-13); color: var(--c-slate); line-height: 1.55; }
.form__consent input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--c-blue); width: 16px; height: 16px; cursor: pointer; }
.form__consent a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }
.form__consent a:hover { color: var(--c-ink); }
.no-wrap { white-space: nowrap; }
.form__alt { display: flex; align-items: center; gap: var(--sp-18); margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--c-fog); }
.form__alt__or { font-size: var(--fs-13); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-slate); font-weight: 600; }
.form__alt__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-15); font-weight: 600; color: var(--c-blue); transition: color 220ms var(--ease-out); }
.form__alt__phone:hover { color: var(--c-ink); }

/* === STICKY LEAD-GEN BAR === */
.lead-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--c-ink); color: var(--c-white);
  border-top: 1px solid rgba(118,200,218,0.18);
  transform: translateY(110%); transition: transform 380ms var(--ease-out);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
}
.lead-bar.is-visible { transform: translateY(0); }
.lead-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-18); padding-block: var(--sp-12); justify-content: space-between; }
.lead-bar__msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-bar__msg strong { font-size: var(--fs-15); font-weight: 700; letter-spacing: 0.01em; }
.lead-bar__msg span { font-size: var(--fs-13); color: var(--c-sky); }
.lead-bar__ctas { display: flex; gap: var(--sp-12); align-items: center; }
.lead-bar__phone { font-size: var(--fs-14); font-weight: 600; color: var(--c-aqua); padding: 0.6rem 0.4rem; }
.lead-bar__phone:hover { color: var(--c-white); }
@media (max-width: 600px) {
  .lead-bar__inner { flex-direction: column; align-items: stretch; gap: var(--sp-12); }
  .lead-bar__ctas { justify-content: space-between; }
  .lead-bar__msg span { display: none; }
}

/* === FOOTER === */
.site-footer { background: var(--c-ink); color: var(--c-sky); padding: var(--sp-72) 0 var(--sp-36); }
.site-footer__inner { display: grid; gap: var(--sp-54); grid-template-columns: 1fr; }
@media (min-width: 800px) { .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer__logo { width: 220px; margin-bottom: var(--sp-24); }
.site-footer__logo svg { width: 100%; height: auto; fill: var(--c-white); }
.site-footer__tag { font-size: var(--fs-15); letter-spacing: 0.04em; color: var(--c-aqua); margin-top: var(--sp-12); }
.site-footer h5 { color: var(--c-white); font-size: var(--fs-13); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 var(--sp-18); font-family: var(--ff-sans); font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; font-size: var(--fs-15); }
.site-footer li { padding: 0.5rem 0; }
.site-footer li a, .site-footer li:not(:has(a)) {
  display: inline-flex; align-items: center; min-height: 32px;
}
@media (max-width: 880px) {
  .site-footer li { padding: 0.7rem 0; }
  .site-footer li a { min-height: 44px; padding-block: 0.4rem; }
}
.site-footer a { transition: color 220ms var(--ease-out); }
.site-footer a:hover { color: var(--c-aqua); }
.site-footer__base { margin-top: var(--sp-54); padding-top: var(--sp-24); border-top: 1px solid rgba(184, 201, 225, 0.12); display: flex; flex-wrap: wrap; gap: var(--sp-24); justify-content: space-between; font-size: var(--fs-13); color: var(--c-slate); }

/* utility */
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }