/* ============================================================
   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); }

/* The nav bar ignores the page container: its content runs the full
   width of the viewport with its own edge padding (--nav-pad), while
   everything below the nav stays inside .container's measured width. */
.site-nav .container {
  width: 100%;
  max-width: none;
  padding-inline: var(--nav-pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The nav uses a band crop of Jake's lockup (11-point-lockup-nav*.svg):
   the same art, cropped to a wide strip centered on the wordmark with
   the swoosh soft-fading at the top and bottom edges. That removes the
   vertical whitespace the full square lockup carries, so the wordmark
   renders large while the image stays inside the fixed-height bar.
   The full lockup lives on in the footer, 404 and About timeline. */
.nav-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-lockup img { height: clamp(48px, 40px + 2vw, 68px); width: auto; }

/* In the bar itself, the full swoosh must always show — never taller
   than the bar. Scoped to .site-nav: the footer reuses .nav-lockup
   markup but sizes its own logo. */
.site-nav .nav-lockup img { max-height: calc(var(--nav-height) - 16px); }

.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-lockup img { height: 44px; }

.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-photos {
  position: absolute;
  inset: 0;
}

/* Each photo is a full-bleed layer; main.js fades the next one in over
   the current one, then removes the old layer once it is hidden. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-fade) ease;
}
.hero-photo.is-active { opacity: 1; }

/* 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; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
}
@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; }

/* On big desktops the 760px column reads as a narrow stack against
   the widened container — let the copy reach toward the middle. */
@media (min-width: 1700px) {
  .hero-copy { max-width: 980px; }
  .hero-copy .lead { max-width: 700px; }
}


/* ------------------------------------------------------------
   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-card-title);
  line-height: var(--leading-title);
  color: var(--white);
  opacity: 0.85;
}

.marquee {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 48px;
  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/SVGs (any ink color, no background shapes);
   knocking them out to white keeps the strip one tone against the hero
   photo. Per-logo heights below even out lockups that read big or small
   at the shared 30px. */
.marquee-group img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.marquee-group img.logo-endurance { height: 20px; }
.marquee-group img.logo-anacapa   { height: 46px; }   /* stacked two-line lockup reads small */
.marquee-group img.logo-grosse    { height: 44px; }   /* square mark + two-line wordmark */
.marquee-group img.logo-futaleufu { height: 17px; }   /* very wide, thin caps */
.marquee-group img.logo-ttcer     { height: 26px; }


/* ------------------------------------------------------------
   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); }

/* Split-pin layout ("What we're looking for"): on desktop the section
   header sits in a left column and pins below the nav while the cards
   scroll past in a single right-hand stack. Sticky releases on its own
   when the card column's bottom comes up, so both leave together.
   Below 900px this is inert — the section falls back to the standard
   header-above-cards flow, and the cards keep their usual grid. */
@media (min-width: 900px) {
  .split-pin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .split-pin .section-head {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--nav-height) + 40px);
  }
  .split-pin .card-grid--2 { grid-template-columns: 1fr; }
}


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

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

/* Each step is a two-column grid: the serif numeral hangs in the
   first column, top-aligned with the title, and the title + body
   share the second. The numeral's line-height is tuned so its cap
   lines up with the title's cap. `align-content: start` keeps the
   rows packed when .steps stretches every card to equal height.
   NOTE: `.step p` also matches p.step-numeral and has higher
   specificity than `.step-numeral` alone — hence the doubled-up
   `.step .step-numeral` selector. */
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 14px;
  align-items: start;
  align-content: start;
}

.step .step-numeral {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: var(--text-numeral);
  line-height: 0.78;
  letter-spacing: -0.2px;
  color: var(--river);
  opacity: 0.55;
}

.step h3 {
  grid-column: 2;
  grid-row: 1;
  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 {
  grid-column: 2;
  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 */
/* Jake's own lockup gets to outgrow the shared 72px cap — the squarish
   art can use nearly the card's full height */
.chapter-logo-card .logo--11pt     { width: 112px; max-height: 94px; }  /* 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-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  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; }

/* 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;
  /* Default photo (no-JS). main.js swaps in a random one from its
     footer list on load. */
  background: var(--white) url('../images/footer-01.webp') center / cover no-repeat;
}
/* White wash over the photo so the ink/water text stays readable —
   heaviest at the top where the content sits, easing off toward the
   bottom so the photo still reads. Strengths are --footer-wash /
   --footer-wash-fade in tokens.css */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, var(--footer-wash)) 0%,
    rgba(255, 255, 255, var(--footer-wash)) 55%,
    rgba(255, 255, 255, var(--footer-wash-fade)) 100%
  );
  pointer-events: none;
}
.site-footer > * { position: relative; }

.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;
}

/* The footer shows the full square lockup; it has the room for it */
.footer-lockup img { height: clamp(128px, 104px + 2.5vw, 168px); }

/* LinkedIn + Calendly links, stacked under the footer nav */
.footer-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.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-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-emblem--dark { display: block; }
  .page--home .site-nav.is-stuck .nav-emblem--light { display: none; }
  .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; }

  .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; }
  .marquee-group img.logo-anacapa   { height: 40px; }
  .marquee-group img.logo-grosse    { height: 38px; }
  .marquee-group img.logo-futaleufu { height: 15px; }
  .marquee-group img.logo-ttcer     { height: 22px; }

  /* 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-logo-card .logo--11pt { width: 90px; max-height: 76px; }
  .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);
}