/* display:contents, not block. As a block box, <picture> became the img's
   containing block with height:auto, so every `height:100%` on a photo
   (.cc-shot, .rcp-shot, .coach-img) resolved to auto — which makes
   object-fit/object-position inert and top-clips the crop boxes instead of
   centring them. The hero card lost Blake's face on any screen under 900px
   tall. contents removes the box; the img now sizes against the aspect-ratio
   frame that was always meant to hold it. */
picture{display:contents;}
picture img{width:100%;height:auto;display:block;}
.suburb-hero{padding:calc(var(--nav-h) + 48px) 0 64px;}
.suburb-hero h1{margin:14px 0 18px;}
.suburb-programs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.suburb-programs li a{display:block;padding:16px 18px;background:var(--ink-lift);border-radius:10px;border:1px solid var(--line-dark);}
.band-light .suburb-programs li a{background:var(--bone);border-color:var(--line-light);}
.credential-block{max-width:70ch;}
.credential-block .credential-lede{font-size:1.05rem;margin-bottom:12px;}
.credential-block .credential-links{color:var(--text-dim-dark);font-size:.9rem;}
.credential-block .credential-links a{text-decoration:underline;display:inline-block;padding:14px 0;}
.coach.suburb-hero{padding-top:calc(var(--nav-h) + 48px);}
.pb-hp-wrap{display:none;}

/* Interior prose pages (terms, privacy, training, suburb, coach, contact): base.css zeroes h1/h2/p
   margins and only the homepage's .head h2 restores one, so body copy stacked with no air between a
   heading and its text. Every interior page opens with main > header; on the homepage that header is
   the hero, but homepage sections keep their headings inside .head / .coach-body / .ct-side rather
   than directly under .shell, so these direct-child rules leave the homepage alone. The #coach
   exclusion protects the homepage coach section, whose h2 carries inline margins. */
main > header ~ .band > .shell > .eyebrow{margin-bottom:14px;}
main > header ~ .band > .shell > h2{margin-bottom:18px;}
main > header ~ .band > .shell > :is(p,ul,ol,table,div:not(.eyebrow)) + h2{margin-top:52px;}
.suburb-hero ~ .band > .shell > p{margin-bottom:16px;}
.suburb-hero ~ .band > .shell > p:last-child{margin-bottom:0;}
main > header .coach-body > .eyebrow,main > header ~ .band:not(#coach) .coach-body > .eyebrow{margin-bottom:14px;}
main > header .coach-body > h1,main > header ~ .band:not(#coach) .coach-body > h2{margin-bottom:18px;}

/* /terms: contents list under the hero, anchored headings clear the fixed nav, rate-card sub-heading. */
.toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;max-width:70ch;}
.toc a{display:inline-flex;align-items:center;min-height:36px;padding:8px 13px;border:1px solid var(--line-dark);border-radius:var(--r-pill);font-family:var(--font-eyebrow);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lede-dark);transition:border-color var(--t-hover),color var(--t-hover);}
.toc a:hover,.toc a:focus-visible{border-color:var(--fast-red);color:var(--bone);}
html.fb-light .toc a{border-color:var(--line-light);color:var(--text-body-light);}
html.fb-light .toc a:hover,html.fb-light .toc a:focus-visible{color:var(--court-black);}
.suburb-hero ~ .band > .shell > h2[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}
.suburb-hero ~ .band > .shell > h3.terms-sub{font-size:1.1rem;margin:26px 0 10px;}
/* QA fixes on prose pages: list items were still dark-theme gray in light mode (#C4C4CE on chalk),
   and links inside list items had an 18px tap height. Padding with matching negative margin gives
   the link a 44px target without moving the line. */
html.fb-light .band-ink .prog-list li,html.fb-light .band-dark .prog-list li{color:var(--text-body-light);border-bottom-color:var(--line-light);}
.suburb-hero ~ .band > .shell > .prog-list li a{display:inline-block;padding:13px 0;margin:-13px 0;text-decoration:underline;text-underline-offset:3px;}

.toc-wrap{margin-top:22px;}
.toc-wrap > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-eyebrow);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-lede-dark);}
.toc-wrap > summary::-webkit-details-marker{display:none;}
.toc-wrap > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--fast-red);border-bottom:2px solid var(--fast-red);transform:rotate(45deg);transition:transform var(--t-hover);}
.toc-wrap[open] > summary::after{transform:rotate(-135deg);}
.toc-wrap > .toc{margin-top:12px;}
html.fb-light .toc-wrap > summary{color:var(--text-body-light);}
@media(min-width:641px){.toc-wrap > summary{display:none;}.toc-wrap > .toc{margin-top:0;}}
