/* Paper Clip Coach — public website, direction 1B "Evergreen".
   Rebuilt from the design handoff in Google Drive
   (Paper Clip Coach/Public Website/Designs/design_handoff_paper_clip_coach_site).
   Tokens follow the handoff README exactly; the CRM is styled separately. */

:root {
  --ink: #1F2120;
  --evergreen: #2F4638;
  --sage: #8A988D;
  --paper: #F4F1EE;
  --stone: #A59E8E;
  --ochre: #C48A3C;
  /* Gold-filled buttons (owner 2026-10-15, PROPOSED on Staging): white text
     everywhere. White on --ochre is only 2.98:1, so the fill is the same hue
     darkened to pass WCAG AA for normal-size text: 4.70:1 at rest, 5.61:1 on
     hover/focus, 6.48:1 when pressed. --ochre itself (rules, bullets,
     kickers, the active-menu underline) is unchanged. */
  --btn-gold: #9A6A2A;
  --btn-gold-hover: #8A5F25;
  --btn-gold-active: #7E5622;
  --btn-gold-text: #FFFFFF;
  --white: #FFFFFF;

  --sage-tint: #E4E7E2;
  --sage-shade: #4A4E4A;
  --sage-deep: #262A27;
  --evergreen-mist: #CBD3CD;
  --evergreen-ring: rgba(47, 70, 56, 0.18);
  --stone-tint: #EAE6E0;
  --rule: #D8D3CB;
  --field-border: #BDB6AA;
  --ink-soft: #4A4741;
  --ink-mute: #5C584F;
  --error: #9A4A1E;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;

  /* Content column: max-w-6xl (1152px), centred. The gutter sits inside
     it: 20px on phones, 32px from the sm breakpoint (640px) up, so desktop
     content is 1088px wide. Bands stay full-bleed; --side pads their
     content into the column. */
  --content-max: 1152px;
  --gutter: 20px;
  --side: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  --section-y: 112px;
  --radius-btn: 8px;
  --radius-card: 10px;
  --shadow-card: 0 1px 2px rgba(31, 33, 32, 0.06), 0 14px 36px rgba(31, 33, 32, 0.09);
  --shadow-big: 0 24px 60px rgba(31, 33, 32, 0.25);
  --shadow-panel: 0 24px 60px rgba(31, 33, 32, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
a { color: var(--evergreen); }
:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 2px; }
.on-evergreen :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-btn);
  background: var(--btn-gold); color: var(--btn-gold-text); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- bands ---------- */
.on-evergreen { background: var(--evergreen); color: var(--paper); }
.band-stone { background: var(--stone-tint); }
.section { padding: var(--section-y) var(--side); }
.section--tight-top { padding-top: 0; }

/* ---------- type ---------- */
.kicker { font-size: 15px; font-weight: 600; color: var(--evergreen); }
.on-evergreen .kicker { color: var(--evergreen-mist); }
.kicker--accent { font-size: 16px; color: var(--ochre) !important; }
.display {
  font-size: 92px; line-height: 1; letter-spacing: -0.03em; text-wrap: balance;
}
.page-h1 { font-size: 80px; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.015em; }
.h2--lg { font-size: 46px; line-height: 1.08; }
.h2--xl { font-size: 52px; line-height: 1.06; letter-spacing: -0.02em; }
.h2--cta { font-size: 42px; line-height: 1.1; max-width: 22ch; }
.lead { font-size: 20px; line-height: 1.55; color: var(--evergreen-mist); }
.body { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.45; }
.caption { font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn); font: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.btn--primary { padding: 17px 26px; border: 0; }
/* One rule for every gold-filled button: white text in every state, on links
   and form buttons alike. `.btn.btn--primary` outranks `.site-nav a
   { color: inherit }`, which used to give the desktop header button the
   header's off-white while every other gold button had dark text. Disabled
   buttons keep their own grey style (the rule below is later and equally
   specific, and the state rules skip disabled buttons). */
.btn.btn--primary, .btn.btn--primary:link, .btn.btn--primary:visited {
  background: var(--btn-gold); color: var(--btn-gold-text);
}
.btn.btn--primary:not([disabled]):not([aria-disabled="true"]):hover,
.btn.btn--primary:not([disabled]):not([aria-disabled="true"]):focus-visible {
  background: var(--btn-gold-hover); color: var(--btn-gold-text);
}
.btn.btn--primary:not([disabled]):not([aria-disabled="true"]):active {
  background: var(--btn-gold-active); color: var(--btn-gold-text);
}
.btn--ghost-light { padding: 15px 24px; border: 2px solid currentColor; background: transparent; color: inherit; }
.btn--ghost-light:hover { opacity: 0.75; }
.btn--ghost-dark { padding: 14px 22px; font-size: 15px; border: 2px solid var(--evergreen); color: var(--evergreen); background: transparent; }
.btn--ghost-dark:hover { background: rgba(47, 70, 56, 0.08); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--rule); color: #8A857B; cursor: default; opacity: 1; }
.text-link { color: var(--evergreen); font-size: 16px; font-weight: 600; text-underline-offset: 4px; }

/* ---------- header ---------- */
.header-band { position: sticky; top: 0; z-index: 90; }
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--side); position: relative;
}
.brand { display: flex; align-items: center; color: inherit; text-decoration: none; flex: none; }
/* Official logo (owner 2026-10-07): Travis's "Paper-Clip-Coach_Logo_White.png"
   (905×400, unaltered). Its transparent margin (60px top/bottom, 70px left
   of 905) is pulled in with negative margins so the clip lines up with the
   page edge and the header has no extra empty band. --logo-w sets the
   rendered width; the height follows the file's proportions. */
.brand-logo {
  --logo-w: 176px;
  display: block; width: var(--logo-w); height: auto; max-width: none;
  margin: calc(var(--logo-w) * -0.0663) 0 calc(var(--logo-w) * -0.0663) calc(var(--logo-w) * -0.0773);
}
.site-footer .brand-logo { --logo-w: 220px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.site-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.site-nav .nav-link { position: relative; padding: 6px 0; }
.site-nav .nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ochre);
}
.site-nav .nav-login { color: var(--evergreen-mist); }
.site-nav .btn--primary { padding: 12px 18px; font-size: 14px; }
.menu-toggle {
  display: none; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border: 2px solid currentColor; border-radius: var(--radius-btn);
  background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
/* Menu button (owner 2026-10-16): a hamburger icon beside the visible word,
   an X beside "Close" while open; at least 44 x 44px to tap. */
.menu-toggle { min-height: 44px; min-width: 44px; }
.menu-icon { position: relative; display: inline-block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform 150ms ease, top 150ms ease;
}
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.mobile-actions { display: none; align-items: center; gap: 10px; }
/* "Take Value Index" (owner 2026-10-13): the outlined light button, the
   same height as the booking button beside it. Wide screens: last in the
   menu bar. Tablets: in the bar next to "Book a call". Phones (under
   640px): inside the menu, where the bar has no room for it. */
.site-nav .nav-assess { padding: 10px 16px; font-size: 14px; }
.mobile-actions .nav-assess--bar { display: none; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 80px; padding: 72px var(--side) 96px; align-items: start; }
.hero--home { grid-template-columns: minmax(0, 1fr) 440px; }
.hero--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hero--text { display: flex; flex-direction: column; gap: 28px; padding: 80px var(--side) 104px; }
.hero__copy { display: flex; flex-direction: column; gap: 32px; }
.hero--split .hero__copy { gap: 28px; }
.hero__copy .lead { max-width: 40ch; }
.hero--text .lead { font-size: 21px; max-width: 46ch; }
/* Side-by-side text and image (owner 2026-10-14): the top of the image lines
   up with the top of the first line of text (the kicker or heading) — no
   vertical centring, bottom alignment or top padding on either column.
   Home hero, About hero, Value Index intro, Resources intro, and the Home
   "Why a paper clip?" tile. Each image keeps its own proportions, uncropped; the three hero
   images have about the same area (440 × 440, about 423 × 459 and
   520 × 390). On narrower screens they stack, text first. */
.hero--home, .hero--split, .hero--assess, .hero--resources, .story-tile--with-figure { align-items: start; }
/* …and the image meets the top of the first line's capital letters, not the
   empty space a font leaves above them (text-box; browsers without it keep
   that few-pixel space, nothing else changes). */
.hero--home .hero__copy > :first-child, .hero--split .hero__copy > :first-child,
.assess-hero__copy > :first-child, .resources-hero__copy > :first-child, .story-tile--with-figure .story-tile__text > :first-child {
  text-box: trim-start cap alphabetic;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero__figure { display: flex; flex-direction: column; gap: 14px; }

/* photo placeholders (real photos to come) */
.photo-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: var(--radius-card); background: #3C5446; color: var(--evergreen-mist);
  font-size: 15px; font-weight: 500;
  background-image: repeating-linear-gradient(135deg, rgba(244,241,238,0.05) 0 14px, transparent 14px 28px);
}
.photo-slot--portrait { width: 440px; height: 560px; box-shadow: var(--shadow-big); }
.photo-slot--wide { width: 100%; height: 460px; }

/* real photos */
.photo-img { object-fit: cover; border-radius: var(--radius-card); }
/* Portrait (owner 2026-10-07): Home and About show the same photo with the
   same composition. One frame shape (12:13) at every width, max 440px; the
   image is scaled to the frame width (never stretched) and raised by 35.4%
   of that width, which leaves 8.4% of the frame height above the hair: half
   the About desktop crop of 2026-10-06 (16.7%). The hair top is at 29.65%
   of the photo's height and the whole head stays inside the frame. */
.portrait-frame {
  container-type: inline-size; width: 100%; max-width: 440px; aspect-ratio: 12 / 13;
  overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-big);
}
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% calc(-35.4cqw); }
/* Homepage hero illustration (owner 2026-10-14, HERO-ILLUS-01): the whole
   square illustration, never cropped — the frame has the image's own 1:1
   proportions, so every business scene stays in view at every width. The
   portrait above stays on About and the thank-you pages. */
.illustration-frame {
  width: 100%; max-width: 440px; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-big); background: #F6F0E4;
}
.illustration-frame img { display: block; width: 100%; height: auto; }

/* ---------- tiles and cards ---------- */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }

.story-tile {
  display: flex; flex-direction: column; gap: 20px; padding: 56px;
  background: var(--sage-tint); border-radius: var(--radius-card);
}
.story-tile p:not(.kicker) { font-size: 17px; line-height: 1.65; color: var(--sage-shade); }
/* Section illustrations (owner 2026-10-14, ILLUS-01): Home "What we work
   toward." and "Why a paper clip?", How Bloom Works "Who participates, and
   who it fits.". A square frame for the square images, with the same rounded
   corners and shadow as the homepage hero illustration, so each image always
   shows whole.
   - .section-figure--side sits under a section heading: at most 420px wide
     and set below the heading on desktop; on narrower screens the full
     column width, straight after the heading.
   - .story-tile--with-figure: text left, image right on desktop; the image
     below the text on narrower screens. */
.section-figure {
  margin: 0; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: var(--radius-card); box-shadow: var(--shadow-big); background: #F6F0E4;
}
.section-figure img { display: block; width: 100%; height: auto; }
.section-figure--side { max-width: 420px; margin-top: 36px; }
/* A 3:2 frame for a 3:2 landscape illustration (How Bloom Works "How your
   leaders work together.", owner 2026-10-14), so it also shows whole. */
.section-figure--3x2 { aspect-ratio: 3 / 2; }
.story-tile--with-figure { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
.story-tile__text { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1199px) {
  .story-tile--with-figure { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .story-tile--with-figure .section-figure { max-width: 420px; }
  .section-figure--side { margin-top: 0; }
}
.testimonial-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 56px 48px; background: var(--sage); color: var(--ink); border-radius: var(--radius-card);
}
.testimonial-tile figcaption { font-size: 15px; color: var(--sage-deep); }

.card {
  background: var(--white); color: var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.card-muted { color: var(--ink-mute); }

.stack { display: flex; flex-direction: column; gap: 40px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.audience-card { display: flex; gap: 24px; align-items: flex-start; padding: 32px; }
.audience-card svg { width: 48px; height: 48px; flex: none; color: var(--evergreen); }
.audience-card h3 { font-size: 26px; line-height: 1.25; }
.audience-card p { font-size: 16px; line-height: 1.55; color: var(--ink-mute); margin-top: 8px; }

.rally { display: flex; flex-direction: column; gap: 40px; padding: 96px var(--side); }
.rally__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.rally__item { display: flex; flex-direction: column; gap: 16px; }
.rally__item span:first-child { font-size: 14px; font-weight: 600; color: var(--ochre); }
.rally__item span:last-child { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; }

.bloom-intro { display: flex; flex-direction: column; gap: 20px; padding-right: 24px; }
.element-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.element-tile {
  display: flex; gap: 20px; align-items: baseline; padding: 24px 28px;
  background: var(--sage-tint); border-radius: var(--radius-card);
}
.element-tile .num { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--evergreen); min-width: 40px; }
.element-tile h3 { font-size: 21px; }
.element-tile p { font-size: 15px; line-height: 1.5; color: var(--sage-shade); margin-top: 6px; }

.element-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.element-card .num { font-size: 14px; font-weight: 600; color: var(--evergreen); }
.element-card h3 { font-size: 24px; }
.element-card p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); }

.step-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.step-card .dot {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--evergreen); color: var(--paper); font-weight: 600;
}
.step-card h3, .reason-card h3 { font-size: 28px; line-height: 1.2; }
.step-card p, .reason-card p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); }
.reason-card { display: flex; flex-direction: column; gap: 14px; padding: 36px; }

.testimonial-card { display: flex; flex-direction: column; gap: 24px; padding: 40px; }
.testimonial-card figcaption { font-size: 15px; color: var(--ink-mute); }

.rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.rhythm > div { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--ochre); }
.rhythm h3 { font-size: 28px; }
.rhythm p { font-size: 17px; line-height: 1.6; color: var(--evergreen-mist); }

.split { display: grid; gap: 64px; }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.split__text { display: flex; flex-direction: column; gap: 20px; }

.login-card { display: flex; flex-direction: column; gap: 16px; padding: 36px; }
.login-card h3 { font-size: 26px; }
.login-card p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); }
.login-card .btn { align-self: flex-start; }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 88px var(--side); }

.steps { list-style: none; margin: 0; padding: 0; }
.quote-band { gap: 20px; max-width: 46ch; }
.quote-band .caption { color: var(--evergreen-mist); }
.hero--contact { display: block; }

/* placeholder marker: visible on Staging until real content arrives */
.placeholder {
  padding: 20px 24px; border: 1.5px dashed var(--stone); border-radius: 6px;
  font-size: 15px; line-height: 1.55; color: var(--ink-mute);
}
.on-evergreen .placeholder { border-color: var(--evergreen-mist); color: var(--evergreen-mist); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.contact__intro { display: flex; flex-direction: column; gap: 24px; }
.contact__intro p { font-size: 19px; line-height: 1.65; color: var(--evergreen-mist); }
.contact__intro--paper p { color: var(--ink-soft); }
.panel {
  background: var(--white); color: var(--ink); border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel); padding: 40px;
}
.tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 28px; border-radius: 999px; background: var(--paper); width: max-content; max-width: 100%; }
.tab {
  padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-mute);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--evergreen); color: var(--paper); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.field--full { grid-column: 1 / -1; }
.field .optional { font-weight: 400; color: var(--ink-mute); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: var(--radius-btn); outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { border-color: var(--evergreen); box-shadow: 0 0 0 3px var(--evergreen-ring); }
.field.has-error input, .field.has-error textarea { border-color: var(--error); }
.field-error { font-size: 13px; font-weight: 400; color: var(--error); }
.form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.form-status { font-size: 15px; color: var(--error); }
.hp { display: none; }
.form-thanks h3 { font-size: 28px; margin-bottom: 10px; }
.form-thanks p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.booking { display: flex; flex-direction: column; gap: 16px; }
.booking h3 { font-size: 28px; }
.booking p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); }
.booking-embed { min-height: 120px; }
.tab-panel[hidden], .form-thanks[hidden], .form-status[hidden], .intro-form[hidden] { display: none; }
.form-thanks:focus { outline: none; }

/* ---------- footer ---------- */
.site-footer {
  display: flex; flex-direction: column; gap: 56px; padding: 72px var(--side) 40px;
  background: var(--ink); color: var(--paper);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-brand p { font-family: var(--serif); font-size: 24px; line-height: 1.3; max-width: 20ch; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer-col .label { font-size: 13px; font-weight: 600; color: var(--stone); }
.footer-col a { color: inherit; text-decoration: none; }
.footer-col a:hover, .footer-col a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: var(--paper); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--stone); }

/* ---------- responsive (handoff rules) ---------- */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (max-width: 1199px) {
  :root { --section-y: 96px; }
  .display { font-size: 72px; }
  .page-h1 { font-size: 64px; }
  .site-nav { gap: 18px; }
  .hero--home, .hero--split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .photo-slot--portrait { width: 100%; max-width: 440px; }
  .grid-12 > [class*="span-"] { grid-column: 1 / -1; }
  .split--4-8, .split--5-7, .split--7-5, .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .grid-3, .grid-4, .rhythm, .rally__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .mobile-actions { display: flex; }
  .menu-toggle { display: inline-flex; }
  .site-nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: var(--side); right: var(--side); z-index: 20;
    padding: 16px 20px; background: var(--evergreen); border: 1px solid rgba(203, 211, 205, 0.3);
    border-radius: var(--radius-card); box-shadow: var(--shadow-panel);
  }
  .site-nav.is-open .nav-link, .site-nav.is-open .nav-login { padding: 10px 0; font-size: 17px; }
  .site-nav.is-open .btn--primary { display: none; }
  .site-nav.is-open .nav-assess { display: none; }
  .mobile-actions .nav-assess--bar { display: inline-flex; }
}
/* 1024–1199px with "Take Value Index" in the menu (owner 2026-10-14): the
   full desktop menu no longer fits (the page scrolled sideways at 1024px),
   so these widths use the tablet header above — "Take Value Index", "Book a
   call" and Menu in the bar. Pages without the button keep the desktop menu
   from 1024px. Browsers without :has() keep the previous layout. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header:has(.nav-assess) .site-nav { display: none; }
  .site-header:has(.nav-assess) .mobile-actions { display: flex; }
  .site-header:has(.nav-assess) .menu-toggle { display: inline-flex; }
  .site-header:has(.nav-assess) .site-nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: var(--side); right: var(--side); z-index: 20;
    padding: 16px 20px; background: var(--evergreen); border: 1px solid rgba(203, 211, 205, 0.3);
    border-radius: var(--radius-card); box-shadow: var(--shadow-panel);
  }
  .site-header:has(.nav-assess) .site-nav.is-open .nav-link,
  .site-header:has(.nav-assess) .site-nav.is-open .nav-login { padding: 10px 0; font-size: 17px; }
  .site-header:has(.nav-assess) .site-nav.is-open .btn--primary,
  .site-header:has(.nav-assess) .site-nav.is-open .nav-assess { display: none; }
  .site-header:has(.nav-assess) .mobile-actions .nav-assess--bar { display: inline-flex; }
}
/* "Why me?" in the menu (owner 2026-10-16, Staging). With Client login in
   the footer (header option B, Travis 2026-10-16) the full desktop menu fits
   the 1088px header row from 1200px, Take Value Index included, so only
   1024–1199px use the compact bar and Menu (as tablets do). */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header:has(a[href="/why-me"]) .site-nav { display: none; }
  .site-header:has(a[href="/why-me"]) .mobile-actions { display: flex; }
  .site-header:has(a[href="/why-me"]) .menu-toggle { display: inline-flex; }
  .site-header:has(a[href="/why-me"]) .site-nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: var(--side); right: var(--side); z-index: 20;
    padding: 16px 20px; background: var(--evergreen); border: 1px solid rgba(203, 211, 205, 0.3);
    border-radius: var(--radius-card); box-shadow: var(--shadow-panel);
  }
  .site-header:has(a[href="/why-me"]) .site-nav.is-open .nav-link,
  .site-header:has(a[href="/why-me"]) .site-nav.is-open .nav-login { padding: 10px 0; font-size: 17px; }
  .site-header:has(a[href="/why-me"]) .site-nav.is-open .btn--primary,
  .site-header:has(a[href="/why-me"]) .site-nav.is-open .nav-assess { display: none; }
  .site-header:has(a[href="/why-me"]) .mobile-actions .nav-assess--bar { display: inline-flex; }
}
@media (max-width: 639px) {
  .mobile-actions .nav-assess--bar { display: none; }
  .site-nav.is-open .nav-assess { display: inline-flex; margin: 8px 0 4px; padding: 12px 18px; font-size: 16px; }
}
@media (max-width: 767px) {
  :root { --section-y: 72px; }
  .display, .page-h1 { font-size: 48px; line-height: 1.05; }
  .h2, .h2--lg, .h2--xl, .h2--cta { font-size: 34px; line-height: 1.12; }
  .rally__item span:last-child { font-size: 34px; }
  .hero, .hero--text { padding-top: 40px; padding-bottom: 64px; }
  .photo-slot--portrait { height: 420px; }
  .photo-slot--wide { height: 320px; }
  .site-header .brand-logo { --logo-w: 144px; }
  .mobile-actions .btn--primary { padding: 10px 12px; font-size: 13px; }
  .mobile-actions .nav-assess--bar { padding: 8px 10px; font-size: 13px; }
  .menu-toggle { padding: 8px 10px; font-size: 14px; }
  .grid-2, .grid-3, .grid-4, .element-tiles, .rhythm, .rally__grid, .form-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .story-tile { padding: 32px 24px; }
  .testimonial-tile { padding: 32px 24px; }
  .audience-card, .step-card, .reason-card, .testimonial-card, .login-card, .element-card { padding: 24px; }
  .panel { padding: 24px 20px; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 10px 4px; font-size: 14px; white-space: nowrap; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 64px var(--side); }
  .footer-bottom { flex-direction: column; }
  .actions .btn { width: 100%; }
}
@media (max-width: 400px) {
  /* the smallest phones: the logo shrinks and the gaps close up so it,
     "Book a call" and Menu fit on one line */
  .site-header { gap: 10px; }
  .site-header .brand-logo { --logo-w: 116px; }
  .mobile-actions { gap: 6px; }
  .menu-toggle { gap: 6px; }
}
/* Below 360px the logo, "Book a call" and the Menu button (icon + word,
   owner 2026-10-16) no longer fit on one line at their normal sizes, so the
   two buttons move to a second line, right-aligned, instead of overflowing. */
@media (max-width: 359px) {
  .site-header { flex-wrap: wrap; row-gap: 10px; }
  .site-header .mobile-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Calendly inline scheduler inside "Pick a time" (loaded on demand).
   Calendly's script inserts <iframe width="100%" height="100%">, and its own
   widget.css (not loaded here) gives the container a FIXED height. A
   min-height is not enough: 100% of an auto-height box falls back to the
   browser's 150px iframe default, which showed only "Select a Day", the
   month and the arrows. So the container gets a real height (site.js then
   fits it to Calendly's reported page height), and the iframe fills it. */
.booking-embed.is-live { height: 700px; min-height: 0; margin: 0 -8px; }
.booking-embed.is-live iframe {
  display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-btn);
}
@media (max-width: 767px) { .booking-embed.is-live { height: 780px; margin: 0 -12px; } }

/* ---------- content update (owner 2026-10-06) ---------- */

/* Staging-only draft blocks: future content Travis will add. They live in
   <!-- staging-only --> markers and are removed from production builds
   (scripts/public-site.mjs), so these styles only ever show on Staging. */
.draft-block {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 24px;
  border: 2px dashed var(--ochre); border-radius: var(--radius-card);
  background: #FBF4E8; color: var(--ink); font-size: 15px; line-height: 1.55;
}
.draft-block .draft-label { font-weight: 600; color: #7A4F12; }
.draft-block p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.draft-block a { color: var(--evergreen); }
.draft-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--ochre); color: var(--ink); font-size: 11px; font-weight: 600;
  font-style: normal; letter-spacing: 0.02em; vertical-align: middle;
}

.section-intro { max-width: 62ch; }
.split__text h3 { font-size: 24px; line-height: 1.25; margin-top: 8px; }
.prose { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; }
.prose p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.prose h3 { font-size: 24px; line-height: 1.25; margin-top: 12px; }


/* outcome + engagement detail cards */
.detail-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.detail-card h3 { font-size: 22px; line-height: 1.25; }
.detail-card p { font-size: 16px; line-height: 1.6; color: var(--ink-mute); }

/* Home: the eight Essentials, each name with its one-line definition
   (owner 2026-10-12; full detail on How Bloom Works). The name keeps the
   tile's serif heading style; the definition sits directly below it. Tiles
   in a row share one height, so the grid stays even. */
.essentials-names {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.essentials-names li {
  display: flex; gap: 16px; align-items: baseline; padding: 16px 22px;
  background: var(--sage-tint); border-radius: var(--radius-card);
  font-family: var(--serif); font-weight: 600; font-size: 20px;
}
.essentials-names .num { color: var(--evergreen); min-width: 28px; font-size: 18px; }
.essentials-names .essential { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.essentials-names .essential__name { line-height: 1.25; }
.essentials-names .essential__def {
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.5;
  color: var(--ink-soft); overflow-wrap: anywhere;
}

/* FAQ: native <details>, keyboard-operable, open/closed state shown */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.faq details { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-tint); color: var(--evergreen); font-family: var(--sans); font-size: 20px;
}
.faq details[open] summary::after { content: "−"; }
.faq .faq__answer { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.faq .faq__answer p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

.contact__intro .contact__meta { font-size: 15px; line-height: 1.6; }
.contact__intro a { color: var(--paper); }
.booking-fallback { font-size: 15px; color: var(--ink-mute); }


@media (max-width: 1199px) {
  .essentials-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .essentials-names { grid-template-columns: minmax(0, 1fr); }
  .essentials-names li { padding: 14px 18px; gap: 12px; }
  .essentials-names .num { min-width: 24px; }
  .faq summary { font-size: 18px; padding: 18px 20px; }
  .faq .faq__answer { padding: 0 20px 20px; }
  .detail-card { padding: 24px; }
}

/* Draft privacy page (Staging only until approved, owner 2026-10-06).
   .draft-decision marks unresolved wording; a production build fails if
   any survive (scripts/public-site.mjs). */
.section--tight-bottom { padding-bottom: 0; }
.draft-block--banner { border-style: solid; }
.draft-block--banner .draft-label { font-size: 17px; }
.draft-decision {
  display: inline; padding: 2px 6px; border-radius: 4px;
  background: #F6DDB0; box-shadow: inset 0 -2px 0 var(--ochre);
  color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.draft-decision strong { color: #7A4F12; }
.draft-block .draft-decision { font-size: inherit; }
.draft-block--review { margin-top: 8px; }
.draft-block--review h3 { font-size: 18px; line-height: 1.3; margin-top: 8px; }
.draft-block--review ul, .draft-block--review ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); }
.form-privacy { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.form-privacy a { color: var(--evergreen); text-underline-offset: 3px; }
.footer-bottom a { color: inherit; text-underline-offset: 3px; }
.draft-verify {
  display: inline; padding: 2px 6px; border-radius: 4px;
  background: #DCE7F3; box-shadow: inset 0 -2px 0 #4A6F96;
  color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.draft-verify strong { color: #24476B; }
.draft-block--review li em { color: var(--ink-mute); }

/* Bloom Growth logo: Bloom's official RGB "main logo" PNGs (Bloom_Growth_Logos.zip,
   supplied by Travis 2026-10-06), unaltered. Guide rules (Bloom Growth brand
   guidelines 2026, pp. 5-8): keep the aspect ratio, never recolor, no effects,
   clear space at least the height of the "o" (the files' own transparent
   padding provides it); white (reversed) on dark backgrounds, full color on
   light ones. */
.bloom-logo { display: block; height: auto; max-width: 100%; }
/* Left alignment (owner 2026-10-07): the artwork starts 138px into the
   2363px-wide file (5.84%). Shifting the image left by that share of its
   own rendered width lines the visible logo up with the text above. Only
   the transparent margin moves out to the left, into empty page gutter;
   nothing sits inside Bloom's clear space and the proportions don't change. */
.bloom-logo--hero, .bloom-logo--footer { width: var(--bloom-w); margin-left: calc(var(--bloom-w) * -0.0584); }
/* How Bloom Works introduction (owner 2026-10-06): twice the earlier 210px,
   directly after the introductory paragraph. The PNG carries Bloom's own
   clear space as transparent padding (about 21% top and bottom), so the
   CSS gap is pulled in to 4px: the logo sits close to the paragraph while
   the official clear space stays intact. Scales down on small screens. */
.bloom-logo--hero { --bloom-w: clamp(220px, 62vw, 420px); margin-top: -24px; }
.footer-legal { display: flex; align-items: center; gap: 16px; }
/* Footer (owner 2026-10-07): the official white (reversed) logo, once, under
   the tagline, directly on the dark footer: no panel behind it. The PNG's
   own transparent padding provides the clear space. */
.bloom-logo--footer { --bloom-w: min(240px, 100%); max-width: none; }
@media (max-width: 767px) { .footer-legal { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- 2026-10-06 content round ---------- */
/* Home: six situations (owner 2026-10-07), two rows of three; two columns
   on tablets, one on phones */
.grid-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1199px) { .grid-situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid-situations { grid-template-columns: minmax(0, 1fr); } }

/* Home: approved compact outcomes list. The credential line (.lead--credential)
   uses the same .lead type as the paragraph above it (owner 2026-10-07). */
.outcome-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.outcome-list li { padding-left: 22px; position: relative; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.outcome-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); }
.outcome-list strong { color: var(--ink); font-weight: 600; }
.cta-band__copy { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.cta-band__copy p { font-size: 18px; line-height: 1.55; }
.cta-band .actions { flex-wrap: wrap; }

/* How Bloom Works: the engagement summary and roles */
.engagement-summary { display: flex; flex-direction: column; gap: 10px; max-width: 60ch; padding-left: 24px; border-left: 3px solid var(--ochre); }
.engagement-summary p { font-size: 18px; line-height: 1.6; }
.engagement-summary .engagement-summary__main { font-family: var(--serif); font-size: 28px; line-height: 1.3; }
.lead--roles { max-width: 60ch; color: var(--ink-soft); }

/* About: operating-example prompts (Staging draft) */
.draft-prompts { margin: 4px 0 0 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ink-soft); }

/* Contact: "Send me a book" */
.book-offer { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 32px; }
.book-cover { width: 180px; height: auto; flex: none; border-radius: 4px; }
.book-offer h3 { font-size: 28px; line-height: 1.2; margin-bottom: 10px; }
.book-offer p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.form-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-section > legend { padding: 0; margin-bottom: 16px; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.field select {
  width: 100%; min-height: 53px; padding: 12px 15px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: var(--radius-btn); outline: none;
}
.field select:focus { border-color: var(--evergreen); box-shadow: 0 0 0 3px var(--evergreen-ring); }
.field.has-error select { border-color: var(--error); }
.field[hidden] { display: none; }
.choice-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-row legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.choice-row .choice { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 16px; padding: 4px 0; }
.choice-row .choice input { width: 18px; height: 18px; accent-color: var(--evergreen); }
.book-form button[disabled] { opacity: 0.6; cursor: progress; }
@media (max-width: 767px) {
  .book-offer { flex-direction: column; gap: 20px; }
  .book-cover { width: 140px; }
  .tab { white-space: normal; line-height: 1.2; }
}

/* About: the dog photo beside the personal paragraph (owner 2026-10-07); a
   modest, secondary image, below the paragraph on phones. No caption (owner
   2026-10-14). */
.personal { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: start; }
.pet-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pet-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
@media (max-width: 767px) {
  .personal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pet-photo { max-width: 160px; }
}

/* Booking thank-you page /thank-you-online (owner 2026-10-07): minimal
   header (logo only), the approved portrait at a modest size, no forms,
   no booking prompts. The minimal header keeps the full-size logo on the
   smallest phones: it has no menu competing for space. */
@media (max-width: 400px) { .site-header--minimal .brand-logo { --logo-w: 144px; } }
.thanks { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "copy portrait"; gap: 72px; }
.thanks__copy { grid-area: copy; gap: 24px; padding-top: 0; }
.thanks__copy .lead { max-width: 46ch; }
.thanks__portrait { grid-area: portrait; max-width: 280px; }
.thanks__note { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.thanks__note h2 { font-size: 22px; line-height: 1.3; }
.thanks__note p { font-size: 17px; line-height: 1.55; }
/* One text colour for all confirmation content (owner 2026-10-07): the
   heading's own colour (paper on the evergreen band) for the heading, body,
   supporting heading and instruction, and sign-off; no muted tint. The
   button, header and footer keep their colours. */
.thanks__copy h1, .thanks__copy .lead, .thanks__note h2, .thanks__note p, .thanks__signoff { color: var(--paper); }
.thanks__signoff { font-family: var(--serif); font-size: 22px; line-height: 1.4; }
@media (max-width: 1023px) {
  .thanks { grid-template-columns: minmax(0, 1fr); grid-template-areas: "portrait" "copy"; gap: 40px; }
  .thanks__portrait { max-width: 220px; }
}
@media (max-width: 767px) {
  .thanks__portrait { max-width: 180px; }
}

/* About: EO membership (owner 2026-10-07). EO's official stacked colour logo
   (RGB PNG from Travis's Drive, transparent canvas trimmed to a margin,
   resized; colours and shapes unaltered), smaller than the Paper Clip Coach
   logo, linked to eonetwork.org, with the membership year directly below. */
/* The logo and its caption sit at the right of the EO paragraph, which
   wraps around them (owner 2026-10-07); the wrapper contains the float so
   "Outside of work" always starts below. Phones: stacked under the text. */
.eo-wrap { display: flow-root; }
.eo-membership { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.eo-wrap .eo-membership { float: right; margin: 6px 0 12px 32px; }
@media (max-width: 600px) {
  .eo-wrap { display: flex; flex-direction: column; gap: 16px; }
  .eo-wrap .eo-membership { float: none; order: 2; margin: 0; }
}
.eo-logo-link { display: block; line-height: 0; border-radius: 6px; }
.eo-logo { display: block; width: 132px; height: auto; }
.prose .eo-since { font-size: 15px; line-height: 1.4; color: var(--ink-mute); }
/* About "My background.": the Kinco and Welch Workwear logos after the first
   paragraph, which names both companies (owner 2026-10-15). Display only, no links. Each keeps its own
   proportions, uncropped; the widths are set so the two carry similar
   weight (Kinco's hand mark is taller than Welch's wordmark). They wrap onto
   two lines only when a screen is too narrow for both. */
.company-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; margin-block: 10px; }
.company-logo { display: block; height: auto; max-width: 100%; }
.company-logo--kinco { width: 170px; }
.company-logo--welch { width: 156px; }
@media (max-width: 479px) {
  /* phones: both still fit side by side at 360px and up */
  .company-logos { gap: 20px 28px; }
  .company-logo--kinco { width: 146px; }
  .company-logo--welch { width: 134px; }
}


/* Transferable Value Index page (owner 2026-10-13). The assessment is run
   by an outside provider; its buttons carry data-assessment-link and show
   as unavailable (.btn[aria-disabled]) until Travis's own link is set. */
.assess-intro { display: flex; flex-direction: column; gap: 16px; }
.assess-start { display: flex; flex-direction: column; gap: 14px; }
.assess-meta { font-size: 16px; font-weight: 600; color: var(--paper); }
.assess-note { font-size: 15px; line-height: 1.55; color: var(--evergreen-mist); max-width: 60ch; }
/* Value Index intro with the owner illustration (owner 2026-10-14): text on
   the left, the illustration on the right; stacked (text first) below
   1200px. The 4:3 frame matches the image, so nothing is cropped and the
   space is reserved before it loads. */
.hero--assess { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; }
.assess-hero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.assess-figure { margin: 0; }
.illustration-frame--4x3 { max-width: none; aspect-ratio: 4 / 3; }
@media (max-width: 1199px) {
  .hero--assess { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .assess-figure { max-width: 520px; }
}
/* Resources intro with the workspace illustration (owner 2026-10-16, RES-01):
   the same layout as the Value Index intro — text left, illustration right,
   tops aligned (rule above); stacked below 1200px, text first, then the
   illustration, then "Jump to". The 3:2 frame matches the image, so it is
   never cropped and its space is reserved before it loads. */
.hero--resources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; }
.resources-hero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.resources-figure { margin: 0; }
.illustration-frame--3x2 { max-width: none; aspect-ratio: 3 / 2; }
@media (max-width: 1199px) {
  .hero--resources { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .resources-figure { max-width: 600px; }
}
.assess-review { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); }
.prose .actions { margin-top: 8px; }

/* ---------- Resources page (owner 2026-10-16, Staging draft) ---------- */
/* Resource cards: format label, title, "Helps with" / "You'll get", then the
   action. Three across on desktop, two on tablet, one on phones. Planned
   cards (Staging only) are muted, dashed and have no action. */
.resources-free { font-size: 16px; font-weight: 600; color: var(--paper); }
.resources-intro { max-width: 68ch; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.resource-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.resource-card h3 { font-size: 22px; line-height: 1.25; }
.resource-format { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-mute); }
.resource-meta { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.resource-meta dt { font-size: 14px; font-weight: 600; color: var(--evergreen); }
.resource-meta dd { margin: 2px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.resource-status { font-size: 15px; line-height: 1.5; color: var(--ink-mute); font-style: italic; }
.resource-action { align-self: flex-start; margin-top: auto; }
.resource-status + .resource-action { margin-top: 0; }
.resource-card--planned { background: transparent; box-shadow: none; border: 2px dashed var(--rule); }
.resource-card--planned h3 { color: var(--ink-soft); }
/* The Value Index card ("not available yet") spans the row below the three
   ready checklists instead of sitting alone in a column. */
.resource-card--later { grid-column: 1 / -1; background: var(--sage-tint); box-shadow: none; }
@media (min-width: 768px) {
  .resource-card--later .resource-meta { flex-direction: row; gap: 32px; }
  .resource-card--later .resource-meta > div { flex: 1 1 0; }
}
.resource-grid--planned { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planned-heading { font-size: 24px; line-height: 1.25; margin-top: 16px; }
.resource-section .split__text { display: flex; flex-direction: column; gap: 12px; }
/* "Download" under each checklist heading (owner 2026-10-17): the PDF made
   from the same source as the section (scripts/checklists.mjs). */
.resource-download { align-self: flex-start; margin-top: 8px; }
.resource-card h4 { font-size: 20px; line-height: 1.3; }
.resource-desc { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.prose h4 { font-size: 24px; line-height: 1.25; margin-top: 12px; }
.resource-planned { display: flex; flex-direction: column; gap: 16px; }
/* "Jump to" (owner 2026-10-16): outlined buttons in a row that wraps, never
   a sideways scroller. Each target clears the sticky header; the jump is
   smooth only when the visitor hasn't asked for reduced motion. */
.resource-jump { padding-top: 48px; padding-bottom: 0; }
.resource-jump__label { font-size: 15px; font-weight: 600; color: var(--ink-mute); margin-bottom: 12px; }
.resource-jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.resource-jump__list { gap: 10px; }
.resource-jump__list .btn { white-space: normal; text-align: center; padding: 12px 18px; }
.resource-draft { padding-top: 32px; }

.resource-group#tools { padding-top: 64px; }
.resource-group__head { display: flex; flex-direction: column; gap: 16px; }
.resource-back { margin: 0; }
p.resource-back.section { padding-top: 0; padding-bottom: 64px; }
@media (prefers-reduced-motion: no-preference) { html:has(.resource-jump) { scroll-behavior: smooth; } }
/* Book cards: a plain designed band, never a made-up cover. */
.book-mark {
  display: flex; align-items: flex-end; min-height: 96px; padding: 16px;
  border-radius: 6px; background: var(--evergreen); color: var(--evergreen-mist);
  font-family: var(--serif); font-size: 17px; line-height: 1.3;
}
.resource-card--planned .book-mark { background: var(--stone-tint); color: var(--ink-mute); }
/* Recommended Books (owner 2026-10-17): three across on desktop, two on
   tablet, one on phones. Every cover sits in the same 2:3 frame and is
   scaled to fit, never cropped. A book without an official cover cleared for
   reuse gets a text-only card (title and author) in the same frame. The
   draft "Why I Recommend It" text is refused by the Production build. */
.resource-grid.book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .resource-grid.book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .resource-grid.book-grid { grid-template-columns: minmax(0, 1fr); } }
.book-card__cover {
  align-self: center; width: 160px; aspect-ratio: 2 / 3; flex: none; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.book-card__cover img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.book-card__cover--text {
  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 20px 16px 16px;
  border-radius: 4px; background: var(--evergreen); color: var(--evergreen-mist);
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.12);
}
.book-card__cover-title {
  font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--paper);
  padding-bottom: 12px; border-bottom: 2px solid var(--ochre);
}
.book-card__cover-author { font-size: 13px; line-height: 1.4; color: var(--evergreen-mist); }
.book-card__cover--text .draft-tag { margin: auto 0 0; }
.book-card h3 { display: flex; flex-direction: column; gap: 6px; }
.book-card__subtitle { font-family: var(--sans); font-size: 16px; line-height: 1.45; font-weight: 400; color: var(--ink-soft); }
.book-card__authors { font-size: 15px; font-weight: 600; color: var(--ink-mute); }
.book-card__notes { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.book-card__notes dt { font-size: 14px; font-weight: 600; color: var(--evergreen); }
.book-card__notes dd { margin: 2px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.book-card__notes dd.draft-text { font-style: italic; color: var(--ink-mute); }
.book-card .btn { white-space: normal; text-align: center; }
/* For future cards: link text read only by screen readers, e.g. "(opens in a new tab)". */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* On-page checklists: an empty box before each item, for printing or
   ticking off in your head. Decorative only, so screen readers hear a plain
   list. */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { position: relative; padding-left: 36px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px;
  border: 2px solid var(--ochre); border-radius: 4px; background: var(--white);
}
.resources-closing { font-size: 18px; line-height: 1.6; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 32px; }
.resources-closing .text-link { font-size: inherit; }
/* Tablet: the ready cards stack full width (no lone card on a row), with
   "Helps with" and "You'll get" side by side; planned cards two across. */
@media (max-width: 1199px) {
  .resource-grid { grid-template-columns: minmax(0, 1fr); }
  .resource-grid--planned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .resource-meta { flex-direction: row; gap: 32px; }
  .resource-meta > div { flex: 1 1 0; }
}
@media (max-width: 767px) {
  .resource-grid, .resource-grid--planned { grid-template-columns: minmax(0, 1fr); }
  .resource-card { padding: 24px; }
  .resource-jump { padding-top: 32px; }
  .resource-jump__list { gap: 8px; }
  .resource-jump__list .btn { padding: 10px 14px; font-size: 14px; }
}

/* ---------- "Why me?" page (owner 2026-10-16, Staging draft) ---------- */
/* Hero: the About layout (text left, the approved portrait right; stacked
   below 1200px) with a longer introduction. */
.whyme-intro { display: flex; flex-direction: column; gap: 18px; max-width: 60ch; }
/* all three introduction paragraphs share one style (owner 2026-10-17) */
.whyme-intro p { font-size: 18px; line-height: 1.65; color: var(--evergreen-mist); }
.text-link--light { color: var(--paper); }
.whyme-head { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; }
/* Proof points: career facts, not Paper Clip Coach statistics. */
.proof-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.proof-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.proof-card__value { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--evergreen); }
.proof-card__label { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
/* Experience cards: two across, the fifth spans the row. */
.whyme-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.whyme-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.whyme-card h3 { font-size: 24px; line-height: 1.25; }
.whyme-card p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.whyme-card p.whyme-card__you { color: var(--evergreen); font-weight: 600; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: auto; }
.whyme-card--wide { grid-column: 1 / -1; }
.whyme-note { max-width: 68ch; }
/* Questions: a numbered list of short cards. */
.stack--tight { gap: 24px; }
.question-list { margin: 0; padding: 0; list-style: none; counter-reset: q; display: flex; flex-direction: column; gap: 14px; }
.question-list li { counter-increment: q; position: relative; padding: 22px 24px 22px 68px; background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.question-list li::before {
  content: counter(q); position: absolute; left: 22px; top: 22px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--evergreen); color: var(--paper); font-weight: 600; font-size: 15px;
}
.question-list h3 { font-size: 20px; line-height: 1.3; }
.question-list p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.whyme-cta { display: flex; flex-direction: column; gap: 16px; max-width: 64ch; }
.draft-verify-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 1199px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .proof-grid, .whyme-cards { grid-template-columns: minmax(0, 1fr); }
  .proof-card, .whyme-card { padding: 24px; }
  .proof-card__value { font-size: 28px; }
  .question-list li { padding: 20px 20px 20px 60px; }
  .question-list li::before { left: 18px; top: 20px; }
}
/* Below 360px the header takes two lines (see the 359px header rule), so
   jump targets need more room under it. */

/* ---------- Header option C (owner 2026-10-17; replaces option B) ---------- */
/* From 1200px a slim utility row above the full menu carries "Client login",
   right-aligned above the Take Value Index area. Below 1200px it is hidden
   (not focusable) and the compact bar with the Menu button is used; Client
   login is also in every footer. */
.utility-bar { display: none; }
@media (min-width: 1200px) {
  .utility-bar { display: flex; justify-content: flex-end; padding: 10px var(--side) 0; }
  .utility-login { color: var(--evergreen-mist); font-size: 15px; text-decoration: none; }
  .utility-login:hover, .utility-login:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
  .utility-bar + .site-header { padding-top: 8px; }
}
/* In-page link targets clear the sticky header on every page (the header is
   about 116px tall from 1200px, 84-99px below that, 130px under 360px). */
:root { --anchor-offset: 140px; }
@media (max-width: 1199px) { :root { --anchor-offset: 112px; } }
@media (max-width: 359px) { :root { --anchor-offset: 150px; } }
main [id] { scroll-margin-top: var(--anchor-offset); }