/* =====================================================================
   SECTIONS 4-6 + FOOTER
   4  .people   Human trust / Meet Digital Flow   (replaces the Proof slot)
   5  .paths    How it works, two visitor-facing paths
   6  .close     Warm final CTA + shared intake
      .foot     Page infrastructure, not a marketing section

   Tokens are borrowed from integration.css so these read as the same
   system: carbon #1C1D1B, ink #1D1D1B, muted #8A8780, accent #B6FF2E.
   ===================================================================== */

.people, .paths, .close, .foot, .intake, .contact-choice {
  --ink: #F2EEE6;
  --muted: rgba(242, 238, 230, .70);
  --accent: #B6FF2E;
  --paper: #1C1D1B;
  --line: rgba(242, 238, 230, .12);
  position: relative;
  z-index: 1;
  scroll-margin-top: 84px;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  color: var(--ink);
}

.people h2, .paths h2, .close h2, .people h3, .paths h3 {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  letter-spacing: -.026em;
  text-wrap: balance;
  margin: 0;
}

.people .eyebrow, .paths .eyebrow, .close .eyebrow {
  margin: 0 0 14px; font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #F2EEE6; font-family: var(--df-font-mono, monospace);
}

/* ---------------------------------------------------------------------
   SECTION 4 — Human trust
   No case studies, no logos, no testimonials: this section earns trust by
   showing who answers the message and how the work is run.
   --------------------------------------------------------------------- */
.people {
  padding: clamp(64px, 8.5vh, 96px) clamp(24px, 7vw, 112px) clamp(60px, 8vh, 88px);
  background: var(--df-surface-dossier, #20211E);
  border-top: 1px solid var(--df-border-frame, rgba(242, 238, 230, .10));
  border-bottom: 1px solid var(--df-border-frame, rgba(242, 238, 230, .10));
}
.people__inner { max-width: 1120px; margin: 0 auto; }
.people h2 {
  font-size: clamp(2rem, 3.05vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  max-width: 20ch;
}
.people__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* One column while the founder photograph does not exist. Restoring the image
   block in index.html restores the two-column composition; nothing else changes. */
.people__grid:not(:has(.people__portrait-wrap)) { grid-template-columns: minmax(0, 1fr); }
.people__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 34px);
  align-items: center;
  margin-top: clamp(24px, 3.4vh, 34px);
}

/* Portrait slot. Deliberately looks like a slot, not like a photograph:
   no stock people stand in for Diogo and Michaela. See ASSETS-NEEDED.md. */
.people__portrait {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px;
  border: 1px dashed rgba(242, 238, 230, .20);
  background: #222320;
  display: grid; place-content: center; text-align: center;
  padding: 24px; overflow: hidden;
}
.people__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.people__slot-label {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.people__slot-note {
  margin: 10px auto 0;
  max-width: 30ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
}
.people__caption { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }

.people__intro p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.6; color: var(--ink); max-width: 52ch; text-wrap: pretty; }
.people__intro p.is-muted { color: var(--muted); }
.people__names { font-weight: 600; }

/* Video slot. Structural only: there is no founder video yet, so nothing
   here renders as a working play button. */
.people__video {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px dashed rgba(23, 34, 28, .26);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted);
}
.people__video strong { color: var(--ink); font-weight: 600; }

.principles {
  list-style: none;
  margin: clamp(24px, 3.4vh, 34px) 0 0;
  padding: clamp(20px, 2.6vh, 26px) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
.principles li { margin: 0; }
.principles h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.principles p { margin: 8px 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); max-width: 34ch; text-wrap: pretty; }

/* ---------------------------------------------------------------------
   SECTION 5 — How it works, two paths
   The visitor sees two options. Package, direct quote, technical scoping
   and custom implementation are internal routing and stay internal.
   --------------------------------------------------------------------- */
.paths {
  padding: clamp(64px, 8.5vh, 96px) clamp(24px, 7vw, 112px) clamp(64px, 8.5vh, 96px);
  background: var(--df-surface-ink, #1D1D1B);
  border-bottom: 1px solid var(--df-border-subtle, rgba(242, 238, 230, .08));
}
.paths__inner { max-width: 1120px; margin: 0 auto; }
.paths h2 { font-size: clamp(2rem, 3.05vw, 3rem); font-weight: 700; line-height: 1.06; max-width: 18ch; }
.paths__lead { margin: 18px 0 0; max-width: 44ch; font-size: 1.06rem; line-height: 1.55; color: var(--muted); }

.paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3.4vh, 34px);
}
.path {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 32px);
  border: 1px solid rgba(242, 238, 230, .12);
  border-radius: 18px;
  background: #222320;
  box-shadow: 0 18px 45px -24px rgba(0, 0, 0, .75);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.path:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 238, 230, .26);
  box-shadow: 0 24px 52px -20px rgba(0, 0, 0, .85);
}
.path__tag {
  font-family: var(--df-font-mono, monospace);
  margin: 0 0 12px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.path h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); font-weight: 700; line-height: 1.15; }
.path p { margin: 14px 0 0; font-size: 1rem; line-height: 1.58; color: var(--muted); text-wrap: pretty; }
.path .btn { align-self: flex-start; }
/* Pinned to the card foot so the two actions line up whatever the copy length. */
.path__act { margin: auto 0 0; padding-top: clamp(20px, 2.6vh, 26px); }

/* The two-line speed block became one conditioned sentence attached to the
   cards, instead of a third standalone sub-section. */
.paths__conditions {
  margin: clamp(18px, 2.4vh, 24px) 0 0;
  max-width: 74ch;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   AGENT SHOWCASE — compact block inside How It Works.
   Same paper and green as the rest of the page: no neon, no purple, no
   mascot, no floating chat bubble. It reads as one more Digital Flow
   surface, which is the point, because it is a service being sold.
   --------------------------------------------------------------------- */
.agent {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy preview" "benefits benefits" "trust trust" "closing closing";
  column-gap: clamp(24px, 3vw, 40px); row-gap: clamp(24px, 3vw, 32px);
  align-items: start; margin: clamp(34px, 4.5vh, 48px) 0 0;
  padding: clamp(28px, 3.2vw, 40px); border: 1px solid rgba(242, 238, 230, .18);
  border-radius: 22px; background: #262724;
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .8);
}
.agent .eyebrow { margin-bottom: 12px; }
.agent h3 {
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.024em;
  margin: 0;
  text-wrap: balance;
}
.agent__copy { grid-area: copy; align-self: center; }
.agent__copy > p { margin: 14px 0 0; font-size: 1rem; line-height: 1.58; color: var(--muted); max-width: 44ch; text-wrap: pretty; }
.agent__act {
  margin-top: clamp(18px, 2.4vh, 24px) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.agent .btn { min-height: 46px; }

/* --------------------------------------------------------- BENEFIT CARDS
   Four compact facts, not four more paragraphs: a quieter surface than the
   preview so the eye still lands on the demonstration first. */
.agent__benefits {
  grid-area: benefits;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.agent__benefit {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #1D1D1B; border: 1px solid rgba(242, 238, 230, .10);
}
.agent__benefit h4 {
  margin: 0;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.agent__benefit p { margin: 8px 0 0; font-size: .96rem; line-height: 1.52; color: var(--muted); }

/* ------------------------------------------------------------- TRUST BLOCK
   One quiet statement of control, not a compliance badge: no lock icon, no
   certification mark, nothing that reads as a guarantee this project cannot
   back up. */
.agent__trust {
  grid-area: trust;
  padding: 18px 22px;
  border: 1px solid rgba(242, 238, 230, .14);
  border-radius: 14px;
  background: rgba(242, 238, 230, .04);
}
.agent__trust h4 {
  margin: 0;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.agent__trust p { margin: 8px 0 0; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 68ch; }

/* ----------------------------------------------------------- CLOSING LINE
   A single sentence, not a second CTA row: the buttons already sit above,
   this just answers "I already have a site" before the visitor asks it. */
.agent__closing {
  grid-area: closing;
  margin: 0;
  padding-top: clamp(16px, 2vh, 20px);
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The static preview. Deliberately reads as a designed example: labelled,
   no input field, no status dot, no typing dots. */
.agent__preview {
  grid-area: preview;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #1D1D1B;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.agent__preview-label {
  margin: 0 0 12px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.agent__msg { margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; }
.agent__msg:last-of-type { margin-bottom: 0; }
.agent__msg p { margin: 4px 0 0; font-size: .93rem; line-height: 1.5; }
.agent__who { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.agent__msg--asked { background: rgba(242, 238, 230, .06); margin-left: clamp(0px, 4vw, 44px); }
.agent__msg--asked p { color: var(--ink); }
.agent__msg--guide { background: rgba(182, 255, 46, .06); border: 1px solid rgba(182, 255, 46, .2); margin-right: clamp(0px, 4vw, 44px); }
.agent__msg--guide p { color: #F2EEE6; }
.agent__next { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.agent__next-label { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* ---------------------------------------------------------------------
   PERSISTENT MANIFESTATION + PREVIEW PANEL
   Working label only. No avatar, no face, no character: the next project
   owns identity, so this stays a neutral pill that can be replaced.
   --------------------------------------------------------------------- */
#agent-root {
  --ink: #F2EEE6;
  --muted: rgba(242, 238, 230, .70);
  --accent: #B6FF2E;
  --paper: #222320;
  --line: rgba(242, 238, 230, .14);
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
}
.agent-launcher {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 11px 18px 11px 14px;
  border: 1px solid rgba(242, 238, 230, .16); border-radius: 999px;
  background: rgba(28, 29, 27, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
  color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.agent-launcher:hover { background: #282926; }
.agent-launcher__tag {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(182, 255, 46, .15);
  color: #B6FF2E;
  font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.agent-launcher__mark {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, .14);
}
/* The launcher must never sit on top of the panel or the intake it opens. */
#agent-root[data-agent-state="preview"] .agent-launcher,
body.intake-open .agent-launcher { opacity: 0; pointer-events: none; }

.agent-panel[hidden] { display: none; }
.agent-panel {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: end center;
  background: rgba(10, 10, 9, .70);
  backdrop-filter: blur(3px);
}
.agent-panel__sheet {
  width: min(560px, 100%);
  max-height: 88svh;
  overflow: auto;
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  box-shadow: 0 -20px 60px rgba(16, 24, 20, .28);
  color: var(--ink);
}
@media (min-width: 720px) {
  .agent-panel { place-items: center; }
  .agent-panel__sheet { border-radius: 22px; }
}
.agent-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.agent-panel__eyebrow { margin: 0 0 6px; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.agent-panel h2 { margin: 0; font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.agent-panel__close {
  flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.agent-panel__intro { margin: 14px 0 18px; font-size: .96rem; line-height: 1.55; color: var(--muted); }
.agent__preview--panel { margin-bottom: 14px; box-shadow: none; background: #1D1D1B; border: 1px solid rgba(242, 238, 230, .10); }
.agent-panel__actions { margin-top: 20px; }
.agent-panel .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 24px;
  border-radius: 999px; border: 1px solid transparent;
  background: #B6FF2E; color: #1C1D1B;
  font: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: all .2s ease;
}
.agent-panel .btn:hover { background: #c5ff54; transform: translateY(-1px); }
.agent-panel__note { margin: 12px 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------------
   SECTION 6 — Warm final CTA
   --------------------------------------------------------------------- */
.close {
  padding: clamp(64px, 9vh, 96px) clamp(24px, 7vw, 112px) clamp(64px, 9vh, 96px);
  background: var(--df-surface-deep, #161715);
  border-top: 1px solid var(--df-border-frame, rgba(242, 238, 230, .10));
}
.close__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 52px) clamp(24px, 3.8vw, 48px);
  background: rgba(28, 29, 27, 0.75);
  border: 1px solid rgba(242, 238, 230, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.85);
  text-align: center;
}
.close h2 { font-size: clamp(2.05rem, 3.3vw, 3.1rem); font-weight: 700; line-height: 1.06; color: #F2EEE6; }
.close__body { margin: 18px auto 0; max-width: 48ch; font-size: 1.08rem; line-height: 1.6; color: rgba(242, 238, 230, .75); text-wrap: pretty; }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.close__meta { margin: 18px auto 0; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* Buttons: local copies so these sections do not depend on hero.css load order. */
.close .btn, .path .btn, .intake .btn, .agent .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: all .2s ease;
}
.close .btn--primary, .path .btn--primary, .intake .btn--primary {
  background: #B6FF2E; color: #1C1D1B;
}
.close .btn--primary:hover, .path .btn--primary:hover, .intake .btn--primary:hover {
  background: #c5ff54; transform: translateY(-1px);
}
.close .btn--ghost, .path .btn--ghost, .agent .btn--ghost {
  background: transparent; border-color: rgba(242, 238, 230, .24); color: #F2EEE6;
}
.close .btn--ghost:hover, .path .btn--ghost:hover, .agent .btn--ghost:hover {
  background: rgba(242, 238, 230, .08); border-color: rgba(242, 238, 230, .4);
}

/* ---------------------------------------------------------------------
   INTAKE — one shared form for both paths.
   No backend exists yet (routing architecture section 10 requires an
   intake endpoint before any real form is published), so this composes an
   email in the visitor's own client and stores nothing.
   --------------------------------------------------------------------- */
.intake[hidden] { display: none; }
.intake {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: end center;
  padding: 0;
  background: rgba(10, 10, 9, .70);
  backdrop-filter: blur(3px);
}
.intake__panel {
  width: min(640px, 100%); max-height: 92svh; overflow: auto;
  padding: clamp(26px, 4vw, 40px); border-radius: 22px 22px 0 0;
  background: #222320; border: 1px solid rgba(242, 238, 230, .16);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
}
@media (min-width: 720px) {
  .intake { place-items: center; }
  .intake__panel { border-radius: 22px; }
}
.intake__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.intake h2 {
  margin: 0;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.intake__close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.intake__sub { margin: 10px 0 0; font-size: .96rem; line-height: 1.55; color: var(--muted); }
.intake__context[hidden] { display: none; }
.intake__context {
  margin: 14px 0 0; padding: 10px 13px;
  border: 1px solid rgba(242, 238, 230, .15); border-radius: 10px;
  background: rgba(242, 238, 230, .05); font-size: .88rem; line-height: 1.45; color: #F2EEE6;
}

.intake__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; }
.intake__paths label {
  display: block; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: .93rem; line-height: 1.35; cursor: pointer;
  background: #1D1D1B; border: 1px solid rgba(242, 238, 230, .10);
}
.intake__paths input { position: absolute; opacity: 0; pointer-events: none; }
.intake__paths label:has(input:checked) { border-color: var(--df-signal-green, #B6FF2E); background: rgba(182, 255, 46, .08); box-shadow: inset 0 0 0 1px var(--df-signal-green, #B6FF2E); }
.intake__paths label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

.intake__field { margin: 16px 0 0; }
.intake__field label { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.intake__field input, .intake__field textarea, .intake__field select {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #181917; color: #F2EEE6; border: 1px solid rgba(242, 238, 230, .20);
  font: inherit; font-size: .97rem;
}
.intake__field textarea { min-height: 118px; resize: vertical; }
.intake__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.intake__actions { margin-top: 24px; }
.intake__note { margin: 14px 0 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }

/* --- production intake: required marks, validation, consent, status --- */
.intake__req { color: #a4442f; margin-left: 2px; }
.intake__error[hidden] { display: none; }
.intake__error {
  margin: 7px 0 0; font-size: .84rem; line-height: 1.4; color: #a4442f; font-weight: 600;
}
.intake__field input[aria-invalid="true"],
.intake__field textarea[aria-invalid="true"] { border-color: #a4442f; }

.intake__consent { margin: 20px 0 0; }
.intake__check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.intake__check input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.intake__legal { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }

.intake__status[hidden] { display: none; }
.intake__status {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 10px;
  font-size: .89rem; line-height: 1.45; font-weight: 600;
}
.intake__status[data-state="sending"] { background: rgba(23, 34, 28, .06); color: var(--ink); }
.intake__status[data-state="info"]    { background: rgba(23, 34, 28, .06); color: var(--ink); font-weight: 500; }
.intake__status[data-state="success"] { background: rgba(182, 255, 46, .12); color: #B6FF2E; }
.intake__status[data-state="error"]   { background: rgba(164, 68, 47, .10); color: #a4442f; }
.intake .btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------------
   FOOTER — infrastructure & particle wave background (SCOPED TO FOOTER)
   --------------------------------------------------------------------- */
.foot {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(32px, 4.5vh, 44px) clamp(24px, 7vw, 112px) clamp(36px, 5vh, 48px);
  background: var(--df-surface-footer, #141412);
  border-top: 1px solid var(--df-border-subtle, rgba(242, 238, 230, .08));
  color: var(--df-text-faint, rgba(242, 238, 230, .45));
  font-size: .88rem; line-height: 1.6;
}
.foot__wave-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.foot__inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
}
.foot__identity {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.foot__brand {
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #F2EEE6;
}
.foot__location {
  font-size: 0.85rem;
  color: rgba(242, 238, 230, 0.65);
}
.foot__actions {
  display: flex;
  align-items: baseline;
  gap: 32px;
}
.foot a {
  color: var(--df-text-muted, rgba(242, 238, 230, .75));
  text-decoration: none;
  transition: color .2s ease;
}
.foot a:hover {
  color: var(--df-signal-green, #B6FF2E);
}
.foot__email {
  font-size: 0.88rem;
  color: rgba(242, 238, 230, 0.88) !important;
}
.foot__privacy {
  font-size: 0.85rem;
  color: rgba(242, 238, 230, 0.65) !important;
}
.foot__email:hover,
.foot__privacy:hover {
  color: var(--df-signal-green, #B6FF2E) !important;
}

/* Discreet minimal bottom signature */
.foot__discreet {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1120px;
  margin: clamp(18px, 2.5vh, 26px) auto 0;
  font-size: 0.74rem;
  color: rgba(242, 238, 230, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.015em;
  line-height: 1.4;
}
.foot__dot {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .foot {
    padding: 32px 24px 36px !important;
  }
  .foot__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .foot__identity {
    gap: 10px;
  }
  .foot__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .foot__discreet {
    margin-top: 18px;
  }
}

/* ---------------------------------------------------------------------
   Portrait
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .people__grid { grid-template-columns: minmax(0, 1fr); }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "preview" "benefits" "trust" "closing";
  }
}
@media (max-width: 760px) {
  .people { padding: 56px 20px 48px; }
  .paths { padding: 56px 20px 52px; }
  .close { background: var(--df-surface-deep, #161715); padding: 56px 20px 60px; }
  .close__inner { padding: 32px 18px; border-radius: 20px; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .paths__grid { grid-template-columns: minmax(0, 1fr); }
  .paths__lead, .close__body { font-size: .99rem; }
  .close .btn, .path .btn, .agent .btn { width: 100%; }
  .intake__row { grid-template-columns: minmax(0, 1fr); }
  .intake__paths { grid-template-columns: minmax(0, 1fr); }
  .foot__inner { flex-direction: column; }

  /* The portrait slot is supporting material on a small screen, not a hero
     image: it must not push the founder copy below the fold on its own. */
  .people__portrait {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px;
  border: 1px dashed rgba(242, 238, 230, .20);
  background: #222320;
  display: grid; place-content: center; text-align: center;
  padding: 24px; overflow: hidden;
}

  .agent { padding: 22px; }
  .agent__copy > p { max-width: none; }
  .agent__msg--asked { margin-left: 22px; }
  .agent__msg--guide { margin-right: 22px; }

  /* Keep the persistent control clear of the one action that matters. */
  .agent-launcher { right: 14px; bottom: 14px; padding: 10px 15px 10px 12px; font-size: .85rem; }
  .close__meta { margin-bottom: 56px; }

  /* One example, so the sheet's single action stays above the fold. */
  .agent__preview--secondary { display: none; }
  .agent-panel__intro { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .intake, .intake__panel, .contact-choice, .contact-choice__panel, .agent-panel, .agent-panel__sheet, .agent-launcher { backdrop-filter: none; }
  .agent-launcher, .agent-panel, .agent-panel__sheet { transition: none; animation: none; }
}

/* ---------------------------------------------------------------------
   CONTACT CHOICE — same dialog chrome as .intake, three plain buttons.
   --------------------------------------------------------------------- */
.contact-choice[hidden] { display: none; }
.contact-choice {
  position: fixed; inset: 0; z-index: 61;
  display: grid; place-items: end center;
  padding: 0;
  background: rgba(10, 10, 9, .70);
  backdrop-filter: blur(3px);
}
.contact-choice__panel {
  width: min(480px, 100%);
  max-height: 92svh;
  overflow: auto;
  padding: clamp(24px, 4vw, 32px);
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  box-shadow: 0 -20px 60px rgba(16, 24, 20, .28);
}
@media (max-width: 719px) {
  /* Below 720px the panel is bottom-anchored (place-items: end), so its own
     bottom edge sits at the viewport edge — exactly where the Digital Guide
     launcher lives (fixed, right:20px, 64px, z-index:100, always on top).
     Without this the "Send an email" option's bottom-right corner ran under
     the launcher icon. Same clearance value used for .bts-card. */
  .contact-choice__panel { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) {
  .contact-choice { place-items: center; }
  .contact-choice__panel { border-radius: 22px; }
}
.contact-choice__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.contact-choice h2 {
  margin: 0;
  font-family: var(--df-font-sans, "IBM Plex Sans", sans-serif);
  font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.contact-choice__close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.contact-choice__options { display: grid; gap: 10px; margin-top: 20px; }
.contact-choice__opt {
  display: block; width: 100%; text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #1D1D1B; border: 1px solid rgba(242, 238, 230, .10);
  color: var(--ink); text-decoration: none;
  font: inherit; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .16s cubic-bezier(.22, .61, .36, 1);
}
.contact-choice__opt:hover { border-color: rgba(182, 255, 46, .35); background: rgba(182, 255, 46, .08); }
.contact-choice__opt:active { transform: scale(.98); }
/* WhatsApp is the fastest channel and the one this whole flow exists to
   surface — a quiet green accent marks it as the lead option without
   shouting, matching the site's one accent colour rather than WhatsApp's own
   brand green. */
.contact-choice__opt[data-whatsapp-open] {
  border-color: #B6FF2E;
  background: rgba(182, 255, 46, .12);
}
.contact-choice__opt-label { display: block; font-weight: 700; font-size: 1rem; }
.contact-choice__opt-sub { display: block; margin-top: 3px; font-size: .86rem; color: var(--muted); }