/* ==========================================================================
   Neutral Ground — marketing site
   Editorial-industrial: warm paper, brand blue, copper accent.
   Single stylesheet. Tokens first, then layout, then components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand palette -----------------------------------------------------
     Base is Blue #1F2E3A (client, 20 Jul). Accents: Copper #A96F42,
     Sage #6C8279, Brass #B58A48.

     Contrast governs which of these can carry text. On paper (#F6F2EA):
       Blue   12.45  AAA  — text, dark sections, the workhorse
       Copper  3.66  large text / fills only
       Sage    3.61  large text / fills only
       Brass   2.75  fails at every text size — decorative only

     So Copper is darkened for small text on paper and lightened for text on
     the Blue sections. Never set small text in --copper, --sage, or --brass.
     ------------------------------------------------------------------------ */

  --blue: #1f2e3a;
  --copper: #a96f42;
  --sage: #6c8279;
  --brass: #b58a48;

  /* Ink scale, built on Blue. */
  --ink: var(--blue);
  --ink-deep: #1a2630; /* footer — one step down from Blue */
  --ink-soft: #3f5d76; /* body copy; 6.19 on paper, 5.17 on sage — AA */

  /* Warm paper range — warmer than the old concrete, per "establish warmth". */
  --paper: #faf8f3;
  --paper-2: #f2eee6;
  --paper-3: #ddd4c3;

  /* Sage tinted up until Blue text clears AAA on it (10.40). Third section tone. */
  --sage-tint: #dae0de;

  /* Carries the small mono labels, so it has to clear AA on paper (5.78)
     and on the sage band (4.83). */
  --stone: #5a5f63;

  /* Copper variants. Use --copper-text for anything below 24px.
     --copper-on-dark is a lifted Brass: the accent labels on the Blue
     sections are 13px, so they need 4.5, not 3.0. Plain Copper only
     manages 3.34 on Blue and must never be used for text there. */
  --copper-text: #865834; /* 5.44 on paper, 4.54 on the sage band — AA on both */
  --copper-on-dark: #a96f42; /* NB: 3.34 on Blue — below AA for small text */

  --rule: rgba(31, 46, 58, 0.18);
  --rule-soft: rgba(31, 46, 58, 0.09);
  --rule-invert: rgba(246, 242, 234, 0.22);

  /* Form field outlines. --rule is a decorative hairline at 1.41 against white,
     well under the 3:1 WCAG 1.4.11 needs for a control boundary — a field
     border has to be seen to be used. 3.93 on white, 3.52 on paper. */
  --field-border: #798289;

  /* Type system (Colliers-inspired test): Merriweather serif for display
     headlines; Open Sans for body, ledes, nav, buttons and the small
     wide-tracked uppercase labels. --font-serif / --font-mono kept as names
     so the many references below don't churn. */
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Merriweather", Georgia, serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale. */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.8vw, 5rem);
  --step-5: clamp(3.4rem, 1.6rem + 8vw, 9rem);

  --gutter: clamp(1.5rem, 6vw, 6rem);
  --measure: 62ch;
  --bezier: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain. Sits above the background, below everything else. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.skip-link:focus {
  top: 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typography primitives
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  text-wrap: balance;
}

/* Oversized display type. Poppins is a geometric sans, so it takes tight
   negative tracking cleanly at display size and holds a compact line-height. */
.display {
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.005em;
}

.headline {
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.018em;
}

.title {
  font-size: var(--step-3);
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* Small wide-tracked mono labels — the construction-document voice.
   Sized independently of --step--1 (which drives buttons and nav) so section
   labels can be enlarged without inflating the whole UI. */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 0.85rem + 0.22vw, 1.02rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.label--accent {
  color: var(--copper-text);
}

/* Serif lede paragraph. */
.lede {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.prose {
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose p + p {
  margin-top: 1.1em;
}
.prose--serif {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
}

/* Sans-serif, sentence-case statement heading (About: "The promise"). */
.statement {
  font-family: "Poppins", var(--font-sans);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}

/* Three proof points, each introduced by a copper rule. */
.promise-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) {
  .promise-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Two-up variant stacks full-width so each copper rule and its copy run
   across the whole page. */
.promise-cols.promise-cols--two {
  grid-template-columns: 1fr;
}
.promise {
  border-top: 2px solid var(--copper);
  padding-top: clamp(1rem, 2vw, 1.4rem);
}
.promise__title {
  font-family: "Poppins", var(--font-sans);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* The 3-up promise grid has narrow columns — trim the title so longer labels
   ("Guaranteed availability") stay on one line. The 2-up grid keeps step-1. */
.promise-cols:not(.promise-cols--two) .promise__title {
  font-size: clamp(1rem, 0.85rem + 0.65vw, 1.25rem);
  letter-spacing: 0.03em;
}
.promise__body {
  margin-top: 0.6rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Blue-band variant (Value We Deliver) — mirrors the home "Value we bring":
   dark ground, white copy, copper vertical dividers instead of top rules. */
.promise-cols--band .promise {
  border-top: none;
  padding-top: 0;
}
.promise-cols--band .promise__title {
  color: #fff;
}
.promise-cols--band .promise__body {
  color: rgba(246, 242, 234, 0.72);
}
@media (min-width: 760px) {
  .promise-cols--band {
    gap: 0;
  }
  .promise-cols--band .promise + .promise {
    border-left: 4px solid #b88964;
    padding-left: clamp(1.75rem, 3.5vw, 3rem);
  }
  .promise-cols--band .promise:not(:last-child) {
    padding-right: clamp(1.75rem, 3.5vw, 3rem);
  }
}

em {
  font-family: var(--font-serif);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Top padding is tighter than the bottom: a section label sitting a long way
   below its own rule reads as detached from it. */
.section {
  padding-block: clamp(2.75rem, 5vw, 5rem) clamp(4.5rem, 8vw, 8rem);
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.section--rule {
  border-top: 1px solid var(--rule);
}

/* Third section tone — the contrast band between paper and ink. */
.section--sage {
  background: var(--sage-tint);
}
.section--sage .card {
  background: var(--sage-tint);
}
.section--sage .card:hover {
  background: #cfd8d5;
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink .label {
  color: rgba(246, 242, 234, 0.66); /* 6.59 on Blue — AA */
}
.section--ink .label--accent {
  color: var(--copper-on-dark);
}

/* Editorial split: sticky label column + content column. */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(9rem, 15%) 1fr;
  }
  .split__aside {
    position: sticky;
    top: 7rem;
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color 0.3s var(--bezier);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.75rem;
  /* Full-bleed nav bar: logo and nav justify to the edges, held off by the
     standard gutter, rather than being confined to the 1280px shell. */
  max-width: none;
}

.header__logo img {
  width: auto;
  height: 1.65rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.25s var(--bezier);
}
.nav__link::after {
  content: "";
  position: absolute;
  bottom: -0.4em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--copper-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--bezier);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rule);
  background: none;
  color: inherit;
  cursor: pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--bezier), opacity 0.2s;
}
.nav__toggle span {
  margin-inline: auto;
  position: relative;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__toggle span::before {
  top: -5px;
}
.nav__toggle span::after {
  top: 5px;
}
.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav__toggle {
    display: block;
  }
  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform 0.45s var(--bezier), visibility 0.45s;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
  }
  .nav__link {
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--step-1);
    letter-spacing: 0.04em;
  }
  .nav .btn {
    margin-top: 1.5rem;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--bezier), color 0.3s var(--bezier),
    border-color 0.3s var(--bezier);
}
.btn:hover {
  --btn-bg: var(--sage-tint);
  border-color: var(--sage-tint);
  color: var(--ink);
}
.btn__arrow {
  transition: transform 0.35s var(--bezier);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule);
}
.btn--ghost:hover {
  --btn-fg: #fff;
}

.btn--invert {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--rule-invert);
}

/* Outlined button for use on the Green panel / dark sections. */
.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--rule-invert);
}
.btn--onDark:hover {
  --btn-bg: var(--sage-tint);
  --btn-fg: var(--ink);
  border-color: var(--sage-tint);
}

/* Text link with an animated rule. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--bezier), color 0.3s var(--bezier),
    gap 0.3s var(--bezier);
}
.tlink:hover {
  gap: 0.9rem;
  color: var(--copper-text);
  border-color: var(--copper-text);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(1.25rem, 2vw, 2rem) clamp(3rem, 7vw, 6rem);
}

/* ---- Full-bleed hero (home) ----
   Photograph runs edge to edge; a solid Green panel overlaps its lower edge
   and carries the message. Text sits on the panel, never on the photo, so
   contrast is fixed at 10.73 regardless of what the image is doing. */

/* The photograph is a LAYER behind the panel, not a block stacked above it.
   That lets it run down past the headline and finish level with the CTA row,
   while the panel's position stays controlled by --hero-lead (so the headline
   height above the fold is independent of how tall the image is). */
.hero--bleed {
  position: relative;
  /* Photo is its own band on top; the Blue panel stacks directly beneath it
     as a full-width horizontal band carrying the headline and CTAs. */
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.hero--bleed .hero__media {
  position: relative;
  width: 100%;
  height: calc(100svh - 5.5rem);
  overflow: hidden;
  background: var(--paper);
}
/* Hero photo fills the first screen below the header (cover-cropped). */
.hero--bleed .hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroFade 1.4s var(--bezier) both;
}


/* Hero shell runs full-bleed so the banner text sits flush-left at the gutter,
   in line with the logo. */
.hero--bleed .shell {
  max-width: none;
}
.hero__panel {
  position: relative;
  z-index: 2;
  max-width: none;
  padding-block: clamp(0.6rem, 1.4vw, 1.1rem);
  background: var(--ink);
  color: var(--paper);
}
.hero__panel .label {
  color: var(--copper-text);
}
.hero__title {
  margin: clamp(0.5rem, 1.2vw, 0.9rem) 0 0;
  font-family: var(--font-sans);
  color: #fff;
  text-align: center;
  font-weight: 300;
  font-size: clamp(1.4rem, 4vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero__title {
    white-space: normal;
    font-size: clamp(1.5rem, 6.5vw, 2.4rem);
  }
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.hero__display {
  position: relative;
  z-index: 2;
}

/* The period gets the accent — small detail, does a lot of work. */
.hero__dot {
  color: var(--copper);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: end;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
  }
}

.hero__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroPan 1.6s var(--bezier) 0.2s both;
}
@keyframes heroPan {
  from {
    transform: scale(1.16);
    opacity: 0;
  }
  to {
    transform: scale(1.04);
    opacity: 1;
  }
}
/* Opacity-only fade for the full-bleed hero photo — no scale, so none of the
   image is ever cropped. */
@keyframes heroFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-bottom: 0.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   8. Stats — typographic centerpiece
   -------------------------------------------------------------------------- */

/* The earlier version boxed each figure in a full grid of hairlines, which
   read like a spreadsheet. This drops the box: figures run much larger, each
   column is introduced by a short copper rule, and the only dividers are
   vertical hairlines between columns. */

.stats {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }
  /* Copper divider as an element between stats — space-between distributes an
     equal gap on each side, so it stays centred while the row fills the width. */
  .stat__rule {
    display: block;
    align-self: stretch;
    /* Back to the original 1px hairline (client, 5 Aug). The width had crept
       1px -> 2px -> 4px -> 6px chasing a disappearing-divider bug, but width
       was never the cause: as a flex item the rule inherits flex-shrink:1, so
       flexbox squeezed it to a sub-pixel sliver that rounded away at some
       viewport widths. flex:0 0 1px pins the basis and forbids shrinking, so a
       true hairline now holds at every width. */
    flex: 0 0 1px;
    width: 1px;
    min-width: 1px;
    background: #b88964;
    /* Painted unconditionally: never inherit the reveal animation's opacity:0,
       so the dividers cannot end up invisible if the observer misses. */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.stat {
  position: relative;
}
@media (min-width: 900px) {
  /* As a flex item .stat defaults to flex-shrink:1, so .stats (space-between)
     could squeeze it narrower than "20%+" needs before nowrap forces an
     overflow instead. flex-shrink:0 stops it being squeezed in the first
     place — same fix already applied to .stat__rule for the same reason. */
  .stat {
    flex-shrink: 0;
  }
}

/* Number + label share a left edge; the group is centred in its column so the
   dividers stay evenly placed. */
.stat__inner {
  width: fit-content;
  margin-inline: 0;
  text-align: left;
}
@media (max-width: 899px) {
  .stat__rule {
    display: none;
  }
}
.stat__figure {
  display: block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.8rem, 1.8rem + 3.8vw, 5rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  /* "20%+" has no space for the browser to break on, but at some window
     widths / text-zoom levels it still wrapped the "+" onto its own line
     (client report). .stat__label already carries this guard below —
     the figure was the one place it was missing. */
  white-space: nowrap;
}

/* Units read as part of the number, so they match its colour. */
.stat__unit {
  margin-left: 0.02em;
}

.stat__label {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  line-height: 1.5;
}

/* Feature list with sub-heads — text + subtext under a section's copy.
   Items divided by hairlines so five stack cleanly without a bullet. */
.features {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.feature {
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--rule);
}
.feature:first-child {
  padding-top: 0;
  border-top: none;
}
/* Two-column proof-point grid (Cost & Quality). The top row drops its rule so
   the hairlines read as row separators, not a border above the first row. */
.features--grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 700px) {
  .features--grid {
    grid-template-columns: 1fr 1fr;
  }
  .features--grid .feature:nth-child(2) {
    padding-top: 0;
    border-top: none;
  }
}
.feature__title {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.feature__body {
  margin-top: 0.45rem;
  max-width: 54ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Cost & Quality feature titles in all-caps Poppins (client, 31 Jul). Scoped to
   the .features container, which is unique to that block. */
.features .feature__title {
  font-family: "Poppins", var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Feature list — the proof points under a section's copy. */
.ticks {
  list-style: none;
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Drawn, not a glyph — keeps weight and colour under our control. */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   9. Pull quote
   -------------------------------------------------------------------------- */

.pullquote {
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 300;
  font-style: italic;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   10. Value cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Editorial intro split, just below the hero: eyebrow + big serif headline on
   the left, the supporting statement bottom-aligned on the right. */
.intro {
  max-width: none;
}
.intro__lead {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
}
.intro__body {
  margin-top: clamp(0.9rem, 1.8vw, 1.25rem);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: none;
}
.intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.card {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: #fff;
  transition: background 0.4s var(--bezier);
}
.card:hover {
  background: var(--sage-tint);
}
.card__index {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--copper-text);
  letter-spacing: 0.1em;
}
.card__title {
  margin: 0 0 0.9rem;
  min-height: calc(2 * 1.15em);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}
.card__body {
  color: var(--ink-soft);
  font-size: var(--step-0);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   11. Audience blocks (image + copy, alternating)
   -------------------------------------------------------------------------- */

.audience {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .audience {
    grid-template-columns: 1fr 1fr;
  }
  .audience--flip .audience__figure {
    order: 2;
  }
}
.audience + .audience {
  margin-top: clamp(3rem, 7vw, 6rem);
}

/* No photo — the copy spans the full width. The heading + intro sit on the
   left, the feature list on the right, so five items don't run as one long
   column. */
.audience--wide {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .audience--wide {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
}

/* 3:2 matches the native ratio of most of the photography, so the
   object-fit crop stays gentle. */
.audience__figure {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
}
.audience__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--bezier);
}
.audience__figure:hover img {
  transform: scale(1.04);
}

.audience__title {
  margin: 1.25rem 0 1.25rem;
  font-size: var(--step-3);
}

/* --------------------------------------------------------------------------
   12. Process — numbered editorial sequence
   -------------------------------------------------------------------------- */

.process {
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

.step {
  counter-increment: step;
  display: grid;
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr;
  transition: background 0.4s var(--bezier), padding-inline 0.4s var(--bezier);
}
@media (min-width: 780px) {
  .step {
    grid-template-columns: 5rem 1fr 1.1fr;
    align-items: baseline;
  }
  .step:hover {
    background: var(--paper-2);
    padding-inline: 1.25rem;
  }
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--stone);
  transition: color 0.3s var(--bezier);
}
.step__num::before {
  content: counter(step, decimal-leading-zero);
}
.step:hover .step__num {
  color: var(--copper-text);
}

.step__title {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.step__body {
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   12b. Testimonial
   -------------------------------------------------------------------------- */

.quote {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .quote {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.quote__figure {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.quote__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--copper);
}

/* No accompanying image — the quote carries the section on its own, so it
   runs larger and is held to a readable measure.

   The measure lives on .quote__text, not on the blockquote: `ch` resolves
   against the font-size of the element it is declared on, and the blockquote
   inherits 16px body text while the quote renders at 32px+. Putting 30ch on
   the blockquote produced a 275px column around 32px type — a narrow tower of
   giant words. On .quote__text it resolves against the display size. */
.quote--solo {
  display: block;
  /* Shrink to the widest child so the placeholder outline hugs the quote
     instead of spanning the whole container. */
  width: fit-content;
  max-width: 100%;
}
.quote--solo .quote__text {
  font-size: var(--step-3);
  line-height: 1.24;
  max-width: 26ch;
}
@media (min-width: 900px) {
  .quote--solo .quote__text {
    max-width: 30ch;
  }
}
.quote--solo .quote__cite {
  max-width: 30rem;
}

.quote__text {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.quote__cite {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-style: normal;
}
.quote__name {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.quote__role {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Placeholder flag. Delete this rule and the data-placeholder attribute
   once a real quote is in. It is deliberately loud so it cannot ship by
   accident. */
/* The flag sits above the dashed box, so the element needs enough clearance
   for both — otherwise the label lands on top of whatever precedes it. */
[data-placeholder] {
  position: relative;
  margin-top: 3.25rem;
  outline: 2px dashed var(--copper);
  outline-offset: clamp(0.75rem, 2vw, 1.25rem);
}
[data-placeholder]::before {
  content: "PLACEHOLDER — replace with a real quote before launch";
  position: absolute;
  bottom: calc(100% + clamp(0.75rem, 2vw, 1.25rem) + 0.4rem);
  left: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--copper-text);
}
@media (max-width: 640px) {
  [data-placeholder]::before {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */

/* Full-width content photo (e.g. the team on the About page). */
.figure-band {
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 3 / 2;
}
@media (min-width: 900px) {
  .figure-band {
    aspect-ratio: 21 / 9;
  }
}
.figure-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.founder {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .founder {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
}
/* Portraits run in colour (client, 29 Jul). Tone consistency across the set
   is handled at the image level — see tools/match-tone.py. */
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--bezier);
}
.portrait img.portrait__image--landon {
  transform: scale(1.25);
  transform-origin: 50% 26%;
}
.portrait img.portrait__image--lydia {
  transform: scale(1.22);
  transform-origin: 50% 20%;
}
.portrait:hover img {
  transform: scale(1.03);
}
.portrait:hover img.portrait__image--landon {
  transform: scale(1.28);
}
.portrait:hover img.portrait__image--lydia {
  transform: scale(1.25);
}

.portrait__caption {
  margin-top: 1rem;
}
.portrait__name {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.portrait__role {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-text);
}
/* Reserve two lines for team roles so every bio below starts on the same line,
   even when a title wraps to two lines. */
.team .portrait__role {
  line-height: 1.35;
  min-height: 2.7em;
}

/* Monogram tile for team members whose headshot hasn't been supplied yet.
   Swap for a real <img src="img/team/name.jpg"> in the .portrait when it
   arrives — no other change needed. */
.portrait--monogram {
  display: grid;
  place-items: center;
  background: var(--paper-2);
}
.section--sage .portrait--monogram {
  background: #cfd8d5;
}
.portrait--monogram span {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--stone);
}

/* Marks bios/photos still awaiting real content. */
.pending {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px dashed var(--copper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-text);
}

.team {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .team {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .team {
    grid-template-columns: repeat(4, 1fr);
  }
}
.team .portrait {
  aspect-ratio: 1 / 1;
}

.advisors {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .advisors {
    grid-template-columns: repeat(3, 1fr);
  }
}

.advisor .portrait {
  aspect-ratio: 1 / 1;
}
.advisor__body {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Bios clamp to ~5 lines with a Read more toggle. Uses a max-height clamp
   (not -webkit-line-clamp) so multi-paragraph bios collapse cleanly; a fade
   mask signals there's more. The clamp is CSS-only, so the full text is always
   in the DOM for search and screen readers; JS only flips the class and hides
   the button when a bio is short enough not to need it. */
.bio__text {
  overflow: hidden;
  max-height: 8.4em; /* ~5 lines at 1.65 line-height */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.bio__text p + p {
  margin-top: 0.8em;
}
.bio.is-open .bio__text {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.bio__toggle {
  margin-top: 0.6rem;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-text);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s var(--bezier);
}
.bio__toggle:hover {
  color: var(--ink);
}
.bio__toggle[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   14. Contact & form
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Outlined boxes — the whole target is visible before you click into it,
   which an underline alone does not make obvious. */
.field__input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--field-border);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  transition: border-color 0.25s var(--bezier), box-shadow 0.25s var(--bezier);
}
.field__input::placeholder {
  color: #9aa3a8;
}
.field__input:hover {
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.field__input:focus {
  outline: none;
  border-color: var(--ink);
  /* Doubles the border weight without shifting layout. */
  box-shadow: 0 0 0 1px var(--ink);
}
textarea.field__input {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

/* Honeypot — bots fill it, humans never see it. */
.field--trap {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  min-height: 1.4em;
}
.form__status[data-state="error"] {
  color: var(--copper-text);
}
.form__status[data-state="ok"] {
  color: var(--ink);
}

.detail-list {
  list-style: none;
}
.detail-list li {
  padding-block: 0.6rem;
}
.detail-list a:hover {
  color: var(--copper-text);
}
.detail-list__value {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta {
  display: grid;
  gap: 2rem;
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cta {
    grid-template-columns: 1.4fr auto;
  }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--ink-deep);
  color: #fff;
}

.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--sage-tint);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .footer__top {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.footer__logo img {
  width: auto;
  height: 1.9rem;
  margin-bottom: 1.25rem;
}

.footer__tagline {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 300;
  font-style: normal;
  color: #fff;
}

.footer__col h3 {
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__col a {
  color: #fff;
  transition: color 0.25s var(--bezier);
}
.footer__col a:hover {
  color: var(--copper-on-dark);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: #fff;
}

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--bezier), transform 0.8s var(--bezier);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children.
   :not([data-no-reveal]) exempts purely decorative children (e.g. the copper
   stat dividers). They used to start at opacity:0 and depend on the observer
   firing to become visible — so a fast scroll, a bfcache restore, or any
   missed observer callback left them invisible. Decoration must not depend on
   JS to be seen. */
[data-reveal-stagger] > *:not([data-no-reveal]) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--bezier), transform 0.7s var(--bezier);
}
[data-reveal-stagger].is-visible > *:not([data-no-reveal]) {
  opacity: 1;
  transform: none;
}
/* Delays cover 8 children; .stats runs 7 (4 stats + 3 rules) and previously
   overflowed this list, leaving the last child with no delay. */
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.45s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.53s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.61s; }

/* No JS? Show everything. */
.no-js [data-reveal],
.no-js [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   18. Cost chain (home intro) — traditional vs factory-direct sourcing.
   Dollar signs in Copper, centred over their step label; chevrons in Blue. */

/* White band that carries the cost chain, between the paper intro and the
   Blue "value we bring" section. */
.costflow-band {
  background: #fff;
}
.costflow {
  margin-top: 0;
}

.costflow__accent {
  color: var(--ink);
}
.costflow__plus {
  color: var(--copper);
}

/* Section headline — the savings claim anchors the section. */
.costflow__claim {
  font-size: var(--step-3);
  font-weight: 700;
  margin: clamp(0.5rem, 1.2vw, 0.9rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.costflow__claim .costflow__accent,
.costflow__claim .costflow__plus {
  font-size: 1.15em;
}

.costflow__group {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Row label reuses the site's .label eyebrow treatment, tinted Blue;
   .costflow__lead also carries the spacing before its chain. */
.costflow__lead {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
  margin-bottom: clamp(0.9rem, 2vw, 1.35rem);
}

.chain {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: clamp(0.6rem, 2vw, 1.75rem);
  row-gap: clamp(1rem, 2vw, 1.5rem);
}

.chain__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  min-width: 4rem;
}

.chain__amount {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--copper);
}

.chain__label {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink);
}

/* Chevron sits on the row of dollar signs, not the labels. */
.chain__arrow {
  font-size: var(--step-1);
  line-height: 1;
  color: var(--ink);
  padding-top: 0.1em;
}