/* Heart & Mind Aligned: the approved concept's CSS, ported for the block theme.
   Adrianne's own system from her mockup, kept: her six colours, serif headings in teal, square corners,
   sage hairlines, teal and sage bands, the ochre marker highlight, terracotta as underline and border
   accents, the one-rounded-corner portrait with its caption card, accordions for Insights.
   Class names match the concept exactly; the patterns and blocks reuse them. Colours and fonts come from
   theme.json so the editor palette and this file never disagree. */
:root {
  --bg: var(--wp--preset--color--bg, #F7F2E9); --ink: var(--wp--preset--color--ink, #303635);
  --soft: var(--wp--preset--color--soft, #AAB6A3); --line: var(--wp--preset--color--line, #C9D0C3);
  --accent: var(--wp--preset--color--accent, #24595B); --dark: var(--wp--preset--color--accent, #24595B);
  --white: var(--wp--preset--color--bg, #F7F2E9); --clay: var(--wp--preset--color--clay, #BC7058);
  --gold: var(--wp--preset--color--gold, #C49A45); --muted: var(--wp--preset--color--muted, #5E625F);
  --serif: var(--wp--preset--font-family--serif, "Gelasio", Georgia, "Times New Roman", serif);
  --sans: var(--wp--preset--font-family--sans, "Nunito Sans", Arial, system-ui, sans-serif);
  --gutter: clamp(16px, 6vw, 72px);
  --ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 19px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--accent); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(42px, 5.8vw, 66px); line-height: 1.04; letter-spacing: -1.5px; text-wrap: initial; }
@media (max-width: 820px) { h1 br { display: none; } h1 { text-wrap: balance; } }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.13; letter-spacing: -0.5px; }
h3 { font-size: 25px; line-height: 1.25; }
p { margin: 0; }
.lead { font-size: 18px; max-width: 610px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.small { font-size: 13px; color: var(--muted); }
.stack { display: grid; gap: 22px; align-content: start; }
.stack > h2 + p, .stack > h3 + p { margin-top: -4px; }
section { padding: clamp(56px, 8vw, 96px) var(--gutter); }
.inner { max-width: 1180px; margin: 0 auto; }
.primary, .wp-block-button__link, .wp-element-button { display: inline-block; background: var(--accent); color: var(--white); padding: 14px 24px; border-radius: 3px; font-size: 15px; font-weight: 600; line-height: 1.4; border: 0; cursor: pointer; text-decoration: none; }
.primary:hover, .wp-block-button__link:hover, .wp-element-button:hover { background: var(--ink); color: var(--white); }
.text-link { display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); padding: 4px 0; }
.text-link:hover { border-bottom-color: var(--clay); color: var(--clay); }
.ne { width: .85em; height: .85em; vertical-align: -0.08em; margin-left: .15em; }
.sr, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Block layout: the concept sets its own gaps and margins, so WordPress's flow spacing stays out of the way
   inside the classes that already space themselves. Patterns that want block gap can still ask for it. */
.stack > * + *, .inner > * + *, .service > * + *, .booking > * + * { margin-block-start: 0; }
.site-main .wp-block-post-content > * + * { margin-block-start: 0; }
.wp-block-group.is-layout-constrained > .inner { max-width: 1180px; }

/* Header: her brand with the terracotta ampersand, her small-caps nav */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(247, 242, 233, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 0 var(--gutter); }
.bar { max-width: 1180px; margin: 0 auto; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .wp-block-site-title.brand, .wp-block-site-title.brand a { font: 400 26px/1.05 var(--serif); letter-spacing: -1px; color: var(--accent); white-space: nowrap; text-decoration: none; margin: 0; }
.brand em { font-style: normal; color: var(--clay); }
.primary-nav, nav.primary-nav ul, .primary-nav .wp-block-navigation__container { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; }
nav.primary-nav a, .primary-nav .wp-block-navigation-item__content { padding: 8px 0; border-bottom: 1px solid transparent; }
nav.primary-nav a:hover, .primary-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--clay); }
nav.primary-nav a.cta, .primary-nav .cta .wp-block-navigation-item__content { color: var(--accent); border-bottom: 1px solid var(--accent); }
.primary-nav .cta .wp-block-navigation-item__content::after { content: ""; display: inline-block; width: .85em; height: .85em; vertical-align: -0.08em; margin-left: .25em; background: currentColor; -webkit-mask: var(--ne) center / contain no-repeat; mask: var(--ne) center / contain no-repeat; }
.primary-nav .wp-block-navigation-item__content:focus-visible { outline-offset: 0; }
/* The menu collapses at 900px like the concept, not at WordPress's 600px. The selectors repeat a class
   so they outrank the block's own triple-class rules; the open menu is WordPress's full-screen overlay
   (hasIcon off, so the buttons read "Menu" and "Close" like the concept's toggle). */
.primary-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, .primary-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close, .menu-toggle { display: none; }
@media (max-width: 900px) {
  .primary-nav .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, .primary-nav .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close, .menu-toggle { display: inline-block; background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: 3px; padding: 10px 16px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; font-family: var(--sans); line-height: 1.2; cursor: pointer; }
  .primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  /* The header's backdrop-filter makes it the containing block for WordPress's fixed overlay, so the open
     menu becomes the concept's panel under the header instead: absolute, full width, hairline below. */
  .primary-nav.wp-block-navigation { position: static; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); padding: 10px var(--gutter) 22px; animation: none; }
  .primary-nav .wp-block-navigation__responsive-container-open:has(+ .is-menu-open) { display: none; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 16px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding: 10px 0; }
}

/* Hero: opens close under the header, the text level with the top of the portrait. */
section.hero { padding-top: clamp(4px, 0.5vw, 8px); } /* section only: the map's hero-layout SVG also carries .hero */
.hero .inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* Trademark mark on the Map to MORE name: small, light, tucked against the last letter. */
sup.tm { font-family: var(--sans); font-size: .26em; font-weight: 600; letter-spacing: 0; vertical-align: 0; position: relative; top: -1.55em; line-height: 0; margin-left: .15em; }
h1 em { font-style: italic; color: var(--accent); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.actions, .actions.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.portrait { position: relative; background: var(--soft); min-height: 420px; border-radius: 4px 100px 4px 4px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; overflow: visible; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.portrait .wp-block-image, .portrait figure { position: absolute; inset: 0; margin: 0; border-radius: inherit; }
.photo-label { font-size: 14px; max-width: 240px; line-height: 1.5; }
.portrait.has-photo .photo-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.portrait.has-photo { aspect-ratio: 4 / 5; min-height: 0; }
.hero .portrait.has-photo { aspect-ratio: 525 / 680; }
.hero .portrait { border-radius: 100px 100px 4px 4px; } /* both top corners rounded, at her ask (November 2026) */
.photo-label b, .photo-label strong { display: block; font-weight: 700; margin-bottom: 4px; }
.photo-label small { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.scribble { position: absolute; bottom: 22px; left: -20px; padding: 12px 19px; background: var(--bg); color: var(--ink); border-left: 5px solid var(--clay); border-bottom: 3px solid var(--clay); font: italic 23px/1.2 var(--serif); max-width: 80%; text-align: left; margin: 0; }
@media (max-width: 820px) { .hero .inner { grid-template-columns: 1fr; } .portrait { min-height: 360px; } .scribble { left: 12px; } }
/* What Clients Say (page /what-clients-say/): an ivory opener, the full reviews as cards in two
   columns (each with an anchor the home page carousel links to), a sage close with the intro call. */
.wc-hero { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(16px, 2vw, 24px); }
.wc-hero .inner > * { margin-block-start: 0 !important; }
.wc-hero .page-title { margin-top: 14px; }
.wc-hero .page-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 22px; background: var(--gold); }
.wc-lead { margin-top: 20px; font: italic clamp(19px, 1.8vw, 23px)/1.45 var(--serif); color: var(--accent); max-width: none; }
.wc-list { padding-top: clamp(24px, 3vw, 40px); }
.wc-list .inner { columns: 2 380px; column-gap: 24px; }
.wc-card { break-inside: avoid; margin: 0 0 24px; padding: 28px 30px 24px; background: #FBF8F2; border: 1px solid var(--line); border-top: 4px solid var(--clay); border-radius: 4px; scroll-margin-top: 100px; }
.wc-card:nth-child(3n+2) { border-top-color: var(--gold); }
.wc-card:nth-child(3n) { border-top-color: var(--accent); }
.wc-card:target { box-shadow: 0 0 0 3px var(--gold); }
.wc-card blockquote { margin: 0; padding: 0; border: 0; }
.wc-card blockquote p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; }
.wc-card blockquote p:first-child::before { content: "“"; display: block; height: 30px; font: 400 64px/1 var(--serif); color: var(--clay); }
.wc-card figcaption { font: 700 13px/1 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--clay); }
.wc-close { background: var(--soft); }
.wc-close .inner { max-width: 760px; text-align: center; }
.wc-close .inner > * { margin-block-start: 0 !important; }
.wc-close p { margin-top: 14px; }
.wc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px !important; }
/* The link from each home page review to its full version. */
.hr-more { display: inline-block; margin-left: 12px; font: 600 12px/1 var(--sans); letter-spacing: .4px; text-transform: none; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.hr-more:hover, .hr-more:focus-visible { color: var(--clay); border-bottom-color: var(--clay); }

/* The photo card as a carousel of client reviews (November 2026): the slides share one grid cell so
   the card keeps the tallest one's height and never jumps; each fades in; small dots underneath. */
.scribble.hm-reviews { width: 86%; max-width: 86%; padding: 16px 20px 12px; }
.hr-slides { display: grid; }
.portrait .hm-reviews figure.hr-slide { position: relative; inset: auto; border-radius: 0; }
.hr-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.hr-slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hr-slide blockquote { margin: 0; padding: 0; border: 0; font: italic 18px/1.4 var(--serif); color: var(--ink); }
.hr-slide figcaption { margin-top: 8px; font: 700 12px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--clay); }
.hr-dots { display: flex; gap: 2px; margin-top: 8px; }
.hr-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hr-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s ease; }
.hr-dots button[aria-pressed="true"]::before { background: var(--clay); }
.hr-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .hr-slide, .hr-slide.is-on { transition: none; } }
@media (max-width: 820px) { .scribble.hm-reviews { width: auto; right: 12px; max-width: none; } .hr-slide blockquote { font-size: 16px; } }

/* Statement band */
.statement { background: var(--dark); text-align: center; }
.statement .eyebrow { color: var(--gold); }
.statement h2, .statement p { color: var(--white); }
.statement .inner { display: grid; gap: 20px; justify-items: center; }
.statement h2 { max-width: 20ch; }

/* Maybe you've been thinking (recognition) */
/* "Maybe you've been thinking…" (her October 2026 mock, built by measurement): six quoted thoughts in two
   centred columns under terracotta strokes, the italic line, the big line with "different" underlined by
   the gold stroke lifted from the mock, a short lead and the two links. The frame stands for the mock's 1024px
   width, and --m is one mock pixel at the frame's width, so every size, gap and offset below is the mock's
   own number. Type sizes are matched to the mock's line widths, not its point sizes, because Gelasio is
   wider than the mock's face; the line breaks are the mock's, held on one line each above phone width. */
.thinking { padding-top: 0; padding-bottom: 0; }
.thinking-frame { --m: calc(100cqw / 1024); container-type: inline-size; max-width: 1100px; margin: 0 auto; }
.thinking-frame > *, .thoughts > *, .thought > * { margin: 0 !important; }
.thinking-title { margin-top: calc(var(--m) * 79) !important; text-align: center; font-size: calc(var(--m) * 62); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
/* Two columns as wide as their lines, the mock's 74px between them, the pair centred under the title;
   rows aligned across the pair. */
.thoughts { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: calc(var(--m) * 74); row-gap: calc(var(--m) * 40); margin-top: calc(var(--m) * 45) !important; }
/* The terracotta brush mark above each thought, 56 by 17 in the mock, 10 above the heading. */
.thought::before { content: ""; display: block; width: calc(var(--m) * 56); height: calc(var(--m) * 17); margin-bottom: calc(var(--m) * 10); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='none'%3E%3Cpath d='M2.5 11.2C15 7 34 3.4 56.5 2.2c2.6-.1 3.2 4.4.6 4.9C37.5 9.6 21 12.6 4.6 15.2 1.4 15.7-.6 12.4 2.5 11.2z' fill='%23C37656'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }
.thought h3 { font-size: calc(var(--m) * 33); line-height: 1.23; letter-spacing: -0.01em; white-space: nowrap; }
.thought p { margin-top: calc(var(--m) * 10) !important; font-size: calc(var(--m) * 25.7); line-height: 1.245; color: var(--muted); white-space: nowrap; }
.thinking-aside { margin-top: calc(var(--m) * 44) !important; text-align: center; font: italic calc(var(--m) * 27.9)/1.35 var(--serif); color: var(--ink); white-space: nowrap; }
.thinking-big { margin-top: calc(var(--m) * 26) !important; text-align: center; font: 400 calc(var(--m) * 52.8)/1.12 var(--serif); letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
/* The gold brush stroke under "different", lifted from the mock itself (its 205 by 25 crop at x=490,
   y=1271, background knocked out), at the mock's size and place. */
.thinking-under { position: relative; display: inline-block; }
.thinking-under::after { content: ""; position: absolute; left: calc(var(--m) * -2); bottom: calc(var(--m) * -12); width: calc(var(--m) * 205); height: calc(var(--m) * 25); background: url("../img/home/different-stroke.png") center / 100% 100% no-repeat; }
.thinking-lead { margin-top: calc(var(--m) * 32) !important; text-align: center; font-size: calc(var(--m) * 22.4); line-height: 1.47; color: var(--muted); white-space: nowrap; }
.thinking-cta { margin-top: calc(var(--m) * 30) !important; margin-bottom: calc(var(--m) * 40) !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px calc(var(--m) * 22); line-height: 0; }
.thinking-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; background: var(--accent); color: var(--white); font: 600 15px/1.4 var(--sans); border-radius: 3px; } /* size and lettering as the site's other teal buttons */
.thinking-arrow { margin-left: 0.35em; }
.thinking-button:hover { background: var(--ink); color: var(--white); }
.thinking-link { margin-top: calc(var(--m) * 9) !important; margin-bottom: calc(var(--m) * 40) !important; text-align: center; font: 400 calc(var(--m) * 17.5)/1.3 var(--serif); }
.thinking-link a { color: var(--accent); text-decoration: underline; text-decoration-color: #769697; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* Phones: one column at readable fixed sizes; the mock's breaks stay, extra wrapping only where needed. */
@media (max-width: 600px) {
  .thinking-title { margin-top: 40px !important; font-size: 36px; white-space: normal; }
  .thoughts { grid-template-columns: 1fr; justify-content: stretch; row-gap: 28px; margin-top: 28px !important; }
  .thought::before { width: 48px; height: 14px; margin-bottom: 10px; }
  .thought h3 { font-size: 24px; white-space: normal; }
  .thought p { margin-top: 8px !important; font-size: 16px; white-space: normal; }
  .thinking-aside { margin-top: 32px !important; font-size: 19px; white-space: normal; }
  .thinking-big { margin-top: 16px !important; font-size: 30px; white-space: normal; }
  .thinking-under::after { left: -2px; bottom: -8px; width: 106%; height: 13px; }
  .thinking-lead { margin-top: 24px !important; font-size: 16px; white-space: normal; }
  .thinking-cta { margin-top: 20px !important; margin-bottom: 40px !important; }
  .thinking-button { width: auto; height: auto; padding: 14px 24px; }
  .thinking-link { margin-top: 12px !important; margin-bottom: 40px !important; font-size: 16px; }
}

/* Philosophy: Heart + Mind, on her sage band */
.philosophy { background: var(--soft); }
/* Home page teaser for Heart + Mind (the full explorer lives on the Map page, #try-it): one scene, what
   the mind says beside what the heart knows, and a button through to the Map. */
.hm-teaser h2 { margin: 0 0 12px; }
.hm-teaser h2 .op { color: var(--clay); padding: 0 .1em; }
.ht-intro { max-width: none; }
.ht-scene { margin-top: 26px; font: italic clamp(20px, 2.1vw, 25px)/1.4 var(--serif); color: var(--ink); }
.ht-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ht-side { padding: 22px 24px; background: var(--bg); border-radius: 8px; border-top: 4px solid var(--clay); }
.ht-heart { border-top-color: var(--accent); }
.ht-line { font: 400 clamp(21px, 2.3vw, 28px)/1.3 var(--serif); color: var(--accent); }
.ht-mind .ht-line { color: var(--ink); }
.ht-cta { margin-top: 26px; }
@media (max-width: 700px) { .ht-pair { grid-template-columns: 1fr; } }
.mm-explore { scroll-margin-top: 80px; }
.mm-reset { scroll-margin-top: 80px; }
/* Heart + Mind explorer (her November 2026 interactive section): sage band, ivory panel, teal pressed
   states, her Map badges as the six choices; the site's own fonts. Script: assets/js/explorer.js. */
.hm-explorer h2 { margin: 0 0 12px; }
.hm-explorer h2 .op { color: var(--clay); padding: 0 .1em; }
.hm-explorer .hx-intro { max-width: none; margin-bottom: 18px; }
.hm-explorer button { font: 600 15px/1.2 var(--sans); min-height: 44px; padding: 9px 16px; border: 1px solid var(--accent); border-radius: 5px; background: var(--bg); color: var(--accent); cursor: pointer; transition: background .2s ease, color .2s ease; }
.hm-explorer button:hover { background: #EFE9DD; }
.hm-explorer button[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.hm-explorer button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hx-picks, .hx-modes { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-panel { margin-top: 22px; padding: clamp(18px, 3vw, 32px); background: var(--bg); border-radius: 8px; }
.hx-label { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.hx-scene { font: italic clamp(20px, 2.1vw, 25px)/1.4 var(--serif); color: var(--ink); margin-bottom: 18px; }
.hx-modes { margin-bottom: 16px; align-items: center; }
.hx-arrow { font: 600 20px/1 var(--sans); color: var(--clay); }
.hx-pause { margin-bottom: 16px; padding-left: 14px; border-left: 3px solid var(--gold); }
.hx-pause strong { letter-spacing: 2px; color: var(--accent); }
.hx-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hx-icons[hidden] { display: none; }
/* Each choice leads with her plain question; the Map name sits small underneath; numbered 1 to 3. */
.hx-set-intro { margin-bottom: 14px; color: var(--ink); }
@media (min-width: 1100px) { .hx-set-intro { font-size: 17px; white-space: nowrap; } } /* one line on a laptop, at her ask */
.hx-set-intro[hidden] { display: none; }
.hx-icons button { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; text-align: left; }
.hx-num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--sans); background: var(--soft); color: var(--white); }
.hm-explorer button[aria-pressed="true"] .hx-num { background: var(--gold); color: var(--ink); }
.hx-icons img { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; border-radius: 50%; background: #fff; }
.hx-txt { display: grid; gap: 4px; }
.hx-q { font: 400 17px/1.25 var(--serif); }
.hx-name { font: 700 11px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; opacity: .75; }
.hx-result { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--soft); }
.hx-result h3 { margin: 4px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; padding-left: 14px; border-left: 3px solid var(--clay); }
.hm-explorer[data-mode-now="1"] .hx-result h3 { border-left-color: var(--accent); }
.hx-result p[data-detail] { margin-bottom: 12px; }
/* The core fear named on the Fear step: a soft terracotta tag. */
.hx-fear { display: inline-block; margin-bottom: 12px; padding: 6px 12px; border-radius: 4px; background: #F3E3DA; font-size: 15px; color: var(--ink); }
.hx-fear[hidden] { display: none; }
.hx-fear strong { color: #8F4A33; }
/* Responding with awareness: the same tag in teal (the trust underneath). */
.hm-explorer[data-mode-now="1"] .hx-fear { background: #DCE8E6; }
.hm-explorer[data-mode-now="1"] .hx-fear strong { color: var(--accent); }
/* "You might hear yourself say:" and the thoughts, as quiet italic lines. */
.hx-says { margin-bottom: 12px; }
.hx-says[hidden] { display: none; }
.hx-says p { margin-bottom: 6px; }
.hx-says ul { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 4px; }
.hx-says li { font: italic 18px/1.4 var(--serif); color: var(--accent); }
.hx-reflect { padding-left: 14px; border-left: 3px solid var(--gold); font-style: italic; }
.hx-cta { margin-top: 26px; }
@media (max-width: 700px) { .hx-icons { grid-template-columns: 1fr; } }
.philosophy h2 .op { color: var(--clay); font-style: normal; padding: 0 .1em; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choice-row button { border: 1px solid var(--accent); padding: 10px 16px; background: var(--bg); border-radius: 3px; font-size: 14px; font-weight: 600; min-height: 44px; cursor: pointer; }
.choice-row button[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; }
.inner-voice { padding: 28px 0; border-top: 1px solid var(--ink); }
.inner-voice .says { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.inner-voice blockquote { font: 29px/1.3 var(--serif); margin: 10px 0 0; padding: 0; border: 0; color: var(--ink); transition: opacity .25s ease; }
.inner-voice.heart blockquote { color: var(--accent); font-style: italic; }
.switching blockquote { opacity: 0; }
/* The closing note as a quiet pull line: italic serif in teal, set off by a terracotta bar. */
.philosophy .note { margin-top: 44px; max-width: 720px; padding: 4px 0 4px 24px; border-left: 3px solid var(--clay); font: italic clamp(20px, 2vw, 25px)/1.45 var(--serif); color: var(--accent); }
.philosophy .note + p { margin-top: 22px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; gap: 0; } .inner-voice blockquote { font-size: 23px; } }

/* The Map to MORE */
.mapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 36px 0; }
.map-item { border-top: 2px solid var(--clay); padding-top: 20px; }
/* The pattern's label is a paragraph and the pair an h3 (the concept used span and strong); the arrow is a text glyph. */
.map-item > span, .map-item > p { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; display: block; font-weight: 600; color: var(--muted); }
.map-item strong, .map-item h3 { display: flex; align-items: center; gap: 12px; font: 400 29px/1.3 var(--serif); margin-top: 10px; color: var(--accent); flex-wrap: wrap; }
.map-item svg.ar { width: 22px; height: 22px; }
.map-item .ar { color: var(--clay); flex: none; font-size: 1.2rem; }
.reset { margin-top: 36px; padding: 30px; background: var(--bg); border-left: 5px solid var(--clay); display: grid; grid-template-columns: auto 1fr; gap: 14px 40px; align-items: start; }
.reset h3 { grid-column: 1 / -1; }
.reset-word { font: 400 clamp(40px, 6vw, 56px)/1 var(--serif); letter-spacing: 3px; color: var(--accent); }
.reset-steps { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.reset-steps button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.reset-steps button[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); padding-left: 12px; padding-right: 12px; }
#reset-caption, .reset-caption { font: 28px/1.3 var(--serif); margin: 14px 0 0; color: var(--accent); }
#reset-text, .reset-text { margin-top: 10px; max-width: 56ch; font-size: 16px; transition: opacity .25s ease; }
.reset-detail.switching p { opacity: 0; }
.reset .text-link { margin-top: 10px; }
@media (max-width: 820px) { .mapgrid { grid-template-columns: 1fr; gap: 12px; } .map-item strong { margin: 0; font-size: 25px; } .reset { grid-template-columns: 1fr; } }

/* Coaching */
.coaching h2 { text-transform: uppercase; letter-spacing: .5px; font-size: clamp(28px, 3.6vw, 40px); }
.coaching .pattern-line { font: italic 21px/1.4 var(--serif); color: var(--accent); max-width: 560px; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 35px; margin-top: 30px; }
.service { border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 12px; align-content: start; }
.service p { font-size: 16px; }
.service .small { font-size: 13px; color: var(--muted); }
.service .text-link { justify-self: start; }
@media (max-width: 820px) { .services { grid-template-columns: 1fr; } }
/* Coaching page (November 2026): hero with jump buttons and three steps, then one band per offer
   (ivory, sage, ivory, teal), each with who / how / what changes, program cards and its own call to action. */
.cp-hero { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 4vw, 52px); }
/* The opener centred: a big serif title, the pattern line in teal italic, a short gold rule, then the
   intro-call paragraph as a soft card, the jump buttons and the three steps. */
.cp-hero .stack { gap: 0; justify-items: center; text-align: center; }
.cp-hero .stack > * { margin: 0 !important; }
.site-main .cp-hero h1.page-title { font-size: clamp(38px, 5.2vw, 64px) !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-transform: none !important; }
.cp-hero .pattern-line { margin-top: 18px !important; max-width: 760px; font: italic clamp(20px, 2.2vw, 26px)/1.45 var(--serif); }
.cp-hero .pattern-line::after { content: ""; display: block; width: 64px; height: 3px; margin: 26px auto 0; background: var(--gold); }
.cp-hero .lead { margin-top: 26px !important; max-width: 820px; text-wrap: balance; padding: 22px 28px; background: #FBF8F2; border: 1px solid var(--line); border-radius: 8px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; }
.cp-hero .ms-jump { margin: 32px 0 0 !important; justify-content: center; border-bottom: 0; padding-bottom: 0; }
.cp-steps { list-style: none; margin: 30px 0 0 !important; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.cp-steps li > * { margin: 0 !important; }
.cp-steps li { display: grid; gap: 8px; align-content: start; padding: 20px 22px; background: #FBF8F2; border: 1px solid var(--line); border-radius: 6px; }
.cp-step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font: 700 15px/1 var(--sans); }
.cp-steps strong { font: 400 22px/1.25 var(--serif); color: var(--accent); }
.cp-steps li > span:last-child { font-size: 16px; line-height: 1.5; }
.cp-offer { scroll-margin-top: 80px; padding-top: clamp(52px, 6vw, 80px); padding-bottom: clamp(52px, 6vw, 80px); }
.cp-offer .inner > * { margin-block-start: 0 !important; }
.cp-offer h2 { margin-top: 10px !important; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; text-transform: none; letter-spacing: -.5px; }
.cp-offer .cp-intro { margin-top: 18px !important; max-width: none; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; }
.cp-diff { padding-bottom: 0; text-align: center; }
.cp-diff .inner { max-width: 880px; padding-bottom: clamp(36px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.cp-diff .cp-intro { font: italic clamp(21px, 2.2vw, 26px)/1.45 var(--serif) !important; color: var(--accent); text-wrap: balance; }
.cp-start { padding-top: clamp(32px, 4vw, 48px); }
.cp-start .cp-steps { margin-top: 0 !important; }
.cp-sage { background: #E6E9DF; }
.cp-teal { background: var(--dark); color: var(--white); }
.cp-teal h2, .cp-teal h3, .cp-teal p, .cp-teal .eyebrow { color: var(--white); }
.cp-teal .eyebrow { color: var(--gold); }
.cp-three, .cp-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px !important; }
.cp-three > div, .cp-formats > div { border-top: 3px solid var(--clay); padding-top: 16px; }
.cp-three > div:nth-child(2), .cp-formats > div:nth-child(2) { border-top-color: var(--gold); }
.cp-three > div:nth-child(3), .cp-formats > div:nth-child(3) { border-top-color: var(--accent); }
.cp-teal .cp-formats > div:nth-child(3) { border-top-color: var(--soft); }
.cp-three h3, .cp-formats h3 { font-size: 24px; margin: 0 0 10px; }
.cp-three p, .cp-formats p { font-size: 17px; line-height: 1.6; margin: 0; }
.cp-pk-lead { margin-top: 44px !important; font: italic 21px/1.4 var(--serif); color: var(--accent); }
.cp-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px !important; align-items: stretch; }
.cp-pk { position: relative; padding: 28px 26px; background: #FBF8F2; border: 1px solid var(--line); border-radius: 8px; }
.cp-sage .cp-pk { background: var(--bg); }
.cp-pk-mid { border: 2px solid var(--accent); box-shadow: 0 12px 30px rgba(36, 89, 91, .12); }
.cp-pk-badge { position: absolute; top: -13px; left: 26px; margin: 0; padding: 4px 12px; background: var(--accent); color: var(--white); border-radius: 999px; font: 700 11px/1.3 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; }
.cp-pk-len { margin: 0; font: 700 12px/1.3 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--clay); }
.cp-pk h3 { margin: 6px 0 12px; font-size: clamp(24px, 2.4vw, 30px); }
.cp-pk p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; }
.cp-pk .cp-pk-for { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-style: italic; color: var(--accent); }
.cp-quote { margin: 40px 0 0 !important; padding: 0 0 0 22px; border-left: 3px solid var(--gold); }
.cp-quote p { font: italic clamp(20px, 2.1vw, 25px)/1.45 var(--serif); color: var(--accent); margin: 0; }
.cp-quote cite { display: block; margin-top: 8px; font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: var(--clay); }
.cp-cta { margin-top: 36px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.cp-cta span { font: italic 18px/1.4 var(--serif); color: var(--accent); }
.cp-teal .cp-cta .primary { background: var(--white); color: var(--accent); }
.cp-teal .cp-cta .primary:hover { background: var(--gold); color: var(--ink); }
.cp-teal .cp-cta span { color: var(--white); }
/* The close: sage, with the faint heart and the waves from the Home and About pages; the invitation
   and what to expect on the left, the booking calendar in a white card on the right. */
.cp-book { position: relative; overflow: hidden; background: var(--soft); padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(150px, 16vw, 210px); scroll-margin-top: 80px; }
.cp-book::before { content: ""; position: absolute; top: clamp(16px, 2vw, 28px); right: -90px; width: 360px; height: 378px; background: url("../img/logo-header.png") -34px -171px / 2126px auto no-repeat; filter: brightness(0); opacity: .05; pointer-events: none; }
.cp-book::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 165px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1774 230' preserveAspectRatio='none'%3E%3Cpath d='M0 2C180-6 380 10 560 70S760 140 900 120 1400 40 1774 50V230H0z' fill='%2393AB8E'/%3E%3Cpath d='M0 76C200 96 380 160 560 166S900 120 1100 92 1500 66 1774 78V230H0z' fill='%23F7F2E9'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
.cp-book .inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.cp-book .inner > * { margin-block-start: 0 !important; }
.cp-book-text { gap: 0; }
.cp-book-text > * { margin: 0 !important; }
.cp-book h2 { margin-top: 10px !important; text-transform: none; letter-spacing: -.5px; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
.cp-book .lead { margin-top: 16px !important; }
.cp-expect { list-style: none; padding: 0; margin: 26px 0 0 !important; display: grid; gap: 14px; }
.cp-expect li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.55; }
.cp-expect li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 4px var(--soft), 0 0 0 2px var(--accent); }
.cp-expect strong { color: var(--accent); }
.cp-book .cp-book-quote { margin-top: 30px !important; }
.cp-book .cp-more { margin-top: 18px !important; }
.cp-book-card { margin: 0 !important; padding: 18px; background: var(--white); border-radius: 12px; box-shadow: 0 16px 40px rgba(48, 54, 53, .14); }
@media (max-width: 900px) { .cp-book .inner { grid-template-columns: 1fr; } }
.cp-offer .inner > .cp-intro { margin-top: 18px !important; }
.cp-offer .inner > .cp-three, .cp-offer .inner > .cp-formats { margin-top: 34px !important; }
.cp-offer .inner > .cp-pk-lead { margin-top: 48px !important; }
.cp-offer .inner > .cp-packages { margin-top: 26px !important; }
.cp-offer .inner > .cp-quote, .cp-offer .inner > .cp-quotes { margin-top: 44px !important; }
.cp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cp-quotes .cp-quote { margin: 0 !important; }
.cp-teal .cp-quote { border-left-color: var(--gold); }
.cp-teal .cp-quote p { color: var(--white); }
.cp-teal .cp-quote cite { color: var(--gold); }
.cp-book .cp-more { margin-top: 18px; }
@media (max-width: 900px) { .cp-quotes { grid-template-columns: 1fr; } }
.cp-offer .inner > .cp-cta { margin-top: 36px !important; }
@media (max-width: 900px) { .cp-steps, .cp-three, .cp-formats, .cp-packages { grid-template-columns: 1fr; } .cp-pk-mid { margin-top: 10px; } }

/* About, on her sage band */
.about { background: var(--soft); }
.about .inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.about .portrait { background: var(--bg); border-radius: 4px 4px 4px 100px; }
.about .truths { font: italic 21px/1.5 var(--serif); color: var(--accent); }
@media (max-width: 820px) { .about .inner { grid-template-columns: 1fr; } }

/* Insights: her accordions (core Details blocks carry .wp-block-details) */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
details, .wp-block-details { border-top: 1px solid var(--line); padding: 20px 0; margin: 0; }
summary, .wp-block-details summary { font: 23px/1.3 var(--serif); min-height: 44px; cursor: pointer; color: var(--accent); list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 26px/1 var(--serif); color: var(--clay); flex: none; }
details[open] summary::after { content: "\2013"; }
details .topic { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
details blockquote, .wp-block-details .wp-block-quote { margin: 18px 0 0; padding: 0; border: 0; font: italic 18px/1.5 var(--serif); }
details blockquote p { font: inherit; margin: 0; }
details p { margin-top: 14px; font-size: 15px; }
details .topic + blockquote, details .topic + .wp-block-quote { margin-top: 0; }
details .text-link { margin-top: 14px; }
.wp-block-details > :where(:not(summary)) { margin-block-start: 0; }
@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr; gap: 0; } }

/* It only takes one, on her teal band */
/* It Only Takes One, from her 1 November mock: teal band, the gold eyebrow over a short gold rule, the
   big ivory title, a thin gold divider, the six lines, the closing line over her gold brush stroke
   (lifted from the mock), a faint heart top right, then sage and ivory waves easing into the footer. Sizes are the mock's at
   0.72 (its 1774px frame on a 1280px screen). */
.one { position: relative; background: var(--dark); color: var(--white); padding: clamp(64px, 6.5vw, 84px) var(--gutter) clamp(170px, 18vw, 235px); overflow: hidden; }
.one::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 165px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1774 230' preserveAspectRatio='none'%3E%3Cpath d='M0 2C180-6 380 10 560 70S760 140 900 120 1400 40 1774 50V230H0z' fill='%2393AB8E'/%3E%3Cpath d='M0 76C200 96 380 160 560 166S900 120 1100 92 1500 66 1774 78V230H0z' fill='%23F7F2E9'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
.one .inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.14fr); column-gap: clamp(28px, 3.6vw, 50px); align-items: center; }
.one .inner::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; width: 2px; background: var(--gold); opacity: .85; }
.one .inner > .stack { grid-column: 1; grid-row: 1; gap: 0; padding-bottom: clamp(20px, 4vw, 56px); padding-right: clamp(8px, 1.6vw, 22px); }
.one .inner > :last-child { grid-column: 3; grid-row: 1; }
.one .inner > * { margin-block-start: 0 !important; }
.one .eyebrow { color: var(--gold); font-size: clamp(13px, 1.15vw, 15px); letter-spacing: 3px; font-weight: 700; }
.one .eyebrow::after { content: ""; display: block; width: clamp(64px, 7.4vw, 95px); height: 2px; margin-top: 18px; background: var(--gold); }
.one h2 { margin-top: 26px; font-size: clamp(40px, 4.9vw, 63px); line-height: 1.05; letter-spacing: -0.5px; white-space: nowrap; }
.one h2, .one h3, .one p { color: var(--white); }
/* The page's closing invitation: an ivory button so it stands out on the teal. */
.one .one-cta { margin-top: clamp(40px, 4vw, 52px); }
.one .one-cta .primary { background: var(--white); color: var(--accent); }
.one .one-cta .primary:hover { background: var(--gold); color: var(--ink); }
.one ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.4vw, 18px); font-size: clamp(16px, 1.55vw, 20.5px); line-height: 1.3; }
.one li { white-space: nowrap; }
.one li em { font-style: italic; }
.one h3.one-last { position: relative; display: inline-block; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(24px, 2.45vw, 31px); line-height: 1.2; white-space: nowrap; }
/* Her stroke, lifted from the mock; "lighten" lets the band's teal show through the crop's darker teal. */
.one h3.one-last::after { content: ""; position: absolute; left: 38%; width: 52%; bottom: -0.95em; height: 0.85em; background: url("../img/home/one-stroke.png") center / 100% 100% no-repeat; }
/* The faint heart emblem top right, cut by the edge: the heart from her logo (left 210px of the lockup),
   turned to a pale silhouette. */
.one::before { content: ""; position: absolute; top: clamp(24px, 3vw, 40px); right: -90px; width: 360px; height: 378px; background: url("../img/logo-header.png") -34px -171px / 2126px auto no-repeat; filter: brightness(0) invert(1); opacity: .06; pointer-events: none; }
@media (max-width: 820px) {
  .one .inner { grid-template-columns: 1fr; row-gap: 32px; }
  .one .inner::before { display: none; }
  .one .inner > .stack, .one .inner > :last-child { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .one h2, .one li, .one h3.one-last { white-space: normal; }
}

/* Let's talk */
.contact .head { display: grid; gap: 18px; }
.contact .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; align-items: start; }
.booking { border: 1px solid var(--line); border-radius: 3px; padding: 26px; display: grid; gap: 16px; }
.booking h3 { font-size: 23px; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots span { border: 1px solid var(--line); border-radius: 2px; padding: 10px 6px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.booking .small, .contact .small { font-size: 13px; color: var(--muted); }
form label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
form input, form textarea { width: 100%; padding: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--soft); font: 16px var(--sans); border-radius: 2px; }
form input:focus, form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
form .primary { margin-top: 18px; }
#form-status, .form-status { margin-top: 14px; font-size: 14px; min-height: 1.5em; }
@media (max-width: 820px) { .contact .cols { grid-template-columns: 1fr; } .slots { grid-template-columns: repeat(2, 1fr); } }
/* Let's Talk (November 2026): a warm blush-to-sage wash, her heart stamp large and faint behind the
   opening, the booking calendar in a white card with a terracotta top, the note in a sage card with a
   gold top, a client quote, and the sage waves into the footer. */
.contact.lt { position: relative; overflow: hidden; background: linear-gradient(180deg, #F6E6DC 0%, var(--bg) 46%, #E6E9DF 100%); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(150px, 16vw, 210px); }
.contact.lt::before { content: ""; position: absolute; top: clamp(90px, 10vw, 140px); right: max(var(--gutter, 24px), calc((100% - 1180px) / 2)); width: clamp(210px, 24vw, 330px); aspect-ratio: 1 / 1.05; background: url("../img/logo-header.png") 0 0 / auto 100% no-repeat; background-size: 500% auto; background-position: 1.5% 46%; clip-path: polygon(0 0, 100% 0, 100% 38%, 85.5% 38%, 85.5% 100%, 0 100%); opacity: .16; pointer-events: none; }
.contact.lt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 165px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1774 230' preserveAspectRatio='none'%3E%3Cpath d='M0 2C180-6 380 10 560 70S760 140 900 120 1400 40 1774 50V230H0z' fill='%2393AB8E'/%3E%3Cpath d='M0 76C200 96 380 160 560 166S900 120 1100 92 1500 66 1774 78V230H0z' fill='%23F7F2E9'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
.contact.lt .inner { position: relative; z-index: 1; }
.lt .head .eyebrow { color: var(--clay); font-weight: 700; letter-spacing: 3px; }
.lt .head h1 { font-size: clamp(40px, 5.4vw, 66px) !important; line-height: 1.08 !important; }
.lt .head .lead { font: italic clamp(20px, 2vw, 24px)/1.4 var(--serif); color: var(--accent); }
.lt .head + .stack { max-width: 720px; padding: 24px 28px; background: rgba(251, 248, 242, .85); border-left: 4px solid var(--gold); border-radius: 6px; }
.lt .head + .stack h2 { margin: 0 0 10px; }
.lt .head + .stack .lead { font-size: 19px; max-width: none; }
.lt .booking .small { font-size: 16px; }
.lt .note-form .wpforms-field-label { font: 600 17px/1.4 var(--sans) !important; color: var(--ink) !important; }
.lt .note-form .wpforms-field input, .lt .note-form .wpforms-field textarea { font: 400 18px/1.5 var(--sans) !important; color: var(--ink) !important; }
.lt .note-form .wpforms-field input { height: auto !important; padding: 12px 14px !important; }
.lt .note-form button.wpforms-submit { font: 700 17px/1 var(--sans) !important; height: auto !important; padding: 16px 26px !important; }
.lt .cols { margin-top: 44px; gap: 32px; }
.lt .booking { background: var(--white); border: 0; border-top: 5px solid var(--clay); border-radius: 10px; padding: 30px; box-shadow: 0 16px 40px rgba(48, 54, 53, .12); }
.lt .booking h3, .lt .lt-side h3 { font-size: clamp(26px, 2.6vw, 32px); }
.lt-side { display: grid; gap: 24px; align-content: start; }
.lt-side > * { margin: 0 !important; }
.lt .note-form { background: #E6E9DF; border-top: 5px solid var(--gold); border-radius: 10px; padding: 30px; }
.lt-quote { padding: 24px 28px; background: var(--dark); border-radius: 10px; color: var(--white); }
.lt-quote p { margin: 0; font: italic clamp(19px, 1.9vw, 23px)/1.45 var(--serif); color: var(--white); }
.lt-quote cite { display: block; margin-top: 10px; font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.lt-quote .text-link { margin-top: 14px; color: var(--white); border-bottom-color: var(--gold); }
@media (max-width: 820px) { .contact.lt::before { opacity: .1; } }

/* Footer: two spans like the concept */
footer.site { padding: 25px var(--gutter); font-size: 13px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); }
footer.site p { margin: 0; }

/* Inner pages and posts (page.html, single.html, index.html): the concept has none, so these follow its rules */
.entry-page .inner, .entry-post .inner, .not-found .inner { max-width: 760px; margin: 0 auto; }
.prose .wp-block-post-content > * + * { margin-block-start: 1em; }
.prose .wp-block-post-content h2, .prose .wp-block-post-content h3 { margin-top: 1.4em; }
.prose .wp-block-post-content ul, .prose .wp-block-post-content ol { padding-left: 1.2em; }
.prose .wp-block-post-content a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.post-image img { border-radius: 4px 100px 4px 4px; }
.post-list .insights-grid { margin-top: 32px; }
/* This month's Practice on Insights: one topic, two ways to read it, side by side. */
.tm-feature { margin-top: 40px; padding: clamp(26px, 3.5vw, 44px); background: #E6E9DF; border-radius: 12px; }
.tm-eyebrow { font: 700 12px/1.3 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--clay); }
.tm-title { margin-top: 10px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
.tm-lead { margin-top: 10px; font: italic clamp(18px, 1.7vw, 21px)/1.45 var(--serif); color: var(--accent); }
.tm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.tm-card { display: flex; flex-direction: column; background: var(--bg); border-radius: 10px; overflow: hidden; border-top: 4px solid var(--gold); box-shadow: 0 8px 24px rgba(48, 54, 53, .08); transition: transform .2s ease, box-shadow .2s ease; }
.tm-long { border-top-color: var(--clay); }
.tm-card:hover, .tm-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(48, 54, 53, .14); }
.tm-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.tm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-thumb-news img { object-position: top; }
.tm-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 26px; }
.tm-kind { font: 400 clamp(24px, 2.4vw, 30px)/1.2 var(--serif); color: var(--accent); }
.tm-time { font: 700 12px/1.3 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--clay); }
.tm-desc { margin-top: 4px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.tm-go { margin-top: 10px; align-self: flex-start; font: 600 15px/1.4 var(--sans); color: var(--accent); border-bottom: 1px solid var(--accent); }
.insights .in-all { margin-top: 56px; font-size: clamp(26px, 2.8vw, 34px); }
@media (max-width: 760px) { .tm-pair { grid-template-columns: 1fr; } }
@media (min-width: 761px) { .insights .in-lead, .tm-lead { white-space: nowrap; } } /* one line on laptops and tablets, at her ask */
.tm-lead { font-size: clamp(14px, calc((100vw - 240px) / 48), 21px); }
/* Insights (November 2026): the newest story as a wide featured card, the rest in a two-column grid with
   room for many more; each card has its image, date, title, a short excerpt and "Read the story". */
.insights .in-lead { margin-top: 12px; max-width: none; font: italic clamp(14px, calc((100vw - 150px) / 55), 20.5px)/1.45 var(--serif); color: var(--accent); }
.in-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 40px 0 0 !important; padding: 0; list-style: none; }
.in-grid > li { margin: 0 !important; }
.in-card { height: 100%; background: #FBF8F2; border: 1px solid var(--line); border-top: 4px solid var(--clay); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.in-grid > li:nth-child(3n+2) .in-card { border-top-color: var(--gold); }
.in-grid > li:nth-child(3n) .in-card { border-top-color: var(--accent); }
.in-image { margin: 0 !important; aspect-ratio: 16 / 9; overflow: hidden; }
.in-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in-text { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.in-text > * { margin: 0 !important; }
.in-date { font: 700 12px/1.3 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--clay); }
.in-title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.in-title a { color: var(--accent); }
.in-title a:hover { color: var(--clay); }
.in-excerpt { font-size: 17px; line-height: 1.6; }
.in-excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 12px; font: 600 15px/1.4 var(--sans); color: var(--accent); border-bottom: 1px solid var(--accent); }
/* The newest story spans the full width, image on the left. */
.in-grid > li:first-child { grid-column: 1 / -1; }
.in-grid > li:first-child .in-card { display: grid; grid-template-columns: 1.1fr 1fr; }
.in-grid > li:first-child .in-image { aspect-ratio: auto; min-height: 320px; }
.in-grid > li:first-child .in-text { justify-content: center; padding: 36px 40px; }
.in-grid > li:first-child .in-title { font-size: clamp(30px, 3.4vw, 42px); }
@media (max-width: 820px) { .in-grid { grid-template-columns: 1fr; } .in-grid > li:first-child .in-card { display: flex; } .in-grid > li:first-child .in-image { aspect-ratio: 16 / 9; min-height: 0; } }
/* Articles: a comfortable reading column; pull quotes as a sage panel with a gold edge, lists as a practice box. */
.tm-draft { margin-top: 8px; align-self: flex-start; font: 700 11px/1.3 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--clay); border: 1px solid var(--clay); border-radius: 10px; padding: 3px 8px; }
.post-list .service h3 a { color: var(--accent); }
.post-list .service h3 a:hover { color: var(--clay); }
.pagination { margin-top: 36px; font-size: 15px; font-weight: 600; color: var(--accent); }
.pagination a { border-bottom: 1px solid var(--accent); padding: 4px 0; }

/* Her logo in the header (patterns/brand.php), her October 2026 version. The image (1240x413) has wide
   clear margins, so the link is a window onto the logo itself (x 20 to 1232, y 100 to 320) and --w is
   that window's width: about 53px tall on desktop, 37px on phones. */
.brand-logo { --w: 320px; line-height: 0; display: block; flex: 0 0 auto; width: var(--w); aspect-ratio: 1212 / 220; overflow: hidden; }
.brand-logo img { width: calc(var(--w) * 1240 / 1212); max-width: none; height: auto; display: block; margin: calc(var(--w) * -100 / 1212) 0 0 calc(var(--w) * -20 / 1212); }
@media (max-width: 900px) { .brand-logo { --w: 240px; } }
@media (max-width: 380px) { .brand-logo { --w: 205px; } }

/* Grid children: WordPress adds a flow gap before every sibling; the concept's grids set their own gaps. */
.services > * + *, .mapgrid > * + *, .insights-grid > * + *, .cols > * + *, .two > * + * { margin-block-start: 0; }
/* The map arrow is a text glyph; Gelasio has none, so fall back to a system face for that span. */
.map-item .ar { font-family: system-ui, "Segoe UI", Arial, sans-serif; }
/* Loose paragraphs typed into an inner page get normal spacing (the patterns manage their own). */
.entry-page .wp-block-post-content > * + * { margin-block-start: 1em; }

/* Inner pages carry their own h1 at section-heading size; the hero keeps the big one. */
h1.page-title, .site-main h1:not(.hero h1) { font-size: clamp(30px, 4vw, 44px); line-height: 1.13; letter-spacing: -0.5px; }
.coaching h1 { text-transform: uppercase; letter-spacing: .5px; font-size: clamp(28px, 3.6vw, 40px); }
/* Home page teasers */
.actions p { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: 0; }
.insights-latest .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; list-style: none; padding: 0; }
.insights-latest .insights-grid > li { margin: 0; }
.insights-latest .topic a { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.insights-latest h3 a { color: var(--accent); }
.insights-latest .wp-block-post-excerpt__more-link { font-size: 15px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent); }
.insights-latest .wp-block-post-excerpt__excerpt { font-size: 16px; }
@media (max-width: 900px) { .insights-latest .insights-grid { grid-template-columns: 1fr; } }
.cta .stack { align-items: start; }
/* Map arrows: drawn with CSS so they never depend on a font having the glyph. */
.map-item .ar { display: inline-block; width: 1.2rem; height: 1.2rem; font-size: 0; color: transparent; vertical-align: middle; background: var(--clay); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Social links: small caps text links, the nav's register, in the footer and under the About truths. No icon row. */
.footer-social { display: flex; flex-wrap: wrap; gap: 18px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }
.footer-social a { color: var(--muted); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--accent); border-bottom-color: var(--clay); }
.elsewhere { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-top: 26px; }
.elsewhere a { color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.elsewhere a:hover, .elsewhere a:focus-visible { border-bottom-color: var(--clay); }

/* About, "My Story" (her refined November 2026 mock): an ivory opener with the title over a short gold
   rule and her photo right in a tall rounded frame; a row of four jump links over a hairline; each part of
   the story with a small two-line label and short rule on the left and the reading column on the right;
   a centred teal band for the turning line; the sun line set off by a terracotta bar; a sage close. */
/* The opener sits close under the header (like Home and the Map), the words larger so they hold their
   half beside the photo: a gold eyebrow, the big title, a gold rule, her three questions, and the
   closing line in italic serif. */
.ms-hero { padding-top: clamp(8px, 1vw, 16px); padding-bottom: 0; }
.ms-hero .inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.ms-hero .stack { padding-top: 6px; } /* title level with the top of the photo */
.ms-hero .inner > * { margin-block-start: 0 !important; }
.ms-hero .stack { gap: 0; }
.ms-hero .eyebrow { font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 3px; font-weight: 700; color: var(--clay); }
.site-main .ms-hero h1.page-title, .ms-hero h1.page-title { margin-top: 0; white-space: nowrap; font-size: clamp(36px, 4.7vw, 62px); line-height: 1.06; letter-spacing: -1px; }
.ms-hero .page-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 26px; background: var(--gold); }
.ms-hero .ms-lead { margin-top: 26px; font-size: clamp(18px, 1.75vw, 22px); line-height: 1.55; color: var(--ink); }
.ms-hero .stack > p:last-child { margin-top: 20px; font: italic clamp(19px, 1.75vw, 23px)/1.4 var(--serif); color: var(--accent); }
.ms-photo { position: relative; aspect-ratio: 7 / 8.5; border-radius: 90px; overflow: hidden; background: var(--soft); }
.ms-photo figure { position: absolute; inset: 0; margin: 0 !important; }
.ms-photo figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% 30%; }
/* The four jump links as soft rounded tabs in the serif, a little larger, each with a small arrow that
   drops on hover; the hairline under the row stays. */
.ms-jump { max-width: 1180px; margin: clamp(28px, 3.5vw, 40px) auto 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(12px, 1.6vw, 20px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
/* Teal buttons with the site's button lettering (her ask, November 2026), on the About and Map pages. */
.ms-jump a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); font: 600 15px/1.4 var(--sans); color: var(--white); transition: background .2s ease, border-color .2s ease; }
.ms-jump a::after { content: "↓"; font: 600 14px/1 var(--sans); color: var(--gold); transition: transform .2s ease; }
.ms-jump a:hover, .ms-jump a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ms-jump a:hover::after, .ms-jump a:focus-visible::after { color: var(--gold); transform: translateY(2px); }
.ms-close .ms-cta .primary { padding: 16px 30px; font: 400 19px/1.2 var(--serif); }
.ms-story { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(12px, 2vw, 24px); scroll-margin-top: 90px; }
.ms-story + .ms-band { margin-top: clamp(28px, 4vw, 48px); }
.ms-band + .ms-story { padding-top: clamp(40px, 5vw, 64px); }
.ms-story .inner { display: grid; grid-template-columns: 170px minmax(0, 700px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ms-story .inner > *, .ms-body > * { margin-block-start: 0 !important; }
.ms-label { padding-top: 10px; font-size: 11.5px; line-height: 1.6; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; color: var(--accent); }
/* Her November 2026 story: each section's name is its heading, in the left column, in the serif. */
h2.ms-label { padding-top: 2px; font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
h2.ms-label.ms-clay { color: #8F4A33; }
.ms-body > p:first-child { margin-top: 0 !important; }
/* Training and background: a compact two-column list with small terracotta markers. */
.ms-creds { margin: 18px 0 0 !important; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 28px; }
/* The training section uses the full width: the intro on one line, nine credentials as three even rows of three. */
#training .inner { grid-template-columns: 170px minmax(0, 1fr); }
@media (min-width: 1000px) { #training .ms-body > p:first-child { white-space: nowrap; } }
@media (max-width: 900px) { .ms-creds { grid-template-columns: 1fr 1fr; } }
.ms-creds li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.45; }
.ms-creds li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
@media (max-width: 600px) { .ms-creds { grid-template-columns: 1fr; } }
/* Training logos: small, in a soft highlighted box, in a row that wraps. */
.ms-logos { margin-top: 28px !important; }
.ms-body .ms-logos .ms-logos-title { margin: 0 0 14px !important; font: 700 12px/1.3 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
/* Each logo sits in the same small slot so wide wordmarks and tall marks look evenly sized. */
.ms-logos-row { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center; gap: 20px 18px; }
.ms-logos-row img { display: block; width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
@media (max-width: 700px) { .ms-logos-row { grid-template-columns: repeat(3, 1fr); } }
/* Her original hand-drawn map, framed like a page from the sketchbook. */
.ms-sketch { margin: 28px 0 0 !important; }
/* Faint pencil on grey paper: lift the paper to white and darken the pencil so it reads clearly,
   with a little more colour in the heart and the red RESET circle. */
.ms-sketch img { display: block; width: 100%; height: auto; border-radius: 6px; border: 8px solid var(--white); box-shadow: 0 14px 36px rgba(48, 54, 53, .2); filter: brightness(.97) contrast(1.45) saturate(1.15); }
.ms-sketch figcaption { margin-top: 12px; font: italic 16px/1.4 var(--serif); color: var(--muted); text-align: center; }
.ms-label::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 14px; background: var(--accent); }
.ms-label.ms-clay::after { background: var(--clay); }
.ms-body h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; }
.ms-body p { margin-top: 16px !important; font-size: 19px; line-height: 1.65; }
.ms-body h2 + p { margin-top: 20px !important; }
.ms-body .ms-sun { margin: 40px 0 18px 4px !important; padding-left: 18px; border-left: 3px solid var(--clay); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; color: var(--accent); }
.ms-band { background: var(--dark); padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(40px, 5vw, 60px); }
.ms-band .inner { max-width: 860px; text-align: center; }
.ms-band p { font: 400 clamp(22px, 2.5vw, 30px)/1.4 var(--serif); color: var(--white); }
/* The close flows on from the story (same label and reading column) on sage, keeping the home page's
   faint heart top right and its deeper sage and ivory waves easing into the footer. */
.ms-story.ms-close { position: relative; overflow: hidden; background: var(--soft); margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(150px, 16vw, 210px); scroll-margin-top: 90px; }
.ms-close .inner { position: relative; z-index: 1; }
.ms-close::before { content: ""; position: absolute; top: clamp(16px, 2vw, 28px); right: -90px; width: 360px; height: 378px; background: url("../img/logo-header.png") -34px -171px / 2126px auto no-repeat; filter: brightness(0); opacity: .05; pointer-events: none; }
.ms-close .ms-cta { margin-top: 28px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.ms-close::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 165px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1774 230' preserveAspectRatio='none'%3E%3Cpath d='M0 2C180-6 380 10 560 70S760 140 900 120 1400 40 1774 50V230H0z' fill='%2393AB8E'/%3E%3Cpath d='M0 76C200 96 380 160 560 166S900 120 1100 92 1500 66 1774 78V230H0z' fill='%23F7F2E9'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; pointer-events: none; }
@media (max-width: 820px) {
  .ms-hero .inner, .ms-story .inner { grid-template-columns: 1fr; }
  .ms-photo { max-width: 380px; width: 100%; justify-self: center; }
  .ms-hero br, .ms-band br, .ms-label br, .ms-sun br { display: none; }
  .site-main .ms-hero h1.page-title, .ms-hero h1.page-title { white-space: normal; }
  .ms-jump { margin-left: var(--gutter) !important; margin-right: var(--gutter) !important; }
  .ms-jump a { padding: 10px 16px; }
}

/* About: her story as a reading column (patterns/about-story.php). Short paragraphs are her rhythm, so
   paragraph spacing is tight; stanzas, pull quotes and the aside card give the eye places to land. */
.about-story { padding-top: 56px; }
.story p { font-size: 19px; line-height: 1.6; margin: 0 0 14px; max-width: 640px; }
.story h2 { font: 400 clamp(26px, 3vw, 32px)/1.2 var(--serif); color: var(--accent); letter-spacing: -0.3px; margin: 54px 0 18px; max-width: 640px; }
.story > h2:first-child { margin-top: 0; }
.story .stanza { font: italic 20px/1.5 var(--serif); color: var(--accent); margin: 18px 0 22px; }
.story .pullquote { margin: 18px 0 22px; padding: 0; border: 0; max-width: 640px; }
.story .pullquote p { font: italic 20px/1.5 var(--serif); color: var(--accent); margin: 0; max-width: none; }
.story .aside-card { display: inline-block; margin: 14px 0 26px; padding: 12px 19px; background: var(--bg); border-left: 5px solid var(--clay); border-bottom: 3px solid var(--clay); font: italic 23px/1.2 var(--serif); color: var(--ink); }
.story .inner-voice { margin-top: 44px; }
.story .inner-voice blockquote p { font: inherit; color: inherit; margin: 0; max-width: none; }
.story .signoff { font: italic 22px/1.4 var(--serif); color: var(--accent); margin: 34px 0 10px; }
.story .signoff strong { font-style: normal; font-weight: 400; color: var(--ink); }
.story .training { font-size: 13px; color: var(--muted); margin: 0 0 30px; }
@media (max-width: 600px) { .story h2 { margin-top: 44px; } }

/* About bands: the opener holds the photo and the first chapter side by side (photo rides along), then the
   story alternates ivory, dark teal and sage like the home page. */
.about.about-open .inner { align-items: start; }
.about.about-open .portrait-col { position: sticky; top: 100px; }
.about.about-open .story h2 { margin-top: 38px; }
.about.about-open .story p { max-width: 600px; }
.about.about-open .story .lead { font-size: 19px; margin-bottom: 8px; }
.about-story.dark { background: var(--dark); }
.about-story.dark .story h2, .about-story.dark .story p, .about-story.dark .story strong, .about-story.dark .story a { color: var(--white); }
.about-story.dark .story .stanza { color: var(--gold); }
.about-story.dark .story .pullquote p { color: var(--gold); }
.about-story.dark .story a.text-link { border-bottom-color: var(--gold); }
.about-story.sage { background: var(--soft); }
.about-story.sage .story .aside-card, .about.about-open .story .aside-card { background: var(--white); }
@media (max-width: 900px) { .about.about-open .portrait-col { position: static; } }
.about.about-open .stack.story { display: block; }
.about.about-open .stack.story .eyebrow { margin-bottom: 10px; }
.about.about-open .stack.story .page-title { margin-bottom: 14px; }

/* Posts in Adrianne's article design (sizes, spacing and colours from her own page, November 2026).
   The text format gives the pieces: a labelled pull quote, pictures with captions, and the boxes
   practice, reflection, cta, bio and note as post-box groups. */
.post-masthead { background: var(--accent); color: var(--bg); text-align: center; padding: 22px 16px 24px; }
.post-masthead p { margin: 0; color: var(--bg); }
.pm-brand { font: 400 13px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.pm-name { font: italic 38px/1.15 var(--serif); margin-top: 4px !important; }
.pm-tag { font: 400 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px !important; opacity: .9; }
.entry-post { padding-top: 0; }
.entry-post .post-hero { max-width: 1120px; margin: 38px auto 0; padding: 0 22px; }
.post-eyebrow { font: 700 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--clay); margin: 0; }
.post-hero .post-title { font-size: clamp(39px, 5vw, 68px); line-height: 1.1; color: var(--accent); margin: 13px 0 10px; max-width: 920px; }
.post-subtitle { font: italic clamp(20px, 2vw, 24px)/1.35 var(--serif); color: var(--clay); margin: 0 0 12px; }
.post-byline { font: 400 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.post-hero .post-image img { width: 100%; height: auto; display: block; margin-top: 28px; border-radius: 14px; }
.entry-post .inner.prose { max-width: 770px; margin: 0 auto; padding: 35px 24px 85px; }
.prose .wp-block-post-content > * + * { margin-block-start: 0; }
.prose .wp-block-post-content p { font: 400 19px/1.8 var(--serif); margin: 0 0 22px; }
.prose .wp-block-post-content h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.25; color: var(--accent); margin: 65px 0 22px; }
.prose .wp-block-post-content > h2:first-child { margin-top: 20px; }
.prose .wp-block-post-content strong { color: var(--accent); }
.prose .wp-block-post-content ul, .prose .wp-block-post-content ol { margin: 0 0 22px; padding-left: 1.4em; font: 400 19px/1.7 var(--serif); }
.prose .wp-block-post-content li { margin: 0 0 10px; }
.prose .wp-block-post-content blockquote { display: flex; flex-direction: column; margin: 45px -18px; padding: 30px; background: #E6E9DF; border-left: 5px solid var(--gold); border-radius: 6px; text-align: center; }
.prose .wp-block-post-content blockquote p { font: italic clamp(22px, 2.4vw, 30px)/1.4 var(--serif); color: var(--accent); margin: 0; }
.prose .wp-block-post-content blockquote cite { order: -1; display: block; font: 700 12px/1.3 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin-bottom: 14px; }
.prose .wp-block-post-content .wp-block-image { margin: 48px -35px; }
.prose .wp-block-post-content .wp-block-image img { width: 100%; height: auto; border-radius: 10px; display: block; }
.prose .wp-block-post-content .wp-block-image figcaption { margin-top: 10px; font: italic 14px/1.4 var(--serif); color: var(--muted); text-align: center; }
.post-box { border-radius: 16px; }
.post-box > * { margin-block-start: 0; }
.post-box > :last-child { margin-bottom: 0 !important; }
.prose .wp-block-post-content .post-box-label { font: 700 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--clay); margin: 0 0 10px; }
.prose .wp-block-post-content .post-box h2 { margin: 10px 0 15px; font-size: clamp(26px, 2.8vw, 32px); }
.post-box-practice { background: #E5E9E1; padding: 32px 38px; margin: 55px -24px; }
.prose .wp-block-post-content .post-box-practice ol, .prose .wp-block-post-content .post-box-practice ul { padding-left: 26px; margin-bottom: 22px; }
.prose .wp-block-post-content .post-box-practice li { margin: 0 0 24px; padding-left: 6px; }
.prose .wp-block-post-content .post-box-practice li strong { display: block; color: var(--accent); margin-bottom: 4px; }
.post-box-reflection { background: #F0E1D5; padding: 26px 32px; margin: 48px 0; }
.prose .wp-block-post-content .post-box-reflection h2 { margin: 0 0 12px; }
.post-box-cta { background: var(--accent); padding: 34px; margin: 50px 0; }
.prose .wp-block-post-content .post-box-cta h2, .prose .wp-block-post-content .post-box-cta p, .prose .wp-block-post-content .post-box-cta strong { color: #fff; }
.prose .wp-block-post-content .post-box-cta .post-box-label { color: var(--bg); opacity: .85; }
.prose .wp-block-post-content .post-box-cta a { display: inline-block; background: #fff; color: var(--accent); border: 0; padding: 12px 22px; border-radius: 999px; font: 600 16px/1.2 var(--sans); }
.post-box-bio { border: 1px solid var(--line); padding: 24px 28px; margin: 40px 0; }
.prose .wp-block-post-content .post-box-bio p { font-size: 16px; line-height: 1.6; }
.post-box-note { background: #E6E9DF; padding: 24px 28px; margin: 40px 0; }
@media (max-width: 820px) {
  .prose .wp-block-post-content blockquote, .prose .wp-block-post-content .wp-block-image, .post-box-practice { margin-left: 0; margin-right: 0; }
  .post-box-practice, .post-box-cta, .post-box-reflection { padding: 24px 22px; }
  .prose .wp-block-post-content p, .prose .wp-block-post-content ul, .prose .wp-block-post-content ol { font-size: 18px; }
}