/* ══════════════════════════════════════════════════════════════════════════
   recode-advisory.css — the enterprise AI advisory homepage.

   Implements RecodeAI_Cowork_Handoff/DESIGN_BRIEF.md: executive editorial,
   deep navy on soft paper, one mint accent, restrained rules, generous space.

   SCOPE: the homepage only. It does NOT extend recode-v3.css (the dark/gold
   system that drives the other ~200 pages) — the two palettes are different
   enough that layering them would mean fighting specificity on every rule.
   The homepage therefore loads this sheet INSTEAD of the v3 pair. That is a
   deliberate, reviewable split; see the notes in index.html.

     PART 1  tokens + base
     PART 2  header and navigation
     PART 3  hero
     PART 4  sections (mandate, offers, readiness, method, founder, OS)
     PART 5  intelligence band — the live content surfaces this page keeps
     PART 6  close + footer
     PART 7  responsive + reduced motion
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PART 1 — TOKENS + BASE
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --ink:    #07131c;   /* deep navy — hero, header, footer            */
  --ink-2:  #10232c;   /* raised navy — founder band                  */
  --mint:   #a6e6c9;   /* the single accent                           */
  --mint-d: #295d4d;   /* mint's readable counterpart on paper        */
  --paper:  #f4f5f0;   /* page ground                                 */
  --paper-2:#e5ebe6;   /* alternating band                            */
  --paper-3:#e7ebe5;   /* inset panel                                 */
  --white:  #ffffff;
  --line:   #d3d9d4;   /* rules and card borders on paper             */
  --line-d: #a9bab0;   /* rules on the tinted band                    */
  --line-n: rgba(255,255,255,0.14);  /* rules on navy                 */
  --body:   #596762;   /* body copy on paper                          */
  --muted:  #5b6762;   /* darkened: #66716e failed 4.5:1 on paper */
  --body-n: #b9c8c6;   /* body copy on navy                           */
  --muted-n:#94aca7;

  --font-display: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shell: 1330px;
  --gutter: 48px;
}

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

html { scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }
::selection { background: var(--mint); color: var(--ink); }

/* One visible focus treatment, light and dark. Never removed. */
:focus-visible {
  outline: 3px solid var(--mint-d);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible,
header :focus-visible,
footer :focus-visible,
.adv-hero :focus-visible,
.adv-founder :focus-visible { outline-color: var(--mint); }

.adv-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--mint); color: var(--ink);
  padding: 12px 18px; font-weight: 700; border-radius: 2px;
  transition: top .15s ease;
}
.adv-skip:focus { top: 12px; }

.adv-shell { width: min(var(--shell), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.adv-eyebrow {
  font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
}
.adv-eyebrow--light { color: #aebfbd; }
.adv-eyebrow--dark  { color: #52645f; }

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

/* ── Buttons ─────────────────────────────────────────────────────────── */
.adv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 18px; padding: 15px 22px; min-height: 54px;
  border-radius: 2px; border: 1px solid transparent;
  font-weight: 700; font-size: .94rem; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.adv-btn--primary { background: var(--mint); color: var(--ink); }
.adv-btn--primary:hover { background: #d6ffe8; }
.adv-btn--ghost { border-color: #69817c; color: #fff; }
.adv-btn--ghost:hover { background: rgba(255,255,255,.08); }
.adv-btn--ink { background: var(--ink); color: #fff; }
.adv-btn--ink:hover { background: #25453f; }
.adv-btn--line { border-color: var(--ink); color: var(--ink); }
.adv-btn--line:hover { background: var(--ink); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   PART 2 — HEADER
   ══════════════════════════════════════════════════════════════════════ */
.adv-header {
  background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--line-n);
  position: sticky; top: 0; z-index: 100;
}
.adv-nav { min-height: 82px; display: flex; align-items: center; gap: 38px; }

.adv-logo {
  font: 800 1.55rem/1 var(--font-display);
  letter-spacing: -.085em; white-space: nowrap;
}
.adv-logo span { color: var(--mint); }

.adv-navlinks {
  display: flex; gap: 30px; margin-left: auto; align-items: center;
  color: #d8e1df; font-size: .88rem; font-weight: 600;
}
.adv-navlinks a { padding: 6px 0; }
.adv-navlinks a:hover { color: var(--mint); }

.adv-navcta {
  border: 1px solid #819b92; padding: 12px 18px; border-radius: 2px;
  font-size: .87rem; font-weight: 700; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.adv-navcta:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* Hidden until the nav collapses. The toggle is applied by JS, and the JS
   adds the collapsed state — so with JS off the links stay visible rather
   than becoming unreachable behind a dead button. */
.adv-burger {
  display: none; width: 46px; height: 46px; margin-left: auto;
  align-items: center; justify-content: center;
  background: none; border: 1px solid #819b92; border-radius: 2px;
  color: #fff; cursor: pointer;
}
.adv-burger span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.adv-burger span::before, .adv-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.adv-burger span::before { top: -6px; }
.adv-burger span::after  { top: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   PART 3 — HERO
   ══════════════════════════════════════════════════════════════════════ */
.adv-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
/* A faint structural grid — the only decoration on the page. */
.adv-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.05) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 83px, rgba(255,255,255,.035) 84px);
}
.adv-hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(330px,.85fr);
  min-height: 655px;
}
.adv-hero-copy {
  padding: 80px 50px 85px 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.adv-hero h1 {
  font: 600 clamp(2.85rem, 5.7vw, 6.2rem)/1.045 var(--font-display);
  letter-spacing: -.07em; margin: 25px 0; max-width: 870px;
}
.adv-hero h1 em { font-style: normal; color: var(--mint); }
.adv-hero-lede {
  font-size: 1.15rem; color: var(--body-n);
  max-width: 605px; margin: 0 0 35px; line-height: 1.65;
}
.adv-actions { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.adv-hero-proof {
  margin-top: 57px; padding-top: 21px; border-top: 1px solid #53645f;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  color: #a9bbba; font-size: .81rem; letter-spacing: .025em;
}
.adv-hero-proof strong { color: #fff; font-size: .86rem; }

.adv-hero-side {
  border-left: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; padding: 47px 0 0 34px; position: relative;
}
.adv-side-top {
  display: flex; justify-content: space-between; gap: 16px;
  color: var(--muted-n); font-size: .76rem; letter-spacing: .11em; text-transform: uppercase;
}
.adv-portrait {
  margin-top: auto; min-height: 430px;
  display: flex; align-items: flex-end;
  position: relative; overflow: hidden; background: #213536;
}
.adv-portrait img {
  width: 100%; height: 430px; object-fit: cover;
  /* The source is near-square (791x800) in a 530x430 frame, so cover scales to
     the width and crops ~106px of height. At 19% the crop took the top of the
     head; 4% leaves headroom. Re-check this if the portrait is ever replaced —
     it is tuned to how tightly THIS photo frames the subject. */
  object-position: center 4%;
  filter: grayscale(1); opacity: .75;
}
.adv-portrait::after {
  content: ""; position: absolute; inset: 35% 0 0;
  background: linear-gradient(transparent, #07131c 98%);
}
.adv-portrait-label {
  position: absolute; z-index: 1; left: 28px; right: 25px; bottom: 24px;
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
}
.adv-portrait-label b { display: block; font: 700 1.32rem var(--font-display); letter-spacing: -.035em; }
.adv-portrait-label small { color: #c5d2cf; font-size: .8rem; display: block; margin-top: 5px; }
.adv-portrait-label .adv-mark {
  border: 1px solid var(--mint); padding: 8px 12px; color: var(--mint);
  font-size: .7rem; letter-spacing: .12em; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   PART 4 — SECTIONS
   ══════════════════════════════════════════════════════════════════════ */
section { scroll-margin-top: 96px; }

.adv-head { display: grid; grid-template-columns: 1fr 2fr; gap: 35px; padding-top: 110px; }
.adv-head h2 {
  font: 600 clamp(2.1rem, 4.2vw, 4.4rem)/1.12 var(--font-display);
  letter-spacing: -.06em; margin: 0; max-width: 830px;
}
.adv-head p { font-size: 1.05rem; color: #5c6965; max-width: 730px; margin: 22px 0 0; }

/* ── Mandate strip ───────────────────────────────────────────────────── */
.adv-mandate { background: var(--mint); padding: 20px 0; }
.adv-mandate .adv-shell {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.adv-mandate p {
  margin: 0; font: 600 clamp(1rem, 1.5vw, 1.25rem) var(--font-display); letter-spacing: -.035em;
}

/* ── Offers ──────────────────────────────────────────────────────────── */
.adv-offers { padding-bottom: 115px; }
.adv-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 50px; }
.adv-offer {
  background: var(--white); min-height: 378px; padding: 33px;
  display: flex; flex-direction: column; border: 1px solid var(--line);
}
.adv-offer .adv-num { color: #5a6d64; font-size: .82rem; font-weight: 700; }
.adv-offer h3 {
  font: 650 clamp(1.4rem, 2vw, 2rem)/1.2 var(--font-display);
  letter-spacing: -.05em; margin: 45px 0 16px;
}
.adv-offer p { color: var(--body); margin: 0 0 25px; font-size: .98rem; }
/* Information, not an action: these cards do not link anywhere, so they are
   not styled as though they do. The brief is explicit about that. */
.adv-offer .adv-offer-foot {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .82rem; font-weight: 700; color: var(--mint-d);
}

.adv-inset {
  margin-top: 16px; background: var(--paper-3); border: 1px solid #cbd6cc;
  padding: 24px 32px; display: flex; align-items: center; gap: 28px;
  justify-content: space-between; flex-wrap: wrap;
}
.adv-inset p { margin: 0; color: #51605b; }
.adv-inset strong { font: 700 1.05rem var(--font-display); }
.adv-inset-links { display: flex; gap: 20px; flex-wrap: wrap; }
.adv-inset-links a {
  white-space: nowrap; text-decoration: underline; text-underline-offset: 5px;
  font-weight: 700; color: var(--mint-d);
}

/* ── Method ──────────────────────────────────────────────────────────── */
.adv-method { background: var(--paper-2); padding-bottom: 108px; }
.adv-method .adv-head { padding-top: 100px; }
.adv-steps {
  margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-d);
}
.adv-step { padding: 24px 25px 0 0; min-height: 212px; border-right: 1px solid var(--line-d); }
.adv-step:not(:first-child) { padding-left: 25px; }
.adv-step:last-child { border-right: 0; }
.adv-step .adv-index { font-size: .84rem; color: #4a7160; font-weight: 700; }
.adv-step h3 { font: 700 clamp(1.25rem,1.8vw,1.6rem) var(--font-display); letter-spacing: -.05em; margin: 25px 0 8px; }
.adv-step p { font-size: .91rem; color: #53625b; margin: 0; }
.adv-method-note {
  margin-top: 45px; padding: 18px 21px; background: #d3e7d9;
  display: inline-block; font-size: .94rem; font-weight: 700;
}

/* ── Founder ─────────────────────────────────────────────────────────── */
.adv-founder { background: var(--ink-2); color: #fff; }
.adv-founder-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; padding: 95px 0; }
.adv-founder img { width: 100%; height: 530px; object-fit: cover; object-position: center 20%; filter: grayscale(1); }
.adv-founder h2 {
  font: 600 clamp(2.2rem, 4.3vw, 4.6rem)/1.08 var(--font-display);
  letter-spacing: -.065em; margin: 35px 0 22px;
}
.adv-founder p { color: #b3c4bf; font-size: 1.06rem; max-width: 620px; }
/* Career history — Suman's experience, explicitly not RecodeAI clients. */
.adv-career {
  border-top: 1px solid #6b837d; margin: 36px 0 25px; padding-top: 24px;
  color: #d3e1dc; font-size: .92rem;
}
.adv-career strong { color: var(--mint); display: block; margin-bottom: 6px; }
.adv-textlink { color: var(--mint); font-weight: 700; display: inline-block; margin-top: 11px; }
.adv-textlink:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ── Enterprise AI OS ────────────────────────────────────────────────── */
.adv-future { padding: 105px 0; border-bottom: 1px solid var(--line); }
.adv-future-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12%; }
.adv-future h2 {
  font: 600 clamp(2rem, 4vw, 4rem)/1.15 var(--font-display);
  letter-spacing: -.065em; margin: 23px 0;
}
.adv-future p { font-size: 1.06rem; color: var(--body); max-width: 700px; }
.adv-future-card { border-top: 3px solid var(--ink); align-self: center; padding: 25px 0 0; }
.adv-future-card .adv-status { color: #556a5f; font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.adv-future-card h3 { font: 700 clamp(1.4rem,2vw,1.8rem) var(--font-display); letter-spacing: -.05em; margin: 15px 0; }
.adv-future-card p { font-size: .95rem; }

/* ══════════════════════════════════════════════════════════════════════
   PART 5 — INTELLIGENCE BAND
   The live content surfaces the homepage keeps: the nightly #firehose
   band (written by agents/update_agent.py), the Ask retrieval box and the
   routes into the library. Placed AFTER the advisory narrative so the
   commercial story leads and the proof-of-work follows.
   ══════════════════════════════════════════════════════════════════════ */
.adv-intel { background: var(--paper-2); padding-bottom: 100px; }
.adv-intel .adv-head { padding-top: 100px; }

.adv-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 46px; }
.adv-route {
  background: var(--white); border: 1px solid var(--line); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px; min-height: 172px;
  transition: border-color .2s ease, transform .2s ease;
}
.adv-route:hover { border-color: #70bba0; transform: translateY(-4px); }
.adv-route b { font: 700 1.16rem var(--font-display); letter-spacing: -.04em; }
.adv-route span { font-size: .92rem; color: var(--body); }
.adv-route .adv-route-go { margin-top: auto; font-size: .82rem; font-weight: 700; color: var(--mint-d); }

/* Ask — the retrieval box over the published archive. Markup and the
   [data-ask*] hooks belong to assets/recode.js; only the skin is here. */
.adv-ask { margin-top: 46px; }
.ask-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--line);
  padding-left: 18px; max-width: 760px;
}
.ask-row:focus-within { border-color: var(--mint-d); }
.ask-row svg { flex: none; color: var(--muted); }
.ask-input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  /* Not below 16px: iOS Safari auto-zooms a focused input under that and
     does not zoom back out. The repo learned this once already. */
  padding: 18px 0; font: 16px/1.4 var(--font-body); color: var(--ink);
}
.ask-input::placeholder { color: #8a948f; }
.ask-row button[type="submit"] {
  flex: none; align-self: stretch; border: 0; cursor: pointer;
  background: var(--ink); color: #fff; padding: 0 26px;
  font-weight: 700; font-size: .9rem;
}
.ask-row button[type="submit"]:hover { background: var(--mint); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  background: none; border: 1px solid var(--line); cursor: pointer;
  padding: 9px 13px; font-size: .88rem; color: var(--body); text-align: left;
}
.chip:hover { border-color: var(--mint-d); color: var(--mint-d); }

.ask-answer {
  margin-top: 22px; max-width: 900px;
  background: var(--white); border: 1px solid var(--line); padding: 26px 28px;
}
.ask-answer[hidden] { display: none; }
.ask-answer-label {
  margin: 0 0 12px; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.ask-answer-body p { margin: 0 0 12px; font-size: 1rem; line-height: 1.65; color: var(--ink); }
.ask-answer-body p:last-child { margin-bottom: 0; }
.ask-status, .ask-notice { margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.ask-status { margin: 0; }
.ask-cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ask-cite {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); padding: 7px 11px; font-size: .86rem; color: var(--body);
}
.ask-cite-kind {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--mint-d);
}

/* ── #firehose — markup emitted nightly by agents/update_agent.py ─────
   Restyled here; never renamed there. The container must NOT paint the
   divider colour behind uncovered cells, or a short news day renders the
   empty grid slots as solid blocks. */
#firehose { margin-top: 56px; }
#firehose .container { width: 100%; margin: 0; }
#firehose .section-label {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--mint-d);
}
#firehose .section-title {
  font: 600 clamp(1.7rem,2.6vw,2.4rem) var(--font-display);
  letter-spacing: -.05em; margin: 12px 0 10px;
}
#firehose .section-desc { font-size: .98rem; color: var(--body); margin: 0; max-width: 720px; }
#firehose .section-desc span { color: var(--muted) !important; }

.firehose-ticker {
  margin-top: 26px; overflow: hidden;
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  background: var(--paper);
}
.ticker-inner { display: flex; gap: 42px; white-space: nowrap; padding: 12px 0; animation: adv-ticker 52s linear infinite; }
@keyframes adv-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--body); }
.ticker-hot { color: var(--mint-d); font-weight: 700; }
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.firehose-cards {
  margin-top: 26px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 13px; background: transparent;
}
.firehose-card {
  grid-column: span 2; background: var(--white); border: 1px solid var(--line);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 196px;
}
/* The generator emits data-tail as (count % 3); a tail of one or two widens
   to fill its row rather than leaving a hole. */
.firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2) { grid-column: span 3; }
.firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 6; }
.firehose-priority { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.firehose-priority.breaking { color: var(--mint-d); }
.firehose-card h4 { font: 700 1.14rem var(--font-display); letter-spacing: -.04em; margin: 0; line-height: 1.25; }
.firehose-card p { margin: 0; font-size: .92rem; color: var(--body); line-height: 1.6; }

/* Feed rows rendered by assets/recode.js from data/news.json. */
.adv-feed { margin-top: 40px; background: var(--white); border: 1px solid var(--line); }
.feed-row {
  display: grid; grid-template-columns: 132px minmax(0,1fr) 104px;
  gap: 22px; align-items: start; padding: 20px 24px;
  border-bottom: 1px solid var(--line); color: inherit;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: #fafbf8; }
.feed-title { margin: 0; font: 700 1rem var(--font-display); letter-spacing: -.03em; line-height: 1.35; }
.feed-summary { margin: 8px 0 0; font-size: .9rem; color: var(--body); line-height: 1.55; }
.feed-time { font-size: .8rem; color: var(--muted); text-align: right; }
.tag {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--line); padding: 6px 9px; color: var(--mint-d); align-self: start;
}
.empty-state { margin: 0; padding: 30px 24px; font-size: .92rem; color: var(--muted); }
.feed-more { margin-top: 26px; }

/* ══════════════════════════════════════════════════════════════════════
   PART 6 — CLOSE + FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.adv-close { background: var(--mint); padding: 95px 0; }
.adv-close-inner { display: flex; align-items: end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.adv-close h2 {
  font: 600 clamp(2.2rem, 5vw, 5.5rem)/1.06 var(--font-display);
  letter-spacing: -.075em; max-width: 850px; margin: 20px 0 0;
}

.adv-footer { background: var(--ink); color: #b4c5bf; padding: 64px 0 40px; }
.adv-footer-grid {
  display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr));
  gap: 44px; padding-bottom: 44px; border-bottom: 1px solid var(--line-n);
}
.adv-footer .adv-logo { color: #fff; }
.adv-footer-blurb { margin: 18px 0 0; font-size: .94rem; max-width: 280px; line-height: 1.6; }
.adv-footcol h2 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted-n); margin: 0 0 16px;
}
.adv-footcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.adv-footcol a { font-size: .9rem; }
.adv-footcol a:hover { color: var(--mint); }
.adv-footer-bot {
  padding-top: 26px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; font-size: .82rem; color: #8ea39d;
}

/* ══════════════════════════════════════════════════════════════════════
   PART 7 — RESPONSIVE + REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1050px) {
  :root { --gutter: 26px; }
  .adv-navlinks { gap: 18px; }
  .adv-hero-inner { grid-template-columns: 1fr .8fr; }
  .adv-hero-copy { padding-right: 25px; }
  .adv-hero-side { padding-left: 20px; }
  .adv-portrait, .adv-portrait img { height: 375px; min-height: 375px; }
  .adv-founder img { height: 490px; }
  .adv-routes { grid-template-columns: repeat(2, 1fr); }
  .adv-offer-grid { grid-template-columns: 1fr; }
  .adv-offer { min-height: 0; }
}

@media (max-width: 860px) {
  /* Collapsed navigation. The CTA stays visible at every width. */
  .adv-burger { display: flex; order: 3; margin-left: 12px; }
  .adv-nav { min-height: 68px; gap: 12px; flex-wrap: wrap; }
  .adv-navcta { order: 2; margin-left: auto; font-size: .8rem; padding: 10px 12px; }
  .adv-header.is-collapsed .adv-navlinks { display: none; }
  .adv-header.is-collapsed.is-open .adv-navlinks {
    display: flex; order: 4; width: 100%; flex-direction: column;
    align-items: stretch; gap: 0; margin: 0 0 10px;
  }
  .adv-header.is-collapsed.is-open .adv-navlinks a {
    padding: 15px 0; border-bottom: 1px solid var(--line-n);
    min-height: 46px; display: flex; align-items: center;
  }

  .adv-hero-inner { display: block; }
  .adv-hero-copy { padding: 62px 0 46px; }
  .adv-hero h1 { margin: 18px 0 22px; letter-spacing: -.055em; }
  .adv-hero-lede { font-size: 1rem; }
  .adv-hero-proof { margin-top: 40px; }
  .adv-hero-side { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .adv-side-top { display: none; }
  .adv-portrait, .adv-portrait img { min-height: 260px; height: 260px; }

  .adv-head { display: block; padding-top: 72px; }
  .adv-head h2 { margin-top: 16px; }
  .adv-offers { padding-bottom: 70px; }
  .adv-inset { display: block; }
  .adv-inset p { margin: 10px 0; }

  .adv-method { padding-bottom: 70px; }
  .adv-method .adv-head { padding-top: 72px; }
  .adv-steps { grid-template-columns: 1fr 1fr; margin-top: 38px; }
  .adv-step { min-height: 176px; padding: 20px 15px 15px 0; border-bottom: 1px solid var(--line-d); }
  .adv-step:nth-child(even) { padding-left: 15px; border-right: 0; }
  .adv-step:nth-child(n+3) { border-bottom: 0; }

  .adv-founder-inner { grid-template-columns: 1fr; padding: 70px 0; gap: 30px; }
  .adv-founder img { height: 380px; max-width: 460px; }
  .adv-future { padding: 72px 0; }
  .adv-future-inner { display: block; }
  .adv-future-card { margin-top: 36px; }

  .adv-intel { padding-bottom: 68px; }
  .adv-intel .adv-head { padding-top: 72px; }
  .adv-routes { grid-template-columns: 1fr; }
  .firehose-card,
  .firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2),
  .firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 3; }
  .feed-row { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .feed-time { text-align: left; }

  .adv-close { padding: 70px 0; }
  .adv-close-inner { display: block; }
  .adv-close h2 { margin-bottom: 30px; }
  .adv-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
}

@media (max-width: 460px) {
  /* Keep the header on ONE row. Logo + CTA + burger overflow 338px of content
     width at default sizes, and flex-wrap drops the burger onto a second line,
     doubling the header height. Shrink all three rather than hiding the CTA —
     the brief requires it visible at every width. */
  .adv-nav { gap: 8px; flex-wrap: nowrap; }
  .adv-logo { font-size: 1.25rem; }
  .adv-navcta { font-size: .72rem; padding: 9px 10px; }
  .adv-burger { width: 42px; height: 42px; margin-left: 8px; }

  .adv-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .adv-actions .adv-btn { width: 100%; }
  .adv-portrait-label .adv-mark { display: none; }
  .adv-steps { display: block; }
  .adv-step, .adv-step:nth-child(even), .adv-step:nth-child(n+3) {
    padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line-d); min-height: 0;
  }
  .adv-step:last-child { border-bottom: 0; }
  .firehose-card,
  .firehose-cards[data-tail="2"] > .firehose-card:nth-last-child(-n + 2),
  .firehose-cards[data-tail="1"] > .firehose-card:last-child { grid-column: span 6; }
  .adv-footer-grid { grid-template-columns: minmax(0,1fr); }
  .ask-row { flex-wrap: wrap; padding-left: 14px; }
  .ask-row button[type="submit"] { width: 100%; padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}