/* ============================================================
   STYLES — all layout and component styles for the site.

   Values come from tokens.css — change colors/type/spacing THERE,
   not here. This file is organized top-to-bottom in the order a
   visitor meets things:

     1. Base & typography helpers
     2. Buttons & links
     3. Navigation (desktop bar, mobile menu)
     4. Hero (home)
     5. Investor marquee (home)
     6. Section shells & cards
     7. How it works steps (home)
     8. About teaser band (home)
     9. About page (founder story, timeline, river)
    10. Contact page (form card)
    11. FAQ page
    12. Footer + CTA band
    13. Scroll-reveal motion
    14. Responsive adjustments
   ============================================================ */


/* ------------------------------------------------------------
   1. BASE
   ------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* Anchored sections stop below the fixed-height nav */
[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

/* Shared content container — nothing stretches past --content-max */
.container {
  width: min(var(--content-max), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

/* Typography helpers */
.h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.body-text {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--slate);
}

.small-text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}


/* ------------------------------------------------------------
   2. BUTTONS & LINKS
   ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-button);
  line-height: 1.2;
  letter-spacing: var(--tracking-button);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.btn--dark  { background: var(--deep);  color: var(--white); }
.btn--light { background: var(--white); color: var(--deep); }

.btn--dark:hover  { background: #16394b; }
.btn--light:hover { background: var(--mist); }
.btn:active { transform: translateY(1px); }

/* Arrow link — "Read Jake's story →" */
.arrow-link {
  display: inline-block;
  font-weight: 500;
  font-size: var(--text-button);
  line-height: 1.2;
  letter-spacing: var(--tracking-button);
  text-decoration: none;
  color: var(--water);
  transition: opacity 0.2s ease;
}
.arrow-link::after { content: '  \2192'; white-space: pre; }
.arrow-link:hover { opacity: 0.75; }
.arrow-link--light { color: var(--white); }


/* ------------------------------------------------------------
   3. NAVIGATION
   ------------------------------------------------------------ */

/* Sticks to the top of the window as the page scrolls under it.
   .is-stuck is added by main.js once the page has moved. */
.site-nav {
  height: var(--nav-height);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-nav.is-stuck { box-shadow: var(--shadow-nav); }

.site-nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-lockup img { height: clamp(30px, 26px + 1vw, 38px); width: auto; }

.nav-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-wordmark);
  letter-spacing: var(--tracking-wordmark);
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a:not(.btn) {
  font-weight: 500;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] { color: var(--ink); }

.nav-links .btn { padding: 13px 26px; }

/* Hamburger — mobile only */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}
.nav-toggle svg { display: block; stroke: var(--ink); }

/* Full-screen mobile menu (deep navy overlay — deliberate state change) */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--deep);
  flex-direction: column;
  padding: 0 24px 32px;
}
.mobile-menu.is-open { display: flex; }

.mobile-menu-bar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-bar .nav-wordmark { color: var(--white); }
.mobile-menu-bar .nav-lockup img { height: 30px; }

.menu-close {
  background: none;
  border: 0;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}
.menu-close svg { display: block; stroke: var(--white); }

.mobile-menu-links {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 2px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(186, 217, 229, 0.25);
}
.mobile-menu-links a::after { content: '\2192'; font-family: var(--font-sans); font-size: 20px; color: var(--river); }

.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-menu-footer .btn { width: 100%; text-align: center; }


/* ------------------------------------------------------------
   4. HERO (home)
   ------------------------------------------------------------ */

/* Column stack: copy sits under the nav, the investor strip is pushed to
   the bottom edge by the auto margin on .hero-marquee. */
.hero {
  position: relative;
  min-height: clamp(560px, 50vw, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--deep);
  padding-top: calc(var(--nav-height) + clamp(32px, 4vw, 56px));
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ambient drift — the hero's one motion moment (20s slow zoom) */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: hero-drift 20s var(--ease-out) infinite alternate; }
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 42, 56, 0.94) 0%,
    rgba(15, 42, 56, 0.62) 55%,
    rgba(15, 42, 56, 0.20) 100%
  );
}

.hero .container { position: relative; z-index: 1; }

.hero-copy {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2vw, 26px);
  padding-bottom: 48px;
}

/* A step down from the site-wide H1 — it buys the vertical room the
   investor strip needs at the bottom of the hero. */
.hero-copy h1 { color: var(--white); font-size: var(--text-h1-hero); }
.hero-copy .lead { color: var(--white); opacity: 0.86; max-width: 560px; }


/* ------------------------------------------------------------
   5. INVESTOR MARQUEE (home — the bottom band of the hero)
   ------------------------------------------------------------ */

.hero-marquee {
  position: relative;
  z-index: 1;
  margin-top: auto;                    /* pins the band to the hero's bottom edge */
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(24px, 3vw, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Label left, strip running off toward the right edge */
.hero-marquee .container {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.marquee-label {
  flex: none;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--white);
  opacity: 0.74;
}

.marquee {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  /* Soft-clip the moving strip at both ends. A mask (rather than the old
     gradient overlays) keeps the fade correct over the hero photo. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 88%, transparent 100%);
}

.marquee-track {
  position: absolute;
  display: flex;
  height: 100%;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee-scroll var(--marquee-duration) linear infinite; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* track holds two identical groups */
}

/* gap and padding-right must stay equal — the seam between the two
   identical groups is what makes the loop look continuous */
.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(44px, 5vw, 72px);
  padding-right: clamp(44px, 5vw, 72px);
}

/* Logos are transparent PNGs with near-black ink; knocking them out to
   white keeps the strip one tone against the hero photo */
.marquee-group img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.marquee-group img.logo-endurance { height: 20px; }


/* ------------------------------------------------------------
   6. SECTION SHELLS & CARDS
   ------------------------------------------------------------ */

.section { padding: var(--section-pad) 0; }

.section--mist { background: var(--mist); }
.section--bone { background: var(--bone); }
.section--deep { background: var(--deep); }

/* Section header: headline + intro paragraph */
.section-head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
}

.section-head .h2 { color: var(--ink); }
.section-head p { color: var(--slate); }

.section--deep .section-head .h2 { color: var(--white); }
.section--deep .section-head p { color: var(--river); opacity: 0.82; }

/* Card grid (traits, deal-structure cards) */
.card-grid {
  display: grid;
  gap: 20px;
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-title {
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
}

.card p { color: var(--slate); }


/* ------------------------------------------------------------
   7. HOW IT WORKS STEPS (home, dark band)
   ------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.step {
  border-top: 1px solid var(--water);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-numeral {
  font-family: var(--font-serif);
  font-size: var(--text-numeral);
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: var(--river);
}

.step h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--white);
}

.step p {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--river);
  opacity: 0.78;
}


/* ------------------------------------------------------------
   8. COMPARISON TABLE (home, pale blue band)

   A four-column grid: a row label, then one column per kind of
   buyer. Each .compare-row is display:contents so its four cells
   drop straight into the parent grid and stay aligned across rows.
   The 11 Point column carries a white background, so its cells
   read as one continuous card down the table.

   Below 899px the whole thing reflows: each row becomes a stacked
   block, and the .compare-col-name spans (hidden on desktop, where
   the header row does that job) become the visible label on each
   answer. They stay in the markup at every width so screen readers
   always hear which buyer an answer belongs to.
   ------------------------------------------------------------ */

.compare {
  display: grid;
  grid-template-columns: minmax(132px, 0.78fr) repeat(3, 1fr);
}

.compare-row { display: contents; }

.compare-label,
.compare-cell {
  border-bottom: 1px solid var(--hairline);
  padding: 20px 0;
}

.compare-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'mark text';
  column-gap: 10px;
  align-items: start;
  padding-left: clamp(14px, 1.6vw, 22px);
  padding-right: clamp(14px, 1.6vw, 22px);
}

.compare-label {
  font-family: var(--font-serif);
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
  padding-right: 20px;
}

.compare-cell p {
  grid-area: text;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--slate);
}

/* The check and the × — stroke color is set per column below */
.compare-mark {
  grid-area: mark;
  margin-top: 4px;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--slate);
  opacity: 0.55;
}

/* Our column: white card, brand-blue check, full-strength text */
.compare-cell--ours {
  background: var(--white);
}
.compare-cell--ours p { color: var(--ink); }
.compare-cell--ours .compare-mark { stroke: var(--water); opacity: 1; }

/* Header row: the three buyer names */
.compare-row--head .compare-label,
.compare-row--head .compare-cell {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--water);
  font-family: var(--font-serif);
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--slate);
  display: block;
}
.compare-row--head .compare-cell--ours {
  color: var(--deep);
  border-radius: var(--radius) var(--radius) 0 0;
}
.compare-row--head .compare-label { border-bottom-color: var(--hairline); }

/* Last row closes off the white column */
.compare-row:last-child .compare-cell--ours {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Shown only once the table stacks (see 15. RESPONSIVE) */
.compare-col-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ------------------------------------------------------------
   9. ABOUT TEASER BAND (home, dark)
   ------------------------------------------------------------ */

.teaser {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.teaser-photo {
  flex: 0 0 clamp(320px, 39vw, 560px);
  border-radius: var(--radius);
  overflow: hidden;
}
.teaser-photo img { width: 100%; height: clamp(260px, 29vw, 420px); object-fit: cover; }

.teaser-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.teaser-copy .h3 { color: var(--white); }
.teaser-copy p { color: var(--river); opacity: 0.82; }


/* ------------------------------------------------------------
   10. ABOUT PAGE
   ------------------------------------------------------------ */

/* Founder story: portrait left, copy + family-business photos right */
.founder {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 72px);
}

.founder-photo {
  flex: 0 0 clamp(300px, 30vw, 440px);
  border-radius: var(--radius);
  overflow: hidden;
}
.founder-photo img { width: 100%; height: clamp(380px, 37vw, 540px); object-fit: cover; }

.founder-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.founder-copy .h2 { color: var(--ink); }
.founder-copy > p { color: var(--slate); }

.family-photos {
  display: flex;
  gap: 20px;
  padding-top: 16px;
}

.family-photo { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.family-photo img {
  width: 100%;
  height: clamp(140px, 13vw, 190px);
  object-fit: cover;
  border-radius: var(--radius);
}
.family-photo figcaption {
  font-weight: 500;
  font-size: var(--text-label);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  color: var(--slate);
}

/* Background timeline — chronological storyline with spine + nodes */
.timeline { display: flex; flex-direction: column; }

.timeline-head { max-width: 820px; margin-bottom: 40px; }

.chapter {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2.3vw, 32px);
}

.chapter-rail {
  flex: 0 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.chapter-node {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--water);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--water);
}

/* Final chapter: solid node ("here is where that lands"), no spine below */
.chapter--last .chapter-node {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--white);
}

.chapter-spine { width: 2px; flex: 1; background: var(--river); }
.chapter--last .chapter-spine { display: none; }

.chapter-logo { padding: 2px 0 52px; }
.chapter--last .chapter-logo { padding-bottom: 0; }

.chapter-logo-card {
  width: 200px;
  height: 104px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}
/* Logos are balanced by eye, not fitted to the box. These four have very
   different proportions (Deloitte is a 5:1 wordmark, the 11 Point lockup is
   nearly square), and sizing them all to one max-height makes the wide ones
   look huge and the square one tiny. Each width below is set so the four
   occupy roughly the same visual area. Height stays auto — never fix both. */
.chapter-logo-card img { width: auto; height: auto; max-width: 150px; max-height: 72px; }

.chapter-logo-card .logo--deloitte { width: 150px; }  /* 5.4 : 1 */
.chapter-logo-card .logo--mizzou   { width: 127px; }  /* 3.3 : 1 */
.chapter-logo-card .logo--ryan     { width: 109px; }  /* 2.4 : 1 */
.chapter-logo-card .logo--11pt     { width:  86px; }  /* 1.2 : 1 */

.chapter-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px clamp(0px, 8vw, 120px) 52px 0;
}
.chapter--last .chapter-body { padding-bottom: 0; }

.chapter-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
}
.chapter-body p { color: var(--slate); }

/* Why Eleven Point: copy left, river artwork right */
.river-story {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.river-story-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.river-story-copy .h2 { color: var(--ink); }
.river-story-copy p { color: var(--slate); }

.river-story-art {
  flex: 0 0 clamp(320px, 39vw, 560px);
  border-radius: var(--radius);
  overflow: hidden;
}
.river-story-art img { width: 100%; height: clamp(240px, 26vw, 380px); object-fit: cover; }


/* ------------------------------------------------------------
   11. CONTACT PAGE
   ------------------------------------------------------------ */

.contact {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5.5vw, 80px);
}

.contact-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-details h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h1-contact);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
}

.contact-details p { color: var(--slate); }
.contact-details .arrow-link { margin-top: 20px; }

.form-card {
  flex: 0 0 clamp(320px, 33vw, 480px);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-card h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
}

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-weight: 500;
  font-size: var(--text-label);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  color: var(--slate);
}

.field input,
.field textarea {
  width: 100%;
  background: var(--mist);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--ink);
}
.field input { height: 44px; }
.field textarea { height: 108px; resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--water);
  outline-offset: -1px;
}

.field ::placeholder { color: var(--slate); opacity: 0.75; }

.form-card .btn { width: 100%; text-align: center; padding-block: 15px; }

/* Cloudflare Turnstile bot check. Sits between the message field and
   the Send button; this only stops it butting against either.
   (The .form-card's flex gap doesn't apply — it's inside the form.) */
.cf-turnstile { margin-block: 4px; }

/* Turnstile's widget cannot render narrower than 300px — that floor
   applies to its "flexible" size too. On phones the card's inner width
   falls below it (269px at a 375px viewport), so from here down the
   widget alone bleeds out to the card's padding edge to claim the room.
   It reads as a full-width verification band rather than a squeezed box,
   and nothing else in the card moves. */
@media (max-width: 419px) {
  .cf-turnstile { margin-inline: calc(-1 * clamp(28px, 2.8vw, 40px)); }
}

/* Inline result states, swapped in by JS on submit */
.form-status,
.form-error { display: none; color: var(--slate); }
.form-status.is-visible,
.form-error.is-visible { display: block; }
.form-status strong { color: var(--ink); }
.form-error strong { color: var(--alert); }

/* Honeypot — invisible to humans, catches bots */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ------------------------------------------------------------
   12. FAQ PAGE
   ------------------------------------------------------------ */

.faq-intro { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.faq-intro p { color: var(--slate); }

.faq-list {
  max-width: 820px;
  margin-top: clamp(40px, 4vw, 64px);
}

.faq-item {
  border-top: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 40px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }

.faq-item h2 {
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--ink);
}

.faq-item p { color: var(--slate); }
.faq-item p + p { margin-top: 8px; }


/* ------------------------------------------------------------
   13. FOOTER + CTA BAND (site-wide, river texture behind)
   ------------------------------------------------------------ */

.site-footer {
  position: relative;
  background: var(--white) url('../images/river-texture.jpg') center / cover no-repeat;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 72px);
  padding: var(--section-pad) 0;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.footer-logo { width: clamp(180px, 16vw, 240px); height: auto; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}

.footer-links a {
  font-weight: 500;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--ink);
  text-decoration: none;
}
.footer-links a:hover { color: var(--water); }

/* Deep navy contact card */
.footer-cta {
  flex: 0 0 clamp(320px, 39vw, 560px);
  background: var(--deep);
  border-radius: var(--radius);
  padding: clamp(32px, 3.9vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-cta .h3 { color: var(--white); }
.footer-cta p { color: var(--river); opacity: 0.85; }

/* The Contact page hides the CTA card — a form is already on screen */
.page--contact .footer-cta { display: none; }
.page--contact .footer-main { justify-content: flex-start; }

.footer-legal {
  background: var(--white);
  border-top: 1px solid var(--hairline);
  padding: 26px 0;
  text-align: center;
}

.footer-legal p {
  font-size: var(--text-legal);
  line-height: 1.6;
  color: var(--slate);
}


/* ------------------------------------------------------------
   14. SCROLL-REVEAL MOTION (subtle, disabled for reduced motion)
   ------------------------------------------------------------ */

/* The html element starts with class="no-js" (removed by an inline
   script) — so if JavaScript is off, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--reveal-duration) var(--ease-out),
                transform var(--reveal-duration) var(--ease-out);
  }
  html:not(.no-js) .reveal.is-visible { opacity: 1; transform: none; }

  /* Staggered children (trait cards, steps) */
  html:not(.no-js) .reveal-group > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--reveal-duration) var(--ease-out),
                transform var(--reveal-duration) var(--ease-out);
  }
  html:not(.no-js) .reveal-group.is-visible > * { opacity: 1; transform: none; }
  html:not(.no-js) .reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
  html:not(.no-js) .reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
  html:not(.no-js) .reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
}


/* ------------------------------------------------------------
   15. RESPONSIVE ADJUSTMENTS
   Desktop-first overrides. Breakpoints:
     1023px — tablet and down
      639px — mobile
   ------------------------------------------------------------ */

@media (max-width: 1023px) {

  /* On the home page, the nav sits transparently over the hero. It's fixed
     rather than sticky so it can overlay the photo and still follow the
     scroll; .is-stuck then fills it in so content never passes behind
     unreadable transparent text. */
  .page--home .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 0;
  }
  .page--home .site-nav .nav-wordmark { color: var(--white); }
  .page--home .site-nav .nav-links a:not(.btn) { color: rgba(255, 255, 255, 0.85); }
  .page--home .site-nav .nav-links a:not(.btn):hover { color: var(--white); }
  .page--home .site-nav .nav-toggle svg { stroke: var(--white); }
  .page--home .site-nav .nav-emblem--dark { display: none; }
  .page--home .site-nav .nav-emblem--light { display: block; }

  /* Scrolled off the hero: the overlay nav becomes the standard white bar */
  .page--home .site-nav.is-stuck {
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
  }
  .page--home .site-nav.is-stuck .nav-wordmark { color: var(--ink); }
  .page--home .site-nav.is-stuck .nav-links a:not(.btn) { color: var(--slate); }
  .page--home .site-nav.is-stuck .nav-links a:not(.btn):hover { color: var(--ink); }
  .page--home .site-nav.is-stuck .nav-toggle svg { stroke: var(--ink); }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }

  /* Comparison table: give the three answer columns more of the width */
  .compare { grid-template-columns: minmax(104px, 0.62fr) repeat(3, 1fr); }

  .teaser { flex-direction: column; align-items: flex-start; }
  .teaser-photo { flex-basis: auto; width: 100%; max-width: 560px; }

  .founder { flex-direction: column; }
  .founder-photo { flex-basis: auto; width: 100%; max-width: 440px; }

  .river-story { flex-direction: column-reverse; align-items: flex-start; }
  .river-story-art { flex-basis: auto; width: 100%; }
  .river-story-art img { height: clamp(220px, 34vw, 320px); }

  .contact { flex-direction: column; }
  .form-card { flex-basis: auto; width: 100%; max-width: 560px; }

  /* Footer: CTA card first, then brand + links */
  .footer-main { flex-direction: column-reverse; }
  .footer-cta { flex-basis: auto; width: 100%; max-width: 640px; }
}

/* Light/dark emblem swap default (desktop + non-home): dark emblem shown */
.nav-emblem--light { display: none; }

/* 899px — used by the comparison table only. Four columns of prose stop
   being readable well before the 639px mobile breakpoint (a portrait iPad
   squeezes each answer into five short lines), so the table stacks one
   step earlier than everything else on the site. */
@media (max-width: 899px) {

  /* Not enough room for label-beside-strip — the label moves above it */
  .hero-marquee .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .marquee { flex: none; width: 100%; }

  .compare { display: block; }

  /* Each row becomes its own block: the label, then three answers */
  .compare-row {
    display: block;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* The buyer names move into each answer, so the header row goes away.
     This has to come after the .compare-row rule above — same specificity,
     so source order is what makes display:none win. */
  .compare-row--head { display: none; }
  .compare-row--head + .compare-row { padding-top: 0; }
  .compare-row:last-child { border-bottom: 0; padding-bottom: 0; }

  .compare-label {
    border-bottom: 0;
    padding: 0 0 14px;
    font-size: var(--text-h3);
  }

  /* Answers: mark on the left, buyer name above the sentence */
  .compare-cell {
    border-bottom: 0;
    grid-template-areas:
      'mark name'
      'mark text';
    padding: 0 0 14px;
    row-gap: 3px;
  }
  .compare-cell:last-child { padding-bottom: 0; }

  /* Stacked, an answer gets the full column width — cap it so the lines
     stay readable on a tablet instead of running the width of the page */
  .compare-cell p { max-width: 62ch; }

  /* The white column card doesn't work once things stack — the answer
     is labelled by name here, so the emphasis moves to the type instead */
  .compare-cell--ours {
    background: none;
    border-radius: 0;
  }

  .compare-col-name {
    grid-area: name;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--slate);
  }
  .compare-cell--ours .compare-col-name { color: var(--water); }
}

@media (max-width: 639px) {

  .nav-links { display: none; }
  .nav-toggle { display: block; }

  /* Home mobile: emblem only over the hero photo — the name comes back
     once the nav fills in on scroll */
  .page--home .site-nav .nav-wordmark { display: none; }
  .page--home .site-nav.is-stuck .nav-wordmark { display: block; }

  .card-grid--2,
  .card-grid--3 { grid-template-columns: 1fr; }

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

  .hero { min-height: 660px; }
  .hero-copy { padding-bottom: 40px; }
  .marquee-group img { height: 26px; }
  .marquee-group img.logo-endurance { height: 17px; }

  /* Timeline: logo card and body stack inside each chapter */
  .chapter { gap: 16px; }
  .chapter-content { flex-direction: column; }
  .chapter-logo { padding-bottom: 20px; }
  .chapter-logo-card { width: 160px; height: 84px; }
  .chapter-logo-card img { max-width: 120px; max-height: 60px; }
  .chapter-body { padding-right: 0; }

  .family-photos { flex-direction: column; }
  .family-photo img { height: 200px; }

  .footer-links { flex-direction: column; gap: 14px; }
}

/* Timeline inner wrapper behaves as a row on larger screens */
.chapter-content {
  flex: 1;
  display: flex;
  gap: clamp(20px, 2.3vw, 32px);
}