:root {
  /* "Oat & Walnut" - warm light earth theme. Legacy token names are kept to
     limit churn, but their MEANING is inverted for the light theme:
       --bone / --bone-soft  = walnut text (was light text on dark)
       --black/--ink/--charcoal/--charcoal-2 = oat/parchment surfaces
       --gold-soft           = olive-sage accent (eyebrows, CTAs, sublines)
       --gold                = warm gold (rules, numbers, the pin)
     If you add new rules, read the values, not the names. */
  --black: #f7f3ea;
  --ink: #f3eee2;
  --charcoal: #f0eadc;
  --charcoal-2: #eae3d2;
  --stone: #c2a878;
  --line: rgba(56, 48, 31, 0.12);
  --line-strong: rgba(94, 110, 72, 0.48);
  --gold: #a87f3e;
  --gold-soft: #5e6e48;
  --bone: #2d251a;
  --bone-soft: #52483a;
  --muted: #6e6151;
  --dim: #8a7d6b;
  /* The steel accent is Tynrose's brand blue (#0369a1 on tynrosesecure.com)
     deepened and desaturated ~30% so it sits IN the warm paper instead of
     vibrating on top of it. Same hue family, so the two firms still read as
     related. Steel runs the kickers, rules, CTAs, hovers, numbers, and marks;
     gold stays on the timber, the pin, and the big index numerals for warmth. */
  --steel: #1d5c80;
  --steel-line: rgba(29, 92, 128, 0.5);
  --steel-bright: #4189ae;
  --steel-wash: rgba(29, 92, 128, 0.06);
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --page-pad: clamp(22px, 4vw, 76px);
  --left-rail: clamp(142px, 15vw, 238px);
  --max-width: 1560px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  color: var(--bone);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% 14%, rgba(176, 137, 74, 0.08), transparent 38vw),
    linear-gradient(180deg, #faf7f0 0%, #f6f1e6 50%, #f0eadb 100%);
  color: var(--bone);
  font-family: var(--sans);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background: radial-gradient(circle at 80% 16%, rgba(168, 127, 62, 0.07), transparent 42vw);
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(74, 58, 36, 0.06) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(74, 58, 36, 0.05) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 70%, rgba(74, 58, 36, 0.045) 0 1px, transparent 1px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
  mix-blend-mode: multiply;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 36px;
  align-items: center;
  height: 96px;
  padding: 0 var(--page-pad);
  border-bottom: 1px solid rgba(56, 48, 31, 0.12);
  background: rgba(250, 247, 240, 0.82);
  backdrop-filter: blur(18px);
  transition:
    background 240ms ease,
    border-color 240ms ease;
}

.site-header.is-scrolled {
  background: rgba(246, 241, 230, 0.92);
  border-bottom-color: rgba(56, 48, 31, 0.18);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  gap: 8px;
  line-height: 1;
}

.brand-name {
  display: block;
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(28px, 2.25vw, 44px);
  letter-spacing: 0;
}

.brand-subline {
  display: block;
  color: var(--steel);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.nav-links,
.site-footer nav {
  display: flex;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.nav-links a,
.site-footer a,
.header-cta,
.large-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav-links a {
  color: var(--bone-soft);
  transition: color 180ms ease;
}

.nav-links a:hover {
  color: var(--steel);
}

.header-cta {
  justify-self: end;
  min-width: 250px;
  padding: 18px 26px;
  border: 1px solid var(--steel-line);
  color: var(--steel);
  text-align: center;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.header-cta:hover,
.large-cta:hover {
  border-color: var(--steel);
  background: var(--steel-wash);
  color: var(--bone);
}

main {
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.section-frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--left-rail) minmax(0, 1fr);
  min-height: 420px;
  border-bottom: 1px solid rgba(56, 48, 31, 0.1);
}

.hero {
  grid-template-columns: minmax(360px, 0.72fr) minmax(420px, 1fr);
  min-height: clamp(700px, 80vh, 790px);
  padding-top: 96px;
  overflow: hidden;
}

.hero-copy {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(42px, 5vw, 78px) 0 clamp(30px, 4vw, 56px) var(--page-pad);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  max-width: 720px;
  color: var(--bone);
  font-size: clamp(44px, 4.9vw, 78px);
  line-height: 1.12;
}

.hero-owned {
  color: var(--steel);
  font-style: italic;
  white-space: nowrap;
}

/* The rule under headlines: steel, the brand's cool signature line. */
.gold-rule {
  width: 88px;
  height: 1px;
  margin: 34px 0 24px;
  background: var(--steel);
}

.hero-kicker,
.section-subtitle {
  max-width: 600px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1.9;
  text-transform: uppercase;
}

.hero-body {
  max-width: 430px;
  margin-top: 20px;
  color: var(--bone-soft);
  font-size: 17px;
  line-height: 1.62;
}

.scroll-cue {
  display: inline-grid;
  grid-template-columns: 18px auto;
  gap: 18px;
  align-items: center;
  width: max-content;
  margin-top: clamp(34px, 5vw, 58px);
  color: var(--bone-soft);
}

.scroll-cue span {
  order: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.scroll-cue svg {
  width: 18px;
  height: 62px;
  stroke: var(--steel);
  stroke-width: 1.2;
  fill: none;
}

.hero-architecture {
  position: relative;
  min-height: 0;
}

.tenon-joint {
  position: absolute;
  right: -4%;
  bottom: -12%;
  width: min(900px, 116%);
  opacity: 0.97;
  filter: drop-shadow(0 30px 60px rgba(86, 64, 36, 0.2));
  shape-rendering: geometricPrecision;
}

.tenon-joint path,
.tenon-joint line,
.tenon-joint circle {
  vector-effect: non-scaling-stroke;
}

.tenon-joint .member {
  fill: url("#timber");
  stroke: rgba(58, 44, 26, 0.45);
  stroke-width: 1.25;
}

.tenon-joint .tenon-tongue {
  fill: #c39b6a;
  stroke: rgba(110, 78, 44, 0.72);
  stroke-width: 1.45;
}

/* Joint construction lines drawn in blueprint-steel: warm timber members,
   cool engineering lines, gold pin. The one cool note in the hero. */
.tenon-joint .joint-line {
  fill: none;
  stroke: var(--steel-line);
  stroke-width: 1;
}

.tenon-joint .pin-axis {
  stroke: rgba(223, 187, 113, 0.42);
  stroke-width: 1;
}

/* The gold draw-pin locks the tenon in the mortise: the one lit element. */
.tenon-joint .pin {
  fill: url("#pin");
  stroke: rgba(240, 215, 154, 0.82);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 22px rgba(202, 164, 93, 0.42));
  cursor: pointer;
  transition: filter 260ms ease;
}

/* The pin is the hidden way in: hover intensifies the lock's glow. */
.tenon-joint .pin:hover {
  filter: drop-shadow(0 0 32px rgba(226, 195, 125, 0.72));
}

.section-index {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 68px 0 64px var(--page-pad);
  border-right: 1px solid rgba(56, 48, 31, 0.16);
}

.section-index::after {
  width: 96px;
  max-width: calc(var(--left-rail) - var(--page-pad) - 24px);
  height: 1px;
  content: "";
  background: var(--steel-line);
}

.index-number {
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1;
}

.index-label {
  margin-top: -6px;
  max-width: calc(var(--left-rail) - var(--page-pad));
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--steel);
}

.section-body {
  padding: 68px clamp(28px, 6vw, 92px) 74px;
}

.section-body h2 {
  max-width: 760px;
  color: var(--bone);
  font-size: clamp(42px, 5.2vw, 86px);
  line-height: 1.22;
}

.market {
  min-height: 430px;
}

.market .section-body {
  align-self: center;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 6vw, 92px);
  max-width: 1060px;
  margin-top: 58px;
  padding-top: 34px;
  border-top: 1px solid rgba(56, 48, 31, 0.12);
}

.market-grid p,
.pillar p,
.process-spine p,
.engagement p,
.closing p {
  color: var(--bone-soft);
  font-size: 16px;
  line-height: 1.7;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1240px;
  margin-top: 64px;
}

.pillar {
  min-height: 310px;
  padding: 18px clamp(22px, 2.6vw, 44px) 24px;
  border-left: 1px solid var(--steel-line);
}

.pillar-number {
  display: block;
  margin-bottom: 26px;
  color: var(--steel);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.pillar svg {
  width: 64px;
  height: 64px;
  margin-bottom: 36px;
  fill: none;
  stroke: var(--steel-line);
  stroke-width: 1.1;
}

.build-foot {
  max-width: 760px;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.pillar h3,
.process-spine h3 {
  margin-bottom: 18px;
  color: var(--bone);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.process .section-body {
  align-self: center;
}

.section-subtitle {
  margin-top: 22px;
}

.process-spine {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: 1120px;
  margin-top: 76px;
  padding-top: 34px;
  border-top: 1px solid var(--steel-line);
}

.process-spine::after {
  position: absolute;
  top: 28px;
  right: -4px;
  width: 13px;
  height: 13px;
  content: "";
  border-top: 1px solid var(--steel);
  border-right: 1px solid var(--steel);
  transform: rotate(45deg);
}

.process-spine article {
  position: relative;
}

.process-spine article::before {
  position: absolute;
  top: -40px;
  left: 0;
  width: 1px;
  height: 12px;
  content: "";
  background: var(--steel);
}

.process-spine span {
  display: block;
  margin-bottom: 18px;
  color: var(--steel);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.process-spine p {
  font-size: 14px;
  color: var(--muted);
}

/* 02 The Reframe: one wide statement, steel accent inside the headline. */
.reframe .section-body {
  align-self: center;
}

.accent-steel {
  color: var(--steel);
}

.reframe-body {
  max-width: 680px;
  color: var(--bone-soft);
  font-size: 17px;
  line-height: 1.7;
}

/* 05 What You Keep: the ownership list. */
.keep-list {
  max-width: 760px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: keep;
  border-top: 1px solid var(--steel-line);
}

.keep-list li {
  counter-increment: keep;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone-soft);
  font-size: 16px;
  line-height: 1.6;
}

.keep-list li::before {
  content: "0" counter(keep);
  color: var(--steel);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.keep-foot {
  max-width: 760px;
  margin-top: 30px;
  color: var(--bone);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}

/* 06 Engagement: the shape of the commitment, no numbers in public. */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 64px);
  max-width: 980px;
  margin-top: 44px;
}

.terms-grid article {
  padding-top: 26px;
  border-top: 1px solid var(--steel-line);
}

.terms-grid span {
  display: block;
  margin-bottom: 16px;
  color: var(--steel);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.terms-grid p {
  margin: 0;
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.65;
}

.engagement-note {
  max-width: 660px;
  margin-top: 44px;
  color: var(--bone-soft);
  font-size: 16px;
  line-height: 1.7;
}

/* The fit paragraph sits directly under the rule; the closing line hangs back. */
.engagement .gold-rule + .engagement-note {
  margin-top: 0;
  margin-bottom: 18px;
}

.engagement .section-subtitle {
  margin-top: 34px;
}

.build-foot strong {
  color: var(--steel);
  font-weight: 600;
}

.engagement {
  grid-template-columns: var(--left-rail) minmax(0, 1.16fr) minmax(280px, 0.54fr);
  min-height: 360px;
}

.engagement .section-body {
  align-self: center;
}

.engagement .section-body h2 {
  max-width: 760px;
  font-size: clamp(42px, 4.5vw, 74px);
  line-height: 1.2;
}

.engagement .gold-rule,
.closing .gold-rule {
  margin: 30px 0 22px;
}

.engagement p {
  max-width: 610px;
}

.door-architecture {
  display: grid;
  place-items: center;
  padding: 42px var(--page-pad) 42px 0;
  opacity: 0.64;
}

.door-architecture svg {
  width: min(420px, 100%);
  fill: none;
  stroke: rgba(110, 84, 48, 0.5);
  stroke-width: 1.1;
}

.closing {
  grid-template-columns: var(--left-rail) minmax(0, 1fr) minmax(310px, 0.55fr);
  min-height: 360px;
  background:
    linear-gradient(90deg, rgba(168, 127, 62, 0.06), transparent 24%),
    rgba(56, 48, 31, 0.025);
}

.closing-copy h2 {
  max-width: 760px;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.24;
}

.cta-block {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.large-cta {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  min-width: 360px;
  padding: 25px 34px;
  border: 1px solid var(--steel-line);
  color: var(--steel);
}

/* Visible, copyable address: the fallback for visitors whose browsers have no
   mail handler, so the mailto CTA is never a dead end. */
.cta-email {
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--bone-soft);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: all;
}

.cta-email-hint {
  color: var(--dim);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cta-email:hover .cta-email-hint {
  color: var(--steel);
}

.large-cta svg {
  width: 54px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  padding: 36px var(--page-pad) 58px;
  border-top: 1px solid var(--line-strong);
}

.site-footer .brand-name {
  font-size: 34px;
}

.site-footer nav {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.site-footer a,
.site-footer p {
  color: var(--bone-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.8;
  text-transform: uppercase;
}

.site-footer p {
  justify-self: end;
  margin: 0;
  text-align: right;
}

/* Mail chooser: shown when any mailto CTA is clicked, so email always has a
   working path regardless of whether the visitor has a default mail app. */
.mail-chooser {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(45, 37, 26, 0.32);
  backdrop-filter: blur(3px);
}

.mail-chooser-card {
  position: relative;
  width: min(420px, 100%);
  padding: 30px 30px 26px;
  border: 1px solid var(--steel-line);
  background: #fbf8f1;
  box-shadow: 0 24px 64px rgba(45, 37, 26, 0.25);
}

.mail-chooser-title {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mail-chooser-addr {
  margin: 0 0 22px;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 16px;
  user-select: all;
}

.mail-chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mail-chooser-grid button {
  padding: 13px 10px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--bone-soft);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mail-chooser-grid button:hover {
  border-color: var(--steel);
  background: var(--steel-wash);
  color: var(--bone);
}

.mail-chooser-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mail-chooser-close:hover {
  color: var(--bone);
}

/* Reveal-on-scroll: gated behind .reveal-ready so content is always
   visible if JS fails to run (no blank sections, ever). */
[data-reveal] {
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 1100px) {
  :root {
    --left-rail: 126px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    display: none;
  }

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

  .hero-copy {
    min-height: auto;
    padding-right: var(--page-pad);
    padding-bottom: 34px;
  }

  .hero-architecture {
    min-height: 430px;
  }

  .tenon-joint {
    right: -2%;
    width: min(720px, 100%);
  }

  .process-spine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 56px;
  }

  .pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .pillar {
    min-height: 0;
  }

  .engagement,
  .closing {
    grid-template-columns: var(--left-rail) minmax(0, 1fr);
  }

  .door-architecture,
  .cta-block {
    grid-column: 2;
  }

  .door-architecture {
    justify-content: start;
    padding: 0 clamp(28px, 6vw, 92px) 64px;
  }

  .cta-block {
    justify-self: start;
    align-items: flex-start;
    margin: 0 clamp(28px, 6vw, 92px) 68px;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer p {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  :root {
    --page-pad: 22px;
    --left-rail: 1fr;
  }

  .site-header {
    position: static;
    height: auto;
    min-height: 82px;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .header-cta {
    justify-self: start;
    min-width: 0;
    width: 100%;
    padding: 15px 18px;
  }

  .brand-subline {
    font-size: 9px;
  }

  .section-frame,
  .hero,
  .engagement,
  .closing {
    display: block;
  }

  .hero {
    min-height: auto;
    padding-top: 0;
  }

  .hero-copy {
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 28px;
  }

  h1 {
    font-size: clamp(43px, 13.5vw, 62px);
  }

  .hero-kicker,
  .section-subtitle {
    font-size: 11px;
  }

  .hero-body {
    font-size: 15px;
  }

  .scroll-cue {
    margin-top: 34px;
  }

  .hero-architecture {
    min-height: 250px;
    overflow: hidden;
  }

  .tenon-joint {
    right: -16%;
    bottom: -14%;
    width: 128%;
  }

  .section-index {
    padding: 44px var(--page-pad) 0;
    border-right: 0;
  }

  .section-index::after {
    width: 74px;
  }

  .section-body {
    padding: 34px var(--page-pad) 58px;
  }

  .section-body h2 {
    font-size: clamp(38px, 11vw, 56px);
  }

  .market-grid,
  .pillar-grid,
  .process-spine,
  .terms-grid {
    grid-template-columns: 1fr;
  }

  .terms-grid {
    gap: 28px;
  }

  .keep-list li {
    grid-template-columns: 44px 1fr;
  }

  .market-grid {
    gap: 24px;
    margin-top: 40px;
  }

  .pillar {
    min-height: 0;
    padding: 32px 0;
    border-left: 0;
    border-top: 1px solid var(--steel-line);
  }

  .pillar svg {
    margin-bottom: 28px;
  }

  .process-spine {
    gap: 42px;
    margin-top: 54px;
  }

  .process-spine::after {
    display: none;
  }

  .process-spine article {
    padding-left: 22px;
    border-left: 1px solid var(--line-strong);
  }

  .process-spine article::before {
    top: 0;
    left: -1px;
    width: 1px;
    height: 100%;
    background: var(--gold);
    opacity: 0.4;
  }

  .door-architecture {
    padding: 0 var(--page-pad) 48px;
  }

  .cta-block {
    width: calc(100% - (var(--page-pad) * 2));
    margin: 0 var(--page-pad) 58px;
    align-items: stretch;
  }

  .large-cta {
    width: 100%;
    min-width: 0;
    padding: 22px 20px;
  }

  .cta-email {
    justify-content: center;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .site-footer nav {
    gap: 10px;
  }

}

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

  /* Never hide content from reduced-motion users. */
  .reveal-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}