/* 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(--butter);padding:clamp(3rem,7vw,5rem) var(--gutter);text-align:center}
.page-title h1{color:var(--slate);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(--slate);max-width:44rem;margin:1rem auto 0}
.page-title .sub a{color:var(--slate)}

/* ---------- 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}
  .split > h2,.split > .side{position:sticky;top:2rem}
}
.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}