/* ==========================================================================
   seatbeltsupplier.com — The Automotive Supply Library
   Design system: deep forest green + soft ivory + warm charcoal
                  + muted copper + pale sage
   Type: DM Serif Display (editorial) / Inter (interface)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Palette */
  --green-900: #0D1F18;
  --green-800: #13291F;
  --green-700: #1B3A2F;   /* primary — deep forest green */
  --green-600: #27503F;
  --green-500: #3B6A55;

  --sage-400: #B4C6AE;
  --sage-300: #C9D6C4;    /* pale sage */
  --sage-200: #DDE5D8;
  --sage-100: #EAEFE6;

  --ivory:     #F7F4EC;   /* soft ivory — page ground */
  --ivory-2:   #FBF9F3;
  --paper:     #FFFEFA;

  --charcoal:  #2E2C28;   /* warm charcoal */
  --charcoal-2:#514D45;
  --charcoal-3:#6B6459;

  --copper:    #A96B3C;   /* muted copper — accent */
  --copper-dk: #8A5430;
  --copper-lt: #C58C5C;

  /* Semantic */
  --bg:        var(--ivory);
  --ink:       var(--green-700);
  --body:      var(--charcoal-2);
  --muted:     var(--charcoal-3);
  --rule:      rgba(27, 58, 47, 0.14);
  --rule-soft: rgba(27, 58, 47, 0.08);
  --rule-firm: rgba(27, 58, 47, 0.26);

  /* Type */
  --serif: "DM Serif Display", "Libre Baskerville", "Iowan Old Style",
           "Apple Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.3rem, 4.9vw, 4.05rem);
  --fs-h1:      clamp(2.05rem, 4.4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.65rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.75rem);
  --fs-h4:      clamp(1.06rem, 1.5vw, 1.22rem);
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.06rem, 1.35vw, 1.22rem);
  --fs-small:   0.9rem;
  --fs-label:   0.6875rem;

  /* Layout */
  --shell: 1260px;
  --shell-narrow: 900px;
  --gutter: clamp(1.15rem, 4.2vw, 3.75rem);
  --sec-y: clamp(3.75rem, 8vw, 7.5rem);
  --hdr-h: 74px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 720px) { :root { --hdr-h: 64px; } }

/* --------------------------------------------------------------------------
   02 — RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.09;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-decoration: none; }

img, svg, picture, video { max-width: 100%; }
img { border: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--charcoal); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

::selection { background: var(--sage-300); color: var(--green-900); }

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

.skip-link {
  position: absolute; top: -60px; left: var(--gutter); z-index: 200;
  background: var(--green-700); color: var(--ivory);
  padding: 0.7rem 1.15rem; font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   03 — LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--paper { background: var(--paper); }
.section--sage  { background: var(--sage-100); }
.section--green {
  background: var(--green-800); color: rgba(247, 244, 236, 0.78);
}
.section--green h1, .section--green h2,
.section--green h3, .section--green h4 { color: var(--ivory); }
.section--green .lede { color: rgba(247, 244, 236, 0.82); }

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

/* Editorial label — the archival voice of the whole site */
.label {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: var(--copper-dk);
  line-height: 1.4;
  margin: 0 0 1.35rem;
}
.label::before {
  content: ""; width: 26px; height: 1px;
  background: var(--copper); flex: none;
}
.label--plain::before { display: none; }
.label--sage { color: var(--sage-300); }
.label--sage::before { background: var(--sage-400); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.68;
  color: var(--charcoal-2);
  max-width: 62ch;
}
.measure { max-width: 68ch; }
.measure-tight { max-width: 56ch; }

/* Section masthead: rule + ref + title + lede */
.masthead { margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
.masthead__ref {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.85rem; margin-bottom: 1.85rem;
  font-size: var(--fs-label); letter-spacing: 0.185em;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.masthead__ref b { color: var(--copper-dk); font-weight: 600; }
.masthead__ref span:last-child { margin-left: auto; color: var(--muted); font-weight: 500; }
.section--green .masthead__ref { border-color: rgba(201, 214, 196, 0.24); color: var(--sage-300); }
.section--green .masthead__ref b { color: var(--copper-lt); }
.section--green .masthead__ref span:last-child { color: rgba(201, 214, 196, 0.6); }

/* --------------------------------------------------------------------------
   04 — BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.02rem 1.5rem; border-radius: 2px;
  border: 1px solid transparent; cursor: pointer;
  line-height: 1; text-align: left;
  transition: background-color .34s var(--ease), color .34s var(--ease),
              border-color .34s var(--ease), transform .34s var(--ease);
  position: relative; overflow: hidden;
}
.btn__arrow {
  width: 15px; height: 8px; flex: none;
  transition: transform .38s var(--ease-out);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--green-700); color: var(--ivory);
  box-shadow: inset 3px 0 0 var(--copper);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--green-900); color: #fff;
}
.btn--ghost {
  background: transparent; color: var(--green-700);
  border-color: var(--rule-firm);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--green-700); background: rgba(27, 58, 47, 0.045);
}
.btn--light {
  background: var(--ivory); color: var(--green-800);
  box-shadow: inset 3px 0 0 var(--copper);
}
.btn--light:hover, .btn--light:focus-visible { background: #fff; }
.btn--outline-light {
  background: transparent; color: var(--ivory);
  border-color: rgba(247, 244, 236, 0.32);
}
.btn--outline-light:hover, .btn--outline-light:focus-visible {
  border-color: var(--ivory); background: rgba(247, 244, 236, 0.08);
}

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

/* Quiet inline text link with animated rule */
.tlink {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-700);
  padding-bottom: 0.4rem; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--rule-firm);
  transform-origin: left; transition: transform .4s var(--ease-out), background-color .4s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { background: var(--copper); }
.tlink svg { transition: transform .38s var(--ease-out); }
.tlink:hover svg, .tlink:focus-visible svg { transform: translateX(4px); }
.tlink--light { color: var(--ivory); }
.tlink--light::after { background: rgba(247, 244, 236, 0.3); }

/* In-body prose link */
.prose-link {
  color: var(--green-700); font-weight: 500;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.prose-link:hover, .prose-link:focus-visible { color: var(--copper-dk); border-color: var(--green-700); }

/* --------------------------------------------------------------------------
   05 — ARCHIVE FRAME (the site's signature image container)
   Images always render at natural aspect — never cropped, never stretched.
   -------------------------------------------------------------------------- */
.frame {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: clamp(0.6rem, 1.1vw, 0.9rem);
  position: relative;
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--copper); pointer-events: none;
}
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.frame__strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 0.15rem 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: clamp(0.6rem, 1.1vw, 0.9rem);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.frame__strip b { color: var(--copper-dk); font-weight: 600; }
.frame__strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.frame__media {
  background: var(--sage-100);
  position: relative;
  overflow: hidden;
}
.frame__media img {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
.frame__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 0.15rem 0.1rem;
  border-top: 1px solid var(--rule-soft);
  margin-top: clamp(0.6rem, 1.1vw, 0.9rem);
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; line-height: 1.5;
}
.frame__foot b { color: var(--green-700); font-weight: 600; letter-spacing: 0.185em; }

.frame--bare { padding: 0; border-color: var(--rule); }
.frame--bare .frame__media { background: transparent; }

.frame--dark { background: var(--green-900); border-color: rgba(201, 214, 196, 0.2); }
.frame--dark .frame__strip { border-color: rgba(201, 214, 196, 0.16); color: var(--sage-300); }
.frame--dark .frame__strip b { color: var(--copper-lt); }
.frame--dark .frame__foot { border-color: rgba(201, 214, 196, 0.16); color: rgba(201, 214, 196, 0.68); }
.frame--dark .frame__foot b { color: var(--sage-300); }
.frame--dark .frame__media { background: var(--green-900); }

/* Plain media (no frame chrome) */
.media { margin: 0; }
.media img { display: block; width: 100%; height: auto; }
.media figcaption {
  margin-top: 0.85rem; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}

/* --------------------------------------------------------------------------
   06 — HEADER
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247, 244, 236, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.hdr__in {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem);
  height: var(--hdr-h);
  max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: block; flex: none; line-height: 1; }
.brand__name {
  display: block; font-family: var(--serif); font-size: 1.13rem;
  color: var(--green-700); letter-spacing: 0.005em; line-height: 1;
}
.brand__name i { font-style: normal; color: var(--copper-dk); }
.brand__sub {
  display: block; margin-top: 5px;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.235em;
  text-transform: uppercase; color: var(--muted);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.9rem, 1.75vw, 1.85rem); }
.nav__link {
  position: relative; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.115em; text-transform: uppercase;
  color: var(--charcoal-2); padding: 0.55rem 0; white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--green-700); transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--green-700); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--green-700); font-weight: 600; }
.nav__link[aria-current="page"]::after { background: var(--copper); transform: scaleX(1); }

.hdr__cta { flex: none; padding: 0.82rem 1.15rem; }

.hdr__burger {
  display: none; margin-left: auto; flex: none;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--rule-firm); border-radius: 2px;
  cursor: pointer; align-items: center; justify-content: center;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.hdr__burger:hover { border-color: var(--green-700); }
.hdr__burger span {
  display: block; position: relative; width: 18px; height: 1.5px;
  background: var(--green-700);
}
.hdr__burger span::before, .hdr__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: var(--green-700); transition: transform .35s var(--ease);
}
.hdr__burger span::before { top: -6px; }
.hdr__burger span::after  { top: 6px; }

@media (max-width: 1140px) {
  .nav, .hdr__cta { display: none; }
  .hdr__burger { display: flex; }
}

/* --------------------------------------------------------------------------
   07 — MOBILE MENU
   -------------------------------------------------------------------------- */
.mnav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ivory);
  display: flex; flex-direction: column;
  visibility: hidden; opacity: 0;
  transition: opacity .34s var(--ease), visibility .34s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.mnav.is-open { visibility: visible; opacity: 1; }
body.nav-locked { overflow: hidden; }

.mnav__bar {
  display: flex; align-items: center; height: var(--hdr-h); flex: none;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.mnav__close {
  margin-left: auto; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--rule-firm); border-radius: 2px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--green-700);
}
.mnav__close:hover { border-color: var(--green-700); }

.mnav__body {
  flex: 1 0 auto; padding: clamp(1.4rem, 4vw, 2.5rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column;
}
.mnav__list { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.mnav__list li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.mnav__link {
  display: flex; align-items: baseline; gap: 1rem;
  min-height: 62px; padding: 0.85rem 0;
  font-family: var(--serif); font-size: clamp(1.5rem, 6.2vw, 2rem);
  color: var(--green-700); line-height: 1.1;
  opacity: 0; transform: translateY(14px);
}
.mnav.is-open .mnav__link {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out) calc(var(--i, 0) * 45ms + 90ms),
              transform .5s var(--ease-out) calc(var(--i, 0) * 45ms + 90ms);
}
.mnav__link em {
  font-family: var(--sans); font-style: normal; font-size: 0.6875rem;
  font-weight: 600; letter-spacing: 0.18em; color: var(--copper-dk);
  flex: none; width: 2.1em;
}
.mnav__link[aria-current="page"] { color: var(--copper-dk); }

.mnav__cta { width: 100%; justify-content: space-between; margin-bottom: 2rem; }
.mnav__contact { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.mnav__contact a {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 52px; font-size: 1rem; color: var(--green-700); font-weight: 500;
}
.mnav__contact a svg { flex: none; color: var(--copper-dk); }
.mnav__contact a + a { border-top: 1px solid var(--rule-soft); }

/* --------------------------------------------------------------------------
   08 — HERO (open product archive)
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px) 0 0 / 25% 100%;
  opacity: 0.85;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center;
}
.hero__title {
  font-size: var(--fs-display); margin-bottom: 1.5rem;
}
.hero__title em { font-style: italic; color: var(--copper-dk); }
.hero__copy { max-width: 46ch; margin-bottom: 2.25rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.hero__meta div { padding-block: 0.5rem; }
.hero__meta dt {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem;
}
.hero__meta dd {
  margin: 0; font-family: var(--serif); font-size: 1.02rem; color: var(--green-700);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero::after { display: none; }
}

/* --------------------------------------------------------------------------
   09 — VERTICAL ARCHIVE INDEX
   -------------------------------------------------------------------------- */
.arcindex { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 940px) { .arcindex { grid-template-columns: 1fr; } }

.idx { border-top: 1px solid var(--rule-firm); }
.idx__row {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: clamp(0.85rem, 2vw, 1.75rem); align-items: center;
  padding: clamp(1.15rem, 2.3vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule);
  position: relative; color: inherit;
  transition: padding-inline .45s var(--ease-out);
}
.idx__row::before {
  content: ""; position: absolute; inset: 0 -1rem;
  background: var(--paper); opacity: 0; z-index: -1;
  transition: opacity .4s var(--ease);
}
.idx__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.idx__row:hover::before, .idx__row:focus-visible::before { opacity: 1; }
.idx__row:hover::after, .idx__row:focus-visible::after { transform: scaleX(1); }
.idx__row:hover, .idx__row:focus-visible { padding-inline: clamp(0.5rem, 1.4vw, 1rem); }

.idx__num {
  font-family: var(--serif); font-size: 1.05rem; color: var(--copper-dk);
  letter-spacing: 0.04em; line-height: 1;
}
.idx__body { min-width: 0; }
.idx__title {
  font-family: var(--serif); font-size: clamp(1.28rem, 2.5vw, 1.85rem);
  color: var(--green-700); line-height: 1.15; margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.idx__desc { font-size: 0.9rem; color: var(--muted); line-height: 1.55; margin: 0; max-width: 46ch; }
.idx__go {
  flex: none; width: 38px; height: 38px; border: 1px solid var(--rule-firm);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--green-700);
  transition: background-color .38s var(--ease), border-color .38s var(--ease),
              color .38s var(--ease), transform .38s var(--ease-out);
}
.idx__row:hover .idx__go, .idx__row:focus-visible .idx__go {
  background: var(--green-700); border-color: var(--green-700);
  color: var(--ivory); transform: rotate(-45deg);
}
@media (max-width: 560px) {
  .idx__row { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .idx__go { display: none; }
}

/* --------------------------------------------------------------------------
   10 — EDITORIAL BANDS (applications / products)
   -------------------------------------------------------------------------- */
.band { border-top: 1px solid var(--rule); padding-block: clamp(2.75rem, 6vw, 5.5rem); }
.band:first-of-type { border-top: 0; }
.band__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.8vw, 4.25rem); align-items: center;
}
.band--flip .band__media { order: -1; }
.band__num {
  font-family: var(--serif); font-size: clamp(2.75rem, 7vw, 5rem);
  line-height: 0.85; color: transparent;
  -webkit-text-stroke: 1px var(--sage-400);
  margin-bottom: 1.15rem; display: block; letter-spacing: 0.01em;
}
.band__title { margin-bottom: 1rem; }
.band__list {
  list-style: none; padding: 0; margin: 1.6rem 0 1.9rem;
  border-top: 1px solid var(--rule-soft);
}
.band__list li {
  display: flex; gap: 0.9rem; align-items: baseline;
  padding: 0.72rem 0; margin: 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.925rem; line-height: 1.6;
}
.band__list li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.5em;
  background: var(--copper); border-radius: 50%;
}
@media (max-width: 860px) {
  .band__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .band--flip .band__media { order: 0; }
}

/* --------------------------------------------------------------------------
   11 — CARD GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.15rem, 2.4vw, 1.85rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  position: relative; display: flex; flex-direction: column;
  transition: border-color .4s var(--ease), transform .4s var(--ease-out);
}
.card::after {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  background: var(--copper); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.card:hover { border-color: var(--rule-firm); }
.card:hover::after { transform: scaleY(1); }
.card__ref {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--copper-dk); margin-bottom: 1rem;
}
.card__title { font-size: var(--fs-h4); margin-bottom: 0.6rem; }
.card p { font-size: 0.925rem; line-height: 1.68; }
.card--sage { background: var(--sage-100); }
.card--flat { background: transparent; border-color: var(--rule); }

.card--dark {
  background: rgba(247, 244, 236, 0.045);
  border-color: rgba(201, 214, 196, 0.18);
  color: rgba(247, 244, 236, 0.76);
}
.card--dark .card__ref { color: var(--copper-lt); }

/* Numbered stack (buyer guide, approach steps) */
.stack { border-top: 1px solid var(--rule-firm); }
.stack__item {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.85rem, 3.6vw, 2.9rem) 0;
  border-bottom: 1px solid var(--rule);
}
.stack__n {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--copper-dk); line-height: 1; letter-spacing: 0.02em;
}
.stack__t { margin-bottom: 0.75rem; }
@media (max-width: 620px) {
  .stack__item { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* Definition rows */
.deflist { border-top: 1px solid var(--rule-firm); margin: 0; }
.deflist__row {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule);
}
.deflist dt {
  font-family: var(--serif); font-size: 1.1rem; color: var(--green-700); line-height: 1.25;
}
.deflist dd { margin: 0; font-size: 0.95rem; line-height: 1.7; }
@media (max-width: 720px) { .deflist__row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Pull quote / statement */
.statement {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.22; color: var(--ink); letter-spacing: -0.012em;
  max-width: 22ch; margin: 0;
}
.statement--wide { max-width: 30ch; }

/* --------------------------------------------------------------------------
   12 — METHODOLOGY RING (supplier approach)
   -------------------------------------------------------------------------- */
.ring-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .ring-wrap { grid-template-columns: 1fr; } }

.ring { position: relative; width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring__track { fill: none; stroke: var(--rule-firm); stroke-width: 1; }
.ring__arc {
  fill: none; stroke: var(--copper); stroke-width: 1.5;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.ring.in .ring__arc { stroke-dashoffset: 0; }
.ring__spoke { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }

.ring__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 43%; aspect-ratio: 1; border-radius: 50%;
  background: var(--green-700); color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
}
.ring__hub b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(0.98rem, 2.3vw, 1.28rem); line-height: 1.15; letter-spacing: 0.01em;
}
.ring__hub small {
  display: block; margin-top: 0.5rem; font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-300);
}

.ring__node {
  position: absolute; transform: translate(-50%, -50%);
  padding: 0.5rem 0.72rem; background: var(--ivory);
  border: 1px solid var(--rule-firm); border-radius: 2px;
  font-family: var(--sans); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--green-700);
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background-color .34s var(--ease), color .34s var(--ease),
              border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.ring__node:hover { border-color: var(--copper); }
.ring__node[aria-selected="true"] {
  background: var(--copper-dk); border-color: var(--copper-dk); color: var(--ivory);
  box-shadow: 0 0 0 4px rgba(169, 107, 60, 0.14);
}
@media (max-width: 480px) { .ring__node { font-size: 0.5rem; padding: 0.42rem 0.5rem; letter-spacing: 0.12em; } }

.ring-detail { border-top: 1px solid var(--rule-firm); padding-top: 1.6rem; min-height: 210px; }
.ring-detail__ref {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--copper-dk); margin-bottom: 0.9rem;
}
.ring-detail__t { margin-bottom: 0.7rem; }

/* --------------------------------------------------------------------------
   13 — REQUIREMENT CHECKLIST (buyer guide)
   -------------------------------------------------------------------------- */
.chklist {
  background: var(--paper); border: 1px solid var(--rule);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  position: relative;
}
.chklist__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--rule-firm);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--muted);
}
.chklist__count { color: var(--copper-dk); font-variant-numeric: tabular-nums; }
.chk {
  display: flex; align-items: center; gap: 0.95rem; width: 100%;
  min-height: 58px; padding: 0.6rem 0; background: transparent; border: 0;
  border-bottom: 1px solid var(--rule-soft); cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--charcoal-2);
  transition: color .3s var(--ease);
}
.chk:last-of-type { border-bottom: 0; }
.chk:hover { color: var(--green-700); }
.chk__box {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--rule-firm);
  border-radius: 1px; display: flex; align-items: center; justify-content: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.chk__box svg { width: 12px; height: 10px; }
.chk__box path {
  fill: none; stroke: var(--ivory); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20;
  transition: stroke-dashoffset .4s var(--ease-out);
}
.chk[aria-pressed="true"] { color: var(--green-700); }
.chk[aria-pressed="true"] .chk__box { background: var(--green-700); border-color: var(--green-700); }
.chk[aria-pressed="true"] .chk__box path { stroke-dashoffset: 0; }
.chk__ref { margin-left: auto; font-size: 0.625rem; color: var(--muted); letter-spacing: 0.185em; }

/* --------------------------------------------------------------------------
   14 — ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule-firm); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  display: flex; align-items: center; gap: 1.15rem; width: 100%;
  padding: clamp(1.15rem, 2.4vw, 1.6rem) 0; min-height: 66px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.8vw, 1.3rem);
  color: var(--green-700); line-height: 1.3;
  transition: color .3s var(--ease);
}
.acc__btn:hover { color: var(--copper-dk); }
.acc__q { flex: 1 1 auto; }
.acc__ref {
  flex: none; font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.185em; color: var(--copper-dk); width: 2.2em;
}
.acc__ico {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--rule-firm);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  position: relative; transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; background: var(--green-700);
  transition: transform .4s var(--ease-out), background-color .35s var(--ease);
}
.acc__ico::before { width: 12px; height: 1.5px; }
.acc__ico::after  { width: 1.5px; height: 12px; }
.acc__btn[aria-expanded="true"] .acc__ico { background: var(--green-700); border-color: var(--green-700); }
.acc__btn[aria-expanded="true"] .acc__ico::before,
.acc__btn[aria-expanded="true"] .acc__ico::after { background: var(--ivory); }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: scaleY(0); }

.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-right: clamp(0, 6vw, 5rem); }
.acc__panel > div > *:first-child { margin-top: 0; }
.acc__inner { padding: 0 0 clamp(1.4rem, 2.8vw, 2rem) calc(2.2em + 1.15rem); }
@media (max-width: 620px) { .acc__inner { padding-left: 0; } }
.no-js .acc__panel { grid-template-rows: 1fr; }
.no-js .acc__ico { display: none; }

/* --------------------------------------------------------------------------
   15 — FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.4rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 680px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--charcoal-2);
}
.field label .req { color: var(--copper-dk); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 0.95rem; color: var(--charcoal);
  background: var(--paper); border: 1px solid var(--rule-firm); border-radius: 2px;
  padding: 0.9rem 1rem; width: 100%; min-height: 52px; line-height: 1.5;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B3A2F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.field textarea { min-height: 152px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #78725F; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(27, 58, 47, 0.09);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #A33B25; background: #FDF6F4; }
.field__err {
  font-size: 0.78rem; color: #8E3520; letter-spacing: 0.01em;
  min-height: 0; display: none;
}
.field[data-invalid="true"] .field__err { display: block; }

.form__note {
  font-size: 0.82rem; color: var(--muted); line-height: 1.65;
  border-left: 2px solid var(--sage-400); padding-left: 1rem;
}
.form__status {
  border: 1px solid var(--rule-firm); background: var(--sage-100);
  padding: 1.15rem 1.25rem; font-size: 0.9rem; line-height: 1.65; display: none;
}
.form__status[data-show="true"] { display: block; }
.form__status b { display: block; font-weight: 600; color: var(--green-700); margin-bottom: 0.25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact detail cards */
.ccard {
  display: flex; align-items: flex-start; gap: 1.15rem;
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: var(--paper); border: 1px solid var(--rule);
  min-height: 64px;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.ccard:hover { border-color: var(--green-700); background: #fff; }
.ccard__ico {
  flex: none; width: 40px; height: 40px; border: 1px solid var(--rule-firm);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--copper-dk);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.ccard:hover .ccard__ico { background: var(--green-700); border-color: var(--green-700); color: var(--ivory); }
.ccard__k {
  display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem;
}
.ccard__v {
  display: block; font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.32rem);
  color: var(--green-700); line-height: 1.25; word-break: break-word;
}

/* --------------------------------------------------------------------------
   16 — BREADCRUMB & PAGE HEAD
   -------------------------------------------------------------------------- */
.crumb { padding-block: 1.15rem; border-bottom: 1px solid var(--rule-soft); }
.crumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.175em;
  text-transform: uppercase; color: var(--muted);
}
.crumb li { margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.crumb li + li::before { content: "/"; color: var(--sage-400); }
.crumb a { color: var(--charcoal-2); transition: color .3s var(--ease); }
.crumb a:hover { color: var(--copper-dk); }
.crumb [aria-current="page"] { color: var(--copper-dk); }

.phead { padding-block: clamp(2.5rem, 5.5vw, 4.75rem) clamp(2.25rem, 4.5vw, 3.75rem); }
.phead__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: end;
}
@media (max-width: 860px) { .phead__grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.phead h1 { margin-bottom: 0; }
.phead__lede { padding-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   17 — CTA STRIP
   -------------------------------------------------------------------------- */
.cta {
  background: var(--green-800); color: rgba(247, 244, 236, 0.78);
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(201,214,196,.035) 0 1px, transparent 1px 88px);
  pointer-events: none;
}
.cta__in {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: center;
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
@media (max-width: 860px) { .cta__in { grid-template-columns: 1fr; } }
.cta h2 { color: var(--ivory); margin-bottom: 1rem; }
.cta__side { display: grid; gap: 1rem; }
.cta__line {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 0; border-top: 1px solid rgba(201, 214, 196, 0.2);
  color: var(--ivory); font-family: var(--serif); font-size: 1.1rem;
  min-height: 56px;
  transition: color .3s var(--ease);
}
.cta__line:hover { color: var(--copper-lt); }
.cta__line svg { flex: none; color: var(--copper-lt); }

/* --------------------------------------------------------------------------
   18 — FOOTER
   -------------------------------------------------------------------------- */
.ftr { background: var(--green-900); color: rgba(247, 244, 236, 0.6); font-size: 0.9rem; }
.ftr a { color: rgba(247, 244, 236, 0.78); transition: color .3s var(--ease); }
.ftr a:hover, .ftr a:focus-visible { color: var(--copper-lt); }

.ftr__top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
@media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ftr__top { grid-template-columns: 1fr; } }

.ftr__brand .brand__name { color: var(--ivory); font-size: 1.32rem; }
.ftr__brand .brand__name i { color: var(--copper-lt); }
.ftr__brand .brand__sub { color: rgba(201, 214, 196, 0.55); }
.ftr__blurb { margin-top: 1.5rem; max-width: 40ch; line-height: 1.75; }

.ftr__h {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sage-300); margin-bottom: 1.35rem;
}
.ftr__nav { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.ftr__nav li { margin-bottom: 0.15rem; break-inside: avoid; }
.ftr__nav a { display: block; padding: 0.5rem 0; min-height: 40px; line-height: 1.5; }
@media (max-width: 480px) { .ftr__nav { columns: 1; } }

.ftr__contact { list-style: none; margin: 0; padding: 0; }
.ftr__contact li { margin: 0; }
.ftr__contact a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.72rem 0; min-height: 48px;
  font-family: var(--serif); font-size: 1.06rem; color: var(--ivory);
  word-break: break-word;
}
.ftr__contact a svg { flex: none; color: var(--copper-lt); }
.ftr__contact a:hover { color: var(--copper-lt); }

.ftr__social { display: flex; gap: 0.6rem; margin-top: 1.75rem; flex-wrap: wrap; }
.ftr__social li { margin: 0; list-style: none; }
.ftr__social ul { display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.soc {
  width: 42px; height: 42px; border: 1px solid rgba(201, 214, 196, 0.22);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgba(201, 214, 196, 0.45);
}
.soc svg { width: 16px; height: 16px; fill: currentColor; }
.soc[aria-disabled="true"] { cursor: default; }

.ftr__bar {
  border-top: 1px solid rgba(201, 214, 196, 0.16);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: 0.78rem; letter-spacing: 0.02em;
}
.ftr__bar p { margin: 0; }
.ftr__credit a { border-bottom: 1px solid rgba(201, 214, 196, 0.3); padding-bottom: 1px; }

/* --------------------------------------------------------------------------
   19 — REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

.reveal-ready [data-line] {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
[data-line].in { transform: scaleX(1); }

@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;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-line] { transform: scaleX(1) !important; }
  .ring__arc { stroke-dashoffset: 0 !important; }
}

/* --------------------------------------------------------------------------
   20 — UTILITIES
   -------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: clamp(2rem, 4vw, 3.25rem); }
.mt-m { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mb-l { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Safety / verification notice */
.notice {
  border: 1px solid var(--rule-firm); border-left: 3px solid var(--copper);
  background: var(--sage-100); padding: clamp(1.15rem, 2.4vw, 1.65rem);
  font-size: 0.9rem; line-height: 1.7;
}
.notice__h {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--copper-dk); margin-bottom: 0.6rem;
}
.section--green .notice {
  background: rgba(247, 244, 236, 0.05);
  border-color: rgba(201, 214, 196, 0.2); border-left-color: var(--copper);
  color: rgba(247, 244, 236, 0.76);
}
.section--green .notice__h { color: var(--copper-lt); }

/* Specimen strip — small metadata tiles */
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-firm); }
@media (max-width: 780px) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec div {
  padding: 1.5rem clamp(0.75rem, 1.6vw, 1.35rem) 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.185em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem;
}
.spec dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; color: var(--green-700); line-height: 1.3; }

/* Ring stage — keeps outlying node labels off the page edge */
.ring-stage { padding-inline: 12px; }
@media (max-width: 560px) { .ring-stage { padding-inline: 42px; } }

/* Hero meta row — even columns rather than flex wrap */
.hero__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 2rem);
}
@media (max-width: 520px) { .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Archive index rows — title and description are spans inside an <a>, so they
   need explicit block display to stack. */
.idx__title, .idx__desc { display: block; }
.idx__num { display: block; align-self: start; padding-top: 0.35rem; }
.idx__row { align-items: start; }
.idx__go { align-self: center; }

/* Editorial bands read better top-aligned than vertically centred: it avoids
   large gaps when a tall portrait image sits beside shorter copy. */
.band__grid { align-items: start; }

/* --------------------------------------------------------------------------
   21 — TOUCH TARGETS
   Standalone controls that are visually small get an invisible hit area of at
   least 44px without changing how they look. (Links that sit inline inside a
   sentence are intentionally left alone — expanding those would overlap the
   surrounding text.)
   -------------------------------------------------------------------------- */
.brand, .tlink, .crumb a, .ftr__credit a { position: relative; }
/* .ring__node is already absolutely positioned — do not reset it here. */

.brand::after,
.tlink::before,
.crumb a::after,
.ftr__credit a::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.tlink::before { right: -4px; }
.crumb a::after { left: -6px; right: -6px; }

.ring__node::after {
  content: ""; position: absolute; inset: -11px -8px;
}
@media (max-width: 560px) {
  .ring__node { padding: 0.6rem 0.62rem; }
  .ring__node::after { inset: -8px -6px; }
}

/* Keep the animated rule under .tlink drawn above its hit area */
.tlink::after { z-index: 1; }

/* Prose <strong>/<b> inherits the warm-charcoal base colour, which is
   unreadable on the deep-green surfaces. Restore contrast for body copy only —
   component labels (frame strips, section refs) keep their own accent colours
   via more specific rules. */
.ring__hub b { color: var(--ivory); }
.section--green p strong,  .section--green li strong,  .section--green dd strong,
.section--green p b,       .section--green li b,
.cta p strong,             .cta li strong,
.ftr p strong,             .ftr li strong { color: var(--ivory); }

/* Short viewports: keep the mobile menu's CTA and contact block reachable
   without a long scroll, while staying above the 44px touch minimum. */
@media (max-height: 730px) {
  .mnav__link { min-height: 54px; font-size: clamp(1.35rem, 5.4vw, 1.7rem); padding: 0.6rem 0; }
  .mnav__body { padding-top: 1rem; }
  .mnav__cta { margin-bottom: 1.25rem; }
  .mnav__contact { padding-top: 1rem; }
  .mnav__contact a { min-height: 46px; }
}

/* --------------------------------------------------------------------------
   22 — DARK-SURFACE TEXT CORRECTIONS
   Components authored for the ivory ground inherit light-surface colours. On
   the deep-green CTA and green sections those must be restated, or the text
   drops well below AA.
   -------------------------------------------------------------------------- */
.cta .lede,
.cta p            { color: rgba(247, 244, 236, 0.84); }
.cta .label       { color: var(--sage-300); }

.section--green .spec         { border-top-color: rgba(201, 214, 196, 0.26); }
.section--green .spec div     { border-bottom-color: rgba(201, 214, 196, 0.16); }
.section--green .spec dt      { color: var(--sage-300); }
.section--green .spec dd      { color: var(--ivory); }
.section--green .deflist      { border-top-color: rgba(201, 214, 196, 0.26); }
.section--green .deflist__row { border-bottom-color: rgba(201, 214, 196, 0.16); }
.section--green .deflist dt   { color: var(--ivory); }
.section--green .deflist dd   { color: rgba(247, 244, 236, 0.78); }
.section--green .band__list li      { border-bottom-color: rgba(201, 214, 196, 0.16); }
.section--green .band__list         { border-top-color: rgba(201, 214, 196, 0.16); }
.section--green .band__num          { -webkit-text-stroke-color: rgba(201, 214, 196, 0.5); }
.section--green .statement          { color: var(--ivory); }
.section--green .tlink              { color: var(--ivory); }
.section--green .tlink::after       { background: rgba(247, 244, 236, 0.3); }
.section--green .prose-link         { color: var(--sage-300); border-bottom-color: var(--copper-lt); }
.section--green .prose-link:hover   { color: var(--copper-lt); border-bottom-color: var(--sage-300); }

/* Footer wordmark subtitle needed a little more presence to clear AA. */
.ftr__brand .brand__sub { color: rgba(201, 214, 196, 0.72); }

/* Outlined archive numerals are decorative (aria-hidden) but were too faint. */
.band__num { -webkit-text-stroke-color: #9FB398; }

/* --------------------------------------------------------------------------
   23 — HEADER MID-RANGE FIT
   Between the burger breakpoint and roughly 1400px the full nav plus the CTA
   is wider than the shell, which silently clipped the CTA (body has
   overflow-x: hidden, so it never showed as a scrollbar). Tighten spacing and
   type through that band so the bar fits on 1280x800 and 1366x768 laptops.
   -------------------------------------------------------------------------- */
@media (min-width: 1141px) and (max-width: 1400px) {
  .hdr__in    { gap: 1rem; }
  .nav        { gap: 0.8rem; }
  .nav__link  { font-size: 0.66rem; letter-spacing: 0.07em; }
  .hdr__cta   { padding: 0.8rem 0.85rem; font-size: 0.63rem; letter-spacing: 0.1em; }
  .hdr__cta .btn__arrow { width: 13px; }
  .brand__name { font-size: 1.06rem; }
  .brand__sub  { font-size: 0.5rem; letter-spacing: 0.17em; }
}
@media (min-width: 1401px) and (max-width: 1520px) {
  .nav       { gap: 1.1rem; }
  .nav__link { font-size: 0.695rem; letter-spacing: 0.095em; }
}

/* --------------------------------------------------------------------------
   24 — ARCHIVE-INDEX COLUMN VARIANTS
   These ratios used to be set with an inline style, which outranks the
   single-column media query below and left FAQ and Contact stuck in two
   columns on phones. As classes they collapse correctly.
   -------------------------------------------------------------------------- */
.arcindex--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.arcindex--form { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 940px) {
  .arcindex--wide,
  .arcindex--form { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   25 — BUTTONS AT NARROW WIDTHS
   .btn is inline-flex and sizes to its label, so a long CTA could push past a
   narrow column. Cap it, and let button rows stack full-width on phones.
   -------------------------------------------------------------------------- */
.btn { max-width: 100%; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; justify-content: space-between; padding-inline: 1.15rem; }
  .btn-row .btn { text-align: left; }
}

/* Archive frame labels need a touch less tracking on the narrowest phones so
   both ends of the strip fit without being clipped. */
@media (max-width: 400px) {
  .frame__strip { font-size: 0.58rem; letter-spacing: 0.14em; gap: 0.6rem; }
  .frame__foot  { font-size: 0.6rem;  letter-spacing: 0.1em;  gap: 0.6rem; }
}

/* The honeypot is kept out of sight the same way .sr-only is, rather than at a
   large negative offset — it stays inside the layout box that way. */
.hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  left: auto;
}