/**
 * about.css — About SilkCards page-specific styles (Henry LOCKED v2.0, "Timeline Concept 2")
 * Loaded via $page_css in about-silk-cards.php. That page is this sheet's ONLY consumer
 * (verified: 1 reference repo-wide; inc/page/page-menu.php names it in a COMMENT only).
 *
 * PORTED FROM: docs/henry_updates/to-build/SVC-ED-2026-08/about-page-LOCKED-v2.0.html
 * Both mockup <style> blocks, verbatim, MINUS site chrome. Discarded per the standing
 * C4 rule (henry_common.css owns these and loads FIRST):
 *   :root, *, html, body, a, img, button base rules
 *   .topbar, .nav, .nav-inner, .logo, .nav-links, .menu-toggle   (header-v2.php owns)
 *   footer                                                       (footer-v2.php owns)
 *   .btn, .btn-primary, .btn-dark, .btn-light                    (henry_common.css:247-291)
 * KEPT because henry_common.css does NOT define them (verified 0 matches):
 *   .btn-ghost, .button-row, .reveal
 * DROPPED as dead CSS: .intro-grid / .intro-copy — v1.2 leftovers, 0 consumers in v2.0 markup.
 *
 * ── TOKEN SCOPING (the load-bearing decision in this file) ────────────────────
 * The v2.0 palette is COOLER than the site's global palette and collides on 9 token
 * NAMES with different VALUES (--ink #14181d vs #111111, --line #e4e8eb vs #E7E2D8,
 * --soft #f1f4fa vs #F7F6F2, --body, --muted, --black, --charcoal, --blue-dark, --max).
 * Declaring those in :root here would silently restyle the shared header/footer on THIS
 * page only, so About's chrome would drift from every other page — the exact C4 hazard.
 * So they are declared on the page wrapper .about-v2 instead: custom properties inherit,
 * so the page body gets v2.0's palette and the chrome outside keeps the global one.
 * ($body_class is NOT usable for this — header-v2.php:183 assigns it unconditionally and
 * clobbers anything set before the include.)
 *
 * Bare element selectors (h1/h2/h3/p/strong/b) are scoped under .about-v2 for the same
 * reason, and every one ASSERTS its own font-weight — an unclaimed property is exactly
 * where a shared de-bold sweep silently wins.
 *
 * ── ASSET OWED (mockup preflight point 08) ───────────────────────────────────
 * Two background PNGs ship WITH the design and are NOT in the repo:
 *   SilkCards_About_Us_Hero_Background_v11.png  → .hero
 *   SilkCards_Timeline_Background_v10.png       → .story-wrap
 * Their background-image rules are commented out below — a live 404 is a defect signal,
 * not a placeholder. Both selectors keep the mockup's own background-COLOR, which the
 * design already supplies, so each section renders honestly until the assets land.
 * Uncomment and point at /i/henry/about/ when they do.
 */

/* ============================================================
   TOKENS — page-scoped (see header note)
   ============================================================ */
.about-v2 {
  --blue: #00c2ff;
  --blue-dark: #008fbd;
  --blue-soft: #e9f9fe;
  --gold: #c9a96e;
  --gold-light: #e8c99a;
  --ink: #14181d;
  --black: #070809;
  --charcoal: #17191c;
  --body: #535960;
  --muted: #767d84;
  --line: #e4e8eb;
  --soft: #f1f4fa;
  --cream: #faf7f0;
  --white: #fff;
  --max: 1220px;
  --shadow: 0 24px 70px rgba(10, 14, 18, .09);

  color: var(--ink);
  line-height: 1.6;
}

/* ---- base type, scoped (henry_common.css owns the global versions) ---- */
.about-v2 h1,
.about-v2 h2,
.about-v2 h3 {
  max-width: none;              /* henry_common caps h1 870px / h2 900px */
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;             /* asserted */
  letter-spacing: -.045em;
  line-height: 1.06;
}
.about-v2 h1 { font-size: clamp(44px, 6.8vw, 88px); }
.about-v2 h2 { font-size: clamp(34px, 4.4vw, 62px); }
.about-v2 h3 { font-size: clamp(21px, 2vw, 28px); }
.about-v2 p { margin-top: 0; color: var(--body); }
.about-v2 strong,
.about-v2 b { font-weight: 800; }   /* asserted */

/* ---- layout primitives (mockup values; henry_common's differ) ---- */
.about-v2 .section {
  width: min(var(--max), calc(100% - 48px));
  max-width: none;
  margin: auto;
  padding: 108px 0;
}
.about-v2 .section-sm { padding-top: 78px; padding-bottom: 78px; }
.about-v2 .eyebrow {
  margin-bottom: 15px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about-v2 .lead {
  max-width: 790px;
  margin: 24px 0 0;
  color: #343a40;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}
.about-v2 .center { text-align: center; }
.about-v2 .center h2,
.about-v2 .center .lead { margin-left: auto; margin-right: auto; }

/* ---- buttons: only what henry_common.css lacks ---- */
.btn-ghost {
  color: white;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }

/* ============================================================
   §01 HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  color: white;
  background-color: #050606;
  /* ASSET OWED — SilkCards_About_Us_Hero_Background_v11.png
  background-image: url("/i/henry/about/hero/SilkCards_About_Us_Hero_Background_v11.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; */
}
.hero::after { content: none; }
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 48px));
  min-height: 560px;
  margin: auto;
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero h1 {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  /* STATED DEVIATION from the mockup — desktop hero clip. Mockup value: 82px.
     The hero's longest line ("Premium Print That Represents") is set nowrap inside a
     container capped at --max (1220px), and .hero{overflow:hidden} clips the excess.
     MEASURED on the live render at 1440px: at 82px that line is 1252px in a 1220px box,
     so the largest text on the page loses its final glyphs. It bites at every viewport
     where 5.8vw exceeds the cap (≈1345px and up) — i.e. 1440 and 1920, two of the widths
     the mockup's own preflight point 13 names as QA targets. Verified inherited from the
     mockup, not introduced by this port.
     Empirically the line fits at exactly 79px (1220/1220); 80px overflows by 2px. Capped
     at 78px for cross-machine font-rendering headroom — a 4.9% reduction at the top end
     only, and no change below ~1345px, where the vw term already governs.
     Revert to 82px if the hero copy is re-cut shorter or --max widens. */
  font-size: clamp(48px, 5.8vw, 78px);
  line-height: 1.18;
}
.hero-line { display: block; white-space: nowrap; }

/* ============================================================
   §02 PURPOSE SECTIONS (01 / 02 / 03)
   ============================================================ */
.pullquote {
  margin-top: 34px;
  padding: 25px 0 0 25px;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  color: var(--ink);
  font-size: 20px;
  font-weight: 750;
  line-height: 1.5;
}
.purpose-sections {
  background: #fbfbfa;
  border-bottom: 1px solid var(--line);
}
.purpose-sections .eyebrow,
.purpose-sections .purpose-number { color: var(--blue); }
.purpose-sections .pullquote { border-left-color: var(--blue); }
.purpose-list {
  width: min(var(--max), calc(100% - 48px));
  margin: auto;
  padding: 50px 0 34px;
}
.purpose-item {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  column-gap: clamp(70px, 9vw, 150px);
  padding: 54px 0 76px;
  border-top: 1px solid #dfe3e6;
}
.purpose-number {
  grid-column: 1 / -1;
  margin: 0 0 27px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .18em;
}
.purpose-title .eyebrow { margin-bottom: 17px; }
.purpose-title h2 {
  max-width: 520px;
  font-size: clamp(35px, 4vw, 56px);
  line-height: 1.08;
}
.purpose-copy { padding-top: 4px; }
.purpose-copy > p {
  margin: 0 0 18px;
  color: #363c42;
  font-size: 16px;
  line-height: 1.72;
}
.purpose-copy .pullquote {
  margin-top: 30px;
  padding: 22px 0 0 24px;
  font-size: 19px;
}

/* ============================================================
   §03 STORY TIMELINE
   ============================================================ */
.story-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #263243;
  /* ASSET OWED — SilkCards_Timeline_Background_v10.png (1600x2400)
  background-image: url("/i/henry/about/story/SilkCards_Timeline_Background_v10.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat; */
}
.story-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(24, 30, 40, .20) 0%,
    rgba(24, 30, 40, .30) 48%,
    rgba(24, 30, 40, .22) 100%
  );
}
.story-timeline {
  width: min(100% - 48px, 1320px);
  padding: clamp(78px, 8vw, 120px) 0;
}
.timeline-heading {
  max-width: 720px;
  margin: 0 auto 58px;
  text-align: center;
  position: relative;
  isolation: isolate;
}
.timeline-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -110px -260px;
  background: radial-gradient(
    ellipse at center,
    rgba(244, 247, 249, .78) 0%,
    rgba(244, 247, 249, .62) 28%,
    rgba(244, 247, 249, .38) 48%,
    rgba(244, 247, 249, .16) 65%,
    rgba(244, 247, 249, .05) 78%,
    rgba(244, 247, 249, 0) 92%
  );
  filter: blur(14px);
  pointer-events: none;
}
.timeline-heading .eyebrow {
  color: #283038;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .52);
}
.timeline-heading h2 {
  margin: 0;
  color: #20262c;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
}
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
  row-gap: 18px;
  align-items: center;
}
.timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 82px;
  border-radius: 16px;
  background: rgba(238, 241, 249, .62);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.timeline-item {
  position: relative;
  z-index: 1;
  padding: 18px 24px 20px;
  border: 1.5px solid rgba(20,24,29,.82);
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 10px 30px rgba(18,23,31,.08);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.timeline-item::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 2px;
  background: rgba(20,24,29,.88);
  transform: translateY(-50%);
}
.timeline-item.left { grid-column: 1; margin-right: 42px; }
.timeline-item.left::after { right: -43px; }
.timeline-item.right { grid-column: 3; margin-left: 42px; }
.timeline-item.right::after { left: -43px; }
.timeline-year {
  position: relative;
  z-index: 2;
  grid-column: 2;
  align-self: stretch;
  display: grid;
  place-items: center;
  color: #11151a;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}
.timeline-item h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.timeline-item p { margin: 0; color: #242a33; font-size: 14.5px; line-height: 1.42; }
.timeline-future {
  position: relative;
  z-index: 2;
  width: min(100% - 180px, 930px);
  margin: 48px auto 0;
}
.timeline-future::after { display: none; }
.timeline-future .future-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.timeline-story-note {
  position: absolute;
  z-index: 3;
  max-width: 370px;
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.25vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 3px 10px rgba(0, 0, 0, .68);
  pointer-events: none;
}
.timeline-story-note--beginning {
  top: 34px;
  left: max(28px, calc((100% - 1320px) / 2));
}
.timeline-story-note--today {
  right: max(28px, calc((100% - 1320px) / 2));
  bottom: 34px;
  text-align: right;
}

/* ============================================================
   §04 FOUNDER QUOTE
   ============================================================ */
.founder {
  padding: 92px 24px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #111417, #050606);
}
.founder blockquote {
  max-width: 940px;
  margin: 0 auto 28px;
  font-size: clamp(27px, 4vw, 52px);
  font-weight: 740;
  letter-spacing: -.045em;
  line-height: 1.23;
}
.founder cite {
  color: var(--gold-light);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ============================================================
   §05 PRINCIPLES
   ============================================================ */
.principles {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.principle {
  min-height: 260px;
  padding: 36px;
  border: 1px solid var(--line);
  background: white;
}
.principle:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 80px .7fr 1fr;
  align-items: start;
  gap: 26px;
}
.number { color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.principle h3 { margin: 18px 0 18px; }
.principle p { margin-bottom: 0; }
.principle:last-child h3 { margin: 0; }

/* ============================================================
   §06 MATERIALS + CAPABILITIES
   ============================================================ */
.capability-wrap { background: var(--cream); }
.capability-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.capability {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 38px;
  color: white;
  background: var(--charcoal);
}
.capability::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: -70px;
  right: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,255,.3), transparent 68%);
}
.capability:nth-child(2)::before { background: radial-gradient(circle, rgba(201,169,110,.35), transparent 68%); }
.capability h3 { margin: 90px 0 20px; }
.capability p { color: rgba(255,255,255,.68); }
.capability .tag { color: var(--gold-light); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.capability-note { max-width: 820px; margin: 30px auto 0; text-align: center; }

/* ============================================================
   §07 EXPERT GUIDANCE
   ============================================================ */
.guidance-grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 80px;
  align-items: center;
}
.steps { display: grid; gap: 14px; }
.step {
  padding: 24px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  border: 1px solid var(--line);
  background: white;
}
.step b { color: var(--blue-dark); }
.step strong { display: block; margin-bottom: 6px; }
.step p { margin: 0; font-size: 14px; }

/* ============================================================
   §08 NAME STORY
   ============================================================ */
.name-story {
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--black);
}
.name-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 85px;
}
.name-story h2 { max-width: 600px; }
.name-story p { color: rgba(255,255,255,.68); }
.quote-card {
  padding: clamp(35px, 5vw, 68px);
  border: 1px solid rgba(201,169,110,.34);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 30px 100px rgba(0,0,0,.3);
}
.quote-card blockquote {
  margin: 0 0 26px;
  color: white;
  font-size: clamp(25px, 3.1vw, 42px);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.28;
}
.quote-card p:last-child { margin-bottom: 0; }

/* ============================================================
   §09 TEAM
   ============================================================ */
.team-wrap { background: var(--soft); }
.team-grid { max-width: 900px; }
.stats {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #d8dde1;
  border: 1px solid #d8dde1;
}
.stat { padding: 22px; background: white; }
.stat strong { display: block; font-size: 18px; }
.stat span { color: var(--muted); font-size: 12px; }

/* ============================================================
   §10 CLOSING CTA
   ============================================================ */
.closing {
  padding: 104px 24px;
  color: white;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(0,194,255,.14), transparent 35%),
    var(--black);
}
.closing h2 { max-width: 850px; margin: auto; }
.closing .button-row { justify-content: center; }

/* ============================================================
   REVEAL-ON-SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   FLOATING PAGE MENU (inc/page/page-menu.php)
   Carried forward VERBATIM from the v1.0 sheet — this is the site's established
   mechanism for a page's in-page jump links, and the mockup's own sticky <nav>
   (which carried the same links) is site chrome and is stripped. Anchors repointed
   to v2.0's section ids in about-silk-cards.php.
   ============================================================ */
.page-menu {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
  transform: translateY(-6px);
}
.page-menu.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.page-menu-toggle {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--blue);
  color: var(--obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0,194,255,.32);
  transition: transform .22s ease, box-shadow .22s ease;
  padding: 0;
}
.page-menu-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,194,255,.4);
}
.page-menu-toggle span,
.page-menu-toggle span::before,
.page-menu-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  position: relative;
}
.page-menu-toggle span::before { position: absolute; top: -7px; left: 0; }
.page-menu-toggle span::after  { position: absolute; top:  7px; left: 0; }
.page-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(300px, calc(100vw - 48px));
  background: rgba(10,10,10,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  padding: 12px;
}
.page-menu.is-open .page-menu-panel { display: block; }
.page-menu-panel a {
  display: block;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 800;
  padding: 12px 14px;
  border-radius: 10px;
  letter-spacing: .01em;
  transition: background .18s ease, color .18s ease;
}
.page-menu-panel a:hover {
  background: rgba(255,255,255,.08);
  color: var(--blue);
}
@media (max-width: 640px) {
  .page-menu { top: auto; bottom: 22px; right: 18px; }
  .page-menu-panel { top: auto; bottom: calc(100% + 12px); }
}

/* ============================================================
   RESPONSIVE — mockup breakpoints, chrome rules removed
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {
  .name-grid, .guidance-grid { grid-template-columns: 1fr; }
  .purpose-item {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .purpose-copy {
    max-width: 720px;
    padding-top: 32px;
  }
  .hero-inner { min-height: auto; }
  .capability-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 66px minmax(0, 1fr); row-gap: 16px; }
  .timeline::before { left: 33px; width: 66px; transform: none; }
  .timeline-year {
    grid-column: 1;
    grid-row: auto !important;
    font-size: 17px;
  }
  .timeline-item.left, .timeline-item.right {
    grid-column: 2;
    grid-row: auto !important;
    margin: 0 0 0 28px;
  }
  .timeline-item.left::after, .timeline-item.right::after {
    right: auto;
    left: -29px;
    width: 28px;
  }
  .timeline-future { width: 100%; margin-top: 28px; }
}

@media (max-width: 760px) {
  .story-wrap { background-size: cover; }
  .timeline-story-note {
    position: relative;
    inset: auto;
    width: min(100% - 32px, 560px);
    max-width: none;
    margin-inline: auto;
    font-size: clamp(19px, 6.2vw, 25px);
  }
  .timeline-heading::before {
    inset: -76px -68px;
    background: radial-gradient(
      ellipse at center,
      rgba(244, 247, 249, .82) 0%,
      rgba(244, 247, 249, .62) 32%,
      rgba(244, 247, 249, .34) 53%,
      rgba(244, 247, 249, .12) 70%,
      rgba(244, 247, 249, 0) 92%
    );
    filter: blur(11px);
  }
  .timeline-heading h2 {
    font-size: clamp(31px, 9vw, 45px);
    line-height: 1.1;
  }
  .timeline-story-note--beginning { padding-top: 34px; }
  .timeline-story-note--today {
    padding-bottom: 34px;
    text-align: right;
  }
  .story-timeline {
    padding-top: 46px;
    padding-bottom: 46px;
  }
}

@media (max-width: 680px) {
  .purpose-list {
    width: min(100% - 34px, var(--max));
    padding-top: 26px;
  }
  .purpose-item { padding: 40px 0 54px; }
  .purpose-number { margin-bottom: 21px; }
  .purpose-title h2 { font-size: clamp(32px, 10vw, 44px); }
  .purpose-copy { padding-top: 25px; }
  .purpose-copy > p { font-size: 15px; }
  .purpose-copy .pullquote { font-size: 17px; }
  .about-v2 .section { width: min(100% - 34px, var(--max)); padding: 76px 0; }
  .hero-inner {
    width: min(100% - 34px, var(--max));
    min-height: 380px;
    padding: 74px 0;
  }
  .hero h1 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.2;
  }
  /* STATED DEVIATION from the mockup — mobile hero clip.
     The mockup pairs .hero-line{white-space:nowrap} with .hero{overflow:hidden}. At 390px
     (a width its own preflight point 13 names as a QA target) the headline is WIDER than
     its container and is silently CLIPPED: measured 417px of text in a 356px box, so the
     line reads "Premium Print That Represen…". Verified as inherited from the mockup, not
     introduced by this port.
     The nowrap exists to pin WHERE the two desktop lines break; at mobile it serves no
     layout purpose and only causes the clip. Releasing it below 680px keeps the intended
     two-part headline (both spans stay block-level) and lets each wrap instead of cutting off.
     Revert this one rule if Henry re-cuts the mobile hero copy. */
  .hero-line { white-space: normal; }
  .principles { grid-template-columns: 1fr; }
  .principle:last-child { grid-column: auto; display: block; }
  .principle:last-child h3 { margin: 18px 0; }
  .stats { grid-template-columns: 1fr; }
  .story-timeline { width: min(100% - 24px, var(--max)); padding: 68px 0; }
  .timeline-heading { margin-bottom: 38px; }
  .timeline { grid-template-columns: 54px minmax(0, 1fr); }
  .timeline::before { left: 27px; width: 54px; border-radius: 12px; }
  .timeline-year { font-size: 14px; }
  .timeline-item.left, .timeline-item.right { margin-left: 18px; padding: 17px 18px 18px; }
  .timeline-item.left::after, .timeline-item.right::after { left: -19px; width: 18px; }
  .timeline-item h3 { font-size: 18px; }
  .timeline-item p { font-size: 14px; }
}