:root{--paper:#f8f5ee;--cream:#f1ecdf;--card:#fffdf7;--line:#e3dbc9;--sand:#eadfcb;--ink:#2e2a23;--ink-soft:#5a5346;--ink-mute:#6f675a;--clay:#984a32;--clay-dark:#7a3a26;--clay-deep:#5c4534;--sage:#5e6c50;--sage-dark:#4e5b42;--sage-tint:#c7d0bc;--sage-mist:#dce2d3;--clay-bright:#b05a3e;--clay-mist:#c88a6f;--stone:#b8b0a0;--stone-mute:#8c8474;--ink-warm:#3e392f;--ornament:#c9bea4;--input-line:#d9d0bc;--blush:#f2ded3;--wheat:#ece0c2;--olive:#dfe1d1;--teal:#39695a;--teal-tint:#bcd0c8;--container:1160px;--gutter:40px;--measure-article:760px;--header-h:80px;--font-serif:'Source Serif 4', Georgia, serif;--font-sans:Karla, system-ui, sans-serif;}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);}
body{margin:0;font-family:var(--font-sans);font-size:16.5px;line-height:1.7;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:var(--clay);text-decoration:none;}
a:hover{color:var(--clay-dark);}
/* One long unbroken token — a pasted address, a hashtag, a German compound —
   used to widen the whole DOCUMENT rather than wrap. Measured at a 365px
   viewport: one 47-character word took scrollWidth to 500px, so the entire
   page scrolled sideways because of one word in one paragraph. */
body{overflow-wrap:break-word;}
/* Selection in her own colours. The browser default is a blue that belongs to
   no part of this site. */
::selection{background:var(--sage-mist);color:var(--ink);}
:is(.site-footer,.cta-bleed,.facts--sage,.facts--ink,.facts--clay,.announce-bar,.newsletter--sage,.newsletter-band--sage,.newsletter-band--ink) ::selection{background:rgba(241,236,223,.28);color:var(--cream);}
/* A KEYBOARD RING SHE CAN SEE. Before this the site defined exactly two
   :focus-visible rules and everything else fell back to the browser default —
   which on the sage and ink bands is a dark ring on a dark ground. The offset
   ring is clay on light grounds and cream on the dark ones, so a keyboard
   user can always tell where they are. */
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:3px;}
:is(.site-footer,.cta-bleed,.facts--sage,.facts--ink,.facts--clay,.announce-bar,.band--sage,.band--ink,.newsletter--sage,.newsletter-band--sage,.newsletter-band--ink) :focus-visible,
.skip-link:focus-visible{outline-color:var(--cream);}
h1,h2,h3,h4{font-family:var(--font-serif);color:var(--ink);text-wrap:balance;margin:0 0 .5em;}
h1{font-size:clamp(38px,5vw,60px);line-height:1.05;font-weight:500;}
h2{font-size:clamp(28px,3.5vw,38px);line-height:1.15;font-weight:500;}
h3{font-size:21px;line-height:1.3;font-weight:600;}
p{margin:0 0 1em;color:var(--ink-soft);text-wrap:pretty;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.eyebrow{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--clay);margin-bottom:10px;}
.eyebrow--sage{color:var(--sage);}
a.eyebrow:hover{color:var(--clay-dark);}
/* standfirst — the promise under an article's title, in the display face */
.deck{font-family:var(--font-serif);font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--ink-soft);margin:.2em 0 0;max-width:var(--measure-article);text-wrap:pretty;}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;border:1.5px solid transparent;cursor:pointer;font-family:var(--font-sans);}
.btn--primary{background:var(--clay);color:var(--paper);}
.btn--primary:hover{background:var(--clay-dark);color:var(--paper);}
.btn--secondary{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--secondary:hover{background:var(--ink);color:var(--paper);}
.band--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.band--sage{background:var(--sage);color:var(--paper);}
.band--ink{background:var(--ink);color:var(--cream);}
.card-organic{padding:34px 36px;background:var(--cream);border-radius:32px 32px 32px 8px;}
/* THE DISCLOSURE CHEVRON, DRAWN. Both toggles on this site -- the nav
   dropdowns and the expandable rows -- used to carry U+25BE as TEXT. Karla
   has no such glyph, so every browser silently substituted a system font for
   it: measured on the live site, a 4.9px-wide triangle at font-size 10px
   sitting beside a 15px label, on a baseline that is not Karla's. That
   substitution is what read as buggy, and 4.9px is what read as too small.
   It is drawn now -- two borders of an empty box, rotated 45 degrees, the
   same technique as the FAQ's +/- and the burger's three bars. No asset, no
   script, no glyph to go missing, and it takes currentColor so the mark
   follows the colour of the row it sits in.
   SIZE AND COLOUR ARE SET AT EACH USE (.dd-caret in HEADER, .xcard-caret in
   SERVICE_STYLES) at this same specificity, so SOURCE ORDER decides: both of
   those sections are concatenated after this one and must stay that way.
   A rotated square's ink is only the LOWER HALF of its own bounding box, so
   each state carries an optical nudge: exactly a quarter of the rotated
   height, which for a w-wide box is w*sqrt(2)/4 -- i.e. 35% of w. It is
   applied in the UNROTATED coordinate space (translate resolves against the
   border box, in screen axes), which is why -35% reads as up for the closed
   (down) chevron and +35% as down for the open (up) one. */
.dd-caret,.xcard-caret{display:inline-block;flex:0 0 auto;border:solid currentColor;border-width:0 1.7px 1.7px 0;transform:translateY(-35%) rotate(45deg);transition:transform .18s ease,color .18s ease;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;color:var(--paper);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{transition:none!important;animation:none!important;}}

/* ── vertical rhythm ────────────────────────────────────────────────
   Every block used to carry the same 28px top and bottom, which meant ONE
   interval — 56px — did every job on the page: the distance from a photo to
   the paragraph it illustrates, from a pull quote to the prose it was lifted
   from, and from one whole idea to the next. Nothing grouped, because
   everything was equally far from everything else.
   Three intervals now, applied by RELATIONSHIP. (The reason it couldn't be
   done before: photo, pullquote, checklist and steps all rendered as
   block + block--narrow with no class of their own, so the stylesheet had no
   way to tell them apart. They carry a block--type class now.) */
:root{--gap:28px;--gap-tight:14px;--gap-air:52px;}
@media (max-width:899px){:root{--gap-tight:12px;--gap-air:38px;}}
.block{padding-block:var(--gap);}
.block:first-child{padding-top:56px;}
.block:last-child{padding-bottom:64px;}
/* A picture belongs to the paragraph it follows — it should sit nearer to
   that than to whatever comes next, or it floats between two things and
   belongs to neither. */
.block--prose + .block--photo{padding-top:var(--gap-tight);}
/* A line set at display size is a breath. Given the same 56px as a paragraph
   break it reads as an interruption instead. */
.block--pullquote{padding-block:var(--gap-air);}
/* A card band and the recognition card each open a new idea, so they get the
   section interval above them rather than the paragraph one. */
.block--fit,.block--checklist{padding-top:var(--gap-air);}
.block--narrow .container > *{max-width:var(--measure-article);}
.block--narrow .pp-prose{max-width:var(--measure-article);}
/* A text block with an illustration beside it. The reading column stays
   exactly where it was; the illustration takes the margin that column leaves
   empty, and rides along (sticky) while the text scrolls past. Only where
   there IS a margin: below 1100px it is gone, and the text is the page. */
.prose-art{display:none;margin:0;}
@media (min-width:1100px){
  .block--prose-art .container{display:grid;grid-template-columns:minmax(0,var(--measure-article)) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);align-items:start;}
  .block--prose-art .prose-art{display:block;position:sticky;top:calc(var(--header-h) + 56px);justify-self:center;width:min(100%,280px);}
  .block--prose-art .prose-art img{display:block;width:100%;height:auto;}
}
/* ⚠️ Vertical rhythm belongs to .block, NOT to the individual blocks.
   In the source repo each block sat inline in a prose flow and carried its
   own `margin: 2.2em 0`. Here every block is its own <section class="block">,
   so those margins stack on top of the section padding and the gaps roughly
   double — visibly wrong the first time all ten rendered on one page. The
   ported per-block margins are kept in BLOCK_STYLES (so the CSS still reads
   like its source) and neutralized here at the one boundary that changed. */
.block > .container > :first-child{margin-top:0;}
.block > .container > :last-child{margin-bottom:0;}
/* Phone gutters: 40px each side of a 375px screen leaves a 295px reading
   column (~35 characters a line). 22px keeps the header's rhythm (20px) and
   gives the words back. */
@media (max-width:599px){:root{--gutter:22px;}}

.pp-prose{color:var(--ink-warm);font-size:16.5px;line-height:1.75;}
.pp-prose > :first-child{margin-top:0;}
.pp-prose p{margin:0 0 1.15em;color:var(--ink-warm);}
.pp-prose h2{font-size:27px;line-height:1.2;font-weight:500;margin:1.6em 0 .5em;}
.pp-prose h3{font-size:20px;line-height:1.3;font-weight:600;margin:1.5em 0 .4em;}
.pp-prose h4,.pp-prose h5{font-family:var(--font-sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);font-weight:700;margin:1.6em 0 .4em;}
.pp-prose ul:not([class]),.pp-prose ol:not([class]){margin:0 0 1.15em;padding-left:22px;display:flex;flex-direction:column;gap:9px;}
.pp-prose li{color:var(--ink-warm);}
.pp-prose li:not([class])::marker{color:var(--clay);}
.pp-prose a{color:var(--clay);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.pp-prose a:hover{color:var(--clay-dark);}
.pp-prose strong{color:var(--ink);font-weight:700;}
.pp-prose img{border-radius:14px;margin:6px 0;}
/* ── Article v2 — head · cover · body beside an aside · tail ── */
.article-head .block:first-child{padding-top:48px;}
.article-head .block{padding-block:10px;}
.article-head .block--byline{padding-bottom:22px;}
.article-cover .block{padding-block:0 12px;}
.article-cover--wide .photo--wide{margin-top:6px;}
@media (max-width:599px){.article-cover--wide .photo--wide{margin-inline:calc(-1 * var(--gutter));}.article-cover--wide .photo--wide img{border-radius:0;}}
.article-cols{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.article-main .block{padding-inline:0;}
.article-main .container,.article-aside .container{padding-inline:0;}
.article-aside{margin-top:8px;display:flex;flex-direction:column;gap:34px;}
.article-aside .block{padding-block:0;}
.article-aside .author{margin:0;}
.article-aside .newsletter{margin:0;flex-direction:column;align-items:stretch;gap:14px;padding:24px;}
.article-aside .newsletter-heading{font-size:21px;}
.article-aside .newsletter-copy,.article-aside .newsletter-form{flex:0 0 auto;}
.article-aside .newsletter-form{flex-direction:column;}
/* column flex: the input's row flex-basis would become its HEIGHT */
.article-aside .newsletter-form input,.article-aside .newsletter-form .btn{flex:0 0 auto;width:100%;text-align:center;}
.article-aside-label{margin:0 0 10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.article-related{margin:0;padding-top:26px;border-top:1px solid var(--line);}
.article-related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.article-related-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink);}
.article-related-thumb{display:block;width:72px;aspect-ratio:1;border-radius:12px 12px 12px 4px;overflow:hidden;background:var(--sand);}
.article-related-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;}
.article-related-body{display:flex;flex-direction:column;gap:2px;}
.article-related-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.article-related-title{font-family:var(--font-serif);font-size:16.5px;line-height:1.3;font-weight:600;}
.article-related-item:hover .article-related-title{color:var(--clay-dark);}
.article-related-date{font-size:12.5px;color:var(--ink-mute);}
.article-related-all{display:inline-block;margin-top:14px;font-weight:700;font-size:14px;color:var(--clay);}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:26px;border-top:1px solid var(--line);}
.article-share .article-aside-label{margin:0;}
.article-share-link{font-size:14px;font-weight:600;color:var(--ink-soft);}
.article-share-link:hover{color:var(--clay-dark);}
/* marker emphasis — bold in display copy is a highlight, not heavier type */
.deck strong,.pullquote-text strong{font-weight:inherit;color:inherit;background:linear-gradient(transparent 58%,var(--sage-mist) 58%);padding:0 .08em;}
@media (min-width:1000px){
  .article-head{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:48px;align-items:end;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
  .article-head .block{padding-inline:0;}
  .article-head .container{padding-inline:0;}
  .article-head .block--narrow .container > *{max-width:none;}
  .article-head .block--byline{padding-bottom:26px;}
  /* the byline as labelled facts */
  .article-head .byline{flex-direction:column;align-items:flex-start;gap:12px;border-left:1px solid var(--line);padding-left:20px;}
  .article-head .byline-metas{display:flex;flex-direction:column;gap:12px;white-space:normal;}
  .article-head .byline-meta + .byline-meta::before{content:none;}
  .article-head .byline-name,.article-head .byline-meta{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink);}
  .article-head .byline .byline-name::before,.article-head .byline-metas .byline-date::before,.article-head .byline-metas .byline-note::before{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);margin:0;}
  .article-head .byline .byline-name::before{content:'Author';}
  .article-head .byline-metas .byline-date::before{content:'Date';}
  .article-head .byline-metas .byline-note::before{content:'Read';}
  .article-head .byline-avatar{order:-1;}
  .article-cols{display:grid;grid-template-columns:minmax(0,var(--measure-article)) 280px;column-gap:64px;align-items:start;}
  .article-aside{position:sticky;top:calc(var(--header-h) + 24px);margin-top:36px;}
  /* the author card in a 280px rail stacks: photo, then words */
  .article-aside .author{flex-direction:column;gap:14px;padding:22px;}
}
@media (max-width:999px){.article-aside{margin-top:40px;padding-top:36px;border-top:1px solid var(--line);gap:40px;}}
/* table of contents — a long piece's map, quiet */
.block--toc{padding-block:0 8px;}
.article-toc{border-left:2px solid var(--line);padding:4px 0 4px 18px;margin:0 0 1.4em;}
.article-toc-label{margin:0 0 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.article-toc-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:15px;}
.article-toc-list a{color:var(--ink-soft);}
.article-toc-list a:hover{color:var(--clay-dark);}
/* older / newer */
.block--article-nav{padding-top:0;}
.article-nav{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:22px;}
.article-nav-link{display:flex;flex-direction:column;gap:3px;max-width:46%;color:var(--ink);}
.article-nav-newer{text-align:right;margin-left:auto;}
.article-nav-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);}
.article-nav-title{font-family:var(--font-serif);font-size:17px;line-height:1.3;}
.article-nav-link:hover .article-nav-title{color:var(--clay-dark);}
/* drop cap — three lines, the display face, on the first paragraph only */
.block--dropcap .pp-prose > p:first-of-type::first-letter{float:left;font-family:var(--font-serif);font-size:3.6em;line-height:.82;padding:.08em .12em 0 0;color:var(--clay-deep);font-weight:500;}
/* A picture that stands alone between paragraphs is a captioned figure
   (`renderMarkdown`) — it takes the photo block's treatment. */
.pp-prose .photo{margin:1.8em 0;}
.pp-prose .photo img{margin:0;}
.pp-prose blockquote{margin:1.4em 0;background:var(--sand);border-radius:14px;padding:24px 30px;font-family:var(--font-serif);font-size:20px;line-height:1.5;font-style:italic;color:var(--clay-deep);}
.pp-prose blockquote p{margin:0;color:var(--clay-deep);}
.pp-prose hr{border:none;border-top:1px solid var(--line);margin:2em 0;}
/* A code box never widens the page. Nothing a therapist writes is code: a
   pre here is a line that arrived indented from an import, and pre refuses
   to wrap, so one tab-indented widget label took a phone page to 886px while
   the body's own overflow-wrap rule could not reach it. Wrapping keeps the
   words readable; the scroll is the second fence. */
.pp-prose pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;}

/* The announcement bar. It scrolls away with the page — only the nav is
   pinned — and it can be closed, which is what the checkbox is for. The input
   is invisible and laid exactly over the ×, so it is both the pointer target
   and the focus target; the × is decorative and takes the focus ring. */
.announce-bar{position:relative;background:var(--sage);}
.announce{display:block;background:var(--sage);color:var(--paper);text-align:center;padding:9px 44px;font-size:13.5px;letter-spacing:.02em;}
.announce:hover{background:var(--sage-dark);color:var(--paper);}
.announce em{font-family:var(--font-serif);}
.announce-dismiss{position:absolute;right:0;top:0;width:44px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:2;appearance:none;-webkit-appearance:none;border:0;}
.announce-x{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--paper);font-size:17px;line-height:1;pointer-events:none;opacity:.8;}
.announce-dismiss:hover + .announce-x{opacity:1;background:rgba(255,255,255,.16);}
.announce-dismiss:focus-visible + .announce-x{opacity:1;outline:2px solid var(--paper);outline-offset:2px;}
/* Closed. The sibling rule collapses the bar's contents everywhere; :has()
   removes the empty box itself where it is supported. */
.announce-dismiss:checked,.announce-dismiss:checked ~ *{display:none;}
.announce-bar:has(.announce-dismiss:checked){display:none;}
/* The nav is pinned for the whole page. It paints an opaque ground and sits
   above everything that scrolls under it — including the dropdown panels,
   which open from inside it. */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);min-height:var(--header-h);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(46,42,35,.05);}
.wordmark{display:flex;align-items:center;gap:12px;color:var(--ink);}
.wordmark-img{display:block;line-height:0;flex-shrink:0;}
.wordmark-img img{display:block;height:42px;width:auto;}
.wordmark-text{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--ink);}
.wordmark-place{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;}
.nav-desktop ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500;}
.nav-desktop li > a{color:var(--ink);display:flex;align-items:center;gap:5px;padding:26px 0;}
.nav-desktop li > a:hover{color:var(--clay-dark);}
.nav-desktop li > a.nav-cta{padding:11px 22px;color:var(--paper);}
.nav-desktop li > a.nav-cta:hover{color:var(--paper);}
/* Zero-JS dropdowns: open on hover and on keyboard focus-within. */
.nav-dd{position:relative;}
/* An 8px box draws about 11px of visible chevron beside a 15px label -- the
   glyph it replaces drew 4.9px. Muted at rest; it takes the label's own hover
   colour, and while the panel is open it points UP, so an open menu says
   which item it belongs to. */
.dd-caret{width:8px;height:8px;color:var(--ink-mute);margin-left:1px;}
.nav-desktop li > a:hover .dd-caret{color:var(--clay-dark);}
.nav-dd:hover .dd-caret,.nav-dd:focus-within .dd-caret{transform:translateY(35%) rotate(225deg);color:var(--clay-dark);}
.dd-panel{position:absolute;left:50%;transform:translateX(-50%);top:100%;min-width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(46,42,35,.16);padding:12px;display:none;flex-direction:column;gap:2px;z-index:70;}
.nav-dd:hover .dd-panel,.nav-dd:focus-within .dd-panel{display:flex;}
.dd-link{display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:10px;color:var(--ink);}
.dd-link:hover{background:var(--cream);color:var(--ink);}
.dd-label{font-size:14.5px;font-weight:600;}
.dd-note{font-size:12.5px;color:var(--ink-mute);font-weight:400;}
.drawer-sub{padding-left:16px;font-size:14px;color:var(--ink-soft);}
.nav-drawer{display:none;position:relative;}
.nav-drawer summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;padding:10px 0;color:var(--ink);}
.nav-drawer summary::-webkit-details-marker{display:none;}
.burger{display:flex;flex-direction:column;gap:4px;}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;}
.nav-drawer nav{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 2 * var(--gutter)));background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(46,42,35,.16);padding:18px 20px;display:flex;flex-direction:column;gap:10px;max-height:min(70vh,560px);overflow-y:auto;z-index:60;}
.nav-drawer nav a{color:var(--ink);font-size:15px;font-weight:500;}
.nav-drawer nav a.btn{color:var(--paper);text-align:center;margin-top:6px;}
@media (max-width:899px){
:root{--header-h:64px;}
.site-header{padding-inline:20px;}
.nav-desktop{display:none;}
.nav-drawer{display:block;}
.wordmark-place{display:none;}
.wordmark-img img{height:32px;}
}

.site-footer{background:var(--ink);color:var(--cream);margin-top:0;}
.site-footer a{color:var(--cream);}
.site-footer a:hover{color:#ffffff;}
.footer-grid{padding-top:64px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;}
.footer-brand{display:flex;flex-direction:column;gap:16px;}
.footer-brand p{margin:0;}
.footer-wordmark{display:block;line-height:0;}
.footer-wordmark img{display:block;height:40px;width:auto;}
.footer-wordmark-text{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--cream);}
.footer-tagline{font-size:14.5px;line-height:1.65;color:var(--stone);}
.footer-license,.footer-note{font-size:13px;color:var(--stone);}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:14.5px;}
.footer-address{margin:6px 0 0;line-height:1.6;color:var(--stone);}
.footer-heading{font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);font-weight:700;margin:0 0 6px;}
.footer-col p{margin:6px 0 0;}
.footer-avail{font-size:13.5px;line-height:1.6;color:var(--stone);}
.footer-crisis{margin-top:48px;}
.footer-crisis p{margin:0;padding:18px 22px;border:1px solid #4a443a;border-radius:12px;font-size:14px;line-height:1.75;color:var(--stone);}
/* 988 and 911 are the two most important links on the whole site, and they
   were 27x17 and 19x17 — inline text in a muted paragraph, under the 24px
   target floor (WCAG 2.5.8) on the one control someone might be reaching for
   in a hurry. They are keys now: cream on a tint, never broken across a line,
   and 27px tall. */
.footer-crisis a{font-weight:700;color:var(--cream);display:inline-block;
  padding:4px 9px;margin:0 1px;border-radius:8px;line-height:1.35;
  background:rgba(241,236,223,.1);white-space:nowrap;}
.footer-crisis a:hover{background:var(--cream);color:var(--ink);}
.footer-legal{margin-top:28px;padding-top:26px;padding-bottom:28px;border-top:1px solid #4a443a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--stone);}
.footer-legal a{color:var(--stone);}
.footer-legal a:hover{color:var(--cream);}
.footer-legal-links{display:flex;gap:18px;flex-wrap:wrap;}
@media (max-width:899px){.footer-grid{grid-template-columns:1fr;gap:40px;padding-top:48px;}}

/* pullquote — the "worth enlarging" treatment, distinct from the .pp-prose
   blockquote callout ("worth boxing"). Negative inline margins bleed it past
   the measure on wide screens and collapse flush on narrow, no media query. */
.pullquote{margin:2.2em clamp(-56px,-4vw,0px);padding:0 0 0 clamp(18px,3vw,34px);border-left:2px solid var(--clay);}
.pullquote-text{margin:0;background:none;border-radius:0;padding:0;font-family:var(--font-serif);font-size:clamp(21px,2.4vw,28px);line-height:1.38;font-style:normal;font-weight:400;color:var(--clay-deep);text-wrap:balance;}
.pullquote-attr{margin-top:14px;font-family:var(--font-sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}

/* pullquote as a full-bleed BAND (tone clay|sage|ink) — the page's thesis
   rather than a rest stop. It undoes the in-column treatment deliberately:
   no negative margins (the band already bleeds), no left rule (the ground is
   the emphasis), centred, and larger.

   Contrast, measured rather than eyeballed: cream on clay-deep 7.5:1, on
   sage 4.8:1, on ink 12.1:1 — so the attribution is cream on all three
   rather than the in-column sage (#5e6c50 label on a dark ground is the
   3:1 trap the stats band fell into). */
.block--pullquote-band{padding-block:0;}
.pullquote-band{padding-block:clamp(44px,5.4vw,72px);}
.pullquote-band--clay{background:var(--clay-deep);color:var(--cream);}
.pullquote-band--sage{background:var(--sage);color:var(--paper);}
.pullquote-band--ink{background:var(--ink);color:var(--cream);}
.pullquote--band{margin:0;padding:0;border-left:0;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;}
.pullquote--band .pullquote-text{max-width:840px;font-size:clamp(25px,3.6vw,40px);line-height:1.24;font-style:italic;color:inherit;}
/* The prose highlight (sage-mist behind bold) is a light-ground device; on a
   dark band it reads as a redaction. Bold becomes weight alone. */
.pullquote--band .pullquote-text strong{background:none;color:inherit;font-weight:600;}
.pullquote--band .pullquote-attr{margin-top:0;padding-top:15px;border-top:1px solid rgba(241,236,223,.34);color:var(--cream);}

/* checklist */
.checklist{margin:2em 0;padding:28px clamp(22px,3vw,34px);border-radius:32px 32px 32px 8px;}
.checklist--sand{background:var(--sand);}
.checklist--sage{background:var(--sage-mist);}
.checklist--cream{background:var(--cream);}
.checklist-heading{margin:0 0 6px;font-family:var(--font-serif);font-size:21px;line-height:1.3;font-weight:600;color:var(--ink);}
.checklist-intro{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink-soft);}
/* `columns` not grid: a short list shouldn't leave an empty cell. */
.checklist-items{columns:2;column-gap:34px;margin:0;padding:0;list-style:none;}
.checklist-items li{break-inside:avoid;position:relative;padding-left:24px;margin-bottom:11px;font-size:15.5px;line-height:1.55;color:var(--ink-warm);}
.checklist-items li::before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50% 50% 50% 2px;background:var(--clay);}
@media (max-width:599px){.checklist-items{columns:1;}}
/* checklist axes. Absent ⇒ no class ⇒ these rules never match, so a list
   written before they existed publishes the same bytes.
   markers = a quieter sage dot, for a list that is an ARGUMENT rather than a
   self-check: a tick beside "better placement in bookstores" reads as a claim
   about the reader. plain = no mark, for a set of short lines. */
.checklist--markers .checklist-items li::before{border-radius:50%;background:var(--sage);width:6px;height:6px;top:.68em;left:3px;}
.checklist--plain .checklist-items li{padding-left:0;}
.checklist--plain .checklist-items li::before{content:none;}
.checklist-items--cols-1{columns:1;}
.checklist-items--cols-1 li{margin-bottom:15px;font-size:16px;line-height:1.6;max-width:62ch;}

/* fit — two labelled lists side by side: who this is for, and who it isn't.
   The second column is a REFERRAL, so it is deliberately quieter than the
   first (stone marks, muted label) rather than a red-X mirror of it: a page
   that shouts about who it turns away is doing something else. One column
   (no second list) collapses to a single track — the checklist shape, which is
   what a page starts as before she writes the second half. */
.fit{--fit-ground:var(--card);margin:2em 0;border:1px solid var(--line);border-radius:28px 28px 28px 8px;overflow:hidden;background:var(--fit-ground);}
.fit--cream{--fit-ground:var(--cream);}
.fit--sand{--fit-ground:var(--sand);}
.fit-head{padding:24px clamp(22px,3vw,32px) 0;}
.fit-heading{margin:0;font-family:var(--font-serif);font-size:23px;line-height:1.25;font-weight:600;color:var(--ink);}
.fit-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:22px;}
.fit-head + .fit-cols{border-top:1px solid var(--line);}
.fit--solo .fit-cols{grid-template-columns:1fr;}
/* The 1px grid gap IS the hairline between the columns, so each column has to
   repaint the card's own ground over it — hence a token rather than an inherit,
   which would resolve to the gap colour. */
.fit-col{background:var(--fit-ground);padding:24px clamp(22px,3vw,32px);}
.fit-label{margin:0 0 14px;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.fit-col--yes .fit-label{color:var(--sage);}
.fit-col--no .fit-label{color:var(--ink-mute);}
.fit-items{margin:0;padding:0;list-style:none;display:grid;gap:11px;}
.fit-items li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;color:var(--ink-warm);}
.fit-col--yes .fit-items li::before{content:'\2713';position:absolute;left:2px;top:0;font-weight:700;color:var(--sage);}
.fit-col--no .fit-items li{color:var(--ink-soft);}
.fit-col--no .fit-items li::before{content:'\2014';position:absolute;left:0;top:0;color:var(--ornament);}
@media (max-width:599px){.fit-cols{grid-template-columns:1fr;}}

/* steps — numerals from CSS counters, never from the data, so they survive a
   reorder in the editor. */
.steps{margin:2.4em 0;}
.steps-heading{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:500;margin:0 0 .7em;color:var(--ink);}
.steps-list{counter-reset:step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.step{counter-increment:step;display:grid;grid-template-columns:62px 1fr;gap:4px;align-items:start;padding:20px 0;border-top:1px solid var(--line);}
.step:last-child{border-bottom:1px solid var(--line);}
.step::before{content:counter(step);font-family:var(--font-serif);font-size:34px;line-height:1;font-weight:400;color:var(--clay);font-variant-numeric:lining-nums;}
.step-title{margin:0;font-family:var(--font-serif);font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);}
.step-text{margin:7px 0 0;font-size:15.5px;line-height:1.65;color:var(--ink-soft);}
@media (max-width:599px){.step{grid-template-columns:44px 1fr;}.step::before{font-size:27px;}}
/* steps in SCHEDULE mode — the date replaces the counter as the row marker.
   Same object, same rows; a group runs on a calendar and a first session runs
   in an order, and the reader needs whichever one is true. */
.steps--schedule .steps-list{counter-reset:none;}
.steps--schedule .step{grid-template-columns:130px 1fr;gap:18px;counter-increment:none;}
.steps--schedule .step::before{content:none;}
.step-when{margin:2px 0 0;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--clay);font-variant-numeric:tabular-nums lining-nums;}
@media (max-width:599px){.steps--schedule .step{grid-template-columns:1fr;gap:5px;}.step-when{margin:0;}}

/* photo + gallery */
.photo{margin:2.2em 0;}
.photo img{width:100%;height:auto;display:block;border-radius:20px 20px 20px 6px;margin:0;}
.photo figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-mute);}
.gallery{margin:2.2em 0;}
.gallery-heading{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:500;margin:0 0 .7em;color:var(--ink);}
/* auto-fit: a run of 2 shouldn't be forced into a 3-up grid with a hole. */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.gallery-item{margin:0;}
.gallery-item img{width:100%;height:100%;object-fit:cover;border-radius:20px 20px 20px 6px;display:block;margin:0;}
.gallery--wide .gallery-item img{aspect-ratio:16/10;}
.gallery--square .gallery-item img{aspect-ratio:1/1;}
.gallery-item figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-mute);}
/* Two up on a phone, never back to one stacked column — that stack is the
   entire problem this block exists to fix. */
@media (max-width:599px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* packages */
.pricing{margin:2.4em 0;}
.pricing-heading{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:500;margin:0 0 .4em;color:var(--ink);}
.pricing-intro{margin:0 0 1.2em;font-size:16px;line-height:1.65;color:var(--ink-soft);}
.pricing-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.tier{background:var(--card);border:1px solid var(--line);border-radius:32px 32px 32px 8px;padding:24px 24px 26px;display:flex;flex-direction:column;}
/* Quiet emphasis, never a "MOST POPULAR" badge. */
.tier--featured{border-color:var(--clay);background:var(--sand);}
.tier-name{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.tier-price{margin:10px 0 0;font-family:var(--font-serif);font-size:31px;line-height:1.1;font-weight:500;color:var(--ink);font-variant-numeric:lining-nums;}
.tier-duration{margin:4px 0 0;font-size:14px;color:var(--ink-mute);}
.tier-includes{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;display:flex;flex-direction:column;gap:9px;}
.tier-includes li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.5;color:var(--ink-warm);}
.tier-includes li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50% 50% 50% 2px;background:var(--clay);}
.tier-note{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-mute);}
.pricing-footnote{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-mute);}

/* faq — <details>, never a script. Answers stay in the DOM when closed, so
   collapsing costs nothing with crawlers. */
.faq{margin:2.4em 0;}
.faq-heading{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:500;margin:0 0 .7em;color:var(--ink);}
.faq-items{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 0;font-family:var(--font-serif);font-size:18.5px;line-height:1.4;font-weight:600;color:var(--ink);}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--clay);}
.faq-q:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px;}
/* A + that becomes a −: two bars, one rotated. No icon asset, no script. */
.faq-marker{position:relative;flex:none;width:14px;height:14px;margin-top:6px;}
.faq-marker::before,.faq-marker::after{content:'';position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--clay);transition:transform 160ms ease;}
.faq-marker::after{transform:rotate(90deg);}
.faq-item[open] .faq-marker::after{transform:rotate(0deg);}
.faq-a{padding:0 0 14px;max-width:62ch;}
.faq-a > :last-child{margin-bottom:0;}
@media (prefers-reduced-motion:reduce){.faq-marker::before,.faq-marker::after{transition:none;}}

/* testimonials */
.testimonials{margin:2.4em 0;}
.testimonials-heading{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:500;margin:0 0 .7em;color:var(--ink);}
.testimonials-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.testimonial{margin:0;background:var(--cream);border-radius:32px 32px 8px 32px;padding:26px 28px;display:flex;flex-direction:column;}
/* Override the .pp-prose blockquote callout — on a tinted card the box
   treatment would double up. */
.testimonial-quote{margin:0;background:none;border-radius:0;padding:0;font-family:var(--font-serif);font-size:18px;line-height:1.55;font-style:italic;color:var(--clay-deep);}
.testimonial-quote::before{content:'\201C';font-size:34px;line-height:0;vertical-align:-.18em;margin-right:2px;color:var(--clay-mist);}
.testimonial-attr{margin-top:16px;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sage);}
/* ONE quote, given the whole band. For the quote that carries a page — a
   foreword, a named colleague's blurb — where a row of equal small cards is
   right for three and wrong for the one that matters. */
.testimonials--featured .testimonial--big,.testimonials--placeholder .testimonial--big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;background:var(--sand);border-radius:36px 36px 8px 36px;padding:clamp(28px,4vw,42px);}
.testimonials--placeholder .testimonial--big{grid-template-columns:1fr;}
.testimonial-face{display:block;width:96px;height:96px;}
.testimonial-face img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 25%;display:block;}
.testimonial--big .testimonial-quote{font-size:clamp(20px,2.5vw,27px);line-height:1.4;color:var(--clay-deep);}
.testimonial--big .testimonial-attr{margin-top:14px;}
/* Reserved band: builder only. Publish renders nothing at all — filler in
   this block on a live clinician's site is an endorsement nobody gave. */
.testimonials--placeholder .testimonial--big{outline:1.5px dashed var(--clay);outline-offset:-8px;background:var(--cream);}
.testimonials--placeholder .testimonial-quote{color:var(--ink-mute);font-style:italic;}
.testimonials--placeholder .testimonial-attr{color:var(--clay);}
.testimonials-note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-mute);}
@media (max-width:599px){
  .testimonials--featured .testimonial--big{grid-template-columns:1fr;gap:18px;}
  .testimonial-face,.testimonial-face img{width:72px;height:72px;}
}

/* cta */
.cta-band{margin:2.4em 0;padding:28px clamp(24px,3.4vw,36px);background:var(--sage-mist);border-radius:32px 32px 32px 8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.cta-copy{flex:1 1 260px;}
.cta-heading{margin:0;font-family:var(--font-serif);font-size:clamp(20px,2.2vw,24px);line-height:1.3;font-weight:600;color:var(--ink);text-wrap:balance;}
.cta-body{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:52ch;}
.cta-btn{flex:none;padding:13px 26px;}
/* Full-width tap target on a phone — this is the moment that matters. */
.cta-actions{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.cta-actions .cta-btn{width:auto;}
.cta-btn--second{background:transparent;color:var(--clay);border:1.5px solid var(--clay);}
.cta-btn--second:hover{background:var(--clay);color:var(--card);}
.cta-bleed .cta-btn--second{color:var(--cream);border-color:rgba(241,236,223,.45);}
.cta-bleed .cta-btn--second:hover{background:var(--cream);color:var(--ink);}
.cta-reassure{margin:0;font-size:13px;line-height:1.5;color:var(--ink-mute);text-align:right;max-width:34ch;}
.cta-bleed .cta-reassure{color:var(--stone);}
@media (max-width:599px){
  .cta-btn{width:100%;text-align:center;}
  .cta-actions{align-items:stretch;width:100%;}
  .cta-reassure{text-align:center;max-width:none;}
}

/* cta WITH a picture.
 *
 * Only reachable when the block emitted a figure, so a picture-less ask keeps
 * every rule above and none of these. The shape is deliberately different
 * from the flat band: the words and the buttons become ONE left column
 * (.cta-text) and the picture is a panel beside them, which also closes the
 * ~250px of dead space the old band left between the copy and a button
 * pushed hard right.
 *
 * ⚠️ EVERY selector here names its carrier (.cta-band / .cta-bleed-grid) or
 * goes through .cta-text, and that is not style — it is the only thing making
 * these rules win. The rule .cta-bleed-grid{display:flex} and the rule
 * .cta-bleed .cta-actions{flex:0 0 268px} live ~470 lines BELOW this block at
 * equal specificity, so a bare .cta--media{display:grid} would silently lose
 * on source order and the band would stay flex. (In a column-direction flex
 * the actions' row flex-basis also becomes a HEIGHT — the same trap the
 * article sidebar hit.) Keep the two-class form when editing.
 *
 * The 900px breakpoint matches CTA_MEDIA_SIZES in offer.blocks.ts — the
 * stacked layout and the sizes attribute have to agree or the browser picks
 * the wrong variant. Change one, change the other. */
.cta-band.cta--media,.cta-bleed-grid.cta--media{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,32%,420px);align-items:center;gap:clamp(24px,3.4vw,48px);}
.cta-band.cta--media{grid-template-columns:minmax(0,1fr) clamp(180px,34%,260px);}
.cta--media .cta-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;}
.cta--media .cta-text .cta-copy{flex:0 1 auto;}
.cta--media .cta-text .cta-actions{flex:0 0 auto;align-items:flex-start;width:auto;}
.cta--media .cta-text .cta-actions .cta-btn{width:auto;}
.cta--media .cta-text .cta-reassure{text-align:left;max-width:40ch;}
/* The picture is last in the DOM (the heading reads first); order moves it. */
.cta--media-left .cta-media{order:-1;}
.cta-media{margin:0;border-radius:28px 28px 28px 6px;overflow:hidden;background:var(--sage-mist);}
.cta-media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
.cta-band.cta--media .cta-media{border-radius:24px 24px 24px 6px;}
@media (max-width:899px){
  /* One column: words, then buttons, then the picture — the ask stays above
   * the decoration at every width, including when the picture is set left. */
  .cta-band.cta--media,.cta-bleed-grid.cta--media{grid-template-columns:1fr;gap:24px;}
  .cta--media-left .cta-media{order:0;}
  .cta--media .cta-media img{aspect-ratio:16/9;}
}
@media (max-width:599px){
  .cta--media .cta-text{align-items:stretch;width:100%;}
  .cta--media .cta-text .cta-actions{align-items:stretch;width:100%;}
  .cta--media .cta-text .cta-actions .cta-btn{width:100%;text-align:center;}
  .cta--media .cta-text .cta-reassure{text-align:center;max-width:none;}
  .cta--media .cta-media img{aspect-ratio:3/2;}
}

/* inquiry form — ported from InquiryForm.astro's field treatment */
.pp-inquiry-form{display:flex;flex-direction:column;gap:18px;max-width:560px;margin:1.4em 0 0;}
.pp-inquiry-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:599px){.pp-inquiry-form .field-row{grid-template-columns:1fr;}}
.pp-inquiry-form label{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:8px;row-gap:7px;font-size:14px;font-weight:700;color:var(--ink);}
/* A label is its words, an optional hint beside them, then the box on a row
   of its own. As a flex column the hint took a row too, so Phone's box sat
   20px below First name's in the same row. */
.pp-inquiry-form label > :is(input,select,textarea){grid-column:1 / -1;}
.pp-inquiry-form .opt{font-weight:400;color:var(--ink-mute);font-size:12.5px;}
.pp-inquiry-form input,.pp-inquiry-form select,.pp-inquiry-form textarea{width:100%;background:var(--card);border:1px solid var(--input-line);border-radius:10px;padding:13px 16px;font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--ink);}
.pp-inquiry-form textarea{resize:vertical;min-height:120px;}
.pp-inquiry-form input:focus,.pp-inquiry-form select:focus,.pp-inquiry-form textarea:focus{outline:2px solid var(--clay);outline-offset:1px;}
.pp-inquiry-form .btn{align-self:flex-start;padding:13px 26px;}
@media (max-width:599px){.pp-inquiry-form .btn{width:100%;text-align:center;}}
.inquiry-note{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0;}
.inquiry-reassure{font-size:13.5px;color:var(--ink-mute);margin:0;}
/* Post-submit banners: hidden until the 303 lands on their #fragment. */
.inquiry-banner{display:none;border-radius:12px;padding:14px 18px;font-size:15px;line-height:1.5;margin:0 0 1em;}
.inquiry-banner:target{display:block;}
.inquiry-banner--sent{background:var(--sage-mist);color:var(--ink);}
.inquiry-banner--error{background:var(--sand);color:var(--ink);border-left:4px solid var(--clay);}
.newsletter-banner{display:none;border-radius:10px;padding:12px 16px;font-size:15px;line-height:1.5;margin:0;}
.newsletter-banner:target{display:block;}
.newsletter-banner--sent{background:var(--sage-mist);color:var(--ink);}
.newsletter-banner--error{background:var(--paper);color:var(--ink);border-left:4px solid var(--clay);}
.newsletter-check{flex-basis:100%;}

/* hero */
.block--hero{padding-block:0;}
.block--hero:first-child{padding-top:0;}
.hero{padding-block:clamp(48px,7vw,84px);}
.hero--cream{background:var(--cream);border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
.hero--solo .hero-grid{grid-template-columns:1fr;}
.hero--center .hero-grid{grid-template-columns:1fr;text-align:center;}
.hero--center .hero-copy{margin-inline:auto;max-width:720px;}
.hero--center .hero-actions{justify-content:center;}
.hero-copy h1{margin:0 0 .35em;}
/* Breadcrumbs are WAYFINDING, not a label: sentence case, the reading
   face's weight, links underlined like links. They used to share the
   eyebrow's exact dress (12.5px uppercase, tracked, 700, the current page in
   clay) and sat directly above an eyebrow, so a hero read as two stacked
   eyebrows and the trail read as a title (Hazel, 2026-09-24). */
.hero-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:22px;font-size:14px;line-height:1.45;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-mute);}
.hero-crumbs a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:4px;}
.hero-crumbs a:hover{color:var(--clay);text-decoration-color:currentColor;}
.hero-crumbs span[aria-current]{color:var(--ink-mute);}
.crumb-sep{color:var(--ink-mute);opacity:.55;font-size:16px;line-height:1;}
.hero--center .hero-crumbs{justify-content:center;}
.hero-lede{font-size:18px;line-height:1.65;max-width:56ch;}
.hero--center .hero-lede{margin-inline:auto;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero-micro{margin:18px 0 0;font-size:14px;color:var(--ink-mute);}
.hero-media{margin:0;position:relative;}
.hero-media img{width:100%;height:auto;display:block;border-radius:260px 260px 18px 18px;}
.hero--cream .hero-media img{border-radius:24px 24px 24px 8px;}
.hero-badge{position:absolute;left:18px;bottom:18px;background:var(--card);border-radius:14px 14px 14px 4px;padding:14px 20px;box-shadow:0 10px 28px rgba(46,42,35,.14);display:flex;flex-direction:column;gap:2px;}
.hero-badge strong{font-family:var(--font-serif);font-size:16.5px;font-weight:600;color:var(--ink);}
.hero-badge-sub{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.hero-note{background:var(--card);border:1px solid var(--line);border-radius:24px 24px 24px 8px;padding:26px 28px;align-self:center;}
.hero-note-title{margin:0 0 8px;font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--ink);}
.hero-note-body{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
.hero-note-link{font-weight:700;font-size:14.5px;}
@media (max-width:899px){.hero-grid{grid-template-columns:1fr;}.hero-media{max-width:480px;}}
/* The hero on a phone. Measured on the About page at 375x812 BEFORE this:
   949px tall, of which the lede alone was 327 — ELEVEN lines. Two causes, and
   neither was a choice anybody made:
     - h1 is clamp(38px,5vw,60px), and 5vw at 375 is 18.75px, so the FLOOR is
       what a phone gets. The clamp never scales down; 38px is simultaneously
       the phone size and the tablet size.
     - .hero-lede is a flat 18px with no phone step at all, so 56 words wrap
       to eleven lines in a 331px column.
   The result was the two buttons sitting exactly on the fold and the photo
   entirely below it. The header is NOT sticky on this template, so the hero's
   buttons are the only ask on the first screen — they have to stay above it,
   which is why this compacts rather than leading with the photograph. */
@media (max-width:599px){
  .hero{padding-block:32px 40px;}
  .hero-grid{row-gap:24px;}
  .hero-copy h1{font-size:33px;}
  .hero-lede{font-size:16.5px;line-height:1.6;}
  .hero-actions{margin-top:20px;}
}

/* stats band */
.block--stats{padding-block:0;}
.stats-band{background:var(--clay-deep);color:var(--cream);padding-block:clamp(30px,4vw,44px);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;}
.stat{display:flex;flex-direction:column;gap:4px;text-align:center;}
.stat-value{font-family:var(--font-serif);font-size:clamp(30px,3.4vw,40px);line-height:1;font-weight:500;color:var(--cream);font-variant-numeric:lining-nums;}
.stat-label{font-size:13px;line-height:1.45;color:var(--clay-mist);letter-spacing:.02em;}

/* facts — the thin logistics band under a hero. Deliberately smaller and
   quieter than .stats-band: a stat is a claim set large, a fact is logistics
   set scannable, and giving a $450 fee the type size of a credential is the
   mistake this separation exists to prevent.
   The separator is a TRAILING dot (:not(:last-child)::after) — a leading one
   opens a wrapped line with a bullet floating in space. */
.block--facts{padding-block:0;}
.facts{padding-block:clamp(14px,1.8vw,20px);}
.facts--paper{background:var(--paper);border-bottom:1px solid var(--line);}
.facts--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.facts--sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.facts--sage{background:var(--sage);color:var(--cream);}
.facts--ink{background:var(--ink);color:var(--cream);}
.facts--clay{background:var(--clay-deep);color:var(--cream);}
.facts-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0;padding:0;list-style:none;}
.facts-list--center{justify-content:center;}
.fact{display:flex;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.5;letter-spacing:.01em;}
.fact-value{font-weight:700;}
.fact-label{opacity:.72;}
.fact:not(:last-child)::after{content:'';align-self:center;margin-left:10px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.42;}
@media (max-width:599px){.facts-list{gap:4px 14px;}.fact{font-size:12.5px;}}

/* ── the same band on a DARK ground: chips, not a run-on line ──
 *
 * On paper the band is a hairline rule under a hero and everything above is
 * right. On sage/ink/clay it has a ground of its own — and at the foot of the
 * About page it is the practical-details row of the closing band, where a
 * left-aligned line of 13.5px text separated by dots read as leftovers rather
 * than as anything anyone designed.
 *
 * So it gets what it has always had and never showed: its NAME (the heading
 * renders for real on a dark tone — she had already written "The practical
 * details" and it was going to screen readers alone), and each fact set as a
 * CHIP — deliberately the same pill her SERVICE pages already use for exactly
 * this content, so the two places a reader meets her practical facts look
 * like the same site. Alignment still comes from the block's own align field.
 */
:is(.facts--sage,.facts--ink,.facts--clay) .facts-heading{
  margin:0 0 15px;font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:rgba(241,236,223,.6);
}
.facts:has(.facts-list--center) .facts-heading{text-align:center;}
:is(.facts--sage,.facts--ink,.facts--clay) .facts-list{gap:10px;}
:is(.facts--sage,.facts--ink,.facts--clay) .fact{
  font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;
  background:rgba(241,236,223,.1);border:1px solid rgba(241,236,223,.22);
}
/* a chip is its own object — the dot that separates words in a run-on line is
   noise between two pills */
:is(.facts--sage,.facts--ink,.facts--clay) .fact:not(:last-child)::after{display:none;}
@media (max-width:599px){
  :is(.facts--sage,.facts--ink,.facts--clay) .facts-list{gap:8px;}
  :is(.facts--sage,.facts--ink,.facts--clay) .fact{padding:7px 13px;}
}

/* ── THE CLOSING BAND: a facts row that runs straight into the ask ──
 *
 * Measured on the About page before this rule existed: the facts band ended
 * at 7971 and the cta band began at 7971 — two blocks painting the SAME
 * green, butted together with no seam, so a reader saw one tall green box in
 * which a row of chips was stuck 20px from the top edge, 92px of nothing, and
 * then the ask. Nothing said the chips and the ask were related, and nothing
 * said they weren't.
 *
 * They are one band with two rows. The chips get real air above them, a
 * hairline closes the row (inset to the container, so it reads as the band's
 * own rule rather than a stripe across the page), and the ask opens under it.
 * Only a facts band whose ground MATCHES the ask below it joins up — a sage
 * facts row above an ink ask is two bands and must keep its hard edge, which
 * is why this is a tone-pair rule and not a blanket adjacency one.
 */
.block--facts:has(.facts--sage):has(+ .block--cta-bleed .cta-bleed--sage) .facts,
.block--facts:has(.facts--ink):has(+ .block--cta-bleed .cta-bleed--ink) .facts{
  padding-top:clamp(30px,3.6vw,44px);padding-bottom:0;
}
.block--facts:has(.facts--sage):has(+ .block--cta-bleed .cta-bleed--sage) .facts > .container,
.block--facts:has(.facts--ink):has(+ .block--cta-bleed .cta-bleed--ink) .facts > .container{
  padding-bottom:clamp(18px,2.2vw,26px);border-bottom:1px solid rgba(241,236,223,.2);
}
/* and the ask opens against that rule instead of a full band's worth of air */
.block--facts:has(.facts--sage) + .block--cta-bleed .cta-bleed--sage,
.block--facts:has(.facts--ink) + .block--cta-bleed .cta-bleed--ink{
  padding-top:clamp(34px,4vw,50px);
}

/* people — a group band: co-authors, a group practice, a co-facilitator.
   The initials plate is the no-photo fallback (computed from the name by
   initialsOf), sized and shaped like the real portrait so a band with a
   mix of photographed and un-photographed people still lines up. */
.block--people{padding-block:0;}
.people{padding-block:clamp(40px,6vw,72px);}
.people--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.people--sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.people-head{margin-bottom:34px;max-width:62ch;}
.people-heading{margin:0;font-family:var(--font-serif);font-size:clamp(26px,3vw,34px);line-height:1.15;font-weight:600;color:var(--ink);}
.people-intro{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--ink-soft);}
.people-grid{display:grid;gap:clamp(26px,3.4vw,44px);margin:0;padding:0;list-style:none;}
.people-cols-2{grid-template-columns:repeat(2,1fr);}
.people-cols-3{grid-template-columns:repeat(3,1fr);}
.people-cols-4{grid-template-columns:repeat(4,1fr);}
.person{min-width:0;}
.person-portrait{display:block;width:96px;height:96px;margin-bottom:16px;}
.person-portrait img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 25%;display:block;}
.person-portrait--initials{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--sage-mist);border:1px solid var(--line);font-family:var(--font-serif);font-size:28px;font-weight:500;color:var(--sage-dark);letter-spacing:.02em;}
.person-portrait--plate{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--sand);border:1px solid var(--line);color:var(--clay-dark);}
.person-portrait--plate svg{width:40px;height:40px;display:block;}
.person-creds{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);margin-bottom:4px;}
.person-name{margin:0 0 8px;font-family:var(--font-serif);font-size:20px;line-height:1.25;font-weight:600;color:var(--ink);}
.person-bio p{margin:0 0 .6em;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
.person-bio p:last-child{margin-bottom:0;}
.person-link{display:inline-block;margin-top:10px;font-weight:700;font-size:14px;color:var(--clay);}
@media (max-width:899px){.people-cols-3,.people-cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:599px){.people-cols-2,.people-cols-3,.people-cols-4{grid-template-columns:1fr;}.person-portrait,.person-portrait img{width:80px;height:80px;}.person-portrait--initials{font-size:24px;}.person-portrait--plate svg{width:34px;height:34px;}}

/* logo strip */
/* A tinted press row. Untinted it closes a page, where the ground has already
   changed around it; high on the page, on the same paper as the hero above and
   the writing below, it needs edges of its own. */
.block--logos-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.block--logos-sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* THE PRESS ROW IS A CENTRED COLUMN AT EVERY WIDTH — label, logos, link.
   It was a single flex LINE, and measured on her live Home at 1440 that put
   the label at x=180 (95px wide, pinned to the far left of an 1080px band),
   the six logos filling 315-821, and the link pinned at x=1140: 319px of dead
   band between the last logo and the link, with all the content crammed into
   the left 60%. A label beside a row it is one-eighth the width of is not a
   label, it is a leftover.

   AT 375 THE SAME RULE COLLAPSED THE ROW. Label and link are both flex:none,
   so they held their widths and squeezed the flex:1 items box to roughly
   80px — one logo per line, SIX rows, a 473px-tall column down the middle of
   the screen with the label and link floating either side of it. More than
   half a phone screen for what is a footnote. As a column the items box is
   full width, so the logos wrap two-up or three-up on their own.

   The centred column is what the large row already does; small now shares
   the shape and differs only in scale. Nothing is pinned to an edge any
   more, so the dead space is gone by construction rather than by a number. */
.logo-strip{display:flex;flex-direction:column;align-items:center;gap:13px;padding-block:4px;}
.logo-strip-heading{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);flex:none;text-align:center;}
.logo-strip-items{display:flex;align-items:center;justify-content:center;gap:clamp(24px,3.4vw,44px);flex-wrap:wrap;}
/* 72px, not 56: the audit measured the logos filling 506px of a 786px box, so
   the room was already there and the wordmarks need it.
   ROUNDED SQUARE, NOT CIRCLE, and the reason is recorded one rule below — the
   circle crop cuts "MAGAZINE" off the bottom of the Oprah wordmark. It is
   also the only circle on the page apart from the monogram plate, so it was
   an orphan shape as well as a lossy crop; this is the site's own tuck, which
   stops the press row belonging to a different design system. White ground
   plus a hairline because a white logo on paper with no edge reads as a hole
   in the band (the large row's own reasoning, at its own scale). */
/* display:block on the img, because the item is an inline span and inline
   layout reserves descender space under it — measured as 9px of phantom
   height on a 72px logo, which reads as the row sitting off-centre in its
   own band. */
.logo-strip-item{display:flex;}
.logo-strip-item img{display:block;height:72px;width:auto;border-radius:18px 18px 18px 5px;box-shadow:0 0 0 1px var(--line);background:#fff;filter:saturate(.85);}
.logo-strip-link{font-weight:700;font-size:14px;flex:none;}
/* Two rows of three at 64px — 276px tall, down from 473.
   A GRID, not wrapped flex: with flex the break depends on arithmetic
   (6 logos at 64px and an 18px gap fit FOUR across a 335px column, so it
   wrapped 4+2 — lopsided, and measured that way). Three explicit columns say
   what the row is supposed to be and hold it whatever a logo's aspect ratio
   turns out to be. A seventh logo would land 3+3+1, which is the right shape
   for the answer being "drop the weakest one", not "grow a third row". */
@media (max-width:599px){
  .logo-strip{gap:14px;}
  .logo-strip-items{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:14px 18px;}
  .logo-strip-item img{height:64px;}
}
/* The large row: the press page's own subject, so the logos sit at a size
   where a wordmark reads. Her logos are squares on WHITE; on paper a white
   disc with no edge reads as a hole, so each gets a hairline ring. And they
   are NOT circles: the circle crop the small row USED TO USE cut "MAGAZINE"
   off the bottom of the Oprah wordmark, invisible at 56px and plain at 104.
   The site's own card corner instead — now shared with the small row. */
.block--logos-large .logo-strip{gap:22px;padding-block:clamp(28px,4vw,48px);}
.block--logos-large .logo-strip-items{flex:none;justify-content:center;gap:clamp(18px,3vw,40px);}
.block--logos-large .logo-strip-item img{height:104px;border-radius:22px 22px 22px 6px;box-shadow:0 0 0 1px var(--line);background:#fff;}
@media (max-width:599px){.block--logos-large .logo-strip-items{gap:14px;}.block--logos-large .logo-strip-item img{height:84px;}}
/* The wall of organisations (logo-strip layout "farm"). Logos arrive in every
   shape — a round county seal, a long university wordmark, a square mark — so
   each sits bare and contained, never cropped or tiled, in a cell whose width
   the renderer sets from the logo's shape (--w, see farmLogoWidth) so a seal
   and a long wordmark carry the same weight. One grey for all of them (grayscale, a little faded)
   so sixteen brand palettes read as a single band; multiply drops a logo's
   white box into whatever ground the band has. Full colour on hover. Every
   rule here names the farm, so the press row and its tiles are untouched. */
.block--logos-farm .logo-strip{gap:clamp(18px,2.4vw,26px);padding-block:clamp(24px,3.4vw,40px);}
.block--logos-farm .logo-strip-items{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));align-items:center;gap:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,36px);width:100%;}
.block--logos-farm .logo-strip-item{width:var(--w,150px);max-width:100%;height:64px;align-items:center;justify-content:center;justify-self:center;}
@media (max-width:999px){.block--logos-farm .logo-strip-items{grid-template-columns:repeat(4,minmax(0,1fr));}}
.block--logos-farm .logo-strip-item img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;box-shadow:none;background:none;filter:grayscale(1) contrast(1.05);opacity:.7;mix-blend-mode:multiply;transition:filter .2s ease,opacity .2s ease;}
.block--logos-farm .logo-strip-item:hover img{filter:none;opacity:1;}
@media (max-width:599px){
  .block--logos-farm .logo-strip-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;}
  .block--logos-farm .logo-strip-item{width:calc(var(--w,150px) * .72);height:48px;}
}

/* card grid */
.block--cards{padding-block:0;}
.card-grid{padding-block:clamp(40px,6vw,72px);}
/* Inside the composed page's column a card band is a BOX, not a full-width
   band — 72px of internal padding is a band's value and reads as a hole in a
   776px column. */
.page-main .card-grid{padding-block:clamp(28px,3.2vw,44px);}
.card-grid--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card-grid--sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card-grid-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap;}
.card-grid-heading{margin:0;}
.card-grid-intro{margin:10px 0 0;max-width:60ch;color:var(--ink-soft);}
.card-grid-link{font-weight:700;font-size:15px;flex:none;white-space:nowrap;}
.card-grid-items{display:grid;gap:18px;}
.card-grid-cols-2{grid-template-columns:repeat(2,1fr);}
.card-grid-cols-3{grid-template-columns:repeat(3,1fr);}
.card-grid-cols-4{grid-template-columns:repeat(4,1fr);}
.card{display:flex;flex-direction:column;color:inherit;}
.card-body{display:flex;flex-direction:column;gap:8px;padding:26px 28px;flex:1;}
.card-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.card-title{font-family:var(--font-serif);font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);}
.card-text{font-size:14.5px;line-height:1.6;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* A card with no link is not a teaser — nothing opens, so its body IS the
   content rather than a preview of it, and clamping it cuts her sentence off
   mid-word with nowhere to go and read the rest. The renderer emits an <a>
   for a linked card and a <div> for an unlinked one, so the distinction is
   already in the markup. Caught on the About page, where three of her four
   "what makes our work different" claims were losing their last line. */
.card-grid-items > div.card .card-text{display:block;-webkit-line-clamp:none;overflow:visible;}
.card-meta{font-size:13px;color:var(--ink-mute);}
.card-link{margin-top:auto;padding-top:10px;font-weight:700;font-size:14.5px;color:var(--clay);}
a.card:hover .card-title{color:var(--clay-dark);}
a.card:hover .card-link{color:var(--clay-dark);}
/* organic: tone-on-tone cards, rotating root corner so grids feel hand-placed */
.card-grid--organic .card{background:var(--cream);border-radius:32px 32px 32px 8px;}
.card-grid--cream .card,.card-grid--sand .card{background:var(--card);}
.card-grid--organic .card:nth-child(4n+2){border-radius:32px 32px 8px 32px;background:var(--sand);}
.card-grid--cream .card:nth-child(4n+2),.card-grid--sand .card:nth-child(4n+2){background:var(--card);}
.card-grid--organic .card:nth-child(4n+3){border-radius:8px 32px 32px 32px;}
.card-grid--organic .card:nth-child(4n){border-radius:32px 8px 32px 32px;background:var(--sand);}
.card-grid--cream .card:nth-child(4n),.card-grid--sand .card:nth-child(4n){background:var(--card);}
/* AN ORGANIC CARD ON A TINTED GROUND IS AN OBJECT ON A WALL.
   The paper-plate override above was written when cream and sand were the
   only grounds, and the three grounds added later (wheat, blush, olive) never
   joined it: on the home page's wheat band the cards kept the organic
   cream/sand rotation, so a sand card sat on wheat at almost no contrast and
   read as a hole where a door should be. Measured on her screenshot, the
   whole band was one beige value from edge to edge.
   Two moves, both scoped to organic cards on a tinted ground, which is the
   only place the flatness lives (paper-ground organic cards are cream plates
   and already read; photo cards carry a picture and a border):
   1. Every such card is a paper plate with a hairline ring and a low warm
      shadow, so it sits ON the band instead of dissolving into it. Hover
      deepens the shadow; nothing moves (no lift — the page is calm on purpose).
   2. The doors are told apart by colour. A row of organic cards is usually a
      row of different doors (resources / for therapists / therapy), and every
      mark plate was the same sage mist. The plate, the mark and the eyebrow
      now rotate through three accents from her palette — sage, clay, teal —
      and the plate fills solid on hover. This half applies to organic cards
      on any ground. */
.card-grid--organic:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive) .card,
.card-grid--organic:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive) .card:nth-child(4n+2),
.card-grid--organic:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive) .card:nth-child(4n){
  background:var(--card);
  box-shadow:0 0 0 1px rgba(92,69,52,.09),0 1px 2px rgba(62,57,47,.05),0 14px 34px -16px rgba(62,57,47,.26);
  transition:box-shadow .2s ease;
}
.card-grid--organic:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive) a.card:hover{
  box-shadow:0 0 0 1px rgba(92,69,52,.13),0 2px 4px rgba(62,57,47,.06),0 22px 44px -18px rgba(62,57,47,.34);
}
.card-grid--organic .card{--acc:var(--sage-dark);--acc-soft:var(--sage-mist);}
.card-grid--organic .card:nth-child(3n+2){--acc:var(--clay);--acc-soft:rgba(176,90,62,.14);}
.card-grid--organic .card:nth-child(3n){--acc:var(--teal);--acc-soft:rgba(57,105,90,.14);}
.card-grid--organic .monogram{background:var(--acc-soft);color:var(--acc);transition:background-color .2s ease,color .2s ease;}
.card-grid--organic .card-eyebrow{color:var(--acc);}
.card-grid--organic a.card:hover .monogram{background:var(--acc);color:var(--card);}
/* photo cards */
.card-grid--photo .card{background:var(--card);border:1px solid var(--line);border-radius:20px 20px 20px 6px;overflow:hidden;}
.card-media{display:block;line-height:0;}
.card-media img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;}
/* plain */
/* PLAIN MUST BEAT THE ALTERNATING PLATE, AND IT DID NOT.
   The tinted-band rules above give every 4n+2 and 4n card a paper plate, and
   they are (0,3,0) — a class, a class and a pseudo-class. A bare
   card-grid--plain .card is (0,2,0), so it LOST regardless of source
   order, and two of every four "borderless" cards kept a plate. Nothing had
   caught it because plain had only ever been used on an untinted band, where
   the rules it loses to do not apply at all: the defect needed plain AND a
   tint to appear, and that pairing shipped for the first time with the home
   page's recognition band.
   Matching the losing selectors exactly, so source order decides and plain
   wins — additive, and it changes nothing for a plain grid on paper. */
.card-grid--plain .card,
.card-grid--plain .card:nth-child(4n+2),
.card-grid--plain .card:nth-child(4n){background:transparent;}
.card-grid--plain .card-body{padding:0;}
.monogram{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--sage-mist);border-radius:50% 50% 50% 8px;font-family:var(--font-serif);font-style:italic;font-size:21px;color:var(--sage-dark);margin-bottom:6px;}
.monogram--mark svg{width:22px;height:22px;display:block;}
/* numbered cards — the "what's inside" triad. The numeral is a counter, so it
   renumbers on reorder; a hand-typed one in the monogram field does not. The
   renderer drops the monogram when numbered, so the two never stack. */
.card-grid-items--numbered{counter-reset:pillar;}
.card-grid-items--numbered .card{counter-increment:pillar;}
.card-grid-items--numbered .card-body::before{content:counter(pillar);font-family:var(--font-serif);font-size:32px;line-height:1;font-weight:400;color:var(--ornament);font-variant-numeric:lining-nums;margin-bottom:2px;}
@media (max-width:899px){.card-grid-cols-3,.card-grid-cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:599px){.card-grid-items:not(.card-grid-items--carousel){grid-template-columns:1fr!important;}}
/* carousel — a swipeable row, no script: scroll-snap, cards ~ one column wide, the row bleeds into the gutters on a phone */
.card-grid-items--carousel,.gallery-grid--carousel{display:flex;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:18px;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.card-grid-items--carousel > *,.gallery-grid--carousel > *{flex:0 0 min(320px,82vw);scroll-snap-align:start;}
.gallery-grid--carousel > *{flex-basis:min(360px,82vw);}
@media (max-width:599px){.card-grid-items--carousel,.gallery-grid--carousel{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);}}

/* split feature */
.block--feature{padding-block:0;}
.feature{padding-block:clamp(44px,6vw,76px);}
.feature--cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.feature--sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* SAND IS A MATERIAL, NOT A COLOUR.
   Every ground on this site is a flat hex, and cream (#f1ecdf) and sand
   (#eadfcb) are about four points of lightness apart — across a 7,700px page
   they read as one colour, which is a large part of why the page was
   described as beige. Rather than push the two hexes further apart (they are
   the finished result of a design pass and the tokens file says not to
   harmonize them), give ONE of them a tooth. A grain on sand and none on
   cream makes the two grounds different in KIND, not just in value, so a
   ground change reads as a change of material.

   A tiled fractal-noise SVG as a data URI: no request, no runtime cost,
   nothing that moves, and it survives any failure as plain sand. It is a
   background-IMAGE only, declared after the tone rules whose background
   shorthand would otherwise have cleared it, and never on a card plate or a
   chip — a band is a wall and takes a texture; a 48px plate is an object and
   does not. stitchTiles keeps the 140px tile seamless. */
/* THE EXTENDED GROUNDS — blush, wheat, olive, and a second dark band.
   Sampled from her own illustration library rather than invented (the hue
   analysis and the contrast figures are recorded in tokens.ts). They exist
   so the page can change ground when the AUDIENCE changes instead of
   alternating two tints, and so cream and sand — four points of lightness
   apart — stop being the only distinction the page has.
   Light grounds carry the same hairlines as sand; the dark one follows the
   sage band's rules exactly, including the cream type. */
.card-grid--blush,.feature--blush{background:var(--blush);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card-grid--wheat,.feature--wheat{background:var(--wheat);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card-grid--olive,.feature--olive{background:var(--olive);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* The dark band itself; everything ON it comes from the shared dark rules
   below, which is the whole point of naming that set once. */
.feature--teal{background:var(--teal);}

/* Tinted grounds have a tooth; paper and cream stay flat. That is the rule,
   so a new ground inherits the right answer without anyone remembering. */
.facts--sand,.people--sand,.block--logos-sand,.card-grid--sand,.feature--sand,
.checklist--sand,.newsletter--sand,.resources--sand,
.card-grid--blush,.feature--blush,.card-grid--wheat,.feature--wheat,
.card-grid--olive,.feature--olive{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

/* A PHOTOGRAPH ON A DARK BAND NEEDS AN EDGE.
   On sage or ink a picture with no border reads as a hole punched in the
   band rather than an object placed on it. The value is not a new one: it is
   exactly what the dark facts chips already use. */
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-media img{
  box-shadow:inset 0 0 0 1px rgba(241,236,223,.22);
}
/* A PICTURE BAND AND THE LINES THAT BELONG TO IT ARE ONE BAND.
   The home page's recognition moment is a split-feature ("You carry more than
   anyone sees") followed by four lines that finish that sentence. Put on a
   shared ground they still read as two things, because each band brings its
   own full padding and its own hairline: measured at 1440, 150px of empty
   sand between the picture band's last words and the first line, with TWO
   hairlines butted together in the middle of one continuous field. A hairline
   inside a band is a stray rule; 150px inside a band is a hole.

   One interval, no seam. The pair keeps ONE band's worth of air between its
   rows instead of two, and the hairlines that would have marked a boundary
   are removed on the side that faces the other row.

   TONE-PAIR, NOT BLANKET ADJACENCY — the rule the facts/ask join above
   already establishes. A sand feature above a CREAM grid is two bands and
   must keep its hard edge, or the page loses the one signal that says a
   chapter ended. Only a matching pair joins. */
.block--feature:has(.feature--sand) + .block--cards .card-grid--sand,
.block--feature:has(.feature--cream) + .block--cards .card-grid--cream{
  border-top:none;padding-top:0;
}
.block--feature:has(.feature--sand):has(+ .block--cards .card-grid--sand) .feature,
.block--feature:has(.feature--cream):has(+ .block--cards .card-grid--cream) .feature{
  border-bottom:none;padding-bottom:clamp(34px,4vw,50px);
}
/* The same pair on PAPER. Paper has no ground to match, so "matching" means
   a paper picture band followed by a PLAIN list with no ground of its own —
   the recognition moment's exact shape — and only as full-width bands (direct
   children of main). Narrower on purpose: a paper feature followed by a
   paper photo grid is two sections, and its heading needs the full air. */
main > .block--feature:has(> .feature--paper) + .block--cards > .card-grid--plain:not(:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive)){
  padding-top:0;
}
main > .block--feature:has(> .feature--paper):has(+ .block--cards > .card-grid--plain:not(:is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--blush,.card-grid--olive))) > .feature{
  padding-bottom:clamp(34px,4vw,50px);
}
.feature--sage{background:var(--sage);}
.feature--ink{background:var(--ink);}
.feature--clay{background:var(--clay-deep);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal){color:var(--cream);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) h2{color:var(--cream);}
.feature--sage .eyebrow,.feature--teal .eyebrow{color:var(--sage-tint);}
.feature--ink .eyebrow,.feature--clay .eyebrow{color:var(--clay-mist);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-body{color:var(--cream);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .pp-prose p{color:var(--cream);opacity:.92;}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .pp-prose a{color:var(--cream);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .pp-prose li{color:var(--cream);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-footnote{color:var(--stone);}
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;}
.feature--img-left .feature-grid{grid-template-columns:.9fr 1.1fr;}
.feature--img-left .feature-copy{order:2;}
.feature--img-left .feature-media{order:1;}
.feature--solo .feature-grid{grid-template-columns:1fr;}
.feature-copy h2{margin:0 0 .5em;}
.feature-body{font-size:16.5px;}
.feature-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.feature-chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--ink);}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-chips li{background:transparent;border-color:rgba(241,236,223,.35);color:var(--cream);}
.feature-cta{margin-top:22px;}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-cta{background:var(--clay-bright);color:#fff;}
:is(.feature--sage,.feature--ink,.feature--clay,.feature--teal) .feature-cta:hover{background:var(--clay);color:#fff;}
.feature-footnote{margin:14px 0 0;font-size:13.5px;color:var(--ink-mute);}
.feature-media{margin:0;}
.feature-media img{width:100%;height:auto;display:block;border-radius:32px 32px 32px 8px;}
/* THE TUCK POINTS BACK AT THE WORDS IT BELONGS TO.
   All five feature photographs on the home page carried the identical
   32/32/32/8 corner, and four of the five are image-LEFT — so it was not
   just the same corner five times, it was the same corner on the same side,
   three of them from 1920x1920 squares. The rotating tuck on the organic
   card grid is the one device in this stylesheet that reads as hand-placed;
   this gives the feature figure the same idea with a RULE behind it rather
   than a rotation: the small corner sits on the side the copy is on, so the
   picture leans toward its own text. Image right (the default) keeps the
   bottom-left tuck it already had, so nothing that was correct changes. */
.feature--img-left .feature-media img{border-radius:32px 32px 8px 32px;}
.feature-media figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-mute);}
@media (max-width:899px){.feature-grid{grid-template-columns:1fr!important;}.feature--img-left .feature-copy{order:1;}.feature--img-left .feature-media{order:2;}}

/* byline */
.byline{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;}
.byline-avatar img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;}
.byline-name{font-weight:700;font-size:15px;color:var(--ink);}
/* An article's head is title → byline → cover: the byline sits close under
   the title and the cover close under the byline, instead of three blocks'
   worth of section padding between them. */
.block--byline{padding-block:0 4px;}
.block--byline + .block{padding-top:18px;}
/* author box — the person behind the writing, at the end of it */
.author{display:flex;gap:22px;align-items:flex-start;padding:26px clamp(22px,3vw,32px);background:var(--cream);border-radius:28px 28px 28px 8px;margin:2em 0;}
.author-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 25%;display:block;}
.author-body{flex:1;min-width:0;}
.author-label{margin:0 0 4px;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.author-name{margin:0 0 6px;font-family:var(--font-serif);font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);}
.author-creds{font-weight:400;color:var(--ink-mute);}
.author-bio p{margin:0 0 .6em;font-size:15px;line-height:1.6;color:var(--ink-soft);}
.author-bio p:last-child{margin-bottom:0;}
.author-link{display:inline-block;margin-top:10px;font-weight:700;font-size:14.5px;color:var(--clay);}
@media (max-width:599px){.author{flex-direction:column;gap:14px;}}
/* newsletter — a plain form in a tinted card; zero JS */
.newsletter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 32px;padding:28px clamp(22px,3.4vw,36px);border-radius:32px 32px 32px 8px;margin:2em 0;}
.newsletter--sand{background:var(--sand);}
.newsletter--paper{background:var(--card);border:1px solid var(--line);}
.newsletter--ink{background:var(--ink);}
.newsletter-copy{flex:1 1 260px;min-width:0;}
.newsletter-heading{margin:0 0 6px;font-size:24px;line-height:1.2;font-weight:500;}
.newsletter-body p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);}
.newsletter--ink .newsletter-heading{color:var(--cream);}
.newsletter--ink .newsletter-body p{color:var(--stone);}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 280px;}
.newsletter-form input{flex:1 1 180px;min-width:0;background:var(--card);border:1px solid var(--input-line);border-radius:999px;padding:12px 18px;font-family:var(--font-sans);font-size:15px;color:var(--ink);}
.newsletter-form input:focus{outline:2px solid var(--clay);outline-offset:1px;}
.newsletter--ink .newsletter-form input{background:#3b362d;border-color:#4a443a;color:var(--cream);}
.newsletter-note{flex:1 1 100%;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-mute);border-top:1px dashed var(--line);padding-top:12px;}
.newsletter--unwired{outline:1.5px dashed var(--line);outline-offset:-6px;}
.newsletter--sage{background:var(--sage);}
.newsletter--sage .newsletter-heading{color:var(--cream);}
.newsletter--sage .newsletter-body p{color:rgba(241,236,223,.82);}
.newsletter--sage .eyebrow--sage{color:rgba(241,236,223,.78);}
.newsletter--sage .newsletter-form input{border-color:transparent;}
/* After a signup lands, the "sent" line takes the form's place: the reader is
   done, and an empty email field under "check your inbox" reads as "try
   again". The banner is the form's preceding sibling in every shape. An
   error keeps the form, so they can. */
.newsletter-banner--sent:target ~ .newsletter-form{display:none;}

/* newsletter, band shape: a slim full-width strip between two sections. The
   words sit left, the form right, on one row; a phone stacks them and gives
   the field and the button the full width, each a comfortable tap. */
.block--newsletter-band{padding-block:0;}
.newsletter-band{padding-block:clamp(22px,2.6vw,32px);}
.newsletter-band--sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.newsletter-band--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.newsletter-band--sage{background:var(--sage);}
.newsletter-band--ink{background:var(--ink);}
.newsletter-band--unwired{outline:1.5px dashed var(--line);outline-offset:-6px;}
.newsletter-band-inner{display:flex;align-items:center;justify-content:space-between;gap:16px clamp(28px,4vw,64px);flex-wrap:wrap;}
.newsletter-band .newsletter-copy{flex:1 1 340px;}
.newsletter-band .eyebrow{font-size:12px;margin-bottom:6px;}
.newsletter-band .newsletter-heading{margin:0 0 4px;font-size:clamp(21px,2vw,26px);}
.newsletter-band .newsletter-body p{font-size:14.5px;}
.newsletter-act{flex:0 1 500px;min-width:0;display:flex;flex-direction:column;gap:10px;}
/* The row may wrap: the invisible Turnstile check is a 100%-basis item, and
   in a no-wrap row it would take a share of the width from the email field. */
.newsletter-band .newsletter-form{flex:0 0 auto;}
.newsletter-band .newsletter-form input{flex:1 1 220px;padding-block:13px;}
.newsletter-band .newsletter-form .btn{flex:0 0 auto;white-space:nowrap;}
.newsletter-band .newsletter-note{border-top:0;padding-top:0;}
:is(.newsletter-band--sage,.newsletter-band--ink) .newsletter-heading{color:var(--cream);}
:is(.newsletter-band--sage,.newsletter-band--ink) .newsletter-body p{color:rgba(241,236,223,.82);}
:is(.newsletter-band--sage,.newsletter-band--ink) .eyebrow--sage{color:rgba(241,236,223,.78);}
.newsletter-band--sage .newsletter-form input{border-color:transparent;}
.newsletter-band--ink .newsletter-form input{background:#3b362d;border-color:#4a443a;color:var(--cream);}
:is(.newsletter-band--sage,.newsletter-band--ink) .newsletter-banner--sent{background:rgba(241,236,223,.14);color:var(--cream);}
@media (max-width:699px){
  .newsletter-band-inner{flex-direction:column;align-items:stretch;gap:16px;}
  .newsletter-band .newsletter-copy,.newsletter-act{flex:0 0 auto;}
  .newsletter-band .newsletter-form{flex-direction:column;}
  /* column flex: a row flex-basis would become a HEIGHT */
  .newsletter-band .newsletter-form input,.newsletter-band .newsletter-form .btn{flex:0 0 auto;width:100%;}
  .newsletter-band .newsletter-form .btn{text-align:center;justify-content:center;}
}

/* resources — references, organizations, books. A reading list by default
   (kind label · title · source · a line on why); `cards` for covers. The
   disclosure sits under the list whenever a link earns her something. */
.resources{margin:2.4em 0;padding:28px clamp(22px,3vw,34px);border-radius:32px 32px 32px 8px;}
.resources--paper{background:var(--card);border:1px solid var(--line);}
.resources--sand{background:var(--sand);}
.resources-heading{margin:0 0 6px;font-family:var(--font-serif);font-size:22px;line-height:1.3;font-weight:600;color:var(--ink);}
.resources-intro{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink-soft);}
.resources-intro p{margin:0;}
.resources-list{list-style:none;margin:8px 0 0;padding:0;}
.resource{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;padding:14px 0;border-top:1px solid var(--line);}
.resource:first-child{border-top:0;padding-top:6px;}
.resource-thumb{display:block;width:46px;aspect-ratio:2/3;border-radius:6px 6px 6px 2px;overflow:hidden;background:var(--sand);}
.resource-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
.resource-body{min-width:0;}
.resource-kind{display:block;font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);margin-bottom:3px;}
.resource-head{margin:0;font-family:var(--font-serif);font-size:17.5px;line-height:1.35;color:var(--ink);}
.resource-title{font-weight:600;color:var(--ink);text-decoration:none;}
a.resource-title{text-decoration:underline;text-decoration-color:var(--clay-mist);text-decoration-thickness:1.5px;text-underline-offset:4px;}
a.resource-title:hover{color:var(--clay);text-decoration-color:var(--clay);}
.resource-source{font-family:var(--font-sans);font-size:14px;color:var(--ink-mute);}
.resource-source::before{content:' · ';}
.resource-note{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.resource-note p{margin:0;}
.resource-note a{color:var(--clay);}
.resource-action{display:inline-block;margin-top:8px;font-family:var(--font-sans);font-weight:700;font-size:14px;color:var(--clay);text-decoration:none;}
.resource-action:hover{text-decoration:underline;}
.resources-disclosure,.resources-note{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-mute);}
.resources--empty{outline:1.5px dashed var(--line);outline-offset:-6px;}
.article-disclosure{margin:2.2em 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;line-height:1.5;color:var(--ink-mute);}
/* cards: covers in a grid; the action is the door (the title stays a link too) */
.resources--cards .resources-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:12px;}
.resources--cards .resource,.resources--cards .resource:first-child{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:20px 20px 20px 6px;background:var(--card);}
.resources--cards .resource-thumb{width:96px;}
.resources--cards .resource-body{display:flex;flex-direction:column;flex:1;}
.resources--cards .resource-action{margin-top:auto;padding-top:10px;}
/* one column on a phone: two-up cards wrap a four-word title to four lines */
@media (max-width:599px){.resources{padding:22px 18px;}.resources--cards .resources-list{grid-template-columns:1fr;gap:10px;}.resources--cards .resource{padding:14px 16px;}.resources--cards .resource-thumb{width:72px;}}
/* The metas are one unbreakable run: a wrap happens before the group, so no
   line ever opens with a separator dot. */
.byline-metas{white-space:nowrap;}
.byline-meta{font-size:14px;color:var(--ink-mute);}
.byline-meta + .byline-meta::before{content:'·';margin:0 10px;color:var(--line);}

/* wide photo (cover treatment) */
.photo--wide img{border-radius:24px 24px 24px 8px;}
.photo--cover img{aspect-ratio:16/9;object-fit:cover;}

/* full-bleed cta band (the closing DeepCta) */
/* the pinned action bar — the page's one ask, held against the bottom of the
   viewport while the page scrolls. ZERO JS: it is the last child of a tall
   <main>, so sticky pins it and then RELEASES it at the end of the page,
   where it sits inline as an ordinary band. That release is why this beats
   position:fixed here — a fixed bar needs page padding paid for by hand, and
   at the foot of the page it covers the thing it points at.
   Slim on purpose: it takes viewport height away from the reading for the
   whole page, so it earns about one line of it. */
.actionbar{position:sticky;bottom:0;z-index:20;border-top:1px solid var(--line);}
.actionbar--paper{background:var(--paper);}
.actionbar--cream{background:var(--cream);}
.actionbar--sand{background:var(--sand);}
.actionbar--ink{background:var(--ink);border-top-color:#4a443a;}
.actionbar--sage{background:var(--sage);border-top-color:var(--sage-dark);}
.actionbar--clay{background:var(--clay-deep);border-top-color:var(--clay-dark);}
.actionbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding-block:11px;}
.actionbar-note{margin:0;font-size:14px;line-height:1.35;color:var(--ink-soft);min-width:0;}
.actionbar--ink .actionbar-note,.actionbar--sage .actionbar-note,.actionbar--clay .actionbar-note{color:var(--stone);}
.actionbar-btn{flex:none;padding:10px 22px;font-size:14px;}
/* One line only. A bar that grows to two lines on a phone is eating the page
   it is meant to help someone read. */
@media (max-width:599px){
  .actionbar-inner{padding-block:9px;gap:12px;}
  .actionbar-note{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .actionbar-btn{padding:9px 16px;font-size:13px;}
}
/* Paper is for reading; a pinned button on it is a screen affordance. */
@media print{.actionbar{display:none;}}

.block--cta-bleed{padding-block:0;}
.block--cta-bleed:last-child{padding-bottom:0;}
.cta-bleed{padding-block:clamp(44px,6vw,72px);}
.cta-bleed--ink{background:var(--ink);}
.cta-bleed--sage{background:var(--sage);}
.cta-bleed .cta-heading{font-size:clamp(26px,3.4vw,36px);font-weight:500;color:var(--cream);}
.cta-bleed .cta-body{color:var(--stone);}
.cta-bleed--sage .cta-body{color:var(--sage-mist);}
.cta-bleed-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;}
/* The band paints its own text colour. Only the heading and body used to set
   one, so anything else added to this block inherited the ink text colour
   and rendered near-black on a dark green ground. */
.cta-bleed{color:var(--cream);}
/* The ask is a COLUMN, not a right-aligned pile. Measured before this: the
   two buttons were 214px and 197px with a ragged left edge, and the note under
   them was a right-aligned two-liner whose second line was the orphan
   "Beach & LA." A fixed column makes both doors the same size — they are two
   real choices, not a big one and a small one — and gives the note the same
   width to sit in. */
.cta-bleed .cta-actions{flex:0 0 clamp(230px,20vw,268px);align-items:stretch;gap:12px;}
.cta-bleed .cta-actions .cta-btn{width:100%;text-align:center;}
.cta-bleed .cta-reassure{text-align:center;max-width:none;margin-top:2px;}
/* ⚠️ The phone override lives HERE, immediately after the rule it overrides,
   and not up in the in-flow cta block with its siblings. Same specificity
   (0,2,0), so source order decides — written 400 lines earlier it lost, and
   the phone kept a 230px flex-basis inside a 331px column. Same trap as the
   detail-page photo frame, which was written below the rule it had to beat. */
@media (max-width:599px){.cta-bleed .cta-actions{flex:1 1 100%;}}
/* An ink closing band and the ink FOOTER are the same colour, and nothing sat
   between them: measured on the home page, the ask ended at 368 and the footer
   began at 368, both rgb(46,42,35), no border anywhere — so the page's last
   ask dissolved into the legal furniture. The footer is not a sibling of this
   block (it lives outside main), so no selector can reach across the join;
   the band draws the line itself, and only when it closes the page. */
.block--cta-bleed:last-child .cta-bleed--ink{border-bottom:1px solid #4a443a;}
.btn--band-primary{background:var(--clay-bright);color:#fff;}
.btn--band-primary:hover{background:var(--clay);color:#fff;}

/* the fact chips continue the hero's cream band; without chips the hero keeps its own border */
.service-head:has(.service-facts) .hero--cream{border-bottom:0;}
.service-head:has(.service-facts) .hero{padding-bottom:26px;}
.service-facts{background:var(--cream);border-bottom:1px solid var(--line);padding-bottom:34px;}
.service-facts-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.service-fact{font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;}
/* the composed columns */
/* a long plain page: her writing beside a sticky jump nav.
   Measured on the About page at 1512px BEFORE this existed: the 760px reading
   column sat left-aligned in a 1160px container — 216px of margin on the left
   and 536px on the right, while the cards on the same page ran the full
   1080px. The rail spends that space on the one thing a fifteen-screen page
   needs. Same two-column shape her articles and service pages already use. */
/* A grid at EVERY width, not only the two-column one: below the breakpoint
   it is a single column with the aside ordered FIRST, because a jump nav that
   renders after the writing is at the bottom of a fifteen-screen phone page,
   which is exactly where it is no use. Caught by looking at 375px. */
.page-cols{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.page-aside{order:-1;}
.page-main .block{padding-inline:0;}
.page-main .container,.page-aside .container{padding-inline:0;}
/* ⚠️ …but a band that PAINTS A GROUND still needs an inset from it. Zeroing
   every container inside a column is right for a block that draws nothing —
   the column already provides the gutter — and wrong for a tinted one, whose
   cards then sit flush on the tint's own edge with no margin at all. The
   article and service columns carry the same blanket rule and the same bug. */
:is(.page-main,.service-main,.article-main) :is(.card-grid--cream,.card-grid--sand,.facts--cream,.facts--sand,.facts--sage,.facts--ink,.facts--clay,.cta-bleed--ink,.cta-bleed--sage) .container{padding-inline:clamp(20px,2.6vw,32px);}
/* The facts band joined that list the day a service page put one in its own
   writing column: measured at 1440 its heading sat at x=180 on a band whose
   own left edge is x=180 — flush, exactly as the card bands were. The dark
   cta tones joined it 2026-09-11, measured the same way: seventeen service
   pages' closing ink ask had been landing in the writing column (heading at
   x=180 on a band from x=180) — the structural fix moved that ask to the
   tail, and this rule is for the ink or sage ask she places MID-writing from
   the editor, so it can never render flush again. The mist tone is its own
   padded card and needs nothing. Every OTHER tinted family (feature, people,
   resources, logo-strip…) has the same latent bug and is not listed, because
   none of them is inside a column on any page today and a rule written for a
   case nobody has renders nothing and proves nothing. Put the family here the
   first time one lands in a column, and measure it. The paper tone paints no
   ground and must never be listed:
   there the zeroed container is the correct answer. */
/* Below the two-column width the nav rides ABOVE the writing as a plain
   index — a fifteen-screen phone page wants it more than a desktop does. */
.jumpnav{margin:0 0 2.4em;padding:20px 22px;background:var(--cream);border-radius:24px 24px 24px 6px;}
.jumpnav-label{margin:0 0 10px;font-family:var(--font-sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);}
.jumpnav-list{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:jump;}
.jumpnav-list li{counter-increment:jump;}
.jumpnav-link{display:block;font-size:14.5px;line-height:1.4;color:var(--ink-soft);text-decoration:none;}
.jumpnav-link:hover{color:var(--clay);}
@media (min-width:1100px){
  /* The main column IS the reading measure, not "whatever is left". At
     minmax(0,1fr) it came out 776px while the prose inside it capped at 760,
     so a block that paints a ground — a tinted card band — ran 16px past the
     right edge of every paragraph above it and read as bleeding off the page.
     Same shape the article column already uses. */
  .page-cols{grid-template-columns:minmax(0,var(--measure-article)) 240px;column-gap:64px;justify-content:space-between;align-items:start;}
  /* Beside the writing it goes back to its natural place on the right. */
  .page-aside{order:0;position:sticky;top:calc(var(--header-h) + 24px);}
  /* In the rail it is a hairline index, not a card — a tinted box floating in
     the margin reads as an advert beside the writing. */
  .jumpnav{margin:36px 0 0;padding:0 0 0 18px;background:none;border-radius:0;border-left:1px solid var(--line);}
  .jumpnav-list{gap:11px;}
  .jumpnav-link{font-size:13.5px;}
}
@media (max-width:1099px){
  /* One target per line is a wall on a phone; two columns of short labels
     reads as an index. */
  .jumpnav-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;}
}
@media (max-width:599px){.jumpnav-list{grid-template-columns:1fr;}}

.service-cols{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.service-main .block{padding-inline:0;}
.service-main .container,.service-aside .container{padding-inline:0;}
.service-aside{display:flex;flex-direction:column;gap:30px;}
.service-aside .block{padding-block:0;padding-inline:0;}
/* the provider band (service pages) and the contact card (contact page) as a
   rail card: photo on top, words under, one full-width button */
:is(.service-aside,.contact-aside) .feature{background:var(--card);border:1px solid var(--line);border-radius:24px 24px 24px 8px;overflow:hidden;padding:0 0 22px;}
:is(.service-aside,.contact-aside) .feature-grid{display:flex;flex-direction:column;gap:14px;}
:is(.service-aside,.contact-aside) .feature-media{order:-1;margin:0;}
:is(.service-aside,.contact-aside) .feature-media img{border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover;}
:is(.service-aside,.contact-aside) .feature-copy{padding-inline:22px;display:flex;flex-direction:column;gap:10px;}
:is(.service-aside,.contact-aside) .feature-copy h2{font-size:21px;margin:0;}
:is(.service-aside,.contact-aside) .feature .pp-prose{font-size:14.5px;line-height:1.6;}
:is(.service-aside,.contact-aside) .feature .pp-prose p{margin-bottom:.6em;}
:is(.service-aside,.contact-aside) .feature-cta{display:block;text-align:center;}
:is(.service-aside,.contact-aside) .feature-footnote{font-size:12.5px;color:var(--ink-mute);margin:0;}
/* the related band as a quiet index: label + hairline rows, no cards */
.service-aside .card-grid{background:transparent;}
.service-aside .block--cards{border-top:1px solid var(--line);padding-top:22px;}
.service-aside .card-grid-head{margin:0 0 6px;}
.service-aside .card-grid-heading{font-family:var(--font-sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);margin:0;}
.service-aside .card-grid-intro,.service-aside .card-grid-link{display:none;}
.service-aside .card-grid-items{display:flex;flex-direction:column;gap:0;}
.service-aside .card{background:transparent;border:0;border-radius:0;padding:10px 2px;border-bottom:1px solid var(--line);}
/* A rail row is never a plate, whatever ground or style its grid carries:
   the tinted-band plate rules are (0,3,0)–(0,4,0) and would otherwise put a
   shadowed card in the rail. :nth-child(n) matches every row and lifts this
   to (0,4,0); declared later, so it wins. */
.service-aside .card-grid .card:nth-child(n){background:transparent;box-shadow:none;}
/* A related row is title · arrow on ONE line. The card body is a flex COLUMN
   in the grid (0,1,0) and this rule only ever re-set display, align and justify, so
   the column direction survived and every arrow dropped under its title —
   measured 2026-09-11: an 88px row for a 21px title. The direction must be
   said here, not assumed. */
.service-aside .card-body{display:flex;flex-direction:row;flex:1;align-items:baseline;justify-content:space-between;gap:12px;padding:0;}
.service-aside .card-title{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--ink);}
.service-aside .card:hover .card-title{color:var(--clay-dark);}
.service-aside .card-link{color:var(--clay);font-weight:700;margin-top:0;padding-top:0;flex:none;}
.service-aside .card-media,.service-aside .monogram,.service-aside .card-text,.service-aside .card-eyebrow,.service-aside .card-meta{display:none;}
@media (min-width:1000px){
  .service-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:64px;align-items:start;}
  .service-aside{position:sticky;top:calc(var(--header-h) + 24px);margin-top:36px;}
}
@media (max-width:999px){.service-aside{margin-top:34px;padding-top:34px;border-top:1px solid var(--line);gap:34px;}}

/* ── THE CONTACT PAGE: THE FORM BESIDE THE DIRECT LINE ──
   contact-furniture.ts places the form in the column and the contact card in
   a rail beside it. Before, the form sat in a 760px column hugging the left
   edge with 500px of empty page to its right, and the card ran full width
   below it, so the two edges disagreed and her phone number waited behind a
   900px form. The column and rail together span the container, so the intro
   above and the bands below share both edges with them. */
.contact-cols{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.contact-main .block,.contact-aside .block{padding-inline:0;}
/* The form is the column's only child, so .block:first-child/:last-child
   would pad it 56/64 instead of the page's normal interval, pushing it away
   from the intro above and out of line with the card beside it. */
.contact-main .block{padding-block:var(--gap);}
.contact-main .container,.contact-aside .container{padding-inline:0;}
.contact-main .block--narrow .container > *{max-width:none;}
.contact-aside .block{padding-block:0;}
.contact-aside .feature-copy{gap:12px;}
.contact-aside .feature .pp-prose p{margin-bottom:.35em;}
.contact-aside .feature .pp-prose a{overflow-wrap:anywhere;}
@media (min-width:1000px){
  .contact-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:72px;align-items:start;}
  /* the rail card's top sits level with the form's heading */
  .contact-aside{position:sticky;top:calc(var(--header-h) + 24px);margin-top:var(--gap);}
}
@media (max-width:999px){.contact-aside{padding-block:8px var(--gap-air);}}

/* ── EVERY COMPOSED COLUMN'S RAIL NEEDS A FLOOR ──
 *
 * Reported on the About page: the jump nav's last link, "Ready to begin?",
 * sat exactly on the top edge of the sage band below it. Measured at 1440 it
 * was not close, it was ZERO — and the same measurement on the other two
 * composed columns found the identical thing: an article's share row ended 0px
 * from the block after it, and a service page's related list ended 0px from
 * the FOOTER. Three rails, one missing rule.
 *
 * The writing column never showed it because every block carries its own
 * padding; a rail is bare elements in a bare column, so nothing was holding
 * the bottom. A sticky rail rests its box against the bottom of its grid area,
 * which is why it lands exactly on the boundary rather than near it.
 *
 * The About rail is excluded below its two-column width because it moves ABOVE
 * the writing there (order:-1) and already carries its own bottom margin —
 * padding would be counted twice.
 */
:is(.article-aside,.service-aside){padding-bottom:var(--gap-air);}
@media (min-width:1100px){.page-aside{padding-bottom:var(--gap-air);}}

/* ── the hub's furniture: expandable index rows + the plan band ── */
/* expandable rows (card-grid expand mode) — hairline rows, a caret only on
   the row that opens, the body and its door on click; native details, no JS */
.card-grid-items--expand{display:grid;gap:0 44px;align-content:start;}
.card-grid-items--expand{grid-template-columns:1fr;}
@media (min-width:900px){.card-grid-cols-2.card-grid-items--expand{grid-template-columns:repeat(2,1fr);}}
.xcard{border-bottom:1px solid var(--line);}
.xcard-summary{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 4px;cursor:pointer;list-style:none;}
.xcard-summary::-webkit-details-marker{display:none;}
.xcard-title{font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--ink);}
.xcard-summary:hover .xcard-title{color:var(--clay-dark);}
/* This chevron is the row's only affordance, so it is drawn a size larger
   than the nav's: a 9px box is about 13px of chevron against an 18px serif
   title. The right margin keeps the rotated ink off the row's own edge. */
.xcard-caret{align-self:center;width:9px;height:9px;margin-right:3px;color:var(--clay);opacity:.7;transition:transform .18s ease,opacity .18s ease;}
.xcard-summary:hover .xcard-caret{opacity:1;}
.xcard[open] .xcard-caret{transform:translateY(35%) rotate(225deg);opacity:1;}
.xcard-body{padding:0 4px 16px;}
.xcard-text{margin:0 0 8px;font-size:14.5px;line-height:1.6;max-width:52ch;}
.xcard-link{font-weight:700;font-size:14px;color:var(--clay);display:inline-block;margin-top:4px;}
/* what an offer covers, one line each. A sage marker rather than a disc: the
   list is the contents of the row, not a claim about the reader. The bare
   ul:not([class]) rule in the prose block is why this needs a class. */
.xcard-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:7px;max-width:60ch;}
.xcard-list li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
.xcard-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sage);}
.xcard-list a{font-weight:600;}
/* an open row gets a ground, so a page of six reads as six things rather than
   as a rule the writing happens to run through */
.xcard[open]{background:var(--card);border-radius:14px 14px 14px 4px;}
.xcard[open] .xcard-summary,.xcard[open] .xcard-body{padding-left:18px;padding-right:18px;}
.card-grid--expand .card-grid-heading{font-size:24px;}
/* ── the INDEX (card-grid index mode) — a table of contents, not a list ──
 *
 * The specialties hub read as four identical lists of bare titles with a 13px
 * caret each: 1,375px of page, 46 words visible, her 244 words of "what this
 * is for" hidden one sentence per click. Three moves:
 *   1. her one line is ON the row, under the title, and the whole row is the
 *      door — the title says what, her sentence says whether it's you;
 *   2. the heading takes a column of its own beside the rows, under an ink
 *      rule, so four groups read as four chapters of one index rather than
 *      four copies of one list — and a group of three no longer leaves a hole
 *      in a two-column grid;
 *   3. the door is a real target (a 40px ring that fills clay on hover), not
 *      a glyph the reader has to find.
 * The heading holds its place (sticky) while its rows scroll past — on a
 * five-row group that is the difference between a label and a stray line. */
.card-grid--index .container > .eyebrow{display:block;margin:0 0 14px;}
.index-group{display:grid;gap:18px;border-top:1px solid var(--ink);padding-top:clamp(20px,2.4vw,28px);}
.index-head{min-width:0;}
.card-grid--index .card-grid-heading{font-size:clamp(24px,2.5vw,30px);line-height:1.18;text-wrap:balance;}
.card-grid--index .card-grid-intro{font-size:15px;}
.card-grid--index .card-grid-link{display:inline-block;margin-top:14px;}
.card-grid-items--index{display:flex;flex-direction:column;gap:0;}
.irow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;}
.irow:first-child{padding-top:0;}
.irow:last-child{border-bottom:0;padding-bottom:0;}
.irow-words{display:flex;flex-direction:column;gap:5px;min-width:0;}
.irow-title{font-family:var(--font-serif);font-size:clamp(19px,1.7vw,21px);line-height:1.25;font-weight:600;color:var(--ink);transition:color .15s;}
.irow-text{font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:58ch;}
.irow-arrow{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-style:normal;font-size:16px;line-height:1;color:var(--clay);transition:background .18s,border-color .18s,color .18s,transform .18s;}
a.irow:hover .irow-title{color:var(--clay-dark);}
a.irow:hover .irow-arrow{background:var(--clay);border-color:var(--clay);color:var(--paper);transform:translateX(3px);}
/* consecutive groups are chapters of one index: the rule is the break, so the
   full band padding between them would be a second, emptier one */
.block--cards-index + .block--cards-index .card-grid{padding-top:clamp(8px,1.4vw,16px);}
/* A RUN of index groups is numbered as chapters — 01, 02, 03 — in the display
   face, in clay: the one accent the index carries. A counter, never typed, so
   it renumbers when she reorders. Reset on the first group of a run (a reset
   scopes to the element AND its following siblings), so two separate runs on
   one page each start at 01, and a lone group gets no number at all — "01" by
   itself is a chapter of nothing. The empty alt text keeps a screen reader from
   announcing "zero one" before every heading. */
.block--cards-index:not(.block--cards-index + .block--cards-index){counter-reset:pp-index;}
.block--cards-index{counter-increment:pp-index;}
:is(.block--cards-index:has(+ .block--cards-index),.block--cards-index + .block--cards-index) .index-head::before{content:counter(pp-index,decimal-leading-zero);content:counter(pp-index,decimal-leading-zero) / "";display:block;margin:0 0 10px;font-family:var(--font-serif);font-size:clamp(34px,3.4vw,46px);line-height:1;font-weight:400;font-variant-numeric:lining-nums;color:var(--clay);}
@media (min-width:900px){
  .index-group{grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:clamp(40px,6vw,88px);align-items:start;}
  .index-group--bare{grid-template-columns:minmax(0,1fr);}
  .index-head{position:sticky;top:calc(var(--header-h) + 28px);}
}
/* On a phone the door moves up beside the TITLE and her line runs the full
   width under both — a 50px arrow column beside the text cost every teaser an
   extra wrapped line, fourteen times over. The whole row is still the link;
   30px stays past the 24px target floor either way. */
@media (max-width:599px){
  .irow{gap:6px 14px;padding:16px 0;}
  .irow-words{display:contents;}
  .irow-title{grid-column:1;grid-row:1;}
  .irow-arrow{grid-column:2;grid-row:1;width:30px;height:30px;font-size:13px;}
  .irow-text{grid-column:1 / -1;grid-row:2;font-size:14.5px;}
}
/* the plan band — heading line, steps side by side, one button */
.block--steps-row .steps{margin:0;background:var(--card);border:1px solid var(--line);border-radius:24px 24px 24px 8px;padding:26px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;}
.steps--row .steps-heading{flex:0 0 100%;margin:0;font-size:24px;}
.steps--row .steps-list{flex:1;flex-direction:row;min-width:340px;gap:0;}
.steps--row .step{flex:1;padding:0 20px;border-top:0;grid-template-columns:30px 1fr;gap:10px;}
.steps--row .step:last-child{border-bottom:0;}
.steps--row .step::before{font-size:20px;color:var(--sage);font-weight:600;}
.steps--row .step:first-child{padding-left:0;}
.steps--row .step + .step{border-left:1px solid var(--line);}
.steps--row .step-title{font-size:16.5px;}
.steps--row .step-text{font-size:13px;margin:2px 0 0;color:var(--ink-mute);}
.steps--row .steps-row-cta{white-space:nowrap;}
@media (max-width:899px){
  .block--steps-row .steps{flex-direction:column;align-items:stretch;}
  .steps--row .steps-list{flex-direction:column;min-width:0;}
  .steps--row .step{padding:12px 0;}
  .steps--row .step + .step{border-left:0;border-top:1px solid var(--line);}
  .steps--row .steps-row-cta{text-align:center;}
}

.product-head{background:var(--cream);border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,64px);}
.product-head .hero-crumbs{margin-bottom:clamp(20px,2.4vw,30px);}
.product-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start;}
.product-grid--text{grid-template-columns:minmax(0,var(--measure-article));}
.product-media .block,.product-buy .block{padding:0;}
.product-media .container,.product-buy .container{padding-inline:0;}
.product-media .block--narrow .container > *,.product-buy .block--narrow .container > *,.product-buy .block--narrow .pp-prose{max-width:none;}
.product-media figure{margin:0;}
.product-media img{width:100%;height:auto;display:block;border-radius:24px 24px 24px 8px;}
.product-buy h1{font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin:0 0 .35em;}
.product-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sage);margin:0 0 12px;}
.product-offer{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
/* The builder's stand-in for a buy box that cannot render yet (no row, no price, no files, paused). Publish never emits it. */
.product-offer--slot{border:1px dashed var(--line);border-radius:10px;padding:16px 18px;gap:6px;}
.product-slot-title{margin:0;font-size:14px;font-weight:600;}
.product-slot-note{margin:0;font-size:13.5px;line-height:1.5;opacity:.8;}
.product-price{font-family:var(--font-serif);font-size:28px;line-height:1;color:var(--ink);margin:0;}
.product-btn{min-width:200px;text-align:center;}
.product-form{margin:0;}
.product-note{font-size:13px;line-height:1.5;color:var(--ink-mute);margin:0;max-width:44ch;}
.product-error{display:none;font-size:14px;line-height:1.5;color:var(--clay-dark);margin:0;max-width:44ch;}
.product-error:target{display:block;}
.product-doors{display:flex;flex-wrap:wrap;gap:10px;}
.product-btn--cart{min-width:0;}
.product-added{display:none;font-size:14px;line-height:1.5;color:var(--ink);margin:0;}
.product-added:target{display:block;}
.product-added a{color:var(--clay-dark);font-weight:600;}
/* the cart page (app-rendered in her chrome): a narrow list, one line per item */
.cart h1{font-size:clamp(30px,3.6vw,44px);margin:0 0 .6em;}
.cart-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-line-name a{color:var(--ink);text-decoration:none;}
.cart-line-name a:hover{color:var(--clay-dark);}
.cart-line-price{font-family:var(--font-serif);font-size:18px;color:var(--ink);}
.cart-remove{margin:0;}
.cart-remove-btn{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.cart-remove-btn:hover{color:var(--clay-dark);}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 22px;font-size:15px;color:var(--ink-soft);}
.cart-total strong{font-family:var(--font-serif);font-size:26px;color:var(--ink);font-weight:500;}
.cart-checkout{margin:0 0 14px;}
.cart-empty{color:var(--ink-soft);margin:0 0 18px;}
.cart-note{font-size:13.5px;line-height:1.5;color:var(--ink-mute);margin:0;}
@media (max-width:599px){.cart-line{grid-template-columns:minmax(0,1fr) auto;}.cart-remove{grid-column:1 / -1;}.cart-checkout .btn{width:100%;text-align:center;}.product-doors .product-form{width:100%;}}
/* lost your download: a quiet band, one field, one button */
.resend{border-top:1px solid var(--line);}
.resend-heading{font-size:22px;margin:0 0 .3em;}
.resend-intro{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;}
.resend-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.resend-input{flex:1 1 220px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink);}
.resend-done{display:none;font-size:14px;color:var(--ink);margin:12px 0 0;}
.resend-done:target{display:block;}
@media (max-width:799px){.product-grid{grid-template-columns:1fr;}.product-media{max-width:440px;}}
@media (max-width:599px){.product-btn{width:100%;}.product-form{width:100%;}}

/* inherits:TRUE, and it is load-bearing. The lit marker is a ::before, and a
   registered property that does not inherit is NOT visible to a pseudo-element
   — it reads the initial value instead of the animated one, so the marker
   would have been permanently invisible while the link's own colour changed.
   Found by reading the computed style of the pseudo, not by looking at it. */
@property --pp-on{syntax:"<number>";inherits:true;initial-value:0;}
@property --pp-off{syntax:"<number>";inherits:true;initial-value:0;}
@keyframes pp-spy-on{from{--pp-on:0;}to{--pp-on:1;}}
@keyframes pp-spy-off{from{--pp-off:0;}to{--pp-off:1;}}
@supports (animation-timeline: view()){
  @media (min-width:1100px){
    /* The nav is pinned, so a heading disappears when it passes UNDER it, not
       when it reaches y=0 — without this inset every link lit one header's
       height too late. The inset shrinks the scrollport these timelines
       measure against by exactly the header. */
    .page-main h2[id]{view-timeline-inset:var(--header-h) auto;}
    .page-cols{timeline-scope:--pp-sec-1,--pp-sec-2,--pp-sec-3,--pp-sec-4,--pp-sec-5,--pp-sec-6,--pp-sec-7,--pp-sec-8,--pp-sec-9,--pp-sec-10,--pp-sec-11,--pp-sec-12;}
    .jumpnav-link{
      --pp-lit:clamp(0,var(--pp-on) - var(--pp-off),1);
      position:relative;
      animation:pp-spy-on linear both,pp-spy-off linear both;
      animation-range:exit 0% exit 100%,exit 0% exit 100%;
      color:color-mix(in srgb,var(--clay) calc(var(--pp-lit) * 100%),var(--ink-soft));
    }
    /* the lit marker: a clay rule in the nav's own hairline gutter */
    .jumpnav-link::before{
      content:'';position:absolute;left:-19px;top:2px;bottom:2px;width:2px;
      background:var(--clay);opacity:var(--pp-lit);
    }
    .jumpnav-list li:nth-child(1) .jumpnav-link{animation-timeline:--pp-sec-1,--pp-sec-2;}
    .jumpnav-list li:nth-child(2) .jumpnav-link{animation-timeline:--pp-sec-2,--pp-sec-3;}
    .jumpnav-list li:nth-child(3) .jumpnav-link{animation-timeline:--pp-sec-3,--pp-sec-4;}
    .jumpnav-list li:nth-child(4) .jumpnav-link{animation-timeline:--pp-sec-4,--pp-sec-5;}
    .jumpnav-list li:nth-child(5) .jumpnav-link{animation-timeline:--pp-sec-5,--pp-sec-6;}
    .jumpnav-list li:nth-child(6) .jumpnav-link{animation-timeline:--pp-sec-6,--pp-sec-7;}
    .jumpnav-list li:nth-child(7) .jumpnav-link{animation-timeline:--pp-sec-7,--pp-sec-8;}
    .jumpnav-list li:nth-child(8) .jumpnav-link{animation-timeline:--pp-sec-8,--pp-sec-9;}
    .jumpnav-list li:nth-child(9) .jumpnav-link{animation-timeline:--pp-sec-9,--pp-sec-10;}
    .jumpnav-list li:nth-child(10) .jumpnav-link{animation-timeline:--pp-sec-10,--pp-sec-11;}
    .jumpnav-list li:nth-child(11) .jumpnav-link{animation-timeline:--pp-sec-11,--pp-sec-12;}
    .jumpnav-list li:nth-child(12) .jumpnav-link{animation-timeline:--pp-sec-12,--pp-sec-13;}
  }
}

/* A picture arrives rather than appearing. Opacity never goes below .45, so a
   failure of any kind still leaves the photograph readable — a decorative
   reveal must never be the reason something can't be seen. Only opacity and
   transform, both compositor properties. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* EVERY PHOTOGRAPH ARRIVES, NOT JUST THE ONES IN A PHOTO BLOCK.
       This was scoped to .block--photo img, and the home page has ZERO photo
       blocks — its nineteen pictures are the hero, five split-feature figures
       and seven card photos — so the reveal written for photographs reached
       none of them. Measured: zero running animations on the whole page. That
       was a scoping bug, not a design decision.

       THE lazy GATE IS LOAD-BEARING AND IS NOT A STYLE CHOICE. isLeadSize
       marks any image declaring 50vw or 480px and up, and both .feature-media
       (100vw below 900px) and .card-media (100vw below 600px) qualify — 17 of
       this page's 19 pictures are lead candidates. Animating the one the
       publisher promoted would put a reveal on the LCP element. promoteLeadImage
       swaps loading="lazy" for fetchpriority="high", so an image that still
       SAYS lazy is, by construction and on every page, not this page's lead.
       Nothing new to remember and nothing to keep in sync: the attribute the
       publisher already writes is the whole condition. It also fixes the same
       latent bug for a photo block that happens to lead its page. */
    .block--photo img[loading="lazy"],
    .feature-media img[loading="lazy"],
    .card-media img[loading="lazy"],
    .cta-media img[loading="lazy"]{
      animation:pp-rise linear both;
      animation-timeline:view();
      animation-range:entry 12% entry 72%;
    }
    @keyframes pp-rise{from{opacity:.45;transform:translateY(12px) scale(.99);}to{opacity:1;transform:none;}}
  }
  .jumpnav-link{transition:color .18s ease,transform .18s ease;}
  .jumpnav-link:hover{transform:translateX(2px);}
}

/* Under the header (50) and its menus (60/70), above the page and a pinned
   action bar (20) — a promo must never cover the navigation. */
.promo{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:40;width:min(340px,calc(100vw - 24px));}
.promo-dismiss{position:absolute;right:0;top:0;width:44px;height:44px;margin:0;padding:0;opacity:0;cursor:pointer;z-index:2;appearance:none;-webkit-appearance:none;border:0;}
.promo-card{position:relative;overflow:hidden;border-radius:20px 20px 20px 6px;box-shadow:0 18px 44px rgba(46,42,35,.22);border:1px solid var(--line);}
.promo-media{margin:0;}
.promo-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.promo-body{padding:16px 18px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.promo-eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.promo-heading{margin:0;font-family:var(--font-serif);font-size:19px;line-height:1.28;font-weight:600;text-wrap:balance;}
.promo-text{margin:0;font-size:14px;line-height:1.55;}
.promo-btn{margin-top:4px;padding:10px 20px;font-size:14px;}
/* The x is decorative; the invisible input above it is the real target, so a
   keyboard reaches it and the focus ring lands on the mark. */
.promo-x{position:absolute;right:8px;top:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;line-height:1;pointer-events:none;background:rgba(248,245,238,.9);color:var(--ink);box-shadow:0 1px 6px rgba(46,42,35,.18);}
.promo-dismiss:hover + .promo-card .promo-x{background:var(--paper);}
.promo-dismiss:focus-visible + .promo-card .promo-x{outline:2px solid var(--clay);outline-offset:2px;}
.promo:has(.promo-dismiss:checked){display:none;}
/* tones */
.promo--sand .promo-card{background:var(--sand);}
.promo--sand .promo-eyebrow{color:var(--clay);}
.promo--sand .promo-heading{color:var(--ink);}
.promo--sand .promo-text{color:var(--ink-soft);}
.promo--sand .promo-btn{background:var(--clay);color:var(--paper);}
.promo--sand .promo-btn:hover{background:var(--clay-dark);color:var(--paper);}
.promo--sage .promo-card{background:var(--sage);border-color:var(--sage-dark);}
.promo--sage .promo-eyebrow{color:var(--sage-mist);}
.promo--sage .promo-heading{color:var(--cream);}
.promo--sage .promo-text{color:var(--sage-mist);}
.promo--sage .promo-btn{background:var(--cream);color:var(--ink);}
.promo--sage .promo-btn:hover{background:var(--paper);color:var(--ink);}
.promo--ink .promo-card{background:var(--ink);border-color:var(--ink-warm);}
.promo--ink .promo-eyebrow{color:var(--clay-mist);}
.promo--ink .promo-heading{color:var(--cream);}
.promo--ink .promo-text{color:var(--stone);}
.promo--ink .promo-btn{background:var(--clay-bright);color:#fff;}
.promo--ink .promo-btn:hover{background:var(--clay);color:#fff;}

/* On a phone it is a bar across the foot, not a card in a corner: 340px of
   card in a 375px screen IS the screen. The picture becomes a thumbnail and
   the whole thing stays about one thumb tall, so it covers a line of the
   page rather than a paragraph of it. */
@media (max-width:599px){
  .promo{right:8px;left:8px;bottom:8px;width:auto;}
  .promo-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border-radius:16px 16px 16px 6px;}
  .promo-media{width:56px;}
  .promo-media img{width:56px;height:56px;aspect-ratio:1;border-radius:10px;}
  .promo-body{padding:0;gap:4px;padding-right:26px;}
  .promo-heading{font-size:15.5px;}
  .promo-text{display:none;}
  .promo-btn{margin-top:2px;padding:8px 16px;font-size:13.5px;}
  .promo-x{right:4px;top:4px;width:24px;height:24px;font-size:16px;}
  .promo-dismiss{width:34px;height:34px;}
}

/* The arrival, and the retreat. Held to opacity and transform (compositor
   properties), plus a discrete visibility step so the card cannot swallow a
   click on the page behind it while it is not there. scroll(root block) is
   the whole document, so these are shares of the page rather than a pixel
   count that would mean one thing on a 700px page and another on a 7,000px
   one.

   IT LEAVES AGAIN OVER THE LAST TENTH, and that is a rule about the footer,
   not a flourish: the footer carries the license line and the crisis notice,
   which this template treats as non-negotiable on every page and publish
   refuses a config without. A card parked over them is the one place a promo
   is not allowed to be — and on a phone, where it is a full-width bar, it
   would cover exactly that. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .promo-card{animation:pp-promo linear both;animation-timeline:scroll(root block);}
    @keyframes pp-promo{
      0%{opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);}
      14%{opacity:1;visibility:visible;transform:none;}
      88%{opacity:1;visibility:visible;transform:none;}
      100%{opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);}
    }
  }
}

@media (min-width:900px){
  .card-grid-items--lead{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;}
  .card-grid-items--lead-2 > .card:first-child{grid-row:span 2;}
  .card-grid-items--lead-3 > .card:first-child{grid-row:span 3;}
  .card-grid-items--lead-4 > .card:first-child{grid-row:span 4;}
  .card-grid-items--lead > .card:first-child .card-media img{aspect-ratio:16/10;}
  .card-grid-items--lead > .card:first-child .card-body{padding:30px 36px 34px;gap:10px;}
  .card-grid-items--lead > .card:first-child .card-title{font-size:clamp(26px,2.3vw,34px);line-height:1.16;font-weight:500;}
  .card-grid-items--lead > .card:first-child .card-text{font-size:16px;line-height:1.65;-webkit-line-clamp:4;}
  .card-grid-items--lead > .card:not(:first-child){display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);}
  .card-grid-items--lead > .card:not(:first-child) .card-media{height:100%;}
  .card-grid-items--lead > .card:not(:first-child) .card-media img{height:100%;aspect-ratio:auto;min-height:190px;}
  .card-grid-items--lead > .card:not(:first-child) .card-body{padding:22px 24px;justify-content:center;}
  .card-grid-items--lead > .card:not(:first-child) .card-title{font-size:19px;}
}
@media (min-width:600px) and (max-width:899px){
  .card-grid-items--lead > .card:first-child{grid-column:1 / -1;}
  .card-grid-items--lead > .card:first-child .card-media img{aspect-ratio:16/9;}
  .card-grid-items--lead > .card:first-child .card-title{font-size:26px;line-height:1.2;}
}
@media (max-width:599px){
  .card-grid-items--lead > .card:first-child .card-title{font-size:24px;line-height:1.2;}
  .card-grid-items--lead > .card:not(:first-child){display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);}
  .card-grid-items--lead > .card:not(:first-child) .card-media{height:100%;}
  .card-grid-items--lead > .card:not(:first-child) .card-media img{height:100%;aspect-ratio:auto;min-height:150px;}
  .card-grid-items--lead > .card:not(:first-child) .card-body{padding:16px 18px;gap:6px;}
  .card-grid-items--lead > .card:not(:first-child) .card-title{font-size:17px;}
  .card-grid-items--lead > .card:not(:first-child) .card-text{display:none;}
}

.card-filter{border:0;margin:0 0 30px;padding:0;min-width:0;}
.card-filter-legend{padding:0;margin:0 0 12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);}
.card-filter-options{display:flex;flex-wrap:wrap;gap:8px 8px;}
.card-filter-input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;}
.card-filter-pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 12px 7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;line-height:1.25;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
.card-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--cream);font-size:12px;font-weight:700;color:var(--ink-mute);font-variant-numeric:tabular-nums;transition:inherit;}
.card-filter-pill:hover{border-color:var(--sage);color:var(--sage-dark);}
.card-filter-input:checked + .card-filter-pill{background:var(--sage-dark);border-color:var(--sage-dark);color:var(--cream);}
.card-filter-input:checked + .card-filter-pill .card-filter-count{background:rgba(241,236,223,.18);color:var(--cream);}
.card-filter-input:focus-visible + .card-filter-pill{outline:2px solid var(--clay);outline-offset:3px;}
a.card-filter-pill{text-decoration:none;}
a.card-filter-pill[aria-current="page"]{background:var(--sage-dark);border-color:var(--sage-dark);color:var(--cream);}
a.card-filter-pill[aria-current="page"] .card-filter-count{background:rgba(241,236,223,.18);color:var(--cream);}
.block--topic-nav{padding-block:clamp(26px,3vw,40px) 0;}
.block--topic-nav .card-filter{margin:0;}
@media (max-width:599px){
  .card-filter-options{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scrollbar-width:none;scroll-padding-inline:var(--gutter);}
  .card-filter-options::-webkit-scrollbar{display:none;}
  .card-filter-pill{flex:none;}
}
@supports not selector(:has(*)){fieldset.card-filter{display:none;}}
.card-grid--filter:has(.card-filter-input[data-f="1"]:checked) .card:not([data-topics~="1"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="2"]:checked) .card:not([data-topics~="2"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="3"]:checked) .card:not([data-topics~="3"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="4"]:checked) .card:not([data-topics~="4"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="5"]:checked) .card:not([data-topics~="5"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="6"]:checked) .card:not([data-topics~="6"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="7"]:checked) .card:not([data-topics~="7"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="8"]:checked) .card:not([data-topics~="8"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="9"]:checked) .card:not([data-topics~="9"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="10"]:checked) .card:not([data-topics~="10"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="11"]:checked) .card:not([data-topics~="11"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="12"]:checked) .card:not([data-topics~="12"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="13"]:checked) .card:not([data-topics~="13"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="14"]:checked) .card:not([data-topics~="14"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="15"]:checked) .card:not([data-topics~="15"]){display:none;}
.card-grid--filter:has(.card-filter-input[data-f="16"]:checked) .card:not([data-topics~="16"]){display:none;}
@supports (mask-composite: add) and selector(:has(*)){main.seams--wash > .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal),main.seams--wash > .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal){border-top:0;border-bottom:0;--wash:clamp(28px,4vw,64px);--air:clamp(44px,5vw,72px);--ramp-top:linear-gradient(to bottom,rgba(0,0,0,0.000) 0%,rgba(0,0,0,0.020) 14%,rgba(0,0,0,0.090) 28%,rgba(0,0,0,0.240) 42%,rgba(0,0,0,0.460) 56%,rgba(0,0,0,0.690) 70%,rgba(0,0,0,0.890) 85%,rgba(0,0,0,1.000) 100%);--ramp-bottom:linear-gradient(to bottom,rgba(0,0,0,1.000) 0%,rgba(0,0,0,0.980) 14%,rgba(0,0,0,0.910) 28%,rgba(0,0,0,0.760) 42%,rgba(0,0,0,0.540) 56%,rgba(0,0,0,0.310) 70%,rgba(0,0,0,0.110) 85%,rgba(0,0,0,0.000) 100%);mask-image:var(--ramp-top),linear-gradient(black,black),var(--ramp-bottom);mask-size:100% var(--wash),100% max(0px,calc(100% - (var(--wash) * 2) + 2px)),100% var(--wash);mask-position:left top,left calc(var(--wash) - 1px),left bottom;mask-repeat:no-repeat,no-repeat,no-repeat;mask-composite:add;padding-block:calc(var(--air) + var(--wash));}main.seams--wash > :is(.block--cards:has(> :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal)),.block--feature:has(> :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)),:is(.block--logos-cream,.block--logos-sand)) + .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal),main.seams--wash > :is(.block--cards:has(> :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal)),.block--feature:has(> :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)),:is(.block--logos-cream,.block--logos-sand)) + .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal){margin-top:calc(-1 * var(--wash));}main.seams--wash > .block--cards:has(+ .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal), + .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)) > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal),main.seams--wash > .block--feature:has(+ .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal), + .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)) > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal){--ramp-bottom:linear-gradient(black,black);}main.seams--wash > :is(.block--logos-cream,.block--logos-sand):has(+ .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal), + .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)){border-bottom:0;padding-bottom:calc(var(--gap) + clamp(28px,4vw,64px));}main.seams--wash > .block--feature:has(> .feature--sand):has(+ .block--cards > .card-grid--sand) > .feature,main.seams--wash > .block--feature:has(> .feature--cream):has(+ .block--cards > .card-grid--cream) > .feature{padding-bottom:clamp(34px,4vw,50px);}main.seams--wash > .block--feature:has(> .feature--sand) + .block--cards:has(> .card-grid--sand) > .card-grid,main.seams--wash > .block--feature:has(> .feature--cream) + .block--cards:has(> .card-grid--cream) > .card-grid{--ramp-top:linear-gradient(black,black);margin-top:0;padding-top:0;}}main.seams--sheets > .block--cards > :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal),main.seams--sheets > .block--feature > :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal){border-top:0;border-bottom:0;border-radius:clamp(20px,2.6vw,40px);box-shadow:0 1px 2px rgba(74,60,44,.05),0 10px 26px -20px rgba(74,60,44,.45);}main.seams--sheets > .block--cards:has(> :is(.card-grid--cream,.card-grid--sand,.card-grid--wheat,.card-grid--olive,.card-grid--blush,.card-grid--mist,.card-grid--sage,.card-grid--ink,.card-grid--clay,.card-grid--teal)),main.seams--sheets > .block--feature:has(> :is(.feature--cream,.feature--sand,.feature--wheat,.feature--olive,.feature--blush,.feature--mist,.feature--sage,.feature--ink,.feature--clay,.feature--teal)){padding-inline:clamp(10px,1.4vw,20px);padding-block:clamp(5px,.7vw,10px);}main.seams--sheets > .block--feature:has(> .feature--sand):has(+ .block--cards > .card-grid--sand),main.seams--sheets > .block--feature:has(> .feature--cream):has(+ .block--cards > .card-grid--cream){padding-bottom:0;}main.seams--sheets > .block--feature:has(> .feature--sand):has(+ .block--cards > .card-grid--sand) > .feature,main.seams--sheets > .block--feature:has(> .feature--cream):has(+ .block--cards > .card-grid--cream) > .feature{border-bottom-left-radius:0;border-bottom-right-radius:0;clip-path:inset(-40px -40px 0 -40px);}main.seams--sheets > .block--feature:has(> .feature--sand) + .block--cards:has(> .card-grid--sand),main.seams--sheets > .block--feature:has(> .feature--cream) + .block--cards:has(> .card-grid--cream){padding-top:0;}main.seams--sheets > .block--feature:has(> .feature--sand) + .block--cards:has(> .card-grid--sand) > .card-grid,main.seams--sheets > .block--feature:has(> .feature--cream) + .block--cards:has(> .card-grid--cream) > .card-grid{border-top-left-radius:0;border-top-right-radius:0;clip-path:inset(0 -40px -40px -40px);}