@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/jost-latin-v20.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-v12.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* SHC design tokens v2: cooled palette. Stone replaces Chalk as the light ground, Slate and Deep Slate replace Olive as bands, Wheat is retired. Add class="dark" or class="light" to a section; buttons, links and eyebrows pick their colors from it. */
:root {
  --shc-humus: #2A2420;      /* dark ground */
  --shc-bedrock: #3A322C;    /* cards on dark */
  --shc-stone: #F7F7F4;      /* light ground */
  --shc-ash: #ECEDE9;        /* faint light surface, sparingly */
  --shc-chalk: #EDE7DA;      /* text on dark, and the ring strokes in the SVG kit */
  --shc-ochre: #D7A24C;      /* small accents on dark: eyebrows, the pith */
  --shc-ochre-deep: #8A6427; /* small accents on light: eyebrows, link underlines */
  --shc-slate: #566A72;      /* band, stat numbers, secondary accent on light */
  --shc-slate-deep: #41525A; /* second band tone */
  --shc-loam: #5A4A3E;       /* framework ring */
  --shc-fw-purpose-ink: #91651D;
  --shc-fw-clarity-ink: #806E4A;
  --shc-fw-genius-ink: #3E6C5B;
  --shc-fw-resourcing-ink: #70713F;
  --shc-fw-power-ink: #B55331;
  --shc-fw-craft-ink: #40525B;
  --shc-bark: #6B5A45;       /* bark line, ring seams, season rings: oak rather than redwood */

  /* ==================== LINE PALETTE ====================
     Eight kinds of line were drawn at different times and disagreed about width, colour,
     strength and texture. There are four roles now, and one ink recipe at two strengths.
     A line's setting follows the job it does, not when it was made.

       MARK       the logo rule, the button loop. Tapered 1.0-1.75px, gold, full strength.
                  The only lines that carry pressure; that is what makes them signature.
       STRUCTURE  the framework's bark, core boundary and season rings. 1.6px, bark, 75%.
                  Lines that divide something or record where the reader has been.
       GRAIN      the framework's interior rings. 0.75px, bark, 45%.
                  Dense and repeating: reads as a surface, not as countable lines.
       FIELD      hero watermarks, the wood grain behind the bands, card and footer arcs.
                  1.0px, the ground's own ink, 22%. Atmosphere; never legible as a line.

     Ink: --shc-ink for mark and structure, --shc-ink-soft for grain and field.
     The season rings are the one exception to a fixed strength: they hold 0 / 55 / 95%
     depending on whether the reader has reached that domain. Leave that sequence alone. */
  --line-mark: var(--shc-ochre-deep);
  --line-mark-dark: var(--shc-ochre);
  --line-structure: var(--shc-bark);
  --line-structure-w: 1.6px;
  --line-structure-o: .75;
  --line-grain: var(--shc-bark);
  --line-grain-w: .75px;
  --line-grain-o: .45;
  --line-field-w: 1px;
  --line-field-o: .22;
  /* framework colors: used only for the framework's regions and marks, one at a time on screen */
  --shc-fw-purpose: #D7A24C;
  --shc-fw-genius: #3F6B5B;
  --shc-fw-clarity: #CFC4AE;
  --shc-fw-resourcing: #686938;
  --shc-fw-power: #BE5A38;
  --shc-fw-craft: #41525A;
  --shc-rule-dark: #4A403A;
  --shc-rule-light: #D3D6D1;
  --shc-font: "Jost", system-ui, -apple-system, sans-serif;            /* display: headings, labels, buttons, nav */
  --shc-font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* reading: body copy, lists, quotes */
  --shc-max: 1200px;
  --shc-gutter: clamp(20px, 5vw, 64px);
  --shc-section: clamp(40px, 4.5vw, 72px);
}
body { margin: 0; font-family: var(--shc-font-body); font-weight: 400; font-size: 18px; line-height: 1.65; background: var(--shc-stone); color: var(--shc-humus); -webkit-font-smoothing: antialiased; }
body .dark,body.dark { background: var(--shc-humus); color: var(--shc-chalk); }
body .light,body.light { background: var(--shc-stone); color: var(--shc-humus); }
body .band-slate { background: var(--shc-slate); color: var(--shc-stone); }
body .band-slate-deep { background: var(--shc-slate-deep); color: var(--shc-stone); }
body .section { padding: var(--shc-section) var(--shc-gutter); }
body .wrap { max-width: var(--shc-max); margin: 0 auto; }
body h1,body .h1 { font-family: var(--shc-font); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.08; font-size: clamp(30px, 3.5vw, 46px); margin: 0 0 .6em; text-wrap: balance; }
body h1 span,body .h1 span { font-weight: 300; }
body h2,body .h2 { font-family: var(--shc-font); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.22; font-size: clamp(22px, 2vw, 26px); margin: 1.6em 0 .9em; text-wrap: balance; }
body .wrap > h2:first-child,body .copy > h2:first-child,body .wrap > .h2:first-child { margin-top: 0; }
body h2 span,body .h2 span { font-weight: 300; }
/* the third level drops out of caps: on a narrow column a size step alone stops
   reading as a step, so case carries the difference instead */
body h3,body .h3 { font-family: var(--shc-font); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.35; margin: 1.5em 0 .5em; }
body .wrap > h3:first-child,body .card > h3:first-child,body .card > .h3:first-child { margin-top: 0; }
/* "We might explore" keeps its place in the outline for screen readers but is set as a
   small label, so the eye counts three heading levels, not four */
body h4,body .explore-h { font-family: var(--shc-font); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; margin: 0 0 .2em; opacity: .75; }
body .eyebrow { font-family: var(--shc-font); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--shc-ochre); margin: 0 0 24px; }
body .light .eyebrow,body.light .eyebrow { color: var(--shc-ochre-deep); }
body .band-slate .eyebrow,body .band-slate-deep .eyebrow { color: var(--shc-stone); opacity: .8; }
body p { max-width: 68ch; margin: 0 0 1.3em; }
body .lede { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.6; }
body .quote { font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; line-height: 1.3; max-width: 30ch; margin: 0; }
body .quote b,body strong,body b { font-weight: 600; }
body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--shc-ochre); }
body .light a,body.light a { text-decoration-color: var(--shc-ochre-deep); }
body a:hover { text-decoration-color: currentColor; }
/* everything else on this site is drawn from arcs; a square-cornered button was the only
   element fighting that, so the buttons take the same curve */
body .btn { font-family: var(--shc-font); display: inline-block; padding: 15px 30px; font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 999px; line-height: 1.2; }
body .dark .btn-primary,body.dark .btn-primary { background: var(--shc-chalk); color: var(--shc-humus); border-color: var(--shc-chalk); }
body .dark .btn-primary:hover,body.dark .btn-primary:hover { background: var(--shc-ochre); border-color: var(--shc-ochre); }
body .dark .btn-secondary,body.dark .btn-secondary { border-color: var(--shc-rule-dark); color: var(--shc-chalk); }
body .dark .btn-secondary:hover,body.dark .btn-secondary:hover { border-color: var(--shc-chalk); }
body .light .btn-primary,body.light .btn-primary { background: var(--shc-humus); color: var(--shc-stone); border-color: var(--shc-humus); }
body .light .btn-primary:hover,body.light .btn-primary:hover { background: var(--shc-slate-deep); border-color: var(--shc-slate-deep); }
body .light .btn-secondary,body.light .btn-secondary { border-color: var(--shc-humus); color: var(--shc-humus); }
body .light .btn-secondary:hover,body.light .btn-secondary:hover { border-color: var(--shc-slate); color: var(--shc-slate-deep); }
body .band-slate .btn-primary,body .band-slate-deep .btn-primary { background: var(--shc-stone); color: var(--shc-humus); border-color: var(--shc-stone); }
body .band-slate .btn-primary:hover,body .band-slate-deep .btn-primary:hover { background: transparent; color: var(--shc-stone); }
body .btn:focus-visible { outline: 2px solid var(--shc-ochre); outline-offset: 3px; border-radius: 999px; }
body .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--shc-gutter); }
body .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; }
body .nav a { font-family: var(--shc-font); text-decoration: none; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
body .nav a:hover,body .nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--shc-ochre); }
body .card { padding: 44px 40px; position: relative; overflow: hidden; }
body .dark .card,body.dark .card { background: var(--shc-bedrock); }
body .light .card,body.light .card { background: transparent; border: 1px solid var(--shc-rule-light); }
body .card > * { position: relative; }
body .card .rings { position: absolute; right: 0; bottom: 0; width: min(62%, 300px); aspect-ratio: 400 / 260; pointer-events: none; }
body .card .rings svg { display: block; width: 100%; height: 100%; }
body .card .rings.tl { right: auto; bottom: auto; left: 0; top: 0; transform: rotate(180deg); }
body .card.has-rings { padding-bottom: 64px; }
body .card.has-rings-tl { padding-top: 72px; }
body .field { width: 100%; background: transparent; border: 0; border-bottom: 1px solid currentColor; padding: 12px 0; font: inherit; color: inherit; border-radius: 0; }
body .field::placeholder { color: inherit; opacity: .55; }
body .field:focus { outline: none; border-bottom-color: var(--shc-ochre); }
body label { font-family: var(--shc-font); display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; opacity: .85; }
body .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
body hr { border: 0; border-top: 1px solid var(--shc-rule-light); margin: 32px 0; }
body .dark hr,body.dark hr { border-top-color: var(--shc-rule-dark); }
@media (max-width: 800px) { body .grid-2 { grid-template-columns: 1fr; } body .nav ul { gap: 16px; } }
body .grid-2.divided { gap: clamp(32px, 4vw, 64px); }
body .grid-2.divided > :nth-child(2) { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid rgba(65, 82, 90, .16); }
@media (max-width: 800px) { body .grid-2.divided > :nth-child(2) { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid rgba(65, 82, 90, .16); } }


/* site layer on top of the tokens */
:root { color-scheme: light; }
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--shc-stone); color: var(--shc-humus); }
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--shc-ochre); color: var(--shc-humus); z-index: 50; }
.skip:focus { left: var(--shc-gutter); }
:focus-visible { outline: 2px solid var(--shc-ochre); outline-offset: 3px; }

/* header */
.site-head { background: var(--shc-humus); color: var(--shc-chalk); border-bottom: 1px solid var(--shc-rule-dark); position: sticky; top: 0; z-index: 40; }
.site-head .nav { max-width: var(--shc-max); margin: 0 auto; flex-wrap: wrap; }
.site-head .lockup { display: block; width: 250px; min-width: 226px; max-width: 72vw; height: auto; }
.site-head .nav ul { gap: 24px; }
.site-head .nav ul .btn { padding: 13px 18px; }
@media (max-width: 1120px) { .site-head .lockup { width: 226px; } .site-head .nav ul { gap: 18px; } }
.site-head .lockup svg { display: block; width: 100%; height: auto; }
.site-head .nav ul { align-items: center; }
.site-head .nav ul .btn { margin-left: 4px; }
.menu-toggle { display: none; background: none; border: 1px solid var(--shc-chalk); border-radius: 999px; color: var(--shc-chalk); font: inherit; font-family: var(--shc-font); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 11px 20px; cursor: pointer; }
@media (max-width: 800px) {
  .menu-toggle { display: inline-block; }
  .site-head .nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px 0 8px; border-top: 1px solid var(--shc-rule-dark); }
  .site-head .nav.open ul { display: flex; }
  .site-head .nav ul .btn { margin-left: 0; }
}
@media (max-width: 980px) { .menu-toggle { display: inline-block; } .site-head .nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px 0 8px; border-top: 1px solid var(--shc-rule-dark); } .site-head .nav.open ul { display: flex; } .site-head .nav ul .btn { margin-left: 0; } }

/* hero */
.hero { position: relative; overflow: hidden; padding: clamp(52px, 6vw, 88px) var(--shc-gutter); min-height: min(56vh, 620px); display: grid; align-items: center; }
.hero .watermark { --wm: 1; position: absolute; left: 79%; top: 50%; width: calc(max(880px, 64vw) * var(--wm)); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .55; pointer-events: none; }
.hero .watermark svg { width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; width: 100%; }
/* a dark hero followed by a dark section: fade the rings before the shared edge */
.hero.dark:has(+ .section.dark) .watermark { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%); }
/* rings behind running copy on a light section */
.has-rings-bg { position: relative; overflow: hidden; }
.has-rings-bg > .wrap { position: relative; }
.has-rings-bg .watermark-scroll { position: absolute; left: 50%; top: 42%; width: min(70vw, 940px); aspect-ratio: 1; transform: translate(12%, -50%); opacity: .45; pointer-events: none; }
.has-rings-bg .watermark-scroll svg { width: 100%; height: 100%; display: block; overflow: visible; }
.watermark-scroll .rings-anim path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.watermark-scroll.in .rings-anim path { animation: shc-draw 1.6s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.2s + var(--i) * .1s); }
.watermark-scroll .rings-anim circle { opacity: 0; transform-origin: 400px 400px; }
.watermark-scroll.in .rings-anim circle { animation: shc-pith .8s ease-out forwards; animation-delay: .1s; }
.watermark-scroll.in .rings-anim { transform-origin: 50% 50%; animation: shc-turn 300s linear infinite; }
@media (max-width: 800px) { .has-rings-bg .watermark-scroll { left: 60%; width: 720px; opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .watermark-scroll .rings-anim path { stroke-dashoffset: 0; animation: none !important; } .watermark-scroll .rings-anim circle { opacity: 1; animation: none !important; } .watermark-scroll .rings-anim { animation: none !important; } }
/* on a light hero the next section shares the ground, so the rings dissolve before the hero's edge instead of being cut by it */
.hero.light .watermark { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%); }
.hero.light + .section.light { padding-top: calc(var(--shc-section) - 24px); }
.hero .copy { max-width: 620px; }
.hero .lede { max-width: 52ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
@media (max-width: 800px) { .hero { min-height: 0; } .hero .watermark { left: 100%; width: calc(760px * var(--wm)); } }
.hero-portrait .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero-portrait .portrait { margin: 0; }
.hero-portrait .portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 800px) { .hero-portrait .wrap { grid-template-columns: minmax(0, 1fr); } .hero-portrait .portrait { max-width: 400px; } }
/* reusable pattern: a photo beside a block of body copy, anywhere in a section (not just the page hero) */
.text-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: clamp(24px, 4vw, 48px); align-items: start; }
.text-photo figure { margin: 0; }
.text-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 800px) { .text-photo { grid-template-columns: minmax(0, 1fr); } .text-photo figure { max-width: 400px; } }

/* home hero rings: draw in from the pith outward once, then turn very slowly */
.watermark-live .rings-anim { transform-origin: 50% 50%; animation: shc-turn 300s linear infinite; }
.watermark-live .rings-anim path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: shc-draw 1.6s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * .11s); }
.watermark-live .rings-anim circle { opacity: 0; animation: shc-pith .8s ease-out forwards; animation-delay: .1s; transform-origin: 400px 400px; }
@keyframes shc-draw { to { stroke-dashoffset: 0; } }
@keyframes shc-turn { to { transform: rotate(360deg); } }
@keyframes shc-pith { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .watermark-live .rings-anim,.watermark-live .rings-anim path,.watermark-live .rings-anim circle { animation: none; }
  .watermark-live .rings-anim path { stroke-dashoffset: 0; }
  .watermark-live .rings-anim circle { opacity: 1; }
}

/* framework field: internal core, external band; a line drawing that draws in, color only on touch */
.fw .diagram svg { max-width: 900px; }
.fw { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
/* the hovered wedge grows into place from slightly inset, rather than just fading -- an actual expanding motion.
   transform-origin is the pith's own SVG coordinate, so every domain's fill grows from the diagram's center. */
.cb .cb-fill { opacity: 0; transform: scale(.9); transform-origin: 380px 300px; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.cb .cb-fill.on { opacity: 1; transform: scale(1); }
.cb .cb-pith { opacity: 0; }
.cb.in .cb-pith { animation: shc-pith .8s ease-out forwards; animation-delay: .1s; transform-origin: 380px 300px; }
.cb .cb-label { opacity: 0; transition: opacity .3s ease; }
.cb.in .cb-label { animation: fw-fade .6s ease-out forwards; animation-delay: 1.9s; }
.cb.in.focus .cb-label { animation: none; opacity: .45; }
.cb.in.focus .cb-label.on { opacity: 1; }
/* the hovered label switches to whichever ink actually reads on top of its own fill color (baked in per domain
   as --on-ink) instead of staying the diagram's fixed ink/chalk regardless of what's underneath -- without this,
   dark-fill domains like Genius were hard to read once lit up. */
.cb-label.on,.cb-label.on text { fill: var(--on-ink, currentColor); transition: fill .3s ease; }
/* Purpose and Clarity sit close enough that hovering one still leaves the other's text competing right next to
   it at the general .45 dim -- crowd-dim pushes whichever of that pair ISN'T hovered down much further, set via
   JS (the pairing is specific to these two, not a blanket rule for every domain). */
.cb.in.focus .cb-label.crowd-dim { opacity: .12; }
/* hovered domain name grows in place -- more for the core (inner) domains than the band (outer) ones, per Sonya's 2026-09-13 markup.
   scale factors (1.875 / 1.375) mirror INNER_HOVER_SCALE / OUTER_HOVER_SCALE in coreband.py -- keep the two in sync if either changes */
text.cb-label,g.cb-label > text { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
text.cb-label.on { transform: scale(1.875); }
g.cb-label.on > text { transform: scale(1.375); }
@media (prefers-reduced-motion: reduce) { text.cb-label,g.cb-label > text { transition: none; } text.cb-label.on,g.cb-label.on > text { transform: none; } }
/* the whole graphic enlarges too, so a hover reads as one continuous growing motion at every scale */
.cb { transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 50%; }
.cb.focus { transform: scale(1.12); }
/* the purely decorative interior rings ripple outward on top of that overall grow: each one's own scale-up is
   staggered by its index (--n, baked in by the generator) so the motion visibly travels from the pith outward,
   and each ring's target scale grows a little with its distance from center, so the gaps between rings widen
   more toward the outside than near the pith -- a bounce, not just a fade-in of the final state.
   cb-boundary and cb-bark are excluded on purpose -- those two rings ARE the fill's own inner/outer edge, and
   the fill only ever gets the shared parent .cb.focus scale, not an extra per-ring one; giving them the same
   bonus would pull the ring line away from the fill color it's supposed to outline. */
/* the bonus plateaus after ring 8 instead of climbing all the way to the outermost ring, so the last couple of
   rings don't outrun the bark band they sit closest to */
/* bark and the core/band boundary get a redwood-bark color instead of the neutral ink every other line uses --
   the outer band keeps its full width but drops opacity some; the inner (core/band) boundary gets the same hue
   at the interior rings' thinner weight, a quieter echo of the outer band rather than a second copy of it. the
   bark texture itself is a handful of thin, closely-spaced rings clustered just inside the bark line -- density
   of close lines reads as roughness, rather than deforming the one bark line into a wobble. */
/* DEAD: no element carries .cb-bark or .cb-boundary any more. The texture pass replaced the
   separate bark and boundary strokes with the generated ring set, so the structure role
   currently applies to the season rings alone. Kept for reference, not in use. */
@media (prefers-reduced-motion: reduce) {
  .cb { transition: none; } .cb.focus { transform: none; }
  .cb .cb-fill { transition: opacity .4s ease; transform: none; }
}
/* Approach's six domain cards: a flat color-block standing in for the old illustrated mark, and "We might
   explore" as a click-to-expand disclosure instead of an always-visible list. Sandboxed with Sonya 2026-09-14
   (https://claude.ai/code/artifact/f5f69186-191a-47e0-aac8-1c54462f2313) as a 3x2 grid below the diagram, then
   merged into production that way; moved again 2026-09-14 to sit inside the diagram's own selection panel (see
   .fw-panel-detail below) so picking a domain shows its full card right next to the diagram instead of further
   down the page -- these per-card rules stayed the same, just no longer scoped under the since-removed .fw-grid
   wrapper. */
/* the diagram's own selection panel on Approach: picking a domain shows its full .fw-card right there instead of
   a one-line question. the panel sizes to whichever card is showing (no fixed height), so the diagram sits with
   align-items:start rather than center -- otherwise it would visibly shift as the panel's height changes between
   a short card (Genius) and a long one (Resourcing's 11-item list). */
/* .placeholder and .fw-card both set their own `display` above, which -- being author-level CSS --
   would otherwise beat the browser's built-in `[hidden]{display:none}` regardless of selector
   specificity, so a card or the placeholder marked hidden would still render, stacking with whatever
   is meant to be showing instead of being replaced by it. Each override below has to at least match
   the specificity of the rule it's undoing (adding [hidden] on top of the same class chain does
   that), so writing one shared low-specificity rule for both isn't enough -- it has to be per-rule. */
.dark .domains li { border-color: var(--shc-rule-dark); }
.dark .domains li:first-child { border-top-color: var(--shc-rule-dark); }
.dark .domains li b { color: var(--shc-chalk); }
.domains li { transition: opacity .3s ease; cursor: default; }
.domains li b { transition: color .3s ease; }
.domains li[data-name="Purpose"].on b { color: #D7A24C; } .domains li[data-name="Genius"].on b { color: #6E9A87; } .domains li[data-name="Clarity"].on b { color: #CFC4AE; }
.domains li[data-name="Resourcing"].on b { color: #9AA06A; } .domains li[data-name="Power"].on b { color: #D07A5C; } .domains li[data-name="Craft"].on b { color: #7C8F98; }
@media (prefers-reduced-motion: reduce) { .cb .cb-pith,.cb .cb-label,.cb .cb-fill.on { opacity: 1; }
  .cb.in * { animation: none !important; }
}

/* framework diagram: strata laid down from the pith outward, then the baseline and leaders draw */
@keyframes fw-grow { to { transform: scale(1); } }
@keyframes fw-ring { to { opacity: .9; } }
@keyframes fw-draw { to { stroke-dashoffset: 0; } }
@keyframes fw-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fw-anim.in * { animation: none !important; }
}

/* approach hero: scattered arcs settle into alignment */
@keyframes al-settle { to { transform: none; } }

/* how i work hero: two ring systems draw outward and drift together */
.hero .watermark svg { overflow: visible; }
.watermark-two { opacity: 1; --wm: 1.3; }
.watermark-two .tw-g { transform-box: view-box; transform: translate(var(--dx), var(--dy)); animation: tw-meet 3.4s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: .6s; }
.watermark-two .tw-ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: shc-draw 1.5s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.3s + var(--i) * .14s); }
.watermark-two .tw-pith { opacity: 0; animation: shc-pith .8s ease-out forwards; animation-delay: .1s; }
@keyframes tw-meet { to { transform: translate(0, 0); } }
/* contact hero: one spiral winds inward to the pith */
.watermark-spiral { opacity: 1; --wm: 1.15; }
.watermark-spiral .sp-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: shc-draw 5s cubic-bezier(.3, 0, .2, 1) forwards; animation-delay: .3s; }
.watermark-spiral .sp-pith { opacity: 0; animation: shc-pith .8s ease-out forwards; animation-delay: 4.6s; transform-origin: 400px 400px; }
@media (prefers-reduced-motion: reduce) {
  .watermark-two .tw-g,.watermark-two .tw-ring,.watermark-two .tw-pith,.watermark-spiral .sp-path,.watermark-spiral .sp-pith { animation: none; }
  .watermark-two .tw-g { transform: none; }
  .watermark-two .tw-ring,.watermark-spiral .sp-path { stroke-dashoffset: 0; }
  .watermark-two .tw-pith,.watermark-spiral .sp-pith { opacity: 1; }
}

/* sections */
.section.narrow .wrap { max-width: 760px; }
.section .wrap > .eyebrow:first-child { margin-top: 0; }
.stack { display: grid; gap: clamp(56px, 7vw, 88px); }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: minmax(0, 1fr); } }
.cards { display: grid; gap: 28px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .cards.two,.cards.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cards.four { grid-template-columns: minmax(0, 1fr); } }
.card p:last-child { margin-bottom: 0; }
.card .h3 { margin-top: 0; }
/* a subtitle under a card title: body size, set apart by weight and color, so it does not
   read as another heading level */
.card-sub { font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--shc-slate-deep); margin: -.5em 0 1.1em; max-width: 46ch; }
.dark .card-sub,.band .card-sub { color: inherit; opacity: .8; }
.card .more { display: inline-block; margin-top: 8px; font-weight: 400; font-size: 15px; }
.note { border: 1px dashed var(--shc-slate); border-radius: 18px; color: var(--shc-slate-deep); padding: 18px 22px; font-size: 13px; line-height: 1.55; max-width: 60ch; margin-top: 8px; }
.dark .note { border-color: var(--shc-rule-dark); color: var(--shc-chalk); opacity: .8; }
.note p { margin: 0; }
.center { text-align: center; }
.center p,.center .h2,.center h2 { margin-left: auto; margin-right: auto; }
.closing p { max-width: 54ch; }
.closing .btn { margin-top: 8px; }

/* band */
.band { position: relative; overflow: hidden; }
.band .bandbg { position: absolute; inset: 0; width: 100%; height: 100%; }
.band .bandbg svg { width: 100%; height: 100%; display: block; }
.band .inner { position: relative; max-width: var(--shc-max); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--shc-gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: center; }
.band .stmt { font-family: var(--shc-font-body); font-size: clamp(21px, 2.1vw, 27px); font-weight: 400; line-height: 1.4; margin: 0; max-width: 34ch; }
.band .stmt b { font-weight: 700; }
.band .sub { margin: 20px 0 0; max-width: 54ch; opacity: .9; font-size: 15px; }
@media (max-width: 800px) { .band .inner { grid-template-columns: minmax(0, 1fr); } }

/* framework */
.fw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
.fw .diagram svg { width: 100%; height: auto; display: block; max-width: 520px; }
.domains { list-style: none; margin: 0; padding: 0; }
.domains li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--shc-rule-light); }
.domains li:first-child { border-top: 1px solid var(--shc-rule-light); }
.domains li b { font-family: var(--shc-font); font-weight: 500; font-size: 17px; color: var(--shc-slate-deep); letter-spacing: .02em; }
.domains li span { font-weight: 400; font-size: 17px; }
@media (max-width: 900px) { .fw { grid-template-columns: minmax(0, 1fr); } .fw .diagram svg { margin: 0 auto; } }
/* Home's framework diagram is the section's dominant visual element: give it most of the row and let it grow
   well past the shared .fw default, while the question panel takes a narrower supporting column. */
/* Approach's panel now shows a full domain card (not a one-line question -- see .fw-panel-detail above), so it
   needs real width to hold a paragraph and a bullet list without cramping; the diagram still gets the larger
   share of the row, just not as lopsided as Home's short-question version. */
@media (max-width: 480px) { .domains li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* tension table: same rule pattern as .domains, wider label column for a pair */
.tension { list-style: none; margin: 0; padding: 0; }
.tension li { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--shc-rule-light); }
.tension li:first-child { border-top: 1px solid var(--shc-rule-light); }
.tension li b { font-weight: 500; font-size: 16px; color: var(--shc-slate-deep); letter-spacing: .02em; }
.tension li span { font-weight: 400; font-size: 17px; }
@media (max-width: 560px) { .tension li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* quote: a hairline rule and italic set, ochre used only as the accent rule */
.quote { border-left: 2px solid var(--shc-ochre); padding-left: 24px; margin: 0; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.65; max-width: 62ch; }
.quote cite { font-family: var(--shc-font); display: block; margin-top: 16px; font-style: normal; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--shc-slate-deep); }
.dark .quote cite,.band .quote cite { color: inherit; opacity: .75; }
.quote + .quote { margin-top: clamp(32px, 4vw, 48px); }

/* "we might explore" lists: a dash marker, no filled bullet */
.bullets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.bullets li { padding-left: 22px; position: relative; font-size: 17px; line-height: 1.6; font-weight: 400; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background-color: var(--shc-ochre); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14.1%2C8.0%20L13.5%2C9.3%20L12.9%2C10.3%20L12.2%2C11.4%20L11.5%2C12.4%20L10.6%2C13.5%20L9.4%2C14.3%20L8.0%2C14.6%20L6.5%2C14.4%20L5.3%2C13.6%20L4.4%2C12.5%20L3.7%2C11.4%20L3.2%2C10.3%20L2.6%2C9.2%20L2.1%2C8.0%20L1.8%2C6.6%20L2.0%2C5.1%20L2.8%2C3.9%20L4.0%2C3.0%20L5.4%2C2.7%20L6.8%2C2.6%20L8.0%2C2.6%20L9.2%2C2.7%20L10.5%2C2.8%20L11.9%2C3.1%20L13.1%2C3.9%20L14.0%2C5.1%20L14.3%2C6.6%20L14.1%2C8.0%20Z%22%20fill%3D%22black%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14.1%2C8.0%20L13.5%2C9.3%20L12.9%2C10.3%20L12.2%2C11.4%20L11.5%2C12.4%20L10.6%2C13.5%20L9.4%2C14.3%20L8.0%2C14.6%20L6.5%2C14.4%20L5.3%2C13.6%20L4.4%2C12.5%20L3.7%2C11.4%20L3.2%2C10.3%20L2.6%2C9.2%20L2.1%2C8.0%20L1.8%2C6.6%20L2.0%2C5.1%20L2.8%2C3.9%20L4.0%2C3.0%20L5.4%2C2.7%20L6.8%2C2.6%20L8.0%2C2.6%20L9.2%2C2.7%20L10.5%2C2.8%20L11.9%2C3.1%20L13.1%2C3.9%20L14.0%2C5.1%20L14.3%2C6.6%20L14.1%2C8.0%20Z%22%20fill%3D%22black%22/%3E%3C/svg%3E") center/contain no-repeat; }

/* inline text links within body copy */
.section p a,.card p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--shc-ochre); text-decoration-thickness: 1px; }
.section p a:hover,.card p a:hover { text-decoration-color: currentColor; }

.book-direct { margin: 10px 0 18px; }
.book-direct a { display: inline-block; padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--shc-ochre-deep); text-decoration: none; }
.book-direct a:hover { border-bottom-color: currentColor; }
/* contact */
.contact-actions { display: grid; gap: 14px; justify-items: start; margin: 16px 0 36px; }

/* footer */
.site-foot { background: var(--shc-humus); color: var(--shc-chalk); padding: clamp(64px, 8vw, 96px) var(--shc-gutter) 48px; position: relative; overflow: hidden; }
.site-foot .rings { position: absolute; right: 0; bottom: 0; width: min(44%, 320px); aspect-ratio: 400 / 260; pointer-events: none; }
.site-foot .rings svg { display: block; width: 100%; height: 100%; }
.site-foot .wrap { display: grid; gap: 48px; position: relative; }
.site-foot .cols { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 40px; }
.site-foot .lockup { width: 260px; max-width: 100%; }
.site-foot .lockup svg { display: block; width: 100%; height: auto; }
.site-foot .tag-line { max-width: 34ch; margin: 22px 0 0; font-size: 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-foot ul a { font-family: var(--shc-font); text-decoration: none; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.site-foot ul a:hover,.site-foot ul a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--shc-ochre); }
.site-foot .fine { border-top: 1px solid var(--shc-rule-dark); padding-top: 28px; font-size: 12px; letter-spacing: .08em; opacity: .65; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* pages */
.page[hidden] { display: none; }

/* mixed variant overrides */
.site-head { background: var(--shc-stone); color: var(--shc-humus); border-bottom-color: var(--shc-rule-light); }
.menu-toggle { border-color: var(--shc-humus); color: var(--shc-humus); }
.site-head .nav ul { border-top-color: var(--shc-rule-light); }
.site-head .nav a:hover,.site-head .nav a[aria-current] { text-decoration-color: var(--shc-ochre-deep); }
.site-foot { background: var(--shc-stone); color: var(--shc-humus); border-top: 1px solid var(--shc-rule-light); }
.site-foot .fine { border-top-color: var(--shc-rule-light); }
.site-foot ul a:hover,.site-foot ul a[aria-current] { text-decoration-color: var(--shc-ochre-deep); }
.hero.light .watermark { opacity: .8; }
.hero-portrait.light .portrait img { outline: 1px solid var(--shc-rule-light); }
.dark .card .rings path { stroke: #EDE7DA; }

/* ===== scroll-first framework (sandbox 2026-09-16) ===== */
:root { --head-h: 96px; }
html { scroll-padding-top: calc(var(--head-h) + 16px); }
.fws-map { position: relative; }
.fws { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: clamp(32px, 4vw, 56px); }
.fws-map .diagram svg { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }
/* default, before the reader reaches the first domain: the whole tree in full color */
/* a season's ring: on arriving at a domain, a new ring draws along that domain's own arc, at the bark
   for the outer band and at the core boundary for the inner three */
.fws .cb-seasonline { stroke: var(--shc-bark); stroke-width: 3.2px; stroke-opacity: 0; stroke-linecap: round; }
.fws .cb.focus .cb-seasonline.on { stroke-opacity: .95; stroke-width: 3.4px; }
/* rings already laid down stay, so the reader can see the seasons accumulate behind them */
.fws .cb.focus .cb-seasonline.seen { stroke-opacity: .55; stroke-width: 2.8px; }
@keyframes shc-season { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* the pith breathes on each change, so every domain reads as coming from one origin */
.fws .cb .cb-pith { opacity: 1; transform-origin: 380px 300px; transition: fill .35s ease; }
/* the pith is ochre, which disappears into Purpose's gold, so it switches to bark there */
.fws .cb.on-purpose .cb-pith { fill: var(--shc-bark); }
.fws .cb.pulse .cb-pith { animation: shc-pith-pulse .9s cubic-bezier(.16, 1, .3, 1); }
@keyframes shc-pith-pulse { 0% { transform: none; } 30% { transform: scale(1.9); } 100% { transform: none; } }
/* heading and question rise as their section arrives, so type and graphic move together */
.fws-domain.active h3,.fws-domain.active .fws-q { animation: shc-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.fws-domain.active .fws-q { animation-delay: .08s; }
@keyframes shc-rise { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* desktop has room for a more generous expansion than the cropped phone map */
@media (prefers-reduced-motion: reduce) {
  .fws .cb.pulse .cb-pith,.fws-domain.active h3,.fws-domain.active .fws-q { animation: none; }
  .fws .cb.focus .cb-seasonline.on { animation: none; stroke-dashoffset: 0; }
}
.fws-back { margin: 0; padding: clamp(28px, 4vw, 40px) 0 0; border-top: 1px solid var(--shc-rule-light); }
.fws-back a { display: inline-block; padding: 10px 0; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--shc-ochre-deep); }
.fws-back a::before { content: "\2191"; margin-right: 10px; }
.fws-back a:hover { border-bottom-color: currentColor; }
/* a bark stem down the side of each domain's copy, in that domain's own ink, so the theme stays in view
   while reading. Same textured treatment as the rings. */
.fws-domain { position: relative; }
.fws-stem { position: absolute; left: 0; top: clamp(20px, 4vw, 34px); bottom: clamp(20px, 4vw, 34px); width: 3px;
  background: var(--dom, var(--shc-bark)); opacity: .45; filter: url(#inkstem);
  /* pigment pools and thins down the length, with a couple of places where the tool skips */
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 34px, rgba(0,0,0,.45) 34px 41px, #000 41px 96px, rgba(0,0,0,.2) 96px 99px, #000 99px 150px, rgba(0,0,0,.6) 150px 162px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 34px, rgba(0,0,0,.45) 34px 41px, #000 41px 96px, rgba(0,0,0,.2) 96px 99px, #000 99px 150px, rgba(0,0,0,.6) 150px 162px); }
.fws-domain.active .fws-stem { opacity: .95; }
@media (min-width: 960px) { .fws-stem { width: 3.5px; } }
/* the caption below the map takes the featured domain's ink */
/* on phones the featured domain's name lives under the graphic, where there is room for it: its label
   inside the band would only repeat the caption and never sits well in a curved 78-unit band */
.fws-current { font-size: clamp(21px, 5.6vw, 27px); letter-spacing: .16em; font-weight: 500; color: var(--dom, var(--shc-humus)); transition: color .35s ease; filter: url(#inktext); margin-top: 16px; }
.fws-current::after { content: ""; display: block; width: 78px; height: 3px; margin: 13px auto 0; background: var(--dom, var(--shc-bark)); opacity: .85; filter: url(#inktext); }
.fws-current:empty::after { display: none; }
/* walnut-ink line: the path stays controlled and concentric, the stroke carries the texture.
   feDisplacementMap gives the edge its tooth, the second turbulence varies pigment density, and the
   dash pattern supplies the occasional tiny skip where a dry twig lifts off the paper. */
.fws .cb .cb-seasonline { filter: url(#shc-ink); }
.fws .cb .cb-seasonline { stroke-dasharray: var(--skips); }
/* ---- focus behavior: expansion, not just color ----
   ease is an expo-out curve so the growth reads as opening outward rather than easing in and out. */
.fws .cb { transition: transform .75s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 50%; }
.fws .cb.focus { transform: scale(1.03); }
/* default: every domain in full color. focused: the rest recede, the read one grows from the pith. */
.fws .cb .cb-fill { opacity: 1; transform: none; transform-origin: 380px 300px; transition: opacity .45s ease, transform .75s cubic-bezier(.16, 1, .3, 1); }
/* three states while reading, so the tree accumulates as the reader moves through it:
   not yet reached (faint, pulled back toward the pith), already read (held, most of its color),
   and the one being read (full, and it grows outward from the pith as it arrives). */
.fws .cb.focus .cb-fill { opacity: .12; transform: scale(.94); }
.fws .cb.focus .cb-fill.seen { opacity: .5; transform: scale(.985); }
.fws .cb.focus .cb-fill.on { opacity: 1; transform: none; animation: shc-wedge-grow .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes shc-wedge-grow { from { transform: scale(.45); opacity: .2; } to { transform: none; opacity: 1; } }
/* the interior rings widen outward, each one a beat behind the one inside it */
/* the ripple animation below replaces the draw-in animation on these rings, and that animation's end
   state was the only thing keeping them visible, so state the finished dash here instead */
/* the pith's beat travels outward: each ring widens a moment after the one inside it, then settles back,
   so a change of domain reads as one ripple from the center rather than a state the rings hold */
@keyframes shc-ripple { 0% { transform: none; } 40% { transform: scale(calc(1 + 0.014 * min(var(--n), 8))); } 100% { transform: none; } }
/* core labels: always inked for their own wedge; the read one grows in place */
.fws .cb text.cb-label { fill: var(--on-ink); transition: transform .65s cubic-bezier(.16, 1, .3, 1), fill .35s ease, opacity .35s ease; }
.fws .cb.focus text.cb-label { fill: var(--shc-humus); }
/* only the straight core labels grow: the curved band labels have no transform origin of their own, so a
   scale here throws them outward from the viewBox center and out past the bark */
.fws .cb.focus text.cb-label.on:not(.cb-arc-t) { fill: var(--on-ink); transform: scale(1.16); }
.fws .cb text.cb-arc-t,.fws .cb text.cb-arc-t.on { transform: none; }
.fws .cb.focus text.cb-arc-t.on { fill: var(--on-ink); }
/* band labels hold one size: curved text reflows along its arc as it grows, which crowds the wedge ends.
   color and opacity carry the emphasis instead. */
.fws .cb .cb-arc-t { fill: #F7F7F4; transition: fill .35s ease, opacity .35s ease; }
.fws .cb.focus .cb-arc-t { fill: var(--shc-humus); }
.fws .cb.focus .cb-arc-t.on { fill: var(--on-ink); }
@media (min-width: 960px) { .fws .cb.focus { transform: scale(1.06); } }
.fws .cb.in.focus .cb-label { opacity: .32; }
.fws .cb.in.focus .cb-label.seen { opacity: .62; }
.fws .cb.in.focus .cb-label.on { opacity: 1; }
@media (max-width: 959px) {
  .fws .cb.in.focus .cb-label.on,.fws .cb.focus .cb-label.on { opacity: 0; }
}
.fws-domain { padding: clamp(36px, 5vw, 56px) 0 clamp(36px, 5vw, 56px) 22px; border-top: 1px solid var(--shc-rule-light); }
.fws-domain:first-child { margin-top: 24px; }
/* the scrolling domain name: a caption bound to the sticky diagram, deliberately set apart
   from the three heading levels because it labels the graphic rather than the page section */
.fws-domain h3 { font-family: var(--shc-font); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
.fws-domain .fws-q { font-size: clamp(19px, 1.7vw, 22px); font-weight: 400; line-height: 1.45; max-width: 40ch; margin: 0 0 1em; }
.fws-domain p { font-weight: 400; }
.fws-domain .explore { margin-top: 24px; }
.fws-domain .explore-h { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin: 0 0 6px; }
.fws-domain .bullets li { font-size: 16px; font-weight: 400; }
/* phones and tablets: the map sits once above the stacked domains; labels would be tiny at this width,
   so the SVG shows every region in color and a readable legend carries the names */
@media (max-width: 959px) {
  .fws .cb g.cb-label { display: none; }
  .fws .cb .cb-arc { display: inline; }
  .fws .cb text.cb-label { font-weight: 500; }
}
/* larger screens: sticky map beside a scrolling column; highlight follows scroll position */
@media (min-width: 960px) {
  .fws { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .fws-map { position: sticky; top: calc(var(--head-h) + 32px); }
  .fws-domain { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; }
  .fws-domain:first-child { margin-top: 0; }
}
@media (max-width: 959px) {
  /* the map is cropped to a square box so it can sit compactly at the top of the screen while the
     domains scroll underneath it */
  .fws-map .diagram { overflow: hidden; width: min(248px, 62vw); aspect-ratio: 1; margin: 0 auto; }
  .fws-map .diagram svg { width: 170%; max-width: none; margin: -12% 0 0 -47%; }
  .fws-map { position: sticky; top: var(--head-h); z-index: 5; background: var(--shc-stone); padding: 10px 0 14px; border-bottom: 1px solid var(--shc-rule-light); }
  .fws-map::after { content: ""; position: absolute; left: calc(var(--shc-gutter) * -1); right: calc(var(--shc-gutter) * -1); top: 100%; height: 20px; background: linear-gradient(var(--shc-stone), rgba(247, 247, 244, 0)); pointer-events: none; }
  .fws-list .fws-domain:first-child { margin-top: 0; border-top: 0; }
  .fws-domain { scroll-margin-top: calc(var(--head-h) + 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .fws .cb,.fws .cb .cb-fill,.fws .cb .cb-label,.fws .cb .cb-arc-t { transition: none; }
  .fws .cb.focus .cb-fill.on { animation: none; }
  .fws .cb.focus,.fws .cb.focus .cb-fill.on,.fws .cb.focus text.cb-label.on { transform: none; }
}


/* direct labels and per-domain maps (sandbox 2026-09-16, v5) */
.cb .cb-arc { display: none; }
.fws-head { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; }
.fws-head h3 { margin: 0; }
.fws-mini { flex: none; width: 84px; height: 84px; display: block; }
.fws-mini use { fill: var(--shc-ash); stroke: var(--shc-stone); stroke-width: 6; }
.fws-mini use.on { fill: var(--c); }
.fws-mini .mini-edge { fill: none; stroke: var(--shc-bark); stroke-opacity: .55; stroke-width: 5; }
@media (min-width: 960px) { .fws-mini { width: 72px; height: 72px; } }
@media (max-width: 959px) {
  .fws .cb text.cb-label { letter-spacing: .04em; }
}
.fws-current { margin: 12px 0 0; text-align: center; text-transform: uppercase; min-height: 2.4em; }
/* the big diagram is labeled on desktop, so the caption is only needed where the heading scrolls away */
@media (min-width: 960px) { .fws-current { display: none; } }
@media (max-width: 959px) { .fws-head .fws-mini { display: none; } .fws-head { gap: 0; } }
.cb-jumps .cb-jump { cursor: pointer; }
.cb-jumps .cb-jump:focus-visible { outline: 2px solid var(--shc-ochre-deep); outline-offset: 2px; }
.cb-jumps .cb-jump:focus-visible use,.cb-jumps .cb-jump:hover use { fill: #2A2420; fill-opacity: .07; }
.fws-domain { scroll-margin-top: calc(var(--head-h) + 24px); }
/* on phones the sticky map sits under the header, so a jumped-to heading has to clear both */
@media (max-width: 959px) { .fws-domain { scroll-margin-top: calc(var(--head-h) + 318px); } }
/* one behavior at every size: the map stays put, the domain in view is the one lit up */
.fws .cb-arc-t { paint-order: stroke; }
/* ===== small-device responsive pass (sandbox 2026-09-16): same layout, sized for phones ===== */
@media (max-width: 600px) {
  :root { --shc-gutter: 20px; --shc-section: 48px; }
  body { font-size: 18px; }
  body p,body li,.bullets li,.domains li span,.tension li span { font-weight: 400; }
  .site-head .nav { flex-wrap: wrap; padding: 10px var(--shc-gutter); gap: 0 12px; }
  .site-head .lockup { width: min(210px, 62vw); min-width: 0; padding-left: 2px; }
  .site-head .lockup svg,.site-foot .lockup svg { overflow: visible; }
  .menu-toggle { min-height: 44px; min-width: 76px; font-size: 14px; padding: 10px 14px; }
  .site-head .nav ul { gap: 0; padding: 8px 0 16px; }
  .site-head .nav ul li { width: 100%; }
  .site-head .nav ul a:not(.btn) { display: block; padding: 12px 0; font-size: 14px; }
  .site-head .nav ul .btn { margin-top: 10px; }
  body .eyebrow { font-size: 13px; letter-spacing: .14em; margin-bottom: 18px; }
  body .btn { font-size: 14px; letter-spacing: .1em; }
  body .btn.email-link { text-transform: none; letter-spacing: .02em; font-size: 16px; }
  .hero { padding: 56px var(--shc-gutter); }
  .hero .cta { gap: 12px; }
  body .card { padding: 30px 22px; }
  body .card.has-rings { padding-bottom: 56px; }
  .card .more,a.more { display: inline-block; padding: 10px 0; font-size: 16px; }
  .quote { font-size: 18px; padding-left: 18px; }
  .quote cite,cite { font-size: 14px; }
  .band .inner { padding: 56px var(--shc-gutter); }
  .band .sub { font-size: 16px; }
  .note { font-size: 15px; }
  body label { font-size: 13px; }
  .site-foot { padding: 56px var(--shc-gutter) 36px; }
  .site-foot ul { gap: 0; }
  .site-foot ul a { display: inline-block; padding: 11px 0; font-size: 14px; }
  .site-foot .fine { font-size: 13px; }
  .site-foot .fine a { display: inline-block; padding: 10px 0; }
  .site-foot .tag-line { font-size: 16px; }
  #page-contact iframe { height: 780px; }
}
@media (max-width: 360px) {
  .site-head .lockup { width: min(180px, 58vw); }
  body .btn { letter-spacing: .1em; padding: 14px 16px; }
}

/* ===== texture pass (2026-09-22): soft colour seams, denser ink rings, spiral heart ===== */
/* overlay lets one ink read on both the pale domains and the dark ones */
.cb .cx-rings { mix-blend-mode: overlay; }
/* the centre no longer pulses: it is a spiral, not a heartbeat dot */
.fws .cb.pulse .cb-pith { animation: none; }

.fws-how { margin: clamp(28px, 4vw, 40px) 0 0; }
.fws-how h3 { margin: 0 0 .5em; }
.fws-how p { margin-bottom: 0; }

.fws-how-end{margin:3rem auto 0;max-width:64ch;padding-top:2rem;border-top:1px solid rgba(65,82,90,.16)}
.fws-how-end h3{margin:0 0 .6em}
.fws-how-end .howlist{margin:1rem 0 0;padding-left:1.4em;display:grid;gap:.85rem}
.fws-how-end .howlist li{padding-left:.3em;line-height:1.6}
.fws-how-end .howlist b{font-weight:600}
@media (max-width:700px){.fws-how-end{margin-top:2.2rem;padding-top:1.6rem}}

/* Approach page: shorten the run-up so the interactive diagram is reached sooner, and let the
   framework intro use the full content width instead of one narrow left column. */
#page-approach .hero { min-height: 0; padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(28px, 3.2vw, 48px); }
#page-approach .hero .watermark { opacity: .55; }
#page-approach #framework { padding-top: clamp(28px, 3.4vw, 48px); }
#page-approach #framework > .wrap > h2 { margin-bottom: .8em; }
#page-approach .fw-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
#page-approach .fw-intro p { max-width: none; }
#page-approach .fw-intro p:last-child { margin-bottom: 0; }
#page-approach .fw-intro .fws-how { margin: 0; padding-left: clamp(22px, 2.4vw, 40px); border-left: 1px solid rgba(65, 82, 90, .16); }
@media (max-width: 900px) {
  #page-approach .fw-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #page-approach .fw-intro .fws-how { padding-left: 0; border-left: 0; border-top: 1px solid rgba(65, 82, 90, .16); padding-top: 20px; }
}

/* Approach hero: the intro paragraph now sits in the hero itself, over the rings, and the rings
   run past the copy and off the edges instead of ending in mid-air. */
#page-approach .hero { padding-bottom: clamp(48px, 5vw, 84px); }
#page-approach .hero .wrap { position: relative; }
#page-approach .hero .copy { max-width: 760px; }
/* the rings are allowed out of the hero so their arcs run on past the copy and dissolve well down
   the page, rather than being clipped flat at the hero edge. the page clips sideways so nothing
   creates a horizontal scrollbar, and the framework section goes transparent with its own content
   lifted above, so the rings pass behind it. */
#page-approach { overflow-x: clip; }
#page-approach .hero { overflow: visible; }
#page-approach #framework { position: relative; }
#page-approach #framework > .wrap { position: relative; z-index: 1; }
#page-approach .hero .watermark { --wm: 1.3; left: 80%; top: 38%; z-index: 0; }
@media (max-width: 900px) { #page-approach .hero .watermark { --wm: 1.15; left: 94%; top: 30%; opacity: .3; } }
@media (max-width: 900px) { #page-approach .hero .watermark { --wm: 1.5; left: 88%; top: 40%; opacity: .38; } }

/* Two sections on the same ground used to stack their full padding, so every junction
   carried roughly twice the space it needed. The second one gives back most of its top. */
.section + .section { padding-top: calc(var(--shc-section) * .55); }
.section.light + .section.light,.section.dark + .section.dark { padding-top: calc(var(--shc-section) * .45); }
/* a change of ground is a real break and keeps its full measure */
.section.light + .section.dark,.section.dark + .section.light,.band + .section,.section + .band { padding-top: var(--shc-section); }
.band + .section { padding-top: calc(var(--shc-section) * .8); }

/* One left edge for the whole site. A narrow section used to centre a 760px column inside
   the 1200px wrap, so its text started 220px further in than the section above it. The wrap
   now always spans the grid and the reading measure is capped on the content instead. */
.section.narrow .wrap { max-width: var(--shc-max); }
.section.narrow .wrap > *:not(.cards):not(.grid-2):not(.grid-3):not(.split):not(.fws) { max-width: 820px; }
.section.narrow.center .wrap > * { margin-left: auto; margin-right: auto; }

/* The rings were being clipped flat at each hero's lower edge. Where the hero shares its
   ground with the section below, they are let out of the box and dissolve well down the page.
   Where the ground changes colour at that edge, they cannot cross it, so they get a long
   dissolve inside the hero instead. Either way no arc ends in mid-air. */
.page { overflow-x: clip; }
.page .hero.light { overflow: visible; }
.page .hero.light + .section.light { background: transparent; position: relative; }
.page .hero.light + .section.light > .wrap { position: relative; z-index: 1; }
/* Two masks, combined. The vertical one lets the arcs leave the hero and dissolve rather than
   stop at an edge. The horizontal one keeps them off the reading column: line art crossing
   running text is the thing that reads as busy, however faint the lines are. */
.hero.light .watermark {
  opacity: .4;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, rgba(0,0,0,.14) 86%, transparent 97%),
                      linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 30%, #000 52%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.45) 68%, rgba(0,0,0,.14) 86%, transparent 97%),
              linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 30%, #000 52%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* a dark hero meets a light section at a hard colour change, so its rings finish inside it */
.hero.dark .watermark { --wm: 1.5; opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.18) 82%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.18) 82%, transparent 96%);
}
@media (max-width: 900px) { .hero.dark .watermark { --wm: 1.25; opacity: .4; } }

/* Contact exists to get someone booked, so its hero earns less room than the others and the
   calendar sits as close to the top as the page allows. */
#page-contact .hero { min-height: 0; padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(32px, 3.5vw, 52px); }
#page-contact .hero + .section { padding-top: clamp(28px, 3vw, 44px); }

/* WCAG 2.2 target size (2.5.8) asks for 24x24. The nav and footer links were 14-18px tall,
   so they get padding rather than a bigger type size. Links inside a sentence are exempt
   under the "inline in a block of text" exception and are left alone. */
.site-head .nav ul a:not(.btn) { display: inline-block; padding: 6px 2px; }
.site-foot ul a { display: inline-block; padding: 5px 2px; }
.site-foot .email-link:not(.btn) { display: inline-block; padding: 6px 2px; }

/* ============================ inked buttons ============================
   The button is its label plus a pen line drawn round it. The line is a filled
   outline rather than a stroke, so it swells on the pull and thins on the push,
   and it runs through the coarse ink filter so the edge frays like a twig.

   Geometry is generated per button from its measured box, so a long label and a
   short one each get their own loop instead of one shape stretched to fit. The
   padding below is deliberately the same at every width: it keeps each box a
   fixed size, which is what lets one drawing serve all breakpoints.

   Motion is opacity only. The ink gains pigment on hover or keyboard focus and
   nothing moves, which keeps these clear of the drawing already happening in the
   framework diagram. */
body .btn,body .dark .btn-primary,body.dark .btn-primary,body .light .btn-primary,body.light .btn-primary,body .dark .btn-secondary,body.dark .btn-secondary,body .light .btn-secondary,body.light .btn-secondary,body .band-slate .btn-primary,body .band-slate-deep .btn-primary {
  /* the filled shape is gone, so the label must take the ground's own text colour:
     these rules used to set a light label for a dark fill, which now reads as invisible */
  background: none; border-color: transparent; border-radius: 0; color: inherit;
}
body .dark .btn-primary:hover,body.dark .btn-primary:hover,body .light .btn-primary:hover,body.light .btn-primary:hover,body .light .btn-secondary:hover,body.light .btn-secondary:hover,body .dark .btn-secondary:hover,body.dark .btn-secondary:hover,body .band-slate .btn-primary:hover,body .band-slate-deep .btn-primary:hover {
  background: none; border-color: transparent; color: inherit;
}
body .btn {
  position: relative; display: inline-grid; place-items: center;
  /* generous side padding: the orbit sits well clear of the label rather than hugging it */
  padding: 18px 40px; min-height: 60px; color: inherit; isolation: isolate;
  /* never stretch to a container: the drawing is made for one box, so the box must not move */
  width: max-content; max-width: 100%; justify-self: start;
}
/* an address is not a shouted label, and in caps it outgrows a narrow phone */
body .btn.email-link { text-transform: none; letter-spacing: .01em; font-size: 16px; padding-inline: 32px; }
body .btn > span { position: relative; z-index: 1; }
body .btn:focus-visible { outline: 2px solid var(--shc-ochre); outline-offset: 8px; border-radius: 999px; }

/* the two roles are told apart by the weight of the ink, not by a filled shape */

/* the tail is emphasis, so it is carried by one action per page and nothing else */

/* The loop encloses a region; on hover or keyboard focus that region takes a wash of the
   same ink, which gives the button back the weight it lost when the solid shape went away.
   It is opacity only, so nothing moves. The button still has to read at rest, because a
   phone never hovers. */
/* the slate bands are the one ground where a heavier wash pushes the label under 4.5:1,
   so it is held back there rather than applied evenly and quietly failing on two buttons */

/* The decorative rings were the one line on the site with no hand in them: a perfectly
   uniform digital stroke next to a drawn button reads as two different media. This gives
   them the same fraying and the same thinning, a good deal lighter, so the whole page is
   drawn by one instrument. */
.watermark .rings-anim path,.watermark .rings-anim circle,.watermark .tw-ring,.watermark .tw-pith,.watermark .sp-path,.watermark .sp-pith,.card .rings path,.site-foot .rings path { filter: url(#shc-ink-soft); }

/* ==================== line palette, applied ====================
   See the token block for what each role means. Nothing here changes a drawing's shape,
   position or animation; it sets weight, colour and how much hand a line has. */

/* STRUCTURE: the divisions inside the framework */
.fws .cb-seasonline { stroke: var(--line-structure); }

/* GRAIN: the interior rings, which until now were the only untextured line on the site */

/* FIELD: atmosphere behind the words, at one weight everywhere */
.watermark .rings-anim path,.watermark .tw-ring,.watermark .sp-path,.card .rings path,.site-foot .rings path,.band .bandbg path {
  stroke-width: var(--line-field-w); filter: url(#shc-ink-soft);
}
.band .bandbg path { opacity: var(--line-field-o); }
.card .rings path,.site-foot .rings path { opacity: var(--line-field-o); }
.watermark .rings-anim path,.watermark .tw-ring,.watermark .sp-path { stroke-opacity: 1; }

/* MARK: pressure, and one gold on both grounds */
.site-head .lockup svg path[stroke],.site-foot .lockup svg path[stroke] {
  stroke: var(--line-mark); filter: url(#shc-ink); }

/* ---- 2026-09-23 small builds ---- */
/* Home: one primary action per page. The mid-page and band buttons step down to
   secondary; the band's secondary needs its own ink on the slate ground. */
/* Home Experience: text and testimonial side by side, the quote set at reading size so it
   supports the paragraphs rather than outweighing them */
.experience .split { align-items: start; }
.experience .exp-text p:last-child { margin-bottom: 0; }
body .experience .exp-quote { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.55; max-width: 40ch; margin: 0; }
@media (min-width: 801px) { body .experience .exp-quote { margin-top: 44px; } }
/* Framework: the spiral centre is a real link. Radius 36 keeps it at least 24px across on
   a 320px phone. It sits last in the jump group so it is drawn over Purpose's centre. */


/* ---- 2026-09-24: back to plain buttons, no hand-drawn ink ---- */
body .btn { border-width: 1.5px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
body .dark .btn-primary,body.dark .btn-primary,body .band-slate .btn-primary,body .band-slate-deep .btn-primary { background: var(--shc-chalk); color: var(--shc-humus); border-color: var(--shc-chalk); }
body .dark .btn-primary:hover,body.dark .btn-primary:hover { background: var(--shc-ochre); border-color: var(--shc-ochre); }
body .band-slate .btn-primary:hover,body .band-slate-deep .btn-primary:hover { background: var(--shc-stone); border-color: var(--shc-stone); }
body .dark .btn-secondary,body.dark .btn-secondary { background: transparent; color: var(--shc-chalk); border-color: var(--shc-rule-dark); }
body .dark .btn-secondary:hover,body.dark .btn-secondary:hover { border-color: var(--shc-chalk); }
body .band-slate .btn-secondary,body .band-slate-deep .btn-secondary { background: transparent; color: var(--shc-stone); border-color: rgba(247,247,244,.45); }
body .band-slate .btn-secondary:hover,body .band-slate-deep .btn-secondary:hover { border-color: var(--shc-stone); }
body .light .btn-primary,body.light .btn-primary { background: var(--shc-humus); color: var(--shc-stone); border-color: var(--shc-humus); }
body .light .btn-primary:hover,body.light .btn-primary:hover { background: var(--shc-slate-deep); border-color: var(--shc-slate-deep); }
body .light .btn-secondary,body.light .btn-secondary { background: transparent; color: var(--shc-humus); border-color: var(--shc-humus); }
body .light .btn-secondary:hover,body.light .btn-secondary:hover { border-color: var(--shc-slate); color: var(--shc-slate-deep); }

/* earthy primary swap: olive */
body .dark .btn-primary,body.dark .btn-primary { background: #686938; color: #F2EFE4; border-color: #686938; }
body .dark .btn-primary:hover,body.dark .btn-primary:hover { background: #F2EFE4; color: #2A2420; border-color: #F2EFE4; }

/* nav CTA: gold outline (the logo-line gold), fills solid gold on hover/click,
   keeps the site's existing ochre focus ring for keyboard focus */
.site-head .nav .btn-primary { background: transparent; color: #8A6427; border-color: #8A6427; }
.site-head .nav .btn-primary:hover { background: #8A6427; color: #F7F7F4; }


/* ---- 2026-09-24: button key refinements ---- */

/* rectangles, not stadiums: now that buttons are plain (no drawn arc to echo),
   a small radius reads as a clean button rather than borrowing the ring motif */
body .btn,body .btn:focus-visible,.menu-toggle { border-radius: 6px; }

/* "Book time to talk" is one action with one color everywhere it appears,
   whether the surrounding button was styled primary or secondary, light or dark */
body .btn-book,body.dark .btn-book,body.light .btn-book,body .dark .btn-book,body .light .btn-book,body .band-slate .btn-book,body .band-slate-deep .btn-book {
  background: #686938; color: #F2EFE4; border-color: #686938;
}
body .btn-book:hover,body.dark .btn-book:hover,body.light .btn-book:hover,body .dark .btn-book:hover,body .light .btn-book:hover,body .band-slate .btn-book:hover,body .band-slate-deep .btn-book:hover {
  background: #55562F; border-color: #55562F; color: #F2EFE4;
}

/* Secondary buttons ("Work Together" and its kin): a soft tint fill on hover,
   the same "outline gains a fill" language the primary button uses, just at
   a lower strength so secondary still reads as the lighter action. Replaces
   the old convention of only brightening the border. */
body .dark .btn-secondary:hover,body.dark .btn-secondary:hover {
  background: rgba(237, 231, 218, .12); border-color: var(--shc-chalk); color: var(--shc-chalk);
}
body .light .btn-secondary:hover,body.light .btn-secondary:hover {
  background: rgba(42, 36, 32, .08); border-color: var(--shc-humus); color: var(--shc-humus);
}
body .band-slate .btn-secondary:hover,body .band-slate-deep .btn-secondary:hover {
  background: rgba(247, 247, 244, .15); border-color: var(--shc-stone); color: var(--shc-stone);
}

/* nav "Start a Conversation": gold outline only, at rest and on hover -- no
   dark border sneaking in from the generic .light .btn-primary:hover rule */
.site-head .nav .btn-primary,.site-head .nav .btn-primary:hover { border-color: #8A6427; }
.site-head .nav .btn-primary:hover { background: #8A6427; color: #F7F7F4; }

/* the footer's inline "hello@..." link (not the contact-page button, which
   already gets the secondary treatment above): hovers into the same olive
   used for Book Time, instead of just switching its underline to the body color */
.site-foot .email-link:not(.btn) { text-decoration-color: var(--shc-ochre); }
.site-foot .email-link:not(.btn):hover { color: #686938; text-decoration-color: #686938; }


/* fix: book-time hover was losing a specificity tie to the secondary-hover wash;
   pin it explicitly so it always stays olive */
.btn-book:hover { background: #55562F !important; border-color: #55562F !important; color: #F2EFE4 !important; }
/* ===== Framework wheel, hand-drawn version (ported 2026-09-24 from the comparison page, Version 30) ===== */
.fwx { container: fwx / inline-size; }
.fwx .wheel svg { display: block; width: 100%; height: auto; overflow: visible; }
:root { --fw-purpose-rest:#E1D0B0;--fw-purpose-rest-ink:#2A2420;--fw-purpose-lit:#CDA657;--fw-purpose-lit-ink:#2A2420;--fw-purpose-veiled:#ECE1CD;--fw-purpose-rest-erase:#EBE0CB;--fw-purpose-lit-erase:#DBBF89;--fw-purpose-veiled-erase:#F0E9DA;--fw-purpose-name:#8E690D;--fw-purpose-soft:#E1D0B0;--fw-purpose-edge:#C5AC7C;--fw-purpose-lit-edge:#B68815;--fw-purpose-soft-edge:#D0BC96;--fw-clarity-rest:#EBE6DC;--fw-clarity-rest-ink:#2A2420;--fw-clarity-lit:#FDFBF6;--fw-clarity-lit-ink:#2A2420;--fw-clarity-veiled:#F1EEE7;--fw-clarity-rest-erase:#F1EDE6;--fw-clarity-lit-erase:#FCFAF6;--fw-clarity-veiled-erase:#F4F1EC;--fw-clarity-name:#7A6F58;--fw-clarity-soft:#EBE6DC;--fw-clarity-edge:#C9C2B3;--fw-clarity-lit-edge:#E0DDD7;--fw-clarity-soft-edge:#D8D2C6;--fw-genius-rest:#ACB8B4;--fw-genius-rest-ink:#2A2420;--fw-genius-lit:#8AA6B4;--fw-genius-lit-ink:#2A2420;--fw-genius-veiled:#CCD3CF;--fw-genius-rest-erase:#C9D0CD;--fw-genius-lit-erase:#ABBEC8;--fw-genius-veiled-erase:#DADFDB;--fw-genius-name:#587380;--fw-genius-soft:#ACB8B4;--fw-genius-edge:#869792;--fw-genius-lit-edge:#6A8B9C;--fw-genius-soft-edge:#98A6A1;--fw-resourcing-rest:#ADB199;--fw-resourcing-rest-ink:#2A2420;--fw-resourcing-lit:#888F57;--fw-resourcing-lit-ink:#2A2420;--fw-resourcing-veiled:#CDCFBF;--fw-resourcing-rest-erase:#CACCBC;--fw-resourcing-lit-erase:#A9AE86;--fw-resourcing-veiled-erase:#DBDCD0;--fw-resourcing-name:#6E743D;--fw-resourcing-soft:#ADB199;--fw-resourcing-edge:#8B906D;--fw-resourcing-lit-edge:#6E752F;--fw-resourcing-soft-edge:#9A9F82;--fw-power-rest:#C99981;--fw-power-rest-ink:#2A2420;--fw-power-lit:#C76E3C;--fw-power-lit-ink:#2A2420;--fw-power-veiled:#DEC1B1;--fw-power-rest-erase:#DCBDAD;--fw-power-lit-erase:#D99876;--fw-power-veiled-erase:#E7D2C6;--fw-power-name:#AC5621;--fw-power-soft:#C99981;--fw-power-edge:#B5704C;--fw-power-lit-edge:#B34A00;--fw-power-soft-edge:#BC8467;--fw-craft-rest:#C8C2B6;--fw-craft-rest-ink:#2A2420;--fw-craft-lit:#96938B;--fw-craft-lit-ink:#2A2420;--fw-craft-veiled:#DDD9D0;--fw-craft-rest-erase:#DBD7CE;--fw-craft-lit-erase:#B3B1AA;--fw-craft-veiled-erase:#E6E3DC;--fw-craft-name:#726F68;--fw-craft-soft:#C8C2B6;--fw-craft-edge:#A89F8E;--fw-craft-lit-edge:#7C786F;--fw-craft-soft-edge:#B6AFA1; }
.fwx .cb .cb-fill { opacity: 1; transform: none; }
.fwx .cb .cb-label { opacity: 1; animation: none; }
.fwx .cb text.cb-label:not(.cb-arc-t) { font-weight: 500; }
.fwx .cb text.cb-label.on,.fwx .cb g.cb-label.on > text { transform: none; }
.fwx .cb.arcs g.cb-label { display: none; }
.fwx .cb.arcs .cb-arc { display: inline; }
.list { list-style: none; margin: 0; padding: 0; }
.dm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.dm b { display: block; font-family: var(--shc-font); font-weight: 500; font-size: 17px; letter-spacing: .02em; color: var(--dom); }
.dm span { display: block; font-size: 17px; line-height: 1.45; }
.dm .fws-mini { width: 52px; height: 52px; }
.grp-h { font-family: var(--shc-font); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--shc-ochre-deep); margin: 0 0 4px; }
.grp-sub { font-size: 15px; font-style: italic; color: var(--shc-slate-deep); margin: 0 0 18px; }
.fwx .cb .cb-fill { transition: fill .5s ease, opacity .45s ease, transform .75s cubic-bezier(.16, 1, .3, 1); }
.fwx .cb .cb-fill[data-name="Purpose"] { fill: var(--fw-purpose-rest); }
.fwx .cb .cb-fill[data-name="Clarity"] { fill: var(--fw-clarity-rest); }
.fwx .cb .cb-fill[data-name="Genius"] { fill: var(--fw-genius-rest); }
.fwx .cb .cb-fill[data-name="Resourcing"] { fill: var(--fw-resourcing-rest); }
.fwx .cb .cb-fill[data-name="Power"] { fill: var(--fw-power-rest); }
.fwx .cb .cb-fill[data-name="Craft"] { fill: var(--fw-craft-rest); }
.fwx .cb .cb-fill.on[data-name="Purpose"] { fill: var(--fw-purpose-lit); }
.fwx .cb .cb-fill.on[data-name="Clarity"] { fill: var(--fw-clarity-lit); }
.fwx .cb .cb-fill.on[data-name="Genius"] { fill: var(--fw-genius-lit); }
.fwx .cb .cb-fill.on[data-name="Resourcing"] { fill: var(--fw-resourcing-lit); }
.fwx .cb .cb-fill.on[data-name="Power"] { fill: var(--fw-power-lit); }
.fwx .cb .cb-fill.on[data-name="Craft"] { fill: var(--fw-craft-lit); }
.fwx .cb text.cb-label,.fwx .cb text.cb-arc-t { transition: fill .5s ease, opacity .35s ease; }
.fwx .cb text[data-name="Purpose"] { fill: var(--fw-purpose-rest-ink); }
.fwx .cb text[data-name="Clarity"] { fill: var(--fw-clarity-rest-ink); }
.fwx .cb text[data-name="Genius"] { fill: var(--fw-genius-rest-ink); }
.fwx .cb .cb-arc text[data-name="Resourcing"] { fill: var(--fw-resourcing-rest-ink); }
.fwx .cb .cb-arc text[data-name="Power"] { fill: var(--fw-power-rest-ink); }
.fwx .cb .cb-arc text[data-name="Craft"] { fill: var(--fw-craft-rest-ink); }
.fwx .cb text.on[data-name="Purpose"] { fill: var(--fw-purpose-lit-ink); }
.fwx .cb text.on[data-name="Clarity"] { fill: var(--fw-clarity-lit-ink); }
.fwx .cb text.on[data-name="Genius"] { fill: var(--fw-genius-lit-ink); }
.fwx .cb .cb-arc text.on[data-name="Resourcing"] { fill: var(--fw-resourcing-lit-ink); }
.fwx .cb .cb-arc text.on[data-name="Power"] { fill: var(--fw-power-lit-ink); }
.fwx .cb .cb-arc text.on[data-name="Craft"] { fill: var(--fw-craft-lit-ink); }
.dm { --dotc: var(--rest); cursor: default; }
.dm.hl { --dotc: var(--lit); }
.dm .fws-mini use.on { fill: var(--dotc); transition: fill .4s ease; }
.fwx .dm[data-hl] { cursor: pointer; }
body[data-tex="2"] { --grain: .4; }
.fwx .cb .cx-rings { mix-blend-mode: multiply; opacity: .6; }
.fwx .cx-fills .cb-fill { stroke-width: 1.6px; stroke-opacity: .55; stroke-linejoin: round; transition: fill .5s ease, stroke .5s ease, opacity .45s ease, transform .75s cubic-bezier(.16, 1, .3, 1); }
.fwx .cx-fills .cb-fill[data-name="Purpose"] { stroke: var(--fw-purpose-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Purpose"] { stroke: var(--fw-purpose-lit-edge); }
.fwx .cx-fills .cb-fill[data-name="Clarity"] { stroke: var(--fw-clarity-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Clarity"] { stroke: var(--fw-clarity-lit-edge); }
.fwx .cx-fills .cb-fill[data-name="Genius"] { stroke: var(--fw-genius-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Genius"] { stroke: var(--fw-genius-lit-edge); }
.fwx .cx-fills .cb-fill[data-name="Resourcing"] { stroke: var(--fw-resourcing-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Resourcing"] { stroke: var(--fw-resourcing-lit-edge); }
.fwx .cx-fills .cb-fill[data-name="Power"] { stroke: var(--fw-power-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Power"] { stroke: var(--fw-power-lit-edge); }
.fwx .cx-fills .cb-fill[data-name="Craft"] { stroke: var(--fw-craft-edge); }
.fwx .cx-fills .cb-fill.on[data-name="Craft"] { stroke: var(--fw-craft-lit-edge); }
.fwx .cb .rf-rings { mix-blend-mode: multiply; opacity: 1; }
.rf-bark { pointer-events: none; mix-blend-mode: multiply; }
.fwx .cb text.cb-label:not(.cb-arc-t) { font-weight: 400; letter-spacing: .1em; }
.fwx .cb .rf-pith,.fwx .cb.in .rf-pith { opacity: 1; animation: none; }
.fwx .cx-fills .cb-fill { stroke-width: 2.2px; stroke-opacity: .7; }
.rf-rings .rf-rl { fill: #6A4F33; fill-opacity: .88; stroke: none; }
.rf-rim .rf-rimline { fill: #6A4F33; stroke: none; }
.rf-wash-l { mix-blend-mode: multiply; pointer-events: none; }
.fwx .cx-fills .cb-fill { stroke-width: 1.2px; stroke-opacity: .35; }
.rf-rings .rf-rl { fill: #5E4430; fill-opacity: 1; }
.rf-rim .rf-rimline { fill: #5E4430; }
.fwx .cb text.cb-label:not(.cb-arc-t) { font-weight: 300; font-size: 19px; letter-spacing: .12em; }
.fwx .cb g.cb-label > text { font-weight: 300; font-size: 22px; letter-spacing: .16em; }
.fwx .cb text.cb-arc-t { font-weight: 400; font-size: 19px; letter-spacing: .1em; }
.fwx .cb text.cb-label:not(.cb-arc-t) { font-weight: 400; font-size: 19px; }
.fwx .cb g.cb-label > text { font-weight: 400; font-size: 23px; fill: #2A2420; }
.rf-edges2 .rf-edge2 { fill: #6A4F33; fill-opacity: .5; stroke: none; }
.rf-edges2 .rf-edge2 { fill: #5E4430; fill-opacity: .9; }
.rf-edges2 .rf-edge2 { fill: #5E4430; fill-opacity: .82; }
.fw-heart { cursor: pointer; outline: none; }
.fw-heart-hit { fill: #000; fill-opacity: 0; }
.fw-heart-focus { fill: none; stroke: #5E4430; stroke-width: 1.2px; stroke-dasharray: 2 3; opacity: 0; transition: opacity .2s ease; }
.fw-heart:focus-visible .fw-heart-focus { opacity: .9; }
.fw-heart-art { transform-box: view-box; transform-origin: 380px 300px; mix-blend-mode: multiply; animation: fw-heart-breathe 5.5s ease-in-out infinite; }
.fw-spiral { fill: none; stroke: #4E3924; stroke-width: 1.15px; stroke-opacity: .8; stroke-linecap: round; }
.fw-heart-ring { fill: none; stroke: #5E4430; }
.fw-heart:hover .fw-heart-art,.fw-heart:focus-visible .fw-heart-art { animation: fw-heart-turn 2.6s linear infinite; }
.fw-heart.turn .fw-heart-art { animation: fw-heart-once .9s cubic-bezier(.3, .1, .2, 1); }
.fw-heart:active .fw-heart-art { transform: scale(.92); }
@keyframes fw-heart-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.045) rotate(-8deg); } }
@keyframes fw-heart-turn { from { transform: scale(1.1) rotate(0deg); } to { transform: scale(1.1) rotate(-360deg); } }
@keyframes fw-heart-once { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
.fw-heart-art,.fw-heart:hover .fw-heart-art,.fw-heart:focus-visible .fw-heart-art,.fw-heart.turn .fw-heart-art { animation: none; }
}
.fwx .cb .lbl-core text.cb-arc-t { font-size: 19px; font-weight: 400; letter-spacing: .12em; }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Purpose"] { fill: var(--fw-purpose-soft); stroke: var(--fw-purpose-soft-edge); }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Clarity"] { fill: var(--fw-clarity-soft); stroke: var(--fw-clarity-soft-edge); }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Genius"] { fill: var(--fw-genius-soft); stroke: var(--fw-genius-soft-edge); }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Resourcing"] { fill: var(--fw-resourcing-soft); stroke: var(--fw-resourcing-soft-edge); }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Power"] { fill: var(--fw-power-soft); stroke: var(--fw-power-soft-edge); }
.fwx .cb.exploring .cx-fills .cb-fill:not(.on)[data-name="Craft"] { fill: var(--fw-craft-soft); stroke: var(--fw-craft-soft-edge); }
.fx-v { fill: #FAF9F6; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.fx-l { fill: none; stroke: #3F2A1A; stroke-width: 0; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .35s ease, stroke-width .35s ease; }
.fx-c { display: none; }
.fx-o { fill: #5E4430; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.fx-blur { transition: filter .45s ease; }
.fwx .cb.exploring .fx-blur { filter: blur(1.8px); }
.fwx .cb.exploring .fx-c.on { display: inline; }
.fwx .cb.exploring .fx-v:not(.on) { opacity: .42; }
.fwx .cb.exploring .fx-o.on { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
.fx-blur { transition: none; }
}
.fx-cfill[data-name="Purpose"] { fill: var(--fw-purpose-lit); }
.fx-cfill[data-name="Clarity"] { fill: var(--fw-clarity-lit); }
.fx-cfill[data-name="Genius"] { fill: var(--fw-genius-lit); }
.fx-cfill[data-name="Resourcing"] { fill: var(--fw-resourcing-lit); }
.fx-cfill[data-name="Power"] { fill: var(--fw-power-lit); }
.fx-cfill[data-name="Craft"] { fill: var(--fw-craft-lit); }
.fwx .cb.exploring text.cb-label[data-name]:not(.on) { fill: #A8A299; stroke: none; transition: fill .35s ease; }
.fwx:has(.dm.hl) .dm:not(.hl) b,.fwx:has(.dm.hl) .dm:not(.hl) span { color: #A8A299; transition: color .35s ease; }
.lbl-h { stroke-width: 9px; stroke-linejoin: round; stroke-linecap: round; opacity: .9; transition: fill .45s ease, stroke .45s ease; pointer-events: none; }
.lbl-h[data-name="Purpose"] { fill: var(--fw-purpose-rest); stroke: var(--fw-purpose-rest); }
.cb.exploring .lbl-h[data-name="Purpose"]:not(.on) { fill: var(--fw-purpose-veiled); stroke: var(--fw-purpose-veiled); }
.cb .lbl-h.on[data-name="Purpose"] { fill: var(--fw-purpose-veiled); stroke: var(--fw-purpose-veiled); }
.lbl-h[data-name="Clarity"] { fill: var(--fw-clarity-rest); stroke: var(--fw-clarity-rest); }
.cb.exploring .lbl-h[data-name="Clarity"]:not(.on) { fill: var(--fw-clarity-veiled); stroke: var(--fw-clarity-veiled); }
.cb .lbl-h.on[data-name="Clarity"] { fill: var(--fw-clarity-veiled); stroke: var(--fw-clarity-veiled); }
.lbl-h[data-name="Genius"] { fill: var(--fw-genius-rest); stroke: var(--fw-genius-rest); }
.cb.exploring .lbl-h[data-name="Genius"]:not(.on) { fill: var(--fw-genius-veiled); stroke: var(--fw-genius-veiled); }
.cb .lbl-h.on[data-name="Genius"] { fill: var(--fw-genius-veiled); stroke: var(--fw-genius-veiled); }
.lbl-h[data-name="Resourcing"] { fill: var(--fw-resourcing-rest); stroke: var(--fw-resourcing-rest); }
.cb.exploring .lbl-h[data-name="Resourcing"]:not(.on) { fill: var(--fw-resourcing-veiled); stroke: var(--fw-resourcing-veiled); }
.cb .lbl-h.on[data-name="Resourcing"] { fill: var(--fw-resourcing-veiled); stroke: var(--fw-resourcing-veiled); }
.lbl-h[data-name="Power"] { fill: var(--fw-power-rest); stroke: var(--fw-power-rest); }
.cb.exploring .lbl-h[data-name="Power"]:not(.on) { fill: var(--fw-power-veiled); stroke: var(--fw-power-veiled); }
.cb .lbl-h.on[data-name="Power"] { fill: var(--fw-power-veiled); stroke: var(--fw-power-veiled); }
.lbl-h[data-name="Craft"] { fill: var(--fw-craft-rest); stroke: var(--fw-craft-rest); }
.cb.exploring .lbl-h[data-name="Craft"]:not(.on) { fill: var(--fw-craft-veiled); stroke: var(--fw-craft-veiled); }
.cb .lbl-h.on[data-name="Craft"] { fill: var(--fw-craft-veiled); stroke: var(--fw-craft-veiled); }
.lay-e { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
.lay-e .wheel { width: min(300px, 80%); margin: 0 auto; order: -1; }
.lay-e .list .dm { grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--shc-rule-light); }
.lay-e .list .dm:first-child { border-top: 1px solid var(--shc-rule-light); }
.lay-e .dm b { color: var(--shc-slate-deep); margin-bottom: 2px; }
.lay-e .dm span { font-size: 16px; }
.lay-e .grp-sub { margin-bottom: 14px; }
@container fwx (min-width: 900px) {
.lay-e { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 44px); }
.lay-e .wheel { order: 0; width: 100%; }
.lay-e .grp-core { text-align: right; }
.lay-e .grp-core .dm { grid-template-columns: minmax(0, 1fr) 52px; }
.lay-e .grp-core .dm .fws-mini { order: 2; }
.lay-e .grp-sub { min-height: 3.2em; }
}
.fwx .cb.exploring text.cb-label.on { opacity: 0; transition: opacity .15s ease; }
.fwx .cb .lbl-h { transition: opacity .3s ease .35s, fill .45s ease, stroke .45s ease; }
.fwx .cb.exploring .lbl-h.on { opacity: 0; transition: none; }
.fwx .cb text.cb-label,.fwx .cb .lbl-h { transition: opacity .3s ease, fill .45s ease, stroke .45s ease; }
.fwx .cb text { pointer-events: none; }
.fx-h { fill: #000; fill-opacity: 0; cursor: pointer; outline: none; }
.fx-h:focus-visible { fill: none; stroke: #8A6427; stroke-width: 2px; stroke-dasharray: 4 4; }
.fwx .cb { transition: transform .75s cubic-bezier(.16, 1, .3, 1); transform-origin: 50% 50%; }
.fwx .cb.exploring { transform: scale(1.04); }
.fwx .cb .rf-rings .rf-rl { transform-box: view-box; transform-origin: 380px 300px; }
.fwx .cb.pulse .rf-rings .rf-rl { animation: shc-ripple 1.1s cubic-bezier(.16, 1, .3, 1); animation-delay: calc(var(--n) * 42ms); }
.fwx .cb .fx-c,.fwx .cb .fx-o { transform-box: view-box; transform-origin: 380px 300px; }
.fwx .cb.pulse .fx-c.on,.fwx .cb.pulse .fx-o.on { animation: fw-dom-grow .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fw-dom-grow { from { transform: scale(.55); opacity: .25; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.fwx .cb,.fwx .cb.exploring { transition: none; transform: none; }
.fwx .cb.pulse .rf-rings .rf-rl,.fwx .cb.pulse .fx-c.on,.fwx .cb.pulse .fx-o.on { animation: none; }
}
@container fwx (max-width: 899px) {
.lay-e .wheel { position: sticky; top: 0; z-index: 3; width: auto; margin: 0 -20px; padding: 10px 20px 12px; background: var(--shc-stone); border-bottom: 1px solid var(--shc-rule-light); display: flex; justify-content: center; }
.lay-e .wheel svg { width: min(230px, 62vw); }
.lay-e .list .dm { min-height: 22vh; align-content: center; }
}
.fwx .fws-mini use { fill: var(--soft); fill-opacity: .5; stroke: #FAF9F6; stroke-width: 3; }
.fwx .fws-mini use.on { fill: var(--dotc); fill-opacity: 1; stroke: #5E4430; stroke-width: 9; stroke-opacity: .85; }
.fwx .fws-mini .mini-rings circle { fill: none; stroke: #5E4430; stroke-width: 4; stroke-opacity: .28; }
.fwx .fws-mini .mini-edge { fill: none; stroke: #5E4430; stroke-width: 9; stroke-opacity: .8; }
.fwx .fws-mini .mini-pith { fill: #8A6634; }
.fwx .fws-mini use.on { transition: fill .4s ease; }
.fwx .fws-mini .mini-pith { fill: #B8A58A; r: 11; }
.fwx .fws-mini .mini-edge { stroke: #9C8B76; stroke-width: 7; stroke-opacity: .55; }
.fwx .fws-mini use.on { stroke: #9C8B76; stroke-width: 6; stroke-opacity: .6; }
.fwx .fws-mini .mini-rings circle { stroke: #9C8B76; stroke-opacity: .22; }
.fwx .fws-mini .mini-pith { fill: #A99478; r: 14; }
.fwx .fws-mini use.on { stroke-opacity: .8; stroke-width: 7; }
.fwx .fws-mini .mini-edge { stroke-opacity: .65; }
/* home: the stuck wheel on a phone sits below the site header */
@container fwx (max-width: 899px) { .lay-e .wheel { top: var(--head-h, 0px); margin: 0; padding-left: 0; padding-right: 0; } }
.fwx .lay-e { margin-top: clamp(32px, 4vw, 56px); }
/* icons outside the question rows (Approach section heads) */
.fwx .fws-mini use.on { fill: var(--dotc, var(--c)); }
/* Approach: the scroll story now uses the same treatment as the homepage */
.fws.fwx .cb .cb-fill,.fws.fwx .cb.focus .cb-fill,.fws.fwx .cb.focus .cb-fill.seen,.fws.fwx .cb.focus .cb-fill.on { opacity: 1; transform: none; animation: none; }
.fws.fwx .cb.focus { transform: scale(1.04); }
.fws.fwx .cb.in.focus .cb-label:not(.on),.fws.fwx .cb.in.focus .cb-label.crowd-dim { opacity: 1; }
.fws.fwx .cb .cb-label { animation: none !important; opacity: 1; }
.fws.fwx .cb.exploring text.cb-label.on { opacity: 0 !important; }
.fws.fwx .fws-map .diagram { overflow: visible; }
.fws.fwx .fws-map .diagram svg { width: 100%; max-width: 560px; margin: 0 auto; }
@media (max-width: 959px) { .fws.fwx .fws-map .diagram { width: min(250px, 64vw); aspect-ratio: auto; } .fws.fwx .fws-map .diagram svg { width: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .fws.fwx .cb.focus { transform: none; } }
/* bullets: a tiny cross-section of the wheel (fill, rim, one ring, pith), in the domain's own resting color */
body .bullets li::before { -webkit-mask: none; mask: none; width: 11px; height: 11px; top: 8px; border-radius: 50%;
  background-color: var(--bul, #E1D0B0);
  background-image: radial-gradient(circle, #A99478 0 1.2px, transparent 1.5px 2.7px, rgba(156, 139, 118, .6) 2.8px 3.4px, transparent 3.6px);
  box-shadow: inset 0 0 0 1.1px rgba(156, 139, 118, .85); transition: background-color .4s ease; }
.fws-domain .bullets { --bul: var(--domrest); }
.fws-domain.active .bullets { --bul: var(--domsoft); }


/* ---- 2026-09-24: Walking Coaching and Study Groups pages ---- */
/* a card that points to two places: the second link drops to its own line */
.card .more + .more { display: block; width: max-content; max-width: 100%; margin-top: 2px; }
.wt-pointer .more { display: inline-block; margin-top: 4px; }
.card > .rings + h3 { margin-top: 0; }
.after-list { margin-top: 1.3em; }
/* two short topics side by side, each with its own heading */
.pair > div > h2 { margin-top: 0; }
.pair { gap: clamp(32px, 5vw, 72px); }
/* the sign-off line above a closing heading */
.closing .kicker { font-style: italic; font-size: clamp(19px, 1.6vw, 21px); line-height: 1.5; opacity: .9; margin: 0 0 1.2em; }
/* Study Groups: the recommended format as three plain figures on the band */
.format-inner { grid-template-columns: minmax(0, 1fr); }
.format-inner h2 { margin-top: 0; }
.format-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; }
.format-list li { font-family: var(--shc-font); font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; padding-top: 16px; border-top: 1px solid rgba(247, 247, 244, .35); }
.format-inner .sub { margin-top: 32px; }
.format-inner .format-note { margin: 24px 0 0; max-width: 60ch; font-family: var(--shc-font); font-weight: 300; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; }
.format-inner .format-note + .sub { margin-top: 28px; }
@media (max-width: 560px) { .format-list { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* the facilitation photo is a group scene, so it keeps a landscape frame */
/* a long testimonial on a band is set at reading size; the display size suits one or two lines */
body .band .quote-long { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.55; max-width: 52ch; }
/* Walking: the photo beside "Professional coaching, outdoors" sits level with the heading */
.walk-photo > div > h2 { margin-top: 0; }
.walk-photo img { object-position: 50% 30%; }
/* Walking: the Bay sunset runs the full width of the content column above the location cards */
.walk-banner { margin: 0 0 clamp(28px, 4vw, 44px); }
.walk-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 744; object-fit: cover; object-position: 47% 50%; }
@media (max-width: 560px) { .walk-banner img { aspect-ratio: 16 / 10; } }
/* Footer: "Grow what matters." set apart from the description as the practice's motto */
.site-foot .tag-line.tag-motto { margin-top: 10px; font-family: var(--shc-font); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--shc-ochre-deep); }
.site-foot .fine a.in-link { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 10px 6px; vertical-align: middle; text-decoration: none; }
.site-foot .fine a.in-link svg { width: 20px; height: 20px; display: block; }
.site-foot .fine a.in-link:hover { color: var(--shc-ochre-deep); }
@media (min-width: 1181px) { .site-head .lockup { width: 290px; } }
/* a copy block left empty in site-copy.md is hidden rather than leaving a gap */
[data-copy][hidden] { display: none !important; }

/* Approach: framework motion at about 10% so the reading content leads (Sonya, 2026-09-24).
   Each value is one tenth of the Home setting's distance from rest. */
.fws.fwx .cb.focus,.fws.fwx .cb.exploring { transform: scale(1.004); }
@media (min-width: 960px) { .fws.fwx .cb.focus,.fws.fwx .cb.exploring { transform: scale(1.004); } }
.fws.fwx .cb.pulse .rf-rings .rf-rl { animation: fw-ripple-soft 1.1s cubic-bezier(.16, 1, .3, 1); animation-delay: calc(var(--n) * 42ms); }
@keyframes fw-ripple-soft { 0% { transform: none; } 40% { transform: scale(calc(1 + 0.0014 * min(var(--n), 8))); } 100% { transform: none; } }
.fws.fwx .cb.pulse .fx-c.on,.fws.fwx .cb.pulse .fx-o.on { animation: fw-dom-grow-soft .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fw-dom-grow-soft { from { transform: scale(.955); opacity: .925; } to { transform: none; opacity: 1; } }
.fws.fwx .cb.pulse .cb-pith { animation: none; }
.fws.fwx .fw-heart:not(:hover):not(:focus-visible):not(.turn) .fw-heart-art { animation-name: fw-heart-breathe-soft; }
@keyframes fw-heart-breathe-soft { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.0045) rotate(-.8deg); } }
@media (prefers-reduced-motion: reduce) { .fws.fwx .cb.pulse .rf-rings .rf-rl,.fws.fwx .cb.pulse .fx-c.on,.fws.fwx .cb.pulse .fx-o.on,.fws.fwx .fw-heart-art { animation: none; } .fws.fwx .cb.focus,.fws.fwx .cb.exploring { transform: none; } }

/* ---- 2026-09-24: Approach restructure (Sonya's copy of 09-24) ---- */
/* the bridge between the hero and the framework: "Structure, without formula" */
#page-approach .ap-bridge + #framework { padding-top: clamp(48px, 5vw, 72px); }
#page-approach .ap-bridge h2 { margin-top: 0; }
#page-approach .hero.light + .ap-bridge { padding-top: clamp(12px, 2vw, 32px); }
#page-approach .hero.light:has(+ .ap-bridge) { min-height: 0; padding-bottom: clamp(24px, 2vw, 28px); }
#page-approach .hero.light:has(+ .ap-bridge) .lede { margin-bottom: 0; }
#page-approach .ap-bridge { padding-bottom: 0; }
#page-approach .ap-bridge p:last-child { margin-bottom: 0; }
/* the framework intro is one column now that the learning lab moved to the end */
#page-approach .fw-intro { grid-template-columns: minmax(0, 1fr); }
#page-approach .fw-intro .fw-intro-text { max-width: 68ch; }
/* "How we work with it" and "A learning lab" side by side, a hairline between them */
#page-approach .fws-end-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; max-width: none; margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(65, 82, 90, .16); }
#page-approach .fws-end-pair .fws-how { margin: 0; max-width: none; padding-top: 0; border-top: 0; }
#page-approach .fws-end-pair .fws-lab { padding-left: clamp(22px, 2.4vw, 40px); border-left: 1px solid rgba(65, 82, 90, .16); }
#page-approach .fws-end-pair .fws-lab h3 { margin: 0 0 .6em; }
@media (max-width: 800px) {
  #page-approach .fws-end-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 2.2rem; padding-top: 1.6rem; }
  #page-approach .fws-end-pair .fws-lab { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid rgba(65, 82, 90, .16); }
}

/* ---- 2026-09-24: pencil sketch of the framework (option D) as the Approach hero graphic, replacing the
   settling-arcs watermark. "Structure, without formula" below is a plain reading section. ---- */
#page-approach .ap-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: clamp(32px, 5vw, 80px); align-items: center; }
#page-approach .ap-bridge-grid { display: block; }
#page-approach .ap-bridge-text > p { max-width: 68ch; }
#page-approach .ap-sketch { margin: 0; }
#page-approach .ap-sketch svg { display: block; width: 100%; height: auto; max-width: 400px; margin-left: auto; }
@media (max-width: 800px) {
  #page-approach .ap-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #page-approach .ap-sketch svg { max-width: 240px; margin-left: 0; }
}
/* it draws itself once: the pith, the spiral, the six pieces in reading order, then the labels.
   It is complete at rest: only once script arms it (.armed) are the lines hidden, and .in draws them. */
.ap-sketch .sk.armed .sk-step path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ap-sketch .sk.armed .sk-dot { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.ap-sketch .sk.armed .sk-label { opacity: 0; }
.ap-sketch .sk.armed.in .sk-step path { animation: sk-draw var(--d) cubic-bezier(.45, 0, .35, 1) forwards; animation-delay: var(--t); }
.ap-sketch .sk.armed.in .sk-dot { animation: sk-dot .5s cubic-bezier(.2, .7, .2, 1) forwards; }
.ap-sketch .sk.armed.in .sk-label { animation: sk-fade .8s ease-out forwards; animation-delay: var(--t); }
.ap-sketch .sk.armed.in .sk-step > path + path { animation-delay: calc(var(--t) + .12s); }
/* after the sketch is done, the pith spiral keeps growing outward behind the pieces, very slowly
   (about two minutes), like the hero rings on the other pages but quieter */
@keyframes sk-draw { to { stroke-dashoffset: 0; } }
@keyframes sk-dot { to { opacity: 1; transform: none; } }
@keyframes sk-fade { to { opacity: 1; } }

/* ---- 2026-09-25: Inner / Outer group headings on Approach, under the sticky wheel.
   Both sit in one grid cell; the one for the domain being read shows (data-g set by script). ---- */
#page-approach .ap-grpcap { display: grid; justify-items: center; text-align: center; margin: 18px auto 0; max-width: 46ch; }
#page-approach .ap-grpcap .grp-sub { text-wrap: balance; }
#page-approach .ap-grpcap .ap-grp { grid-area: 1 / 1; transition: opacity .45s ease; }
#page-approach .ap-grpcap .grp-sub { margin: 0; }
#page-approach .ap-grpcap[data-g="inner"] .ap-grp-outer,#page-approach .ap-grpcap[data-g="outer"] .ap-grp-inner { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
#page-approach .ap-grpcap[data-g=""] { gap: 12px; }
#page-approach .ap-grpcap[data-g=""] .ap-grp { grid-area: auto; }
@media (max-width: 959px) {
  #page-approach .ap-grpcap { margin-top: 8px; }
  #page-approach .ap-grpcap .grp-sub { display: none; }
  #page-approach .ap-grpcap .grp-h { margin: 0; }
  #page-approach .ap-grpcap + .fws-current { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { #page-approach .ap-grpcap .ap-grp { transition: none !important; } }

/* ---- 2026-09-25: Study Groups hero shows the two books; the facilitation photo moves to "Why facilitation matters" ---- */
#page-study-groups .sg-books { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#page-study-groups .hero-portrait .sg-books img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; }
#page-study-groups .sg-facil .text-photo > div > p { max-width: 68ch; }
#page-study-groups .sg-facil h2 { margin-top: 0; }

/* ---- 2026-09-25: portrait beside Organizational consulting on Work Together ---- */
#page-how-i-work .wt-consult img { aspect-ratio: 4 / 5; object-position: 50% 12%; }
#page-how-i-work .wt-consult h2 { margin-top: 0; }

/* 2026-09-28: same effect as prefers-reduced-motion, applied via a class the page sets itself for a slow connection or Data Saver, so heavy scroll-linked animation (the wheel, the growing spiral, the ring drawings) doesn't run on a weak connection even when the visitor's OS motion setting is left at its default. Mirrors every prefers-reduced-motion rule above, one-for-one, under html.shc-reduce-motion. */
html.shc-reduce-motion html { scroll-behavior: auto; }
html.shc-reduce-motion .watermark-scroll .rings-anim path { stroke-dashoffset: 0; animation: none !important; }
html.shc-reduce-motion .watermark-scroll .rings-anim circle { opacity: 1; animation: none !important; }
html.shc-reduce-motion .watermark-scroll .rings-anim { animation: none !important; }
html.shc-reduce-motion .watermark-live .rings-anim,html.shc-reduce-motion .watermark-live .rings-anim path,html.shc-reduce-motion .watermark-live .rings-anim circle { animation: none; }
html.shc-reduce-motion .watermark-live .rings-anim path { stroke-dashoffset: 0; }
html.shc-reduce-motion .watermark-live .rings-anim circle { opacity: 1; }
html.shc-reduce-motion text.cb-label,html.shc-reduce-motion g.cb-label > text { transition: none; }
html.shc-reduce-motion text.cb-label.on,html.shc-reduce-motion g.cb-label.on > text { transform: none; }
html.shc-reduce-motion .cb { transition: none; }
html.shc-reduce-motion .cb.focus { transform: none; }
html.shc-reduce-motion .cb .cb-fill { transition: opacity .4s ease; transform: none; }
html.shc-reduce-motion .cb .cb-pith,html.shc-reduce-motion .cb .cb-label,html.shc-reduce-motion .cb .cb-fill.on { opacity: 1; }
html.shc-reduce-motion .cb.in * { animation: none !important; }
html.shc-reduce-motion .fw-anim.in * { animation: none !important; }
html.shc-reduce-motion .watermark-two .tw-g,html.shc-reduce-motion .watermark-two .tw-ring,html.shc-reduce-motion .watermark-two .tw-pith,html.shc-reduce-motion .watermark-spiral .sp-path,html.shc-reduce-motion .watermark-spiral .sp-pith { animation: none; }
html.shc-reduce-motion .watermark-two .tw-g { transform: none; }
html.shc-reduce-motion .watermark-two .tw-ring,html.shc-reduce-motion .watermark-spiral .sp-path { stroke-dashoffset: 0; }
html.shc-reduce-motion .watermark-two .tw-pith,html.shc-reduce-motion .watermark-spiral .sp-pith { opacity: 1; }
html.shc-reduce-motion .fws .cb.pulse .cb-pith,html.shc-reduce-motion .fws-domain.active h3,html.shc-reduce-motion .fws-domain.active .fws-q { animation: none; }
html.shc-reduce-motion .fws .cb.focus .cb-seasonline.on { animation: none; stroke-dashoffset: 0; }
html.shc-reduce-motion .fws .cb,html.shc-reduce-motion .fws .cb .cb-fill,html.shc-reduce-motion .fws .cb .cb-label,html.shc-reduce-motion .fws .cb .cb-arc-t { transition: none; }
html.shc-reduce-motion .fws .cb.focus .cb-fill.on { animation: none; }
html.shc-reduce-motion .fws .cb.focus,html.shc-reduce-motion .fws .cb.focus .cb-fill.on,html.shc-reduce-motion .fws .cb.focus text.cb-label.on { transform: none; }
html.shc-reduce-motion .fw-heart-art,html.shc-reduce-motion .fw-heart:hover .fw-heart-art,html.shc-reduce-motion .fw-heart:focus-visible .fw-heart-art,html.shc-reduce-motion .fw-heart.turn .fw-heart-art { animation: none; }
html.shc-reduce-motion .fx-blur { transition: none; }
html.shc-reduce-motion .fwx .cb,html.shc-reduce-motion .fwx .cb.exploring { transition: none; transform: none; }
html.shc-reduce-motion .fwx .cb.pulse .rf-rings .rf-rl,html.shc-reduce-motion .fwx .cb.pulse .fx-c.on,html.shc-reduce-motion .fwx .cb.pulse .fx-o.on { animation: none; }
html.shc-reduce-motion .fws.fwx .cb.focus { transform: none; }
html.shc-reduce-motion .fws.fwx .cb.pulse .rf-rings .rf-rl,html.shc-reduce-motion .fws.fwx .cb.pulse .fx-c.on,html.shc-reduce-motion .fws.fwx .cb.pulse .fx-o.on,html.shc-reduce-motion .fws.fwx .fw-heart-art { animation: none; }
html.shc-reduce-motion .fws.fwx .cb.focus,html.shc-reduce-motion .fws.fwx .cb.exploring { transform: none; }
html.shc-reduce-motion #page-approach .ap-grpcap .ap-grp { transition: none !important; }

/* Contact form */
.contact-form { max-width: 640px; }
.contact-form .field { margin: 0 0 22px; }
.contact-form label { display: block; font-family: var(--shc-font); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--shc-humus); margin: 0 0 8px; }
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form select,.contact-form textarea { width: 100%; box-sizing: border-box; font-family: var(--shc-font-body); font-size: 16px; line-height: 1.5; color: var(--shc-humus); background: var(--shc-stone); border: 1px solid var(--shc-rule-light); border-radius: 6px; padding: 13px 15px; }
.contact-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%232A2420' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { outline: none; border-color: var(--shc-ochre-deep); }
.contact-form .field-hp { position: absolute; left: -9999px; top: -9999px; }
.contact-form button[type="submit"] { font-family: var(--shc-font); cursor: pointer; }
.contact-form .form-note { font-size: 14px; opacity: .7; margin: 14px 0 0; }
.hero .form-note { margin-top: 20px; }
.contact-form .form-status { margin-top: 18px; font-family: var(--shc-font); font-weight: 500; }
.contact-form .form-status[data-state="success"] { color: var(--shc-slate-deep); }
.contact-form .form-status[data-state="error"] { color: #A0442A; }
.contact-form.is-submitting button[type="submit"] { opacity: .6; pointer-events: none; }
.contact-form[data-sent="true"] .field,.contact-form[data-sent="true"] button[type="submit"] { display: none; }

/* ---- 2026-09-30: one corner radius for every button and box (6px, the menu box and the
   "Work Together" button). Earlier rules had left most buttons and all cards square. ---- */
body .btn,body .btn:focus-visible,.menu-toggle,body .card,.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form select,.contact-form textarea { border-radius: 6px !important; }
/* contact page */
.contact-form input[type="tel"] { width: 100%; box-sizing: border-box; font-family: var(--shc-font-body); font-size: 16px; line-height: 1.5; color: var(--shc-humus); background: var(--shc-stone); border: 1px solid var(--shc-rule-light); padding: 13px 15px; }
.contact-form input[type="tel"]:focus { outline: none; border-color: var(--shc-ochre-deep); }
.contact-form .req { color: var(--shc-ochre-deep); }
.contact-form .opt { text-transform: none; letter-spacing: .02em; font-weight: 400; opacity: .7; }
.contact-form fieldset.checks { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.contact-form fieldset.checks legend { font-family: var(--shc-font); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--shc-humus); padding: 0; margin: 0 0 10px; }
.contact-form label.check { display: flex; align-items: flex-start; gap: 12px; text-transform: none; letter-spacing: 0; font-family: var(--shc-font-body); font-weight: 400; font-size: 16px; line-height: 1.45; margin: 0 0 10px; cursor: pointer; }
.contact-form label.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #686938; cursor: pointer; }
.contact-form label.check input:focus-visible { outline: 2px solid var(--shc-ochre); outline-offset: 2px; }
.contact-book-cta { margin: 28px 0 0; }
.contact-form .field { border-bottom: 0; }
.contact-book-cta a.btn { text-decoration: none; }
.contact-form .form-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--shc-ochre-deep); }

/* Primary button keeps light text on hover in light sections (body.dark hover rule was turning it dark) */
body .light .btn.btn-primary:hover,body.light .btn.btn-primary:hover { color: var(--shc-stone); }

/* ---- 2026-10-04: header fades away on scroll down, returns on scroll up ---- */
.site-head { transition: transform .35s ease, opacity .3s ease; will-change: transform; }
.site-head.is-away { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* sticky pieces that sit under the header follow it up while it is away */
.fws-map { top: var(--head-top, var(--head-h)); transition: top .35s ease; }
.lay-e .wheel { top: var(--head-top, var(--head-h, 0px)); transition: top .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .site-head,.fws-map,.lay-e .wheel { transition: none; }
}

/* ---- 2026-10-04 design audit: olive darkened for 4.5:1 text contrast; footer small print 13px ---- */
.site-foot .fine { font-size: 13px; opacity: .78; }

/* 2026-10-04: header content lines up with the page margins (the nav max-width now includes its side padding) */
.site-head .nav { max-width: calc(var(--shc-max) + 2 * var(--shc-gutter)); }

/* 2026-10-05: home hero rings are a pre-rendered image (ink texture baked in) instead of 23 live
   filtered paths. Same look, no live filter work, so iPhones no longer run out of memory. */
.hero .watermark .rings-anim { position: absolute; inset: 0; }
.hero .watermark .rl { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); animation: shc-open 4.02s linear .35s forwards; }
.hero .watermark .rl-gold { opacity: .85; animation-delay: 4.35s; }
.hero .watermark .rl img { display: block; width: 100%; height: 100%; max-width: none; }
.hero .watermark .rl-gold > img { transform: scale(.94); transform-origin: 50% 50%; }
.hero .watermark .rl img.rc { position: absolute; left: 47%; top: 47%; width: 6%; height: 6%; }
@keyframes shc-open { to { clip-path: circle(52% at 50% 50%); } }
@media (prefers-reduced-motion: reduce) { .watermark-live .rings-anim { animation: none; } .hero .watermark .rl { animation: none; clip-path: none; } }
html.shc-reduce-motion .watermark-live .rings-anim { animation: none; }
html.shc-reduce-motion .hero .watermark .rl { animation: none; clip-path: none; }

/* 2026-10-09: Approach, one change: switch off the heavy ink texture on the big framework drawing's five line groups. */
.cb [filter="url(#cx-ink-a-ap)"] { filter: none; }

/* 2026-10-14: phones and tablets crashed on Approach, About, Work Together and other inner pages.
   The hand-drawn ink texture is an SVG filter, and each filtered drawing needs its own large memory
   buffer on a high-resolution screen (estimated at 2-4 GB per page). Touch screens and narrow windows
   now draw the same lines without the texture; desktop keeps it.
   Only the texture filters are switched off: the filters that paint the framework diagram (washes, grain, label glow) stay on. */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .band .bandbg path,
  .card .rings path,
  .fws .cb .cb-seasonline,
  .fws-current,
  .fws-current::after,
  .fws-stem,
  .pr-dz,
  .pr-paper .pr-summary dd.hand,
  .site-foot .lockup svg path[stroke],
  .site-foot .rings path,
  .site-head .lockup svg path[stroke],
  .watermark .rings-anim circle,
  .watermark .rings-anim path,
  .watermark .sp-path,
  .watermark .sp-pith,
  .watermark .tw-pith,
  .watermark .tw-ring,
  [filter="url(#inktext)"],
  [filter="url(#shc-ink)"],
  [filter="url(#shc-ink-soft)"],
  [filter="url(#ringink)"],
  [filter="url(#inkline)"],
  [filter="url(#inkstem)"],
  [filter="url(#btnink)"],
  [filter="url(#cx-ink-a-ap)"],
  [filter="url(#cx-edge-f-ap)"],
  [filter="url(#pencil-ap)"],
  [filter="url(#dd-ink-soft)"],
  [filter="url(#dd-pencil-text)"],
  [filter="url(#wash-ap)"] { filter: none !important; }
}

/* 2026-10-14: Safari draws the SVG ink texture far more slowly than Chrome, so pages felt slow on a Mac too.
   A one-line script in each page's head marks Safari with html.no-ink; Safari then shows the drawings without the texture. */
html.no-ink .band .bandbg path,
html.no-ink .card .rings path,
html.no-ink .fws .cb .cb-seasonline,
html.no-ink .fws-current,
html.no-ink .fws-current::after,
html.no-ink .fws-stem,
html.no-ink .pr-dz,
html.no-ink .pr-paper .pr-summary dd.hand,
html.no-ink .site-foot .lockup svg path[stroke],
html.no-ink .site-foot .rings path,
html.no-ink .site-head .lockup svg path[stroke],
html.no-ink .watermark .rings-anim circle,
html.no-ink .watermark .rings-anim path,
html.no-ink .watermark .sp-path,
html.no-ink .watermark .sp-pith,
html.no-ink .watermark .tw-pith,
html.no-ink .watermark .tw-ring,
html.no-ink [filter="url(#inktext)"],
html.no-ink [filter="url(#shc-ink)"],
html.no-ink [filter="url(#shc-ink-soft)"],
html.no-ink [filter="url(#ringink)"],
html.no-ink [filter="url(#inkline)"],
html.no-ink [filter="url(#inkstem)"],
html.no-ink [filter="url(#btnink)"],
html.no-ink [filter="url(#cx-ink-a-ap)"],
html.no-ink [filter="url(#cx-edge-f-ap)"],
html.no-ink [filter="url(#pencil-ap)"],
html.no-ink [filter="url(#dd-ink-soft)"],
html.no-ink [filter="url(#dd-pencil-text)"],
html.no-ink [filter="url(#wash-ap)"] { filter: none !important; }

/* 2026-10-14: simplified framework diagram on the Approach page, the same in every browser.
   Flat domain colors and plain ring lines; no texture, wash, blur or label glow effects. */
svg.cb, svg.cb * { filter: none !important; }
svg.cb .rf-wash-l rect, svg.cb .lbl-halo, svg.cb .rf-bark { display: none !important; }
svg.cb .rf-rings, svg.cb .fx-crisp use[href="#fxrings-w7-ap"] { opacity: .1 !important; }
/* Keep the selected domain's label visible while its description is open (it used to fade out on narrower screens). */
.fws .cb.in.focus .cb-label.on, .fws .cb.focus .cb-label.on,
.fwx .cb.exploring text.cb-label.on, .fws.fwx .cb.exploring text.cb-label.on { opacity: 1 !important; }
/* Domain labels one point larger (19px to 20.3px). */
.fwx .cb .lbl-core text.cb-arc-t, .fwx .cb text.cb-label:not(.cb-arc-t) { font-size: 20.3px; }

/* 2026-10-14: framework diagram redrawn (v9: full color until Purpose, strong fade while reading) from the hand sketch at the top of the Approach page.
   Six separate hand-drawn pieces, flat color, plain lines. No SVG filters, masks or blend modes,
   so it draws the same (and light) in Safari, on phones and on desktop. */
.fwn { display: block; width: 100%; height: auto; overflow: visible; }
.fwn .fwn-d { transition: opacity .45s ease; }
.fwn .fwn-fill { fill: var(--c); transition: fill .45s ease, opacity .45s ease; }
.fwn .fwn-line { fill: none; stroke: #5A4E44; stroke-width: 2.2; stroke-opacity: .85; stroke-linejoin: round; stroke-linecap: round; }
.fwn .fwn-line2 { fill: none; stroke: #5A4E44; stroke-width: 1.3; stroke-opacity: .4; stroke-linejoin: round; }
.fwn .fwn-pith path { fill: none; stroke: #5A4E44; stroke-width: 1.6; stroke-opacity: .8; }
.fwn .fwn-pith circle { fill: #5A4E44; }
.fwn .fwn-t { font-family: Jost, system-ui, sans-serif; font-size: 19px; font-weight: 400; letter-spacing: .14em; fill: var(--ink, #2A2420); font-weight: 500; transition: fill .45s ease; }
.fwn.focus .fwn-d .fwn-fill { fill: var(--veil); }
.fwn.focus .fwn-d:not(.on) { opacity: .3; }
.fwn.focus .fwn-d .fwn-t { fill: #A8A299; font-weight: 400; }
.fwn.focus .fwn-d.on .fwn-fill { fill: var(--c); }
.fwn.focus .fwn-d.on .fwn-t { fill: var(--ink, #2A2420); font-weight: 500; }
.fwn.focus .fwn-d.on .fwn-line { stroke-width: 2.8; stroke-opacity: 1; }
/* lines draw in once, when the diagram scrolls into view */
.fwn.armed .fwn-line, .fwn.armed .fwn-line2, .fwn.armed .fwn-pith path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fwn.armed .fwn-fill, .fwn.armed .fwn-t { opacity: 0; }
.fwn.armed.in .fwn-line, .fwn.armed.in .fwn-line2, .fwn.armed.in .fwn-pith path { animation: fwn-draw 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.fwn.armed.in .fwn-fill, .fwn.armed.in .fwn-t { animation: fwn-fade .8s ease-out .9s forwards; }
@keyframes fwn-draw { to { stroke-dashoffset: 0; } }
@keyframes fwn-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fwn.armed .fwn-line, .fwn.armed .fwn-line2, .fwn.armed .fwn-pith path { stroke-dashoffset: 0; animation: none; } .fwn.armed .fwn-fill, .fwn.armed .fwn-t { opacity: 1; animation: none; } }
html.shc-reduce-motion .fwn.armed .fwn-line, html.shc-reduce-motion .fwn.armed .fwn-line2, html.shc-reduce-motion .fwn.armed .fwn-pith path { stroke-dashoffset: 0; animation: none; }
html.shc-reduce-motion .fwn.armed .fwn-fill, html.shc-reduce-motion .fwn.armed .fwn-t { opacity: 1; animation: none; }
/* the small sticky diagram on phones and tablets: bigger labels so they stay readable */
@media (max-width: 959px) { .fwn .fwn-t { font-size: 23px; letter-spacing: .08em; } }
/* domain minis beside each heading */
.fwn-mini use { fill: var(--shc-ash); stroke: #5A4E44; stroke-width: 5; stroke-opacity: .55; }
.fwn-mini use.on { fill: var(--c); stroke-opacity: .9; }
.fwx .fws-mini.fwn-mini use, .fws-mini.fwn-mini use { fill: #E6E1D6; fill-opacity: 1; stroke: #5A4E44; stroke-width: 5; stroke-opacity: .5; }
.fwx .fws-mini.fwn-mini use.on, .fws-mini.fwn-mini use.on { fill: var(--c); stroke: #5A4E44; stroke-width: 5; stroke-opacity: .8; }

/* 2026-10-14: short descriptions under INNER / OUTER DOMAINS in the Approach hero sketch */
.ap-sketch .sk-desc { font-family: "Hanken Grotesk", system-ui, sans-serif; font-style: italic; font-size: 24px; fill: #5A4E44; opacity: .85; }
@media (max-width: 800px) {
  #page-approach .ap-sketch svg { max-width: 340px; }
}