/* ════════════════════════════════════════════════════════════════════════════════════════════════
   HOME (HomeV2, Oct 2026). Ported from the approved canvas design (HomeV2.dc.html): same section
   order, copy and motion, made fluid from 1440px down to 320px. Fonts come from /fonts/fonts.css
   (self-hosted Libre Baskerville and Source Sans 3); nothing here loads from another host.
   Motion lives in home.js: the markup is the FINAL state, so with no script, or with reduced motion,
   every figure already reads correctly.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #FAF7F2;
  --ink: #1F1C44;
  --indigo: #2E2A5F;
  --indigo-deep: #15122A;
  --terra: #C97B5C;
  --eyebrow: #8A4A33;
  --body: #3F3F4A;
  --muted: #6B6577;
  --nav-muted: #5A5A66;
  --stone: #F1ECE3;
  --line: #ECE7EF;
  --dark-text: #DCD7F0;
  --dark-eyebrow: #E8B49E;
  --dark-caption: #CFC9EA;
  --red: #B4533A;
  --red-ink: #9E3722;
  --green: #3F7A55;
  --green-ink: #21704A;
  --amber-ink: #875800;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --shadow: 0 1px 0 #E6E1D6, 0 24px 60px rgba(46, 42, 95, 0.10);
  --gutter: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--indigo); }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Focus: a11y.css gives every control a ring; dark bands get gold, everything on the light ground
   keeps purple (the shared file paints any footer gold, which does not show on this light footer). */
.site-footer a:focus-visible { outline: 3px solid #533F8E; outline-offset: 2px; }
.a11y-dark a:focus-visible { outline: 3px solid #E8B54B; outline-offset: 3px; }
.btn-terra:focus-visible { outline-color: #FFFFFF; }

/* ── Header ─────────────────────────────────────────────────────────────────────────────────── */
.site-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { display: block; line-height: 0; border-radius: 6px; }
.brand svg { display: block; width: 238px; height: auto; }
.foot-brand .foot-logo { display: block; width: 170px; height: auto; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 34px; font-size: 16px; font-weight: 600; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Sign in (Eric, Oct 10, 2026): terracotta text, semibold, a 2px terracotta underline 4px below it
   that thickens on hover. Not a box. #C97B5C measures 3.04:1 on this ground, under 4.5:1 for text,
   so it is the darker terracotta text token, #A35A3D (--color-terracotta-700), at 4.81:1. Same
   rule on every public header: public/marketing/site-chrome.css .sc-signin. */
.site-nav .nav-signin { color: #A35A3D; font-weight: 600; text-decoration: underline; text-decoration-color: #A35A3D; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-thickness .16s ease; }
.site-nav .nav-signin:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.site-nav .nav-cta:hover { text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 8px; font-weight: 700; white-space: nowrap; transition: background-color .16s ease, transform .16s ease; }
.btn-indigo { background: var(--indigo); color: #FFFFFF; padding: 13px 22px; font-weight: 600; }
.btn-indigo:hover { background: #1F1C44; }
.btn-lg { padding: 16px 26px; font-size: 17px; font-weight: 700; }
.btn-terra { background: var(--terra); color: #1F1310; padding: 17px 30px; }
.btn-terra:hover { background: #D68E71; }
.text-link { font-weight: 600; font-size: 17px; text-underline-offset: 4px; }
.text-link-dark { color: var(--dark-eyebrow); }
/* In the flex-column copy blocks a link would stretch to the column; size it to its words. */
.split-copy .text-link { align-self: flex-start; }

.eyebrow { font-size: 15px; font-weight: 700; color: var(--eyebrow); }
.eyebrow-dark { color: var(--dark-eyebrow); }
.eyebrow-rule { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.eyebrow-rule::before { content: ''; width: 28px; height: 2px; background: var(--terra); flex: none; }
.body-lg { font-size: 19px; line-height: 1.6; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ink-red { color: var(--red-ink); }
.ink-green { color: var(--green-ink); }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────── */
.hero { padding-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 32px; align-items: end; }
.hero-lead { grid-column: span 7; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: 64px; line-height: 1.1; letter-spacing: -0.5px; }
.hero-side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 24px; padding-bottom: 8px; }
.lede { font-size: 19px; line-height: 1.6; color: var(--body); }
.cta-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.hero-shot { margin-top: 64px; background: linear-gradient(to bottom, transparent 0, transparent 150px, var(--terra) 150px, var(--terra) 153px, var(--indigo) 153px); }
/* The hero is a wide, short still (four role cards), so it takes the full content width to keep its text readable. */
.device { max-width: 1248px; margin: 0 auto; }
.device-screen { background: var(--indigo-deep); border-radius: 16px; padding: 12px; box-shadow: 0 40px 90px rgba(10, 8, 25, 0.38); }
.device-screen img { width: 100%; height: auto; border-radius: 8px; }
.device figcaption { padding: 18px 0 0; font-size: 14px; color: var(--dark-caption); }

/* ── Bands ──────────────────────────────────────────────────────────────────────────────────── */
.band-indigo { background: var(--indigo); color: #FFFFFF; }
.band-indigo h2 { color: #FFFFFF; }
.band-indigo .body-lg { color: var(--dark-text); }
.band-stone { background: var(--stone); }

.pillars { padding: 40px 0 112px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 40px; }
.pillar { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 28px; }
.pillar-tag { font-size: 15px; font-weight: 700; color: var(--dark-eyebrow); }
.pillar-head { font-family: var(--serif); font-size: 28px; line-height: 1.25; }
.pillar p:last-child { font-size: 17px; line-height: 1.6; color: var(--dark-text); }

/* ── Split sections ─────────────────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; align-items: center; }
.split h2 { font-size: 42px; line-height: 1.18; }
.split-copy { display: flex; flex-direction: column; gap: 20px; }
.split-wide { grid-column: 1 / -1; }
.split-schedule { padding-top: 128px; }
.split-schedule .split-copy { grid-column: span 5; }
.split-schedule .card { grid-column: 7 / span 6; }
/* Parker's week sits under the scheduling card, in the same column. */
.split-schedule .sched-shot { grid-column: 7 / span 6; margin-top: -16px; }
.split-workload { padding-top: 136px; }
.split-workload .card { grid-column: span 6; grid-row: 1; }
.split-workload .split-copy { grid-column: 8 / span 5; grid-row: 1; }
.split-budget, .split-network { padding-top: 112px; padding-bottom: 112px; }
.split-budget .split-copy, .split-network .split-copy { grid-column: span 5; }
.split-budget .card, .split-network .card { grid-column: 7 / span 6; }
.band-indigo + .band-stone { margin-top: 0; }
.split-budget { margin-top: 0; }
section.band-indigo:has(.split-budget) { margin-top: 136px; }

.card { background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); }
.card-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #EEEAF2; padding-top: 14px; font-size: 15px; flex-wrap: wrap; }
.card-foot.small { font-size: 13px; color: var(--muted); padding-top: 12px; margin-top: 18px; }

.shot img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow); background: #15122A; }
.shot figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.shot-dark img { box-shadow: 0 30px 70px rgba(5, 4, 20, 0.35); }
.shot-dark figcaption { color: var(--dark-caption); }

/* ── Scheduling card ────────────────────────────────────────────────────────────────────────── */
.sched { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 22px; }
.sched-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 28px; row-gap: 18px; }
.sched-tray, .sched-week { display: flex; flex-direction: column; gap: 12px; }
.tray-slots { display: flex; flex-direction: column; gap: 10px; padding-top: 32px; }
.tray-slot { min-height: 54px; }
.week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 26px repeat(3, minmax(62px, auto)); gap: 6px; }
.day { font-size: 12px; font-weight: 600; color: var(--muted); }
.cell { border-radius: 8px; background: #F3F0F8; padding: 4px; min-height: 62px; }
.chip { width: 100%; max-width: 110px; min-height: 54px; border-radius: 8px; background: #E9E6FC; border-left: 4px solid #4A3FB8; padding: 7px 9px; font-size: 12px; line-height: 1.3; color: #2C2478; will-change: transform; position: relative; z-index: 1; }
.chip-green { background: #E4F0E8; border-left-color: var(--green); color: #1F4A30; }
.counter { font-weight: 700; color: var(--amber-ink); }
.counter.is-done { color: var(--green-ink); }

/* ── Workload card ──────────────────────────────────────────────────────────────────────────── */
.wl { padding: 28px 32px 24px; }
.wl .card-label { margin-bottom: 28px; }
.wl-row { display: flex; flex-direction: column; gap: 6px; }
.wl-head { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.wl-pct { color: var(--green); white-space: nowrap; }
.wl-pct .is-over { color: var(--red); }
.was { color: var(--muted); font-weight: 600; }
.was-over { color: var(--red); }
/* The words the motion itself shows ("118% → ", "Moved from Maya: ", ": none") are hidden only while a
   card is animating; reduced motion, no script and a finished animation all show them. */
.has-motion:not(.is-done) .was,
.has-motion:not(.is-done) .moved-from,
.has-motion:not(.is-done) .still-none { display: none; }
/* A finished week has nothing left to place, so its empty tray is not drawn. */
.sched:not(.has-motion) .tray-slots,
.sched.is-done .tray-slots { display: none; }
.track { height: 14px; border-radius: 99px; background: #F0ECF4; position: relative; }
.track-lg { height: 16px; }
.bar { height: 100%; border-radius: 99px; background: var(--green); transition: width 1.4s var(--ease), background-color 1.4s var(--ease); }
.bar-red { background: var(--red); }
.full-line { position: absolute; left: 76.9%; top: -5px; width: 2px; height: 24px; background: var(--indigo); }
[data-bar="maya"] { width: 75.4%; }
[data-bar="jordan"] { width: 68.5%; }
[data-bar="hire"] { width: 77.3%; }
[data-anim="workload"].is-start [data-bar="maya"] { width: 90.8%; background: var(--red); }
[data-anim="workload"].is-start [data-bar="jordan"] { width: 54.6%; }
.move-slot { min-height: 52px; padding: 12px 0; }
.move-chip { display: inline-block; padding: 6px 10px; border-radius: 8px; background: #E9E6FC; border-left: 4px solid #4A3FB8; font-size: 12px; color: #2C2478; font-weight: 600; will-change: transform; }

/* ── Budget card ────────────────────────────────────────────────────────────────────────────── */
.budget { padding: 32px 36px; }
.budget > div { display: flex; flex-direction: column; gap: 22px; }
.budget-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.budget-top .card-label { font-size: 14px; }
.budget-row { display: flex; flex-direction: column; gap: 8px; }
.budget-head { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.budget-diff { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 15px; color: var(--body); }
.diff-figure { font-family: var(--serif); font-size: 30px; color: var(--green-ink); transition: opacity .6s ease 1.2s; }
[data-anim="budget"].is-start [data-bar="hire"] { width: 0; }
[data-anim="budget"].is-start [data-diff] { opacity: 0; }

/* ── Network card ───────────────────────────────────────────────────────────────────────────── */
.net { padding: 32px 36px; }
.net .card-label { font-size: 14px; font-weight: 400; padding-bottom: 14px; }
.net-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.net-table th, .net-table td { text-align: left; padding: 16px 14px 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.net-table thead th { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
.net-table tbody th { font-weight: 700; }
.net-table tbody tr:last-child th, .net-table tbody tr:last-child td { border-bottom: 0; }
.net-table .num { font-variant-numeric: tabular-nums; }
.net .small { padding-top: 14px; }
.gap { display: flex; align-items: center; gap: 10px; }
.rise-track { height: 40px; width: 12px; border-radius: 3px; display: flex; align-items: flex-end; flex: none; }
.rise-red { background: #F3E2DB; }
.rise-green { background: #E2EEE6; }
.rise { width: 12px; border-radius: 3px; transform-origin: bottom; transition: transform 1.2s var(--ease); }
.rise-red .rise { background: var(--red); }
.rise-green .rise { background: var(--green); }
[data-anim="network"].is-start .rise { transform: scaleY(0.15); }

/* ── Observatory ────────────────────────────────────────────────────────────────────────────── */
.field { padding-top: 128px; display: flex; flex-direction: column; gap: 36px; }
.field-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; align-items: end; }
.field-copy { grid-column: span 7; display: flex; flex-direction: column; gap: 20px; }
.field-copy h2, .team h2 { font-size: 42px; line-height: 1.18; }
.field-links { grid-column: 9 / span 4; display: flex; justify-content: flex-end; gap: 26px; flex-wrap: wrap; }
.map-card { background: #FFFFFF; border-radius: 16px; box-shadow: var(--shadow); padding: 40px 48px 32px; display: flex; flex-direction: column; gap: 20px; }
.map-card img { width: 100%; max-width: 1040px; height: auto; margin: 0 auto; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 14px; color: var(--body); font-variant-numeric: tabular-nums; }
.map-legend li { display: flex; align-items: center; gap: 8px; }
.sw { width: 22px; height: 14px; border-radius: 3px; border: 1px solid #9A93B0; }
.sw0 { background: #EEE9F8; } .sw1 { background: #D2C7EE; } .sw2 { background: #AC99DD; } .sw3 { background: #8065C6; } .sw4 { background: #4F3796; }
.map-card figcaption { font-size: 14px; color: var(--muted); }

/* ── Team ───────────────────────────────────────────────────────────────────────────────────── */
.team { padding-top: 136px; display: flex; flex-direction: column; gap: 20px; }
.team-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.person { display: flex; flex-direction: column; gap: 18px; }
.person img { width: 100%; height: 470px; object-fit: cover; border-radius: 16px; }
.person figcaption { display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.6; color: var(--body); }
.person-name { font-size: 21px; font-weight: 700; color: var(--ink); }

/* ── Trust and closing ──────────────────────────────────────────────────────────────────────── */
.trust { margin-top: 72px; padding-top: 44px; border-top: 1px solid #E2DCD0; display: flex; flex-direction: column; gap: 28px; }
.trust > h2 { font-size: 30px; line-height: 1.25; }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.trust-grid p { font-size: 16px; line-height: 1.6; color: var(--body); }
.trust-grid .trust-head { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

.cta-box { margin-top: 120px; padding: 72px 80px; background: var(--indigo); border-radius: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; position: relative; overflow: hidden; }
/* The heartbeat line keeps to the top-right corner; the button sits at the foot of the box, so the
   two never meet (at least 40px apart at every width the line is shown). */
.cta-line { position: absolute; right: 24px; top: 16px; width: 260px; height: 74px; opacity: 0.18; }
.cta-copy { display: flex; flex-direction: column; gap: 14px; max-width: 720px; position: relative; }
.cta-copy h2 { font-size: 42px; line-height: 1.2; color: #FFFFFF; }
.cta-copy .body-lg { color: var(--dark-text); }
.cta-box .btn { position: relative; }

.site-footer { padding-top: 56px; padding-bottom: 48px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 40px; font-size: 15px; color: var(--nav-muted); flex-wrap: wrap; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot-links { display: flex; gap: 12px 28px; flex-wrap: wrap; }
.foot-links a { color: var(--body); }

/* ── Responsive ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --gutter: 48px; }
  .hero h1 { font-size: 54px; }
  .hero-lead { grid-column: span 7; }
  .hero-side { grid-column: 8 / span 5; }
  .cta-box { padding: 56px 48px; }
}
@media (max-width: 960px) {
  .hero, .split, .field-head { grid-template-columns: minmax(0, 1fr); }
  .hero-lead, .hero-side,
  .split-schedule .split-copy, .split-schedule .card, .split-schedule .sched-shot,
  .split-workload .card, .split-workload .split-copy,
  .split-budget .split-copy, .split-budget .card,
  .split-network .split-copy, .split-network .card,
  .field-copy, .field-links { grid-column: 1 / -1; grid-row: auto; }
  .split-workload .split-copy { order: -1; }
  .field-links { justify-content: flex-start; }
  .split-schedule, .split-workload, .field, .team { padding-top: 96px; }
  .trust { margin-top: 56px; }
  section.band-indigo:has(.split-budget) { margin-top: 96px; }
  .split-budget, .split-network { padding-top: 80px; padding-bottom: 80px; }
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .pillars { padding-bottom: 80px; }
  .hero-shot { background: linear-gradient(to bottom, transparent 0, transparent 90px, var(--terra) 90px, var(--terra) 93px, var(--indigo) 93px); }
  .cta-box { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cta-line { display: none; }
  .person img { height: 380px; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .site-header { min-height: 0; padding-top: 16px; padding-bottom: 8px; }
  .brand svg { width: 190px; }
  .site-nav { gap: 10px 20px; font-size: 15px; }
  .btn-indigo { padding: 10px 16px; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: 38px; }
  .split h2, .field-copy h2, .team h2, .cta-copy h2 { font-size: 30px; }
  .body-lg, .lede { font-size: 17px; }
  .hero-shot { margin-top: 40px; }
  .device-screen { padding: 6px; border-radius: 12px; }
  .device-screen img { border-radius: 6px; }
  .sched { padding: 20px; }
  .sched-body { grid-template-columns: minmax(0, 1fr); }
  .tray-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 0; }
  .wl, .budget, .net { padding: 22px 20px; }
  .net-table { font-size: 14px; }
  .net-table th, .net-table td { padding: 12px 8px 12px 0; }
  .net-table thead th { font-size: 12px; }
  .gap { flex-wrap: wrap; gap: 6px; }
  .rise-track { display: none; }
  .map-card { padding: 20px 16px; }
  .map-legend { justify-content: flex-start; font-size: 13px; }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .person img { height: 300px; }
  .cta-line { display: none; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cta-box { padding: 40px 24px; border-radius: 14px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33px; }
  .chip { padding: 6px 6px; font-size: 11px; }
  .site-nav { gap: 8px 16px; }
}