:root {
  --ivory: #fdf9f6;
  --stone: #f7f0ea;
  --navy: #082e59;
  --navy-soft: #2f4d6d;
  --brass: #b37a22;
  --hairline: rgba(8, 46, 89, 0.12);
  --taupe-line: rgba(99, 79, 62, 0.16);
  --white: #ffffff;

  --font-serif: "EB Garamond", "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --shell: 1180px;
  --dock-bg: #1C1E42;
  --dock-h: 54px;
  --dock-safe: env(safe-area-inset-bottom, 0px);
  --dock-total-h: calc(var(--dock-h) + var(--dock-safe));
  --page-gutter: clamp(24px, 5vw, 72px);
  --section-y: clamp(88px, 9vw, 142px);
  --desktop-beat-min: calc(100svh - var(--dock-total-h));
  --focus: 3px solid rgba(179, 122, 34, 0.7);
  --surface-radius: 7px;
  --closer-support-indent: 11px;
  --closer-final-cta-offset: clamp(120px, 12.2vw, 176px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(var(--dock-total-h) + 16px);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 14px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.shell {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--shell));
  margin-inline: auto;
}

.utility-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: var(--dock-total-h);
  background: var(--dock-bg);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.22);
}
.utility-dock__inner {
  height: var(--dock-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
}
.utility-dock__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.utility-dock__brand img {
  width: 80px;
  height: auto;
}
.utility-dock__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.utility-dock__link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
  display: inline-grid;
}
button.utility-dock__link {
  cursor: pointer;
}
.utility-dock__link:hover,
.utility-dock__link:focus-visible,
.utility-dock__link:active {
  color: rgba(255, 255, 255, 1);
  font-weight: 700;
}
.utility-dock__cta {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: inline-grid;
  align-items: center;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #F8BF64;
}
.utility-dock__cta:hover,
.utility-dock__cta:focus-visible,
.utility-dock__cta:active {
  font-weight: 700;
}
/* Reserve width for the hover/active bold state via an invisible bold
   "ghost" copy of the same text stacked in the same grid cell, so
   toggling weight on hover never changes the element's box size and
   never shifts its neighbors in the flex row. */
.utility-dock__link > span,
.utility-dock__cta > span {
  grid-area: 1 / 1;
}
.utility-dock__link::after,
.utility-dock__cta::after {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
}

.recognition {
  min-height: calc(96svh - var(--dock-total-h));
  background: var(--ivory);
  overflow: clip;
}
.recognition__inner {
  min-height: inherit;
  display: flex;
  align-items: stretch;
}
.recognition__content {
  width: 62%;
  padding-top: clamp(118px, 13vh, 156px);
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
}
.recognition h1,
.reframe h2,
.fractional h2,
.closer h2,
.principle h3,
.proof__header h2,
.proof-trigger__title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.recognition h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(58px, 5.25vw, 78px);
  line-height: 0.98;
}
.accent-rule {
  width: 76px;
  height: 4px;
  margin-top: 46px;
  background: var(--brass);
}
.recognition__consequence {
  max-width: 600px;
  margin: 32px 0 0;
  font-size: clamp(22px, 1.85vw, 28px);
  line-height: 1.38;
  letter-spacing: -0.02em;
}
.next-beat {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: clamp(44px, 6vh, 72px);
  width: fit-content;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--brass);
}
.next-beat span {
  display: inline-block;
  margin-left: 8px;
}
.next-beat:hover {
  color: var(--brass);
}
.tone-stone { background: var(--stone); }

.reframe {
  min-height: 86svh;
}
.reframe__inner {
  min-height: inherit;
  padding-top: clamp(96px, 10vh, 132px);
  padding-bottom: clamp(92px, 10vh, 130px);
  display: flex;
  flex-direction: column;
}
.reframe h2 {
  margin: 0;
  max-width: 1180px;
  font-size: clamp(50px, 4.65vw, 67px);
  line-height: 1.02;
}
.playbook {
  margin-top: clamp(68px, 8vh, 94px);
  display: grid;
  grid-template-columns: 24% 1fr;
  column-gap: 88px;
  align-items: start;
}
.playbook__list {
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 38px;
}
.playbook__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: baseline;
  font-size: 19px;
  line-height: 1.45;
}
.playbook__number {
  color: var(--brass);
  font-family: var(--font-serif);
  font-size: 21px;
}

.fractional {
  min-height: 100svh;
  background: var(--ivory);
}
.fractional__inner {
  min-height: inherit;
  padding-top: clamp(94px, 9vh, 124px);
  padding-bottom: clamp(94px, 10vh, 140px);
  display: flex;
  flex-direction: column;
}
.fractional h2 {
  margin: 0;
  max-width: 920px;
  font-size: clamp(53px, 4.85vw, 67px);
  line-height: 0.99;
}
.fractional__layout {
  margin-top: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 31%);
  gap: clamp(76px, 8vw, 120px);
  align-items: center;
}
.fractional__copy {
  min-width: 0;
}
.fractional__intro {
  max-width: 690px;
  margin: 0;
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.43;
  letter-spacing: -0.02em;
}
.contributions {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  max-width: 745px;
  display: grid;
  gap: 28px;
}
.contributions li {
  position: relative;
  padding-left: 52px;
  font-size: 19px;
  line-height: 1.45;
}
/* Bullet 3 only: shorter wording on mobile. Desktop keeps the original
   phrasing. Note: tested and confirmed this doesn't reduce the bullet's
   wrapped height (still 4 lines) - it's independent of the fold issue
   affecting the next-beat link on short mobile viewports. */
.contributions__text--short { display: none; }
.contributions li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 29px;
  height: 3px;
  border-radius: 999px;
  background: var(--brass);
}
.text-cta {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brass);
  font: inherit;
  cursor: pointer;
  display: inline-block;
  margin-top: 38px;
  font-size: 17px;
  text-decoration: none;
}
.text-cta span { margin-left: 8px; }
.fractional__portrait {
  margin: 0;
  justify-self: end;
  width: min(100%, 300px);
  text-align: center;
}
.fractional__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--surface-radius);
}
.fractional__portrait figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--navy-soft);
}

.closer {
  min-height: 93svh;
}
.closer__inner {
  min-height: inherit;
  padding-top: clamp(94px, 10vh, 132px);
  padding-bottom: clamp(112px, 12vh, 154px);
  display: flex;
  flex-direction: column;
}
.closer h2 {
  margin: 0;
  font-size: clamp(52px, 4.6vw, 67px);
  line-height: 1;
}
.closer__field {
  margin-top: clamp(88px, 10vh, 124px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(18px, 2vw, 28px);
  row-gap: clamp(6px, 1vh, 12px);
  align-items: start;
}
.principle {
  min-width: 0;
}
.principle h3 {
  margin: 0;
  font-size: clamp(32px, 2.85vw, 42px);
  line-height: 1.02;
}
.principle p {
  margin: 15px 0 0;
  font-size: 19px;
  line-height: 1.425;
}
.principle--1 {
  grid-column: 1 / span 6;
  grid-row: 1;
  width: min(100%, 540px);
}
.principle--1 p { max-width: 540px; }
.principle--2 {
  grid-column: 4 / span 7;
  grid-row: 2;
  width: min(100%, 585px);
  margin-top: clamp(16px, 2vh, 24px);
}
.principle--2 p { max-width: 540px; }
.principle--3 {
  grid-column: 6 / span 6;
  grid-row: 3;
  width: min(100%, 510px);
  margin-top: clamp(4px, 1vh, 12px);
}
.principle--3 p { max-width: 500px; }
.principle--4 {
  grid-column: 8 / span 5;
  grid-row: 4;
  width: min(100%, 460px);
  margin-top: clamp(20px, 2.5vh, 32px);
}
.principle--4 p { max-width: 460px; }
.final-contact__cta {
  margin-top: 30px;
}

@media (min-width: 1200px) {
  .principle--1,
  .principle--2 {
    min-height: 113.86px;
  }
  .principle--1 p {
    width: 575px;
    max-width: 575px;
  }
  .principle--2 p {
    width: 585px;
    max-width: 585px;
  }
}

.proof {
  min-height: 95svh;
  background: var(--ivory);
}
.proof__inner {
  min-height: inherit;
  padding-top: clamp(92px, 9vh, 126px);
  padding-bottom: clamp(110px, 12vh, 156px);
  display: flex;
  flex-direction: column;
}
.proof__header {
  max-width: 760px;
}
.proof__header h2 {
  margin: 0;
  font-size: clamp(55px, 4.85vw, 67px);
  line-height: 1;
}
.proof__header p {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 720px;
}
.proof-list {
  position: relative;
  margin-top: clamp(48px, 6vh, 72px);
  display: grid;
  grid-template-columns: 31% 1px 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 38px;
  row-gap: 38px;
  align-items: start;
}
.proof-list::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  width: 1px;
  background: var(--taupe-line);
}
.proof-item { display: contents; }
.proof-trigger {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--navy);
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 160ms ease;
}
.proof-item--1 .proof-trigger { grid-column: 1; grid-row: 1; }
.proof-item--2 .proof-trigger { grid-column: 1; grid-row: 2; }
.proof-item--3 .proof-trigger { grid-column: 1; grid-row: 3; }
.proof-trigger:hover,
.proof-trigger:focus-visible { opacity: 0.94; }
.proof-trigger.is-active { opacity: 1; }
.proof-trigger__number {
  color: var(--navy-soft);
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1;
}
.proof-trigger.is-active .proof-trigger__number,
.proof-trigger.is-active .proof-trigger__title { color: var(--brass); }
.proof-trigger__title {
  font-size: clamp(30px, 2.45vw, 38px);
  line-height: 1.02;
}
.proof-panel {
  grid-column: 3;
  grid-row: 1 / 4;
  padding-left: 2px;
  max-width: 700px;
}
.proof-panel[hidden] { display: none; }

/* On side-by-side Proof layouts, keep every panel in the same grid area for sizing.
   Inactive panels retain their hidden attribute and are visually suppressed, so the
   longest story reserves the interaction height without story selection moving the index or footer. */
@media (min-width: 701px) {
  .proof-panel[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
}
.proof-panel h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.proof-panel p {
  margin: 25px 0 0;
  font-size: 17px;
  line-height: 1.68;
}
.proof-panel p + p {
  margin-top: 18px;
}
/* Quiet client-mark corroboration, shared pattern for future single-logo Proof 1/2 use. */
.proof-logos {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 5px;
}
.proof-logos__row {
  display: flex;
  align-items: center;
  gap: 36px;
}
.proof-logos__mark {
  display: block;
  width: auto;
  opacity: 1;
  filter: grayscale(1);
}
.proof-logos__mark--home-depot {
  height: 60px;
}
.proof-logos__mark--owens-corning {
  height: 69px;
}
.proof-logos__mark--urban-outfitters {
  height: 20px;
}
.proof-logos__mark--bluecross {
  height: 36px;
}
.proof-logos__mark--delta-dental {
  height: 25.5px;
  opacity: 0.75;
}
@media (min-width: 901px) {
  #proof-panel-1 .proof-logos,
  #proof-panel-2 .proof-logos,
  #proof-panel-3 .proof-logos {
    display: flex;
    align-items: flex-end;
    width: fit-content;
    margin-left: auto;
  }
  #proof-panel-3 .proof-logos {
    margin-top: 21px;
  }
  /* Proof #1's narrative runs longer than Proof #3's, so the shared 21px top
     gap would push content behind the dock; 2px is the largest safe value
     that keeps zero geometry shift across all three stories. */
  #proof-panel-1 .proof-logos {
    margin-top: 2px;
  }
  #proof-panel-2 .proof-logos {
    margin-top: 21px;
  }
}

.contact-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8, 46, 89, 0.42);
}
.contact-dialog[hidden] {
  display: none !important;
}
.contact-dialog__frame {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 3.4vw, 42px);
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 28px 80px rgba(8, 46, 89, 0.22);
}

.contact-dialog__close {
  appearance: none;
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.contact-dialog__intro {
  padding-right: 44px;
}
.contact-dialog__intro h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(42px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}
.contact-form {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}
.contact-form__identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.contact-field {
  display: grid;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(8, 46, 89, 0.22);
  border-radius: var(--surface-radius);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
}
.contact-field input {
  min-height: 48px;
  padding: 10px 13px;
}
.contact-field textarea {
  min-height: 132px;
  padding: 12px 13px;
  resize: vertical;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(47, 77, 109, 0.62);
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(179, 122, 34, 0.14);
}
.contact-form__submit {
  appearance: none;
  justify-self: start;
  min-height: 48px;
  margin-top: 0;
  padding: 0 22px;
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--navy);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.contact-form__error {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #b3261e;
}
.contact-form__error[hidden] { display: none; }
.contact-form__error a {
  color: inherit;
  text-decoration: underline;
}
.contact-confirmation {
  padding: 38px 0 8px;
}
.contact-confirmation p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.08;
}
.contact-confirmation__close {
  appearance: none;
  margin-top: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 6px;
  cursor: pointer;
}
body.modal-open {
  overflow: hidden;
}

/* AI Headache dialog — symptom index (left) + one stable response pane (right).
   Structurally related to the Proof tablist/tabpanel pattern (grid-stacked panels
   reserve height for the tallest state; a hidden-attribute override keeps every
   panel in flow at desktop so switching symptoms never resizes the dialog),
   but restyled and reproportioned so it doesn't read as a clone of Proof. */
.headache-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8, 46, 89, 0.42);
}
.headache-dialog[hidden] {
  display: none !important;
}
.headache-dialog__frame {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 3.4vw, 42px);
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 28px 80px rgba(8, 46, 89, 0.22);
}
.headache-dialog__close {
  appearance: none;
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.headache-dialog__intro {
  padding-right: 44px;
  margin-bottom: 28px;
}
.headache-dialog__intro h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}

.headache-list {
  position: relative;
  display: grid;
  grid-template-columns: 453px 1px 1fr;
  grid-template-rows: repeat(6, auto);
  column-gap: 44px;
  row-gap: 14px;
  align-items: start;
}
.headache-list::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 7;
  align-self: stretch;
  width: 1px;
  background: var(--taupe-line);
}
.headache-item { display: contents; }
.headache-item:nth-child(2) .headache-symptom { grid-row: 1; }
.headache-item:nth-child(3) .headache-symptom { grid-row: 2; }
.headache-item:nth-child(4) .headache-symptom { grid-row: 3; }
.headache-item:nth-child(5) .headache-symptom { grid-row: 4; }
.headache-item:nth-child(6) .headache-symptom { grid-row: 5; }
.headache-item:nth-child(7) .headache-symptom { grid-row: 6; }

.headache-symptom {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  grid-column: 1;
  width: 100%;
  text-align: left;
  padding: 10px 0 10px 16px;
  margin: 0;
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.headache-symptom::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 21.9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(179, 122, 34, 0.4);
  transform: translateY(-50%);
  transition: background 160ms ease;
}
.headache-symptom:focus-visible {
  opacity: 0.9;
}
.headache-symptom.is-active {
  opacity: 1;
  font-weight: 450;
}
.headache-symptom.is-active::before {
  background: var(--brass);
}

.headache-prompt,
.headache-panel {
  grid-column: 3;
  grid-row: 1 / 7;
  max-width: 420px;
  padding-left: 2px;
}
.headache-prompt {
  margin: 0;
  color: var(--navy-soft);
  font-size: 17px;
  font-style: italic;
  opacity: 0.85;
}
.headache-prompt__text--short { display: none; }
.headache-prompt[hidden] { display: none; }

.headache-panel {
  display: flex;
  flex-direction: column;
  height: 357px;
}
.headache-panel[hidden] { display: none; }
@media (min-width: 701px) {
  .headache-panel[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
  }
}
.headache-panel p {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--navy);
}
.headache-cta {
  appearance: none;
  align-self: flex-end;
  margin-top: auto;
  padding: 0 4px 6px 0;
  border: 0;
  background: transparent;
  color: var(--brass);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.headache-cta span { margin-left: 6px; }
.headache-cta:disabled {
  color: var(--navy-soft);
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 700px) {
  .headache-dialog__frame {
    padding: 26px 22px;
  }
  .headache-dialog__intro h2 {
    font-size: clamp(30px, 8vw, 36px);
  }
  .headache-list {
    display: block;
  }
  .headache-list::before { display: none; }
  .headache-item { display: block; }
  .headache-item + .headache-item { margin-top: 6px; }
  .headache-prompt {
    max-width: none;
    margin-top: 18px;
  }
  .headache-prompt__text--full { display: none; }
  .headache-prompt__text--short { display: inline; }
  .headache-panel {
    grid-column: auto;
    grid-row: auto;
    max-width: none;
    height: auto;
    padding: 10px 0 18px 16px;
  }
  .headache-panel p { font-size: 17px; }
  .headache-cta { padding-top: 16px; }
}

/* Background dialog — editorial dossier, not a résumé. Reuses the same
   overlay/frame/close mechanics as contact and headache (shared JS focus
   trap, inert, modal-open), but composed as quiet evidence rather than
   an interactive diagnosis, so it deliberately avoids the headache
   dialog's tablist/card language: no boxes, no icons, hairlines only. */
.background-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8, 46, 89, 0.42);
}
.background-dialog[hidden] {
  display: none !important;
}
.background-dialog__frame {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 2.6vw, 38px) clamp(34px, 3.4vw, 48px);
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 28px 80px rgba(8, 46, 89, 0.22);
}
.background-dialog__close {
  appearance: none;
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.background-dialog__eyebrow {
  margin: 0 0 6px;
  padding-right: 44px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-soft);
}

.background-thesis {
  max-width: none;
}
.background-thesis h2 {
  max-width: none;
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  white-space: normal;
}
.background-thesis p {
  max-width: 810px;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
}
.background-thesis p:last-child { margin-bottom: 0; }

.background-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.background-dimension {
  position: relative;
}
.background-dimension:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: -24px;
  width: 1px;
  background: var(--taupe-line);
}
.background-dimension h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.background-dimension p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy-soft);
}

.background-impact {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.background-impact__label,
.background-credentials__label {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
/* Desktop: compact 2x2 evidence matrix — context stays stacked directly above
   its result so the two never separate, while the grid (not four full-width
   rows) is what actually shortens the section. */
.background-impact__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 0;
  border-top: 1px solid var(--hairline);
}
.background-impact__row {
  position: relative;
  padding: 8px 0;
}
.background-impact__row:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -24px;
  width: 1px;
  background: var(--taupe-line);
}
.background-impact__row:nth-child(3),
.background-impact__row:nth-child(4) {
  border-top: 1px solid var(--hairline);
}
.background-impact__context {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--navy-soft);
}
.background-impact__result {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--navy);
}

.background-credentials {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.background-credentials__list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy-soft);
}
.background-credentials__list span:not(:last-child)::after {
  content: "\00b7";
  color: var(--brass);
  margin: 0 10px;
}

/* Proof story dialog — mobile only in practice (only ever opened by JS
   below the 700px breakpoint), but the shell mechanics mirror the
   other three dialogs so it behaves consistently. */
.proof-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8, 46, 89, 0.42);
}
.proof-dialog[hidden] {
  display: none !important;
}
.proof-dialog__frame {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 3.4vw, 42px);
  border: 1px solid var(--hairline);
  border-radius: var(--surface-radius);
  background: var(--ivory);
  color: var(--navy);
  box-shadow: 0 28px 80px rgba(8, 46, 89, 0.22);
}
/* Filled brass circle with a centered white × — distinct from the other
   three dialogs' plain-text close glyph, by request. */
.proof-dialog__close {
  appearance: none;
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--brass);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.proof-dialog__content {
  padding-right: 40px;
}
/* Panels are moved here from .proof-list on open — strip the inline-list
   spacing meant for the accordion-style trigger+padding-left layout,
   since there's no trigger column inside the dialog. */
.proof-dialog__content .proof-panel {
  padding: 0;
  max-width: none;
}
.proof-dialog__content .proof-panel h3 {
  font-size: 22px;
}

@media (max-width: 900px) {
  .background-dialog__frame {
    padding: 26px 22px;
  }
  .background-thesis h2 {
    font-size: clamp(30px, 8vw, 36px);
  }
  .background-thesis p {
    max-width: none;
  }
  .background-dimensions {
    grid-template-columns: 1fr;
    row-gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
  }
  .background-dimension:not(:last-child)::after { display: none; }
  .background-impact,
  .background-credentials {
    margin-top: 32px;
    padding-top: 24px;
  }
  .background-impact__rows {
    grid-template-columns: 1fr;
  }
  .background-impact__row {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .background-impact__row:last-child { border-bottom: 0; }
  .background-impact__row:nth-child(3),
  .background-impact__row:nth-child(4) {
    border-top: 0;
  }
  .background-impact__row::after { display: none; }
  .background-credentials__list {
    flex-direction: column;
  }
  .background-credentials__list span:not(:last-child)::after {
    content: none;
  }
}

@media (min-width: 901px) {
  .closer__field {
    transform: translateX(55px);
  }

  .principle p {
    transform: translateX(var(--closer-support-indent));
  }

  .final-contact__cta {
    transform: translate(calc(var(--closer-final-cta-offset) + 25px), 5px);
  }

  .recognition,
  .reframe,
  .fractional,
  .proof,
  .closer {
    min-height: var(--desktop-beat-min);
  }

  /* .closer is the last section — there is no next section below it to cover
     the gap between its content height and the raw viewport, so unlike the
     other beats it must fill the full 100svh, not just the dock-reduced beat
     height, or the section above shows through at the very bottom of scroll. */
  .closer {
    min-height: 100svh;
  }
}

.utility-dock a:focus-visible,
.utility-dock button:focus-visible,
.next-beat:focus-visible,
.text-cta:focus-visible,
.proof-trigger:focus-visible,
.contact-dialog__close:focus-visible,
.contact-form__submit:focus-visible,
.contact-confirmation__close:focus-visible,
.headache-dialog__close:focus-visible,
.headache-symptom:focus-visible,
.headache-cta:focus-visible,
.background-dialog__close:focus-visible {
  outline: var(--focus);
  outline-offset: 5px;
}

@media (max-width: 900px) {
  :root {
    --dock-h: 58px;
    --page-gutter: clamp(22px, 5vw, 40px);
  }

  .desktop-break { display: none; }
  /* Mobile dock keeps only AI Headache; Background's dock entry point
     is dropped on narrow screens by request. justify-content:center
     (base rule) centers the single remaining item automatically. */
  #background-trigger { display: none; }

  .recognition { min-height: calc(100svh - var(--dock-total-h)); }
  .recognition__content {
    width: min(100%, 680px);
    padding-top: 14svh;
    padding-bottom: 50px;
  }
  .recognition h1 { font-size: clamp(48px, 9.5vw, 68px); }
  .recognition__consequence { font-size: clamp(21px, 4vw, 26px); }

  .reframe { min-height: unset; }
  .reframe h2,
  .fractional h2,
  .closer h2,
  .proof__header h2 { font-size: clamp(46px, 8vw, 62px); }
  .playbook {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .playbook__list { grid-column: 1; gap: 30px; }

  .fractional { min-height: unset; }
  .fractional__layout {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 32%);
    gap: 46px;
  }
  .fractional__portrait { width: 100%; }

  .closer { min-height: unset; }
  .closer__field {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 64px;
  }
  .principle,
  .principle--1,
  .principle--2,
  .principle--3,
  .principle--4 {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    max-width: 540px;
    margin-top: 0;
  }
  .principle p,
  .principle--1 p,
  .principle--2 p,
  .principle--3 p,
  .principle--4 p {
    max-width: 460px;
    line-height: 1.5;
  }

  .proof { min-height: unset; }
  .proof-list {
    grid-template-columns: 36% 1px 1fr;
    column-gap: 30px;
  }
  .proof-trigger { grid-template-columns: 32px 1fr; gap: 13px; }
  .proof-trigger__title { font-size: clamp(28px, 4vw, 34px); }
}

@media (max-width: 700px) {
  .recognition__content { padding-top: 12svh; }
  .accent-rule { margin-top: 34px; width: 58px; height: 3px; }
  .recognition__consequence { margin-top: 26px; }

  .reframe__inner,
  .fractional__inner,
  .closer__inner,
  .proof__inner { padding-block: clamp(76px, 12vw, 96px); }

  /* Both the space above the list and the gap between bullets are trimmed
     (from 54px / 30px inherited from the 900px breakpoint) so the "Where
     fractional leadership fits" next-beat link clears the fold on
     phone-sized screens, with margin for real mobile browser chrome
     (address bar, etc.) eating into the viewport beyond what devtools
     height emulation accounts for. */
  .playbook { margin-top: 36px; }
  .playbook__list { gap: 6px; }
  .playbook__list li {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }

  /* Beat 3 never got the same mobile spacing pass Beat 2 did — these three
     tighten the intro/bullet rhythm the same way, contained to this section. */
  .contributions {
    margin-top: 12px;
    gap: 10px;
  }
  .contributions__text--full { display: none; }
  .contributions__text--short { display: inline; }
  /* Small thumbnail beside the headline instead of a full-width photo
     stranded below all the copy (previously required an extra scroll
     past the headline/intro/bullets before the photo even appeared).
     .fractional__layout is dissolved via display:contents so its two
     children can be placed directly in .fractional__inner's grid,
     alongside the h2 — desktop is untouched, this is mobile-only. */
  .fractional__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    row-gap: 14px;
    align-items: center;
    padding-top: 44px;
  }
  #fractional-title {
    grid-column: 1;
    grid-row: 1;
  }
  .fractional__layout {
    display: contents;
  }
  .fractional__copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .fractional__portrait {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: 90px;
  }
  /* Confirmed via measurement that the headline row has enough spare
     height at every width in this breakpoint to fit the photo plus a
     normal-flow caption beneath it, so no overlay/absolute positioning
     needed here. Smallest size in the established font taxonomy. */
  .fractional__portrait figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    font-style: italic;
    text-align: center;
    color: #000;
  }
  .fractional__inner > .next-beat {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 26px;
  }
  /* Base .fractional__portrait img only sets width:100%, so the browser falls
     back to the <img> width/height attributes (276x397) for its aspect ratio —
     those don't match the real 800x1000 file, which is what pinches it. Fixing
     with an explicit ratio here (mobile only) also lets us crop out excess
     torso by anchoring the crop to the top of the frame instead of the center. */
  .fractional__portrait img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 0%;
  }
  .contributions li { padding-left: 44px; }
  .contributions li::before { width: 25px; }

  .closer__field {
    margin-top: 68px;
    gap: 54px;
  }
  .principle h3 { font-size: clamp(31px, 8vw, 40px); }

  .proof-list {
    margin-top: 48px;
    display: block;
  }
  .proof-list::before { display: none; }
  .proof-item { display: block; }
  .proof-item + .proof-item { margin-top: 32px; }
  .proof-trigger {
    position: relative;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 7px 0 8px;
    opacity: 0.78;
  }
  .proof-trigger__title { font-size: clamp(30px, 8vw, 38px); }
  /* Panels never display inline on mobile anymore — tapping a trigger
     opens .proof-dialog instead (see script.js), regardless of the
     is-active/hidden state left over from desktop's tablist markup. */
  .proof-list .proof-panel {
    display: none !important;
  }
  .proof-panel p { font-size: 16px; line-height: 1.66; }

  .contact-dialog {
    padding: 12px;
  }
  .contact-dialog__frame {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 30px 22px 26px;
  }
  .contact-dialog__intro {
    padding-right: 38px;
  }
  .contact-dialog__intro h2 {
    font-size: clamp(40px, 12vw, 50px);
  }
  .contact-form__identity {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contact-field textarea {
    min-height: 140px;
  }
  .contact-form__submit {
    width: 100%;
  }

}

@media (max-width: 430px) {
  .recognition { min-height: calc(100svh - var(--dock-total-h)); }
  .recognition h1 { font-size: clamp(45px, 13vw, 58px); }
  .recognition__consequence { font-size: 20px; }
  .fractional__intro { font-size: 18px; }
  .proof-panel { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .proof-trigger {
    transition: none;
  }

  .headache-symptom,
  .headache-symptom::before {
    transition: none;
  }
}