/* V9 "Old Look" (2026-09-17): rebuilt from scratch to match mishaglouberman.com's Squarespace
   design, measured from the live site 2026-09-17, plus Montana Fisher-Shotton's Looms of 2026-09-16:
   straight section edges (no angled dividers, no white gaps), one button size everywhere,
   clear heading hierarchy, consistent yellow-circle headshots, no stray all-caps.
   Component rules live in DESIGN.md. Use only these components; do not add one-off styles in pages. */
:root{
  --teal:#00AD96;          /* live site accent, rgb(0,173,150) */
  --teal-deep:#00897A;     /* teal text on white/stone (contrast) */
  --ink:#182930;           /* live site dark, rgb(24,41,48) */
  --ink-soft:#3E525A;
  --stone:#EBEADF;         /* live site light band, rgb(235,234,223) */
  --butter:#FFDC8A;        /* live site page-title band (Testimonials) */
  --slate:#2E4A5A;         /* title colour on butter */
  --gold:#E9C46A;          /* headshot circle */
  --white:#FFFFFF;
  --line:#D5D3C6;
  --f-head:"Raleway","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --measure:43rem;        /* 688px = the live site's own text block, ~72 characters. 52rem gave 89. */
  --wide:80rem;           /* 1280px = the live site's page width, measured 2026-09-18 */
  --gutter:clamp(1rem,4vw,2.5rem);
  --pad:clamp(2.6rem,6vw,5rem);       /* lowered 2026-09-21 on Misha's "happy with that": 6.5rem was ~104px above AND below all 15 home bands */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.55;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:600}
a{color:var(--teal-deep);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- type scale: three heading levels, clearly different ---------- */
h1,h2,h3{font-family:var(--f-head);color:var(--ink);font-weight:500;text-wrap:balance;margin:0 0 .6em;letter-spacing:0}
/* The live site steps every level by about 1.4x (H1 4.4 / H2 3.2 / H3 2.3 / H4 1.6, measured
   from its theme CSS 2026-09-18). V9's steps were flatter, which is what Amanda meant by
   "it all kind of feels on the same level" (2026-09-18). Restored to the old site's ratio. */
h1{font-size:clamp(2.4rem,4.8vw,3.85rem);line-height:1.09}
h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.1}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.17;font-weight:500}
p,li{text-wrap:pretty}

/* ---------- header ---------- */
.site-header{background:var(--teal);color:var(--ink)}
.site-header .bar{max-width:80rem;margin:0 auto;min-height:98px;padding:.9rem var(--gutter);display:flex;align-items:center;gap:.8rem 2rem;flex-wrap:wrap;justify-content:space-between}
.wordmark{font-family:var(--f-head);font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--ink);text-decoration:none;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.2;display:flex;flex-direction:column}
.wordmark .with{font-weight:600;text-transform:none;letter-spacing:.04em;font-size:.82em}
.wordmark:hover{color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.7rem;font-family:var(--f-head);font-weight:500;font-size:clamp(1rem,1.25vw,1.12rem)}
.nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding:.1rem 0}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav a.btn-call{border:1px solid var(--white);color:var(--white);border-radius:300px;padding:.8rem 1.15rem;font-family:var(--f-body);font-weight:500;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.nav a.btn-call:hover{background:var(--white);color:var(--ink)}

/* ---------- buttons: ONE size for every in-page button ---------- */
.btn{display:inline-block;background:var(--teal);color:var(--white);border:2px solid var(--teal);border-radius:300px;padding:1rem 2.2rem;font-family:var(--f-head);font-weight:800;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;line-height:1.2;text-align:center}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.section.dark .btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.actions{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.actions.left{justify-content:flex-start}

/* ---------- sections: full-width bands, straight edges, no gaps ---------- */
.section{padding:var(--pad) var(--gutter)}
.section.white{background:var(--white)}
.section.stone{background:var(--stone)}
.section.dark{background:var(--ink);color:var(--white)}
.section.butter{background:var(--butter)}
.section.dark h2,.section.dark h3{color:var(--white)}
.section.dark a:not(.btn){color:#7FE0D1}
.inner{max-width:var(--measure);margin:0 auto}
.inner.wide{max-width:var(--wide)}
.center{text-align:center}
.section-title{text-align:center;margin-bottom:1.4rem}
.intro{text-align:center;max-width:48rem;margin:0 auto 2rem;color:var(--ink-soft);font-size:1.1rem}
.section.dark .intro{color:#D7E1E4}

/* ---------- home hero: white, centred, short ---------- */
.hero{padding:clamp(3rem,8vw,6rem) var(--gutter) clamp(2.5rem,6vw,4.5rem);text-align:center;background:var(--white)}
.hero .eyebrow{font-family:var(--f-head);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-soft);margin:0 auto 1rem;max-width:48rem}
.hero h1{max-width:20ch;margin:0 auto .5rem}
.hero .help-line{font-family:var(--f-head);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--teal-deep);margin:0 auto}

/* full-bleed photo, edge to edge */
.bleed{margin:0;line-height:0}
.bleed img{width:100%;height:clamp(16rem,42vw,34rem);object-fit:cover;object-position:50% 20%}

/* ---------- page title band (every inner page) ---------- */
.page-title{background:var(--grain-soft) 0 0/240px 240px,var(--stone);padding:clamp(3.4rem,7vw,5.5rem) var(--gutter) clamp(3rem,6vw,4.5rem);text-align:center;
  border-bottom:6px solid var(--gold)}
.page-title h1{color:var(--ink);font-weight:400;font-size:clamp(2.4rem,5.4vw,3.8rem);max-width:22ch;margin:0 auto}
.page-title .sub{font-family:var(--f-head);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ink-soft);max-width:36rem;margin:1.4rem auto 0}
.page-title .sub a{color:var(--teal-deep)}

/* ---------- media + text (old site's illustration/photo beside copy) ---------- */
.media{display:grid;gap:2rem 3.5rem;align-items:center;max-width:var(--wide);margin:0 auto}
@media (min-width:820px){
  .media{grid-template-columns:minmax(0,4.2fr) minmax(0,7fr)}
  .media.flip{grid-template-columns:minmax(0,7fr) minmax(0,4.2fr)}
  .media.flip>.pic{order:2}
  .media.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.media .pic img{width:100%;border-radius:10px;object-fit:cover;aspect-ratio:4/3}
.media .pic.tall img{aspect-ratio:4/5;object-position:50% 15%}
.media .pic.art img{border-radius:0;object-fit:contain;aspect-ratio:auto;max-width:24rem;margin:0 auto}
.media h2{text-align:left}

/* ---------- pull quote: clearly a different voice from the heading ---------- */
.pull{font-family:var(--f-head);font-weight:400;font-style:italic;font-size:clamp(1.25rem,2.1vw,1.55rem);line-height:1.35;color:var(--ink);border-left:4px solid var(--teal);padding:.2rem 0 .2rem 1.2rem;margin:0 0 1.4rem}
.section.dark .pull{color:var(--white)}

/* ---------- testimonial band (dark or stone; photo alternates sides) ---------- */
.tband{display:grid;gap:1.5rem 3rem;align-items:center;max-width:66rem;margin:0 auto}
.tband + .tband{margin-top:2.8rem}
@media (min-width:760px){.tband{grid-template-columns:minmax(0,1fr) 13rem}.tband.flip{grid-template-columns:13rem minmax(0,1fr)}.tband.flip .face{order:-1}}
.tband blockquote{margin:0;font-family:var(--f-head);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.45;text-align:center}
.tband blockquote strong{font-weight:700}
.tband .who{margin-top:1.1rem;font-family:var(--f-head);font-weight:700;font-size:1.02rem;text-align:center}
.tband .who small{display:block;font-family:var(--f-body);font-weight:300;font-size:.95rem;margin-top:.15rem}
.tband .who a{color:inherit}
.section.dark .tband .who small{color:#D7E1E4}
.face{width:13rem;max-width:60vw;justify-self:center;aspect-ratio:1}
.tband.long blockquote{font-size:clamp(1.05rem,1.5vw,1.2rem)}
@media (max-width:759px){.tband .face{order:-1;width:9.5rem}.media .pic.art img{max-width:13rem}}

/* ---------- testimonial slider ---------- */
.slider{max-width:58rem;margin:0 auto;position:relative}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.slides::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;padding:0 .25rem}
.slider-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.8rem}
.slider-controls button{width:3rem;height:3rem;border-radius:50%;border:2px solid var(--teal);background:transparent;color:var(--teal-deep);font-size:1.3rem;line-height:1;cursor:pointer}
.slider-controls button:hover{background:var(--teal);color:var(--white)}
.section.dark .slider-controls button{color:var(--white)}
.dots{display:flex;gap:.5rem}
.dots span{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--teal)}

/* ---------- principles: four big lines ---------- */
.p4big{max-width:46rem;margin:0 auto}
.p4big p{font-family:var(--f-head);font-weight:500;font-size:clamp(1.4rem,2.9vw,2rem);line-height:1.2;margin:0 0 .55rem;text-align:center;text-wrap:balance}

/* ---------- check list (old site's "How I help clients"), items aligned ---------- */
.checks{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:1rem}
.checks li{display:grid;grid-template-columns:1.6rem 1fr;align-items:baseline}
.checks li::before{content:"\2713";color:var(--teal-deep);font-weight:700}
.checks li strong{font-weight:600}

/* ---------- card grid: writing, conferences (image, title, line, link) ---------- */
.cards{display:grid;gap:2rem;max-width:var(--wide);margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:10px;overflow:hidden}
.section.white .card{background:var(--stone)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card .body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card h3{margin:0;font-size:clamp(1.15rem,1.6vw,1.35rem)}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--teal-deep)}
.card p{font-size:.98rem;color:var(--ink-soft)}
.card .go{margin-top:auto;font-family:var(--f-head);font-weight:700;font-size:.95rem}

/* ---------- two lists side by side ---------- */
.twolists{display:grid;gap:1.5rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.5rem 0}
.twolists h3{font-size:1.05rem}
.twolists ul,.inner>ul{margin:0;padding-left:1.2rem}
.twolists li,.inner>ul li{margin:.3rem 0}
li::marker{color:var(--teal-deep)}

/* ---------- clients list ---------- */
.clients{columns:2;column-gap:2rem;list-style:none;padding:0;margin:0 auto;max-width:60rem;font-size:.98rem}
@media (min-width:720px){.clients{columns:3}}
.clients li{break-inside:avoid;padding:.2rem 0}

/* ---------- press quotes (old site's teal Trampoline Hall cards) ---------- */
.press{display:grid;gap:1rem}
.press figure{margin:0;background:var(--teal);color:var(--white);border-radius:24px;padding:1.2rem 1.4rem;text-align:center}
.press blockquote{margin:0;font-style:italic;font-weight:400}
.press figcaption{font-family:var(--f-head);font-weight:700;margin-top:.5rem}

/* ---------- ad ---------- */
.ad{max-width:22rem;margin:0 auto;box-shadow:0 10px 30px rgba(24,41,48,.2)}
.ad a{display:block}
.adwrap{display:grid;gap:2.5rem;max-width:var(--wide);margin:0 auto;align-items:start}
@media (min-width:820px){.adwrap{grid-template-columns:20rem 1fr}}
.adtext{font-family:var(--f-body);font-weight:300;line-height:1.6;max-width:36rem}
.adtext p{margin:0 0 .9em}
.adtext .hook{font-family:var(--f-head);font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.35;font-weight:500}

/* ---------- essay page ---------- */
.essay{max-width:var(--measure);margin:0 auto}
.essay h2{margin-top:2.4rem}
.essay .callout{background:var(--stone);border-left:4px solid var(--teal);padding:1.1rem 1.3rem;margin:1.5rem 0;font-family:var(--f-head);font-weight:500;font-size:1.15rem}

/* ---------- about ---------- */
.portrait{width:100%;border-radius:10px;aspect-ratio:4/5;object-fit:cover}
.book{display:grid;gap:2rem;align-items:center;max-width:60rem;margin:0 auto}
@media (min-width:720px){.book{grid-template-columns:13rem 1fr}}
.book img{width:100%;box-shadow:0 10px 30px rgba(24,41,48,.18)}

/* ---------- footer (old site's dark footer) ---------- */
.site-footer{background:var(--ink);color:#D7E1E4;padding:clamp(3rem,6vw,4.5rem) var(--gutter) 2rem;font-size:.95rem}
.site-footer .grid{max-width:var(--wide);margin:0 auto;display:grid;gap:2.5rem;align-items:start}
@media (min-width:820px){.site-footer .grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}}
.site-footer .mark{font-family:var(--f-head);font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--white);font-size:1.05rem;line-height:1.25;margin:0 0 .8rem}
.site-footer .mark .with{display:block;text-transform:none;letter-spacing:.04em;font-weight:600;font-size:.85em;color:#7FE0D1}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.site-footer a{color:#D7E1E4;text-decoration:none;font-family:var(--f-head);font-weight:500}
.site-footer a:hover{color:var(--white);text-decoration:underline}
.site-footer a.btn{margin-top:1.4rem;color:var(--white);font-family:var(--f-head);font-weight:800}
.site-footer a.btn:hover{text-decoration:none;background:var(--white);border-color:var(--white);color:var(--ink)}
.site-footer .base{max-width:var(--wide);margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid #34474F;font-size:.85rem;text-align:center;color:#9FB0B6}

/* ---------- small screens ---------- */
@media (max-width:700px){
  .site-header .bar{flex-direction:column;align-items:flex-start;min-height:0}
  .nav{gap:.35rem 1.1rem}
  .media h2{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- draft chrome (not part of the design) ---------- */
.draft-tag{position:fixed;right:.75rem;bottom:.75rem;z-index:50;background:var(--ink);color:var(--white);font:500 .72rem/1.2 var(--f-body);letter-spacing:.04em;padding:.5rem .7rem;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 1.5rem)}
.draft-tag a{color:var(--gold)}
.draft-tag button{font:inherit;background:transparent;color:var(--white);border:1px solid #5b6f77;border-radius:4px;padding:.2rem .45rem;cursor:pointer}
.draft-tag button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal)}
body.show-src .mw{background:rgba(0,173,150,.16);box-shadow:inset 0 -2px 0 var(--teal)}
body.show-src .new{background:rgba(255,140,40,.2);box-shadow:inset 0 -2px 0 #E07A1F}
body.show-src .mw,body.show-src .new{cursor:help}
.src-legend{display:none}
body.show-src .src-legend{display:inline}
.flag{display:none}
body.show-src .flag{display:block;background:#FFF3C4;border:1px dashed rgba(24,41,48,.4);color:var(--ink);border-radius:4px;padding:.45rem .7rem;font:400 .82rem/1.4 var(--f-body);margin:.6rem auto;max-width:44rem;text-align:left}
.changes table{border-collapse:collapse;width:100%;font-size:.95rem}
.changes th,.changes td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.changes th{font-family:var(--f-head);font-weight:600;background:var(--stone)}
.changes .tw{overflow-x:auto}

/* lead paragraph: larger opening text, no rule */
.lead{font-family:var(--f-head);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.35;color:var(--ink);margin-bottom:1rem}
.section.dark .lead{color:var(--white)}

/* ---------- about.html / coaching.html additions (2026-09-17) ---------- */
/* testimonial with no headshot: one centred column (DESIGN: "Without a face: omit the img; it centres") */
.tband:not(:has(.face)){grid-template-columns:minmax(0,1fr);max-width:46rem}
/* two photos stacked beside text (old About page) */
.media .pic.stack{display:grid;gap:1rem}
.media .pic.stack img{aspect-ratio:3/2}
/* a media row that follows a text block in the same band */
.inner + .media{margin-top:2.5rem}
/* press cards in a row (about.html book section, trampoline-hall.html) */
.press.press-row{max-width:60rem;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.press-row figure{display:flex;flex-direction:column;justify-content:center}
.book + .press-row{margin-top:2.5rem}

/* ---------- how-i-help.html + principles.html (2026-09-17): breathing room ---------- */
.inner>ul{margin-bottom:1.6rem}
.p4big + .intro{margin-top:2rem}
/* spacing when a centred text block sits above a testimonial or the ad (about.html, wip.html) */
.inner + .tband,.inner + .adwrap{margin-top:2.2rem}
.media .pic.stack img{object-position:50% 20%}
@media (min-width:820px){.adwrap .ad{position:sticky;top:1.5rem}}

/* Montana's logo, Design Concept #1, right-justified (concepts PDF 2026-09-08; chosen 2026-09-10).
   Rebuilt as text in Montserrat until she sends exported files. */
.wordmark{font-family:"Montserrat",var(--f-head);letter-spacing:0;text-transform:uppercase;align-items:flex-end;gap:.05rem}
.wordmark .wm-top{font-weight:800;color:#000;font-size:clamp(1.02rem,1.55vw,1.3rem);line-height:1.1}
.wordmark .wm-sub{text-transform:none;font-weight:700;color:var(--white);font-size:clamp(.95rem,1.4vw,1.18rem);line-height:1.1}
.wordmark .wm-sub i{font-weight:300;font-style:italic}
/* footer: the same logo as the header, left-aligned on dark (Montana 2026-09-10: "use the same logo as the header and adjust the layout") */
.site-footer .foot-mark{align-items:flex-start;margin:0 0 1rem}
.site-footer .foot-mark .wm-top{color:var(--white)}
.site-footer .foot-mark .wm-sub{color:#7FE0D1}

/* ================= 2026-09-18 panel revision (V10) ================= */

/* Four principles: numerals and air, so the block stops reading as one paragraph
   (Amanda + Sam, 2026-09-18). No copy is added under the lines: Misha's rule is
   "one text, big letters, no explanations" (Loom #2, 2026-09-13). CSS only, so a
   one-line revert restores the centred block if he prefers it. */
.p4big{counter-reset:p;max-width:44rem;margin-top:1.6rem}
.p4big p{display:grid;grid-template-columns:1.9rem 1fr;gap:.9rem;align-items:baseline;
  text-align:left;margin:0 0 1.1rem;font-size:clamp(1.15rem,1.9vw,1.55rem)}
.p4big p::before{counter-increment:p;content:counter(p);font-family:var(--f-head);
  font-weight:800;font-size:1em;color:var(--teal-deep)}

/* Contact form: native POST, no JavaScript, no captcha (Chuck's ask, 2026-09-18 call). */
.form{max-width:34rem;margin:0 auto;text-align:left;display:grid;gap:1.1rem}
.form label{display:grid;gap:.35rem;font-family:var(--f-head);font-weight:600;font-size:1rem}
.form input,.form textarea{font-family:var(--f-body);font-weight:300;font-size:1rem;
  color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:.75rem .85rem;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--teal);outline:3px solid var(--gold);outline-offset:1px}
.form textarea{min-height:9rem;resize:vertical}
.form button.btn{border:2px solid var(--teal);cursor:pointer;justify-self:start}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fallback{margin-top:1.4rem;text-align:center}

/* Small screens. Nobody had looked at this draft on a phone before 2026-09-18;
   Montana named mobile as the "unknown unknown" and Misha said "everybody's
   actually looking at it on their phones". */
@media (max-width:700px){
  .site-header .bar{flex-direction:column;align-items:stretch;gap:.9rem;min-height:0}
  .nav{gap:.6rem 1.25rem;justify-content:flex-start;font-size:1rem}
  .nav a.btn-call{width:100%;text-align:center;margin-top:.2rem}
  .p4big p{grid-template-columns:1.9rem 1fr;gap:.7rem}
  .form{max-width:none}
}

/* ============ 2026-09-18 design pass ============================================
   Misha: "make it look like a designer worked on it", using the live Squarespace
   site as the template. Everything below is copied from a device the live site
   already uses, measured from it, or asked for by Montana. No new visual language.
   ------------------------------------------------------------------------------ */

/* 1. EDITORIAL SPLIT. The live site runs text at 640-688px. In a 1280px band that
   leaves a narrow column floating in space, which is what Amanda saw as "a lot of
   negative space… it makes it look AI-generated". The live bio page solves it by
   putting something in the other column. Where there is no photo, the heading goes
   there instead: heading left, body right, both at a sane measure. */
.split{max-width:var(--wide);margin:0 auto;display:grid;gap:1rem 3.5rem}
@media (min-width:880px){
  .split{grid-template-columns:minmax(0,3fr) minmax(0,8fr);align-items:start}
  /* headings used to be position:sticky here; removed 2026-09-28, the sliding read as odd */
}
.split h2{text-align:left;margin:0}
.split .body{max-width:var(--measure)}
.split .side{color:var(--ink-soft);font-size:.98rem}

/* 2. BOLD LEAD-INS. The live About page opens each paragraph with its first
   sentence in bold ("Work can feel better than you think. Too many workplaces…"),
   and the live testimonials bold the phrase that carries the quote. It is the
   site's own way of directing the eye inside a block of text, which is exactly
   what Amanda said was missing ("direct me more"). It emphasises Misha's words;
   it never changes them. */
.lead-in{font-weight:600;color:var(--ink)}
.section.dark .lead-in{color:var(--white)}

/* 3. PHOTO CLUSTERS. The live site varies how many pictures a section gets: one,
   two stacked, three stacked, a four-across strip. V9 gave every section exactly
   one photo in the same box, which is the monotony Amanda described: "image, copy
   that is big and then small. Image, copy, big and then small." */
.pic.stack2,.pic.stack3{display:grid;gap:.9rem}
.pic.stack2 img,.pic.stack3 img{aspect-ratio:3/2;width:100%}
.pic.stack3 img:first-child{aspect-ratio:4/3}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;
       max-width:var(--wide);margin:2.4rem auto 0}
@media (min-width:820px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}

/* 4. HAIRLINE RULE. The live About page separates sections with a thin rule on one
   continuous background instead of a new colour band every time. Montana's
   "alternating backgrounds" note was about testimonials bleeding into each other,
   not about every text section needing its own colour. */
.rule{border:0;border-top:1px solid var(--line);max-width:var(--wide);
      margin:clamp(2.6rem,5vw,4rem) auto}
.section.dark .rule{border-top-color:#34474F}

/* 5. Quieter section titles when a band holds more than one idea. */
.section-title.tight{margin-bottom:.8rem}
.eyebrow-label{font-family:var(--f-head);font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 .6rem}
.section.dark .eyebrow-label{color:#7FE0D1}

@media (max-width:879px){
  .split{gap:.4rem}
  .split h2{margin-bottom:.4rem}
}

/* draft-only review index (pages.html); never deployed */
.pagelist{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.pagelist li{display:grid;grid-template-columns:minmax(0,1fr) 6rem;gap:.2rem 1rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line)}
.pagelist a{font-family:var(--f-head);font-weight:600;font-size:1.1rem;text-decoration:none}
.pagelist .w{font-family:var(--f-body);font-size:.85rem;color:var(--ink-soft);text-align:right;
  font-variant-numeric:tabular-nums}
.pagelist .n{grid-column:1/-1;font-size:.88rem;color:var(--ink-soft)}
@media (max-width:600px){.pagelist li{grid-template-columns:1fr}.pagelist .w{text-align:left}}

/* The ad, on its own page (Misha 2026-09-21: a page "for someone who's just a visitor
   who's like, this ad looks cool, I'd like to see what it says… make something that lets
   people read the ad in a way that maybe looks a little better"). The ad is set in one
   narrow column on the butter ground the printed page uses, with the two hook lines large
   and the sign-off small, so it reads as a piece of writing rather than a wall. */
.adpage{max-width:40rem;margin:0 auto}
.adpage .hook{font-family:var(--f-head);font-weight:500;font-size:clamp(1.45rem,2.6vw,1.95rem);
  line-height:1.25;margin:0 0 1rem;text-wrap:balance;color:var(--ink)}
.adpage p{font-size:1.05rem;line-height:1.65;margin:0 0 1.15em}
.adpage .close{font-family:var(--f-head);font-weight:500;font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.3;color:var(--teal-deep);margin:1.6rem 0 0}
.adpage .signoff{border-top:1px solid var(--line);margin-top:1.8rem;padding-top:1.2rem;
  font-size:.95rem;color:var(--ink-soft)}
.adpage .signoff .mark{font-family:var(--f-head);font-weight:700;color:var(--ink);
  display:block;margin-bottom:.4rem}
.adshot{max-width:19rem;margin:0 auto 2.4rem;box-shadow:0 10px 30px rgba(24,41,48,.2)}
.adshot a{display:block}

/* Home "How I help" (2026-09-28): heading, pull line and the one button sit in the
   left column so it carries weight; the paragraphs go right. Columns closer to even
   than the default split, and centred vertically, so neither side floats. */
@media (min-width:880px){
  .split.help{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
  .split.help > .side{position:static}
}
.split.help .side{color:inherit;font-size:inherit}
.split.help .side h2{margin-bottom:1.2rem}
.split.help .actions{margin-top:.4rem}

/* Home testimonial slider: slides line up centred, dots are real buttons. */
.slider{max-width:66rem}
.slides{align-items:center}
.slide .tband{margin:0 auto}
.dots button{width:.7rem;height:.7rem;padding:0;border:0;border-radius:50%;background:#56676E;cursor:pointer}
.dots button.on{background:var(--teal)}


/* ---------- Background depth (2026-09-28) ----------
   Montana: the flat stone and ink bands "lack depth". Two quiet treatments, pure CSS
   (no image files): a faint paper grain on stone (glows tried and dropped), and a soft teal light plus edge
   shading on dark. White bands stay flat so the page keeps its rhythm. Delete this
   block to go back to flat colour. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section.stone{
  background:
    var(--grain-soft) 0 0/240px 240px,
    var(--stone)}
.section.dark{
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%,rgba(0,173,150,.16),rgba(0,173,150,0) 60%),
    radial-gradient(ellipse 90% 80% at 100% 100%,rgba(6,16,20,.45),rgba(6,16,20,0) 65%),
    var(--grain) 0 0/240px 240px,
    var(--ink);
  background-blend-mode:normal,normal,overlay,normal}

/* Teal brush-stroke shape, reused under the podcast guest portrait (About). The
   headline underlines that also used it were removed 2026-09-29. */
:root{--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 62' preserveAspectRatio='none'%3E%3Cpath fill='%2300AD96' d='M2,30L12,20 22,11 32,13 62,13 162,13 202,11 222,10 242,9 262,9 282,8 302,9 312,8 322,7 342,6 362,5 382,4 402,3 422,2 442,2 446,3 432,17 422,21 412,23 402,25 392,27 382,28 372,30 362,31 352,33 342,34 332,35 322,36 302,37 272,39 252,41 232,42 222,43 252,44 292,44 312,44 322,42 327,43 312,60 272,60 222,59 122,59 82,59 68,59 72,50 82,41 92,40 112,38 132,37 152,35 172,33 192,31 212,30 232,28 252,27 272,26 292,24 312,23 318,22 302,21 292,22 282,22 262,23 242,24 222,25 202,25 182,26 162,26 142,27 122,27 102,28 62,28 22,28 12,29Z'/%3E%3C/svg%3E")}

/* ---------- Closing call-to-action as a dark spotlight card (2026-09-28) ----------
   The "Do you have an event…" band at the foot of each page was text floating on
   stone. It now sits in a navy card with the same teal light and grain as the dark
   bands, so the last ask on the page reads as the last ask. */
.cta-card{max-width:52rem;border-radius:18px;color:var(--white);
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,5vw,3.6rem);
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%,rgba(0,173,150,.22),rgba(0,173,150,0) 60%),
    radial-gradient(ellipse 90% 80% at 100% 100%,rgba(6,16,20,.5),rgba(6,16,20,0) 65%),
    var(--grain) 0 0/240px 240px,
    var(--ink);
  background-blend-mode:normal,normal,overlay,normal;
  box-shadow:0 22px 50px -18px rgba(24,41,48,.45),0 6px 16px -8px rgba(24,41,48,.3)}
.cta-card .section-title{color:var(--white);max-width:34rem;margin-left:auto;margin-right:auto}
.cta-card .intro{color:#D7E1E4;margin-bottom:0}
.cta-card .actions{margin-top:1.6rem}
.cta-card .btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}

/* ---------- Podcasts page as cards (2026-09-28) ----------
   Nine text-only entries were nine full-width bands of prose. Now one grid of
   cards like the home page's Substack cards: a kicker saying what kind of
   appearance it was, the title, the text unchanged, and "Listen" as a play pill. */
.pods{display:grid;gap:1.6rem;max-width:var(--wide);margin:0 auto;grid-template-columns:1fr}
@media (min-width:820px){.pods{grid-template-columns:repeat(2,minmax(0,1fr))}.pod.wide{grid-column:1/-1}}
.pod{padding:clamp(1.4rem,3vw,2rem);border-radius:14px;border-top:4px solid var(--teal)}
.pod .kicker{font-family:var(--f-head);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-deep);margin:0 0 .45rem}
.pod h3{font-size:clamp(1.3rem,2vw,1.55rem);margin:0 0 .8rem;text-align:left}
.pod-body p{font-size:1rem;color:var(--ink);margin:0 0 .9rem}
.pod-body p:last-child{margin-bottom:0}
.pod-body .checks{margin:.2rem 0 0;font-size:1rem}
.pod.wide .pod-body{columns:2 22rem;column-gap:2.5rem}
.pod.wide .pod-body p{break-inside:avoid}
a.listen{display:inline-flex;align-items:center;gap:.4em;margin-left:.2em;padding:.15em .75em .15em .55em;
  border-radius:300px;background:var(--teal);color:var(--white);font-family:var(--f-head);font-weight:700;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;vertical-align:.08em}
a.listen::before{content:"";width:0;height:0;border-style:solid;border-width:.32em 0 .32em .52em;border-color:transparent transparent transparent currentColor}
a.listen:hover{background:var(--ink);color:var(--white)}

/* About, "Other stuff I do" (2026-09-28): one tall portrait where two stacked photos were,
   about the same height as the pair (3:4). */
.media .pic.tall.portrait{max-width:19rem;justify-self:center;width:100%}
.media .pic.tall.portrait img{aspect-ratio:4/5;object-position:50% 20%}
/* A single podcast card standing on its own (About page): centred, text left-aligned. */
.pod.feature{max-width:40rem;margin:1.8rem auto 0;text-align:left}
.pod-body .pod-listen{margin-top:1.2rem}
.pod-listen a.listen{margin-left:0}

/* ---------- Featured podcast, headshot style (About page, 2026-09-28) ----------
   No box. Borrows the testimonial headshot: the guest's cutout on a gold circle over the
   teal brush stroke, with a play badge, with the episode beside it. The circle is the link. */
.pod-hs{display:grid;gap:1.6rem 3rem;align-items:center;max-width:52rem;margin:2.2rem auto 0;text-align:left}
@media (min-width:760px){.pod-hs{grid-template-columns:12rem minmax(0,1fr);align-items:start}.pod-hs-art{margin-top:-.35rem}}
.pod-hs-art{position:relative;display:block;width:12rem;max-width:60vw;aspect-ratio:1;justify-self:center;text-decoration:none}
.pod-hs-art::before{content:"";position:absolute;inset:4% 8% 14%;border-radius:50%;background:var(--gold);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pod-hs-art::after{content:"";position:absolute;left:0;right:0;bottom:4%;height:15%;background:var(--brush) no-repeat 0 0/100% 100%}
.pod-hs-art img{position:absolute;left:5%;width:90%;bottom:12%;height:auto}
.pod-hs-art::after{z-index:1}
.pod-hs-play{position:absolute;z-index:2;right:2%;top:58%;width:24%;aspect-ratio:1;box-shadow:0 0 0 4px var(--white);
  border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:background .2s}
.pod-hs-play::before{content:"";margin-left:12%;border-style:solid;border-width:.5rem 0 .5rem .8rem;
  border-color:transparent transparent transparent var(--white)}
.pod-hs-art:hover::before{transform:scale(1.04)}
.pod-hs-art:hover .pod-hs-play{background:var(--teal-deep)}
.pod-hs-show{font-family:var(--f-head);font-weight:600;font-size:.95rem;color:var(--teal-deep);margin:0 0 .3rem}
.pod-hs h3{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0 0 .7rem;text-align:left}
.pod-hs p{margin:0 0 .8rem}
.pod-hs .checks{margin:0}
@media (max-width:759px){.pod-hs{text-align:left}}
.pod-hs + .actions{margin-top:2.4rem}

/* About page (2026-09-28): shorter lines in the text columns, centred in their column so
   there's more white space either side. Images untouched. */
.narrow{max-width:32rem;margin-left:auto;margin-right:auto}
.split .body.narrow{max-width:34rem}
/* Book cover a touch larger. */
@media (min-width:720px){#book .book{grid-template-columns:16rem 1fr}}

/* Two side-by-side columns, photo on top and text below (home: offsite / online, 2026-09-28). */
.duo{display:grid;gap:2.8rem 3rem;max-width:var(--wide);margin:0 auto}
@media (min-width:760px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.duo-col img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin-bottom:1.5rem}
.duo-col h2{text-align:left;margin-bottom:.6rem}
.duo-col p{max-width:34rem}

/* Home "Why it's hard" (2026-09-28): dark band straight after the white hero so the two
   don't bleed together. Body text softened a touch, pull quote stays bright. */
.section.dark.why-hard p:not(.pull){color:#D7E1E4}
.section.dark.why-hard .pic img{box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}

/* Slider arrows (2026-09-28): drawn SVG arrows instead of text glyphs, so they sit dead
   centre in the circle regardless of font metrics. */
.slider-controls button[data-prev],.slider-controls button[data-next]{display:grid;place-items:center;padding:0}
.slider-controls button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* How I Help: "I'm not a meeting planner" on its own dark band (2026-09-28). */
.section.dark .inner > .pull{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:1.3rem}
.section.dark .after-pull{color:#D7E1E4;padding-left:1.45rem;margin:0}
.media .pic.tall.centre img{object-position:40% 60%}

/* A split pulled in to the middle of the band: eyebrow + heading left, shorter lines right
   (How I Help, "Know what you want to accomplish", 2026-09-28). */
.split.tight{max-width:52rem}
@media (min-width:880px){
  .split.tight{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:1rem 3.5rem}

}
.split.tight .body{max-width:31rem}
.split-head .eyebrow-label{margin-bottom:.5rem}


/* Page-title banner (2026-09-28): stone + grain and a thin gold band as the divider
   (a teal brush stroke under the title was tried and removed). Replaced the
   solid butter band; a gold circle behind the title was tried and dropped. */

/* Quiet text link centred under a slider (coaching, 2026-09-28). */
.more-link{text-align:center;margin:1.4rem 0 0;font-family:var(--f-head);font-weight:600;font-size:.95rem}
.more-link a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.05rem}
.section.dark .more-link a{color:#7FE0D1}
.section.dark .more-link a:hover{color:var(--white)}
.media .pic.tall.gatc img{object-position:44% 50%}
.media .pic.tall.laugh img{object-position:50% 30%}
.media .pic.tall.clipboard img{object-position:52% 40%}
.media .pic.tall.audience img{object-position:45% 50%}
.media .pic.tall.handshake img{object-position:17% 50%}
.media .pic.tall.portrait.flipchart img{object-position:20% 50%}

/* Two half-width bands side by side, light left / dark right (Principles: client vs
   attendee reasons, 2026-09-28). Stacks on phones. */
.halves{display:grid;grid-template-columns:1fr}
@media (min-width:820px){.halves{grid-template-columns:1fr 1fr}}
.half{padding:var(--pad) var(--gutter)}
.half-inner{max-width:30rem;margin:0 auto}
@media (min-width:820px){.half-light .half-inner{margin-right:clamp(1rem,4vw,4rem)}.half-dark .half-inner{margin-left:clamp(1rem,4vw,4rem)}}
.half-light{background:var(--white)}
.half-dark{color:var(--white);
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%,rgba(0,173,150,.16),rgba(0,173,150,0) 60%),
    radial-gradient(ellipse 90% 80% at 100% 100%,rgba(6,16,20,.45),rgba(6,16,20,0) 65%),
    var(--grain) 0 0/240px 240px,var(--ink);
  background-blend-mode:normal,normal,overlay,normal}
.half h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.25;margin:0 0 1.2rem;text-align:left}
.half-dark h3{color:var(--white)}
.half-dark .eyebrow-label{color:#7FE0D1}
.half-dark .checks li::before{color:#7FE0D1}
.half .checks{margin:0}
.section.gold-top{border-top:6px solid var(--gold)}

/* Principles page (2026-09-28): round teal bullets instead of checkmarks, and a
   standalone centred quote band. */
.dots-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.85rem}
.dots-list li{position:relative;padding-left:1.4rem}
.dots-list li::before{content:"";position:absolute;left:.2rem;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--teal)}
.half-dark .dots-list li::before{background:#7FE0D1}
.half .dots-list{margin:0}
.media .pic.tall.firepit img{object-position:55% 50%}
.media .pic.tall.laughing-crowd img{object-position:50% 72%}
.after-lists{margin-top:clamp(2.4rem,5vw,3.5rem)}
.half-stone{background:var(--grain-soft) 0 0/240px 240px,var(--stone)}
.half-light .half-inner > h3:first-child,.half-stone .half-inner > h3:first-child,.half-dark .half-inner > h3:first-child{margin-top:0}
.media .pic.tall.duo-stage img{object-position:66% 40%}

/* Four principles (2026-09-29): the framed "decree" was too far from the site's voice,
   so back to a plain numbered list, same wording, with hairline rules between lines. */
ol.p4big{list-style:none;padding:0;counter-reset:p;max-width:40rem;margin:1.8rem auto 0;border-top:1px solid var(--line)}
ol.p4big li{counter-increment:p;display:grid;grid-template-columns:2.2rem 1fr;gap:.9rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line);font-family:var(--f-head);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.3;text-align:left;text-wrap:balance;color:var(--ink)}
ol.p4big li::before{content:counter(p);font-weight:800;color:var(--teal-deep)}

/* Four principles as a connected path (chosen 2026-09-29 over gold circles): a teal
   line joins the numbers, all four circles identical (white, teal ring, teal number). */
ol.p4big.path{border-top:0;position:relative;max-width:38rem}
ol.p4big.path::before{content:"";position:absolute;left:1.05rem;top:1.9rem;bottom:1.9rem;width:2px;background:var(--teal);opacity:.55}
ol.p4big.path li{border-bottom:0;grid-template-columns:2.2rem 1fr;gap:1.2rem;align-items:center;padding:1.05rem 0;position:relative}
ol.p4big.path li::before{box-sizing:border-box;position:relative;z-index:1;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--white);border:2px solid var(--teal);color:var(--teal-deep);
  font-family:var(--f-body);font-weight:700;font-size:.95rem;line-height:1;font-variant-numeric:lining-nums proportional-nums;letter-spacing:0;
  text-box:trim-both cap alphabetic}

/* ---------- Sticky header (2026-09-29) ----------
   Misha: the top bar should stay put as you scroll, like on Squarespace. Desktop: the
   full bar sticks and tightens a little once scrolled. Phones: a compact bar (logo +
   Menu button) sticks; the links drop down when Menu is tapped. */
.site-header{position:sticky;top:0;z-index:50;transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 4px 18px rgba(24,41,48,.18)}
.site-header .bar{transition:min-height .2s,padding .2s}
.site-header.scrolled .bar{min-height:72px;padding-top:.55rem;padding-bottom:.55rem}
html{scroll-padding-top:6.5rem}
.menu-toggle{display:none}
@media (max-width:700px){
  html{scroll-padding-top:5rem}
  .site-header .bar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;padding-top:.7rem;padding-bottom:.7rem}
  .site-header.scrolled .bar{min-height:0;padding-top:.7rem;padding-bottom:.7rem}
  .wordmark{align-items:flex-start;font-size:.95rem}
  .menu-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--white);border-radius:300px;
    color:var(--white);padding:.5rem .9rem;font-family:var(--f-body);font-weight:500;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
  .menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-icon{position:relative}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0}
  .menu-icon::before{top:-5px}.menu-icon::after{top:5px}
  .site-header.open .menu-icon{background:transparent}
  .site-header.open .menu-icon::before{transform:translateY(5px) rotate(45deg)}
  .site-header.open .menu-icon::after{transform:translateY(-5px) rotate(-45deg)}
  .site-header .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:.8rem 0 .3rem}
  .site-header.open .nav{display:flex}
  .site-header .nav a{padding:.75rem 0;border-bottom:1px solid rgba(24,41,48,.15);font-size:1.05rem}
  .site-header .nav a[aria-current="page"]{font-weight:700;border-bottom-color:rgba(24,41,48,.15)}
  .site-header .nav a.btn-call{margin-top:.9rem;border:1px solid var(--white);padding:.85rem 1rem}
}
@media (max-width:700px){
  .site-header .wordmark{flex:1 1 auto;min-width:0}
  .site-header .wordmark .wm-top{font-size:.92rem}
  .site-header .wordmark .wm-sub{font-size:.88rem}
  .menu-toggle{flex:none;margin-left:.75rem}
}
@media (max-width:430px){
  .menu-toggle{width:2.75rem;height:2.75rem;padding:0;justify-content:center}
  .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.media .pic.tall.mingling img{object-position:45% 50%}
.media .pic.duo-stage-wide img{object-position:60% 40%}
.media .pic.tall.crowd-hands img{object-position:50% 50%}
.media .pic.tall.panel img{object-position:78% 50%}
.media .pic.tall.panel-aud img{object-position:55% 50%}

/* How I Help, "Most conferences spend weeks…" (2026-09-29): regular dark band, everything
   centred (long heading reads better full width than squeezed into a left column). */
.stacked{max-width:48rem}
.stacked .section-title{max-width:46rem;margin-left:auto;margin-right:auto}
.stacked p{text-align:center;max-width:36rem;margin-left:auto;margin-right:auto}
.stacked .pull{display:table;margin:1.4rem auto 0;text-align:left}

/* Slider dots (2026-09-29 mobile sweep): the dot stays small but the tap area is 32px,
   so it can be hit with a thumb. */
.dots{gap:0}
.dots button{width:2rem;height:2rem;background:transparent;display:grid;place-items:center}
.dots button::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:#56676E;transition:background .2s}
.dots button.on::before{background:var(--teal)}
.dots button.on,.dots button:hover{background:transparent}
.dots button:hover::before{background:var(--teal)}
.slider-controls{gap:.5rem}
/* Slider height follows the slide on screen (2026-09-29), so a short text-only slide
   doesn't sit in the empty height of a taller one. */
.slides{align-items:start;overflow-y:hidden;transition:height .35s ease}
@media (prefers-reduced-motion:reduce){.slides{transition:none}}
/* Home "Who I've worked with": the ad image is the link to the ad page (button removed). */
.media .pic.art a{display:block;transition:transform .2s,box-shadow .2s}
.media .pic.art a:hover{transform:translateY(-3px)}
.tband + .more-link{margin-top:1.8rem}
.more-link.left{text-align:left;margin-top:.4rem}

/* About: book reviews sit in the book's stone band as two dark cards (2026-10-01),
   replacing the carousel, so it's clear they're reviews of the book. */
.reviews{display:grid;gap:1.2rem;max-width:60rem;margin:clamp(2rem,4vw,2.8rem) auto 0}
@media (min-width:760px){.reviews{grid-template-columns:1fr 1fr}}
.review{margin:0;border-radius:14px;color:var(--white);padding:clamp(1.5rem,3vw,2.1rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
  background:
    radial-gradient(ellipse 80% 90% at 10% 0%,rgba(0,173,150,.18),rgba(0,173,150,0) 60%),
    var(--grain) 0 0/240px 240px,var(--ink);
  background-blend-mode:normal,overlay,normal}
.review blockquote{margin:0}
.review p{margin:0;font-family:var(--f-head);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.45}
.review strong{font-weight:700}
.review figcaption{font-family:var(--f-head);font-weight:700;font-size:.95rem;color:#7FE0D1}