/* ==========================================================================
   OneTeam Aviation Marketing — homepage
   Built against the OT Website Figma comp (node 1:18) and Brand v1.0.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
button, input { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ivory); color: var(--deep-teal); padding: var(--space-3) var(--space-6);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

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

/* --- Section entry (added by JS; no-op under reduced motion) -------------- */
.will-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease); }
.will-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .will-reveal { opacity: 1; transform: none; } }

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-side);
}
.center { text-align: center; }

/* --- Type ----------------------------------------------------------------- */
/* Aperitif has no bold cut — never let the browser synthesize one. */
.h1, .h2, .h3, .h5, .stat__num, .step__num, .quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis-weight: none;
}

.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.h6 {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6);
}

.eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cognac);
}

p + p { margin-top: var(--space-6); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-h);
  padding-inline: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-ui); letter-spacing: var(--ls-ui);
  text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
/* Button system, read off the comp: ghost on dark grounds, filled on light.
   The wide LinkedIn button is filled even on dark — it is the primary of
   that pair. Hover shifts Cognac to Copper, which is the deck's tint rule. */
.btn--primary { background: var(--cognac); color: var(--ivory); }
.btn--primary:hover { background: var(--copper); }

.btn--ghost { background: transparent; color: var(--ivory); border-color: var(--sandstone); }
.btn--ghost:hover { background: var(--sandstone); color: var(--deep-teal); border-color: var(--sandstone); }

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

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); }
.button-row--center { justify-content: center; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding-block: var(--space-8);
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-side);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6);
}
.site-nav { display: flex; gap: var(--space-12); }
.site-nav a {
  font-weight: 700; font-size: var(--fs-ui); letter-spacing: var(--ls-ui);
  text-transform: uppercase; text-decoration: none; color: var(--ivory);
  transition: color var(--dur-hover) var(--ease);
}
.site-nav a:hover { color: var(--sandstone); }
.site-header__cta { display: flex; justify-content: flex-end; }

.site-logo { display: grid; justify-items: center; gap: var(--space-3); width: 297px; }
.site-logo__mark { width: 61px; }
.site-logo__word { width: 292px; }
.site-logo__sub  { width: 297px; }

/* Logo and nav sit on Deep Teal, so the marks render in Ivory. */
.site-logo img, .trustbar img { filter: brightness(0) saturate(100%) invert(96%) sepia(13%) saturate(449%) hue-rotate(324deg) brightness(104%) contrast(97%); }

.nav-toggle { display: none; background: none; border: 0; padding: var(--space-3); cursor: pointer; }
.nav-toggle span { display: block; width: 28px; height: 2px; background: var(--ivory); }
.nav-toggle span + span { margin-top: 7px; }

.nav-drawer { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--deep-teal); color: var(--ivory); min-height: 1154px; display: grid; align-items: center; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #0c292c 0%, #1f4951 55%, #0c292c 100%);
  opacity: 0.9;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,41,44,.55) 0%, rgba(12,41,44,.25) 45%, rgba(12,41,44,.75) 100%);
}
.hero__inner { position: relative; text-align: center; padding-block: var(--space-40) var(--space-30); }
.hero .h1 { max-width: 16ch; margin-inline: auto; }
.hero__sub { max-width: 52ch; margin: var(--space-8) auto 0; color: var(--sandstone); }
.hero .button-row { justify-content: center; }

/* --- Trust bar ------------------------------------------------------------ */
.trustbar { background: var(--cognac); color: var(--ivory); padding-block: var(--space-12); }
.trustbar__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.trustbar__list li { display: flex; align-items: center; gap: var(--space-6); justify-content: center; text-align: left; }
.trustbar__list img { width: 56px; flex: none; }
.trustbar__list span { font-size: var(--fs-h6); line-height: 1.25; letter-spacing: var(--ls-h6); max-width: 14ch; }

/* --- Partners / marquee --------------------------------------------------- */
.partners { padding-block: var(--section-y); overflow: hidden; }
.partners__label { text-align: center; margin-bottom: var(--space-12); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: var(--space-6); }
.marquee__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee__track img { height: 64px; width: auto; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Narrative ------------------------------------------------------------ */
.narrative { padding-block: var(--section-y); }
.narrative__inner { display: grid; grid-template-columns: minmax(0,1fr) 567px; gap: var(--space-30); align-items: start; }
.narrative__text { max-width: var(--measure); }
.narrative__eyebrow { margin-top: var(--space-6); }
.narrative__text p:not(.eyebrow):not(.narrative__kicker) { margin-top: var(--space-6); }
.narrative__kicker { margin-top: var(--space-8); }
.narrative__media img { width: 100%; object-fit: cover; }

/* --- Pillars -------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: 808px minmax(0,1fr); align-items: stretch; }
.pillars__media img { width: 100%; height: 100%; object-fit: cover; }
.pillars__content { padding: var(--space-30) var(--space-20); }
.pillars__heading { margin-bottom: var(--space-16); }
.pillar { padding: var(--space-20) 0; border-top: 1px solid var(--rule); }
.pillar:first-child { border-top: 0; background: var(--ivory); margin-inline: calc(var(--space-20) * -1); padding-inline: var(--space-20); }
.pillar p { margin-top: var(--space-6); max-width: var(--measure); }

/* --- Team ----------------------------------------------------------------- */
.team { background: var(--deep-teal); color: var(--ivory); padding-block: var(--section-y-major) var(--space-20); }
.team__lede { max-width: 62ch; margin: var(--space-8) auto 0; color: var(--sandstone); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--space-30); }
.team-card__photo { aspect-ratio: 232 / 264; background: var(--placeholder); }
.team-card__name { margin-top: var(--space-4); font-weight: 700; font-size: var(--fs-small); line-height: var(--lh-small); text-transform: uppercase; letter-spacing: 1px; }
.team-card__title { font-style: italic; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--sandstone); }

/* --- Stats ---------------------------------------------------------------- */
.stats { background: var(--deep-teal); color: var(--ivory); padding-block: var(--space-20) var(--section-y-major); }
.stat-list { border-top: 1px solid var(--rule-on-dark); }
.stat {
  display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: center; gap: var(--space-12);
  padding-block: var(--space-12); border-bottom: 1px solid var(--rule-on-dark);
}
.stat__num { font-size: var(--fs-stat); line-height: var(--lh-stat); letter-spacing: normal; font-variant-numeric: tabular-nums; color: var(--copper); }
.stat__label { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
.stats__footnote { margin-block: var(--space-8) var(--space-12); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--sandstone); text-align: center; }

/* --- Quotes --------------------------------------------------------------- */
.quotes { background: var(--cognac); color: var(--ivory); padding-block: var(--section-y); }
.quotes + .quotes, .fit + .quotes { background: var(--deep-teal); }
.quotes__heading { color: var(--sandstone); margin-bottom: var(--space-16); }
.quotes__stage { max-width: 890px; margin-inline: auto; }
.quote { position: relative; text-align: center; }
.quote p { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.quote p::before, .quote p::after {
  content: "\201C"; font-family: var(--font-display); font-size: 90px; line-height: 0;
  color: var(--sandstone); vertical-align: -0.35em; padding-inline: var(--space-3);
}
.quote p::after { content: "\201D"; }
.quote footer { margin-top: var(--space-8); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sandstone); }
.quote cite { font-style: normal; font-weight: 700; }

/* --- Process -------------------------------------------------------------- */
.process { padding-block: var(--section-y); }
.process__heading { margin-bottom: var(--space-30); }
.step { display: grid; grid-template-columns: 399px minmax(0,1fr); gap: var(--space-20); align-items: center; }
.step + .step { margin-top: var(--space-30); }
.step--reverse .step__media { order: 2; }
.step__media img { width: 100%; aspect-ratio: 399 / 548; object-fit: cover; }
.step__num { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--copper); }
.step__text .eyebrow { margin-top: var(--space-4); }
.step__text p:last-child { margin-top: var(--space-6); max-width: var(--measure); }
.process__close { margin-top: var(--section-y-major); }
.process__close .h2 { max-width: 20ch; margin-inline: auto; }
.process__close .btn { margin-top: var(--space-12); }

/* --- Fit ------------------------------------------------------------------ */
.fit {
  padding-block: var(--section-y);
  /* Scrim over the photograph — without it the copy is unreadable. */
  background:
    linear-gradient(rgba(12, 41, 44, 0.86), rgba(12, 41, 44, 0.86)),
    var(--deep-teal) url("/assets/img/fit-bg.jpg") center / cover no-repeat;
  color: var(--ivory);
}
.fit .h2 { max-width: 18ch; }
.fit__lede { margin-top: var(--space-8); max-width: 60ch; color: var(--sandstone); }
.fit__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-20); margin-top: var(--space-16); }
.fit__col .h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); margin-bottom: var(--space-8); }
.fit-list li { position: relative; padding-left: 48px; min-height: 33px; }
.fit-list li + li { margin-top: var(--space-6); }
.fit-list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 33px; height: 33px;
  background: center / contain no-repeat;
}
.fit-list--yes li::before { background-image: url("/assets/icons/icon-circle-check.svg"); }
.fit-list--no  li::before { background-image: url("/assets/icons/icon-circle-x.svg"); }

/* --- Corner CTA + signup --------------------------------------------------- */
.corner { padding-block: var(--section-y); }
.corner__inner { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-20); align-items: center; }
.corner__text .h2 { max-width: 12ch; }
.corner__text p { margin-top: var(--space-8); max-width: 46ch; }
.corner__text .btn { margin-top: var(--space-12); }
.corner__media img { width: 100%; object-fit: cover; }

.signup { margin-top: var(--section-y); text-align: center; }
.signup__lede { max-width: 48ch; margin-inline: auto; }
.signup__form { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-12); }
.field { position: relative; }
.field label {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-body); color: var(--text); opacity: .75; pointer-events: none;
  transition: all var(--dur-hover) var(--ease);
}
.field input {
  width: 262px; height: var(--field-h);
  padding: var(--space-6) var(--space-4) var(--space-2);
  background: var(--placeholder); border: 1px solid transparent; border-radius: var(--button-radius);
}
.field input:focus { border-color: var(--copper); outline: none; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field:focus-within label { top: 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.signup__status { flex-basis: 100%; margin-top: var(--space-4); font-size: var(--fs-small); line-height: var(--lh-small); min-height: 1.5em; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--midnight); color: var(--ivory); padding-block: var(--section-y); }
.site-footer .site-logo { margin-inline: auto; }
.site-footer__line { margin-top: var(--space-12); color: var(--sandstone); }
.site-footer .button-row { margin-top: var(--space-12); }
.site-footer__legal { margin-top: var(--space-16); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--sandstone); }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

/* ==========================================================================
   Tablet — 768 to 1199
   ========================================================================== */
@media (max-width: 1199px) {
  .narrative__inner { grid-template-columns: 1fr; gap: var(--space-16); }
  .narrative__media { order: -1; }
  .pillars { grid-template-columns: 1fr; }
  .pillars__media img { aspect-ratio: 16 / 9; }
  .pillars__content { padding: var(--section-y) var(--pad-side); }
  .pillar:first-child { margin-inline: calc(var(--pad-side) * -1); padding-inline: var(--pad-side); }
  .step, .step--reverse .step__media { grid-template-columns: 1fr; order: 0; }
  .step { gap: var(--space-8); }
  .corner__inner { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .stat { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ==========================================================================
   Mobile — under 768
   ========================================================================== */
@media (max-width: 767px) {
  /* Header becomes logo-left / hamburger-right with a full-screen drawer. */
  .site-header { padding-block: var(--space-6); }
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-nav--left, .site-header__cta { display: none; }
  .site-logo { width: 180px; justify-items: start; }
  .site-logo__mark { width: 40px; }
  .site-logo__word { width: 176px; }
  .site-logo__sub  { width: 180px; }
  .nav-toggle { display: block; justify-self: end; }

  .nav-drawer {
    position: fixed; inset: 0; z-index: 150;
    background: var(--deep-teal); color: var(--ivory);
    display: grid; align-content: center; gap: var(--space-8);
    padding: var(--space-20) var(--pad-side);
  }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer nav { display: grid; gap: var(--space-8); }
  .nav-drawer a:not(.btn) {
    font-weight: 700; font-size: var(--fs-nav, 20px); letter-spacing: var(--ls-ui);
    text-transform: uppercase; text-decoration: none;
  }
  body.nav-open { overflow: hidden; }

  .hero { min-height: 100svh; }
  .hero__inner { padding-block: var(--space-30) var(--space-20); }
  .hero .h1 { max-width: none; }
  .button-row { flex-direction: column; align-items: stretch; }
  .button-row .btn { width: 100%; }

  .trustbar__list { grid-template-columns: 1fr; gap: var(--space-8); }
  .trustbar__list li { justify-content: flex-start; }
  .trustbar__list span { max-width: none; }

  /* One marquee row only — two counter-drifting rows read as noise here. */
  .marquee--secondary { display: none; }
  .marquee__track { animation-duration: 40s; }
  .marquee__track img { height: 44px; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .stat { grid-template-columns: 1fr; gap: var(--space-1); padding-block: var(--space-8); }

  .quote p::before, .quote p::after { font-size: 48px; }

  .step__num { font-size: var(--fs-h3); line-height: 1.1; }

  .fit__cols { grid-template-columns: 1fr; gap: var(--space-16); }

  .signup__form { flex-direction: column; align-items: stretch; }
  .field input { width: 100%; }
  .signup__form .btn { width: 100%; }
}

/* ==========================================================================
   Header spacing — the comp sets the logo 68px from the top of the frame
   ========================================================================== */
.site-header { padding-block: 68px var(--space-8); }

/* Interior pages have no hero behind the nav, so the bar carries its own
   ground. Nav and logo render in Ivory either way. */
.site-header--solid { position: static; background: var(--deep-teal); padding-block: var(--space-8); }
.site-header--solid + main { padding-top: 0; }

/* ==========================================================================
   Pillars — cream is a ROLLOVER state. "A foundation that holds" is the
   default-active row; hovering any row moves the highlight to it.
   ========================================================================== */
.pillar {
  background: transparent;
  transition: background-color var(--dur-hover) var(--ease);
}
.pillar:first-child { background: var(--ivory); }
.pillar-list:hover .pillar:first-child { background: transparent; }
.pillar-list .pillar:hover { background: var(--ivory); }
.pillar-list .pillar:focus-within { background: var(--ivory); }

/* ==========================================================================
   Interior page furniture
   ========================================================================== */
.container--narrow { max-width: 760px; }

.page-head { padding-block: var(--section-y) var(--space-12); }
.page-head--hero { background: var(--deep-teal); color: var(--ivory); padding-block: var(--section-y-major); text-align: center; }
.page-head--hero .eyebrow { color: var(--sandstone); }
.page-head--hero .btn { margin-top: var(--space-12); }
.page-head__lede { max-width: 56ch; margin: var(--space-8) 0 0; }
.page-head--hero .page-head__lede { margin-inline: auto; color: var(--sandstone); }

/* --- Card grid (blog + category) ------------------------------------------ */
.cards { padding-bottom: var(--section-y); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.card__link { display: block; text-decoration: none; }
.card__media { overflow: hidden; margin-bottom: var(--space-6); }
.card__media img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; transition: transform 600ms var(--ease); }
.card__link:hover .card__media img { transform: scale(1.03); }
.card__meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cognac); text-transform: uppercase; letter-spacing: 1.5px; }
.card__cat { font-weight: 700; }
.card__title { margin-top: var(--space-3); }
.card__link:hover .card__title { color: var(--cognac); }

.cat-nav { padding-bottom: var(--section-y); }
.cat-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.cat-nav a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.cat-nav a:hover { border-color: var(--cognac); color: var(--cognac); }

/* --- Article -------------------------------------------------------------- */
.article__head { padding-block: var(--section-y) var(--space-12); }
.article__head .h2 { margin-top: var(--space-4); }
.article__meta { margin-top: var(--space-6); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cognac); text-transform: uppercase; letter-spacing: 1.5px; }
.article__head .eyebrow a { text-decoration: none; }
.article__head .eyebrow a:hover { text-decoration: underline; }
.article__media { margin-bottom: var(--space-16); }
.article__media img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.article__body > * + * { margin-top: var(--space-6); }
.article__body h2 { margin-top: var(--space-16); }
.article__body h3 { margin-top: var(--space-12); }
.article__body ul { margin-left: var(--space-6); }
.article__body li { position: relative; padding-left: var(--space-6); }
.article__body li + li { margin-top: var(--space-3); }
.article__body li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--cognac); }
.article__body blockquote { border-left: 2px solid var(--cognac); padding-left: var(--space-8); margin-block: var(--space-12); }
.article__body blockquote p { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-h5); }

.article__foot { margin-top: var(--section-y); padding-top: var(--space-12); border-top: 1px solid var(--rule); }
.article__back { margin-top: var(--space-8); font-size: var(--fs-small); }
.article__back a { text-decoration: none; color: var(--cognac); }
.article__back a:hover { text-decoration: underline; }

/* --- Legal ---------------------------------------------------------------- */
.legal { padding-bottom: var(--section-y); }
.legal > * + * { margin-top: var(--space-6); }
.legal h2 { margin-top: var(--space-16); font-size: var(--fs-h5); line-height: var(--lh-h5); font-family: var(--font-display); font-weight: 400; }
.legal h3 { margin-top: var(--space-12); font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: 700; }
.legal ul { margin-left: var(--space-8); }
.legal li { list-style: disc; }
.legal li + li { margin-top: var(--space-2); }

/* --- Process page --------------------------------------------------------- */
.phase-intro { padding-block: var(--section-y); }
.phase-intro p { margin-top: var(--space-8); }

.phases { padding-bottom: var(--section-y); }
.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); counter-reset: phase; }
.phase-card { border-top: 2px solid var(--cognac); padding-top: var(--space-6); }
.phase-card__n { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--cognac); }
.phase-card h3 { margin-block: var(--space-3) var(--space-4); }
.phase-card__more { display: inline-block; margin-top: var(--space-6); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; color: var(--cognac); border-bottom: 1px solid var(--rule); }
.phase-card__more:hover { border-color: var(--cognac); }

.phase { padding-block: var(--section-y); scroll-margin-top: var(--space-12); }
.phase--alt { background: var(--ivory); }
.phase .h2 { margin-top: var(--space-3); }
.phase__lede { margin-top: var(--space-8); }
.phase p + p, .phase ul + p, .phase p + ul { margin-top: var(--space-6); }
.phase__list-intro { font-weight: 700; }
.phase__list { margin-top: var(--space-6); }
.phase__list li { position: relative; padding-left: var(--space-8); }
.phase__list li + li { margin-top: var(--space-4); }
.phase__list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--cognac); }
.phase__terms { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cognac); }

.quotes--inline { padding-block: var(--space-20); }
.process__close-band { background: var(--deep-teal); color: var(--ivory); padding-block: var(--section-y-major); }
.process__close-band .h6 { max-width: 52ch; margin: var(--space-8) auto 0; color: var(--sandstone); }
.process__tagline { margin-top: var(--space-16); font-size: var(--fs-small); color: var(--sandstone); }

/* ==========================================================================
   Interior responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .site-header { padding-block: var(--space-6); }
  .card-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr; }
  .article__media { margin-bottom: var(--space-12); }
  /* Cream highlight follows the tap target rather than hover on touch */
  .pillar-list:hover .pillar:first-child { background: var(--ivory); }
}

/* Hero still (placeholder comp until the licensed video lands) */
.hero__img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Stats rhythm, measured off the comp.
   Rules sit at y 4987 / 5310 / 5633 / 5956 — 323px apart. The figure's line
   box is 87px and starts 105px below the rule above it; the label starts
   66px below that rule, i.e. 39px above the figure's top.
   Column split is 890 / 332 of the 1222 column, with no gutter.
   ========================================================================== */
.stats .stat {
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 0;
  align-items: start;
  padding-block: 66px 131px;
}
.stats .stat__num { margin-top: 39px; }

@media (max-width: 1199px) {
  .stats .stat { grid-template-columns: 1fr; padding-block: var(--space-12) var(--space-16); }
  .stats .stat__num { margin-top: var(--space-2); }
}

@media (max-width: 767px) {
  .stats .stat { padding-block: var(--space-8) var(--space-12); }
  .stats .stat__num { margin-top: 0; }
}