/* Hannah Mostert Counselling v7, site styles.
   Built on the design-system tokens (_ds). Component classes carry the recurring interactive
   pieces so :hover works without JS. The v7 mobile-first chrome and home page follow the approved
   mock-up of 25 July 2026 (design/2026-07-25_mobile-first-v6-approved). */

/* The design system's --shadow-focus is 0 0 0 3px rgba(0,144,160,0.28). At 28% alpha that ring
   composites to between 1.19:1 and 1.43:1 against every ground the site uses (foam, cream, tint,
   ocean ink, WhatsApp green), so the keyboard focus indicator was effectively invisible everywhere.
   WCAG 2.4.11 asks for 3:1.

   No single solid colour fixes it: turquoise disappears on the green button, deep aqua press
   disappears on the ink bands, and any light ring disappears on foam. A two-tone ring solves all of
   them at once, because one of the two bands always has the contrast. Measured: foam band 13.07:1
   on ink, press band 6.57:1 on foam, 5.21:1 on cream, 5.78:1 on tint, 3.40:1 on WhatsApp green,
   and the two bands are 6.57:1 against each other, so it reads as a ring rather than a smudge.

   Overridden here rather than in _ds/, following the same pattern as the .hmc-eyebrow colour fix
   below: the design-system package stays as shipped and the site carries its own corrections. */
:root { --shadow-focus: 0 0 0 2px var(--foam-white), 0 0 0 5px var(--deep-aqua-press); }

html, body { margin:0; padding:0; overflow-x:hidden; background:var(--foam-white); scroll-behavior:smooth; }
/* overflow-x:hidden makes <body> a scroll container, and a scroll container with auto height has no
   scrollport of its own, so position:sticky on any descendant silently never engages. That is what
   the docked action bar is. overflow-x:clip suppresses horizontal overflow WITHOUT creating a scroll
   container, so sticky keeps working. The hidden declaration above stays as the fallback: in a
   browser without clip the bar simply scrolls with the page instead of docking, which degrades to
   v6's behaviour rather than to a broken control. Caught by measuring the bar's position at 390px,
   not by reading the CSS. */
@supports (overflow-x: clip) { html, body { overflow-x:clip; } }
body { color:var(--ocean-ink); font-family:var(--font-body); }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--turquoise-soft); border-radius:99px; border:3px solid var(--foam-white); }
img { max-width:100%; display:block; }

/* ---------- sections + typography helpers ---------- */
.sec { padding:clamp(56px,8vw,104px) clamp(18px,4vw,40px); }
.page-home .sec { padding-block:clamp(64px,9vw,112px); }
.sec--foam { background:var(--foam-white); }
.sec--cream { background:var(--cream-sand); }
.sec--tint { background:var(--turquoise-tint); }

.h1-page { font-size:clamp(34px,5vw,52px); line-height:1.1; font-weight:var(--weight-display); }
.h2-xs { font-size:clamp(22px,3vw,30px); }
/* Legibility (21 June 2026 audit). Pattern B: the design-system .hmc-eyebrow uses ocean-turquoise,
   which fails AA as text; override section eyebrows to deep-aqua-press (clears AA on every site background). */
.hmc-eyebrow { color:var(--deep-aqua-press); }

/* Section opener: job 1 of the heron system (card 1d). The turquoise mark sits above every section
   eyebrow, on every section of every page, replacing the bare label. Eyebrow drops to 11.5px at
   0.26em from v6's 13px at 0.28em, because at 390pt the wider tracking broke short labels onto two
   lines. Both values are inside the design system's own rules; no new token is introduced. */

/* ---------- buttons + links ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-body); font-size:16px; padding:15px 26px; border-radius:var(--radius); text-decoration:none; cursor:pointer; border:none; line-height:1; transition:background .22s, box-shadow .22s, transform .24s, color .2s, border-color .2s; }
.btn--lg { padding:16px 30px; }
.btn--book-sm { min-height:44px; padding:11px 22px; font-size:15px; }
.btn--primary { background:var(--ocean-turquoise); color:var(--foam-white); box-shadow:var(--shadow-xs); }
.btn--primary:hover { background:var(--deep-aqua); box-shadow:var(--shadow-sm); }
.btn--wa { background:var(--whatsapp-green); color:#fff; }
.btn--wa:hover { background:var(--whatsapp-green-press); }
.btn--ghost-dark { background:none; border:1px solid rgba(253,252,250,0.5); color:var(--foam-white); }
.btn--ghost-dark:hover { background:rgba(253,252,250,0.1); border-color:var(--foam-white); }
/* The outline button's label was ocean turquoise on foam white, which measures 3.73:1 and fails AA
   for body-sized text. Deep aqua press measures 6.57:1 on the same ground. Flagged at the phase 3
   gate, and Adriaan approved taking it here in phase 5 because it is shared chrome. The border
   moves with the label so the control stays one colour; the hover fill keeps the turquoise, where
   white-on-turquoise is a large-target state rather than resting body text. */
.btn--outline { background:none; border:1px solid var(--deep-aqua-press); color:var(--deep-aqua-press); }
.btn--outline:hover { background:var(--deep-aqua-press); color:var(--foam-white); }
.lnk { display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; gap:8px; background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:16px; color:var(--deep-aqua-press); padding:0; text-decoration:none; transition:color .18s; }
.lnk:hover { color:var(--ocean-ink); }
/* Vertical padding on an inline box extends the hit area without changing the line box, so the
   19px-tall "hpcsa.co.za" link in the facts table clears the target floor while the row it sits in
   stays exactly the height it was drawn. */
.ilink { color:var(--deep-aqua-press); padding-block:13px; }
.ilink--ul { text-decoration:underline; text-underline-offset:3px; }

/* ---------- header ---------- */
/* Deep aqua press, not ocean turquoise: foam on turquoise measures 3.73:1 and fails AA for 15px
   text, which is a poor look on the one control that exists purely for accessibility. The same
   foam on deep aqua press clears AA comfortably, and it is the colour the system already uses
   wherever an accent has to carry type (The Turquoise-Is-A-Mark Rule). */
.skip-link { position:fixed; top:12px; left:12px; z-index:300; background:var(--deep-aqua-press); color:var(--foam-white); font-family:var(--font-body); font-size:15px; padding:11px 20px; border-radius:var(--radius); text-decoration:none; box-shadow:0 8px 24px rgba(1,52,64,0.22); transform:translateY(calc(-100% - 24px)); transition:transform .2s var(--ease-out); }
.skip-link:focus { transform:none; outline:none; }
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--ocean-turquoise); z-index:75; transition:transform 120ms linear; pointer-events:none; }
/* Card 1g at 1040px and above: 74px tall, the roundel at 46px, a two-line LIVE-TEXT lockup, the nav,
   and the green "Message Hannah" button pinned right. The scroll-progress bar rides the top at 3px.
   The second lockup line reads "Counselling", not "Registered Psychological Counselling": decision 4
   confines that phrase to the splash video and the home hero, where D07 permits it. */
.site-header { position:sticky; top:0; z-index:60; backdrop-filter:saturate(120%) blur(10px); -webkit-backdrop-filter:saturate(120%) blur(10px); background:rgba(253,252,250,0.92); border-bottom:1px solid var(--dune); }
.site-header__inner { max-width:1280px; margin:0 auto; padding:12px clamp(18px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:18px; }
@media (min-width:1040px) { .site-header__inner { min-height:74px; padding:0 40px; gap:26px; } }
.brand { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; gap:13px; text-decoration:none; flex:none; }
.brand__mark { height:42px; width:auto; display:block; }
.brand__mark-white { display:none; height:42px; width:auto; }
.brand__lockup { display:none; flex-direction:column; gap:5px; }
.brand__name { font-family:var(--font-display); font-weight:var(--weight-display); font-size:16px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ocean-ink); line-height:1; }
.brand__sub { font-family:var(--font-display); font-weight:var(--weight-display); font-size:8.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--deep-aqua-press); line-height:1; }
.nav-desktop { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nav-desktop__link { position:relative; font-size:15px; color:var(--ink-70); padding:10px 13px; letter-spacing:0.01em; text-decoration:none; white-space:nowrap; transition:color .18s; }
.nav-desktop__link:hover { color:var(--deep-aqua-press); }
.nav-desktop__link.is-active { color:var(--deep-aqua-press); }
/* --radius-full rather than a bare 2px: on a 2px-tall bar any radius at or above half the height
   renders identically (fully rounded ends), so this is the documented token doing what the magic
   number did. Zero visual change; it just stops the bar carrying a radius the scale does not have. */
.nav-desktop__link.is-active::after { content:""; position:absolute; left:13px; right:13px; bottom:-2px; height:2px; background:var(--ocean-turquoise); border-radius:var(--radius-full); }
.header-actions { display:none; align-items:center; gap:10px; flex:none; }
.header-actions__wa { white-space:nowrap; }

/* Mobile chrome, below 1040px. Inner pages keep the roundel, the green chip and the hamburger
   (decision 7). The home page carries the white mark, the chip and a translucent MENU pill, and the
   whole bar sits INSIDE the hero rather than above it (card 1b): the full lockup never appears in
   the bar at this width, because its subtitle renders at roughly 5px there. */
/* 44px, not the 42 the mock-up drew. This is the primary WhatsApp control at phone width and it sat
   2px under the 44x44 target floor; the glyph inside is unchanged, so the chip reads identically. */
.wa-chip { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-full); background:var(--whatsapp-green); transition:background .2s; }
.wa-chip:hover { background:var(--whatsapp-green-press); }
/* The MENU pill is drawn on card 1b as a translucent pill over the hero's ink scrim. Tinting it with
   INK rather than with white is deliberate: a white-on-white-translucent pill measures 1.00:1 against
   any light backdrop, so the control's legibility would depend entirely on what the hero happens to
   be doing behind it. Tinted with ink it clears AA over a light scrim and over a dark one, and still
   reads as the translucent pill the card draws. Caught by measuring real pixels, not by eye. */
/* min-height rather than more padding: the pill keeps the mock-up's 11px/18px inset and its drawn
   proportions, and the extra height is taken up by centring inside a 44px box. */
.menu-pill { display:inline-flex; align-items:center; justify-content:center; min-height:44px; cursor:pointer; font-family:var(--font-body); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--foam-white); background:rgba(1,52,64,0.72); border:1px solid rgba(253,252,250,0.5); border-radius:var(--radius-full); padding:11px 18px; line-height:1; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s; }
.menu-pill:hover { background:rgba(1,52,64,0.84); }
.nav-mobile { display:none; align-items:center; gap:10px; }
/* The three bars stay 24px wide and 5px apart; the button around them grows to the 44x44 floor. */
.hamburger { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; min-height:44px; gap:5px; background:none; border:none; cursor:pointer; padding:10px 6px; }
.hamburger span { display:block; width:24px; height:1.6px; background:var(--ocean-ink); }
.mobile-panel { border-top:1px solid var(--dune); background:var(--foam-white); padding:14px clamp(18px,4vw,40px) 26px; animation:hmcFadeUp 260ms var(--ease-out); }
.mobile-panel[hidden] { display:none; }
.mobile-panel__link { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; border-bottom:1px solid var(--dune); font-size:17px; color:var(--ocean-ink); padding:14px 4px; text-decoration:none; }
.mobile-panel__link.is-active { color:var(--deep-aqua-press); }
.mobile-panel__link .dot { width:7px; height:7px; border-radius:50%; background:var(--ocean-turquoise); }
/* Behind BOOKING_ENABLED (_build/parts.mjs line 233), so it is absent from the built HTML today. */
.mobile-panel__book { margin-top:16px; width:100%; }

@media (max-width:1039.98px) {
  .nav-desktop, .header-actions { display:none; }
  .nav-mobile { display:flex; }
  /* Home only: the header becomes transparent chrome laid over the hero. */
  .site-header--hero { position:absolute; top:0; left:0; right:0; background:none; border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none; z-index:20; }
  .site-header--hero .brand__mark { display:none; }
  .site-header--hero .brand__mark-white { display:block; }
  .site-header--hero .mobile-panel { background:var(--foam-white); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:0 18px 40px rgba(1,52,64,.28); }
}
@media (min-width:1040px) {
  .mobile-panel { display:none !important; }
  .brand__lockup { display:flex; }
  .brand__mark { height:46px; }
  .header-actions { display:flex; }
}

/* ---------- footer ---------- */
.site-footer { background:var(--ocean-ink); color:var(--foam-white); padding:clamp(56px,7vw,84px) clamp(18px,4vw,40px) 40px; }
/* Four-column ink grid on desktop (section 6.4): brand, Explore, Practical, Contact. The brand
   column is given more room than the three link columns so the wordmark and its line are not
   cramped. Below 1040px it collapses to the auto-fit stack it has always used. */
.site-footer__grid { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:44px; }
@media (min-width:1040px) { .site-footer__grid { grid-template-columns:1.35fr 1fr 1fr 1.25fr; } }
.footer-brand__lockup { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
/* The wordmark is spaced caps at 0.22em, so it measures far wider than its character count and was
   wrapping to three lines inside the brand column. Card 1g sets it on one line beside the mark, and
   a broken wordmark reads as a layout fault rather than as a lockup. nowrap holds it; the name is
   left-aligned here rather than using the design system's centred default, because it sits beside
   the heron rather than under it. */
.footer-brand__lockup .hmc-wordmark { text-align:left; white-space:nowrap; }
.footer-brand__desc { font-size:15px; line-height:1.75; color:var(--turquoise-soft); max-width:30ch; margin:0; }
.footer-col__head { font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--heron-light); margin-bottom:16px; }
/* 9px block padding takes the row from 38px to the 44px target floor. The columns are a stack of
   link rows with no other interactive neighbours, so the taller rows cost nothing but reach. */
.footer-link { display:block; font-size:15px; color:var(--foam-white); padding:9px 0; text-decoration:none; transition:color .18s; }
.footer-link:hover { color:var(--turquoise-soft); }
.footer-contact { font-size:15px; line-height:1.85; color:var(--turquoise-soft); margin:0 0 14px; }
/* The hit area grows to 44px while the text stays exactly where it was drawn: the padding is
   cancelled by an equal negative margin. Used here and on .lnk, where adding real height would
   push the surrounding rhythm around for a control that is only a line of text. */
.footer-contact-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-block:-9px; color:var(--foam-white); font-size:15px; text-decoration:none; transition:color .18s; }
.footer-contact-link:hover { color:var(--turquoise-soft); }
.footer-bottom { max-width:1140px; margin:40px auto 0; padding-top:26px; border-top:1px solid rgba(253,252,250,0.16); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:13px; color:var(--heron-light); margin:0; letter-spacing:0.04em; }

/* ---------- the docked action bar (section 6.2 of the v7 handover) ---------- */
/* Replaces THREE retired floating elements: the WhatsApp FAB (.wa-fab), the guide pill and its
   inline menu (.guide*), and the scroll cue. All competed for the same thumb zone at 390pt and all
   covered content. One bar, three variants, one per page, never two.
   position:sticky rather than fixed, so the bar takes its own space at the end of the document and
   comes to rest below the footer instead of permanently covering the last section. */
.dock { position:sticky; z-index:7; bottom:0; }

/* Variant A, the message bar. Every page except the services overview and the nine service pages. */
.dock--msg { padding:0 16px 18px; pointer-events:none; transition:opacity .28s var(--ease-out), transform .28s var(--ease-out); }
.dock--msg.is-receded { opacity:0; transform:translateY(8px); pointer-events:none; }
.dock__msg { pointer-events:auto; display:flex; align-items:center; gap:12px; height:60px; padding:0 8px 0 18px; background:rgba(1,52,64,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:999px; box-shadow:0 10px 30px rgba(1,52,64,.34); text-decoration:none; max-width:560px; margin:0 auto; }
.dock__roundel { flex:none; width:32px; height:32px; border-radius:var(--radius-full); }
.dock__stack { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.dock__title { font-family:var(--font-body); font-size:14.5px; line-height:1.2; color:var(--foam-white); }
.dock__sub { font-family:var(--font-body); font-size:11.5px; line-height:1.2; color:var(--heron-light); }
.dock__chip { flex:none; width:44px; height:44px; border-radius:var(--radius-full); background:var(--whatsapp-green); display:inline-flex; align-items:center; justify-content:center; transition:background .2s; }
.dock__msg:hover .dock__chip { background:var(--whatsapp-green-press); }

/* Variants B and C share the ground: foam white at 0.95, a 10px blur and a 1px dune top border. */
.dock--services, .dock--service { background:rgba(253,252,250,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--dune); }
.dock--services { padding:10px 16px 16px; }
.dock--service { padding:10px 16px 16px; display:flex; align-items:center; gap:14px; }
.dock__cta { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body); background:var(--whatsapp-green); color:#fff; border-radius:var(--radius); text-decoration:none; line-height:1; transition:background .2s; }
.dock__cta:hover { background:var(--whatsapp-green-press); }
.dock--services .dock__cta { width:100%; height:54px; font-size:16.5px; }
.dock--service .dock__cta { flex:1; height:52px; font-size:16px; }
.dock__fee { flex:none; display:flex; flex-direction:column; gap:2px; }
.dock__fee-figure { font-family:var(--font-display); font-weight:var(--weight-display); font-size:22px; line-height:1; color:var(--deep-aqua-press); }
/* ink 70, not the ink 50 the card draws: the bar's 0.95 foam ground composites with whatever the
   page has behind it, and over the service pages' sand sections ink 50 measured 4.10:1. Phase 2
   measured this same line at 4.53:1 over a different section, which is exactly why a translucent
   bar has to be judged on its worst ground rather than on one sample. */
.dock__fee-meta { font-size:11px; line-height:1.2; color:var(--ink-70); }

/* Because the bar is sticky and sits after the footer in source order, its flow position IS the end
   of the document: it unpins at maximum scroll and comes to rest below the last content rather than
   over it. That is the mechanism that satisfies "does not overlap content at 390pt", and it is
   measured rather than assumed in the verify phase.
   At 1040px and above the bar is hidden, because the sticky header carries the green "Message
   Hannah" button pinned right (card 1g). Desktop therefore keeps a permanently visible labelled
   action; it just lives in the header instead of floating over the page. */
@media (min-width:1040px) { .dock { display:none; } }

/* ---------- next-step band ---------- */

/* ---------- closing CTA band ---------- */

/* ---------- home page (cards 1b and 1g of the approved mock-up, 25 July 2026) ----------
   The v6 hero (foam scrim over a desktop text column, SVG logo lockup) is RETIRED with its
   .hero__* rules, the icon-card grid (.card-grid), the centred step circles (.step-num--lg) and
   the fee glance cards (.fee-glance*). The two cards differ in copy as well as layout, so both
   width variants ship in the markup and these two utilities pick one at the 1040px breakpoint. */
@media (min-width:1040px) { .only-m { display:none !important; } }
@media (max-width:1039.98px) { .only-d { display:none !important; } }

/* home section openers. Glyph and eyebrow sizes vary per section and per width in the mock-up
   (30/32px on the rail, 26/32px on fees, 34px on desktop prose; eyebrows 11.5px/.26em on the phone,
   12px/.28em at 1440), so they are class-sized here rather than inline-sized by sectionOpener(). */
.ho-open { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.ho-glyph { width:30px; height:auto; flex:none; }
/* font-family and weight are pinned here rather than inherited: the eyebrow is carried by a <p> in
   some places and by an <h2> in others (the services groups, "Maybe this is you", "What happens"),
   where it IS the section's heading and should be one semantically. Without these two declarations
   the same class rendered in Cormorant 500 on the headings and Lato 400 on the paragraphs. */
.ho-eyebrow { font-family:var(--font-body); font-weight:400; font-size:11.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--deep-aqua-press); margin:0; line-height:1.4; }
@media (min-width:1040px) { .ho-eyebrow { font-size:12px; letter-spacing:0.28em; } }

/* hero: full-bleed collage under a bottom-up ink scrim at 390pt (object-position 20% 50% keeps the
   paper-cut heron in frame); a two-column ink/collage split at 1040px+ (34% 50%). */
.home-hero { position:relative; background:var(--ocean-ink); }
.home-hero__media { position:absolute; inset:0; overflow:hidden; }
.home-hero__img { width:100%; height:100%; object-fit:cover; object-position:20% 50%; }
.home-hero__grade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(1,52,64,0.96) 0%, rgba(1,52,64,0.92) 30%, rgba(1,52,64,0.66) 46%, rgba(1,52,64,0.16) 68%, rgba(1,52,64,0.44) 100%); }
.home-hero__panel { position:relative; z-index:2; min-height:800px; display:flex; flex-direction:column; justify-content:flex-end; padding:0 24px 34px; }
/* The lockup lines sit in the scrim's ~0.62 zone over the brightest stretch of the collage and
   measured 3.1:1 and 3.0:1 worst-case, below the 4.5:1 AA floor; a glyph halo dense enough to fix
   that reads as a glow effect. The ::below shoulder on .home-hero__col instead deepens the scrim
   locally behind the two lines (a feathered +0.5 ink band), which is the scrim doing its own job.
   Text-shadows stay at the mock-up's values: insurance, not the contrast mechanism. */
.home-hero__wordmark { font-family:var(--font-display); font-weight:var(--weight-display); font-size:15px; letter-spacing:0.34em; text-transform:uppercase; color:var(--foam-white); margin:0 0 4px; text-shadow:0 1px 12px rgba(1,52,64,0.7); }
.home-hero__rule { height:1px; background:rgba(191,224,228,0.5); width:76%; margin:0 0 8px; }
.home-hero__strap { font-size:9.5px; letter-spacing:0.3em; text-transform:uppercase; color:var(--turquoise-soft); margin:0 0 28px; text-shadow:0 1px 10px rgba(1,52,64,0.75); }
.home-hero__col { position:relative; }
.home-hero__col::before { content:''; position:absolute; z-index:-1; left:-24px; right:-24px; top:-28px; height:152px; pointer-events:none; background:linear-gradient(to bottom, rgba(1,52,64,0) 0%, rgba(1,52,64,0.5) 26%, rgba(1,52,64,0.5) 72%, rgba(1,52,64,0) 100%); }
.home-hero__h1 { font-size:52px; line-height:1.0; letter-spacing:0.005em; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 20px; }
.home-hero__lead { font-size:18px; line-height:1.55; font-weight:300; color:rgba(253,252,250,0.94); margin:0 0 26px; max-width:30ch; }
.home-hero__btns { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.home-hero__wa { flex:1; min-width:200px; height:58px; font-size:17px; padding:0 18px; border-radius:var(--radius); box-shadow:0 8px 24px rgba(1,52,64,0.3); }
.home-hero__cred { font-size:12.5px; line-height:1.6; letter-spacing:0.02em; color:var(--turquoise-soft); margin:18px 0 0; }
.home-hero__deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.home-hero__water { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.16; }
.home-hero__wm { position:absolute; right:-70px; bottom:-30px; width:340px; height:auto; opacity:0.08; }
.home-hero__mark { width:56px; height:auto; margin:0 0 26px; }
.home-hero__eyebrow { font-size:12px; letter-spacing:0.28em; text-transform:uppercase; color:var(--turquoise-soft); margin:0 0 20px; }
@media (min-width:1040px) {
  .home-hero { display:grid; grid-template-columns:1fr 1fr; min-height:660px; }
  .home-hero__panel { order:1; min-height:0; justify-content:center; padding:0 64px; overflow:hidden; }
  .home-hero__media { position:relative; inset:auto; order:2; background:var(--turquoise-tint); }
  .home-hero__img { position:absolute; inset:0; object-position:34% 50%; }
  .home-hero__grade { background:linear-gradient(to right, rgba(1,52,64,0.4) 0%, rgba(1,52,64,0.06) 26%, rgba(1,52,64,0) 60%); }
  .home-hero__col { position:relative; max-width:520px; padding:76px 0; }
  .home-hero__col::before { display:none; } /* the shoulder is a 390pt device only: the desktop column is flat ink */
  .home-hero__h1 { font-size:66px; line-height:1.02; margin:0 0 24px; }
  .home-hero__lead { font-size:21px; line-height:1.62; color:rgba(253,252,250,0.92); margin:0 0 34px; max-width:38ch; }
  .home-hero__btns { gap:14px; margin-bottom:30px; }
  .home-hero__wa { flex:none; min-width:0; padding:0 30px; }
  .home-hero__ghost { height:58px; padding:0 28px; font-size:16px; border-radius:var(--radius); }
  .home-hero__cred { font-size:13px; line-height:1.7; margin:0; }
}

/* prose: left-aligned on foam at 390pt; a two-column asymmetric grid at 1440 whose body carries the
   longer card 1g paragraphs. */
.home-prose { background:var(--foam-white); padding:46px 24px 40px; }
.home-prose__h { font-size:34px; line-height:1.16; font-weight:var(--weight-display); color:var(--ocean-ink); margin:0 0 22px; }
.home-prose__body p { font-size:17.5px; line-height:1.8; color:var(--ink-70); margin:0 0 16px; }
.home-prose__body p:last-child { margin-bottom:0; }
@media (min-width:1040px) {
  .home-prose { padding:88px 40px 76px; }
  .home-prose__grid { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:start; }
  .home-prose__glyph { width:34px; margin:0 0 20px; }
  .home-prose__eyebrow { margin:0 0 16px; }
  .home-prose__h { font-size:44px; line-height:1.12; margin:0; }
  .home-prose__body { padding-top:8px; }
  .home-prose__body p { font-size:19px; line-height:1.85; margin:0 0 20px; }
}

/* the situation rail: a scroll-snap strip at 390pt, a four-up grid at 1440. Card 1b draws the
   "Swipe through" line in ink 50, which computes 3.59:1 against the cream-sand ground, below the
   4.5:1 AA floor; it ships in ink 70 (5.9:1). The goal condition outranks the drawn value. */
.home-rail { background:var(--cream-sand) url('/assets/textures/sand.webp') center/cover; padding:44px 0 40px; overflow:hidden; }
.home-rail__head { padding:0 24px 22px; }
.home-rail__h { font-size:30px; line-height:1.18; font-weight:var(--weight-heading); color:var(--ocean-ink); margin:0 0 6px; }
.home-rail__swipe { font-size:15px; line-height:1.65; color:var(--ink-70); margin:0; }
/* scroll-padding-left matches the strip's own left padding: scroll-snap-align:start snaps to the
   SCROLLPORT edge, not to the padding edge, so without it the browser immediately eats the 24px
   gutter on load and card one sits flush against the screen edge, out of line with the heading
   above it. Caught by measuring the first card's x, which was 0 rather than 24. */
.home-rail__strip { display:flex; gap:14px; overflow-x:auto; padding:0 24px 14px; scroll-snap-type:x mandatory; scroll-padding-left:24px; -webkit-overflow-scrolling:touch; }
.rail-card { flex:none; width:216px; scroll-snap-align:start; background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:0 2px 8px rgba(1,52,64,0.05); }
.rail-card__media { height:120px; overflow:hidden; background:var(--turquoise-tint); }
.rail-card__media img { width:100%; height:100%; object-fit:cover; }
.rail-card__body { padding:16px 16px 18px; }
.rail-card__title { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:21px; line-height:1.2; color:var(--ocean-ink); margin:0 0 8px; }
.rail-card__desc { font-size:14px; line-height:1.6; color:var(--ink-70); margin:0 0 12px; }
.rail-card__meta { font-size:13px; color:var(--deep-aqua-press); }
.home-rail__foot { display:flex; align-items:center; justify-content:space-between; padding:8px 24px 0; }
/* The active dot stretches, so width is the animated property. contain:layout confines the reflow
   to this four-element strip rather than letting it walk the section, which matters because the
   class is toggled from a scroll handler. Under reduced motion the dot switches without animating. */
.home-rail__dots { display:flex; gap:6px; align-items:center; contain:layout; }
.home-rail__dots span { width:5px; height:5px; border-radius:99px; background:var(--turquoise-soft); transition:width .25s var(--ease-out), background .25s; }
.home-rail__dots span.is-active { width:22px; background:var(--ocean-turquoise); }
@media (prefers-reduced-motion: reduce) { .home-rail__dots span { transition:none; } }
.home-rail__all-m { font-size:14.5px; }
@media (min-width:1040px) {
  .home-rail { padding:80px 40px 84px; }
  .home-rail__inner { max-width:1140px; margin:0 auto; }
  .home-rail__head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding:0 0 38px; }
  .home-rail .ho-open { gap:14px; margin-bottom:16px; }
  .home-rail .ho-glyph { width:32px; }
  .home-rail__h { font-size:40px; line-height:1.14; margin:0; }
  .home-rail__all { font-size:16px; white-space:nowrap; padding-bottom:8px; }
  .home-rail__strip { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; overflow:visible; padding:0; }
  .rail-card { width:auto; }
  .rail-card__media { height:168px; }
  .rail-card__body { padding:22px 22px 26px; }
  .rail-card__title { font-size:23px; margin-bottom:10px; }
  .rail-card__desc { font-size:15.5px; line-height:1.7; margin-bottom:14px; }
  .rail-card__meta { font-size:14px; }
}

/* three quiet steps, phone only (card 1g does not draw them). An ordered list carries the sequence
   for assistive tech; the oversized turquoise-soft numerals are aria-hidden decoration on top. */
.home-steps { background:var(--foam-white); padding:44px 24px 40px; }
.home-steps .ho-open { margin-bottom:26px; }
.home-steps__list { list-style:none; margin:0; padding:0; }
.home-steps__row { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:26px 0; border-top:1px solid var(--dune); }
.home-steps__row:first-child { border-top:0; padding-top:0; }
.home-steps__row:last-child { padding-bottom:0; }
.home-steps__num { font-family:var(--font-display); font-weight:var(--weight-display); font-size:46px; line-height:0.9; color:var(--turquoise-soft); }
.home-steps__row p { font-size:17px; line-height:1.75; color:var(--ink-70); margin:0; }

/* the dark "you reach me" band. calm-water at .26 on the phone, .2 at 1440 (mock-up values per
   band). The 420px centred watermark is desktop-only; the phone band carries the 64px content mark
   alone, so each band keeps exactly one oversized mark (heron rule 3). */
.home-reach { position:relative; background:var(--ocean-ink); overflow:hidden; }
.home-reach__water { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.26; }
.home-reach__wm { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:420px; height:auto; opacity:0.07; }
.home-reach__inner { position:relative; padding:50px 24px 46px; }
.home-reach__mark { width:64px; height:auto; margin:0 0 22px; opacity:0.95; }
/* Card 1g draws this eyebrow in heron light, which measures 3.07:1 worst-case over the .2 water
   texture, below AA. Turquoise soft (6.5:1 measured) is the nearest system colour that clears. */
.home-reach__eyebrow { color:var(--turquoise-soft); margin:0 0 20px; }
.home-reach__h { font-size:31px; line-height:1.25; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 18px; }
.home-reach__p { font-size:16.5px; line-height:1.75; color:var(--turquoise-soft); margin:0; }
@media (min-width:1040px) {
  .home-reach__water { opacity:0.2; }
  .home-reach__inner { max-width:820px; margin:0 auto; padding:92px 0 88px; text-align:center; }
  .home-reach__mark { margin:0 auto 28px; }
  .home-reach__h { font-size:46px; line-height:1.14; margin:0 0 22px; }
  .home-reach__p { font-size:19px; line-height:1.8; }
}

/* fees: a hairline card list on the sand ground at 390pt; a 2x2 figure grid beside the explanation
   on foam at 1440. One data set feeds both. */
.home-fees { background:var(--cream-sand) url('/assets/textures/sand.webp') center/cover; padding:44px 24px 42px; }
.home-fees__glyph { width:26px; }
.home-fees__headrow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px; }
.home-fees__h { font-size:29px; line-height:1.2; font-weight:var(--weight-heading); color:var(--ocean-ink); margin:0; }
.home-fees__link { font-size:14px; white-space:nowrap; }
.home-fees__list { background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); overflow:hidden; }
.home-fees__row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid var(--dune); }
.home-fees__row:last-child { border-bottom:0; }
.home-fees__svc { font-size:16.5px; color:var(--ocean-ink); margin:0; }
.home-fees__sub { font-size:13px; color:var(--ink-50); margin:3px 0 0; }
.home-fees__amt { font-family:var(--font-display); font-size:27px; color:var(--deep-aqua-press); line-height:1; flex:none; }
.home-fees__note { font-size:14.5px; line-height:1.7; color:var(--ink-70); margin:16px 0 0; }
@media (min-width:1040px) {
  .home-fees { background:var(--foam-white); padding:84px 40px; }
  .home-fees__grid { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
  .home-fees__cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .home-fees__card { background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); padding:26px 24px; }
  .home-fees__fig { font-family:var(--font-display); font-size:38px; color:var(--deep-aqua-press); line-height:1; margin:0 0 10px; }
  .home-fees__lbl { font-size:15px; color:var(--ink-70); margin:0; }
  .home-fees__open { display:block; }
  .home-fees__open .ho-eyebrow { margin:0 0 16px; }
  .home-fees__glyph { width:32px; margin:0 0 18px; }
  .home-fees__h { font-size:40px; line-height:1.14; margin:0 0 20px; }
  .home-fees__note { font-size:18px; line-height:1.8; margin:0 0 26px; }
  .home-fees__cta { height:54px; padding:0 26px; }
}

/* the portrait, phone only. */
.home-hannah { background:var(--foam-white); padding:0 0 44px; }
.home-hannah__figure { position:relative; height:420px; overflow:hidden; }
.home-hannah__img { width:100%; height:100%; object-fit:cover; object-position:center 26%; }
.home-hannah__grade { position:absolute; inset:0; background:linear-gradient(to top, rgba(1,52,64,0.86) 0%, rgba(1,52,64,0.3) 40%, rgba(1,52,64,0) 70%); }
.home-hannah__cap { position:absolute; left:0; right:0; bottom:0; padding:0 24px 24px; }
.home-hannah__name { font-family:var(--font-display); font-weight:var(--weight-display); font-size:30px; color:var(--foam-white); margin:0 0 6px; }
.home-hannah__cred { font-size:13px; letter-spacing:0.04em; color:var(--turquoise-soft); margin:0; }
.home-hannah__body { padding:28px 24px 0; }
.home-hannah__p { font-size:17.5px; line-height:1.8; color:var(--ink-70); margin:0 0 18px; }
.home-hannah__chips { display:flex; flex-wrap:wrap; gap:8px; }
.home-hannah__chip { font-size:12.5px; color:var(--deep-aqua-press); background:var(--turquoise-tint); border:1px solid var(--turquoise-soft); border-radius:var(--radius-full); padding:8px 14px; }

/* the closing band, phone only. Exactly one oversized watermark (230px at .09, card 1b). */
.home-close { position:relative; background:var(--ocean-ink); overflow:hidden; text-align:center; padding:56px 24px 52px; }
.home-close__wm { position:absolute; left:50%; top:34px; transform:translateX(-50%); width:230px; height:auto; opacity:0.09; }
.home-close__inner { position:relative; }
.home-close__h { font-size:34px; line-height:1.16; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 16px; }
.home-close__sub { font-size:16.5px; line-height:1.7; color:var(--turquoise-soft); margin:0 0 26px; }
.home-close__wa { display:flex; width:100%; height:56px; font-size:17px; padding:0 18px; border-radius:var(--radius); }
.home-close__email { font-size:14px; color:var(--heron-light); margin:16px 0 0; }
.home-close__email a { color:var(--heron-light); text-decoration:underline; text-underline-offset:2px; }
.home-close__email a:hover { color:var(--turquoise-soft); }

/* ---------- cards / grids ----------
   Retired with the v6 pages they belonged to (25 July 2026): .card-grid, .step-num--lg and
   .fee-glance* with the home rebuild (cards 1b/1g); .svc-card*, .steps-grid, .step-num,
   .connector, .ov-card*, .online-note*, .situation-*, .format-* and .banner--svc with the
   services and service-page rebuild (cards 1e/1f). Every rule above was checked against the
   built HTML for zero live uses before removal. */
.card-lift { transition:transform .26s, box-shadow .26s, border-color .26s; }
.card-lift:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--turquoise-soft); }


/* ---------- services overview ---------- */

/* ---------- services overview (card 1e) and the service page (card 1f), 25 July 2026 ----------
   Both pages put their chrome INSIDE the banner: the header lies over the banner image and its
   left slot is a back pill rather than the brand lockup. Above 1040px the ordinary card 1g header
   returns, because at that width the full nav bar is the right chrome. */
@media (max-width:1039.98px) {
  .site-header--banner { position:absolute; top:0; left:0; right:0; background:none; border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none; z-index:20; }
  .site-header--banner .brand { display:none; }
  .site-header--banner .hamburger span { background:var(--foam-white); }
  .site-header--banner .mobile-panel { background:var(--foam-white); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:0 18px 40px rgba(1,52,64,.28); }
  .site-header--banner .mobile-panel .hamburger span { background:var(--ocean-ink); }
}
/* Ink tint at 0.68, not the card's lighter wash: the pill sits at the very top of the banner where
   the scrim is thinnest and the collage brightest, and 0.55 measured 4.28:1 over the services
   banner. Same lesson as the home MENU pill in phase 2, on a different control. */
.back-pill { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 10px; border-radius:var(--radius-full); background:rgba(1,52,64,0.68); border:1px solid rgba(253,252,250,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--foam-white); font-size:13.5px; text-decoration:none; flex:none; transition:background .2s; }
.back-pill:hover { background:rgba(1,52,64,0.82); }
/* After the base rule, not before it: at equal specificity the later declaration wins, and the
   first version of this put the media query first, so the pill stayed visible at 1440 next to the
   full nav bar. Caught by measuring, not by reading. */
@media (min-width:1040px) { .back-pill { display:none; } }
.chrome-mark { width:32px; height:auto; opacity:0.95; }

/* the services banner */
.sv-banner { position:relative; height:400px; background:var(--ocean-ink); overflow:hidden; display:flex; align-items:flex-end; }
.sv-banner__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* The card's ramp eases out at 34%, but the text zone reaches roughly 40% up a 400px banner, so the
   eyebrow and pill ended up over a thin scrim and measured below AA. The dark band now holds to 42%
   and eases above it: same shape, same image reveal through the upper half, but the ramp turns where
   the text actually stops rather than where the card guessed. */
.sv-banner__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(1,52,64,0.95) 0%, rgba(1,52,64,0.9) 42%, rgba(1,52,64,0.4) 68%, rgba(1,52,64,0.1) 86%, rgba(1,52,64,0.34) 100%); }
.sv-banner__wrap { position:relative; width:100%; padding:0 24px 26px; }
.sv-banner__mark { width:36px; height:auto; margin:0 0 14px; opacity:0.95; }
.sv-banner__h1 { font-size:40px; line-height:1.05; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 12px; }
.sv-banner__sub { font-size:16.5px; line-height:1.6; color:rgba(253,252,250,0.92); margin:0; max-width:46ch; }
@media (min-width:1040px) {
  .sv-banner { height:auto; min-height:400px; }
  .sv-banner__wrap { max-width:1140px; margin:0 auto; padding:56px 40px; }
  .sv-banner__mark { width:48px; }
  .sv-banner__h1 { font-size:56px; }
  .sv-banner__sub { font-size:19px; }
}

/* "Not sure which one? Ask me." Hannah's voice, so the roundel is the avatar (heron rule 2). */
.sv-ask { background:var(--foam-white); padding:26px 24px 8px; }
.ask-card { display:flex; align-items:center; gap:12px; background:var(--turquoise-tint); border:1px solid var(--turquoise-soft); border-radius:var(--radius-lg); padding:14px 16px; text-decoration:none; color:var(--deep-aqua-press); transition:background .2s, border-color .2s; }
.ask-card:hover { background:var(--turquoise-soft); border-color:var(--ocean-turquoise); }
.ask-card__roundel { flex:none; width:40px; height:40px; }
.ask-card__text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ask-card__title { font-size:15.5px; line-height:1.3; color:var(--ocean-ink); }
.ask-card__sub { font-size:13px; line-height:1.3; color:var(--deep-aqua-press); }
@media (min-width:1040px) { .sv-ask { padding:36px 40px 0; } .ask-card { max-width:1140px; margin:0 auto; padding:18px 22px; } }

/* the three groups. "For us" sits on sand so the sets separate without rules. */
.sv-group { padding:26px 0 0; }
.sv-group--foam { background:var(--foam-white); }
.sv-group--sand { background:var(--cream-sand) url('/assets/textures/sand.webp') center/cover; margin-top:26px; }
.sv-group__open { padding:0 24px 14px; margin:0; gap:10px; }
.sv-group__glyph { width:24px; }
.sv-rows { border-top:1px solid var(--dune); }
.sv-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; min-height:72px; padding:17px 24px; border-bottom:1px solid var(--dune); text-decoration:none; transition:background .18s; }
.sv-group--foam .sv-row:hover { background:var(--turquoise-tint); }
.sv-group--sand .sv-row { background:rgba(253,252,250,0.5); }
.sv-group--sand .sv-row:hover { background:var(--foam-white); }
.sv-row__text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.sv-row__title { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:20px; line-height:1.2; color:var(--ocean-ink); }
/* Card 1e draws the row description and the format line in ink 50. Over the 0.5-foam-on-sand ground
   of the "for us" group that measures below AA, so both ship in ink 70 across all three groups:
   one value, not a per-group exception, because a description should not change colour by section. */
.sv-row__desc { font-size:13.5px; line-height:1.5; color:var(--ink-70); }
.sv-row__price { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.sv-row__fee { font-family:var(--font-display); font-size:20px; line-height:1; color:var(--deep-aqua-press); }
.sv-row__fmt { font-size:11px; color:var(--ink-70); }
@media (min-width:1040px) {
  .sv-group { padding:44px 40px 0; }
  .sv-group--sand { margin-top:0; padding-bottom:44px; }
  .sv-group__open, .sv-rows { max-width:1140px; margin:0 auto; }
  .sv-group__open { padding:0 0 16px; }
  .sv-row { padding:20px 16px; border-radius:var(--radius); }
  .sv-row__title { font-size:22px; }
  .sv-row__desc { font-size:15px; }
  .sv-row__fee { font-size:22px; }
}

.sv-online { background:var(--turquoise-tint); padding:30px 24px 32px; margin-top:26px; }
.sv-online__head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.sv-online__head img { flex:none; object-fit:contain; }
.sv-online__h { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:24px; color:var(--ocean-ink); margin:0; }
.sv-online__p { font-size:16px; line-height:1.75; color:var(--ink-70); margin:0 0 16px; }
.sv-online__link { font-size:15px; }
@media (min-width:1040px) { .sv-online { padding:56px 40px; margin-top:0; } .sv-online__inner { max-width:1140px; margin:0 auto; } }

/* ---------- the service page (card 1f) ---------- */
.sp-banner { position:relative; height:520px; background:var(--ocean-ink); overflow:hidden; display:flex; align-items:flex-end; }
.sp-banner__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* Section 6.9: the scrim must hold roughly 0.90 alpha across the whole text zone. On a 520px banner
   the eyebrow tops out around 46%, above the card's 40% turn, and it measured 3.83:1 there. The
   0.90 band now runs to 46%, which is what the spec asks for and what the card's own drawing was
   approximating. Everything above the text is untouched, so the collage still reads. */
.sp-banner__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(1,52,64,0.95) 0%, rgba(1,52,64,0.9) 46%, rgba(1,52,64,0.5) 70%, rgba(1,52,64,0.16) 87%, rgba(1,52,64,0.38) 100%); }
.sp-banner__wrap { position:relative; width:100%; padding:0 24px 28px; }
.sp-banner__eyebrow { font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--turquoise-soft); margin:0 0 14px; }
.sp-banner__h1 { font-size:42px; line-height:1.06; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 14px; }
.sp-banner__sub { font-size:17.5px; line-height:1.55; font-weight:300; color:rgba(253,252,250,0.94); margin:0 0 20px; max-width:34ch; }
.sp-chips { display:flex; gap:8px; flex-wrap:wrap; }
.sp-chip { font-size:12.5px; color:var(--foam-white); border:1px solid rgba(253,252,250,0.5); border-radius:var(--radius-full); padding:7px 13px; }
@media (min-width:1040px) {
  .sp-banner { height:auto; min-height:560px; }
  .sp-banner__wrap { max-width:1140px; margin:0 auto; padding:64px 40px; }
  .sp-banner__h1 { font-size:60px; }
  .sp-banner__sub { font-size:21px; }
}

.sp-callout { background:var(--foam-white); padding:40px 24px 34px; text-align:center; }
.sp-callout__h { font-family:var(--font-display); font-weight:var(--weight-display); font-size:30px; line-height:1.22; color:var(--ocean-ink); margin:0 0 14px; }
.sp-callout__p { font-size:16.5px; line-height:1.7; color:var(--ink-70); margin:0; }
@media (min-width:1040px) { .sp-callout { padding:72px 40px 64px; } .sp-callout__h { font-size:40px; max-width:22ch; margin-inline:auto; } .sp-callout__p { font-size:19px; } }

/* "Maybe this is you": one bordered list with turquoise-soft dots, replacing four separate cards. */
.sp-maybe { background:var(--cream-sand) url('/assets/textures/sand.webp') center/cover; padding:38px 24px; }
.sp-glyph { width:24px; }
.sp-list { list-style:none; margin:0; padding:0; background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); overflow:hidden; }
.sp-list__row { display:grid; grid-template-columns:10px 1fr; gap:14px; align-items:start; padding:16px 18px; border-bottom:1px solid var(--dune); }
.sp-list__row:last-child { border-bottom:0; }
.sp-list__dot { width:10px; height:10px; border-radius:50%; background:var(--turquoise-soft); box-shadow:0 0 0 4px var(--turquoise-tint); margin-top:6px; }
.sp-list__row p { font-size:16px; line-height:1.65; color:var(--ocean-ink); margin:0; }
.sp-maybe__cap { font-size:14px; line-height:1.7; color:var(--ink-70); margin:14px 0 0; text-align:center; }
@media (min-width:1040px) { .sp-maybe { padding:72px 40px; } .sp-maybe .ho-open, .sp-list, .sp-maybe__cap { max-width:820px; margin-inline:auto; } .sp-maybe .ho-open { margin-bottom:18px; } }

.sp-want { background:var(--foam-white); padding:38px 24px 34px; }
.sp-want__h { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:26px; line-height:1.2; color:var(--ocean-ink); margin:0 0 20px; }
.sp-ticks { list-style:none; margin:0; padding:0; }
.sp-ticks__row { display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; padding:13px 0; border-bottom:1px solid var(--dune); }
.sp-ticks__row:last-child { border-bottom:0; }
.sp-ticks__row p { font-size:16.5px; line-height:1.6; color:var(--ocean-ink); margin:0; }
.sp-want__cap { font-size:14px; line-height:1.7; color:var(--ink-70); margin:16px 0 0; }
@media (min-width:1040px) { .sp-want { padding:72px 40px; } .sp-want .ho-open, .sp-want__h, .sp-ticks, .sp-want__cap { max-width:820px; margin-inline:auto; } .sp-want__h { font-size:34px; } }

.sp-happens { background:var(--turquoise-tint); padding:36px 24px 34px; }
.sp-happens .ho-open { margin-bottom:22px; }
.sp-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.sp-steps__row { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.sp-steps__num { font-family:var(--font-display); font-weight:var(--weight-display); font-size:38px; line-height:0.85; color:var(--heron-light); }
.sp-steps__row p { font-size:16.5px; line-height:1.7; color:var(--ink-70); margin:0; }
.sp-steps__small { font-size:14px; line-height:1.7; color:var(--ink-70); margin:22px 0 0; }
@media (min-width:1040px) { .sp-happens { padding:72px 40px; } .sp-happens .ho-open, .sp-steps, .sp-steps__small { max-width:820px; margin-inline:auto; } }

/* "The practical facts": one card, replacing v6's wrapping format strip. */
.sp-facts { background:var(--foam-white); padding:34px 24px 36px; }
.sp-facts__card { background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 2px 8px rgba(1,52,64,0.05); }
.sp-facts__head { padding:14px 18px; background:var(--cream-sand); border-bottom:1px solid var(--dune); }
.sp-facts__head p { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-70); margin:0; }
.sp-facts__row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--dune); }
.sp-facts__row:last-child { border-bottom:0; }
.sp-facts__k { font-size:15.5px; color:var(--ink-70); flex:none; }
.sp-facts__v { font-size:15.5px; color:var(--ocean-ink); text-align:right; }
.sp-facts__link { margin-top:16px; font-size:15px; }
@media (min-width:1040px) { .sp-facts { padding:0 40px 72px; } .sp-facts__inner { max-width:820px; margin:0 auto; } }

/* The closing band carries no button: the docked bar holds this page's action (one primary, not two).
   The hairline is what stops it dissolving into the footer: both are ocean ink and contiguous, so
   without an edge a page ends in one undifferentiated dark mass and the band stops reading as a band. */
.sp-close { background:var(--ocean-ink); padding:48px 24px 46px; text-align:center; border-bottom:1px solid rgba(253,252,250,0.12); }
.sp-close__mark { width:54px; height:auto; margin:0 auto 20px; opacity:0.94; }
.sp-close__h { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:29px; line-height:1.18; color:var(--foam-white); margin:0 0 22px; }
.sp-close__p { font-size:16.5px; line-height:1.7; color:var(--turquoise-soft); margin:0 0 22px; }
.sp-close__cred { font-size:14px; color:var(--heron-light); margin:0; }
@media (min-width:1040px) { .sp-close { padding:88px 40px; } .sp-close__h { font-size:40px; max-width:20ch; margin-inline:auto; margin-bottom:22px; } }

/* ---------- banners ---------- */
/* Scrim strengthened to clear AA at the real text positions. The text block is bottom-anchored but
   tall, so the eyebrow tops out ~79% up the banner over near-white surf; the dark band must hold to
   ~80% and only ease in the top 20% (above the text). The text-shadow below is real-world insurance
   and does not count toward the WCAG ratio. */

/* ---------- service block-kit ---------- */
.explainers { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:34px; }
.exp-points { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.exp-point { display:flex; gap:12px; align-items:flex-start; }
.exp-point p { font-size:16.5px; line-height:1.7; color:var(--ink-70); margin:0; }
.exp-dot { flex:none; margin-top:9px; width:7px; height:7px; border-radius:50%; background:var(--ocean-turquoise); }
.exp-small { font-size:14.5px; line-height:1.7; color:var(--ink-70); margin:16px 0 0; }
.enquire-pill { display:inline-block; font-size:15px; color:var(--deep-aqua-press); background:var(--foam-white); border:1px solid var(--turquoise-soft); border-radius:var(--radius-full); padding:11px 24px; margin:0; }
.bs-panels { max-width:1060px; margin:clamp(36px,5vw,56px) auto 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:clamp(18px,2.5vw,28px); }
.bs-panel { display:flex; flex-direction:column; }
.bs-panel__img { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--dune); box-shadow:var(--shadow-sm); background:var(--turquoise-tint); }
.bs-panel__img img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
/* Both markers carry 0.88 ink. The base rule used to sit at 0.42, which only --top overrode, so
   --low composited to roughly rgb(132,161,167) over the pale surf in the panel image and measured
   2.68:1 against its foam label. The Scrim Rule applies to a label chip as much as to a banner:
   the text-shadow is insurance, not the mechanism. */
.bs-marker { position:absolute; left:14px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--foam-white); background:rgba(1,52,64,0.88); backdrop-filter:blur(2px); padding:4px 10px; border-radius:var(--radius-full); text-shadow:0 1px 6px rgba(1,52,64,0.7); }
.bs-marker--top { top:12px; }
.bs-marker--low { bottom:12px; }
.bs-panel__label { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:19px; color:var(--ocean-ink); margin:16px 0 8px; }
.bs-panel__cap { font-size:15px; line-height:1.7; color:var(--ink-70); margin:0; }

/* ---------- crisis footer ---------- */
.crisis { background:var(--cream-sand); padding:clamp(40px,6vw,64px) clamp(18px,4vw,40px); border-top:1px solid var(--dune); }
.crisis__inner { max-width:760px; margin:0 auto; }
.crisis__h { font-size:clamp(20px,2.6vw,26px); margin-bottom:12px; }
.crisis__lead { font-size:16px; line-height:1.8; color:var(--ink-70); margin:0 0 18px; }
.crisis__lines { display:flex; flex-direction:column; gap:10px; }
.crisis__lines p { font-size:15.5px; line-height:1.6; color:var(--ocean-ink); margin:0; }
.crisis__lines strong { font-weight:600; }

/* ---------- fees ---------- */

/* ---------- faq ---------- */
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--pure-white); border:1px solid var(--dune); border-radius:var(--radius); overflow:hidden; }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; background:none; border:none; cursor:pointer; padding:20px clamp(18px,3vw,26px); font-family:var(--font-display); font-weight:var(--weight-heading); font-size:19px; color:var(--ocean-ink); }
.faq-icon { flex:none; display:inline-flex; }
.faq-icon--minus { display:none; }
.faq-item.is-open .faq-icon--plus { display:none; }
.faq-item.is-open .faq-icon--minus { display:inline; }
.faq-a { display:none; padding:0 clamp(18px,3vw,26px) 22px; }
.faq-item.is-open .faq-a { display:block; animation:hmcFadeUp 320ms var(--ease-out); }
.faq-a p { font-size:16.5px; line-height:1.8; color:var(--ink-70); margin:0; }
.faq-a__link { margin-top:14px; }

/* ---------- contact ---------- */
.contact-methods { display:flex; flex-direction:column; gap:14px; }
.method { display:flex; align-items:center; gap:16px; border-radius:var(--radius); padding:20px 22px; text-decoration:none; }
.method--wa { background:var(--whatsapp-green); transition:background .2s; }
.method--wa:hover { background:var(--whatsapp-green-press); }
.method--wa .method__t, .method--wa .method__s { color:#fff; }
.method--quiet { background:var(--cream-sand); }
.method__t { display:block; font-size:17px; }
.method__s { display:block; font-size:14px; opacity:0.9; }
.method__t--ink { color:var(--ocean-ink); }
.method__s--ink { color:var(--ink-70); opacity:1; }
/* .hp, the contact form's honeypot field, removed 26 July 2026: the form itself went in June and
   there is no <input> anywhere on the site. */

.contact-map { margin-top:20px; }
.map-embed { position:relative; height:clamp(300px,40vw,360px); border-radius:var(--radius); overflow:hidden; border:1px solid var(--dune); background:var(--turquoise-tint); }
.map-embed iframe { display:block; width:100%; height:100%; }
.map-embed__link { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; min-height:44px; background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-sm); padding:6px 12px; font-size:13px; color:var(--deep-aqua-press); text-decoration:none; }

/* ---------- booking (behind BOOKING_ENABLED in _build/data.mjs, currently false) ----------
   These rules have no uses in the BUILT HTML, which is exactly what a switched-off feature looks
   like. They style bookBody() in _build/pagesB.mjs, which is still imported and ready; flipping the
   flag brings the /book/ page and its links back. Do not remove them as dead code: the build source
   is the source of truth here, not the generated output. */
.booking-card { background:var(--pure-white); border:1px solid var(--dune); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.booking-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid var(--dune); background:var(--cream-sand); }
.booking-card__tag { font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-50); }
.booking-card__body { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:clamp(20px,3vw,36px); padding:clamp(22px,3vw,34px); }
.booking-cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-nav { width:30px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--dune); display:flex; align-items:center; justify-content:center; color:var(--ink-50); }
.booking-cal__dow { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; font-size:12px; color:var(--ink-50); text-align:center; margin-bottom:6px; }
.booking-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-day { text-align:center; padding:9px 0; border-radius:var(--radius-sm); font-size:13.5px; }
.cal-day--avail { color:var(--deep-aqua-press); background:var(--turquoise-tint); border:1px solid var(--turquoise-soft); }
.cal-day--sel { color:var(--foam-white); background:var(--ocean-turquoise); border:1px solid var(--ocean-turquoise); }
.cal-day--wknd { color:var(--ink-50); }
.booking-cal__legend { display:flex; gap:16px; margin-top:16px; font-size:12px; color:var(--ink-50); }
.booking-cal__legend span { display:inline-flex; align-items:center; gap:6px; }
.swatch { width:12px; height:12px; border-radius:var(--radius-sm); }
.swatch--avail { background:var(--turquoise-tint); border:1px solid var(--turquoise-soft); }
.swatch--sel { background:var(--ocean-turquoise); }
.slots { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr)); gap:10px; margin-bottom:22px; }
.slot { text-align:center; padding:12px 0; border-radius:var(--radius-sm); font-size:15px; }
.slot--avail { border:1px solid var(--turquoise-soft); color:var(--deep-aqua-press); background:var(--turquoise-tint); }
.slot--sel { border:1px solid var(--ocean-turquoise); color:var(--foam-white); background:var(--ocean-turquoise); }
.slot--gone { border:1px solid var(--dune); color:var(--ink-50); text-decoration:line-through; }
.booking-confirm { display:block; width:100%; text-align:center; }

/* ---------- intro video (click to play, About page) ---------- */
.intro-video { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); background:var(--ocean-ink); aspect-ratio:16/9; }
.intro-video__el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--ocean-ink); }
.intro-video__play { position:absolute; top:0; left:0; right:0; bottom:44px; margin:auto; width:64px; height:64px; border-radius:var(--radius-full); background:rgba(1,52,64,0.5); border:1.5px solid rgba(253,252,250,0.7); display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(2px); transition:background .2s, transform .2s; }
.intro-video__play svg { transform:translateX(2px); }
.intro-video__play:hover { background:rgba(1,52,64,0.68); transform:scale(1.05); }
.intro-video.is-playing .intro-video__play { display:none; }

/* ---------- reveal animation ---------- */
.js [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.js [data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity:1 !important; transform:none !important; }
}

@keyframes hmcFadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ---------- legal pages (privacy / POPIA, PAIA) ---------- */
.legal-prose { max-width:720px; margin:0 auto; }
.legal-prose > h2 { font-size:clamp(21px,2.8vw,27px); line-height:1.28; font-family:var(--font-display); font-weight:var(--weight-heading); color:var(--ocean-ink); margin:40px 0 14px; }
.legal-prose > h2:first-child { margin-top:0; }
.legal-prose h3 { font-size:18px; line-height:1.35; font-weight:600; color:var(--ocean-ink); margin:26px 0 10px; }
.legal-prose p { font-size:17px; line-height:1.8; color:var(--ink-70); margin:0 0 18px; }
.legal-prose ul { margin:0 0 18px; padding-left:22px; }
.legal-prose li { font-size:17px; line-height:1.8; color:var(--ink-70); margin:0 0 8px; }
.legal-prose a { color:var(--deep-aqua-press); text-decoration:underline; text-underline-offset:2px; }
.legal-prose a:hover { color:var(--ocean-ink); }
/* .legal-ph and .legal-note removed 26 July 2026: drafting furniture for placeholder text and
   editor's notes on the privacy and PAIA pages. Both pages ship finished copy and neither class
   appears in the built HTML. */
.legal-meta { font-size:15px; color:var(--ink-50); margin-top:28px; }

/* legal links in the footer bottom row */
.footer-legal a { color:var(--heron-light); text-decoration:underline; text-underline-offset:2px; padding-block:14px; transition:color .18s; }
.footer-legal a:hover { color:var(--turquoise-soft); }

/* ============================================================================
   PHASE 5, 25 July 2026: the six pages the approved mock-up did not draw.
   Fees and FAQ follow card 1e (list pages); contact, about, how I work and
   registered counsellor follow card 1f (content pages).

   Cards 1e and 1f open on a photographic banner because those pages HAVE a
   collage. These six do not, and section 6.11 is explicit that no new asset is
   needed, so .pg-open is the card 1f banner with the photograph removed: the
   site's own ink ground, the calm-water texture at the same value the other
   dark bands use, and one oversized heron watermark (rule 3). It is much
   shorter than 520px, which keeps the answer these pages exist to give close
   to the fold.

   These pages keep the ORDINARY sticky header, not the banner overlay. The
   overlay exists so a photograph can run to the top of the screen, and it
   gives up stickiness to do it. With no photograph there is nothing to run to
   the top, and these are the site's longest pages, so they keep persistent
   navigation instead. The overlay stays where a photograph and a parent page
   justify it: the services overview and the nine service pages.
   ============================================================================ */

/* ---- the page opener ---- */
.pg-open { position:relative; background:var(--ocean-ink); overflow:hidden; padding:34px 24px 32px; }
.pg-open__water { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.26; }
/* Anchored to the right edge and vertically centred, NOT to a corner. The opener's height varies
   from 200px (how I work) to 431px (about at 1440), and a corner-anchored mark is cut at a different
   point on every page, which on the short bands reads as a stray shape rather than as the heron. */
.pg-open__wm { position:absolute; right:-38px; top:50%; transform:translateY(-50%); width:200px; height:auto; opacity:0.08; }
.pg-open__inner { position:relative; }
.pg-open__eyebrow-row { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.pg-open__glyph { width:26px; height:auto; flex:none; opacity:0.95; }
.pg-open__eyebrow { font-family:var(--font-body); font-weight:400; font-size:11.5px; letter-spacing:0.26em; text-transform:uppercase; color:var(--turquoise-soft); margin:0; line-height:1.4; }
.pg-open__h1 { font-size:34px; line-height:1.1; font-weight:var(--weight-display); color:var(--foam-white); margin:0 0 14px; }
.pg-open__sub { font-size:16.5px; line-height:1.6; color:rgba(253,252,250,0.92); margin:0; max-width:46ch; }
.pg-open__chips { margin-top:20px; }
@media (min-width:1040px) {
  .pg-open { padding:64px 40px 60px; }
  .pg-open__water { opacity:0.2; }
  .pg-open__wm { width:300px; right:-50px; }
  .pg-open__inner { max-width:1140px; margin:0 auto; }
  .pg-open__h1 { font-size:52px; max-width:20ch; }
  .pg-open__sub { font-size:19px; }
}

/* ---- the ask card wrapper (card 1e), on the two list pages ---- */
.pg-ask { background:var(--foam-white); padding:26px 24px 8px; }
/* 820px, not the services overview's 1140: on these pages the ask card introduces content set to
   820, and a card wider than the thing it introduces reads as a banner rather than as part of the
   page. .sv-ask keeps 1140 because the services rows it sits above are 1140 too. */
@media (min-width:1040px) { .pg-ask { padding:36px 40px 0; } .pg-ask .ask-card { max-width:820px; margin:0 auto; padding:18px 22px; } }

/* ---- the generic content section ----
   One component with three grounds, replacing the .sec / .sec--foam stack and
   its inline max-widths. 24px gutters at 390pt to match every other v7
   section; 820px measure on desktop, the same as the service pages. */
.pg-sec { padding:34px 24px 36px; }
.pg-sec--foam { background:var(--foam-white); }
.pg-sec--tint { background:var(--turquoise-tint); }
.pg-sec--sand { background:var(--cream-sand) url('/assets/textures/sand.webp') center/cover; }
@media (min-width:1040px) { .pg-sec { padding:72px 40px; } .pg-sec__inner { max-width:820px; margin:0 auto; } }

.pg-p { font-size:16.5px; line-height:1.8; color:var(--ink-70); margin:0 0 18px; }
.pg-p:last-child { margin-bottom:0; }
@media (min-width:1040px) { .pg-p { font-size:17.5px; line-height:1.85; } }

.pg-cap { font-size:14px; line-height:1.7; color:var(--ink-70); margin:16px 0 0; text-align:center; }
.pg-cap--left { text-align:left; }
.pg-link { margin-top:18px; font-size:15px; }

/* A real section heading. Used on the prose pages (about, how I work, registered counsellor),
   where each section is a topic a reader navigates by rather than a category label. .ho-eyebrow
   stays for genuinely short labels ("PER SESSION", "FOR ME", the FAQ group names): at 11.5px and
   0.26em tracking a whole sentence wraps to two lines at 390pt, which is the exact defect section
   6.1 cut the eyebrow size to fix. Card 1f carries both treatments, so this is not a new pattern. */
.pg-head { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; }
.pg-head__glyph { width:26px; height:auto; flex:none; margin-top:5px; }
.pg-h { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:26px; line-height:1.22; color:var(--ocean-ink); margin:0; }
@media (min-width:1040px) { .pg-h { font-size:32px; } .pg-head { margin-bottom:20px; } }

/* The fee rows take the 820px measure the rest of the page uses, not the services overview's 1140.
   A services row carries a description that fills 1140; a fee row carries a name and a figure, and
   at 1140 the two sit 900px apart. The note beneath aligns to the same gutter as the rows. */
.pg-rows__note { font-size:14px; line-height:1.7; color:var(--ink-70); margin:16px 0 0; padding:0 24px; }
@media (min-width:1040px) {
  .pg-feerows .sv-group__open, .pg-feerows .sv-rows, .pg-feerows .pg-rows__note { max-width:820px; margin-inline:auto; }
  .pg-feerows .pg-rows__note { padding:0; }
}

/* ---- stacked note blocks (fees "good to know", about "where I work",
   how I work "who I work with") ---- */
.pg-notes { display:flex; flex-direction:column; gap:14px; }
.pg-note { background:var(--foam-white); border:1px solid var(--dune); border-radius:var(--radius-lg); padding:20px 18px; }
.pg-sec--foam .pg-note { background:var(--cream-sand); border-color:var(--dune); }
.pg-note__h { font-family:var(--font-display); font-weight:var(--weight-heading); font-size:20px; line-height:1.25; color:var(--ocean-ink); margin:0 0 10px; }
.pg-note__p { font-size:15.5px; line-height:1.75; color:var(--ink-70); margin:0; }
@media (min-width:1040px) {
  .pg-notes { flex-direction:row; gap:20px; }
  .pg-note { flex:1; padding:26px 24px; }
}

/* ---- the about portrait ---- */
.pg-portrait { margin:0 0 26px; }
.pg-portrait__img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 28%; border-radius:var(--radius-lg); display:block; background:var(--turquoise-tint); }
.pg-portrait__cap { margin:14px 0 0; }
.pg-portrait__name { font-family:var(--font-display); font-size:21px; color:var(--ocean-ink); margin:0; }
.pg-portrait__cred { font-size:13.5px; line-height:1.6; color:var(--ink-70); letter-spacing:0.02em; margin:4px 0 0; }
@media (min-width:1040px) {
  .pg-portrait { float:right; width:300px; margin:0 0 24px 36px; }
  .pg-portrait__img { aspect-ratio:4/5; }
}

/* ---- FAQ, regrouped (phase 5) ----
   Fourteen bordered cards in one column become five named groups of hairline
   rows. The accordion behaviour and its data-faq hooks are unchanged. */
.faq-group + .faq-group { border-top:1px solid var(--dune); }
.faq-list { max-width:none; margin:0; display:block; }
/* overflow:visible undoes the base rule's clip. It was there to keep content inside the v6 rounded
   card; this treatment has no radius and no fill, so all it did was crop the focus ring off the
   question button, which is the one control on this page a keyboard user has to find. */
.faq-item { background:none; border:0; border-top:1px solid var(--dune); border-radius:0; overflow:visible; }
.faq-item:first-child { border-top:0; }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; background:none; border:none; cursor:pointer; padding:18px 0; font-family:var(--font-display); font-weight:var(--weight-heading); font-size:18.5px; line-height:1.3; color:var(--ocean-ink); }
.faq-a { padding:0 0 20px; }
.faq-a p { font-size:16px; line-height:1.75; color:var(--ink-70); margin:0; }
.faq-a__link { margin-top:14px; font-size:15px; }
@media (min-width:1040px) { .faq-q { font-size:20px; padding:20px 0; } .faq-a p { font-size:16.5px; } }

/* ---- contact: the method rows keep their v6 shapes, but the phone row is now
   a real tel: link on the whole row rather than a static card, so it is both
   fully tappable and picked up by the existing Google Ads click handler. ---- */
.method--quiet:hover { background:var(--dune); }
.contact-map { margin-top:20px; }

/* ============================================================================
   READING MEASURE (26 July 2026)

   The 820 Rule is the system's reading measure, but every 820px cap was written
   inside @media (min-width:1040px), beside the desktop padding that shares the
   block. The measure therefore only existed above the breakpoint. Between about
   868px and 1039px the phone layout ran prose to the full viewport, and that
   band is every tablet in landscape, every half-screen desktop window and every
   small laptop.

   Measured at 1039px before this block: .pg-p 102ch on about / how I work /
   registered counsellor, .pg-note__p 104ch on fees, .sp-steps__row p 99ch,
   .home-fees__note 115ch, and four caption classes at 120ch, against a 65-75ch
   target. Below roughly 868px every rule here is inert, because the viewport is
   already narrower than the cap, so nothing about the 390pt composition moves.

   Scoped to max-width:1039.98px so it cannot interact with the desktop rules it
   mirrors; the two genuine desktop overruns are fixed separately below.
   ============================================================================ */
@media (max-width:1039.98px) {
  .pg-sec__inner,
  .pg-ask .ask-card,
  .pg-feerows .sv-group__open, .pg-feerows .sv-rows, .pg-feerows .pg-rows__note,
  .sp-facts__inner,
  .sp-callout__p,
  .sp-maybe .ho-open, .sp-list, .sp-maybe__cap,
  .sp-want .ho-open, .sp-want__h, .sp-ticks, .sp-want__cap,
  .sp-happens .ho-open, .sp-steps, .sp-steps__small,
  .home-prose__grid,
  .home-fees__grid,
  .home-reach__inner,
  .home-steps .ho-open, .home-steps__list,
  .home-hannah__body,
  .home-close__inner {
    max-width:820px;
    margin-inline:auto;
  }
}

/* The two paragraphs that overrun on desktop as well. Both sit in containers
   sized for something other than reading: .sv-online__inner is the 1140px
   content width (122ch at 1440), and .sp-callout__p had no cap at all while the
   heading above it is capped at 22ch, so on brainspotting it measured 122ch
   across 1349px. The heading's own cap stays where it is. */
.sv-online__inner { max-width:820px; margin-inline:auto; }
@media (min-width:1040px) { .sp-callout__p { max-width:820px; margin-inline:auto; } }

/* Secondary type needs its own measure. 820px is the measure for 17.5-19px body;
   the captions and notes run 14-16px in the same container, so the same box that
   gives body copy 72ch gives a 14px caption 100ch. Capping in ch rather than px
   is what the intent actually is, and it stays correct if a size ever changes,
   which a fifth pixel width alongside 1140 / 820 / 760 / 720 would not.
   .footer-brand__desc already caps at 30ch, so the unit is not a new idea here.
   margin-inline:auto only on the two that are centred; on the left-aligned ones
   it would push the text off its own gutter. */
.sp-steps__small,
.sp-want__cap,
.pg-cap--left,
.pg-rows__note,
.home-fees__note,
.exp-small,
.pg-note__p,
.sv-online__p { max-width:72ch; }
.pg-cap,
.sp-maybe__cap { max-width:72ch; margin-inline:auto; }
.pg-cap--left { margin-inline:0; }