/* waynemorris.co
   Charcoal and deep black with mint, cream paper bands, Space Grotesk headlines
   with uppercase page titles, Inter body, IBM Plex Mono labels, square mint
   buttons, thin mint rules between sections. House rules: no italics, no glow,
   no pills, no eyebrow over every heading, one mint term per page title. */

@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #0d1012;
  --deep: #040506;
  --panel: #151b1e;
  --ink: #fcf7f1;          /* headings, strong text (cream) */
  --ink-2: #c7d1d4;        /* body */
  --muted: #93a9b3;
  --rule: rgba(160, 222, 199, .16);
  --rule-strong: rgba(160, 222, 199, .32);
  --mint: #a0dec7;
  --mint-bright: #c5ecde;
  --link: #a0dec7;
  --button: #a0dec7;
  --button-ink: #040506;
  --teal: #a0dec7;

  --paper: #fcf7f1;
  --paper-ink: #14181a;
  --paper-2: #3f494f;
  --paper-muted: #5c676e;
  --paper-rule: rgba(20, 24, 26, .16);
  --paper-link: #267357;

  --display: "Space Grotesk", "Inter", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --max: 1600px;
  --gutter: clamp(20px, 5vw, 96px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--deep); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--ink-2); font: 400 17px/1.65 var(--sans);
  background: radial-gradient(ellipse 120% 40% at 50% -8%, rgba(160, 222, 199, .10), transparent 60%), var(--ground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--mint-bright); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); }
h1 { font-weight: 700; text-transform: uppercase; font-size: clamp(38px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(28px, 2.9vw, 46px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.3; }
.hl { color: var(--mint); }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
strong { color: var(--ink); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--mint); color: var(--deep); padding: 10px 16px; font: 600 14px var(--display); }
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 780px; }
.section { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.section.deep { background: var(--deep); }
.lede { font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: 720px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.head { max-width: 920px; margin-bottom: 44px; }
.head p { margin-top: 16px; }
/* Wide screens: heading left, its intro right, so text sections use the full width. */
@media (min-width: 1100px) {
  .head:has(> h2 + p) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
  .head:has(> h2 + p) > h2 { grid-row: 1 / span 6; }
  .head:has(> h2 + p) > :not(h2) { grid-column: 2; }
  .head:has(> h2 + p) > h2 + * { margin-top: 6px; }
}
/* Large monitors: scale type with the wider layout. */
@media (min-width: 1700px) {
  body { font-size: 18px; }
  .lede { font-size: 22px; max-width: 800px; }
  .measure, .cause { max-width: 860px; }
  .proof { font-size: 17px; max-width: 800px; }
  h3 { font-size: 21px; }
}
.label { font: 500 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Cream paper bands carry the audit material. */
.paper { background: var(--paper); color: var(--paper-2); color-scheme: light; border-top: 0; }
.paper + .section { border-top: 0; }
.paper h1, .paper h2, .paper h3, .paper strong { color: var(--paper-ink); }
.paper .hl { color: var(--paper-link); }
.paper a { color: var(--paper-link); }
.paper a:hover { color: var(--paper-ink); }
.paper .muted, .paper .label { color: var(--paper-muted); }

/* Buttons: square, mint, uppercase grotesk. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 28px; border: 1px solid var(--button); border-radius: 0;
  background: var(--button); color: var(--button-ink); font: 600 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--mint-bright); border-color: var(--mint-bright); color: var(--button-ink); }
.paper .btn { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }
.paper .btn:hover { background: #2a3236; color: var(--paper); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 34px; }
.cta .note { font-size: 15px; color: var(--muted); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(13, 16, 18, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.site-head .wrap { height: 68px; display: flex; align-items: center; gap: 36px; }
.wordmark { margin-right: auto; font: 700 17px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--mint); }
.nav { display: flex; gap: 28px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--mint); }
.site-head .btn { min-height: 40px; padding: 8px 16px; font-size: 12.5px; }
.menu { display: none; height: 40px; padding: 0 14px; background: none; color: var(--ink); border: 1px solid var(--rule-strong); font: 500 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-panel { display: none; }
@media (max-width: 880px) {
  .site-head .wrap { gap: 10px; }
  .nav { display: none; }
  .menu { display: inline-block; }
  .menu-panel.open { display: block; border-top: 1px solid var(--rule); }
  .menu-panel ul { list-style: none; padding: 6px var(--gutter) 14px; }
  .menu-panel a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 420px) { .wordmark { font-size: 15px; } .site-head .btn { padding: 8px 10px; letter-spacing: .04em; } }

/* Hero */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { max-width: 920px; }
.hero .lede { margin-top: 26px; }
.facts { margin-top: 20px; max-width: 720px; font-size: 17px; font-weight: 500; color: var(--ink); }
.proof { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); max-width: 720px; font-size: 16px; color: var(--ink-2); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule-strong); }
.hero-sheet { margin: 0; }
.hero-sheet img { width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.hero-sheet figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .portrait img { aspect-ratio: 3 / 2; max-height: 460px; object-position: 50% 28%; }
  .hero-sheet { max-width: 420px; }
}

/* Logo strip */
.logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; margin: 0; }
.logos img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .78; }
.logos .cl-concom { height: 32px; } .logos .cl-5d { height: 19px; } .logos .cl-rooster { height: 24px; }
.logos .cl-wide { height: 18px; } .logos .cl-tall { height: 27px; } .logos .cl-small { height: 34px; }
.logos .logo-word { font: 500 20px/1 var(--display); letter-spacing: -.01em; color: #fff; opacity: .78; }
@media (max-width: 720px) { .logos { gap: 18px 30px; } .logos img { height: 17px; } .logos .cl-concom { height: 25px; } .logos .cl-5d { height: 15px; } .logos .cl-rooster { height: 19px; } .logos .cl-wide { height: 14px; } .logos .cl-tall { height: 21px; } .logos .cl-small { height: 28px; } .logos .logo-word { font-size: 17px; } }

/* Track record: three labelled rows, each list said once. */
.record { border-top: 1px solid var(--rule-strong); }
.rec { display: grid; grid-template-columns: 220px 1fr; gap: 12px 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.rec .label { color: var(--mint); }
.names { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; font: 500 21px/1.3 var(--display); color: var(--ink); }
.rec .logos { margin: 0; }
.rec .also { margin-top: 14px; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .rec { grid-template-columns: 1fr; } .names { font-size: 18px; gap: 6px 22px; } }
.wins-h { margin-top: 56px; color: var(--mint); }
/* Home, the three CRO roles: one ruled row each (company, the number, the story), so they
   read as a record and not as a second row of quotes. */
.quote-row + .wins-h { margin-top: 96px; }
.roles { list-style: none; margin-top: 18px; border-top: 2px solid var(--mint); }
.roles li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 12px 56px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.roles h3 { font-size: 24px; }
.role-tag { margin-top: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.role-fig strong { display: block; font: 600 clamp(32px, 3.4vw, 46px)/1.05 var(--display); letter-spacing: -.02em; color: var(--mint); }
.role-fig span { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.role-txt { font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) {
  .quote-row + .wins-h { margin-top: 64px; }
  .roles li { grid-template-columns: 1fr; gap: 14px; align-items: start; padding: 26px 0; }
}
.wins { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 48px; margin-top: 18px; }
.wins li { padding-top: 18px; border-top: 2px solid var(--mint); }
.wins h3 { font-size: 21px; }
.wins .moved { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin: 0 0 8px; }
.wins p { margin-top: 8px; font-size: 17px; }
@media (max-width: 900px) { .wins { grid-template-columns: 1fr; gap: 24px; } }

/* Quotes: one lead, two supporting, set apart by a mint rule. */
.quotes { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px 72px; }
.quote { margin: 0; }
.quote blockquote { margin: 0; font: 400 18px/1.6 var(--sans); color: var(--ink); }
.quote.lead blockquote { font: 500 clamp(23px, 2.4vw, 30px)/1.35 var(--display); letter-spacing: -0.01em; padding-left: 24px; border-left: 2px solid var(--mint); }
.quote.lead figcaption { padding-left: 26px; }
.quotes > .quote.lead { align-self: center; }
.quote figcaption { margin-top: 16px; font: 400 12.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 500; }
.quote figcaption .disc { display: block; margin-top: 6px; font: 400 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.quote-stack { display: grid; gap: 36px; }
.quote-stack .quote { padding-top: 26px; border-top: 1px solid var(--rule); }
@media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }

/* Sales velocity */
.formula { margin: 0 0 40px; padding: 26px 0; text-align: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 500 clamp(19px, 2.1vw, 25px)/1.4 var(--display); color: var(--ink); }
.formula .op { color: var(--mint); padding: 0 .35em; }
.formula .t { white-space: nowrap; }
.cause { margin-top: 28px; max-width: 780px; }

/* Two situations */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.pair > div { padding-top: 20px; border-top: 2px solid var(--mint); }
.paper .pair > div { border-top-color: var(--paper-link); }
.pair h3 { font-size: 24px; }
.pair p { margin-top: 10px; }
.pair.plain > div { border-top-width: 1px; border-top-color: var(--rule-strong); }
.pair.plain h3 { font-size: 20px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* The offer table */
.offers { width: 100%; border-collapse: collapse; margin-top: 56px; font-size: 16px; }
.offers th, .offers td { text-align: left; vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); }
.offers thead th { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; padding-bottom: 12px; border-bottom-color: var(--rule-strong); }
.offers tbody th { font: 700 22px/1.2 var(--display); color: var(--ink); width: 18%; }
.offers .price { white-space: nowrap; }
.offers td:nth-child(3) { min-width: 170px; }
.offers .price { color: var(--mint); font: 600 17px/1.4 var(--display); }
.offers td:last-child { padding-right: 0; white-space: nowrap; }
.after-table { margin-top: 20px; font-size: 15px; color: var(--muted); }
.head + .offers { margin-top: 0; }
/* The four numbers, one column each under the formula. */
.nums { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 40px; }
.nums li { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.nums h3 { font-size: 19px; }
.nums p { margin-top: 8px; font-size: 16px; }
@media (max-width: 1000px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nums { grid-template-columns: 1fr; } }
.cause { margin-top: 44px; }
.paper .offers th, .paper .offers td { border-color: var(--paper-rule); }
.paper .offers thead th, .paper .after-table { color: var(--paper-muted); }
.paper .offers tbody th { color: var(--paper-ink); }
.paper .offers .price { color: var(--paper-link); }
@media (max-width: 880px) {
  .offers thead { display: none; }
  .offers, .offers tbody, .offers tr, .offers th, .offers td { display: block; width: auto; }
  .offers tr { padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .paper .offers tr { border-color: var(--paper-rule); }
  .offers th, .offers td, .offers tbody th { border: 0; padding: 4px 0; white-space: normal; width: auto; }
  .offers td:last-child { padding-top: 14px; }
}

/* GTM Debt score chart: mint on black, debt hatched below the 75 line. */
.chart { margin: 0; font-size: 14px; }
.chart .phase { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0 6px; font: 600 15px var(--display); color: var(--ink); }
.chart .phase:first-child { margin-top: 0; }
.chart .phase span:last-child { font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.chart ol { list-style: none; }
.chart li { display: grid; grid-template-columns: 220px 1fr 48px; align-items: center; gap: 12px; padding: 3px 0; }
.chart .name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart .track { position: relative; height: 16px; background: rgba(252, 247, 241, .07); }
.chart .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 1%); background: var(--teal); }
.chart .debt { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 1%); width: calc((75 - var(--s)) * 1%); background: repeating-linear-gradient(135deg, rgba(252, 247, 241, .42) 0 2px, transparent 2px 5px); }
.chart .line { position: absolute; top: -4px; bottom: -4px; left: 75%; border-left: 2px solid var(--ink); }
.chart .score { text-align: right; color: var(--mint); font: 600 15px var(--display); }
.chart .phases li { padding: 6px 0; }
.chart .phases .track { height: 24px; }
.chart .phases .name { font-size: 15px; color: var(--ink); }
.chart details.more { margin-top: 18px; }
.chart details.more summary { cursor: pointer; color: var(--mint); font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.chart details.more[open] summary { margin-bottom: 4px; }
.chart .key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.chart .key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--k); }
.chart .key .k-debt::before { background: repeating-linear-gradient(135deg, rgba(252, 247, 241, .6) 0 2px, transparent 2px 5px); }
.chart .key .k-line::before { width: 2px; height: 12px; background: var(--ink); }
.chart-caption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.chart.anim .fill { transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.chart.anim .debt { transition: opacity .4s ease .5s; }
.chart.anim.pre .fill { width: 0; }
.chart.anim.pre .debt { opacity: 0; }
@media (max-width: 560px) {
  .chart li { grid-template-columns: 1fr 40px; grid-template-areas: "name name" "track score"; gap: 2px 10px; padding: 5px 0; }
  .chart .name { grid-area: name; white-space: normal; }
  .chart .track { grid-area: track; }
  .chart .score { grid-area: score; }
  .chart .phase { flex-wrap: wrap; gap: 0 12px; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }

.cite { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--mint); }
.cite p { font: 500 21px/1.5 var(--display); color: var(--ink); }
.cite .cite-note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.paper .cite { border-left-color: var(--paper-link); }
.paper .cite p { color: var(--paper-ink); }
.paper .cite footer { color: var(--paper-muted); }

/* Audit sheets on paper */
.sheets { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.sheets figure { margin: 0; }
.sheets a.zoom { display: block; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 12px 32px rgba(20, 24, 26, .14); transition: transform .25s ease, box-shadow .25s ease; }
.sheets a.zoom:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20, 24, 26, .14), 0 18px 40px rgba(20, 24, 26, .2); }
.sheets img { width: 100%; aspect-ratio: 1275 / 1650; }
.sheets figcaption { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--paper-2); }
.sheets h3 { font-size: 17px; margin-bottom: 4px; }
.sheets.all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .sheets.all { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sheets.all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .sheets:not(.all) { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .sheets:not(.all) li { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .sheets a.zoom, .sheets a.zoom:hover { transition: none; transform: none; } }
.fiction { margin-top: 28px; font-size: 14px; color: var(--paper-muted); }
.links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }

/* Lightbox */
.lightbox { padding: 0; border: 0; background: transparent; width: min(96vw, 1100px); max-width: none; max-height: 96vh; color: var(--ink); }
.lightbox::backdrop { background: rgba(4, 5, 6, .92); }
.lightbox .bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 0 0 10px; font-size: 15px; }
.lightbox .bar div { display: flex; gap: 8px; }
.lightbox button, .lightbox .bar a { background: var(--ground); color: var(--ink); border: 1px solid var(--rule-strong); padding: 8px 14px; font: 500 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.lightbox .frame { max-height: calc(96vh - 60px); overflow: auto; background: #fff; }
.lightbox img { width: 100%; }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0 28px; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 18px; border-top: 2px solid var(--mint); }
.steps li::before { content: "0" counter(s); display: block; font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--mint); margin-bottom: 14px; }
.steps h3 { font-size: 18px; }
.steps p { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.paper .steps li { border-top-color: var(--paper-link); }
.paper .steps li::before { color: var(--paper-link); }
.paper .steps p { color: var(--paper-2); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Role table */
.table { width: 100%; border-collapse: collapse; font-size: 17px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--rule); }
.table thead th { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; border-bottom-color: var(--rule-strong); }
.table tbody th { color: var(--ink); font: 600 17px var(--display); width: 24%; }
@media (max-width: 640px) { .table tbody th { width: 34%; } }

/* Lists written as rows (hero timelines) */
.rows { list-style: none; }
.rows li { padding: 0 0 20px 18px; border-left: 2px solid var(--rule-strong); }
.rows strong { display: block; margin-bottom: 2px; font: 500 12.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.hero .rows { margin-top: 8px; font-size: 16px; }

/* Q and A, open */
.qa div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px 48px; padding: 22px 0; border-top: 1px solid var(--rule); }
.qa dt { color: var(--ink); font: 600 19px/1.35 var(--display); }
.qa dd { color: var(--ink-2); }
.paper .qa div { border-color: var(--paper-rule); }
.paper .qa dt { color: var(--paper-ink); }
.paper .qa dd { color: var(--paper-2); }
@media (max-width: 760px) { .qa div { grid-template-columns: 1fr; } }

/* Close */
.close h2 { max-width: 1000px; text-transform: uppercase; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.05; }
.close p { margin-top: 18px; max-width: 720px; }
.close .after { margin-top: 40px; font-size: 16px; color: var(--muted); }

/* Pillars (GTM Debt) */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.pillars h3 { font-size: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-link); }
.pillars ol { list-style: none; }
.pillars li { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 14px 0; border-bottom: 1px solid var(--paper-rule); }
.pillars li > span { color: var(--paper-link); font: 500 13px/1.7 var(--mono); }
.pillars strong { display: block; font-family: var(--display); }
.pillars p { margin-top: 4px; font-size: 16px; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* About */
.glance { border-top: 1px solid var(--rule-strong); }
.glance div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.glance dt { font: 500 12.5px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.glance dd { color: var(--ink); }
@media (max-width: 640px) { .glance div { grid-template-columns: 1fr; gap: 2px; } }
.story p { font-size: 18px; line-height: 1.7; }

.crumb { font: 500 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.crumb a { color: var(--mint); }

/* Footer */
.site-foot { background: var(--deep); border-top: 1px solid var(--rule); padding: 56px 0 40px; font-size: 15px; color: var(--muted); }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-foot .fh { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-bottom: 12px; }
.site-foot .fname { font: 700 16px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.site-foot ul { list-style: none; }
.site-foot li + li { margin-top: 8px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--mint); }
.site-foot .base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.site-foot .base a { text-decoration: underline; }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }

/* Wayne's Loom (fractional page), shown only once _build.py has a LOOM_ID */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 960px; background: var(--ink, #0d1012); overflow: hidden; }
.video iframe, .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { padding: 0; cursor: pointer; background: #0d1012; }
.video-play img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .55; }
.video-label { position: absolute; left: 24px; bottom: 24px; padding: 14px 22px; background: var(--mint); color: #0d1012; font-weight: 600; font-size: 17px; }
.video-play:hover .video-label, .video-play:focus-visible .video-label { filter: brightness(1.08); }
.video-note { margin-top: 10px; font-size: 14px; }

/* ---- 10 Nov call: compact home hero so the first logo row shows on a laptop ---- */
.hero.home { padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 52px); }
.hero.home .wrap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.hero.home .portrait img { aspect-ratio: 1 / 1; max-height: 440px; object-position: 50% 22%; }
.hero.home .lede { font-size: clamp(19px, 1.5vw, 23px); max-width: 640px; }
.record-band { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 880px) { .hero.home .wrap { grid-template-columns: 1fr; gap: 28px; } .hero.home .portrait img { aspect-ratio: 16 / 9; max-height: 230px; object-position: 50% 26%; } }

/* Quotes: a row of three under the lead and its stack */
.quote-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 56px; margin-top: 48px; }
.quote-row .quote { padding-top: 26px; border-top: 1px solid var(--rule); }
.quote-row blockquote { font-size: 16px; }
@media (max-width: 1000px) { .quote-row { grid-template-columns: 1fr; } }

/* ---- Four numbers, interactive ---- */
.velocity { overflow: hidden; background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(160, 222, 199, .07), transparent 70%), var(--ground); }
.vel-formula { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin: 8px 0 44px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.vel-formula span { color: var(--mint); font-size: 18px; letter-spacing: 0; }
.vel-formula b { color: var(--mint); font-weight: 600; }
.levers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.levers li { padding-top: 18px; border-top: 1px solid var(--rule-strong); transition: border-color .3s; }
.levers li.on { border-top-color: var(--mint); }
.lever-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lever-top label { font: 600 19px/1.3 var(--display); color: var(--ink); }
.lever-top output { font: 500 14px/1 var(--mono); color: var(--mint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.levers p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }

/* Range: a square mint thumb on a thin track that fills as you drag */
.vel input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 6px 0 0; background: transparent; cursor: pointer; --p: 20%; }
.vel input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--mint) var(--p), rgba(160, 222, 199, .18) var(--p)); }
.vel input[type="range"]::-moz-range-track { height: 4px; background: rgba(160, 222, 199, .18); }
.vel input[type="range"]::-moz-range-progress { height: 4px; background: var(--mint); }
.vel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; background: var(--mint); border: 3px solid var(--ground); box-shadow: 0 0 0 1px var(--mint); }
.vel input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0; background: var(--mint); border: 3px solid var(--ground); box-shadow: 0 0 0 1px var(--mint); }
.vel input[type="range"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.vel-result { max-width: 19em; margin: 56px auto 0; text-align: center; font: 500 clamp(28px, 3.6vw, 52px)/1.3 var(--display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.vel-result b { font-weight: 700; color: var(--mint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vel-rev { display: inline-flex; align-items: baseline; font-weight: 700; color: var(--mint); white-space: nowrap; }
.vel-note { margin: 40px auto 0; max-width: 820px; text-align: center; font: 500 clamp(17px, 1.4vw, 20px)/1.5 var(--display); color: var(--ink-2); }

/* Phones: a pinned figure keeps the result in view while you drag */
.vel-pin { display: none; }
@media (max-width: 1100px) { .levers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
@media (max-width: 700px) {
  .levers { grid-template-columns: 1fr; gap: 28px; }
  .vel-formula { font-size: 11.5px; gap: 4px 10px; }
  .vel-pin { display: flex; position: sticky; bottom: 10px; z-index: 5; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-top: 8px; background: var(--deep); border: 1px solid var(--mint); font: 500 14px/1.2 var(--mono); color: var(--ink); }
  .vel-pin b { font: 700 24px/1 var(--display); color: var(--mint); }
}
@media (prefers-reduced-motion: reduce) { .levers li { transition: none; } }

/* Fit lists on the audit page */
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 2px; background: var(--mint); }
.ticks.no li::before { background: var(--muted); }
.paper .ticks li::before { background: var(--paper-link); }

/* GTM Debt page: stage signs, the 74% figure */
.pillars p b { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-link); margin-right: 6px; }
.pillars .debt-signs b { color: #9a4a2e; }
.pillars .debt-signs { color: var(--paper-muted); }
.stat { margin: 0; padding: 28px 0 0 28px; border-left: 2px solid var(--mint); }
.stat-big { font: 700 clamp(72px, 9vw, 132px)/.9 var(--display); color: var(--mint); letter-spacing: -.03em; }
.stat blockquote { margin: 18px 0 0; font: 500 21px/1.45 var(--display); color: var(--ink); }
.stat figcaption { margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* ---- About: the career timeline. A centre line that fills as you scroll, years on the line,
   the story on one side and its proof (a quote, logos) on the other, alternating. ---- */
.tl-title { text-align: center; text-transform: uppercase; font-size: clamp(30px, 3.8vw, 52px); margin-bottom: clamp(40px, 5vw, 72px); }
.tl { list-style: none; position: relative; margin: 0 auto; max-width: 1240px; padding: 0; --prog: 0; }
.tl::before, .tl::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.tl::before { background: var(--rule-strong); }
.tl::after { background: var(--mint); transform-origin: top; transform: scaleY(var(--prog)); }
.tl > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); align-items: start; padding: 0 0 clamp(56px, 7vw, 96px); }
.tl > li:last-child { padding-bottom: 8px; }
.tl-year { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; margin: 0; }
.tl-year span { display: block; min-width: 92px; padding: 9px 12px; text-align: center; font: 700 20px/1 var(--display); color: var(--button-ink); background: var(--mint); }
.tl-main { grid-column: 1; grid-row: 1; text-align: right; padding-top: 2px; }
.tl-side { grid-column: 3; grid-row: 1; padding-top: 2px; }
.tl-main h3 { font-size: clamp(22px, 2vw, 28px); }
.tl-main p { margin-top: 10px; font-size: 17px; line-height: 1.65; }
.tl-side .quote blockquote { font: 500 19px/1.5 var(--display); color: var(--ink); }
.tl-side .quote figcaption { margin-top: 12px; }
.tl-side .cite { margin-top: 0; text-align: left; }
.tl-side .cite p { font-size: 18px; }
.tl-side .links { margin-top: 14px; }
.tl-logos { gap: 18px 32px; }
.tl-logos { justify-content: flex-end; }
.tl-logos img { height: 26px; } .tl-logos .cl-wide { height: 22px; } .tl-logos .logo-word { font-size: 24px; }
.tl-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl-places li { color: var(--ink-2); font-size: 16px; }
.tl-places span { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
/* reveal on scroll, only when the script is running and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .tl.js > li .tl-main, .tl.js > li .tl-side { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
  .tl.js > li .tl-main { transform: translateX(-28px); }
  .tl.js > li .tl-side { transform: translateX(28px); }
  .tl.js > li .tl-side { transition-delay: .12s; }
  .tl.js > li.in .tl-main, .tl.js > li.in .tl-side { opacity: 1; transform: none; }
  .tl.js > li .tl-year span { transform: scale(.85); transition: transform .4s ease, background .4s; background: var(--panel); color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
  .tl.js > li.in .tl-year span { transform: none; background: var(--mint); color: var(--button-ink); box-shadow: none; }
  .tl.js > li.done .tl-main, .tl.js > li.done .tl-side, .tl.js > li.done .tl-year span { transition: none; transform: none; opacity: 1; }
}
@media (max-width: 860px) {
  .tl::before, .tl::after { left: 14px; }
  .tl > li { grid-template-columns: 1fr; padding-left: 44px; gap: 14px; }
  .tl-year { grid-column: 1; justify-self: start; margin-left: -44px; }
  .tl-year span { min-width: 0; font-size: 16px; padding: 7px 9px; }
  .tl-main, .tl > li:nth-child(even) .tl-main { grid-column: 1; grid-row: 2; text-align: left; }
  .tl-side, .tl > li:nth-child(even) .tl-side { grid-column: 1; grid-row: 3; align-items: flex-start; text-align: left; }
  .tl > li:nth-child(even) .tl-logos { justify-content: flex-start; }
  .tl.js > li .tl-main, .tl.js > li .tl-side, .tl.js > li:nth-child(even) .tl-main, .tl.js > li:nth-child(even) .tl-side { transform: translateY(18px); }
}
.hero .portrait img[src="wayne-casual.jpg"] { aspect-ratio: 1 / 1; object-position: 50% 30%; }
.hero .portrait.talk img { aspect-ratio: 3 / 2; object-position: 50% 50%; max-height: none; }

/* 10 Nov review fixes */
.vel-pin { transition: opacity .2s; }
.vel-pin.off { opacity: 0; pointer-events: none; }
@media (min-width: 881px) { .split > .chart { position: sticky; top: 100px; } }
@media (max-width: 880px) { .hero.home .portrait img { object-position: 50% 12%; } }

/* The six report questions, text only while the sample is offline */
.q6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.q6 li { padding-top: 18px; border-top: 2px solid var(--paper-link); }
.q6 h3 { font-size: 21px; }
.q6 p { margin-top: 8px; font-size: 16px; }
@media (max-width: 900px) { .q6 { grid-template-columns: 1fr; } }

/* Audit page: the interviews */
.depth { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 40px; }
.depth li { padding-top: 18px; border-top: 2px solid var(--mint); }
.depth b { display: block; font: 700 clamp(40px, 4.2vw, 64px)/1 var(--display); color: var(--mint); letter-spacing: -.02em; }
.depth span { display: block; margin-top: 12px; font-size: 16px; color: var(--ink-2); }
.who { margin-top: 56px; max-width: 820px; }
.who h3 { font-size: 22px; }
@media (max-width: 960px) { .depth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .depth { grid-template-columns: 1fr; } }
.tl-year span { white-space: nowrap; }

/* Timeline: a logo in place of the title for company years */
.tl-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; min-height: 34px; }
.tl-logo { justify-content: flex-end; }
.tl-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.tl-logo img.cl-wide { height: 26px; }
.tl-logo .logo-word { font: 600 28px/1 var(--display); color: #fff; opacity: .9; letter-spacing: -.01em; }
.tl-logo img[src$="rvnu.svg"] { filter: none; opacity: 1; height: 28px; }
.tl-logo img[src$="reuters.svg"] { height: 44px; }
@media (max-width: 860px) { .tl-logo, .tl-logos { justify-content: flex-start; } .tl-logo img { height: 26px; } }

/* revenue today, the number the result line starts from */
.vel-rev input { font: inherit; letter-spacing: inherit; color: var(--mint); background: transparent; border: 0; border-bottom: 2px dashed rgba(160, 222, 199, .55); padding: 0 0 4px; width: 2ch; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.vel-rev input::-webkit-outer-spin-button, .vel-rev input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vel-rev input:hover { border-bottom-color: var(--mint); }
.vel-rev input:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-bottom-style: solid; }

/* Exit criteria: a short checklist inside each stage */
.pillars .exit { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; }
.pillars .exit li { display: block; position: relative; padding: 0 0 0 18px; border: 0; font-size: 15.5px; line-height: 1.5; }
.pillars .exit li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 2px; background: var(--paper-link); }
.pillars .debt-signs { margin-top: 10px; }

/* GTM Debt hero: the talk photo leads, the definition sits centred beneath it */
.hero.gd-hero { padding-top: clamp(24px, 3vw, 44px); }
.gd-hero .wrap { display: block; }
.gd-photo { margin: 0; }
.gd-photo img { display: block; width: 100%; aspect-ratio: 2 / 1; max-height: 64vh; object-fit: cover; object-position: 50% 22%; border: 1px solid var(--rule-strong); }
.gd-def { max-width: 860px; margin: clamp(32px, 4vw, 52px) auto 0; text-align: center; }
.gd-def p { font: 500 clamp(20px, 2vw, 26px)/1.5 var(--display); color: var(--ink); text-wrap: balance; }
.gd-def .gd-note { margin-top: 14px; font: 400 15px/1.4 var(--sans); color: var(--muted); }
@media (max-width: 700px) { .gd-photo img { aspect-ratio: 3 / 2; } }

/* ---- Motion pass (13 Nov). Everything here is an enhancement: without JS, or with reduced
   motion, each piece falls back to a still version that shows the same content. ---- */

/* Pages crossfade into each other where the browser supports it */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

/* Rows rise in as they scroll into view (script.js adds .rv only to rows below the fold) */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
  .rv.in { opacity: 1; transform: none; }
}
[data-count] { font-variant-numeric: tabular-nums; }

/* Home: the lead quote rotates through four. Without JS all four are listed. */
.quotes > .quote-rot { align-self: center; min-width: 0; }
.rot-set > .quote + .quote { margin-top: 40px; }
.quote-rot.js .rot-set { display: grid; }
.quote-rot.js .rot-set > .quote { grid-area: 1 / 1; align-self: center; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.quote-rot.js .rot-set > .quote.on { opacity: 1; visibility: visible; transition: opacity .55s ease .2s, visibility 0s; }
.rot-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 30px; padding-left: 26px; }
.rot-nav button { position: relative; min-height: 44px; padding: 14px 0 8px; background: none; border: 0; cursor: pointer; font: 500 12.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rot-nav button::before, .rot-nav button::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; }
.rot-nav button::before { width: 100%; background: var(--rule-strong); }
.rot-nav button::after { width: 0; background: var(--mint); }
.rot-nav button:hover { color: var(--ink); }
.rot-nav button.on { color: var(--mint); }
.rot-nav button.on::after { width: 100%; }
.rot-nav.auto button.on::after { animation: rot-fill var(--rot-ms, 7000ms) linear both; }
@keyframes rot-fill { from { width: 0; } to { width: 100%; } }
.quotes + .wins-h { margin-top: 96px; }
@media (max-width: 880px) {
  .quote-rot { display: flex; flex-direction: column; }
  .quote-rot.js .rot-set > .quote { align-self: start; }
  .quote-rot .rot-nav { order: -1; margin: 0 0 22px; padding-left: 0; }
  .quote.lead blockquote { font-size: 21px; }
  .quotes + .wins-h { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .quote-rot.js .rot-set > .quote, .quote-rot.js .rot-set > .quote.on { transition: none; } }

/* Chart rows link to their stage */
.chart li { position: relative; }
.chart .name a { color: inherit; text-decoration: none; }
.chart .name a::after { content: ""; position: absolute; inset: 0; }
.chart li:has(a):hover .name, .chart li:has(a:focus-visible) .name { color: var(--mint); }
.chart li:has(a):hover .track { background: rgba(252, 247, 241, .13); }

/* Audit hero: the sample as a stack of pages that turns over */
.hero:has(.stack) { overflow-x: clip; }
.stack { display: block; position: relative; width: 84%; aspect-ratio: 640 / 828; }
.hero-sheet .stack img { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; transform-origin: 50% 100%; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); transition: transform .65s cubic-bezier(.2, .7, .2, 1), opacity .45s ease, filter .45s ease; }
.stack img[data-pos="0"] { z-index: 3; }
.stack img[data-pos="1"] { z-index: 2; transform: translate(6%, 1%) rotate(2.5deg); filter: brightness(.8); }
.stack img[data-pos="2"], .stack img[data-pos="x"] { z-index: 1; transform: translate(12%, 2%) rotate(5deg); filter: brightness(.62); }
.stack img[data-pos="x"] { z-index: 0; opacity: 0; }
.stack img[data-pos="out"] { z-index: 4; opacity: 0; transform: translate(-12%, 1%) rotate(-5deg); }
@media (hover: hover) {
  .stack:hover img[data-pos="1"] { transform: translate(9%, 1%) rotate(4deg); filter: brightness(.88); }
  .stack:hover img[data-pos="2"] { transform: translate(18%, 2%) rotate(8deg); filter: brightness(.74); }
}
@media (prefers-reduced-motion: reduce) { .hero-sheet .stack img { transition: none; } }

/* GTM Debt: the 16 stages. A native accordion by default (phones, no JS); on wider screens
   script.js adds a rail of the 16 and a single panel, and the accordion is hidden. */
.stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: start; }
.stage-phase h3 { font-size: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-link); }
.stage { border-bottom: 1px solid var(--paper-rule); scroll-margin-top: 90px; }
.stage summary { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; font: 600 18px/1.3 var(--display); color: var(--paper-ink); }
.stage summary::-webkit-details-marker { display: none; }
.stage summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--paper-link); text-align: right; }
.stage[open] summary::after { content: "\2212"; }
.stage summary .n { font: 500 13px/1 var(--mono); color: var(--paper-link); }
.stage-body { display: grid; gap: 18px; padding: 2px 0 22px 34px; }
.stages .lab { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-link); }
.stages .stage-debt .lab { color: #9a4a2e; }
.stages .stage-debt p + p { margin-top: 8px; }
.stages .exit { list-style: none; margin-top: 8px; display: grid; gap: 8px; }
.stages .exit li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; }
.stages .exit li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 2px; background: var(--paper-link); }
.rail, .st-panel { display: none; }
@media (max-width: 820px) { .stages { grid-template-columns: 1fr; gap: 32px; } }
@media (min-width: 821px) {
  .stages.js { display: block; }
  .stages.js > .stage-phase { display: none; }
  .stages.js .rail { display: flex; gap: 18px; }
  .rail-phase { flex: var(--n) 1 0; min-width: 0; }
  .rail-h { font: 600 15px/1.3 var(--display); color: var(--paper-ink); padding-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
  .rail button { display: block; width: 100%; min-height: 64px; padding: 10px 8px 10px; text-align: left; vertical-align: top; background: transparent; color: var(--paper-2); border: 1px solid var(--paper-rule); border-top: 3px solid var(--paper-link); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
  .rail button b { display: block; font: 700 22px/1 var(--display); color: var(--paper-ink); }
  .rail button span { display: none; margin-top: 8px; font: 500 10.5px/1.3 var(--sans); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  .rail button:hover { background: rgba(38, 115, 87, .1); }
  .rail button[aria-selected="true"] { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); transform: translateY(-4px); }
  .rail button[aria-selected="true"] b { color: var(--mint); }
  .rail button:focus-visible { outline: 2px solid var(--paper-link); outline-offset: 2px; }
  .stages.js .st-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; margin-top: 28px; padding: 32px clamp(24px, 3vw, 40px) 36px; min-height: 250px; background: #fff; box-shadow: 0 1px 2px rgba(20, 24, 26, .1), 0 12px 32px rgba(20, 24, 26, .08); }
  .st-id h3 { margin-top: 10px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; }
  .st-step { display: flex; gap: 8px; margin-top: 22px; }
  .st-step button { min-height: 40px; padding: 8px 14px; background: transparent; color: var(--paper-ink); border: 1px solid var(--paper-rule); cursor: pointer; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .st-step button:hover { border-color: var(--paper-ink); }
  .st-panel.swap > * { animation: st-in .3s ease both; }
  .st-panel.swap > :nth-child(2) { animation-delay: .05s; }
  .st-panel.swap > :nth-child(3) { animation-delay: .1s; }
}
@media (min-width: 821px) { .rail-phase { display: flex; flex-direction: column; } .rail-cells { flex: 1; } }
@media (min-width: 1440px) { .rail button { min-height: 100px; padding: 10px 6px; } .rail button span { display: block; } }
@media (min-width: 1700px) { .rail button span { font-size: 12px; } }
@keyframes st-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-panel.swap > * { animation: none; } .rail button { transition: none; } }
/* ---- Closing band: the page's ask on the left, a note form on the right ---- */
.close .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px clamp(48px, 7vw, 120px); align-items: start; }
.write { padding: 28px clamp(20px, 2.4vw, 32px) 30px; border: 1px solid var(--rule-strong); background: rgba(160, 222, 199, .03); }
.write h3 { font-size: 22px; }
.write p { margin-top: 16px; max-width: none; }
.write .write-lede { margin-top: 8px; font-size: 16px; color: var(--muted); }
.write .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.write-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.write label { display: block; margin-bottom: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.write input, .write textarea { display: block; width: 100%; padding: 12px 14px; background: var(--deep); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 0; font: 400 16px/1.5 var(--sans); }
.write textarea { resize: vertical; min-height: 112px; }
.write input:focus-visible, .write textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 0; border-color: var(--mint); }
.write-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.btn.ghost { background: transparent; color: var(--mint); }
.btn.ghost:hover { background: var(--mint); color: var(--button-ink); }
.btn[disabled] { opacity: .6; cursor: default; }
.write-status { font-size: 15px; color: var(--ink-2); }
.write.sent > :not(h3):not(.write-done) { display: none; }
.write-done { margin-top: 10px; font-size: 17px; color: var(--ink); }
@media (max-width: 900px) { .close .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .write-row { grid-template-columns: 1fr; } }

/* ---- Revenue systems: from a finding to a fix. One row per number: what the audit finds
   (set on paper, like the report), what RVNU builds, what the team gets. ---- */
.ho-head, .handoff li { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.ho-head { padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong); font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ho-head span:nth-child(3), .ho-head span:nth-child(4) { color: var(--mint); }
.handoff { list-style: none; }
.handoff li { align-items: stretch; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.handoff h3 { align-self: center; font-size: 21px; }
.handoff p { position: relative; margin: 0; padding: 18px 20px; font-size: 16px; line-height: 1.55; }
.handoff .ho-find { background: var(--paper); color: var(--paper-ink); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.handoff .ho-build { background: var(--panel); color: var(--ink); border-left: 2px solid var(--mint); }
.handoff .ho-get { color: var(--ink); border: 1px solid var(--rule-strong); }
.handoff .ho-build::before, .handoff .ho-get::before { content: "\2192"; position: absolute; left: -33px; top: 50%; transform: translateY(-50%); font: 400 20px/1 var(--mono); color: var(--mint); }
.ho-after { margin-top: 32px; max-width: 780px; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .handoff li.rv p { opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
  .handoff li.rv.in p { opacity: 1; transform: none; }
  .handoff li.rv.in .ho-build { transition-delay: .25s; }
  .handoff li.rv.in .ho-get { transition-delay: .5s; }
}
@media (max-width: 980px) {
  .ho-head { display: none; }
  .handoff { border-top: 1px solid var(--rule-strong); }
  .handoff li { grid-template-columns: 1fr; gap: 0; padding: 28px 0; }
  .handoff h3 { margin-bottom: 14px; }
  .handoff p { padding: 14px 16px 16px; }
  .handoff p + p { margin-top: 30px; }
  .handoff p::after { content: attr(data-label); display: block; order: -1; }
  .handoff p { display: flex; flex-direction: column; gap: 6px; }
  .handoff p::after { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
  .handoff .ho-find::after { color: var(--paper-link); }
  .handoff .ho-build::before, .handoff .ho-get::before { content: "\2193"; left: 16px; top: -24px; transform: none; }
}