/* Draft 2. Editorial. Layout on top of tokens.css. Mobile first; the 12-column layouts start at 1024px. */

/* Every grid child spans the full row until the desktop layout takes over. */
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--c360-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-nav.is-scrolled { border-bottom-color: var(--c360-line); }
.nav-inner { display: flex; align-items: center; height: 100%; }
.nav-logo { display: block; flex: none; }
.nav-logo img { width: 132px; height: auto; }
.nav-links, .nav-cta { display: none; }
.nav-menu {
  margin-left: auto;
  padding: 12px 0 12px 16px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-weight: 600; font-size: 16px; line-height: 1;
  color: var(--c360-ink);
}

.menu-panel {
  position: fixed; inset: 0; z-index: 100;
  background: var(--c360-paper);
  overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.menu-top img { width: 132px; height: auto; }
.menu-links { margin-top: var(--s-12); }
.menu-links li { border-top: 1px solid var(--c360-line); }
.menu-links li:last-child { border-bottom: 1px solid var(--c360-line); }
.menu-links a {
  display: block; padding: var(--s-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--c360-ink); text-decoration: none;
}
.menu-cta { margin-top: var(--s-12); padding-bottom: var(--s-12); }
.menu-cta .small { margin-top: var(--s-3); }

@media (min-width: 1024px) {
  .nav-logo img { width: 160px; }
  .nav-menu { display: none; }
  .nav-links { display: flex; gap: var(--s-8); margin-left: auto; }
  .nav-links a {
    font-family: var(--font-text); font-weight: 500; font-size: 15px; line-height: 1;
    color: var(--c360-ink); text-decoration: none; padding: var(--s-2) 0;
    text-decoration-color: var(--c360-teal-ink); text-underline-offset: 6px;
  }
  .nav-links a:hover { text-decoration-line: underline; text-decoration-thickness: 1px; }
  .nav-cta { display: inline-flex; margin-left: var(--s-12); }
}

/* ---------- Chapter marker: numeral, 48px hairline, eyebrow ---------- */
.chapter-mark { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-12); }
.chapter-num {
  font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--c360-steel);
}
.chapter-line { flex: none; width: 48px; height: 1px; background: var(--c360-line); }
.surface-navy .chapter-line { background: rgb(255 255 255 / 20%); }

/* ---------- Hero ---------- */
.hero { padding-bottom: 0; }
.hero-rule { margin: var(--s-2) 0 0; }
.hero-grid { margin-top: var(--s-12); }
.hero-title span { display: block; }
.hero-copy { margin-top: var(--s-8); }
.hero-copy .lead { color: var(--c360-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.btn-note { margin-top: var(--s-4); }
.hero-index { display: none; }
.hero-photo { position: relative; z-index: 2; margin-top: var(--s-12); margin-bottom: -48px; aspect-ratio: 4 / 5; }
.hero-photo img { object-position: 20% 30%; } /* H3_a: her face sits at about one third from the left. */

@media (min-width: 1024px) {
  .hero { min-height: calc(min(88vh, 900px) - var(--nav-h)); }
  .hero-grid { margin-top: var(--s-16); grid-template-rows: auto auto 1fr; }
  /* Pre-approved exception to the type scale: Display 1 at 88px on desktop. */
  .hero-title { grid-column: 1 / span 6; grid-row: 1; font-size: 88px; line-height: 1.02; letter-spacing: -0.025em; }
  .hero-copy { grid-column: 1 / span 5; grid-row: 2; margin-top: var(--s-12); }
  .hero-index {
    display: block; grid-column: 1 / span 5; grid-row: 3; align-self: end;
    margin-top: var(--s-12); padding-bottom: var(--s-12);
  }
  .hero-index li { border-top: 1px solid var(--c360-line); }
  .hero-index li:last-child { border-bottom: 1px solid var(--c360-line); }
  .hero-index a {
    display: flex; gap: var(--s-6); padding: 10px 0;
    color: var(--c360-text); text-decoration: none;
  }
  .hero-index a:hover { color: var(--c360-ink); }
  .hero-index .num { width: 24px; font-family: var(--font-display); font-weight: 500; color: var(--c360-muted); font-variant-numeric: tabular-nums; }
  /* Round two: the photo spans columns 7 to 12 and every hero row, from the top of the grid into chapter 01. */
  .hero-photo { grid-column: 7 / -1; grid-row: 1 / -1; aspect-ratio: auto; margin-top: 0; margin-bottom: -96px; }
  .hero-photo img { object-position: 22% 30%; }
}

/* ---------- Photo band between chapters 01 and 02. Full bleed, decorative ---------- */
/* vh is capped so a very tall window, such as the screenshot tool, keeps a sane band. */
.photo-band { width: 100%; height: min(50vh, 400px); overflow: hidden; background: var(--c360-steel-tint); }
.photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 30%; }
/* Phone: the 400px cap and a 56% centre keep both faces in frame at 390. */
@media (min-width: 1024px) {
  .photo-band { height: min(70vh, 820px); }
  .photo-band img { object-position: 50% 30%; }
}

/* ---------- Chapter 01. The operating problem ---------- */
/* The hero photo hangs into this chapter; the extra top padding keeps the marker clear of it. */
.ch-01 { padding-top: calc(var(--section-pad) + 48px); }
.stakes { margin-top: var(--s-12); }
.stakes li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline;
  padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--c360-line);
}
.stakes li:last-child { border-bottom: 1px solid var(--c360-line); }
.stake-num { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--c360-steel); font-variant-numeric: tabular-nums; }
.stakes-close { margin-top: var(--s-12); }

@media (min-width: 1024px) {

  .ch-01 { padding-top: var(--section-pad); }
  .ch01-title { grid-column: 1 / span 8; }
  .stakes { grid-column: 5 / -1; margin-top: var(--s-12); }
  .stakes li { grid-template-columns: 102px minmax(0, 1fr); }
  .stakes-close { grid-column: 6 / span 6; }
}

/* ---------- Chapter 02. How we work ---------- */
.ch02-figure { margin-top: var(--s-12); }
.orbit { width: 100%; max-width: 450px; height: auto; overflow: visible; }
.o-arc { fill: none; stroke: var(--c360-navy); stroke-width: 3; stroke-linecap: round; }
.o-hair { stroke: var(--c360-steel); stroke-width: 1; }
.o-node { fill: var(--c360-steel); }
.o-constraint { fill: var(--c360-teal); }
.o-outcome { fill: var(--c360-navy); }
.o-label { font-family: var(--font-text); font-size: 18px; fill: var(--c360-muted); }
.o-label-strong { fill: var(--c360-ink); font-weight: 500; }
.o-sub { font-weight: 400; fill: var(--c360-muted); }

.steps { display: grid; gap: var(--s-12); margin-top: var(--s-12); }
.step { border-top: 1px solid var(--c360-line); padding-top: var(--s-8); }
.step-num { display: block; color: var(--c360-steel); margin-bottom: var(--s-8); }
.step .h3 + p { margin-top: var(--s-3); }
.method-close { margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--c360-line); row-gap: var(--s-6); }

@media (min-width: 1024px) {
  .ch02-top { align-items: start; }
  .ch02-title { grid-column: 1 / span 8; grid-row: 1; }
  .ch02-figure { grid-column: 9 / -1; grid-row: 2; align-self: start; margin-top: var(--s-12); }
  .steps { grid-column: 1 / span 8; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: var(--s-12); }
  .method-close > .h3 { grid-column: 1 / span 8; }
  .method-link { grid-column: 9 / -1; justify-self: end; align-self: end; }
}

/* ---------- Chapter 03. See it work ---------- */
.scenario-label { margin-bottom: var(--s-4); }
.ch03-intro { margin-top: var(--s-6); }

.path { position: relative; margin-top: var(--s-16); padding-left: 32px; }
.path::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 24px; width: 1px; background: var(--c360-line);
}
.stage { position: relative; padding-bottom: var(--s-8); }
.stage-name {
  font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0; color: var(--c360-ink);
}
.stage-node {
  position: absolute; left: -32px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--c360-steel);
}
.stage-last .stage-node { width: 14px; height: 14px; left: -34px; top: 3px; background: var(--c360-navy); }
.stage-today, .stage-new { font-size: 15px; line-height: 1.5; }
.stage-today { margin-top: var(--s-3); color: var(--c360-muted); }
.stage-new { margin-top: var(--s-3); color: var(--c360-ink); }
.row-label { display: block; font-weight: 600; font-size: 13px; line-height: 1.4; margin-bottom: var(--s-1); }
.stage-today .row-label { color: var(--c360-muted); }
.stage-new .row-label { color: var(--c360-ink); }
.stage-text { display: block; }
.stage-text::first-letter, .split-list li::first-letter { text-transform: uppercase; }

.measures-wrap { margin-top: var(--s-16); row-gap: var(--s-8); }
.measures { width: 100%; border-collapse: collapse; }
.measures th, .measures td { text-align: left; padding: var(--s-3) 0; border-bottom: 1px solid var(--c360-line); vertical-align: bottom; }
.measures thead th { font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--c360-muted); padding-top: 0; }
.measures tbody th { font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--c360-ink); padding-right: var(--s-4); }
.measures td, .measures thead th:not(:first-child) { width: 64px; }
.blank { display: inline-block; width: 48px; height: 1px; background: var(--c360-steel); vertical-align: middle; }

@media (min-width: 1024px) {
  .ch03-head { align-items: end; }
  .ch03-title { grid-column: 1 / span 5; }
  .ch03-intro { grid-column: 7 / -1; margin-top: 0; }
  .path {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px;
    grid-template-rows: auto auto auto; padding-left: 0; margin-top: var(--s-16);
  }
  .path::before { left: 5px; right: calc((100% - 120px) / 6 - 7px); top: 5px; bottom: auto; height: 1px; width: auto; }
  .stage { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding-bottom: 0; }
  .stage-node { position: relative; display: block; left: 0; top: 0; margin-bottom: var(--s-6); }
  .stage-last .stage-node { left: -2px; top: -2px; margin-bottom: 20px; }
  .stage-today { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c360-line); }
  .stage-new { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c360-line); }
  /* Row labels read once, in the first column; the others keep the space so rows align. */
  .stage:not(:first-child) .row-label { color: transparent; user-select: none; }
  .measures-wrap { margin-top: var(--s-16); align-items: end; }
  .measures { grid-column: 1 / span 7; }
  .measures td, .measures thead th:not(:first-child) { width: 120px; }
  .blank { width: 80px; }
  .measures-line { grid-column: 9 / -1; }
}

/* ---------- Chapter 04. Who you work with ---------- */
.guide { row-gap: var(--s-12); }
.guide-portrait { max-width: 280px; }
.guide-portrait figcaption { margin-top: var(--s-4); }
.guide-body { margin-top: var(--s-6); }
.trust { text-wrap: balance; margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c360-line); }
.guide-text .trust + p { margin-top: var(--s-6); }
.quote { margin: var(--s-24) 0 0; padding-top: var(--s-12); border-top: 1px solid var(--c360-line); }
.quote p {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; color: var(--c360-ink); text-wrap: balance;
}

@media (min-width: 1024px) {
  .guide { align-items: start; }
  .guide-portrait { grid-column: 1 / span 4; max-width: none; }
  .guide-text { grid-column: 6 / span 7; }
  .quote { margin-top: var(--s-24); padding-top: var(--s-12); }
  .quote p { font-size: 56px; line-height: 1.08; max-width: 1098px; }
}

/* ---------- Chapter 05. Where we work ---------- */
.industries { margin-top: var(--s-12); row-gap: var(--s-6); }
.industry { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.industry-photo { border-radius: 0; aspect-ratio: 3 / 2; }
.industry-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-8); }
.industry-link { margin-top: auto; padding-top: var(--s-6); }

@media (min-width: 1024px) {
  .ch05-title { grid-column: 1 / span 8; }
  .industry { grid-column: span 6; }
  .industry-body { padding: var(--s-8) var(--s-8) var(--s-12); }
}

/* ---------- Chapter 06. By design (navy) ---------- */
.split { margin-top: var(--s-12); row-gap: var(--s-12); }
.split-head { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin-bottom: var(--s-6); }
.split-list li {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 26px; border-top: 1px solid rgb(255 255 255 / 14%);
  color: #fff;
}
.split-list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 14%); }
.split-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + 0.8em - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--c360-steel); }
.split-people .split-list li::before { background: #fff; }
.split-close { margin-top: var(--s-12); color: #fff; }

@media (min-width: 1024px) {
  .ch06-title { grid-column: 1 / span 7; }
  .split { margin-top: var(--s-12); }
  .split-system { grid-column: 1 / span 5; }
  .split-people { grid-column: 7 / span 5; }
  .split-head { font-size: 26px; }
  .split-close { grid-column: 1 / span 8; }
}

/* ---------- Answers ---------- */
.answers { row-gap: var(--s-8); }
@media (min-width: 1024px) {
  .answers-head { grid-column: 1 / span 4; }
  .answers-list { grid-column: 5 / -1; }
  .faq details:first-child summary { padding-top: 0; }
  .faq details:first-child { border-top: 0; }
}

/* ---------- Final CTA ---------- */
.final-grid { row-gap: var(--s-8); }
.final-rule { display: none; }
.final-actions { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
.final-action .small { margin-top: var(--s-3); }
.demo-note { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--c360-line); }

@media (min-width: 1024px) {
  .final-grid { align-items: start; }
  .final-title { grid-column: 1 / span 6; }
  .final-copy { grid-column: 7 / -1; }
  .final-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ---------- Footer (slate) ---------- */
.site-footer { padding: var(--s-16) 0 var(--s-8); }
.footer-grid { row-gap: var(--s-12); }
/* Clear space: half the isotype height (about 31px at 240px wide) on every side. */
.footer-brand img { width: 240px; height: auto; margin-bottom: var(--s-8); }
.footer-desc { color: #fff; max-width: 40ch; }
.footer-head { font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.5; color: #fff; }
.footer-col ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.footer-col li { font-size: 15px; line-height: 1.5; color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--c360-teal); text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid rgb(255 255 255 / 16%); color: #fff;
}
.footer-bottom ul { display: flex; gap: var(--s-6); }

@media (max-width: 1023px) {
  .footer-col { grid-column: span 2; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .footer-contact { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-brand { grid-column: 1 / span 4; }
  .footer-pages { grid-column: 6 / span 2; }
  .footer-industries { grid-column: 8 / span 2; }
  .footer-contact { grid-column: 10 / span 3; }
}

/* ---------- Reveal stagger (set by app.js) ---------- */
.reveal { transition-delay: var(--reveal-delay, 0ms); }