/* Divergent Therapy: one stylesheet.
   Look (DESIGN.md): warm paper, dark readable text, and the olive tree as the only ornament: ink-textured olives
   in their real colours, long olive leaves, black-ink branches like the logo. Texture lives only in the olives and
   leaves, never behind text. Calm: motion is slow, small, and off for people who prefer reduced motion. */

@font-face { font-family: "Source Sans 3"; src: url("assets/fonts/SourceSans3-var.woff2?v=9ef356ea") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("assets/fonts/SourceSans3-italic.woff2?v=410bdda6") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Didact Gothic"; src: url("assets/fonts/DidactGothic-400.woff2?v=30b9dee9") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #f7f4ed;        /* warm paper ground */
  --paper-2: #efe9dc;      /* footer */
  --sage: #e2e8da;         /* the one quiet surface (bands) */
  --ink: #252b28;          /* body text: 13.4:1 on paper */
  --ink-2: #4b524c;        /* secondary text: 7.4:1 on paper, 6.3:1 on sage */
  --olive: #4d581f;        /* the logo's olive: headings, 6.9:1 on paper */
  --olive-deep: #3a4316;   /* links: 9.4:1 on paper */
  --clay: #8a4d32;         /* the logo's "D" */
  --red: #8f3a2a;          /* round 3: earthy red accent, used sparingly (Contact link, a few small marks): 7.1:1 on paper */
  --sage-2: #d6dfcb;       /* footer middle column */
  --wood: #1f1b17;         /* branches, like the logo's black wood */
  --grove: #3b4522;        /* the opening strip: deep olive grove */
  --on-grove: #ece8da;     /* text on the grove: 10.6:1 */
  --on-grove-2: #cfd3c0;   /* quieter text on the grove: 8.3:1 */
  --focus: #1f1b17;
  --font-head: "Didact Gothic", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;   /* round 2: plain, compact, readable (no slashed zero) */
  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-section: clamp(2.75rem, 6vw, 4.75rem);
  --wrap: 1140px;
  --edge: clamp(22px, 3vw, 40px);
  /* Hand-drawn edges (from the Intrinsic Change site), recoloured for the olive palette */
  --wave-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C140%2C14%20260%2C44%20420%2C26%20C580%2C8%20720%2C40%20880%2C24%20C1010%2C11%201110%2C30%201200%2C18%20V60%20H0%20Z%27%2F%3E%3C%2Fsvg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C0%20H1200%20V36%20C1080%2C52%20980%2C22%20820%2C38%20C660%2C54%20540%2C20%20380%2C36%20C230%2C50%20110%2C24%200%2C40%20Z%27%2F%3E%3C%2Fsvg%3E");
  --ink-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C5.3%20L25.9%2C5.2%20L50.9%2C5.2%20L75.8%2C5.2%20L100.8%2C5.2%20L125.7%2C5.1%20L150.7%2C5.0%20L175.6%2C5.0%20L200.6%2C4.9%20L225.5%2C4.8%20L250.4%2C4.8%20L275.4%2C4.8%20L300.3%2C4.9%20L325.3%2C5.0%20L350.2%2C5.2%20L375.2%2C5.4%20L400.1%2C5.6%20L425.1%2C5.9%20L450.0%2C6.1%20L474.9%2C6.3%20L499.9%2C6.4%20L524.8%2C6.4%20L549.8%2C6.4%20L574.7%2C6.4%20L599.7%2C6.2%20L624.6%2C6.0%20L649.6%2C5.8%20L674.5%2C5.5%20L699.4%2C5.3%20L724.4%2C5.1%20L749.3%2C5.0%20L774.3%2C5.1%20L799.2%2C5.2%20L824.2%2C5.2%20L849.1%2C5.2%20L874.1%2C5.2%20L899.0%2C5.3%20L899.0%2C5.4%20L874.1%2C5.4%20L849.1%2C5.3%20L824.2%2C5.3%20L799.2%2C5.3%20L774.3%2C5.5%20L749.3%2C5.8%20L724.4%2C6.0%20L699.4%2C6.2%20L674.5%2C6.4%20L649.6%2C6.6%20L624.6%2C6.8%20L599.7%2C7.0%20L574.7%2C7.2%20L549.8%2C7.3%20L524.8%2C7.5%20L499.9%2C7.6%20L474.9%2C7.6%20L450.0%2C7.7%20L425.1%2C7.7%20L400.1%2C7.8%20L375.2%2C7.8%20L350.2%2C7.8%20L325.3%2C7.9%20L300.3%2C7.9%20L275.4%2C7.9%20L250.4%2C7.9%20L225.5%2C7.9%20L200.6%2C7.9%20L175.6%2C7.8%20L150.7%2C7.6%20L125.7%2C7.4%20L100.8%2C7.1%20L75.8%2C6.8%20L50.9%2C6.4%20L25.9%2C6.0%20L1.0%2C5.5Z%27%20fill%3D%27%238a7a62%27%20fill-opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
  --brush-under: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.3%20L17.6%2C4.1%20L25.8%2C3.9%20L34.1%2C3.8%20L42.4%2C3.6%20L50.7%2C3.4%20L58.9%2C3.2%20L67.2%2C3.0%20L75.5%2C2.9%20L83.8%2C2.7%20L92.1%2C2.7%20L100.3%2C2.7%20L108.6%2C2.7%20L116.9%2C2.8%20L125.2%2C3.0%20L133.4%2C3.2%20L141.7%2C3.4%20L150.0%2C3.6%20L158.3%2C3.8%20L166.6%2C4.0%20L174.8%2C4.1%20L183.1%2C4.3%20L191.4%2C4.3%20L199.7%2C4.4%20L207.9%2C4.4%20L216.2%2C4.4%20L224.5%2C4.4%20L232.8%2C4.4%20L241.1%2C4.4%20L249.3%2C4.5%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.0%20L207.9%2C5.0%20L199.7%2C5.0%20L191.4%2C5.0%20L183.1%2C4.9%20L174.8%2C4.9%20L166.6%2C4.9%20L158.3%2C4.8%20L150.0%2C4.8%20L141.7%2C4.7%20L133.4%2C4.7%20L125.2%2C4.7%20L116.9%2C4.7%20L108.6%2C4.8%20L100.3%2C4.8%20L92.1%2C4.9%20L83.8%2C5.0%20L75.5%2C5.1%20L67.2%2C5.2%20L58.9%2C5.2%20L50.7%2C5.2%20L42.4%2C5.2%20L34.1%2C5.2%20L25.8%2C5.1%20L17.6%2C5.0%20L9.3%2C4.9%20L1.0%2C4.7Z%27%20fill%3D%27%234d581f%27%20fill-opacity%3D%270.45%27%2F%3E%3C%2Fsvg%3E");
  --brush-under-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.2%20L17.6%2C4.0%20L25.8%2C3.8%20L34.1%2C3.5%20L42.4%2C3.3%20L50.7%2C3.1%20L58.9%2C2.9%20L67.2%2C2.7%20L75.5%2C2.5%20L83.8%2C2.4%20L92.1%2C2.3%20L100.3%2C2.3%20L108.6%2C2.4%20L116.9%2C2.5%20L125.2%2C2.7%20L133.4%2C2.9%20L141.7%2C3.2%20L150.0%2C3.4%20L158.3%2C3.6%20L166.6%2C3.9%20L174.8%2C4.0%20L183.1%2C4.2%20L191.4%2C4.3%20L199.7%2C4.3%20L207.9%2C4.3%20L216.2%2C4.3%20L224.5%2C4.3%20L232.8%2C4.3%20L241.1%2C4.3%20L249.3%2C4.4%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.1%20L207.9%2C5.1%20L199.7%2C5.1%20L191.4%2C5.1%20L183.1%2C5.0%20L174.8%2C5.0%20L166.6%2C5.0%20L158.3%2C4.9%20L150.0%2C4.9%20L141.7%2C4.9%20L133.4%2C4.9%20L125.2%2C5.0%20L116.9%2C5.0%20L108.6%2C5.1%20L100.3%2C5.2%20L92.1%2C5.3%20L83.8%2C5.3%20L75.5%2C5.4%20L67.2%2C5.5%20L58.9%2C5.5%20L50.7%2C5.5%20L42.4%2C5.5%20L34.1%2C5.4%20L25.8%2C5.3%20L17.6%2C5.1%20L9.3%2C5.0%20L1.0%2C4.7Z%27%20fill%3D%27%233a4316%27%20fill-opacity%3D%270.85%27%2F%3E%3C%2Fsvg%3E");
  --ink-line-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4.4%2C2%20C3.2%2C60%205.3%2C110%204%2C170%20C2.9%2C220%205.1%2C260%203.8%2C298%27%20fill%3D%27none%27%20stroke%3D%27%2376862f%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --brush-under-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.3%20L17.6%2C4.1%20L25.8%2C3.9%20L34.1%2C3.8%20L42.4%2C3.6%20L50.7%2C3.4%20L58.9%2C3.2%20L67.2%2C3.0%20L75.5%2C2.9%20L83.8%2C2.7%20L92.1%2C2.7%20L100.3%2C2.7%20L108.6%2C2.7%20L116.9%2C2.8%20L125.2%2C3.0%20L133.4%2C3.2%20L141.7%2C3.4%20L150.0%2C3.6%20L158.3%2C3.8%20L166.6%2C4.0%20L174.8%2C4.1%20L183.1%2C4.3%20L191.4%2C4.3%20L199.7%2C4.4%20L207.9%2C4.4%20L216.2%2C4.4%20L224.5%2C4.4%20L232.8%2C4.4%20L241.1%2C4.4%20L249.3%2C4.5%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.0%20L207.9%2C5.0%20L199.7%2C5.0%20L191.4%2C5.0%20L183.1%2C4.9%20L174.8%2C4.9%20L166.6%2C4.9%20L158.3%2C4.8%20L150.0%2C4.8%20L141.7%2C4.7%20L133.4%2C4.7%20L125.2%2C4.7%20L116.9%2C4.7%20L108.6%2C4.8%20L100.3%2C4.8%20L92.1%2C4.9%20L83.8%2C5.0%20L75.5%2C5.1%20L67.2%2C5.2%20L58.9%2C5.2%20L50.7%2C5.2%20L42.4%2C5.2%20L34.1%2C5.2%20L25.8%2C5.1%20L17.6%2C5.0%20L9.3%2C4.9%20L1.0%2C4.7Z%27%20fill%3D%27%238f3a2a%27%20fill-opacity%3D%270.45%27%2F%3E%3C%2Fsvg%3E");
  --brush-under-cream: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.3%20L17.6%2C4.1%20L25.8%2C3.9%20L34.1%2C3.8%20L42.4%2C3.6%20L50.7%2C3.4%20L58.9%2C3.2%20L67.2%2C3.0%20L75.5%2C2.9%20L83.8%2C2.7%20L92.1%2C2.7%20L100.3%2C2.7%20L108.6%2C2.7%20L116.9%2C2.8%20L125.2%2C3.0%20L133.4%2C3.2%20L141.7%2C3.4%20L150.0%2C3.6%20L158.3%2C3.8%20L166.6%2C4.0%20L174.8%2C4.1%20L183.1%2C4.3%20L191.4%2C4.3%20L199.7%2C4.4%20L207.9%2C4.4%20L216.2%2C4.4%20L224.5%2C4.4%20L232.8%2C4.4%20L241.1%2C4.4%20L249.3%2C4.5%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.0%20L207.9%2C5.0%20L199.7%2C5.0%20L191.4%2C5.0%20L183.1%2C4.9%20L174.8%2C4.9%20L166.6%2C4.9%20L158.3%2C4.8%20L150.0%2C4.8%20L141.7%2C4.7%20L133.4%2C4.7%20L125.2%2C4.7%20L116.9%2C4.7%20L108.6%2C4.8%20L100.3%2C4.8%20L92.1%2C4.9%20L83.8%2C5.0%20L75.5%2C5.1%20L67.2%2C5.2%20L58.9%2C5.2%20L50.7%2C5.2%20L42.4%2C5.2%20L34.1%2C5.2%20L25.8%2C5.1%20L17.6%2C5.0%20L9.3%2C4.9%20L1.0%2C4.7Z%27%20fill%3D%27%23e6dfc4%27%20fill-opacity%3D%270.45%27%2F%3E%3C%2Fsvg%3E");
  --ink-line-v-cream: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4.4%2C2%20C3.2%2C60%205.3%2C110%204%2C170%20C2.9%2C220%205.1%2C260%203.8%2C298%27%20fill%3D%27none%27%20stroke%3D%27%23b9bf8e%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");

}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }

/* Didact Gothic's kerning table adds a double-width gap before capitals ("What  I"): switch kerning off wherever it's used */
h1, h2, h3, .obtn, .nav-list a, .nav-toggle, .faq summary, .loose-list a, .more-link, .hero-more, .brand-tag, .promise, .statements, .footer-name, .copy-btn, .hero-sub { font-kerning: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.22; color: var(--olive); margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 1.4rem + 2.8vw, 3.35rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.2rem); }
.redcap::first-letter, .page-hero h1::first-letter, .post-head h1::first-letter, .footer-name::first-letter { color: var(--red); }
h3 { font-size: 1.25rem; color: var(--ink); font-family: var(--font-body); font-weight: 700; line-height: 1.35; }
p { margin: 0 0 1em; max-width: var(--measure); }
strong { font-weight: 700; }

a { color: var(--olive-deep); text-underline-offset: 0.22em; }
a:hover { color: var(--wood); }
/* links in running text get a hand-drawn brush underline, not a typed one */
:where(p, li, dd, figcaption, .note, summary) a:not([class]) {
  text-decoration: none; padding-bottom: 0.14em;
  background: var(--brush-under) left 100% / 100% 0.36em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:where(p, li, dd, figcaption, .note) a:not([class]):hover { background-image: var(--brush-under-hover); }
.footer-links a, .nav-list a { background: none; padding-bottom: 0; }
a[href^="tel:"]:not(.obtn), a[href^="mailto:"]:not(.obtn) { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.75rem 1rem; background: #fff; color: var(--ink); font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; }
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header { padding: 1rem 0 1.5rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.brand { display: block; margin-left: -0.6rem; border-radius: 12px; }
.brand { position: relative; margin-left: 0; text-decoration: none; }
.brand img { height: 108px; width: auto; }   /* whitespace trimmed from the logo file so it reads larger (round 3), and bigger again (round 4) */
/* round 5: the place line (for search) sits under the wordmark, beside the tree's roots */
.brand-tag { position: absolute; left: 38.5%; top: 66%; display: flex; flex-direction: column; font-family: var(--font-head); font-size: 0.84rem; line-height: 1.3; color: var(--ink-2); white-space: nowrap; letter-spacing: 0.01em; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin: 0; padding: 0; }
/* round 3: menu in the light heading face, like the logo, not bold */
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem;
  color: var(--ink); text-decoration: none; font-family: var(--font-head); font-size: 1.1rem; border-radius: 10px;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { background: var(--brush-under) center calc(100% - 6px) / calc(100% - 1.4rem) 0.36em no-repeat; }
.nav-list a[aria-current="page"] { color: var(--olive-deep); }
/* Contact: plain words in the earthy red with a red brush stroke (the olive button looked odd up here) */
.nav-contact { margin-left: 0.4rem; }
.nav-contact a, .nav-contact a[aria-current="page"] { color: var(--red); background: var(--brush-under-red) center calc(100% - 6px) / calc(100% - 1.4rem) 0.36em no-repeat; }
.nav-contact a:hover { color: #6e2a1d; }
.nav-toggle { display: none; }
/* Services drop-down: opens on hover or keyboard focus; on phones it is simply listed, indented */
.has-sub { position: relative; }
.has-sub > a::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin: -0.2em 0 0 0.45em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; opacity: 0.7; }
.sub { list-style: none; margin: 0; padding: 0.6rem 0.4rem 0.7rem; position: absolute; left: -0.3rem; top: 100%; z-index: 30; min-width: 17rem;
  background: var(--paper); border-radius: 18px 26px 20px 24px; box-shadow: 0 12px 28px -14px rgba(31, 27, 23, 0.45), 0 0 0 1px rgba(31, 27, 23, 0.06);
  visibility: hidden; opacity: 0; translate: 0 -4px; transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s; }
.sub a { display: flex; min-height: 40px; font-size: 1.05rem; white-space: nowrap; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }

/* ---------- Buttons: a real olive (stem at the fuller end) or a real olive leaf (stalk + midrib) ----------
   Drawn like every other olive on the site: a colour wash with a wobbly ink contour on top (see btn() in
   tools/site.cjs). Each button is its own unique shape. */
.obtn {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center; min-height: 44px;
  /* round 3: labels in the simple, light heading face (easier to read than bold); a faint shadow only */
  color: #fffaf0; font-family: var(--font-head); font-weight: 400; font-size: 1.18rem; line-height: 1.22; letter-spacing: 0.02em; text-align: center;
  text-decoration: none; -webkit-text-stroke: 0.35px currentColor;
  text-shadow: 0 0 7px rgba(20, 16, 12, 0.75), 0 1px 2px rgba(20, 16, 12, 0.7);
}
.obtn { grid-template-columns: minmax(0, 1fr); flex: none; max-width: 100%; white-space: normal; }
.obtn > span { position: relative; z-index: 1; min-width: 0; }
.obtn-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; --line: 1.5px; }
.btn-stem { fill: none; stroke: var(--wood); stroke-width: 2.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* olives: real olive proportions; the label wraps onto two lines inside the fruit */
.obtn--olive { width: var(--bw, 14rem); aspect-ratio: var(--ar); padding: 0.4rem 2.7rem 0 1.7rem; transform-origin: 95% 8%; }
.obtn--olive.obtn--sm { --bw: 10.75rem; font-size: 1rem; padding: 0.3rem 2.2rem 0 1.4rem; }
.obtn--olive.obtn--xs { --bw: 6.9rem; font-size: 0.98rem; padding: 0.5rem 1.2rem 0 0.7rem; }
/* leaves: wider than tall, the stalk on the left; the midrib shows only near the base and tip, never under the label */
.obtn--leaf { padding: 1.5rem 3.9rem 1.5rem 3.6rem; min-height: 74px; transform-origin: 0% 55%; }
.obtn--leaf.obtn--sm { padding: 1.05rem 3.1rem 1.05rem 2.9rem; min-height: 56px; font-size: 1.04rem; }
.obtn--leaf .rib { stroke-dasharray: 15 70 15 0; stroke-opacity: 0.55; }
/* the light inks carry dark labels */
.obtn--yellow, .obtn--silver { color: #15120f; text-shadow: 0 0 7px rgba(255, 252, 238, 0.9), 0 0 2px rgba(255, 252, 238, 0.9); }
.obtn:hover, .obtn:focus-visible { color: #fff; }
.obtn--yellow:hover, .obtn--silver:hover, .obtn--yellow:focus-visible, .obtn--silver:focus-visible { color: #000; }
.obtn:hover .wash, .obtn:focus-visible .wash { filter: brightness(0.8) saturate(1.12); }
.obtn--yellow:hover .wash, .obtn--silver:hover .wash, .obtn--yellow:focus-visible .wash, .obtn--silver:focus-visible .wash { filter: brightness(0.9) saturate(1.1); }
.obtn:focus-visible { outline-offset: 4px; border-radius: 50%; }
@media (forced-colors: active) {
  .obtn { border: 2px solid ButtonText; color: ButtonText; text-shadow: none; border-radius: 50%; }
  .obtn-art { display: none; }
}

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.6rem 0 1rem; }
.actions--center { justify-content: center; margin-top: 2.2rem; }
/* round 3: an olive and a leaf lying loosely together, like they fell that way: not lined up in a row or
   column, not centred on each other or on the text */
.actions--loose { display: grid; grid-template-columns: max-content max-content; align-items: start; gap: 0; margin-top: 1.8rem; }
.actions--loose .main-action { grid-column: 1; grid-row: 1; rotate: -7deg; margin-left: 0.6rem; }
.actions--loose .loose-leaf { grid-column: 1 / span 2; grid-row: 2; margin: -0.9rem 0 0 7.5rem; rotate: 5deg; font-size: 1.12rem; padding: 1.7rem 4.2rem 1.7rem 3.9rem; min-height: 84px; }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; background: var(--brush-under) left calc(100% - 8px) / 100% 0.36em no-repeat; }
.quiet-link:hover { background-image: var(--brush-under-hover); }

/* ---------- Olives, leaves and sprigs (all decorative) ---------- */
.olive { display: block; flex: none; width: var(--w, 28px); height: auto; overflow: visible; rotate: var(--rot, 0deg); pointer-events: none; }
.olive svg, .olive use { overflow: visible; }
.sprig { display: block; width: var(--w, 280px); height: auto; aspect-ratio: var(--ar); overflow: visible; pointer-events: none; transform-origin: 0% 50%; }
.sprig .wood { fill: var(--wood); shape-rendering: geometricPrecision; }
.sprig .stem { fill: none; stroke: var(--wood); stroke-width: 1.4; stroke-linecap: round; }
/* hand-drawn ink: contour and midrib lines over the colour wash (see drawn() in tools/site.cjs) */
.contour, .rib { fill: none; stroke: var(--wood); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.contour { stroke-width: var(--line, 1.2px); stroke-opacity: 0.82; shape-rendering: geometricPrecision; }
.rib { stroke-width: calc(var(--line, 1.2px) * 0.8); stroke-opacity: 0.5; stroke-dasharray: none; }
.sprig .dry { fill: none; stroke: var(--wood); stroke-width: 1.1; stroke-opacity: 0.45; stroke-linecap: round; }

/* olive bullets */
.olive-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.olive-list li { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0 0 0.55rem; max-width: var(--measure); }
.olive-list .bullet { margin-top: 0.42em; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--space-section) 0; }
.band { position: relative; isolation: isolate; margin: var(--edge) 0; }
.band::before {
  content: ""; position: absolute; inset: calc(var(--edge) * -0.6) 0; z-index: -1; background: var(--sage);
  -webkit-mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
          mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
}
.eyebrow { color: var(--clay); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; margin-bottom: 0.9rem; }
.lead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.6; }
.note { font-size: 0.98rem; color: var(--ink-2); }
.more-link { margin-top: 1.6rem; font-family: var(--font-head); font-size: 1.2rem; }
.more-link a { text-decoration: none; background: var(--brush-under) left 100% / 100% 0.36em no-repeat; padding-bottom: 0.15em; }
.more-link a:hover { background-image: var(--brush-under-hover); }
.from-blog { margin-top: 0.9rem; font-size: 0.98rem; color: var(--ink-2); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2rem; }
.prose > h2:first-child { margin-top: 0; }

/* ---------- Home: the opening strip ----------
   Round 2: a distinct deep-olive "grove" band with only the essentials (who it's for, the lived-ADHD line,
   one action, the photo) and plenty of air. Plain colour behind the text, no texture. */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  margin: calc(var(--edge) * 1.1) 0 var(--edge); padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.75rem, 6vw, 4.75rem);
  color: var(--on-grove); --focus: #f7f4ed;
}
.hero::before {
  content: ""; position: absolute; inset: calc(var(--edge) * -0.4) 0 calc(var(--edge) * -0.6); z-index: -1; background: var(--grove);
  -webkit-mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
          mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.hero h1 { color: #f7f4ed; max-width: 17ch; margin-bottom: 0.85em; }
/* round 3: the place line (kept for search) is quiet: light heading face, same cream as the text, no colour pop */
/* round 4: the place line (for search) is small print under the photo */
.hero-place { font-family: var(--font-head); font-size: 0.95rem; line-height: 1.45; color: var(--on-grove-2); letter-spacing: 0.015em; margin: 0.4rem 0 0; max-width: 30ch; }
.hero .lead { color: var(--on-grove); max-width: 38ch; line-height: 1.75; margin-bottom: 1.5rem; }
.hero-quote { margin-left: 0.35rem; padding: 0.2rem 0 0.2rem 1.4rem; background: var(--ink-line-v-cream) left top / 8px 100% no-repeat; }
.hero-more { margin: 0; font-family: var(--font-head); font-size: 1.15rem; }
.hero-more a { color: #f7f4ed; text-decoration: none; padding-bottom: 0.15em; background: var(--brush-under-cream) left 100% / 100% 0.36em no-repeat; }
.hero-more a:hover { color: #fff; }
.promise { color: #f7f4ed; font-family: var(--font-head); font-size: 1.25rem; margin-bottom: 0; }
.hero .actions { margin: 2.6rem 0 0; }
.after-click { font-size: 0.95rem; line-height: 1.55; color: var(--on-grove-2); margin: 0; }
.hero-photo { position: relative; z-index: 1; margin: 0; isolation: isolate; justify-self: center; width: min(100%, 300px); }
/* round 3: muted to sit with the palette: a little less colour and contrast, a touch of warmth */
.portrait, .about-photo img { filter: saturate(0.62) sepia(0.18) contrast(0.9) brightness(0.97); }
.hero-photo .portrait { position: relative; z-index: 1; width: 100%; aspect-ratio: 440 / 536; object-fit: cover; }
.hero-photo figcaption { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-top: 1.4rem; text-align: center; }
.hello { color: var(--on-grove); font-size: 1.06rem; line-height: 1.6; margin: 0; max-width: 28ch; }
.hero-photo figcaption .obtn { width: max-content; }
/* a long branch grows in from the screen's edge along the top of a section, framing its corner */
.edge-branch { position: absolute; z-index: 0; top: 0; right: 0; width: clamp(260px, 36vw, 560px); --w: clamp(260px, 36vw, 560px); transform-origin: 100% 0; }
.hero .edge-branch { top: calc(var(--edge) * -0.1); }
.hero .wrap { position: relative; z-index: 1; }

/* ---------- Home: what we can work on (a vertical branch hangs at the screen's left edge, framing the strip) ---------- */
.fit-section { position: relative; }
.edge-vertical { position: absolute; top: 0; left: max(8px, calc((100vw - var(--wrap)) / 2 - 150px)); width: auto; height: calc(100% - 1rem); max-height: 460px; transform-origin: 50% 0; }
.fit { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; max-width: 960px; margin-left: auto; margin-right: auto; }
.fit-text p { margin: 0 0 0.8rem; }
.panel-branch { width: auto; height: var(--h, clamp(260px, 30vw, 380px)); justify-self: center; transform-origin: 50% 0; }
.fit-list { margin: 0; }
.fit-list li { margin-bottom: 0.7rem; }
.fit-list li:nth-child(even) { padding-left: 1.4rem; }   /* uneven, like fruit on a branch, not a ruled list */
.fit-list li:nth-child(3n) { padding-left: 0.6rem; }

/* ---------- Home: three differences (each olive is a button to more) ---------- */
.section-intro { color: var(--ink-2); margin-top: -0.3rem; }
.three { list-style: none; margin: 2rem 0 0.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.three li { display: flex; flex-direction: column; align-items: flex-start; }
.three li:nth-child(2) { margin-top: 2.4rem; }
.three li:nth-child(3) { margin-top: 0.9rem; }
.three .obtn { margin: 0 0 1.1rem -0.5rem; }
.three h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.4rem; color: var(--olive); margin-bottom: 0.35em; }
.three p { margin: 0; max-width: 30ch; }

/* ---------- Steps (contact page) ---------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.steps li { display: flex; flex-direction: column; gap: 0.9rem; }
.steps li:nth-child(2) { margin-top: 1.8rem; }
.steps li:nth-child(3) { margin-top: 0.6rem; }
.step-olive { position: relative; display: inline-grid; place-items: center; width: max-content; }
.step-olive .olive { grid-area: 1 / 1; }
.step-n { grid-area: 1 / 1; position: relative; z-index: 1; color: #fbf7ec; font-family: var(--font-head); font-size: 1.35rem; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.steps h3 { margin-bottom: 0.4rem; }
.steps--compact { margin-bottom: 2rem; }

/* ---------- Facts (fees, where, when) ---------- */
.facts { margin: 1.4rem 0 0; display: grid; gap: 0; max-width: 820px; }
.facts div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 1.05rem 0 0.9rem; background: var(--ink-line) top left / 100% 12px no-repeat; }
.facts dt { font-weight: 700; color: var(--olive); }
.facts dd { margin: 0; }
.facts--wide { max-width: 900px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-top: 1rem; }
.faq details { background: var(--ink-line) top left / 100% 12px no-repeat; }
.faq details:last-child { background: var(--ink-line) top left / 100% 12px no-repeat, var(--ink-line) bottom left / 100% 12px no-repeat; }
.faq summary {
  display: flex; align-items: center; gap: 1.1rem;
  min-height: 60px; padding: 0.95rem 0.25rem; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: 1.22rem; line-height: 1.35; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover span { color: var(--olive-deep); }
/* round 3: larger olives, each at its own angle and a little off the line; they turn as the answer opens */
.faq-olive { flex: none; width: 2.7rem; margin-left: var(--nudge, 0px); margin-right: calc(10px - var(--nudge, 0px)); }
.faq details[open] .faq-olive { rotate: calc(var(--rot) + 70deg); }
.faq-a { padding: 0 0.25rem 1.1rem calc(2.7rem + 1.35rem); }
.faq-a p:last-child { margin-bottom: 0; }
.faq--res { max-width: 1000px; }
.faq--res .faq-a { padding-top: 0.6rem; padding-bottom: 1.8rem; }
.faq--res .faq-a .loose-list { max-width: 900px; }
.faq-group { margin-top: 2.8rem; }
.faq + .note { margin-top: 1.4rem; }
.faq-group:first-child { margin-top: 0; }

/* ---------- The invitation (end of most pages) ---------- */
.invite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 1060px; margin: 0 auto; }
/* round 3: a branch curves beside the contact details like a bracket, framing them */
.invite-contact, .contact-side { position: relative; padding-left: clamp(5rem, 8.5vw, 7.75rem); }
.frame-branch { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: auto; height: var(--h, 300px); transform-origin: 50% 0; }
.contact-side .frame-branch { --h: 330px; top: 0; translate: 0 0; }
.invite-text p { max-width: 40ch; }
.invite .actions { margin-bottom: 0; }
.invite .contact-direct { margin: 0; padding: 1rem 0; background: none; }
.contact-direct { margin-top: 1.2rem; padding-top: 1.1rem; background: var(--ink-line) top left / min(100%, 560px) 12px no-repeat; }
.contact-direct p { margin-bottom: 0.45rem; }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.email { font-weight: 700; font-size: 1.15rem; text-decoration: none; background: var(--brush-under) left 100% / 100% 0.36em no-repeat; padding-bottom: 0.1em; }
.copy-btn {
  min-height: 44px; padding: 0 0.4rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--font-head); font-size: 1.02rem; color: var(--olive-deep);
  text-decoration: underline dotted; text-underline-offset: 0.3em;
}
.copy-btn:hover { color: var(--wood); }
.copy-status { font-size: 0.95rem; color: var(--ink-2); }
.reply { font-weight: 700; }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.page-hero .page-hero-text { position: relative; z-index: 1; max-width: 46rem; }
.hero-sub { font-family: var(--font-head); font-size: 1.12rem; color: var(--ink-2); margin: -0.4rem 0 1rem; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.page-hero--art .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
.page-hero h1 { max-width: 22ch; }
.page-hero-art { justify-self: center; width: 100%; max-width: 320px; }
.page-hero + .section { padding-top: clamp(1rem, 3vw, 2rem); }
.about-photo { position: relative; margin: 0; isolation: isolate; }
.about-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 400 / 513; object-fit: cover; }
/* about: object-position keeps his face in the middle of the olive-shaped frame */
.about-photo img { object-position: 50% 30%; }
.statements { list-style: none; padding: 0; margin: 0; font-family: var(--font-head); font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.35; color: var(--olive); }
.statements li { margin-bottom: 0.9rem; }
.statements li:nth-child(2) { padding-left: 1.6rem; }
.statements li:nth-child(3) { padding-left: 0.7rem; margin-bottom: 0; }
/* two blocks side by side with a vertical branch as the panel between them (about, service pages) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1000px; margin: 0; }
.duo--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.duo-text > :last-child { margin-bottom: 0; }
.duo-text h2:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.two-col p { margin: 0; }
.centered-prose { max-width: 64ch; margin: 0; }
.centered-prose h2:first-child { margin-top: 0; }
/* short topics in a loose two-column flow, alternate ones set a little lower (what to expect, online) */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem clamp(2rem, 6vw, 5rem); max-width: 1000px; margin: 0; }
.blocks > div:nth-child(even) { margin-top: 2.2rem; }
.blocks h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); margin-bottom: 0.45em; }
.blocks p { margin: 0; }
.blocks + .more-link { margin: 2.4rem 0 0; }
/* services and resources: olive, link and one line, staggered rather than ruled */
.loose-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 5rem); max-width: 1000px; }
.loose-list li { display: flex; gap: 1rem; align-items: flex-start; }
.loose-list li:nth-child(even) { margin-top: 1.6rem; }
.loose-list li:nth-child(3n) { padding-left: 1.2rem; }
.loose-list .olive { margin-top: 0.15rem; }
.loose-list a { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.3; text-decoration: none; background: var(--brush-under) left 100% / 100% 0.3em no-repeat; padding-bottom: 0.12em; }
.loose-list a:hover { background-image: var(--brush-under-hover); }
.loose-list p { margin: 0.35rem 0 0; color: var(--ink-2); }
.res-groups .loose-list { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.res-groups .loose-list li:nth-child(n) { margin-top: 0; padding-left: 0; }
.res-groups .loose-list li:nth-child(even) { padding-left: 1rem; }
/* the five principles: each with its own olive, loosely staggered */
.principle-list { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.principle { display: flex; gap: 1rem; align-items: flex-start; }
.principle:nth-child(even) { padding-left: clamp(0px, 3vw, 2.2rem); }
.principle h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.4rem; color: var(--olive); margin: 0 0 0.25rem; }
.principle p { margin: 0; }

.principles { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.infographic { margin: 0; justify-self: center; max-width: 360px; }
.infographic img { border-radius: 14px 22px 16px 26px; box-shadow: 0 1px 3px rgba(31, 27, 23, 0.12); }
.infographic figcaption { margin-top: 0.7rem; font-size: 0.98rem; text-align: center; }
.spec-list { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; display: grid; gap: 1.1rem; max-width: 760px; }
.spec-list li { display: flex; gap: 1rem; align-items: flex-start; }
.spec-list li:nth-child(even) { margin-left: clamp(0px, 4vw, 2.5rem); }
.spec-list .olive { margin-top: 0.3rem; }
.spec-list a { font-weight: 700; font-size: 1.12rem; }
.spec-list p { margin: 0.2rem 0 0; color: var(--ink-2); }
.res-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.res-groups h2 { font-size: 1.5rem; }
.res-groups .spec-list li:nth-child(even) { margin-left: 0; }
.post-list { padding-left: 1.2rem; }
.post-list li { margin-bottom: 0.4rem; }
.plain-steps { padding-left: 1.4rem; }
.plain-steps li { margin-bottom: 0.7rem; }
.gfe p, .gfe li { font-size: 1.02rem; }

/* video: a local thumbnail; YouTube loads only after pressing play */
.video { margin: 1.6rem 0; max-width: 560px; }
.video-link { position: relative; display: block; text-decoration: none; color: var(--ink); }
/* round 3: cut to a soft, hand-made shape and muted, so videos sit with the photos and olives */
.video-link img, .video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; object-fit: cover; clip-path: var(--clip); }
.video-link img { filter: saturate(0.75) sepia(0.12) contrast(0.95); transition: filter 0.8s ease; }
.video-link:hover img { filter: none; }
.video-play { position: absolute; left: 50%; top: 42%; width: 74px; height: 51px; margin: -25px 0 0 -37px; background: url("assets/olives/bblack-12.webp?v=0394e842") center / 100% 100% no-repeat; }
.video-play::after { content: ""; position: absolute; left: 31px; top: 15px; border-left: 15px solid #fbf7ec; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.video-title { display: block; margin-top: 0.6rem; font-weight: 700; }
.video-link:hover .video-title { color: var(--olive-deep); text-decoration: underline; }
.video figcaption { font-size: 0.92rem; color: var(--ink-2); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 2rem; }
.video-grid .video { margin: 1rem 0; }
.video-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }

/* contact */
.page-hero .wrap.contact-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-side h2 { font-size: 1.4rem; margin-top: 1.4rem; }
.contact-sprig { --h: 260px; margin: 0 0 1rem; justify-self: start; }
.crisis-note { font-size: 1rem; color: var(--ink-2); }
.next-text { max-width: 62ch; font-size: 1.15rem; line-height: 1.7; margin-bottom: 2rem; }

/* blog */
.post .wrap { max-width: 800px; }
.post-head { padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; }
.post-head h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); }
.byline { color: var(--ink-2); }
.post-body { overflow-wrap: anywhere; }
.post-body h2 { margin-top: 2.2rem; font-size: 1.6rem; }
.post-body blockquote { margin: 1.5rem 0; padding-left: 1.4rem; background: var(--ink-line-v) left top / 8px 100% no-repeat; font-style: italic; }
.post-figure { margin: 1.8rem 0; max-width: 520px; }
.post-figure img { border-radius: 14px 22px 16px 26px; }
.post-end { display: flex; gap: 1.5rem; align-items: center; margin: 3rem 0 var(--space-section); padding-top: 1.6rem; background: var(--ink-line) top left / 100% 12px no-repeat; }
.post-sprig { --w: 170px; flex: none; rotate: -20deg; }
.post-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem; max-width: 760px; }
.post-index li { display: flex; gap: 1rem; align-items: flex-start; }
.post-index li:nth-child(even) { margin-left: clamp(0px, 4vw, 2.5rem); }
.post-index .olive { margin-top: 0.35rem; }
.post-index a { font-weight: 700; font-size: 1.15rem; }
.post-date { margin: 0.15rem 0 0; color: var(--ink-2); font-size: 0.95rem; }

/* connect card */
.connect { max-width: 560px; margin: 0 auto; text-align: center; }
.connect .olive-list { display: inline-block; text-align: left; }
.connect-sprig { --w: 220px; margin: 0 auto 1rem; }
.connect h1 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); }

/* ---------- Footer ----------
   Round 2: one calm rhythm everywhere, the same as the name-and-licence lines: one size, single line
   spacing, small even gaps. A long branch lies along the footer's top edge. */
.site-footer { position: relative; isolation: isolate; margin-top: calc(var(--edge) + 3.5rem); padding: 3.25rem 0 1.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.site-footer::before {
  content: ""; position: absolute; inset: calc(var(--edge) * -0.6) 0 0; z-index: -1; background: var(--paper-2);
  -webkit-mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge) + 2px) no-repeat;
          mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge) + 2px) no-repeat;
}
.site-footer p { margin: 0 0 0.75rem; max-width: none; }
/* round 3: three equal columns; the middle one (the links) sits on its own soft sage patch */
.footer-grid { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.footer-nav .footer-links a { color: var(--olive); }
.footer-nav .footer-links a:hover { color: var(--olive-deep); }
.footer-name { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.3; color: var(--olive); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); grid-template-columns: max-content max-content; column-gap: 1.4rem; }
.footer-links li { break-inside: avoid; margin: 0; }
.footer-links a { display: inline-block; padding: 1px 0; white-space: nowrap; color: var(--ink); text-decoration: none; }
.footer-links a:hover { color: var(--olive-deep); text-decoration: underline; }
.footer-contact a { color: var(--ink); }
.footer-fine { margin-top: 0.75rem; padding-top: 0.9rem; background: var(--ink-line) top left / 100% 12px no-repeat; }
.footer-fine p { margin-bottom: 0.4rem; }
.footer-fine .crisis { color: var(--ink); font-weight: 700; }

/* ---------- Motion: slow and calm; nothing moves for reduced-motion users ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* buttons: darken slowly like a wet olive, and sway a little from the stem */
  .obtn { transition: rotate 1.6s cubic-bezier(.3,.1,.25,1), color 1s ease; }
  .obtn .wash { transition: filter 1.3s ease; }
  .obtn--olive:hover, .obtn--olive:focus-visible { rotate: -3deg; }
  .obtn--leaf:hover, .obtn--leaf:focus-visible { rotate: -2deg; }
  /* the invitation's branch answers its button: a slow nod */
  .frame-branch { transition: rotate 2.2s cubic-bezier(.3,.1,.25,1); }
  .invite:has(.main-action:hover) .frame-branch, .invite:has(.main-action:focus-visible) .frame-branch { rotate: 2deg; }
  .faq-olive { transition: rotate 0.9s cubic-bezier(.3,.1,.25,1); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* branches sway gently as the page scrolls past */
    .panel-branch, .edge-vertical, .post-sprig { animation: sway linear both; animation-timeline: view(); }
  }
}
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  /* the left-edge branch needs a real margin to live in; on narrower screens it moves inside, beside the list */
  .edge-vertical { left: 4px; max-height: 340px; opacity: 0.9; }
  .fit { padding-left: clamp(3.5rem, 8vw, 6rem); }
  .footer-grid { grid-template-columns: max-content max-content; justify-content: start; column-gap: 4rem; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 2rem; }
  .hero h1 { max-width: none; }
  .three, .steps { grid-template-columns: minmax(0, 1fr); }
  .three li:nth-child(n), .steps li:nth-child(n) { margin-top: 0; }
  .steps li { flex-direction: row; align-items: flex-start; }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .invite { grid-template-columns: minmax(0, 1fr); }
  .page-hero--art .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
  .about-photo { max-width: 240px; }
  .page-hero--art .wrap:has(.about-photo) { grid-template-columns: minmax(0, 1fr); }
  .page-hero-art:has(.about-photo) { order: -1; justify-self: start; }
  .principles, .video-row, .contact-grid, .page-hero .wrap.contact-grid { grid-template-columns: minmax(0, 1fr); }
  .res-groups { grid-template-columns: minmax(0, 1fr); }
  .duo, .duo--wide, .two-col { grid-template-columns: minmax(0, 1fr); }
  .duo .panel-branch { display: none; }
  .blocks, .loose-list { grid-template-columns: minmax(0, 1fr); }
  .blocks > div:nth-child(n), .loose-list li:nth-child(n) { margin-top: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-about { grid-column: 1 / -1; }
  .footer-grid > * { justify-self: start; }
  .edge-branch { width: 46vw; --w: 46vw; }
  .page-hero { padding-top: clamp(4.5rem, 12vw, 6rem); }
}
@media (max-width: 760px) {
  .brand img { height: 64px; }
  .brand-tag { display: none; }
  .header-inner { flex-wrap: nowrap; }
  .site-nav { display: contents; }
  .nav-list { justify-content: flex-end; flex-wrap: nowrap; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border: 0; background: none; cursor: pointer;
    font: inherit; font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); order: 2;
    background: var(--brush-under) center calc(100% - 8px) / 80% 0.36em no-repeat;
  }
  /* collapsed: only Contact shows (one action visible, no overlay) */
  .js .nav-list:not(.is-open) li:not(.nav-contact) { display: none; }
  .js .nav-list.is-open { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; background: var(--paper); box-shadow: 0 10px 18px -12px rgba(31, 27, 23, 0.4); }
  .js .nav-list.is-open .nav-contact { margin: 0.5rem 0 0; }
  /* the Services drop-down is simply listed, indented, inside the open menu */
  .sub { position: static; visibility: visible; opacity: 1; translate: none; box-shadow: none; background: none; padding: 0 0 0.4rem 1.2rem; min-width: 0; }
  .has-sub > a::after { display: none; }
  .site-header { position: relative; }
  .header-inner { position: static; }
  .facts div { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .invite-contact, .contact-side { padding-left: 5.2rem; }
  .frame-branch { --h: 210px; }
  .contact-side { padding-left: 0; }
  .contact-side .frame-branch { display: none; }
  .actions--loose .loose-leaf { margin-left: 3.5rem; }
}
@media (max-width: 640px) {
  /* phones: the photo comes first, small, so it and the headline share the first screen without crowding */
  .hero { padding: 2rem 0 2.5rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  /* photo and its caption side by side, caption in normal flow so it never overlaps */
  .hero-photo { order: -1; justify-self: stretch; width: 100%; display: grid; grid-template-columns: min(40vw, 170px) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
  .hero-photo .portrait { width: 100%; }
  .hero-photo figcaption { align-items: flex-start; text-align: left; margin: 0; gap: 0.9rem; }
  .hero-photo .hero-place { font-size: 0.88rem; margin: 0; }
  .hello { font-size: 0.98rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero .lead { font-size: 1.1rem; }
  .hero-place { font-size: 0.98rem; margin-bottom: 0.7rem; }
  .hero .actions { margin-top: 1.4rem; }
  .hero .edge-branch { display: none; }
  .edge-vertical { display: none; }
  .fit { padding-left: 0; }
}
@media (max-width: 420px) {
  .brand img { height: 54px; }
}