@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Locked Clean Material Editorial palette */
  --white: #ffffff;
  --chalk: #f8f6f1;
  --slate-white: #f2f4f5;
  --linen: #eeecea;
  --stone: #eae8e3;
  --ink: #222a39;
  --muted: #5f6872;
  --moss: #526f6a;
  --rule: #dedcd6;

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: min(1240px, calc(100vw - 72px));
  --content: 760px;
  --art-size: clamp(430px, 39vw, 570px);
  --art-feature: clamp(540px, 47vw, 690px);
  --art-small: clamp(220px, 22vw, 315px);
  --art-gap: clamp(44px, 5.6vw, 78px);
  --shape-margin: clamp(28px, 3.2vw, 46px);
  --section-pad: clamp(92px, 9.5vw, 150px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 600; color: var(--ink); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  text-decoration: none;
  display: grid;
  gap: 1px;
}
.brand-name {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.015em;
}
.brand-role {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.nav a {
  text-decoration: none;
  transition: color .18s ease;
}
.nav a:hover { color: var(--ink); }

.section {
  padding-block: var(--section-pad);
  border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 28%);
}
.surface-white { background: var(--white); }
.surface-chalk { background: var(--chalk); }
.surface-slate { background: var(--slate-white); }
.surface-linen { background: var(--linen); }
.surface-stone { background: var(--stone); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
}
h1 {
  font-size: clamp(54px, 6.3vw, 88px);
  max-width: 1040px;
}
h1 span { display: block; }
.hero-title-emphasis {
  font-weight: 600;
}
h2 {
  font-size: clamp(42px, 5vw, 68px);
  max-width: 800px;
  margin-bottom: clamp(42px, 5vw, 62px);
}
h3 {
  font-size: 28px;
  margin-bottom: 18px;
}
.section-kicker {
  margin: 0 0 20px;
  color: var(--moss);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.copy {
  font-size: clamp(18px, 1.27vw, 19.5px);
  line-height: 1.74;
}
.copy p,
.copy li,
.service-grid p,
.section-intro p,
.closing-panel p,
.fit-note {
  color: color-mix(in srgb, var(--ink), transparent 13%);
}
.flow > * + * { margin-top: 1.08rem; }
.measure { max-width: var(--content); }
.measure-wide { max-width: none; }
.measure-small { max-width: 600px; }

.hero {
  padding-top: clamp(78px, 8vw, 118px);
}
.hero-wrap {
  display: grid;
  gap: clamp(58px, 7vw, 92px);
}
.hero-title-block {
  text-align: center;
  display: grid;
  justify-items: center;
}
.hero-title-block .section-kicker { margin-bottom: 24px; }
.hero-below {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 665px);
  justify-content: center;
  gap: clamp(62px, 8vw, 124px);
  align-items: start;
}
.hero-copy .copy { max-width: 665px; }
.portrait-figure {
  margin: 0;
  align-self: start;
}
.portrait-figure img {
  filter: grayscale(1) contrast(1.04);
  width: 100%;
  border: 1px solid var(--rule);
}
.actions { margin-top: 42px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.button:hover,
.button.dark {
  background: var(--ink);
  color: var(--white);
}
.button.dark:hover {
  background: transparent;
  color: var(--ink);
}

.prose-section {
  position: relative;
  max-width: 1240px;
}
.prose-section::after {
  content: "";
  display: block;
  clear: both;
}
.media-right .section-kicker,
.media-right h2 {
  max-width: calc(100% - var(--art-size) - var(--art-gap));
  margin-right: calc(var(--art-size) + var(--art-gap));
}
.media-left .section-kicker,
.media-left h2 {
  max-width: calc(100% - var(--art-size) - var(--art-gap));
  margin-left: calc(var(--art-size) + var(--art-gap));
}
.permanent-section.media-right .section-kicker,
.permanent-section.media-right h2 {
  max-width: calc(100% - var(--art-feature) - var(--art-gap));
  margin-right: calc(var(--art-feature) + var(--art-gap));
}
.art-wrap,
.art-wrap-small {
  margin: 0;
  position: relative;
}
.art-wrap { width: var(--art-size); }
.art-wrap-small { width: var(--art-small); }
.art-feature { width: var(--art-feature); }
.art-wrap img,
.art-wrap-small img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.art-right {
  float: right;
  margin: 0 0 48px var(--art-gap);
}
.art-left {
  float: left;
  margin: 0 var(--art-gap) 48px 0;
}
.art-insight-main {
  margin-top: -10px;
}
.art-insight-hand {
  margin-top: 10px;
  margin-bottom: 24px;
}

/* Shape-outside masks.
   Visible transparent PNGs and invisible wrapping silhouettes are kept separate
   so text follows the perceived illustration rather than the rectangular PNG. */
.shape-patterns {
  shape-outside: url('assets/masks/patterns-not-personality-mask.png');
  shape-image-threshold: 0.18;
  shape-margin: var(--shape-margin);
}
.shape-problem {
  shape-outside: url('assets/masks/problem-once-solution-mask.png');
  shape-image-threshold: 0.18;
  shape-margin: var(--shape-margin);
}
.shape-insight {
  shape-outside: url('assets/masks/insight-isnt-enough-mask.png');
  shape-image-threshold: 0.18;
  shape-margin: var(--shape-margin);
}
.shape-outdated {
  shape-outside: url('assets/masks/outdated-patterns-mask.png');
  shape-image-threshold: 0.18;
  shape-margin: var(--shape-margin);
}
.shape-hand {
  shape-outside: url('assets/masks/hand-arrow-loop-mask.png');
  shape-image-threshold: 0.18;
  shape-margin: clamp(22px, 2.6vw, 36px);
}

.quiet-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 13px;
}
.quiet-list li {
  position: relative;
  padding-left: 25px;
  font-size: clamp(17.25px, 1.14vw, 18px);
  line-height: 1.68;
}
.quiet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--moss);
  opacity: .75;
}
.dense-list {
  clear: both;
  columns: 2 340px;
  column-gap: clamp(44px, 5vw, 72px);
  display: block;
  padding-top: 8px;
}
.dense-list li {
  break-inside: avoid;
  margin-bottom: 13px;
}
.after-list {
  clear: both;
  padding-top: 16px;
}
blockquote {
  margin: 38px 0;
  padding-left: 28px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  line-height: 1.36;
  color: var(--ink);
}
blockquote p { margin: 0; color: var(--ink) !important; }
blockquote p + p { margin-top: 7px; }
.pull-line,
.emphasis-line {
  font-family: var(--font-heading);
  color: var(--ink) !important;
}
.pull-line {
  font-size: clamp(30px, 3vw, 39px);
  font-style: italic;
  line-height: 1.2;
  margin-block: 36px;
}
.emphasis-line {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.24;
  margin-top: 42px;
}

.structured-section {
  display: grid;
  gap: 60px;
}
.section-intro { max-width: 800px; }
.section-intro p {
  font-size: 19px;
  max-width: 720px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 7vw, 92px);
}
.service-grid article {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}
.service-grid p {
  font-size: 17.25px;
  line-height: 1.72;
}
.service-grid a,
.fit-note a {
  color: var(--ink);
  text-decoration-color: var(--moss);
  text-underline-offset: 5px;
}
.service-grid a {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
}
.fit-note {
  border-top: 1px solid var(--rule);
  padding-top: 30px;
  margin: 0;
  font-size: 16px;
}
.narrow-section {
  max-width: 960px;
}
.closing-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 600px);
  gap: clamp(44px, 8vw, 100px);
  align-items: start;
}
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 42px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  color: var(--muted);
  font-size: 13px;
}
.footer-inner strong {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink);
  font-size: 16px;
}
.prototype-note { max-width: 420px; text-align: right; }

@media (max-width: 1100px) {
  :root {
    --wrap: min(100vw - 42px, 820px);
    --section-pad: 82px;
  }
  .nav { display: none; }
  .header-inner { min-height: 68px; }
  .hero-below,
  .service-grid,
  .closing-panel {
    grid-template-columns: 1fr;
  }
  .hero-below {
    gap: 42px;
    justify-items: center;
  }
  .hero-copy .copy { max-width: 720px; }
  .portrait-figure { max-width: 340px; }
  .media-right .section-kicker,
  .media-right h2,
  .media-left .section-kicker,
  .media-left h2,
  .permanent-section.media-right .section-kicker,
  .permanent-section.media-right h2 {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .art-wrap,
  .art-left,
  .art-right,
  .art-wrap-small {
    float: none;
    width: min(100%, 560px);
    margin: 0 auto 44px;
    shape-outside: none;
  }
  .art-feature { width: min(100%, 660px); }
  .dense-list {
    clear: none;
    columns: 1;
  }
  h1 { font-size: clamp(44px, 10vw, 72px); }
  h2 { font-size: clamp(36px, 8vw, 56px); }
  .footer-inner { display: block; }
  .prototype-note { text-align: left; margin-top: 18px; }
}


/* V4: manually composed Section 4 / Insight isn't enough
   This section deliberately avoids automatic shape wrapping. The copy is split
   into semantic blocks and placed into the illustration's negative space, which
   gives a more controlled editorial / illustrated-book composition. */
.insight-v4 {
  padding-block: clamp(92px, 8.4vw, 128px) clamp(104px, 8.8vw, 138px);
}

.insight-editorial {
  max-width: 1240px;
}

.insight-editorial h2 {
  margin-bottom: clamp(32px, 3.8vw, 50px);
}

.insight-topline {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(360px, 480px);
  gap: clamp(54px, 7vw, 94px);
  align-items: start;
}

.insight-intro-copy {
  max-width: 720px;
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.52;
}

.insight-desk-figure,
.insight-hand-figure {
  margin: 0;
}

.insight-desk-figure {
  width: min(100%, 480px);
  justify-self: end;
  padding-top: clamp(4px, 1.4vw, 22px);
}

.insight-desk-figure img,
.insight-hand-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.insight-pivot-row {
  display: grid;
  grid-template-columns: minmax(260px, 390px) minmax(0, 565px);
  gap: clamp(68px, 9vw, 128px);
  align-items: center;
  margin-top: clamp(42px, 5vw, 74px);
  margin-left: clamp(28px, 4vw, 68px);
}

.insight-hand-figure {
  width: min(100%, 360px);
  justify-self: center;
}

.insight-pivot-copy {
  max-width: 565px;
  font-size: clamp(19px, 1.25vw, 20px);
  line-height: 1.50;
}

.insight-v4 .emphasis-line {
  font-size: clamp(27px, 2.3vw, 34px);
  line-height: 1.18;
  margin: 0 0 28px;
}

.insight-v4 strong {
  font-weight: 650;
  letter-spacing: 0.015em;
}

.insight-close-copy {
  max-width: 980px;
  margin-top: clamp(54px, 6.2vw, 84px);
  margin-left: clamp(28px, 3vw, 48px);
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .insight-topline,
  .insight-pivot-row {
    grid-template-columns: 1fr;
  }

  .insight-topline {
    gap: 34px;
  }

  .insight-desk-figure {
    justify-self: center;
    width: min(100%, 520px);
    padding-top: 0;
  }

  .insight-pivot-row {
    gap: 32px;
    margin-top: 46px;
    margin-left: 0;
  }

  .insight-hand-figure {
    width: min(100%, 360px);
    justify-self: start;
  }

  .insight-close-copy {
    margin-left: 0;
  }
}

/* V5.2: Section 5 composition refinement.
   Keeps the corrected V5.1 pivot placement, but restores the V5 behaviour where
   intro and closing copy are allowed to extend into the illustration field.
   This is a composed editorial layout rather than a conventional left-column/right-image grid. */
.permanent-v5 {
  padding-block: clamp(96px, 8.6vw, 134px) clamp(106px, 9.2vw, 146px);
}

.permanent-editorial {
  width: min(1360px, calc(100vw - 72px));
  max-width: none;
}

.permanent-editorial h2 {
  max-width: 790px;
  margin-bottom: clamp(38px, 4.4vw, 64px);
}

.permanent-composition {
  position: relative;
  min-height: clamp(610px, 52vw, 735px);
  padding-top: clamp(4px, 1vw, 18px);
}

.permanent-figure {
  position: absolute;
  z-index: 1;
  right: clamp(-16px, 1.4vw, 20px);
  top: clamp(0px, 1.2vw, 18px);
  width: clamp(630px, 51vw, 770px);
  margin: 0;
}

.permanent-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.permanent-intro-copy,
.permanent-pivot-copy,
.permanent-close-copy {
  position: relative;
  z-index: 2;
}

/* Wider than a left column: lets the first block reach into the transparent
   image field, without treating the PNG as a rectangular box. */
.permanent-intro-copy {
  max-width: clamp(820px, 62vw, 930px);
  font-size: clamp(19px, 1.3vw, 20px);
  line-height: 1.54;
  padding-top: clamp(6px, 1.2vw, 18px);
}

/* Keep the pivot safely left of the figure. The previous V5 overlap was the problem. */
.permanent-pivot-copy {
  max-width: 760px;
  margin-top: clamp(56px, 6vw, 88px);
  margin-left: 0;
}

.permanent-v5 .pull-line {
  font-family: var(--font-heading);
  font-size: clamp(31px, 3vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* Same rule as the intro block, but lower and slightly indented: the copy moves
   toward the illustration rather than snapping back to the original left column. */
.permanent-close-copy {
  max-width: clamp(780px, 56vw, 900px);
  margin-top: clamp(70px, 7.6vw, 112px);
  margin-left: clamp(140px, 15vw, 245px);
  font-size: clamp(19px, 1.3vw, 20px);
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .permanent-editorial {
    width: var(--wrap);
  }

  .permanent-composition {
    min-height: 0;
    display: grid;
    gap: 34px;
  }

  .permanent-figure {
    position: relative;
    right: auto;
    top: auto;
    width: min(100%, 720px);
    justify-self: center;
    order: 2;
  }

  .permanent-intro-copy {
    order: 1;
    max-width: 820px;
  }

  .permanent-pivot-copy {
    order: 3;
    margin: 0;
    max-width: 780px;
  }

  .permanent-close-copy {
    order: 4;
    margin: 0;
    max-width: 820px;
  }
}


/* V5.3: Section 5 correction after review.
   - Opening sentence starts a new line after "lives change."
   - Pivot line is deliberately broken so "permanent" starts on its own line.
   - Closing copy returns to the same left margin as the other text and avoids
     running under the illustration. */
.permanent-v53 .permanent-intro-copy {
  max-width: clamp(740px, 56vw, 830px);
}

.permanent-v53 .permanent-pivot-copy {
  max-width: 700px;
  margin-top: clamp(54px, 5.8vw, 84px);
  margin-left: 0;
}

.permanent-v53 .pull-line {
  font-size: clamp(33px, 3.1vw, 46px);
  line-height: 1.12;
}

.permanent-v53 .permanent-close-copy {
  max-width: clamp(700px, 52vw, 790px);
  margin-left: 0;
  margin-top: clamp(58px, 6.4vw, 92px);
}

@media (max-width: 1180px) {
  .permanent-v53 .permanent-intro-copy,
  .permanent-v53 .permanent-close-copy,
  .permanent-v53 .permanent-pivot-copy {
    max-width: 820px;
    margin-left: 0;
  }
}


/* V5.4: Section 5 closing-copy correction after review.
   Keeps the block aligned with the other left text blocks and controls the
   line breaks so the text does not encroach into the illustration field. */
.permanent-v54 .permanent-close-copy {
  max-width: 680px;
  margin-left: 0;
  margin-top: clamp(58px, 6.4vw, 92px);
}

.permanent-v54 .permanent-close-copy p {
  max-width: 680px;
}

@media (max-width: 1180px) {
  .permanent-v54 .permanent-close-copy,
  .permanent-v54 .permanent-close-copy p {
    max-width: 820px;
  }
}

@media (max-width: 760px) {
  .permanent-v54 .permanent-close-copy br {
    display: none;
  }
}


/* V6: Sections 2 and 3 list-section composition.
   Long recognition/example lists are not wrapped around illustrations. Instead,
   the opening copy and illustration are composed as a book-plate spread, the
   list becomes a wider two-column typographic object, and the closing material
   returns to a calmer editorial measure. */
.list-composed {
  padding-block: clamp(96px, 8.8vw, 136px) clamp(104px, 9vw, 146px);
}

.list-editorial {
  max-width: 1240px;
}

.list-editorial h2 {
  margin-bottom: clamp(34px, 4.2vw, 58px);
}

.list-section-opening {
  display: grid;
  align-items: start;
  gap: clamp(54px, 7vw, 96px);
}

.patterns-opening {
  grid-template-columns: minmax(0, 700px) minmax(320px, 440px);
}

.problem-opening {
  grid-template-columns: minmax(300px, 420px) minmax(0, 700px);
  align-items: center;
}

.opening-copy {
  max-width: 700px;
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.55;
}

.list-section-figure {
  margin: 0;
}

.list-section-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.patterns-figure {
  width: min(100%, 430px);
  justify-self: end;
  margin-top: clamp(-12px, -1vw, 0px);
}

.problem-figure {
  width: min(100%, 420px);
  justify-self: start;
}

.list-field {
  margin-top: clamp(54px, 6.2vw, 86px);
  padding-block: clamp(34px, 4vw, 50px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.list-lead {
  max-width: 720px;
  margin: 0 0 clamp(26px, 3vw, 38px);
  color: color-mix(in srgb, var(--ink), transparent 10%);
  font-size: clamp(19px, 1.26vw, 20px);
  line-height: 1.55;
}

.editorial-two-column-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(56px, 7vw, 96px);
  row-gap: clamp(15px, 1.4vw, 21px);
  margin: 0;
  padding: 0;
}

.editorial-two-column-list li {
  font-size: clamp(17.5px, 1.14vw, 18.5px);
  line-height: 1.62;
  padding-left: 24px;
}

.editorial-two-column-list li::before {
  top: .78em;
}

.list-closing-copy {
  max-width: 820px;
  margin-top: clamp(54px, 6vw, 82px);
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.55;
}

.patterns-closing blockquote {
  margin: clamp(30px, 3.6vw, 46px) 0;
  max-width: 560px;
}

.problem-coda {
  max-width: 920px;
  margin-top: clamp(58px, 6.6vw, 92px);
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 76%);
  color: var(--ink);
}

.problem-coda p {
  margin: 0;
  color: var(--ink);
}

.problem-coda p:first-child,
.problem-coda p:last-child {
  font-family: var(--font-heading);
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.problem-coda p + p {
  margin-top: 18px;
}

.problem-coda p:nth-child(2) {
  max-width: 760px;
  font-size: clamp(18.5px, 1.24vw, 20px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink), transparent 10%);
}

@media (max-width: 960px) {
  .patterns-opening,
  .problem-opening {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .patterns-figure,
  .problem-figure {
    justify-self: start;
    width: min(100%, 520px);
    margin-top: 0;
  }

  .editorial-two-column-list {
    grid-template-columns: 1fr;
    row-gap: 13px;
  }

  .list-field {
    margin-top: 46px;
  }
}


/* V6.1: list-section refinement.
   Enlarges the Section 2 and 3 illustrations and gives the long-list fields a
   quiet inset material background, so the lists read as deliberate typographic
   objects rather than text separated only by hairlines. */
.patterns-figure {
  width: min(100%, 500px);
}

.problem-figure {
  width: min(100%, 560px);
}

.problem-opening {
  grid-template-columns: minmax(360px, 560px) minmax(0, 660px);
  gap: clamp(60px, 7.5vw, 110px);
}

.patterns-opening {
  grid-template-columns: minmax(0, 690px) minmax(360px, 500px);
  gap: clamp(58px, 7vw, 102px);
}

.list-field {
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(36px, 4.2vw, 56px) clamp(38px, 5vw, 66px);
  background: color-mix(in srgb, var(--white), transparent 42%);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 86%);
}

.surface-stone .list-field {
  background: color-mix(in srgb, var(--chalk), transparent 22%);
  border-color: color-mix(in srgb, var(--ink), transparent 84%);
}

.surface-chalk .list-field {
  background: color-mix(in srgb, var(--white), transparent 36%);
}

@media (max-width: 960px) {
  .patterns-figure,
  .problem-figure {
    width: min(100%, 560px);
  }

  .list-field {
    padding-inline: clamp(24px, 6vw, 38px);
  }
}


/* V6.2: Section 3 refinement.
   The list panel now does enough separation work, so the coda no longer needs
   an additional rule below the panel. */
.problem-coda {
  border-top: 0;
  padding-top: 0;
}


/* V6.3: replace hard-edged list panels with a soft tonal wash.
   The list still reads as a distinct typographic field, but the background
   fades back into the page rather than appearing as a bordered component. */
.list-field {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  padding: clamp(38px, 4.4vw, 58px) clamp(40px, 5vw, 68px);
}

.list-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-12px, -1.1vw, -6px) clamp(-22px, -1.7vw, -10px);
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--white), transparent 36%) 0%,
      color-mix(in srgb, var(--white), transparent 42%) 48%,
      transparent 78%
    );
}

.surface-stone .list-field::before {
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--chalk), transparent 26%) 0%,
      color-mix(in srgb, var(--chalk), transparent 38%) 50%,
      transparent 78%
    );
}

.surface-chalk .list-field::before {
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--white), transparent 32%) 0%,
      color-mix(in srgb, var(--white), transparent 44%) 50%,
      transparent 78%
    );
}

@media (max-width: 960px) {
  .list-field {
    padding-inline: clamp(22px, 5.5vw, 36px);
  }

  .list-field::before {
    inset: -8px -10px;
  }
}


/* V6.4: correctly remove the hard list panel.
   V6.3's generic .list-field rule was being overridden by earlier, more
   specific .surface-stone/.surface-chalk list-field rules. These selectors
   explicitly neutralise the hard rectangle and replace it with a blurred wash. */
.list-composed .list-field,
.surface-stone .list-field,
.surface-chalk .list-field {
  background: transparent;
  border: 0;
}

.list-composed .list-field {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.list-composed .list-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: clamp(-24px, -2vw, -14px) clamp(-44px, -3.6vw, -24px);
  border-radius: 48px;
  filter: blur(22px);
  opacity: .78;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--white), transparent 10%) 0%,
      color-mix(in srgb, var(--white), transparent 22%) 42%,
      color-mix(in srgb, var(--white), transparent 54%) 64%,
      transparent 86%
    );
}

.surface-stone .list-field::before {
  opacity: .82;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--chalk), transparent 8%) 0%,
      color-mix(in srgb, var(--chalk), transparent 26%) 44%,
      color-mix(in srgb, var(--chalk), transparent 58%) 66%,
      transparent 88%
    );
}

.surface-chalk .list-field::before {
  opacity: .78;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--white), transparent 10%) 0%,
      color-mix(in srgb, var(--white), transparent 28%) 44%,
      color-mix(in srgb, var(--white), transparent 62%) 66%,
      transparent 88%
    );
}

@media (max-width: 960px) {
  .list-composed .list-field::before {
    inset: -18px -18px;
    border-radius: 32px;
    filter: blur(16px);
  }
}


/* V6.5: stronger soft-wash list field.
   V6.4 removed the hard rectangle but the tonal distinction was too subtle.
   This keeps the edge feathered while making the list field visibly distinct. */
.list-composed .list-field,
.surface-stone .list-field,
.surface-chalk .list-field {
  background: transparent;
  border: 0;
}

.list-composed .list-field {
  position: relative;
  isolation: isolate;
}

.list-composed .list-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: clamp(-18px, -1.6vw, -10px) clamp(-34px, -2.8vw, -18px);
  border-radius: 34px;
  filter: blur(10px);
  opacity: 1;
  background: color-mix(in srgb, var(--white), transparent 22%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 54%, rgba(0,0,0,.7) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 54%, rgba(0,0,0,.7) 70%, transparent 100%);
}

.surface-chalk .list-field::before {
  background: color-mix(in srgb, var(--white), transparent 18%);
}

.surface-stone .list-field::before {
  background: color-mix(in srgb, var(--chalk), transparent 12%);
}

@media (max-width: 960px) {
  .list-composed .list-field::before {
    inset: -14px -14px;
    border-radius: 26px;
    filter: blur(8px);
  }
}


/* V6.6: replace oval/radial list glow with a regular soft-edged rectangle.
   The previous radial wash created an imprecise oval field and clipped-looking
   corners. This keeps a rectangular reading field with a uniform feather. */
.list-composed .list-field,
.surface-stone .list-field,
.surface-chalk .list-field {
  background: transparent;
  border: 0;
}

.list-composed .list-field {
  position: relative;
  isolation: isolate;
}

.list-composed .list-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: clamp(-8px, -0.8vw, -5px) clamp(-22px, -1.8vw, -12px);
  border-radius: 14px;
  background: color-mix(in srgb, var(--white), transparent 26%);
  box-shadow: 0 0 34px 24px color-mix(in srgb, var(--white), transparent 42%);
  filter: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.surface-chalk .list-field::before {
  background: color-mix(in srgb, var(--white), transparent 24%);
  box-shadow: 0 0 34px 24px color-mix(in srgb, var(--white), transparent 46%);
}

.surface-stone .list-field::before {
  background: color-mix(in srgb, var(--chalk), transparent 18%);
  box-shadow: 0 0 34px 24px color-mix(in srgb, var(--chalk), transparent 42%);
}

@media (max-width: 960px) {
  .list-composed .list-field::before {
    inset: -6px -10px;
    border-radius: 12px;
    box-shadow: 0 0 26px 18px color-mix(in srgb, var(--white), transparent 46%);
  }

  .surface-stone .list-field::before {
    box-shadow: 0 0 26px 18px color-mix(in srgb, var(--chalk), transparent 44%);
  }
}


/* V6.7: masked soft-rectangle list field.
   Previous versions used a solid rectangle plus outer softening, which still
   left a readable hard inner edge. This version fades the panel itself: solid
   in the centre, then gradually transparent across an even edge band. */
.list-composed .list-field,
.surface-stone .list-field,
.surface-chalk .list-field {
  background: transparent;
  border: 0;
}

.list-composed .list-field {
  --list-fade-distance: 42px;
  position: relative;
  isolation: isolate;
}

.list-composed .list-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: calc(var(--list-fade-distance) * -0.55) calc(var(--list-fade-distance) * -0.75);
  border-radius: 10px;
  background: color-mix(in srgb, var(--white), transparent 16%);
  box-shadow: none;
  filter: none;
  opacity: 1;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 21px, #000 var(--list-fade-distance), #000 calc(100% - var(--list-fade-distance)), rgba(0,0,0,.5) calc(100% - 21px), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 21px, #000 var(--list-fade-distance), #000 calc(100% - var(--list-fade-distance)), rgba(0,0,0,.5) calc(100% - 21px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.5) 21px, #000 var(--list-fade-distance), #000 calc(100% - var(--list-fade-distance)), rgba(0,0,0,.5) calc(100% - 21px), transparent 100%),
    linear-gradient(to bottom, transparent 0, rgba(0,0,0,.5) 21px, #000 var(--list-fade-distance), #000 calc(100% - var(--list-fade-distance)), rgba(0,0,0,.5) calc(100% - 21px), transparent 100%);
  mask-composite: intersect;
}

.surface-chalk .list-field::before {
  background: color-mix(in srgb, var(--white), transparent 14%);
}

.surface-stone .list-field::before {
  background: color-mix(in srgb, var(--chalk), transparent 8%);
}

@media (max-width: 960px) {
  .list-composed .list-field {
    --list-fade-distance: 30px;
  }

  .list-composed .list-field::before {
    inset: calc(var(--list-fade-distance) * -0.45);
  }
}


/* V7: Section 6 / Working with me.
   Reframes the two options as an editorial comparison rather than cards or a
   pricing-table pattern. Uses rules, spacing and hierarchy rather than boxes. */
.working-v7 {
  padding-block: clamp(96px, 8.6vw, 134px) clamp(104px, 9vw, 146px);
}

.working-editorial {
  max-width: 1180px;
}

.working-heading {
  max-width: 790px;
  margin-bottom: clamp(58px, 6.6vw, 88px);
}

.working-heading h2 {
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

.working-heading p:not(.section-kicker) {
  max-width: 720px;
  margin: 0;
  color: color-mix(in srgb, var(--ink), transparent 12%);
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.55;
}

.working-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(64px, 8vw, 118px);
  position: relative;
  align-items: start;
}

.working-comparison::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--ink), transparent 82%) 12%,
    color-mix(in srgb, var(--ink), transparent 82%) 88%,
    transparent 100%
  );
}

.working-option {
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 82%);
  padding-top: clamp(28px, 3.2vw, 40px);
}

.option-label {
  margin: 0 0 18px;
  color: var(--moss);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}

.working-option h3 {
  font-size: clamp(31px, 3.1vw, 42px);
  line-height: 1.08;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

.option-copy {
  max-width: 520px;
  font-size: clamp(17.5px, 1.17vw, 18.75px);
  line-height: 1.64;
}

.option-copy p {
  color: color-mix(in srgb, var(--ink), transparent 15%);
}

.text-link {
  display: inline-block;
  margin-top: clamp(24px, 3vw, 36px);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-decoration-line: underline;
  text-decoration-color: var(--moss);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.text-link:hover {
  color: color-mix(in srgb, var(--ink), transparent 22%);
}

.working-fit-note {
  max-width: 760px;
  margin: clamp(62px, 7vw, 92px) 0 0;
  padding-top: clamp(28px, 3.2vw, 40px);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  color: color-mix(in srgb, var(--ink), transparent 18%);
  font-size: clamp(17.5px, 1.18vw, 19px);
  line-height: 1.55;
}

.working-fit-note a {
  color: var(--ink);
  text-decoration-color: var(--moss);
  text-underline-offset: 5px;
}

@media (max-width: 900px) {
  .working-comparison {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .working-comparison::before {
    display: none;
  }

  .option-copy {
    max-width: 720px;
  }

  .working-fit-note {
    margin-top: 56px;
  }
}


/* V8: Section 7 + closing CTA.
   Section 7 is intentionally restrained because About Me, FAQ and My Process
   can carry the more detailed orientation. On the homepage it acts as a concise
   fit check rather than another heavy explanatory block. */
.who-v8 {
  padding-block: clamp(96px, 8.4vw, 132px) clamp(104px, 9vw, 144px);
}

.who-editorial {
  max-width: 1060px;
}

.who-editorial h2 {
  margin-bottom: clamp(34px, 4vw, 54px);
}

.who-copy {
  max-width: 860px;
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.6;
}

.who-copy p:first-child {
  max-width: 920px;
}

.who-copy p:nth-child(2) {
  max-width: 760px;
  margin-left: clamp(0px, 5vw, 72px);
}

.who-copy p:nth-child(3) {
  max-width: 720px;
  margin-left: clamp(0px, 9vw, 132px);
  color: color-mix(in srgb, var(--ink), transparent 20%);
}

.who-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 4vw, 54px);
  margin-top: clamp(54px, 6vw, 84px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
}

.who-page-links a {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-color: var(--moss);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.closing-v8 {
  padding-block: clamp(94px, 8vw, 128px);
}

.closing-editorial {
  max-width: 1040px;
}

.closing-editorial h2 {
  max-width: 850px;
  margin-bottom: clamp(30px, 3.5vw, 48px);
}

.closing-copy {
  max-width: 620px;
  margin-bottom: clamp(34px, 4vw, 52px);
}

.closing-copy p {
  margin: 0;
  color: color-mix(in srgb, var(--ink), transparent 18%);
  font-size: clamp(18px, 1.22vw, 19.5px);
  line-height: 1.58;
}

@media (max-width: 820px) {
  .who-copy p:nth-child(2),
  .who-copy p:nth-child(3) {
    margin-left: 0;
  }

  .who-page-links {
    display: grid;
    gap: 18px;
  }
}


/* V8.1: closing CTA copy refinement.
   Reframes the final section around the visitor's practical question:
   where do I start, and how do I find out whether this is a good fit? */
.closing-v8-1 .closing-editorial h2 {
  max-width: 720px;
}

.closing-v8-1 .closing-copy {
  max-width: 720px;
}


/* V9.0: whole-page rhythm, optical centring and typography pass.
   This pass does not redesign individual sections. It tightens the reading
   rhythm, reduces excess air before section titles, moves headings away from
   decorative serif/italic treatment, and standardises pivot-line behaviour. */

:root {
  --font-body: 'Inter', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: var(--font-body);
  --wrap: min(1160px, calc(100vw - 96px));
  --section-pad: clamp(76px, 7.2vw, 112px);
}

/* General rhythm */
.section {
  padding-block: clamp(76px, 7.2vw, 112px) clamp(84px, 7.8vw, 122px);
}

.hero {
  padding-block: clamp(84px, 8vw, 128px) clamp(90px, 8.4vw, 134px);
}

.list-composed,
.insight-v4,
.permanent-v5,
.working-v7,
.who-v8,
.closing-v8 {
  padding-block: clamp(76px, 7.1vw, 112px) clamp(84px, 7.8vw, 122px);
}

/* Type: reduce the decorative serif/italic layer and keep the site more precise. */
body {
  line-height: 1.68;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.028em;
}

h1 {
  font-size: clamp(50px, 5.9vw, 82px);
  line-height: 1.04;
}

.hero-title-emphasis {
  font-weight: 500;
}

h2 {
  font-size: clamp(40px, 4.7vw, 62px);
  line-height: 1.05;
  margin-bottom: clamp(26px, 3vw, 42px);
}

h3 {
  font-weight: 400;
}

.brand-name,
.footer-inner strong {
  font-family: var(--font-heading);
}

.section-kicker {
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: .14em;
}

/* Wrapper consistency / optical centring. */
.list-editorial,
.insight-editorial,
.working-editorial,
.who-editorial,
.closing-editorial {
  max-width: 1160px;
}

.permanent-editorial {
  width: min(1240px, calc(100vw - 96px));
}

/* Tighten inconsistent section-title to copy gaps, especially Sections 02 and 05. */
.list-editorial h2 {
  margin-bottom: clamp(24px, 2.8vw, 38px);
}

.patterns-composed .list-editorial h2,
.problem-composed .list-editorial h2 {
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.permanent-editorial h2 {
  max-width: 760px;
  margin-bottom: clamp(22px, 2.6vw, 36px);
}

.insight-editorial h2,
.working-heading h2,
.who-editorial h2,
.closing-editorial h2 {
  margin-bottom: clamp(24px, 2.8vw, 38px);
}

.working-heading {
  margin-bottom: clamp(46px, 5vw, 68px);
}

/* Keep opening compositions spacious, but remove avoidable dead air. */
.list-section-opening {
  gap: clamp(42px, 5.8vw, 78px);
}

.list-field {
  margin-top: clamp(42px, 5vw, 68px);
}

.list-closing-copy {
  margin-top: clamp(44px, 5vw, 68px);
}

.problem-coda {
  margin-top: clamp(44px, 5vw, 70px);
}

.insight-pivot-row {
  margin-top: clamp(36px, 4.4vw, 62px);
}

.insight-close-copy {
  margin-top: clamp(42px, 5vw, 68px);
}

.permanent-composition {
  padding-top: 0;
}

.permanent-v53 .permanent-pivot-copy {
  margin-top: clamp(42px, 5vw, 68px);
}

.permanent-v54 .permanent-close-copy {
  margin-top: clamp(44px, 5.2vw, 72px);
}

/* Remove the hard-to-read italic/editorial serif treatment from quotes and pivots. */
blockquote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(21px, 1.7vw, 25px);
  line-height: 1.38;
  margin: clamp(28px, 3vw, 40px) 0;
  padding-left: 24px;
}

/* Pivot-line system:
   A pivot line is where the section changes gear. It should be recognisable,
   but not decorative. */
.pull-line,
.emphasis-line,
.problem-coda p:first-child {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  color: var(--ink) !important;
  font-size: clamp(25px, 2.35vw, 35px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(22px, 2.4vw, 30px);
}

.problem-coda p:first-child {
  margin-bottom: 18px;
}

.problem-coda p:last-child {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.28vw, 20px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
}

.insight-v4 .emphasis-line,
.permanent-v5 .pull-line,
.permanent-v53 .pull-line {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(25px, 2.35vw, 35px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(22px, 2.4vw, 30px);
}

.permanent-v5 .pull-line,
.permanent-v53 .pull-line {
  margin-bottom: 0;
}

/* Closing CTA: user's revised copy, set as a quiet final invitation rather than a form. */
.closing-v9 .closing-copy {
  max-width: 780px;
}

.closing-v9 .closing-copy p + p {
  margin-top: 18px;
}

.closing-v9 .button {
  margin-top: clamp(8px, 1.2vw, 16px);
}

/* Keep the current Section 7 onward links, but make them quieter in the journey. */
.who-page-links {
  margin-top: clamp(42px, 5vw, 66px);
}

@media (max-width: 1100px) {
  :root {
    --wrap: min(100vw - 42px, 820px);
    --section-pad: 76px;
  }

  .permanent-editorial {
    width: var(--wrap);
  }
}

@media (max-width: 760px) {
  :root {
    --wrap: min(100vw - 32px, 680px);
  }

  .section,
  .list-composed,
  .insight-v4,
  .permanent-v5,
  .working-v7,
  .who-v8,
  .closing-v8 {
    padding-block: 66px 74px;
  }

  h1 {
    font-size: clamp(42px, 11vw, 58px);
  }

  h2 {
    font-size: clamp(34px, 8.8vw, 48px);
  }

  .section-kicker {
    margin-bottom: 10px;
  }
}


/* V9.1: response to rhythm/type review.
   - Keeps the improved sans-serif direction.
   - Softens the hero title and restores contrast between the two title lines.
   - Removes visible section numbering from the main flow.
   - Cleans Section 03 background.
   - Normalises the Section 02 quoted self-labels.
   - Tightens the end of Section 05.
   - Restores Section 03 coda balance. */

/* 1. Hero: less bold overall, clearer contrast between the two clauses. */
h1 {
  font-weight: 300;
  letter-spacing: -0.04em;
}

h1 span:first-child {
  font-weight: 300;
  color: color-mix(in srgb, var(--ink), transparent 28%);
}

.hero-title-emphasis {
  display: block;
  margin-top: .06em;
  font-weight: 400;
  color: var(--ink);
}

/* 2. Section 03 background: align with Section 02's cleaner chalk/white field. */
.problem-composed {
  background: var(--chalk);
}

/* 3. Section 02 self-label quote block: no extra introduced text size. */
.patterns-closing blockquote,
blockquote {
  font-family: var(--font-body);
  font-style: normal;
}

.patterns-closing blockquote {
  font-size: inherit;
  line-height: inherit;
  margin: 10px 0 18px;
  padding-left: 0;
}

.patterns-closing blockquote p {
  font-size: inherit;
  line-height: inherit;
  color: color-mix(in srgb, var(--ink), transparent 10%) !important;
}

.patterns-closing blockquote p + p {
  margin-top: 2px;
}

/* 4. Reduce excess air at the end of Section 05. */
.permanent-v5 {
  padding-bottom: clamp(54px, 5.2vw, 82px);
}

.permanent-v54 .permanent-close-copy {
  margin-top: clamp(34px, 4vw, 56px);
}

/* 5. Section 03 coda: first and final lines should carry the same visual weight. */
.problem-coda p:first-child,
.problem-coda p:last-child {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  color: var(--ink) !important;
  font-size: clamp(25px, 2.35vw, 35px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.problem-coda p:first-child {
  margin-bottom: 18px;
}

.problem-coda p:last-child {
  margin-top: clamp(18px, 2vw, 26px);
  margin-bottom: 0;
}

/* 6. Section numbering has been removed from HTML. Reduce any residual title delay. */
.list-editorial > h2,
.insight-editorial > h2,
.permanent-editorial > h2,
.who-editorial > h2 {
  margin-top: 0;
}

.working-heading {
  margin-bottom: clamp(42px, 4.8vw, 64px);
}

.closing-v9 .closing-editorial h2 {
  margin-top: 0;
}

@media (max-width: 760px) {
  .hero-title-emphasis {
    margin-top: .04em;
  }
}


/* V9.2: targeted patch.
   1. Restore Section 03 to the previous darker beige section background.
   2. Remove remaining excess air at the end of Section 05 by reducing the
      artificial composition height and bottom padding. */

/* Section 03 background restored. */
.problem-composed {
  background: var(--stone);
}

/* Section 05 end-spacing correction. */
.permanent-v5 {
  padding-bottom: clamp(36px, 3.8vw, 58px);
}

.permanent-composition {
  min-height: clamp(500px, 45vw, 610px);
}

.permanent-v53 .permanent-pivot-copy {
  margin-top: clamp(34px, 4vw, 56px);
}

.permanent-v54 .permanent-close-copy {
  margin-top: clamp(28px, 3.5vw, 46px);
}

@media (max-width: 1180px) {
  .permanent-composition {
    min-height: 0;
  }

  .permanent-v5 {
    padding-bottom: clamp(54px, 6vw, 78px);
  }
}


/* V9.3: Section 05 final line break.
   Adds paragraph spacing before "By learning new strategies..." to prevent the
   line from visually crowding the illustration and to match the section rhythm. */
.permanent-close-copy .permanent-final-line {
  margin-top: clamp(18px, 2vw, 26px);
}



/* V10: supplementary page skeletons and whole-site navigation.
   This pass adds static pages without final diagram design or production form integration. */
.site-nav {
  gap: clamp(14px, 2.2vw, 28px);
}
.site-nav a[aria-current="page"],
.nav-parent[aria-current="page"] {
  color: var(--ink);
}
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-parent::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .75;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 205px;
  display: grid;
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(34, 42, 57, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-menu a {
  color: var(--muted);
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--ink); }

.page-hero {
  padding-block: clamp(78px, 8vw, 124px) clamp(58px, 5.8vw, 88px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 28%);
}
.page-hero-inner {
  max-width: 980px;
}
.page-hero h1 {
  max-width: 980px;
  margin: 0;
}
.page-intro {
  max-width: 680px;
  margin: clamp(24px, 2.8vw, 36px) 0 0;
  color: color-mix(in srgb, var(--ink), transparent 18%);
  font-size: clamp(19px, 1.3vw, 21px);
  line-height: 1.55;
}
.page-section {
  padding-block: clamp(74px, 7vw, 112px) clamp(82px, 7.6vw, 122px);
}
.page-column {
  max-width: 820px;
}
.page-copy {
  max-width: 820px;
  font-size: clamp(18px, 1.22vw, 19.5px);
  line-height: 1.68;
}
.page-copy h2 {
  margin-bottom: clamp(28px, 3.2vw, 42px);
}
.page-copy h3 {
  font-size: clamp(25px, 2.2vw, 32px);
  line-height: 1.18;
  margin-top: clamp(40px, 4.8vw, 66px);
  margin-bottom: 18px;
}
.page-copy h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.page-copy p,
.faq-answer p,
.contact-copy p,
.cta-strip p,
.footer-line {
  color: color-mix(in srgb, var(--ink), transparent 14%);
}
.page-copy .quiet-list {
  margin: 24px 0 28px;
}
.page-copy .quiet-list li {
  font-size: clamp(17px, 1.1vw, 18.25px);
}
.about-layout {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 820px);
  gap: clamp(54px, 8vw, 116px);
  align-items: start;
}
.about-avatar {
  margin: 6px 0 0;
  position: sticky;
  top: 112px;
}
.about-avatar img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.diagram-placeholder {
  min-height: clamp(180px, 20vw, 260px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 80%);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--ink), transparent 88%) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink), transparent 88%) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--ink);
}
.diagram-placeholder span {
  display: block;
  margin-bottom: 8px;
  color: var(--moss);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.diagram-placeholder strong {
  display: block;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.inline-placeholder {
  margin-block: clamp(38px, 5vw, 64px);
}
.short-version-label {
  margin: clamp(24px, 3vw, 38px) 0 12px;
}
.short-version {
  margin: 0 0 clamp(32px, 4vw, 50px);
  max-width: 820px;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.8vw, 34px);
  background: var(--white);
  border: 0;
  box-shadow: none;
}
.short-version p {
  margin: 0;
}
.short-version p + p {
  margin-top: 14px;
}
.process-steps {
  display: grid;
  gap: clamp(36px, 4.8vw, 64px);
  margin-top: 30px;
}
.process-step {
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  padding-top: clamp(28px, 3.2vw, 40px);
}
.process-step h3 {
  margin-top: 0;
}
.intervention-block {
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  padding-top: clamp(28px, 3.2vw, 40px);
}
.intervention-block + .intervention-block {
  margin-top: clamp(34px, 4vw, 52px);
}
.problems-layout {
  max-width: 1100px;
}
.problem-group {
  margin-top: clamp(38px, 4.4vw, 58px);
}
.problem-group > h3 {
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 44px) clamp(48px, 6vw, 82px);
}
.problem-type {
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  padding-top: 22px;
}
.quote-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.quote-list li {
  color: color-mix(in srgb, var(--ink), transparent 18%);
  font-size: 17px;
  line-height: 1.55;
}
.faq-column {
  max-width: 920px;
}
.faq-list {
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 78%);
}
.faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
  padding-block: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(24px, 3vw, 34px) 42px clamp(24px, 3vw, 34px) 0;
  position: relative;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--moss);
  font-size: 26px;
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-answer {
  max-width: 780px;
  padding: 0 0 clamp(26px, 3vw, 38px);
  font-size: clamp(17.5px, 1.15vw, 18.75px);
  line-height: 1.68;
}
.faq-answer p { margin: 0; }
.faq-answer p + p { margin-top: 16px; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(360px, 590px);
  gap: clamp(54px, 8vw, 108px);
  align-items: start;
}
.contact-copy h2 {
  margin-bottom: 28px;
}
.small-note,
.form-note {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--muted), transparent 5%) !important;
}
.contact-form {
  display: grid;
  gap: 22px;
  padding: clamp(28px, 4vw, 48px);
  background: color-mix(in srgb, var(--white), transparent 18%);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
}
.contact-form label {
  display: grid;
  gap: 8px;
}
.contact-form span {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 78%);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
}
.contact-form textarea { resize: vertical; }
.form-note {
  margin: 4px 0 0;
}
.contact-form .button {
  justify-self: start;
  cursor: pointer;
  font-family: var(--font-body);
}
.page-cta {
  padding-block: clamp(68px, 6.2vw, 96px);
}
.cta-strip {
  max-width: 900px;
}
.cta-strip h2 {
  max-width: 760px;
  margin-bottom: 24px;
}
.cta-strip p {
  max-width: 700px;
  margin: 0 0 32px;
  font-size: clamp(18px, 1.22vw, 19.5px);
  line-height: 1.58;
}
.site-footer-v10 {
  align-items: start;
}
.footer-line {
  max-width: 480px;
  margin: 14px 0 0;
  line-height: 1.55;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
  max-width: 420px;
  text-align: right;
}
.footer-nav a {
  color: var(--muted);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--ink); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .header-inner {
    min-height: auto;
    padding-block: 18px;
    align-items: flex-start;
  }
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 20px;
    max-width: 680px;
  }
  .nav-menu {
    display: none;
  }
  .nav-parent::after {
    display: none;
  }
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .about-avatar {
    position: static;
    width: min(100%, 290px);
    margin-bottom: 10px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    display: grid;
    gap: 16px;
  }
  .nav {
    justify-content: flex-start;
    font-size: 12px;
  }
  .page-hero {
    padding-block: 62px 48px;
  }
  .page-section {
    padding-block: 62px 70px;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 24px;
  }
  .footer-nav {
    justify-content: flex-start;
    text-align: left;
    margin-top: 24px;
  }
}


/* V10.1 diagram trial */
.diagram-breakout {
  width: min(1500px, calc(100vw - 72px));
  margin: clamp(44px, 6vw, 78px) 0 clamp(44px, 6vw, 76px) 50%;
  transform: translateX(-50%);
}
.process-diagram {
  padding: 0;
}
.process-diagram img {
  width: 100%;
  height: auto;
  display: block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .diagram-breakout {
    width: calc(100vw - 32px);
    margin-left: 50%;
    overflow-x: auto;
  }
  .process-diagram img {
    min-width: 920px;
  }
}

/* V10.3 compact process diagram section trial
   Keeps the formation/change diagrams together, but reduces their visual authority:
   no figure labels, no coloured blocks, smaller type, white boxes, and one shared muted panel. */
.method-figures {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: clamp(42px, 5.2vw, 72px) clamp(44px, 5.4vw, 76px);
  padding-block: clamp(50px, 5.6vw, 76px);
  background: #dfe7e8;
  border-block: 1px solid color-mix(in srgb, var(--ink), transparent 86%);
}
.method-figures-inner {
  width: min(1220px, calc(100vw - 92px));
  margin-inline: auto;
  display: grid;
  gap: clamp(44px, 4.8vw, 64px);
}
.method-section-intro {
  max-width: 760px;
}
.method-section-intro h2,
.method-section-intro h3 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.method-section-intro p {
  margin: 0;
  max-width: 700px;
  color: color-mix(in srgb, var(--ink), transparent 14%);
  font-size: clamp(16.5px, 1.05vw, 18px);
  line-height: 1.58;
}
.method-figure {
  margin: 0;
}
.method-figure-heading {
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.method-figure-heading .figure-kicker {
  display: none;
}
.method-figure-heading h3 {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.25;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.method-figure-heading p:last-child {
  display: none;
}
.block-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 165px));
  column-gap: clamp(20px, 2vw, 28px);
  justify-content: center;
  row-gap: 22px;
  align-items: start;
}
.flow-step {
  position: relative;
  min-width: 0;
}
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 46px;
  width: calc(clamp(20px, 2vw, 28px) - 8px);
  border-top: 2px dotted #000;
}
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  left: calc(100% + clamp(20px, 2vw, 28px) - 11px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #000;
}
.flow-box {
  min-height: 84px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 11px 10px;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000, transparent 40%);
  color: #111;
  font-size: clamp(14px, .88vw, 16px);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: -0.01em;
  box-shadow: none;
}
.flow-step p {
  margin: 14px 0 0;
  color: #111;
  font-size: clamp(12.5px, .76vw, 14px);
  line-height: 1.38;
}
.flow-stack {
  display: grid;
  gap: 12px;
}
.flow-stack .flow-box {
  min-height: 68px;
}
.flow-stack p {
  margin-top: 2px;
}
.tone-blue,
.tone-stone,
.tone-sage,
.tone-mauve,
.tone-terracotta,
.tone-red {
  background: #fff;
}

@media (max-width: 1120px) {
  .method-figures-inner {
    width: min(980px, calc(100vw - 56px));
  }
  .block-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
  }
  .flow-step:not(:last-child)::before,
  .flow-step:not(:last-child)::after {
    display: none;
  }
  .flow-box {
    min-height: 82px;
  }
}

@media (max-width: 760px) {
  .method-figures {
    padding-block: 48px;
    margin-block: 38px 54px;
  }
  .method-figures-inner {
    width: calc(100vw - 32px);
    gap: 48px;
  }
  .block-flow {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .flow-step p {
    margin-top: 10px;
  }
}

/* V10.5 process diagram alignment and width refinement.
   Moves the mechanism bridge into the prose flow, aligns all diagram headings
   with the first box, and makes the desktop rows modestly narrower without
   reducing diagram text size. */
.mechanism-bridge {
  max-width: 760px;
  margin: 0 0 clamp(28px, 3.4vw, 42px);
  color: color-mix(in srgb, var(--ink), transparent 10%);
}

.method-figures-inner {
  width: min(1100px, calc(100vw - 92px));
}

.method-section-intro,
.method-figure-heading {
  width: 100%;
  max-width: none;
  padding-left: 0;
}

.method-section-intro h2,
.method-section-intro h3 {
  max-width: 760px;
}

.block-flow {
  grid-template-columns: repeat(6, minmax(0, 148px));
  column-gap: clamp(16px, 1.45vw, 20px);
  justify-content: start;
}

.flow-step:not(:last-child)::after {
  left: calc(100% + 3px);
  width: calc(clamp(16px, 1.45vw, 20px) - 6px);
}

.flow-step:not(:last-child)::before {
  left: calc(100% + clamp(16px, 1.45vw, 20px) - 9px);
}

@media (max-width: 1120px) {
  .method-figures-inner {
    width: min(920px, calc(100vw - 56px));
  }
}


/* V10.6 mechanism-section refinement.
   Keeps the compact V10.5 geometry, moves the explanatory bridge into the
   blue-grey band, differentiates formation/change arrow logic, and uses one
   restrained terracotta endpoint accent only. */
.method-figures {
  padding-block: clamp(44px, 4.8vw, 64px);
}

.method-figures-inner {
  gap: clamp(36px, 4vw, 52px);
}

.method-section-intro h2,
.method-section-intro h3 {
  font-size: clamp(26px, 2.15vw, 34px);
  line-height: 1.12;
  max-width: 820px;
  margin-bottom: 14px;
}

.method-section-intro .mechanism-bridge-inside {
  margin: 0;
  max-width: 700px;
  color: color-mix(in srgb, var(--ink), transparent 14%);
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.55;
}

.compact-method-figure + .compact-method-figure {
  margin-top: -4px;
}

.method-figure-heading {
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* Formation remains a learned sequence: dotted connectors. */
.patterns-flow .flow-step:not(:last-child)::after {
  border-top-style: dotted;
}

/* Change is shown as deliberate intervention: solid connectors. */
.change-flow .flow-step:not(:last-child)::after {
  border-top-style: solid;
}

/* Single endpoint accent only. */
.flow-box-end {
  background: #e8cec7;
  border-color: color-mix(in srgb, #000, transparent 48%);
}

@media (max-width: 760px) {
  .method-section-intro h2,
.method-section-intro h3 {
    font-size: clamp(25px, 8vw, 32px);
  }
}

/* =========================================================
   V10.7 — Attachment theory split layout + two-axis map
   ========================================================= */
.attachment-theory-intro {
  margin-inline: 0;
}

.attachment-theory-split {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(380px, 500px);
  gap: clamp(64px, 8vw, 118px);
  align-items: center;
  margin-top: clamp(48px, 5vw, 74px);
  margin-bottom: clamp(56px, 6vw, 86px);
}

.attachment-theory-dimensions,
.attachment-theory-coda {
  max-width: 820px;
}

.attachment-map-figure {
  margin: 0;
  width: 100%;
  justify-self: end;
}

.attachment-map {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  color: var(--ink);
}

.map-axis-line {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--ink), transparent 28%);
}

.map-axis-line--vertical {
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
}

.map-axis-line--horizontal {
  left: 11%;
  right: 11%;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}

.map-axis-label,
.map-style-label {
  position: absolute;
  margin: 0;
  line-height: 1.25;
}

.map-axis-label {
  color: var(--ink);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  white-space: nowrap;
}

.map-axis-label--top {
  top: 2.5%;
  left: 50%;
  transform: translateX(-50%);
}

.map-axis-label--bottom {
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
}

.map-axis-label--left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.map-axis-label--right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.map-style-label {
  color: color-mix(in srgb, var(--ink), transparent 42%);
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.map-style-label--ap {
  left: 15%;
  top: 24%;
}

.map-style-label--fa {
  right: 12%;
  top: 23%;
}

.map-style-label--secure {
  left: 17%;
  bottom: 22%;
}

.map-style-label--da {
  right: 10%;
  bottom: 19%;
}

@media (max-width: 1100px) {
  .attachment-theory-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .attachment-map-figure {
    justify-self: start;
    width: min(100%, 540px);
  }
}

@media (max-width: 620px) {
  .attachment-theory-split {
    margin-top: 40px;
    margin-bottom: 52px;
  }

  .attachment-map {
    width: min(100%, 440px);
  }

  .map-axis-label {
    font-size: 13px;
  }

  .map-style-label {
    font-size: 15px;
  }

  .map-style-label--ap {
    left: 13%;
    top: 25%;
  }

  .map-style-label--fa {
    right: 9%;
    top: 24%;
  }

  .map-style-label--secure {
    left: 15%;
    bottom: 23%;
  }

  .map-style-label--da {
    right: 7%;
    bottom: 20%;
  }
}

/* =========================================================
   V10.8 — About / Attachment Theory refinements
   ========================================================= */

/* Let the prose above and below the split use more of the editorial grid,
   while retaining a readable line length on large screens. */
.attachment-theory-intro,
.attachment-theory-coda {
  width: min(100%, 1020px);
  max-width: 1020px;
}

/* Stop the horizontal avoidance axis before the side labels. */
.map-axis-line--horizontal {
  left: 23%;
  right: 23%;
}

/* Pull the four style labels slightly inward toward the axis intersection. */
.map-style-label--ap {
  left: 19%;
  top: 25%;
}

.map-style-label--fa {
  right: 16%;
  top: 24%;
}

.map-style-label--secure {
  left: 21%;
  bottom: 23%;
}

.map-style-label--da {
  right: 14%;
  bottom: 20%;
}

@media (max-width: 620px) {
  .attachment-theory-intro,
  .attachment-theory-coda {
    width: 100%;
    max-width: 100%;
  }

  .map-axis-line--horizontal {
    left: 25%;
    right: 25%;
  }

  .map-style-label--ap {
    left: 17%;
    top: 26%;
  }

  .map-style-label--fa {
    right: 13%;
    top: 25%;
  }

  .map-style-label--secure {
    left: 19%;
    bottom: 24%;
  }

  .map-style-label--da {
    right: 11%;
    bottom: 21%;
  }
}

/* =========================================================
   V10.8 revised — tighten attachment-map label hierarchy
   ========================================================= */

/* Slightly smaller style labels so they can sit closer to the centre
   without crowding the axes or endpoint labels. */
.map-style-label {
  font-size: clamp(15px, 1.35vw, 20px);
}

/* Pull quadrant labels a little further inward. */
.map-style-label--ap {
  left: 21%;
  top: 26%;
}

.map-style-label--fa {
  right: 18%;
  top: 25%;
}

.map-style-label--secure {
  left: 23%;
  bottom: 24%;
}

.map-style-label--da {
  right: 16%;
  bottom: 21%;
}

@media (max-width: 620px) {
  .map-style-label {
    font-size: 14px;
  }

  .map-style-label--ap {
    left: 19%;
    top: 27%;
  }

  .map-style-label--fa {
    right: 15%;
    top: 26%;
  }

  .map-style-label--secure {
    left: 21%;
    bottom: 25%;
  }

  .map-style-label--da {
    right: 13%;
    bottom: 22%;
  }
}

/* =========================================================
   V10.9 — Attachment Theory width + axis geometry
   ========================================================= */

/* Allow the prose above and below the split to occupy the same full
   editorial grid as the About section above. The parent .wrap still
   controls the overall page width. */
.attachment-theory-intro,
.attachment-theory-coda {
  width: 100%;
  max-width: none;
}

/* Replace the single horizontal avoidance axis with two segments.
   This reserves clean space around the endpoint labels while preserving
   the visual cross at the centre. */
.map-axis-line--horizontal {
  display: none;
}

.map-axis-line--horizontal-left,
.map-axis-line--horizontal-right {
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}

.map-axis-line--horizontal-left {
  left: 27%;
  right: 50%;
}

.map-axis-line--horizontal-right {
  left: 50%;
  right: 27%;
}

/* Keep the quieter, inward quadrant-label treatment from V10.8 revised. */
.map-style-label {
  font-size: clamp(15px, 1.35vw, 20px);
}

.map-style-label--ap {
  left: 21%;
  top: 26%;
}

.map-style-label--fa {
  right: 18%;
  top: 25%;
}

.map-style-label--secure {
  left: 23%;
  bottom: 24%;
}

.map-style-label--da {
  right: 16%;
  bottom: 21%;
}

@media (max-width: 620px) {
  .attachment-theory-intro,
  .attachment-theory-coda {
    width: 100%;
    max-width: none;
  }

  .map-axis-line--horizontal-left {
    left: 29%;
    right: 50%;
  }

  .map-axis-line--horizontal-right {
    left: 50%;
    right: 29%;
  }
}



/* RW V2: process diagram sits flush between adjacent sections; removes the
   previous linen separator bands above and below the diagram. */
.mechanism-section-flush {
  padding-block: 0;
}
.mechanism-section-flush .method-figures {
  margin-block: 0;
}


/* RW V3: simplified page hierarchy after removing repeated page heroes. */
.page-copy h1,
.simple-page-title {
  margin: 0 0 clamp(32px, 4vw, 54px);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-size: clamp(52px, 6vw, 84px);
  max-width: 980px;
}
.faq-column .simple-page-title {
  margin-bottom: clamp(34px, 4vw, 56px);
}
.problems-simple .simple-quote-list {
  margin-top: 10px;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.problems-simple .simple-quote-list li {
  font-size: clamp(17.5px, 1.15vw, 18.75px);
  line-height: 1.58;
}
.working-option .option-label {
  display: none;
}


/* =========================================================
   RW V4 — editorial tightening and layout refinements
   ========================================================= */

/* Make the learned-pattern examples read as the same clean white panel language
   as the earlier recognition list, rather than as a muddy continuation of the stone section. */
.problem-list-field {
  background: var(--white);
  padding-inline: clamp(26px, 3.8vw, 52px);
  border: 1px solid color-mix(in srgb, var(--ink), transparent 86%);
}

/* Move emphasis in the coda away from the first sentence and onto the reframing line. */
.problem-coda p:first-child {
  font-family: var(--font-body) !important;
  font-size: clamp(18.5px, 1.24vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin: 0 0 16px !important;
  color: color-mix(in srgb, var(--ink), transparent 10%) !important;
}
.problem-coda p:last-child {
  font-family: var(--font-heading) !important;
  font-size: clamp(26px, 2.45vw, 36px) !important;
  line-height: 1.16 !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
}

/* Give the final Insight line emphasis without turning the whole close into a second heading block. */
.insight-close-copy strong {
  font-weight: 650;
  color: var(--ink);
}

/* Lift the Section 5 illustration into the natural empty space to the right. */
@media (min-width: 1181px) {
  #permanent .permanent-figure {
    right: clamp(-62px, -4.4vw, -30px);
    top: clamp(-62px, -4.2vw, -28px);
  }
}

/* About page: avatar should not scroll independently of the section. */
.about-avatar {
  position: static;
  top: auto;
}
.about-continuation,
.page-copy.process-editorial {
  max-width: 1020px;
}
.about-continuation {
  margin-top: clamp(46px, 5vw, 76px);
}
.about-layout-intro {
  align-items: start;
}
.about-process-section {
  border-top: 1px solid color-mix(in srgb, var(--rule), transparent 28%);
}
.process-editorial .short-version {
  max-width: 900px;
}
.process-offer-bridge {
  border-top: 1px solid color-mix(in srgb, var(--rule), transparent 28%);
}

/* Ways I can help: make the two routes feel like a designed offer section,
   not a run of centred article blocks. */
.ways-intro-copy {
  max-width: 920px;
}
.programmes-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 92px);
  align-items: start;
}
.programme-panel {
  max-width: none;
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 82%);
  padding-top: clamp(30px, 3.4vw, 44px);
}
.programme-panel h2 {
  font-size: clamp(34px, 3.2vw, 48px);
  max-width: 640px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.programme-panel p {
  max-width: 610px;
}
@media (max-width: 980px) {
  .programmes-layout {
    grid-template-columns: 1fr;
  }
  .programme-panel p {
    max-width: 820px;
  }
}


/* =========================================================
   RW V5 — targeted repair pass after review
   ========================================================= */

/* Keep the About submenu open while moving the pointer from parent item to menu. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  top: 100%;
  height: 22px;
}
.nav-menu {
  top: calc(100% + 10px);
}

/* Make the learned-pattern examples a clearer white panel. */
.problem-list-field {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--ink), transparent 88%) !important;
  box-shadow: 0 18px 44px rgba(34, 42, 57, .035);
}

/* Coda emphasis: keep the paragraph voice, but stress the strategy and sense-making lines. */
.problem-coda p,
.problem-coda p:first-child,
.problem-coda p:nth-child(2),
.problem-coda p:last-child {
  font-family: var(--font-body) !important;
  font-size: clamp(19px, 1.28vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: color-mix(in srgb, var(--ink), transparent 8%) !important;
  margin: 0 !important;
  max-width: 820px;
}
.problem-coda p + p {
  margin-top: 12px !important;
}
.problem-coda strong {
  font-weight: 700;
  color: var(--ink);
}

/* Outdated patterns: keep rightward placement but lower the figure so the ground line sits closer to the final paragraph. */
@media (min-width: 1181px) {
  #permanent .permanent-figure {
    right: clamp(-62px, -4.4vw, -30px);
    top: clamp(36px, 4.2vw, 72px);
  }
}

/* About avatar: static, larger, and visually tied to the opening copy. */
.about-layout {
  grid-template-columns: minmax(310px, 430px) minmax(0, 780px);
  gap: clamp(36px, 5.2vw, 72px);
  max-width: 1180px;
}
.about-avatar {
  width: min(100%, 430px);
  justify-self: end;
  margin-top: clamp(16px, 2.4vw, 30px);
}
.about-avatar img {
  width: 100%;
}
@media (max-width: 960px) {
  .about-avatar {
    justify-self: start;
    width: min(78vw, 360px);
    margin-top: 0;
  }
}

/* Ways I can help: return programme copy to a more readable editorial stack, with examples attached to Problem Specific. */
.ways-intro-copy {
  max-width: 880px;
}
.programmes-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 6vw, 86px);
  max-width: 980px;
}
.programme-panel {
  max-width: 900px;
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 82%);
  padding-top: clamp(30px, 3.2vw, 44px);
}
.programme-panel h2 {
  max-width: 820px;
}
.programme-panel p {
  max-width: 820px;
}
.problem-specific-panel {
  margin-top: clamp(8px, 1.2vw, 18px);
}
.problem-examples {
  margin-top: clamp(36px, 4vw, 58px);
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid color-mix(in srgb, var(--ink), transparent 84%);
}
.problem-examples h3 {
  font-size: clamp(30px, 3vw, 44px);
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.problem-examples h4 {
  margin-top: clamp(28px, 3vw, 42px);
  margin-bottom: 12px;
  font-size: clamp(19px, 1.35vw, 22px);
}
.problem-examples .simple-quote-list {
  margin-top: 8px;
  margin-bottom: clamp(24px, 3vw, 38px);
}


/* =========================================================
   RW V6 — layout repair pass
   - Outdated patterns illustration is now a proper right-column element,
     not an absolute floating object.
   - About avatar is held in a tighter, static editorial grid.
   ========================================================= */

@media (min-width: 1181px) {
  .permanent-v6 .permanent-editorial {
    width: min(1320px, calc(100vw - 96px));
  }

  .permanent-v6 .permanent-editorial h2 {
    max-width: 760px;
    margin-bottom: clamp(34px, 3.8vw, 54px);
  }

  .permanent-v6 .permanent-composition {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(430px, 560px);
    column-gap: clamp(54px, 7vw, 96px);
    row-gap: 0;
    align-items: start;
    min-height: 0;
    padding-top: 0;
  }

  .permanent-v6 .permanent-intro-copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 760px;
    padding-top: 0;
  }

  .permanent-v6 .permanent-pivot-copy {
    grid-column: 1;
    grid-row: 2;
    max-width: 680px;
    margin: clamp(48px, 5.4vw, 74px) 0 0;
  }

  .permanent-v6 .permanent-close-copy {
    grid-column: 1;
    grid-row: 3;
    max-width: 690px;
    margin: clamp(34px, 3.8vw, 52px) 0 0;
  }

  .permanent-v6 .permanent-close-copy p,
  .permanent-v6 .permanent-final-line {
    max-width: 690px;
  }

  .permanent-v6 .permanent-figure {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: 1;
    width: min(100%, 555px);
    justify-self: end;
    align-self: start;
    margin: clamp(18px, 2.2vw, 34px) 0 0;
  }

  .permanent-v6 .permanent-figure img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 1180px) {
  .permanent-v6 .permanent-composition {
    display: grid;
    gap: clamp(30px, 5vw, 44px);
    min-height: 0;
  }

  .permanent-v6 .permanent-figure {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    order: 3;
    width: min(100%, 620px);
    justify-self: center;
    margin: 0 auto;
  }

  .permanent-v6 .permanent-intro-copy {
    order: 1;
    max-width: 820px;
  }

  .permanent-v6 .permanent-pivot-copy {
    order: 2;
    margin: 0;
    max-width: 720px;
  }

  .permanent-v6 .permanent-close-copy {
    order: 4;
    margin: 0;
    max-width: 820px;
  }
}

.about-layout {
  grid-template-columns: minmax(330px, 470px) minmax(0, 760px);
  gap: clamp(28px, 4.4vw, 60px);
  max-width: 1160px;
  align-items: start;
}

.about-avatar {
  width: min(100%, 455px);
  justify-self: end;
  margin-top: 0;
}

.about-avatar img {
  width: 100%;
  height: auto;
}

@media (max-width: 960px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-avatar {
    justify-self: start;
    width: min(78vw, 360px);
  }
}

/* =========================================================
   RW V8 — final desktop touch-up before responsive review
   - Match the learned-pattern examples panel to the earlier recognition-list
     soft pale field rather than the hard white rectangle.
   - Nudge the outdated-patterns illustration upward while preserving the V5
     text arrangement.
   ========================================================= */

.problem-composed .problem-list-field {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  isolation: isolate;
}

.problem-composed .problem-list-field::before {
  background: color-mix(in srgb, var(--white), transparent 14%) !important;
}

@media (min-width: 1181px) {
  #permanent .permanent-figure {
    top: clamp(-16px, 0.2vw, 10px);
  }
}