/* =========================================================
   Premier Foundation Marketing
   Static site stylesheet
   ---------------------------------------------------------
   1. Fonts        5. Navigation     9.  Approach / Handle
   2. Tokens       6. Hero           10. Steps / About / FAQ
   3. Base         7. Trades         11. Closing / Footer
   4. Components   8. Strata         12. Motion preferences
   ========================================================= */

/* 1. Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-var.woff2") format("woff2-variations"),
       url("../assets/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-var-italic.woff2") format("woff2-variations"),
       url("../assets/fonts/source-serif-4-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* 2. Tokens ---------------------------------------------- */
:root {
  /* palette */
  --basalt: #0D1218;      /* near-black, blue-cast */
  --navy: #13202E;        /* deep navy */
  --navy-2: #1A2A3B;
  --charcoal: #262B31;
  --ivory: #EEE8DC;       /* warm ivory */
  --ivory-2: #E3DBCB;
  --copper: #B06D3B;      /* restrained copper */
  --copper-hi: #C9844F;
  --concrete: #8C9095;

  --ink: #151A20;               /* text on ivory */
  --ink-soft: #4A4F55;
  --paper: var(--ivory);        /* text on dark */
  --paper-soft: rgba(238, 232, 220, 0.72);
  --paper-faint: rgba(238, 232, 220, 0.16);

  /* type */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --step-5: clamp(3rem, 1.6rem + 6.4vw, 7.5rem);
  --step-hero: clamp(3.1rem, 1rem + 8.6vw, 10rem);

  /* layout */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --max: 82rem;
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --header-h: 4.5rem;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--basalt);
  color: var(--paper);
  font-family: var(--f-text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

::selection { background: var(--copper); color: var(--ivory); }

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

.skip-link {
  position: fixed;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

/* 4. Components ------------------------------------------ */
.section { padding-block: var(--section-y); position: relative; }
.section--tight-top { padding-top: 0; }
.section--basalt { background: var(--basalt); color: var(--paper); }
.section--navy { background: var(--navy); color: var(--paper); }
.section--ivory { background: var(--ivory); color: var(--ink); }

.display {
  font-family: var(--f-display);
  font-weight: 760;
  font-stretch: 72%;
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display--xl { font-size: var(--step-5); }
.display--lg { font-size: var(--step-4); }
.display--md { font-size: var(--step-3); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 34em;
}
.section--ivory .lead { color: var(--ink); }

.section-head { margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 5rem);
  align-items: end;
}
.section-head__aside .lead { color: var(--paper-soft); }

.fine-print {
  margin-top: 2.5rem;
  font-size: var(--step--1);
  color: var(--concrete);
  font-style: italic;
}

/* buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 620;
  font-stretch: 92%;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 2.5rem; padding: 0.55rem 1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--copper { --btn-bg: var(--copper); --btn-fg: #FFF8EF; --btn-bd: var(--copper); }
.btn--copper:hover { --btn-bg: var(--copper-hi); --btn-bd: var(--copper-hi); }

.btn--ghost { --btn-fg: var(--paper); --btn-bd: rgba(238, 232, 220, 0.45); }
.btn--ghost:hover { --btn-bg: rgba(238, 232, 220, 0.1); --btn-bd: var(--paper); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--ivory); --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: var(--copper); --btn-bd: var(--copper); }

/* 5. Navigation ------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--paper);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(13, 18, 24, 0.92);
  border-bottom-color: var(--paper-faint);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
/* backdrop-filter would make the fixed mobile menu position relative to the header */
.site-header.is-open { background: var(--basalt); -webkit-backdrop-filter: none; backdrop-filter: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
.wordmark__mark { width: 2rem; height: 2rem; flex: none; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--f-display); }
.wordmark__top {
  font-size: 1.125rem;
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wordmark__bottom {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.06em;
  color: var(--paper-soft);
}

.primary-nav ul { display: flex; gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem); }
.primary-nav a {
  position: relative;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
  color: var(--paper-soft);
  padding-block: 0.5rem;
  transition: color 0.2s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: var(--copper-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.primary-nav a:hover,
.primary-nav a[aria-current="true"] { color: var(--paper); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="true"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.25rem 0 0.75rem;
  background: none;
  border: 0;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 1.5rem; height: 0.75rem; }
.menu-toggle__bars span {
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: calc(100% - 1.5px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--basalt);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { counter-reset: m; }
.mobile-menu__list li { border-bottom: 1px solid var(--paper-faint); }
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1rem;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  font-weight: 740;
  font-stretch: 74%;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}
.mobile-menu__list a:hover { color: var(--copper-hi); }
.mobile-menu__foot { display: grid; gap: 1.25rem; }
.mobile-menu__email {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--paper-soft);
  text-align: center;
  word-break: break-all;
}

/* 6. Hero ------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--basalt);
}

.hero__media { position: absolute; inset: 0; z-index: -1; }

/* Fallback / poster backdrop: always present beneath the video */
.hero__backdrop {
  position: absolute; inset: 0;
  background:
    url("../assets/hero-poster.jpg") center / cover no-repeat,
    radial-gradient(120% 80% at 75% 30%, #24364A 0%, var(--navy) 38%, var(--basalt) 78%);
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
.hero__video::-webkit-media-controls { display: none !important; }

.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,18,24,0.72) 0%, rgba(13,18,24,0.18) 26%, rgba(13,18,24,0.3) 52%, rgba(13,18,24,0.94) 100%),
    linear-gradient(90deg, rgba(13,18,24,0.82) 0%, rgba(13,18,24,0.35) 55%, rgba(13,18,24,0.15) 100%);
}
.hero__grain {
  position: absolute; inset: 0;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__content {
  align-self: end;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  font-family: var(--f-display);
  font-size: clamp(0.6875rem, 0.6rem + 0.3vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--paper-soft);
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  width: 2.5rem; height: 2px;
  background: var(--copper);
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--step-hero);
  font-weight: 800;
  font-stretch: 68%;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__line > span { display: inline-block; }
/* stepped composition, like a stepped footing */
.hero__line--step { padding-left: clamp(0rem, -2rem + 9vw, 9rem); }

.hero__lower {
  display: grid;
  grid-template-columns: minmax(0, 36rem) auto;
  justify-content: space-between;
  align-items: end;
  gap: 2rem 3rem;
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding-left: clamp(0rem, -2rem + 9vw, 9rem);
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(238, 232, 220, 0.86);
  max-width: 36rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__base { border-top: 1px solid var(--paper-faint); }
.hero__scope {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__scope li {
  flex: 1 1 0;
  min-width: max-content;
  padding: 1.1rem 1.25rem 1.1rem 0;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--paper-soft);
}
.hero__scope li + li { padding-left: 1.25rem; border-left: 1px solid var(--paper-faint); }
.hero__credit {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  top: calc(var(--header-h) + 1rem);
  font-family: var(--f-display);
  font-size: 0.6875rem;
  color: var(--paper-soft);
  opacity: 0.7;
}

/* page-load sequence: the one orchestrated moment.
   Pure CSS (fill-mode both), so the hero never depends on JavaScript. */
.hero__line > span { animation: rise 1.1s var(--ease) 0.05s both; }
.hero__line--step > span { animation-delay: 0.17s; }
.hero__eyebrow { animation: fade 0.9s var(--ease) 0.05s both; }
.hero__lower { animation: fade 1s var(--ease) 0.45s both; }
.hero__base { animation: fade 1s var(--ease) 0.7s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(105%); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

/* 7. Trades ---------------------------------------------- */
.trades {
  --tp: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: calc(-1 * var(--tp));
  border-top: 1px solid var(--paper-faint);
}
.trade {
  display: flex;
  flex-direction: column;
  padding: 2rem var(--tp) 2.25rem;
}
.trade + .trade { border-left: 1px solid var(--paper-faint); }

.trade__drawing {
  aspect-ratio: 4 / 3;
  margin-bottom: 2rem;
  outline: 1px solid var(--paper-faint);
  outline-offset: -1px;
  overflow: hidden;
  --grid: rgba(238,232,220,0.05);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--navy);
}
.trade__drawing svg { width: 100%; height: 100%; }

/* drawing strokes */
.trade svg .ln { stroke: rgba(238,232,220,0.78); stroke-width: 1.3; fill: none; }
.trade svg .ln-mid { stroke: rgba(238,232,220,0.42); stroke-width: 1; fill: none; }
.trade svg .ln-faint { stroke: rgba(238,232,220,0.16); stroke-width: 1; }
.trade svg .ln-copper { stroke: var(--copper-hi); stroke-width: 1.4; }
.trade svg .ln-thick { stroke-width: 3; }
.trade svg .fill-bg { fill: var(--navy); }
.trade svg .lbl {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: rgba(238,232,220,0.6);
}
.trade svg .lbl--copper { fill: var(--copper-hi); }
.trade svg .ln-copper,
.trade svg .lbl--copper { transition: opacity 0.4s var(--ease); }
.trade:not(:hover) svg .ln-copper { opacity: 0.85; }

.trade__title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 720;
  font-stretch: 80%;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 1rem;
  transition: color 0.3s var(--ease);
}
.trade__body p { color: var(--paper-soft); max-width: 30em; }
.trade:hover .trade__title { color: var(--copper-hi); }

/* 8. Strata (A Lead Isn't a Job) ------------------------- */
.problem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 2rem + 4vw, 7rem);
  align-items: start;
}
.problem__copy { position: sticky; top: calc(var(--header-h) + 2rem); }
.problem__copy .display { margin-bottom: 2rem; }
.problem__copy p + p { margin-top: 1.1rem; }
.problem__copy p:not(.lead) { color: var(--ink-soft); max-width: 34em; }
.problem__copy .lead { margin-bottom: 1.5rem; }
.problem__copy .btn { margin-top: 2.25rem; }

.strata__caption {
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.strata__layers { border: 1.5px solid var(--ink); }
.stratum {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  padding: 1.5rem 1.5rem 1.6rem 0;
  min-height: 7.25rem;
  border-top: 1.5px solid var(--ink);
  color: var(--ink);
  background-color: var(--ivory);
}
.stratum:first-child { border-top: 0; }
.stratum__n {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: center;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.9;
}
.stratum__name {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 740;
  font-stretch: 78%;
  line-height: 1.05;
  text-transform: uppercase;
}
.stratum__note { margin-top: 0.35rem; font-size: 0.975rem; line-height: 1.45; max-width: 30em; }

/* each layer gets a soil texture; progressively denser, ending in bedrock */
.stratum::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3.25rem;
  border-right: 1.5px solid var(--ink);
}
.stratum--1 { background: var(--ivory); }
.stratum--1::before { background: radial-gradient(circle, rgba(21,26,32,0.35) 1px, transparent 1.4px) 0 0 / 9px 9px; }
.stratum--2 { background: var(--ivory-2); }
.stratum--2::before { background: repeating-linear-gradient(45deg, rgba(21,26,32,0.38) 0 1px, transparent 1px 8px); }
.stratum--3 { background: #D6CBB6; }
.stratum--3::before {
  background:
    repeating-linear-gradient(45deg, rgba(21,26,32,0.42) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(21,26,32,0.42) 0 1px, transparent 1px 7px);
}
.stratum--4 { background: var(--charcoal); color: var(--ivory); border-top-color: var(--ink); }
.stratum--4::before { background: repeating-linear-gradient(0deg, rgba(238,232,220,0.35) 0 1px, transparent 1px 6px); border-right-color: rgba(238,232,220,0.3); }
.stratum--4 .stratum__note { color: rgba(238,232,220,0.78); }
.stratum--5 { background: var(--basalt); color: var(--ivory); }
.stratum--5::before {
  background:
    linear-gradient(135deg, transparent 46%, rgba(201,132,79,0.7) 47%, rgba(201,132,79,0.7) 50%, transparent 51%) 0 0 / 22px 16px,
    linear-gradient(45deg, transparent 46%, rgba(201,132,79,0.45) 47%, rgba(201,132,79,0.45) 50%, transparent 51%) 11px 8px / 22px 16px;
  border-right-color: var(--copper);
}
.stratum--5 .stratum__name { color: var(--copper-hi); }
.stratum--5 .stratum__note { color: rgba(238,232,220,0.82); }
.stratum__n { position: relative; z-index: 1; padding: 0.1rem 0.3rem; }
.stratum--1 .stratum__n { background: var(--ivory); }
.stratum--2 .stratum__n { background: var(--ivory-2); }
.stratum--3 .stratum__n { background: #D6CBB6; }
.stratum--4 .stratum__n { background: var(--charcoal); }
.stratum--5 .stratum__n { background: var(--basalt); color: var(--copper-hi); }

/* reveal: layers settle in order when scrolled into view */
.js .strata__layers.will-reveal .stratum { opacity: 0; transform: translateY(-0.6rem); }
.js .strata__layers.is-revealed .stratum {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .strata__layers.is-revealed .stratum--2 { transition-delay: 0.12s; }
.js .strata__layers.is-revealed .stratum--3 { transition-delay: 0.24s; }
.js .strata__layers.is-revealed .stratum--4 { transition-delay: 0.36s; }
.js .strata__layers.is-revealed .stratum--5 { transition-delay: 0.48s; }

/* 9. Approach / Handle ----------------------------------- */
.approach {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  position: relative;
}
.approach__item { position: relative; padding-top: 2.75rem; }
/* the connecting line between components */
.approach__item::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 0;
  right: calc(-1 * clamp(1.25rem, 0.5rem + 2vw, 2.5rem));
  height: 1px;
  background: rgba(238,232,220,0.28);
}
.approach__item:last-child::before { right: 0; }
.approach__item::after {
  content: "";
  position: absolute;
  top: calc(0.95rem - 4px);
  left: 0;
  width: 9px; height: 9px;
  background: var(--copper);
}
.approach__n {
  position: absolute;
  top: 0;
  left: 1.5rem;
  padding-inline: 0.5rem;
  background: var(--navy);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.9rem;
  color: var(--copper-hi);
}
.approach__title {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 720;
  font-stretch: 80%;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.approach__item p { color: var(--paper-soft); font-size: 1rem; }

.handle {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 2rem clamp(2rem, 1rem + 4vw, 6rem);
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  border-top: 1px solid var(--paper-faint);
}
.handle__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
}
.handle__row { padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--paper-faint); }
.handle__row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.handle__row dt {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 680;
  font-stretch: 88%;
  margin-bottom: 0.5rem;
}
.handle__row dd { color: var(--paper-soft); font-size: 1rem; }

/* 10. Steps / About / FAQ -------------------------------- */
.how__title { margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); }
.steps { display: grid; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 1rem clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
  padding-block: clamp(1.75rem, 1rem + 2vw, 3rem);
  border-top: 1px solid var(--paper-faint);
}
.step:last-child { border-bottom: 1px solid var(--paper-faint); }
.step__n {
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 3rem + 7vw, 10rem);
  font-weight: 800;
  font-stretch: 66%;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(238,232,220,0.4);
  transition: color 0.4s var(--ease), -webkit-text-stroke-color 0.4s var(--ease);
}
.step:hover .step__n { -webkit-text-stroke-color: var(--copper-hi); }
.step__title {
  font-family: var(--f-display);
  font-size: var(--step-3);
  font-weight: 740;
  font-stretch: 76%;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.step__body p { color: var(--paper-soft); max-width: 36em; }

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2.5rem clamp(2rem, 1rem + 5vw, 7rem);
  align-items: start;
}
.about__body p + p { margin-top: 1.1rem; }
.about__body p:not(.lead) { color: var(--ink-soft); max-width: 36em; }
.about__body .lead { margin-bottom: 1.5rem; }
.about__facts {
  margin-top: 2.5rem;
  border-top: 1.5px solid var(--ink);
}
.about__facts li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid rgba(21,26,32,0.18);
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
}
.about__facts li > span { color: var(--ink-soft); font-weight: 600; }
.about__facts a { text-decoration-color: var(--copper); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.about__facts a:hover { color: var(--copper); }

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2.5rem clamp(2rem, 1rem + 5vw, 7rem);
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  border-top: 1.5px solid var(--ink);
}
.faq__list { border-top: 1px solid rgba(21,26,32,0.25); }
.faq__item { border-bottom: 1px solid rgba(21,26,32,0.25); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 50%;
  width: 14px; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover { color: var(--copper); }
.faq__answer { padding: 0 3rem 1.6rem 0; }
.faq__answer p { color: var(--ink-soft); max-width: 38em; }
.faq__item[open] .faq__answer { animation: fade 0.4s var(--ease); }

/* 11. Closing / Footer ----------------------------------- */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(6rem, 4rem + 10vw, 12rem);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(176,109,59,0.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--basalt) 100%);
}
.closing__grade { display: none; }
/* the headline sits on a "grade line"; hatched ground below it */
.closing__lower::before {
  content: "";
  position: absolute;
  top: 0; bottom: calc(-1 * clamp(6rem, 4rem + 10vw, 12rem));
  left: -50vw; right: -50vw;
  z-index: -1;
  background: repeating-linear-gradient(45deg, rgba(238,232,220,0.05) 0 1px, transparent 1px 12px);
  border-top: 1px solid rgba(238,232,220,0.16);
}
.closing__title {
  font-family: var(--f-display);
  font-size: var(--step-5);
  font-weight: 800;
  font-stretch: 68%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 13ch;
  text-wrap: balance;
}
.closing__lower {
  display: grid;
  grid-template-columns: minmax(0, 30rem) auto;
  justify-content: space-between;
  align-items: end;
  gap: 2rem 3rem;
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.closing__text { font-size: var(--step-1); line-height: 1.5; color: rgba(238,232,220,0.86); }
.closing__actions { display: grid; gap: 1rem; justify-items: start; }
.closing__alt { font-size: 0.9375rem; color: var(--paper-soft); }
.closing__alt a { color: var(--paper); text-decoration-color: var(--copper); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.closing__alt a:hover { color: var(--copper-hi); }

.site-footer {
  background: var(--basalt);
  color: var(--paper-soft);
  padding-block: 3.5rem 2rem;
  border-top: 1px solid var(--paper-faint);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.site-footer__name {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 760;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.site-footer__desc { margin-top: 0.4rem; font-size: 0.9375rem; max-width: 28rem; }
.site-footer__links { display: grid; gap: 0.6rem; justify-items: start; font-family: var(--f-display); font-size: 0.9375rem; }
.site-footer__links a { text-decoration: none; overflow-wrap: anywhere; }
.site-footer__links a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 0.2em; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-faint);
  font-size: 0.8125rem;
  color: var(--concrete);
}

/* Legal + 404 pages -------------------------------------- */
.legal-page .site-header { position: sticky; }
.legal-back {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--paper-soft);
  text-underline-offset: 0.2em;
}
.legal-back:hover { color: var(--paper); }
.legal { background: var(--ivory); color: var(--ink); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.legal__inner { max-width: 46rem; }
.legal__inner .display { margin-bottom: 0.75rem; }
.legal__updated { font-family: var(--f-display); font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 2.5rem; }
.legal__draft {
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--copper);
  background: var(--ivory-2);
  font-size: 0.9375rem;
}
.legal h2 {
  margin: 2.25rem 0 0.6rem;
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 720;
  font-stretch: 86%;
}
.legal p + p { margin-top: 0.9rem; }
.legal a:not(.btn) { text-decoration-color: var(--copper); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal__back { margin-top: 3rem; }

.notfound {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 4rem;
  background: radial-gradient(100% 80% at 80% 20%, #22344A 0%, var(--navy) 40%, var(--basalt) 85%);
}
.notfound .display { margin-bottom: 1.25rem; }
.notfound .lead { color: var(--paper-soft); }
.notfound__code { font-family: var(--f-display); font-weight: 700; color: var(--copper-hi); margin-bottom: 1rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

/* Responsive --------------------------------------------- */
@media (max-width: 1100px) {
  .primary-nav ul { gap: 1.25rem; }
  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3.5rem; }
  .approach__item:nth-child(2)::before { right: 0; }
  .handle { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .primary-nav, .site-header__cta { display: none; }
  .menu-toggle { display: inline-flex; }

  .section-head--split,
  .problem,
  .about,
  .faq { grid-template-columns: minmax(0, 1fr); }
  .problem__copy { position: static; }

  .trades { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-inline: 0; }
  .trade { padding: 0 0 3rem; }
  .trade + .trade { border-left: 0; padding-top: 3rem; border-top: 1px solid var(--paper-faint); }
  .trade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
  .trade__drawing { margin-bottom: 0; }

  .hero__lower { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .hero__line--step { padding-left: 0.6em; }
  .closing__lower { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --header-h: 4rem; }
  .wordmark__top { font-size: 1rem; }
  .wordmark__bottom { font-size: 0.625rem; }
  .wordmark__mark { width: 1.75rem; height: 1.75rem; }

  .hero__content { padding-top: calc(var(--header-h) + 2rem); }
  .hero__title { font-size: min(11vw, 3.4rem); }
  .hero__line--step { padding-left: 0.45em; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__scope { padding-inline: var(--gutter); }
  .hero__scope li { flex: 1 1 50%; min-width: 0; padding: 0.85rem 0.75rem 0.85rem 0; font-size: 0.8125rem; }
  .hero__scope li + li { padding-left: 0; border-left: 0; }
  .hero__scope li:nth-child(even) { padding-left: 0.85rem; border-left: 1px solid var(--paper-faint); }
  .hero__scope li:nth-child(n+3) { border-top: 1px solid var(--paper-faint); }

  .trade { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

  .stratum { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.15rem 1rem 1.25rem 0; min-height: 0; }
  .stratum::before { width: 2.5rem; }

  .approach { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .approach__item { padding: 0 0 2.5rem 2.5rem; }
  .approach__item::before { top: 0.5rem; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .approach__item:last-child::before { display: none; }
  .approach__item::after { top: 0.5rem; }
  .approach__n { position: static; display: block; padding: 0; margin-bottom: 0.5rem; background: none; line-height: 1.2; }

  .handle__list { grid-template-columns: minmax(0, 1fr); }
  .handle__row:nth-child(2) { border-top: 1px solid var(--paper-faint); padding-top: 1.5rem; }

  .step { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .step__n { font-size: 4.5rem; }

  .about__facts li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }

  .faq__item summary { padding-right: 2.25rem; }
  .faq__answer { padding-right: 0; }

  .closing__actions { justify-items: stretch; }
  .closing__actions .btn { width: 100%; }
  .site-footer__legal { flex-direction: column; }
}

/* 12. Motion preferences --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .hero__line > span,
  .hero__eyebrow,
  .hero__lower,
  .hero__base { animation: none !important; }
  .js .strata__layers.will-reveal .stratum { opacity: 1; transform: none; }
}

/* Brand logo mark */
.wordmark__logo { width: 2.5rem; height: 2.5rem; border-radius: 6px; background: #fff; object-fit: contain; }
@media (max-width: 640px) { .wordmark__logo { width: 2.125rem; height: 2.125rem; } }

/* One-line brand name */
.wordmark__name { font-size: 1.125rem; font-weight: 700; font-stretch: 85%; letter-spacing: 0.01em; white-space: nowrap; }
@media (max-width: 640px) { .wordmark__name { font-size: 0.95rem; } }