/* ============================================
   NEIL.MARKETING — DESIGN SYSTEM
   Replicates the live HubSpot theme (neil.marketing).
   Tokens → Reset → Base type → Layout → Nav → Buttons →
   Heroes → Sections → Home modules → About modules →
   Book modules → CTA band → Footer → Utilities → Mobile
   ============================================ */

/* ============================================
   FONTS (self-hosted — see assets/fonts/README.md)
   ============================================ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
/* No italic face on purpose: the live HubSpot site loads only the regular
   Playfair Display (400/600/700) and every italic is a browser-synthesised
   oblique. Shipping a true italic would render narrower/different than live. */

/* ============================================
   TOKENS — values lifted from the live theme CSS
   ============================================ */

:root {
  --ink: #222222;              /* headings */
  --body: #666666;             /* body copy */
  --purple: #6f64e2;           /* accent / outline buttons */
  --purple-bright: #7c79fe;    /* hero accent words */
  --black: #121212;            /* CTA band + footer */
  --white: #ffffff;
  --off-white: #fafafa;
  --rule: #e3e3e3;
  --rule-strong: #cccccc;

  --font: 'Playfair Display', Georgia, serif;

  --container: 1320px;         /* 1280 content at 1440 with 20px gutters */
  --gutter: 20px;
  --gutter-mobile: 80px;
}

/* ============================================
   RESET
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ============================================
   BASE TYPE
   ============================================ */

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5em;
  color: var(--body);
  background: var(--white);
}

p { color: var(--body); font-size: 18px; line-height: 1.5em; }
li { color: var(--body); font-size: 18px; line-height: 1.5em; }
strong { font-weight: 700; }
em { font-style: italic; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1em;
}
h1 { font-size: 60px; font-weight: 700; }
h2 { font-size: 56px; font-weight: 700; }
h3 { font-size: 48px; }
h4 { font-size: 40px; }
h5 { font-size: 32px; }
h6 { font-size: 24px; }

a { color: #000; text-decoration: none; }
a:hover, a:focus { color: var(--purple); }

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  font-size: 18px;
  line-height: 20.7px;
  color: #000;
}
.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  background: var(--black);
  color: var(--white);
  padding: 10px 16px;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* An inset used by several modules (columns start 30px inside the container) */
.container--inset { padding-left: 50px; padding-right: 50px; }

.rule { height: 1px; background: var(--rule); border: 0; }
.rule--short { width: 57px; background: var(--body); }

/* ============================================
   NAVIGATION — absolute over the dark hero
   ============================================ */

.site-nav {
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.site-nav .nav-inner {
  display: flex;
  align-items: center;
  height: 93px;
  padding: 0 30px 0 15px;
}

.nav-logo { flex-shrink: 0; margin-top: 20px; }
.nav-logo img { width: 200px; height: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 101px;
  margin-left: auto;
}

.nav-links a {
  display: inline-block;
  padding: 5px 0;
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--purple-bright); }

.site-nav .nav-cta { margin-left: 64px; padding: 18px 26px; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 1px 6px;
  margin-left: auto;
}
.nav-toggle span.line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
}
.nav-toggle .screen-reader-text {
  color: #000;
  font-size: 18px;
  line-height: 20.7px;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Off-canvas side menu (visible at <=992px) */
.nav-mobile {
  position: fixed;
  top: 0;
  left: calc(100% + 36px);
  width: 314px;
  height: 100%;
  background: var(--white);
  padding: 0;
  z-index: 1100;
  transition: transform 300ms ease;
}
.nav-mobile.is-open { transform: translateX(-350px); }

.nav-mobile a.nav-mobile-link {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--body);
  padding: 3px 0;
  margin-top: 15px;
}
.nav-mobile a.nav-mobile-link:first-of-type { margin-top: 6px; }
.nav-mobile-cta { background: var(--black); padding: 80px 24px 20px; }

/* ============================================
   BUTTONS — live: 1px outline, 5px radius, 18px Playfair 400
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 20.7px;
  padding: 20px 25px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

/* No-charge consultation — white outline (always sits on a dark ground) */
.btn--primary { color: var(--white); border-color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--black); }

/* Downloads on a light ground — purple outline */
.btn--secondary { color: var(--purple); border-color: var(--purple); }
.btn--secondary:hover { background: var(--purple); color: var(--white); }

/* Downloads on the dark CTA band — white outline */
.btn--secondary--inverse { color: var(--white); border-color: var(--white); }
.btn--secondary--inverse:hover { background: var(--white); color: var(--black); }

/* Purchase Now — filled purple, uppercase 13px, 3px radius */
.btn--ghost {
  background: var(--purple);
  color: var(--white);
  border: 0;
  border-radius: 3px;
  font-size: 13px;
  line-height: 14.95px;
  text-transform: uppercase;
  padding: 20px 25px;
}
.btn--ghost:hover { background: #5b50d4; color: var(--white); }

/* Live's HubSpot buttons carry a 13px inline SVG glyph after the label (download / long arrow) */
.btn svg { height: 13px; width: auto; fill: currentColor; flex: none; }

/* ============================================
   HEROES
   ============================================ */

.hero {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white);
}

.hero--dark-quadrille { background-image: url('/assets/img/hero-dark-bg.webp'); }
.hero--book { background-image: url('/assets/img/book-hero-bg.webp'); }

.hero-title {
  font-size: 56px;
  line-height: 71px;
  font-weight: 700;
  color: var(--white);
}
.hero-title span { line-height: 1.1em; }
.hero-title .accent { color: var(--purple-bright); font-style: italic; }

/* Home hero — text left, portrait right */
.hero--home .hero-split {
  display: grid;
  grid-template-columns: 1fr 400px;
  align-items: start;
  padding: 160px 82px 115px 0;
}
.hero--home .hero-split-text { padding: 101px 0 0 70px; }
.hero--home .hero-split-visual img { width: 400px; height: auto; }

/* About hero — headline, then portrait + pull quote */
.hero--about { padding: 160px 0 141px; }
.hero--about .hero-title { margin-bottom: 0; }
.about-hero-quote {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 60px;
  padding-top: 155px;
}
.about-hero-quote img { width: 96px; height: 125px; }
.about-hero-quote blockquote {
  font-size: 32px;
  line-height: 35.2px;
  color: var(--white);
  font-weight: 400;
}
.about-hero-quote blockquote em { font-style: italic; }
.about-hero-quote .about-hero-by {
  margin-top: 35px;
  font-size: 18px;
  line-height: 27px;
  color: var(--white);
}

/* Book + privacy hero — centred */
.hero--centered { text-align: center; padding: 190px 0 0; }
.hero--centered .hero-title-lg,
.hero--privacy .hero-title-lg {
  font-size: 48px;
  line-height: 72px;
  font-weight: 700;
  color: var(--white);
}
.hero--centered .hero-title-lg span,
.hero--privacy .hero-title-lg span { line-height: 1.5em; }
.hero--centered .hero-title-lg .accent { color: var(--purple-bright); font-weight: 400; font-style: italic; }
.hero--book { padding-bottom: 449px; }
.hero--privacy { padding: 150px 0 0; text-align: center; }
.hero--privacy img { margin: 0 auto; width: 178px; height: 142px; }
.hero--privacy .hero-title-lg { margin-top: 13px; padding-bottom: 77px; }
.hero--privacy .hero-title-lg span { font-weight: 400; }

/* ============================================
   SECTIONS
   ============================================ */

.section { padding: 60px 0; }
.section--white { background: var(--white); }
.section--ruled { border-top: 1px solid var(--rule-strong); }
.section--offwhite { background-image: linear-gradient(#fafafa, #fafafa); }
.section--black { background-image: linear-gradient(#121212, #121212); }
.section--dark {
  background-image: url('/assets/img/footer-background.webp');
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--white); }
.section--dark p, .section--dark span { color: var(--white); }

.section--book-divider {
  height: 600px;
  background-image: url('/assets/img/book-divider-bg.webp');
  background-size: cover;
  background-position: center;
}

.section-title { font-size: 48px; line-height: 52.8px; font-weight: 600; color: var(--ink); }
.section-title--left { text-align: left; }
.section-title--fixed { font-size: 48px; line-height: 52.8px; }
.section-title--light { font-weight: 400; line-height: 60px; }

/* ============================================
   HOME — stats row with vertical-line dividers
   ============================================ */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 33px;
  position: relative;
}
.stat-item { position: relative; }
.stats-row--divided .stat-item:not(:last-child) { padding-right: 109px; }
.stat-item .stat-value {
  font-size: 48px;
  line-height: 52.8px;
  font-weight: 600;
  color: var(--ink);
}
.stat-item p { font-size: 18px; line-height: 27px; color: var(--body); margin-top: 9px; }
.stat-divider {
  position: absolute;
  top: 0;
  right: 29px;
  width: 17px;
  height: 119px;
}
.stats-row--plain .stat-value { font-weight: 700; }
.about-stats { margin-top: 50px; }
.about-stats-rule { margin: 58px 0 69px; }

/* ============================================
   HOME / ABOUT — testimonial slider
   ============================================ */

.t-slider-wrap { margin-top: 34px; padding-bottom: 24px; }
.t-slider {
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 37px 30px 71px;
  overflow: hidden;
}
.t-track {
  display: flex;
  transition: transform 400ms ease;
}
.t-slide {
  flex: 0 0 1220px;
  display: grid;
  grid-template-columns: 271px 852px;
  column-gap: 20px;
  padding-left: 61px;
}
.t-byline {
  margin-top: 64px;
  font-size: 18px;
  line-height: 27px;
  color: var(--body);
}
.t-byline strong { font-weight: 700; color: var(--body); }
.t-quote {
  font-size: 32px;
  line-height: 35.2px;
  font-weight: 600;
  color: var(--ink);
}
.t-quote .hl { color: var(--purple); }
.t-body { margin-top: 18px; font-size: 18px; line-height: 27px; color: var(--body); }

.t-dots {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 56px;
}
.t-dot {
  width: 30px;
  height: 2px;
  border: 0;
  padding: 0;
  background: #d8d8d8;
  cursor: pointer;
}
.t-dot[aria-selected="true"] { background: var(--ink); }

/* ============================================
   HOME — client logo grid
   ============================================ */

.section--stats { padding: 40px 0 0; }
.section--logos { border-top: 1px solid var(--rule-strong); padding: 90px 0 75px; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  row-gap: 68px;
}
.logo-grid img {
  max-height: 50px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* ============================================
   HOME — dark "CEO Lieutenant" + outcome grid
   ============================================ */

.dark-title { font-size: 56px; line-height: 61.6px; font-weight: 700; color: var(--white); }
.dark-title span { line-height: 1.1em; }

.dark-lede { margin-top: 17px; }
.dark-lede p { font-size: 18px; line-height: 27px; color: var(--white); margin-top: 18px; }
.dark-lede p:first-child { margin-top: 0; }
.dark-lede .accent-purple { color: var(--purple); }

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 405px);
  justify-content: space-between;
  row-gap: 65px;
}
.outcome-item img { width: 165px; height: 165px; }
.outcome-item h5 {
  margin-top: 17px;
  font-size: 32px;
  line-height: 35.2px;
  font-weight: 600;
  color: var(--white);
}
.outcome-item h5 span { line-height: 1.1em; }
.outcome-item p { margin-top: 6px; font-size: 18px; line-height: 27px; color: var(--white); }
.outcome-divider { height: 1px; background: rgba(255, 255, 255, 0.45); margin: 58px 0; }
.outcome-actions { margin-top: 112px; display: grid; grid-template-columns: repeat(3, 405px); justify-content: space-between; }
.outcome-actions .btn { grid-column: 3; justify-self: start; }

/* ============================================
   HOME — book block
   ============================================ */

.book-block {
  display: grid;
  grid-template-columns: 628px 500px;
  column-gap: 93px;
  align-items: start;
}
.book-block .section-title { margin-top: 25px; }
.book-block .rule { margin: 60px 0 49px; }
.book-block p { margin-top: 18px; }
.book-block p:first-of-type { margin-top: 0; }
.book-block-visual img { width: 500px; height: auto; }

/* ============================================
   HOME — outcome marketing model
   ============================================ */

.model-head {
  display: grid;
  grid-template-columns: 842px auto;
  column-gap: 33px;
  align-items: center;
}
.model-head .btn { justify-self: start; }

.model-cols {
  display: grid;
  grid-template-columns: repeat(3, 345px);
  justify-content: space-between;
  padding: 0 30px;
  margin-top: 88px;
}
.model-numeral { width: auto; margin-left: -5px; }
.model-col { background-color: rgba(255, 255, 255, 0); }
.model-col h3 { margin-top: 50px; font-size: 48px; line-height: 52.8px; font-weight: 600; text-align: left; }
.model-list { margin-top: 41px; }
.model-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 0 15px 15px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
  cursor: pointer;
}
.model-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
.model-col--execute .model-row-label { font-size: 18px; line-height: 19.8px; }
.model-row-chevron { flex: 0 0 25px; width: 12px; height: 12px; stroke: #999; }
.model-panel { display: none; }
.model-row[aria-expanded="true"] + .model-panel { display: block; }
.model-panel ul { padding: 10px 0 14px 15px; }
.model-panel li { font-size: 16px; line-height: 24px; }

/* ============================================
   HOME — expanded Q&A ("More about outcome marketing model")
   ============================================ */

.qa-list { margin-top: 50px; }
.qa-item { border-top: 1px solid var(--rule); padding: 47px 0 40px; }
.qa-item:first-child { border-top: 0; padding-top: 0; }
.qa-item h5 { font-size: 32px; line-height: 35.2px; font-weight: 600; color: var(--ink); }
.qa-item h5 span { line-height: 1.1em; }
.qa-item p { margin-top: 13px; font-size: 18px; line-height: 27px; color: var(--body); }

/* ============================================
   ABOUT
   ============================================ */

.section--expertise { padding: 40px 0 110px; }
.expertise-title {
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  color: var(--white);
  text-transform: none;
}

.about-split {
  display: grid;
  grid-template-columns: 595px 595px;
  column-gap: 30px;
  align-items: start;
}
.about-split .section-title { line-height: 52.8px; }
.about-split .rule--short { margin: 27px 0 27px; }
.about-split p { margin-top: 18px; }
.about-split .btn { margin-top: 44px; }
.about-split-visual img { width: 595px; height: auto; }

.awards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 73px;
  align-items: start;
  padding: 0 20px;
}
.awards-row .award-media { display: flex; align-items: flex-start; }
.awards-row .award-media img { margin: 0 auto; }
.awards-row .award-kind { font-size: 18px; line-height: 27px; color: var(--body); margin-top: 14px; }
.awards-row .award-name { font-size: 24px; line-height: 26.4px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.awards-row > div:first-child .award-kind,
.awards-row > div:first-child .award-name { text-align: left; }

.expertise-grid {
  display: grid;
  grid-template-columns: 595px 595px;
  column-gap: 30px;
  row-gap: 143px;
  margin-top: 103px;
}
.expertise-item { background-color: rgba(255, 255, 255, 0); }
.expertise-item img { width: 183px; height: 183px; }
.expertise-item h6 {
  margin-top: 7px;
  font-size: 24px;
  line-height: 26.4px;
  font-weight: 600;
  color: var(--white);
  text-align: left;
}
.expertise-item h6 span { line-height: 1.1em; }
.expertise-item p { margin-top: 30px; font-size: 18px; line-height: 27px; color: var(--white); text-align: left; }

.about-bio { max-width: 1200px; }
.about-bio h4 { font-size: 40px; line-height: 44px; font-weight: 600; color: var(--ink); }
.about-bio h4 span { line-height: 1.1em; }
.about-bio h4 em { color: var(--purple); font-style: italic; }
.about-bio .rule--short { margin: 48px 0 41px; }
.about-bio .about-bio-lede { font-size: 18px; line-height: 27px; font-weight: 700; color: var(--body); }
.about-bio p { margin-top: 18px; font-size: 18px; line-height: 27px; color: var(--body); }

/* ============================================
   BOOK
   ============================================ */

.book-points { margin-top: 113px; padding-left: 30px; }
.book-point {
  display: grid;
  grid-template-columns: 125px 1fr;
  column-gap: 64px;
  padding: 0 0 55px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 60px;
}
.book-point:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.book-point img { width: 125px; height: 125px; }
.book-point h6 { font-size: 24px; line-height: 26.4px; font-weight: 700; color: var(--ink); }
.book-point p { margin-top: 9px; font-size: 18px; line-height: 27px; color: var(--body); }

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, 405px);
  justify-content: space-between;
  row-gap: 0;
  margin-top: 92px;
}
.chapter-card { padding-bottom: 55px; }
.chapter-card img { width: 122px; height: 42px; }
.chapter-card h6 { margin-top: 9px; font-size: 24px; line-height: 26.4px; font-weight: 700; color: var(--ink); }
.chapter-card ul { margin-top: 25px; padding-left: 40px; list-style: disc; }
.chapter-card li { font-size: 18px; line-height: 27px; color: var(--body); margin-bottom: 15px; text-align: left; }
.chapter-row-rule { grid-column: 1 / -1; height: 1px; background: var(--rule); margin-bottom: 55px; }

/* ============================================
   PRIVACY
   ============================================ */

.legal-block { padding-bottom: 36px; }
.legal-block .rule { margin-top: 60px; }

/* ============================================
   CTA BAND
   ============================================ */

.cta-band { background-image: linear-gradient(#121212, #121212); padding: 44px 0 40px; }
.cta-band--solid { background-image: none; background-color: var(--black); padding-bottom: 114px; }
@media (min-width: 993px) { .cta-band .container { padding-left: 30px; padding-right: 30px; } }
.cta-band-title {
  font-size: 48px;
  line-height: 72px;
  font-weight: 600;
  color: var(--white);
}
.cta-band-title em { color: var(--purple); font-style: italic; line-height: 1.5em; }
.cta-band-title span { line-height: 1.5em; }
.cta-band-actions { display: flex; gap: 54px; margin-top: 66px; }

/* ============================================
   FOOTER — one black row
   ============================================ */

.site-footer { background: var(--black); padding: 23px 0 156px; margin-top: -1px; }
.site-footer .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 44px;
}
.footer-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  line-height: 20.7px;
  color: var(--white);
}
.footer-copy .footer-mark { font-size: 18px; line-height: 20.7px; }
.footer-copy a { display: flex; margin-left: 10px; }
.footer-copy img { width: 23px; height: 23px; }
.footer-menu { display: flex; gap: 33px; }
.footer-menu a { font-size: 18px; line-height: 27px; color: var(--white); }
.footer-menu a:hover { color: var(--purple-bright); }

/* ============================================
   UTILITIES
   ============================================ */

.text-center { text-align: center; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 60px; }
.mb-xl { margin-bottom: 60px; }

/* ============================================
   RESPONSIVE — live breaks at 992px
   ============================================ */

@media (max-width: 1200px) {
  .t-slide { flex-basis: 100%; grid-template-columns: 240px 1fr; padding-left: 20px; }
  .model-cols,
  .outcome-grid,
  .outcome-actions,
  .chapter-grid { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .about-split,
  .expertise-grid { grid-template-columns: 1fr 1fr; }
  .about-split-visual img,
  .book-block-visual img { width: 100%; }
  .book-block { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .model-head { grid-template-columns: 1fr auto; }
}

@media (max-width: 992px) {
  .container { padding: 0 20px; }
  .container--inset { padding-left: 50px; padding-right: 50px; }
  .section--stats > .container { padding: 0 var(--gutter-mobile); }

  p, li { font-size: 16px; line-height: 1.5em; }
  h1 { font-size: 40px; }
  h2 { font-size: 33px; }
  h3 { font-size: 27px; }
  h4 { font-size: 23px; }

  .section { padding: 40px 0; }

  /* Nav → hamburger + off-canvas drawer */
  .nav-links, .site-nav > .nav-inner > .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .site-nav .nav-inner { height: 78px; padding: 0 20px 0 15px; }
  .nav-logo { margin-top: 12px; }
  .nav-logo img { width: 100px; }

  /* Heroes */
  .hero--home .hero-split { grid-template-columns: 1fr; padding: 108px 0 0; }
  .hero--home .hero-split-text { padding: 0 20px; }
  .hero--home .hero-split-visual { padding: 55px 20px 100px; }
  .hero--home .hero-split-visual img { width: 350px; max-width: 100%; }
  .hero--about { padding: 200px 0 90px; }
  .about-hero-quote { grid-template-columns: 1fr; row-gap: 24px; padding-top: 70px; padding-left: 47px; }
  .hero--centered { padding: 130px 0 0; }
  .hero--book { padding-bottom: 590px; }
  .hero--privacy { padding: 100px 0 0; }
  .hero--privacy .hero-title-lg { padding-bottom: 117px; }
  .legal-block { padding-bottom: 8px; }
  .legal-block .rule { margin-top: 14px; }
  .section--legal { padding: 12px 0; }

  .hero-title { font-size: 56px; line-height: 71px; }
  .hero--about .hero-title { font-size: 33px; line-height: 36.3px; }
  .about-hero-quote .about-hero-by { font-size: 16px; line-height: 24px; }

  /* Section titles */
  .section-title { font-size: 27px; line-height: 29.7px; }
  .section-title--light { line-height: 33.75px; }
  .section-title--fixed { font-size: 48px; line-height: 52.8px; }
  .about-split .section-title { line-height: 29.7px; }

  /* Stats stack */
  .stats-row { grid-template-columns: 1fr; row-gap: 42px; }
  .stats-row--divided .stat-item:not(:last-child) { padding-right: 0; }
  .stat-divider { display: none; }
  .stat-item p { font-size: 16px; line-height: 24px; }

  /* Slider */
  .t-slider-wrap--inset { padding-left: 60px; padding-right: 60px; }
  .t-slider { padding: 24px 0; border-radius: 12px; }
  .t-slide { grid-template-columns: 1fr; row-gap: 20px; padding: 0 16px; }
  .t-byline { margin-top: 24px; font-size: 16px; line-height: 24px; }
  .t-body { font-size: 16px; line-height: 24px; }

  /* Logos — live runs these as a swipeable single row on small screens */
  .logo-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 100px; }
  .logo-grid img { max-height: none; flex: 0 0 auto; margin: 0; }
  .section--logos { padding: 60px 0 50px; }

  /* Dark home section */
  .dark-title { font-size: 33px; line-height: 36.3px; }
  .dark-lede p { font-size: 16px; line-height: 24px; }
  .outcome-grid, .outcome-actions { grid-template-columns: 1fr; row-gap: 48px; }
  .outcome-actions .btn { grid-column: 1; }
  .outcome-item h5 { font-size: 32px; line-height: 35.2px; }
  .outcome-item p { font-size: 16px; line-height: 24px; }

  /* Book block */
  .book-block { grid-template-columns: 1fr; row-gap: 40px; }
  .book-block-visual img { width: 100%; }

  /* Model */
  .model-head { grid-template-columns: 1fr; row-gap: 30px; }
  .model-head .btn { justify-self: start; }
  .model-cols { grid-template-columns: 1fr; row-gap: 60px; padding: 0 30px; margin-top: 60px; }
  .model-col h3 { font-size: 27px; line-height: 29.7px; }

  /* Q&A */
  .qa-item h5 { font-size: 32px; line-height: 35.2px; }
  .qa-item p { font-size: 16px; line-height: 24px; }

  /* About */
  .about-split { grid-template-columns: 1fr; row-gap: 40px; }
  .expertise-grid { grid-template-columns: 1fr; row-gap: 90px; margin-top: 60px; }
  .about-split-visual img { width: 100%; }
  .awards-row { grid-template-columns: 1fr; row-gap: 48px; }
  .awards-row .award-media { min-height: 0; }
  .awards-row .award-kind { font-size: 16px; line-height: 24px; }
  .expertise-item p { font-size: 16px; line-height: 24px; }
  .about-bio h4 { font-size: 23px; line-height: 25.3px; }
  .expertise-title { font-size: 23px; line-height: 25.3px; }
  .about-bio .about-bio-lede, .about-bio p { font-size: 16px; line-height: 24px; }

  /* Book */
  .book-points { padding-left: 0; }
  .book-point { grid-template-columns: 1fr; row-gap: 8px; padding-bottom: 14px; margin-bottom: 14px; }
  .book-point p { font-size: 16px; line-height: 24px; }
  .chapter-card li { font-size: 16px; line-height: 24px; }
  .chapter-grid { grid-template-columns: 1fr; margin-top: 60px; }
  .chapter-row-rule { display: none; }
  .section--book-divider { height: 300px; }

  /* CTA band + footer */
  .cta-band, .cta-band--solid { padding: 40px 0 60px; }
  .cta-band--centered > .container { padding: 0 80px; }
  .cta-band--centered .cta-band-actions { align-items: stretch; }
  .cta-band--centered .btn { width: 100%; }
  .cta-band-title { font-size: 27px; line-height: 40.5px; }
  .cta-band-actions { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 40px; }
  .site-footer { padding: 40px 0 60px; }
  .site-footer .footer-row { flex-direction: column; align-items: flex-start; gap: 24px; padding-left: 0; }
  .footer-menu { flex-wrap: wrap; gap: 20px; }
}

@media print {
  .site-nav, .nav-mobile, .cta-band { display: none; }
  body { color: #000; background: #fff; }
}

/* Privacy/Terms body (content added 2026-09-03; the live page had headings only) */
.legal-block h6 { font-size: 24px; line-height: 26.4px; margin: 36px 0 10px; }
.legal-block p, .legal-block li { color: var(--body); font-size: 18px; line-height: 27px; }
.legal-block p { margin: 0 0 16px; }
.legal-block ul { padding-left: 22px; margin: 0 0 16px; }
.legal-block li { margin-bottom: 10px; }
.legal-block a { color: var(--purple); text-decoration: underline; }
.legal-block .rule { margin-bottom: 28px; }