/* pages.css — shared components for the interior content pages of
   Telehealth Psychology Australia (about, telehealth, service-types,
   for-referrers, medicare, ndis, workcover, privacy, terms, contact).

   Builds on colors_and_type.css (tokens) + homepage.css (header shell,
   buttons, sections, FAQ, dark CTA, footer). Loaded AFTER homepage.css.
   Only patterns shared across the interior pages live here; a few pieces
   are promoted (copied) from fees.css / enquiry.css so those pages do not
   need to pull a whole sibling stylesheet. Australian English, no em
   dashes, one green accent voice. */

/* =========================================================================
   HEADER DROPDOWN NAVIGATION
   Extends the existing .nav 3-child grid + .nav-link underline + the
   .dropdown-panel shell. Opens on hover, focus-within, or .open (click /
   keyboard / touch, driven by nav.js). Hidden under 940px (mobile menu).
   ========================================================================= */
.nav-item.has-dropdown { position: relative; display: inline-flex; align-items: center; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; margin: 0; padding: 0 0 2px;
  cursor: pointer;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  letter-spacing: var(--tracking-nav); color: var(--ink-charcoal);
}
.nav-trigger .nav-caret { width: 14px; height: 14px; flex: none; transition: transform var(--dur-base) var(--ease-out); pointer-events: none; /* rotating transform must not join hit-testing, else hover oscillates at the caret edge */ }
.has-dropdown:hover .nav-trigger { color: var(--considered-pine); }
.has-dropdown:hover .nav-caret,
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
/* current-section underline (mirrors .nav-link[aria-current]) */
.nav-trigger.is-current::after { width: 100%; }

.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 268px; padding: 10px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  z-index: 110;
}
/* invisible bridge so the 14px gap does not drop the hover */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.nav-dropdown.open {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-link {
  display: grid; gap: 1px; padding: 9px 14px;
  border-radius: var(--radius-md);
  color: var(--ink-charcoal); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-dd-link .dd-t { font-size: 0.9375rem; font-weight: 500; }
.nav-dd-link .dd-sub { font-size: 0.8125rem; color: var(--quiet-stone); }
.nav-dd-link:hover, .nav-dd-link:focus-visible { background: var(--practice-mist); color: var(--considered-pine); text-decoration: none; }
.nav-dd-link:hover .dd-sub, .nav-dd-link:focus-visible .dd-sub { color: var(--considered-pine); }
.nav-dd-link[aria-current="page"] { background: var(--practice-mist); color: var(--considered-pine); }
.nav-dd-link[aria-current="page"] .dd-sub { color: var(--considered-pine); }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown { transition: opacity var(--dur-base) ease, visibility var(--dur-base); transform: translateX(-50%); }
  .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown, .nav-dropdown.open { transform: translateX(-50%); }
  .nav-trigger .nav-caret { transition: none; }
}

/* Mobile menu groups — native <details>/<summary>, no extra JS. Overrides
   the broad ".mobile-menu a" rule via higher specificity. */
.mobile-menu .m-group { border-bottom: 1px solid var(--hairline); }
.mobile-menu .m-group summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink-charcoal);
  padding: 16px 0;
}
.mobile-menu .m-group summary::-webkit-details-marker { display: none; }
.mobile-menu .m-group summary::after {
  content: ""; width: 22px; height: 22px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d4b3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.mobile-menu .m-group[open] summary::after { transform: rotate(180deg); }
.mobile-menu .m-group a {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-sans); font-size: 1.05rem; color: var(--slate);
  padding: 12px 0 12px 16px; border-bottom: 0;
}
.mobile-menu .m-group a:last-child { padding-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .mobile-menu .m-group summary::after { transition: none; } }

/* =========================================================================
   PAGE HERO — compact interior hero (distinct from the homepage .hero)
   ========================================================================= */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 8vw, 92px) 0 clamp(46px, 6vw, 72px);
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(45,75,58,0.08), rgba(45,75,58,0) 56%),
    var(--warm-cream);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-inner { max-width: 760px; }
.page-hero h1 { margin: 16px 0 0; }
.page-hero .lead { margin: 22px 0 0; max-width: 58ch; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.page-hero-facts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px; margin-top: 40px; }
.page-hero-facts > div { display: flex; flex-direction: column; gap: 4px; }
.page-hero-facts .pf-num { font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--considered-pine); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-hero-facts .pf-lbl { font-size: 0.8125rem; color: var(--slate); line-height: 1.4; max-width: 22ch; }
.page-hero-facts .pf-rule { width: 1px; background: var(--warm-border); flex: none; }
@media (max-width: 520px) { .page-hero-facts .pf-rule { display: none; } }

/* Named focus areas under the practitioner name in a hero / lede */
.hero-credit { margin: 22px 0 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.7; max-width: 60ch; }
.hero-credit strong { color: var(--ink-charcoal); font-weight: 600; }

/* =========================================================================
   RICH PROSE — long-form body copy for content sections
   ========================================================================= */
.rich { max-width: 68ch; }
.rich > * + * { margin-top: 18px; }
.rich > h2 { margin-top: 4px; }
.rich h3 { font-size: 1.3rem; margin-top: 34px; }
.rich p, .rich li { color: var(--slate); font-size: 1.0625rem; line-height: 1.75; }
.rich strong { color: var(--ink-charcoal); font-weight: 600; }
.rich ul, .rich ol { padding-left: 1.25rem; display: grid; gap: 10px; margin: 4px 0; }
.rich a { color: var(--considered-pine); text-decoration: underline; text-underline-offset: 2px; }
.rich a:hover { color: var(--deeper-pine); }

/* Tick list — pine check in a mist disc; for value/feature lists */
.tick-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.tick-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  color: var(--slate); font-size: 1rem; line-height: 1.6; margin: 0;
}
.tick-list li::before {
  content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--practice-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232d4b3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* Lead-ins carry hierarchy through pine, not synthetic bolding (owner, 2026-07-17). */
.tick-list strong { color: var(--considered-pine); font-weight: 400; }

/* Plain definition rows (e.g. contact details, "what you need" pairs) */
.detail-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.detail-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--slate); font-size: 1rem; line-height: 1.6; }
.detail-list svg { width: 20px; height: 20px; color: var(--considered-pine); margin-top: 2px; flex: none; }
.detail-list strong { color: var(--considered-pine); font-weight: 400; }
.detail-list a { color: var(--considered-pine); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   SPLIT LAYOUT — prose paired with an aside / info card
   ========================================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* Rhythm: when a split follows a section head, give it the same breathing
   room the card grids get (they carry their own margin-top; .split did not,
   which left the head cramped against the columns, e.g. about's standards
   section). */
.section-head + .split { margin-top: 44px; }
.split.lean { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) { .split, .split.lean { grid-template-columns: 1fr; gap: 36px; } }

/* =========================================================================
   STEP LIST — numbered "how it works" sequence (promoted from fees.css)
   ========================================================================= */
.step-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 12px; }
.step-list > li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--hairline); }
.step-list > li:first-child { border-top: 0; padding-top: 0; }
.step-list .s-n { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: var(--considered-pine); line-height: 1; padding-top: 2px; font-variant-numeric: tabular-nums; }
.step-list h3 { font-size: 1.1875rem; margin: 0 0 6px; }
.step-list p { color: var(--slate); margin: 0; max-width: 56ch; line-height: 1.65; }
.step-list.compact { margin-top: 22px; }

/* =========================================================================
   VALUE / FEATURE CARDS
   ========================================================================= */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.value-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid, .value-grid.cols-2 { grid-template-columns: 1fr; } }
.value-card { display: flex; flex-direction: column; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 26px 24px; }
/* The icon sits inline with the heading rather than in a tinted circle stacked
   above it. Rounded-rect + coloured icon tile + heading + two lines of copy is
   the single most templated card shape on the web; running the icon into the
   headline reads as typography instead of as a widget. */
.value-card .v-head { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
/* Give the icon a line-box the height of the heading's first line so it centres
   on the cap-height optically, at any zoom — no margin magic-number. h3 here is
   1.0625rem at line-height 1.3 (the base heading line-height). */
.value-card .v-ic { flex: none; color: var(--considered-pine); display: inline-flex; align-items: center; height: calc(1.0625rem * 1.3); }
.value-card .v-ic svg { width: 19px; height: 19px; }
.value-card h3 { font-size: 1.0625rem; margin: 0 0 8px; }
.value-card .v-head h3 { margin: 0; }
.value-card p { font-size: 0.9375rem; color: var(--slate); line-height: 1.6; margin: 0; }
.value-card .v-tag { margin-top: auto; padding-top: 14px; font-size: 0.8125rem; color: var(--quiet-stone); }
.value-card .v-tag strong { color: var(--considered-pine); font-weight: 400; }

/* =========================================================================
   INFO CARD — larger panel for "for plan managers / case managers" etc.
   ========================================================================= */
.info-card { background: var(--soft-page); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 32px; }
@media (max-width: 560px) { .info-card { padding: 24px; } }
.info-card .eyebrow { margin-bottom: 12px; }
.info-card h3 { font-size: 1.3rem; margin: 0 0 10px; }
.info-card > p { color: var(--slate); margin: 0 0 16px; line-height: 1.7; }
.info-card .sub-h { font-size: 0.9375rem; font-weight: 600; color: var(--ink-charcoal); margin: 20px 0 8px; }
.info-card .step-list { margin-top: 0; }

/* =========================================================================
   COST PANEL — equation (promoted from fees.css) + single-figure callout
   ========================================================================= */
.pay-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 44px; }
@media (max-width: 860px) { .pay-equation { grid-template-columns: 1fr; gap: 12px; } }
.pay-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 30px 30px 28px; box-shadow: var(--shadow-panel-resting); }
.pay-tag { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet-stone); }
.pay-num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 3.4rem); line-height: 1; color: var(--ink-charcoal); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.pay-sub { font-size: 0.9375rem; color: var(--slate); line-height: 1.5; }
.pay-op { align-self: center; justify-self: center; font-family: var(--font-serif); font-size: 2rem; color: var(--quiet-stone); line-height: 1; }
@media (max-width: 860px) { .pay-op { margin: 4px 0; } }
.pay-card-feature { background: var(--practice-mist); border: 1.5px solid var(--considered-pine); box-shadow: var(--shadow-step-halo); }
.pay-card-feature .pay-tag { color: var(--considered-pine); }
.pay-card-feature .pay-num { color: var(--considered-pine); }

/* Single-figure callout (NDIS rate, WorkCover fee) */
.figure-callout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 36px; padding: 28px 32px; background: var(--practice-mist); border: 1.5px solid var(--considered-pine); border-radius: var(--radius-lg); box-shadow: var(--shadow-step-halo); }
.figure-callout .amt { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 4vw, 2.9rem); line-height: 1; color: var(--considered-pine); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure-callout .cap { font-size: 1rem; color: var(--slate); line-height: 1.5; }
.figure-callout .cap strong { color: var(--ink-charcoal); font-weight: 600; }

/* Shared fee note: styled once in homepage.css (left-set, hairline-top
   footnote at a reading measure). No overrides here — the earlier centring
   overrides produced the floating-orphan small print the owner flagged. */

/* Side cards align with the section H2, not the eyebrow above it: when the
   text column opens with an eyebrow, offset the companion card by the
   eyebrow's height (owner, 2026-07-07). Browsers without :has() simply keep
   the old top alignment. */
.split > div:has(> .eyebrow) + .info-card { margin-top: 37px; }

/* =========================================================================
   FUNDING CARDS — service-types linking grid (promoted from fees.css)
   ========================================================================= */
.funding-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 1160px) { .funding-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .funding-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .funding-grid { grid-template-columns: 1fr; } }
.funding-card { display: flex; flex-direction: column; background: var(--soft-page); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 26px 24px; text-decoration: none; transition: transform var(--dur-slow) var(--ease-soft), box-shadow var(--dur-slow) var(--ease-soft), border-color var(--dur-base) var(--ease-out); }
a.funding-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--considered-pine); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { a.funding-card:hover { transform: none; } }
.fc-ic { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--practice-mist); color: var(--considered-pine); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fc-ic svg { width: 22px; height: 22px; }
.funding-card h3 { font-size: 1.0625rem; margin: 0 0 8px; }
.funding-card p { font-size: 0.9375rem; color: var(--slate); line-height: 1.6; margin: 0 0 18px; }
.fc-need { margin-top: auto; font-size: 0.8125rem; color: var(--quiet-stone); padding-top: 14px; border-top: 1px solid var(--hairline); }
.fc-need strong { color: var(--considered-pine); font-weight: 400; }
.funding-card .fc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.8125rem; font-weight: 500; color: var(--quiet-stone); transition: color var(--dur-base) var(--ease-out); }
a.funding-card:hover .fc-more { color: var(--considered-pine); }
.funding-card .fc-more svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-soft); }
a.funding-card:hover .fc-more svg { transform: translateX(3px); }

/* Plain chip row (e.g. modalities, conditions) */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag-row .tag-pill { font-size: 0.8125rem; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--practice-mist); color: var(--considered-pine); }

/* Conditions link grid (areas of support, links to service-types for now) */
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
@media (max-width: 760px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .link-grid { grid-template-columns: 1fr; } }
.link-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-md); color: var(--ink-charcoal); font-size: 0.9375rem; text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.link-chip svg { width: 16px; height: 16px; color: var(--quiet-stone); flex: none; transition: transform var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-out); }
.link-chip:hover { border-color: var(--considered-pine); background: var(--practice-mist); text-decoration: none; }
.link-chip:hover svg { color: var(--considered-pine); transform: translateX(3px); }

/* =========================================================================
   CRISIS CALLOUT — in-page (promoted from enquiry.css .enq-crisis)
   ========================================================================= */
.crisis-callout { padding: 22px 26px; border-left: 3px solid var(--considered-pine); background: var(--warm-cream); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.crisis-callout .eyebrow { margin-bottom: 10px; }
.crisis-callout p { margin: 0; font-size: 0.9375rem; color: var(--slate); line-height: 1.75; }
.crisis-callout p + p { margin-top: 10px; }
/* Crisis lead-ins stay at body colour — green would read as links, and
   emphasis is dropped site-wide on crisis numbers (owner, 2026-07-17). */
.crisis-callout strong { color: inherit; font-weight: 400; }
.crisis-callout ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.crisis-callout li { font-size: 0.9375rem; color: var(--slate); line-height: 1.6; }
.crisis-callout li strong { color: inherit; font-weight: 400; }

/* =========================================================================
   CLOSING DARK CTA BAND — reuses homepage.css .book (.section-dark + blob)
   ========================================================================= */
.cta-band { text-align: center; }
.cta-band-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta-band .eyebrow { justify-content: center; }
.cta-band .descriptor { margin-left: auto; margin-right: auto; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* Quiet specificity line under primary CTAs: what enquiring actually involves */
.cta-note { margin: 18px 0 0; font-size: 0.875rem; color: var(--quiet-stone); }
.section-dark .cta-note { color: var(--text-on-dark-muted); }

/* =========================================================================
   LEGAL LONG-FORM — privacy & terms
   ========================================================================= */
.legal-wrap { max-width: 820px; margin: 0 auto; }
.legal-meta { font-size: 0.875rem; color: var(--quiet-stone); margin: 18px 0 0; }
.legal-draft { margin: 18px 0 0; padding: 14px 18px; border-left: 3px solid var(--warn); background: #fbf6ee; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 0.875rem; color: var(--slate); line-height: 1.6; }
.legal-toc { background: var(--practice-mist); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 24px 28px; }
.legal-toc h2 { font-size: 1.0625rem; margin: 0 0 14px; }
.legal-toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 8px; }
.legal-toc li { color: var(--slate); }
.legal-toc a { color: var(--considered-pine); font-size: 0.9375rem; }
.legal-section { padding-top: 44px; scroll-margin-top: 96px; }
.legal-section h2 { font-size: 1.4rem; margin: 0 0 14px; }
.legal-section h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.legal-section p, .legal-section li { color: var(--slate); font-size: 1rem; line-height: 1.75; max-width: 74ch; }
.legal-section > p + p, .legal-section > * + p { margin-top: 14px; }
.legal-section ul, .legal-section ol { padding-left: 1.35rem; display: grid; gap: 8px; margin: 14px 0; }
.legal-section strong { color: var(--ink-charcoal); font-weight: 600; }
.legal-section a { color: var(--considered-pine); text-decoration: underline; text-underline-offset: 2px; }
.legal-section .crisis-callout { margin-top: 18px; }

/* =========================================================================
   CONTACT PAGE EXTRAS (the form base lives in enquiry.css, kept for reuse)
   These cover the richer sections contact.html adds around the form.
   ========================================================================= */
.contact-meta { display: grid; gap: 18px; margin-top: 8px; }

/* =========================================================================
   PAGE MEDIA — hero imagery + in-body image bands.
   Generalises the accepted fees.css treatment: images are sized by
   aspect-ratio (never a hard min-height that out-grows the copy), columns
   align so the image tracks the text block, and the image stacks FIRST on
   mobile. This is what keeps imagery lined up with the copy column.
   Image credits: Pexels (free licence, commercial use, no attribution
   required); see each page's <head> for the per-image credit comment.
   ========================================================================= */

/* --- Hero with a paired image (add .has-media to .page-hero) ---
   The image frame STRETCHES to the height of the copy column, so the top
   and bottom edges line up with the text (no centred "floating"). The image
   fills the frame via an absolutely-positioned <img> + object-fit:cover. */
.page-hero.has-media .page-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: stretch;
}
.page-hero.has-media .page-hero-inner { max-width: none; align-self: center; }
@media (max-width: 940px) {
  .page-hero.has-media .page-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

.page-hero-media { position: relative; min-width: 0; }
.page-hero-frame {
  position: relative; height: 100%; min-height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-dropdown);
  background: var(--practice-mist);
}
.page-hero-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (max-width: 940px) {
  .page-hero-media { order: -1; }  /* image leads on mobile */
  .page-hero-frame { height: auto; min-height: 0; aspect-ratio: 16 / 11; }
}

/* optional floating fact chip over a hero image (mirrors the fees hero badge) */
.page-hero-badge {
  position: absolute; left: -22px; bottom: 28px; z-index: 2;
  display: flex; align-items: center; gap: 13px;
  background: var(--paper-white); border: 1px solid var(--hairline-card);
  border-radius: var(--radius-lg); padding: 14px 20px;
  box-shadow: var(--shadow-dropdown); max-width: 86%;
}
@media (max-width: 600px) { .page-hero-badge { left: 12px; bottom: 12px; padding: 12px 16px; } }
.page-hero-badge .phb-ic { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--practice-mist); color: var(--considered-pine); display: inline-flex; align-items: center; justify-content: center; }
.page-hero-badge .phb-ic svg { width: 20px; height: 20px; }
.page-hero-badge .phb-num { font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem; line-height: 1; color: var(--ink-charcoal); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-hero-badge .phb-lbl { font-size: 0.8125rem; color: var(--quiet-stone); line-height: 1.4; max-width: 22ch; }

/* --- In-body image band: framed image + content, flippable ---
   align-items:stretch makes the image frame match the copy height so the
   image and text line up at top and bottom (symmetrical). The copy is
   vertically centred within that shared height. */
.media-band { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4.5vw, 56px); align-items: stretch; }
.media-band.flip { grid-template-columns: 1.08fr 0.92fr; }
.media-band.flip .media-fig { order: 2; }
/* Same min-width: 0 floor as the homepage grids — see homepage.css. */
.media-band > *, .split > *, .page-hero.has-media .page-hero-grid > * { min-width: 0; }
.media-band > div { align-self: center; }
@media (max-width: 940px) {
  .media-band, .media-band.flip { grid-template-columns: 1fr; gap: 30px; }
  /* Stacked: copy leads, its image sits underneath. An image never precedes the
     text that gives it context (was order:-1, image-first). Desktop unchanged. */
  .media-band .media-fig, .media-band.flip .media-fig { order: 1; }
  .media-band > div { align-self: stretch; }
}
.media-fig {
  margin: 0; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-card-hover); background: var(--practice-mist); min-width: 0;
}
/* standalone figure (e.g. the contact-page aside): fixed pleasant ratio */
.media-fig img { width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
.media-fig.tall img { aspect-ratio: 4 / 5; }
/* inside a band, the figure fills the shared row height */
.media-band .media-fig { position: relative; min-height: 360px; }
.media-band .media-fig img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (max-width: 940px) {
  .media-band .media-fig { min-height: 0; }
  .media-band .media-fig img { position: static; height: auto; aspect-ratio: 3 / 2; }
}
.media-fig figcaption { padding: 12px 18px; font-size: 0.8125rem; color: var(--quiet-stone); line-height: 1.5; background: var(--soft-page); }

/* --- Single feature strip: a calm full-width accent (no paired text) --- */
.media-strip { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-hover); }
.media-strip img { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .media-strip img { aspect-ratio: 16 / 10; } }

/* =========================================================================
   2026-07-06 design-review fixes (site-wide; pages.css is linked by every
   deployed page, including index.html and book.html)
   ========================================================================= */

/* Uniform B&W portrait treatment. team.css already does this for the team
   pages (.portrait-bw); these are the remaining surfaces (homepage team
   cards, about teaser, hero avatar stack, booking thumbs) so the two
   headshots, shot in different conditions, always sit together matched.
   Durable fix is a matched reshoot for Lloyd. */
.team-card .portrait, .hero-people .face, .psych-opt .thumb { filter: grayscale(1) contrast(1.03); }

/* Buttons keep the sans (Hedvig Letters Sans) everywhere, including inside
   the mobile menu (the large serif menu headings are a documented,
   deliberate exception; the pill buttons are not part of it). */
.mobile-menu a.btn { font-family: var(--font-sans); font-size: 1rem; }

/* Conditions-grid toggle: hidden except on small screens (lives here, after
   homepage.css, so the .btn display rules cannot re-show it on desktop). */
.cond-toggle { display: none; }
@media (max-width: 640px) {
  html.js .cond-grid.collapsed .cond-card:nth-child(n+5) { display: none; }
  html.js .cond-toggle { display: flex; margin: 30px auto 0; }
}

/* Typography (owner, 2026-07-07): Inter retired; the sans is Hedvig Letters
   Sans, which ships a single weight. UI chrome that asked Inter for
   500/medium renders true 400 (tracking does the work); inline <strong> and
   600-weight emphasis keep browser synthesis. */
.btn, .nav-link, .nav-trigger, .nav-portal, .nav-phone, .skip-link, .availability,
.service-tab, .book-chip, .time-opt, .cond-card .more, .nav-dd-link .dd-t { font-weight: 400; }
.btn { letter-spacing: 0.02em; }