/* Homepage styles for Telehealth Psychology Australia. Builds on colors_and_type.css. Australian English, no em dashes. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* `clip` on both html and body, not `hidden`: `hidden` silently turns the
   element into a scroll container, which breaks position:sticky descendants
   and scroll-anchoring. `clip` cuts the overflow without that side effect. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper-white); }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--considered-pine); color: var(--paper-white); padding: 10px 18px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top: 16px; text-decoration: none; color: var(--paper-white); }
/* Solid pine, not the 3-stop signature gradient: the system runs on one accent. */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: 120; background: var(--considered-pine); }

/* MODERN BUTTON SYSTEM */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; padding: 14px 26px; min-height: 50px; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; isolation: isolate; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-soft); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .btn-arrow { transition: transform var(--dur-base) var(--ease-soft); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }
/* The focus ring must appear instantly. `.btn` transitions box-shadow for its
   hover state, which would otherwise fade the ring in over --dur-base and
   leave keyboard users with no indicator at the start of the transition. */
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); transition: none; }
/* Shadow tints track the brand green (--considered-pine 45,75,58 / --deeper-pine
   36,61,46). They previously carried rgba(28,93,90) = #1c5d5a, the retired teal. */
.btn-primary { background: var(--considered-pine); color: var(--paper-white); box-shadow: 0 1px 2px rgba(36,61,46,0.2), 0 4px 14px rgba(45,75,58,0.18); }
/* One signal per element: the background shift carries the hover. No lift, no
   shadow bloom stacked on top of it. */
.btn-primary:hover { background: var(--deeper-pine); color: var(--paper-white); text-decoration: none; }
.btn-outline { background: var(--paper-white); color: var(--ink-charcoal); border-color: rgba(20,20,20,0.22); }
.btn-outline:hover { background: var(--ink-charcoal); color: var(--paper-white); border-color: var(--ink-charcoal); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink-charcoal); border-color: transparent; }
.btn-ghost:hover { background: var(--practice-mist); color: var(--considered-pine); }
/* Inverted (white) primary pill for buttons placed directly on a dark surface.
   Apply with `btn-primary btn-on-dark`. Pairs with the existing .btn-on-dark-outline. */
.btn-on-dark { background: var(--paper-white); color: var(--considered-pine); box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.25); }
.btn-on-dark:hover { background: var(--practice-mist); color: var(--deeper-pine); }
.btn-on-dark::after { display: none; }
.btn-on-dark-outline { background: transparent; color: var(--text-on-dark); border-color: rgba(245,249,246,0.4); }
.btn-on-dark-outline:hover { background: rgba(245,249,246,0.1); color: var(--paper-white); border-color: rgba(245,249,246,0.7); text-decoration: none; }
.btn-sm { padding: 10px 18px; min-height: 42px; font-size: 0.875rem; }

/* HEADER / NAV */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.site-header.scrolled { border-bottom-color: var(--hairline); box-shadow: 0 1px 0 rgba(0,0,0,0.02); }
.nav { max-width: var(--max-w); margin: 0 auto; padding: 12px 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; transition: opacity var(--dur-base) var(--ease-out); }
.nav-brand:hover { opacity: 0.82; }
.nav-brand img, .nav-brand .brand-logo { display: block; height: 60px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; justify-self: center; }
.nav-cta { display: flex; align-items: center; gap: 18px; justify-self: end; }
/* Quieter secondary nav control — distinct from the primary pill, not a second
   heavy button. .nav-portal is dormant while the client portal is disabled
   (owner, 2026-07-17); .nav-phone takes its slot. */
.nav-portal, .nav-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--slate); padding: 9px 4px; transition: color var(--dur-base) var(--ease-out); }
.nav-portal svg, .nav-phone svg { width: 16px; height: 16px; color: var(--quiet-stone); transition: color var(--dur-base) var(--ease-out); }
.nav-portal:hover, .nav-phone:hover { color: var(--considered-pine); text-decoration: none; }
.nav-portal:hover svg, .nav-phone:hover svg { color: var(--considered-pine); }
.nav-toggle { display: none; }
/* Header nav links pick up the single green voice on hover / current */
.nav-link::after { background: var(--considered-pine); height: 1.5px; }
.nav-link:hover { color: var(--considered-pine); }
@media (max-width: 940px) { .nav { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; } .nav-brand .brand-logo { height: 50px; } .nav-links, .nav-portal, .nav-phone { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hairline); background: var(--paper-white); border-radius: var(--radius-pill); cursor: pointer; } }
/* Small phones: the wordmark + inline CTA + hamburger no longer fit, so drop the
   redundant header "Get started" button (still available in the hamburger menu)
   to stop the toggle being pushed off-screen. */
@media (max-width: 480px) { .nav { gap: 12px; padding: 12px 16px; } .nav-cta .btn-primary { display: none; } .nav-brand .brand-logo { height: 46px; } }
.mobile-menu { display: none; position: fixed; inset: 74px 0 0; z-index: 99; background: var(--paper-white); padding: 24px 24px calc(48px + env(safe-area-inset-bottom)); flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink-charcoal); padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.mobile-menu .btn { margin-top: 20px; }
.mobile-menu .btn + .btn { margin-top: 10px; }
/* .mobile-menu a wins on specificity over .btn-primary, turning the pine
   pill's label charcoal; restore the white label the pill expects. */
.mobile-menu a.btn-primary { color: var(--paper-white); }
.mobile-menu .ahpra-note { margin-top: auto; font-size: 0.8125rem; color: var(--quiet-stone); }

/* SECTION SCAFFOLD */
.section { padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 128px 0; } }
/* Rhythm modifiers — the page should not tick along at one flat interval.
   --tight pulls a section up toward the one above it (they belong together);
   --loose lets the page take a breath, used before the dark closing section.
   Only a few deliberate sections carry these; most keep the base rhythm. */
.section--tight { padding-top: 64px; }
@media (min-width: 1024px) { .section--tight { padding-top: 80px; } }
@media (max-width: 600px) { .section--tight { padding-top: 44px; } }
.section--loose { padding-top: 128px; }
@media (min-width: 1024px) { .section--loose { padding-top: 168px; } }
@media (max-width: 600px) { .section--loose { padding-top: 92px; } }
/* On a tightened section the heading hugs its content (base grids open at 44px). */
.section--tight .cond-grid, .section--tight .services-layout, .section--tight .fees-grid, .section--tight .team-grid { margin-top: 32px; }
/* Offset anchor scrolling so in-page links clear the sticky header */
.section, .hero, .profile-block { scroll-margin-top: 96px; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .container { padding: 0 20px; } .section { padding: 72px 0; } }
.section-head { max-width: 720px; }
.descriptor { color: var(--slate); font-size: 1.0625rem; line-height: 1.7; margin: 16px 0 0; }

/* HERO — "The Considered Record": warm editorial wash, fine paper grain,
   a single contained pine glow behind a matted media plate. No floaty blobs. */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(118% 86% at 86% 8%, rgba(45,75,58,0.11), rgba(45,75,58,0) 56%),
    linear-gradient(180deg, var(--warm-cream) 0%, var(--cream-fade) 56%, var(--paper-white) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* The two drifting radial glows that used to live on .hero::after were removed:
   blurred coloured circles floating behind a hero are decoration with no
   semantic role, and the file's own comment above already said "no floaty
   blobs". The single contained wash on .hero plus the paper grain carries it. */
.hero-inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 88px 32px 104px; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 76px; align-items: center; }
@media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 52px 24px 68px; } }
.hero h1 { margin: 22px 0 0; letter-spacing: -0.035em; }
.hero .display .hl { color: var(--considered-pine); }   /* the one green voice, used as a focal accent */
.hero .lead { margin: 24px 0 0; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-actions .btn { padding: 16px 30px; min-height: 54px; font-size: 1rem; }

/* Availability status — quiet glass pill with a live pine signal (orange ring removed) */
.availability { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 13px; background: rgba(255,255,255,0.86); border: 1px solid var(--warm-border); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--slate); box-shadow: 0 1px 2px rgba(20,20,20,0.04); }
.availability .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--apricot); flex: none; position: relative; }
.availability .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--apricot-ring); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .availability .dot::after { animation: none; } }
/* On the dark closing band the pill goes translucent so it signals quietly
   instead of glaring white on quiet-forest (pill relocated here, owner 2026-07-17). */
.section-dark .availability { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--text-on-dark-muted); box-shadow: none; margin-top: 18px; }

/* Trust row — practitioners + a hairline-divided credential index */
.hero-trust { display: flex; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.hero-people { display: flex; align-items: center; gap: 14px; }
.hero-people .faces { display: flex; }
.hero-people .face { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--warm-cream); margin-left: -14px; background: var(--practice-mist); background-size: cover; background-position: center top; overflow: hidden; box-shadow: 0 1px 3px rgba(20,20,20,0.14); }
.hero-people .face:first-child { margin-left: 0; }
.hero-people .stack-label { font-size: 0.875rem; color: var(--slate); line-height: 1.45; }
.hero-people .stack-label strong { color: var(--ink-charcoal); font-weight: 600; }
.hero-creds { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 1px solid var(--hairline); }
.hero-creds li { position: relative; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--quiet-stone); }
.hero-creds li + li { padding-left: 14px; }
.hero-creds li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--considered-pine); transform: translateY(-50%); }
@media (max-width: 480px) { .hero-creds { padding-left: 0; border-left: 0; flex-basis: 100%; } }

/* Media — a clean print "matted" inside a plate */
.hero-media { position: relative; }
.hero-plate { position: relative; padding: 10px; background: linear-gradient(155deg, rgba(255,255,255,0.92), rgba(245,249,246,0.72)); border: 1px solid var(--warm-border); border-radius: calc(var(--radius-xl) + 8px); box-shadow: var(--shadow-dropdown); }
.hero-media .frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(20,20,20,0.05); }
.hero-media image-slot { width: 100%; aspect-ratio: 4 / 5; display: block; }

/* MARQUEE */
.marquee-band { background: var(--paper-white); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 30px 0; }
.marquee-head { text-align: center; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet-stone); margin-bottom: 20px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  /* The second half of the track only exists for the seamless scroll loop;
     in the static wrapped layout it would read as duplicate chips. */
  .marquee-track .spec-tag:nth-child(n+13) { display: none; }
}
.spec-tag { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 18px; border: 1px solid var(--hairline-card); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink-charcoal); background: var(--soft-page); }
.spec-tag svg { width: 16px; height: 16px; color: var(--considered-pine); }

/* ABOUT */
.about { background: var(--paper-white); }
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
@media (max-width: 940px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
.about-statement { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-charcoal); }
.about-statement .accent { color: var(--considered-pine); }
.about-points { display: grid; gap: 22px; margin-top: 28px; }
.about-point { display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.about-point svg { width: 22px; height: 22px; color: var(--considered-pine); margin-top: 2px; }
.about-point p { margin: 0; color: var(--slate); }
.about-point strong { color: var(--ink-charcoal); font-weight: 600; }

/* SERVICES — editorial tabbed offerings */
.services { background: var(--warm-cream); }
.service-tablist { display: flex; gap: 6px; position: relative; border-bottom: 1px solid var(--hairline); overflow-x: auto; margin-top: 0; scrollbar-width: none; flex: none; }
.service-tablist::-webkit-scrollbar { display: none; }
/* When the tablist actually scrolls (JS toggles .is-scrollable), a right-edge
   fade (same idiom as the marquee mask) signals the cut-off tabs. */
.service-tablist.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.service-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--quiet-stone); padding: 14px 18px; min-height: 48px; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--dur-base) var(--ease-out); }
.service-tab:hover { color: var(--slate); }
.service-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.service-tab.active { color: var(--considered-pine); }
.service-tab-indicator { position: absolute; bottom: -1px; left: 0; height: 3px; width: 0; background: var(--considered-pine); border-radius: 2px; transition: transform var(--dur-slow) var(--ease-soft), width var(--dur-slow) var(--ease-soft); }

/* The strip spans the container above the two-column grid, so the hairline
   runs edge to edge and all four tabs fit at desktop widths. */
#services .service-tablist { margin-top: 44px; }
#services .services-layout { margin-top: 32px; }
/* Below the width where four tabs fit on one line, stop asking people to
   scroll to discover tabs: a 2-up grid keeps all four visible. The sliding
   indicator assumes one row, so the underline moves onto the active tab. */
@media (max-width: 760px) {
  .service-tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
  .service-tab { white-space: normal; min-width: 0; text-align: left; padding: 12px 10px; border-bottom: 3px solid transparent; }
  .service-tab.active { border-bottom-color: var(--considered-pine); }
  .service-tab-indicator { display: none; }
}

/* Panel becomes a full-height flex column so the CTA anchors low and the
   whitespace reads as composed, not as a void under short content. */
.service-panel { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding-top: 0; min-width: 0; }
.service-lede { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.375rem, 2.1vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink-charcoal); margin: 0; max-width: 24ch; text-wrap: balance; }
.service-body { font-size: 1.0625rem; line-height: 1.7; color: var(--slate); margin: 0; max-width: 48ch; }
.service-points { list-style: none; margin: 4px 0 0; padding: 24px; display: grid; gap: 12px; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); }
.service-points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-charcoal); margin: 0; }
.service-points .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--practice-mist); color: var(--considered-pine); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.service-points .tick svg { width: 14px; height: 14px; }
.service-cta { margin-top: auto; padding-top: 8px; align-self: flex-start; }

/* Panel content swaps with a soft staggered rise */
.service-panel.fade-swap > * { animation: fadeUp var(--dur-slow) var(--ease-soft) backwards; }
.service-panel.fade-swap > *:nth-child(1) { animation-delay: 0ms; }
.service-panel.fade-swap > *:nth-child(2) { animation-delay: 70ms; }
.service-panel.fade-swap > *:nth-child(3) { animation-delay: 140ms; }
.service-panel.fade-swap > *:nth-child(4) { animation-delay: 210ms; }
/* Opacity-only: tab swaps must never read as the page moving. Timing matches
   the media crossfade so the panel and image change as one gesture. */
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .service-panel.fade-swap > * { animation: none; } }

/* Fee figures hold a fixed-width digit grid during the count-up so the layout
   around them never shifts (JS also locks min-width to the final figure). */
[data-countup] { font-variant-numeric: tabular-nums; }

/* CONDITIONS */
.conditions { background: var(--warm-cream); }
.cond-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cond-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 940px) { .cond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cond-grid { grid-template-columns: 1fr; } }
/* Mobile conditions-grid collapse + its toggle live in pages.css (loaded
   after this file, so button display rules cannot re-show the toggle). */
.cond-card { display: block; text-decoration: none; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 28px 24px; transition: border-color var(--dur-base) var(--ease-out); }
/* One coordinated gesture: on hover the whole card responds as a single object.
   The edge goes pine and the heading follows on the same curve (with the .more
   arrow below). One intent — "this is a link" — not a stacked lift+shadow. */
.cond-card:hover { text-decoration: none; border-color: var(--considered-pine); }
.cond-ic { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--practice-mist); color: var(--considered-pine); align-items: center; justify-content: center; margin-bottom: 14px; }
.cond-ic svg { width: 24px; height: 24px; }
.cond-card h3 { font-size: 1.0625rem; margin: 0 0 8px; transition: color var(--dur-fast) var(--ease-out); }
.cond-card:hover h3 { color: var(--considered-pine); }
.cond-card p { color: var(--slate); font-size: 0.875rem; line-height: 1.6; margin: 0; }
.cond-card .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); }
.cond-card:hover .more { color: var(--considered-pine); }
.cond-card .more svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-soft); }
.cond-card:hover .more svg { transform: translateX(3px); }

/* HOW IT WORKS */
.how { background: var(--paper-white); }
.how-timeline { position: relative; display: grid; gap: 8px; margin-top: 52px; }
.how-rail { position: absolute; left: 31px; top: 20px; bottom: 20px; width: 2px; background: var(--hairline); }
.how-rail-fill { position: absolute; left: 31px; top: 20px; width: 2px; background: var(--considered-pine); height: 0; transition: height 160ms linear; }
.how-step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: flex-start; position: relative; padding: 16px 0; }
.how-badge { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-white); border: 2px solid var(--hairline); color: var(--quiet-stone); font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); z-index: 1; }
.how-step.active .how-badge { background: var(--practice-mist); border-color: var(--considered-pine); color: var(--considered-pine); box-shadow: var(--shadow-step-halo); }
.how-step h3 { font-size: 1.25rem; margin: 8px 0 6px; }
.how-step p { color: var(--slate); max-width: 56ch; margin: 0; }

/* TEAM */
.team { background: var(--warm-cream); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { display: grid; grid-template-columns: 150px 1fr; gap: 24px; background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 24px; transition: transform var(--dur-slow) var(--ease-soft), box-shadow var(--dur-slow) var(--ease-soft); }
@media (max-width: 480px) { .team-card { grid-template-columns: 1fr; } }
.team-card:hover { box-shadow: var(--shadow-card-hover); }
.team-card image-slot { width: 150px; height: 180px; display: block; }
@media (max-width: 480px) { .team-card image-slot { width: 100%; height: 220px; } }
.team-card .ahpra { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--considered-pine); margin-bottom: 8px; }
.team-card .ahpra svg { width: 14px; height: 14px; }
.team-card h3 { font-size: 1.375rem; margin: 0 0 2px; }
.team-card .role { font-size: 0.9375rem; color: var(--slate); margin: 0 0 12px; }
.team-card .focus { font-size: 0.875rem; color: var(--slate); line-height: 1.6; margin: 0 0 16px; }
.team-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.team-pill { font-size: 0.75rem; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--practice-mist); color: var(--considered-pine); }

/* FEES */
.fees { background: var(--warm-cream); }
.fees-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
@media (max-width: 768px) { .fees-grid { grid-template-columns: 1fr; } }
.fee-card { background: var(--paper-white); border: 1px solid var(--hairline-card); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-panel-resting); }
/* The Medicare card carries a pine "ledger" rail — signals money coming back, within the green-only rule */
.fee-card--rebate { border-top: 3px solid var(--considered-pine); }
.fee-card .tag { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--considered-pine); }
.fee-amount { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 4px; }
.fee-amount .num { font-family: var(--font-serif); font-size: 3rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink-charcoal); }
.fee-amount .unit { font-size: 0.9375rem; color: var(--slate); }
.fee-card h3 { font-size: 1.0625rem; margin: 18px 0 6px; }
.fee-card p { color: var(--slate); font-size: 0.9375rem; line-height: 1.65; margin: 0 0 8px; }
.fee-divider { height: 1px; background: var(--hairline); margin: 20px 0; }
/* Footnotes (fees caveat, therapy-evidence notes): quiet small print with a
   hairline above so it reads as a deliberate footnote. Spans the full width of
   the cards/grid it follows, left-set, never centred (owner, 2026-07-17;
   supersedes the 64ch reading-measure cap of 2026-07-08). */
.fee-note { font-size: 0.75rem; color: var(--quiet-stone); line-height: 1.6; margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); text-align: left; }
.fee-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.fee-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.9375rem; color: var(--slate); }
.fee-list svg { width: 18px; height: 18px; color: var(--considered-pine); margin-top: 2px; }

/* FAQ */
.faq { background: var(--soft-page); }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: stretch; }
/* Text column drives the height; the photo fills whatever is left so its
   bottom edge lines up with the accordion instead of hanging past it. */
.faq-grid > div:first-child { display: flex; flex-direction: column; }
@media (max-width: 940px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-serif); font-weight: 600; font-size: 1.125rem; color: var(--ink-charcoal); letter-spacing: -0.01em; }
.faq-icon { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--practice-mist); color: var(--considered-pine); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.faq-item.open .faq-icon { background: var(--considered-pine); color: var(--paper-white); }
.faq-icon svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-soft); }
.faq-item.open .faq-icon svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-soft); }
.faq-a p { color: var(--slate); line-height: 1.75; max-width: 62ch; margin: 0; padding-bottom: 26px; }

/* CLOSING DARK BAND + BOOKING */
.book { background: var(--quiet-forest); color: var(--text-on-dark); position: relative; overflow: hidden; }
/* The 520px blurred `.blob` orb that sat here was removed along with its markup:
   ambient blurred circles are decoration with no semantic role. The dark band
   closes the page on its own. */
.book-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
@media (max-width: 940px) { .book-grid { grid-template-columns: 1fr; gap: 40px; } }
.book h2 { color: var(--text-on-dark); }
.book .descriptor { color: var(--text-on-dark-muted); }
.book .eyebrow { color: var(--text-on-dark-muted); }
.book .eyebrow::after { background: var(--text-on-dark-muted); }
.book-steps { display: grid; gap: 14px; margin-top: 32px; }
.book-steptrack { display: flex; align-items: center; gap: 14px; transition: opacity var(--dur-base) var(--ease-out); }
.book-steptrack .n { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; flex: none; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.book-steptrack.done .n, .book-steptrack.current .n { background: var(--paper-white); color: var(--considered-pine); }
.book-steptrack:not(.done):not(.current) .n { background: rgba(245,249,246,0.12); color: var(--text-on-dark-muted); }
.book-steptrack .lbl { font-size: 0.9375rem; color: var(--text-on-dark); }
.book-steptrack:not(.done):not(.current) .lbl { color: var(--text-on-dark-muted); }
.book-card { background: var(--paper-white); border-radius: var(--radius-lg); padding: 32px; color: var(--ink-charcoal); box-shadow: var(--shadow-dropdown); }
.section-dark .book-card h1, .section-dark .book-card h2, .section-dark .book-card h3, .section-dark .book-card h4 { color: var(--ink-charcoal); }
@media (max-width: 480px) { .book-card { padding: 24px; } }
.book-card h3 { font-size: 1.25rem; margin: 0 0 6px; }
.book-card .sub { color: var(--slate); font-size: 0.9375rem; margin: 0 0 22px; }
/* Direct contact rows (call, email) inside the closing card: quiet tappable
   lines under a hairline — secondary to the primary enquiry button
   (added with the phone number, owner 2026-07-17). */
.book-contact { margin: 18px 0 0; padding: 10px 0 0; border-top: 1px solid var(--hairline); display: grid; }
.book-contact a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 2px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--slate); transition: color var(--dur-base) var(--ease-out); }
.book-contact a:hover { color: var(--considered-pine); text-decoration: none; }
.book-contact a svg { width: 16px; height: 16px; color: var(--quiet-stone); flex: none; transition: color var(--dur-base) var(--ease-out); }
.book-contact a:hover svg { color: var(--considered-pine); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.book-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--soft-page); color: var(--slate); border: 1.5px solid rgba(0,0,0,0.1); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.book-chip:hover { border-color: rgba(0,0,0,0.24); }
.book-chip[aria-pressed="true"] { background: var(--considered-pine); color: var(--paper-white); border-color: transparent; }
.psych-list { display: grid; gap: 12px; }
.psych-opt { display: grid; grid-template-columns: 52px 1fr 24px; gap: 16px; align-items: center; text-align: left; background: var(--paper-white); border: 1.5px solid var(--hairline); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.psych-opt:hover { border-color: rgba(0,0,0,0.24); }
.psych-opt.sel { border-color: var(--considered-pine); background: var(--practice-mist); }
.psych-opt image-slot { width: 52px; height: 52px; display: block; }
.psych-opt .nm { font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem; }
.psych-opt .cr { font-size: 0.8125rem; color: var(--quiet-stone); }
.psych-opt .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hairline); flex: none; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.psych-opt.sel .radio { border-color: var(--considered-pine); background: var(--considered-pine); }
.psych-opt.sel .radio svg { width: 12px; height: 12px; color: #fff; }
.psych-opt:not(.sel) .radio svg { display: none; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.time-opt { padding: 14px; border-radius: var(--radius-md); border: 1.5px solid var(--hairline); background: var(--paper-white); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink-charcoal); cursor: pointer; text-align: center; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.time-opt:hover { border-color: rgba(0,0,0,0.24); }
.time-opt.sel { background: var(--considered-pine); color: var(--paper-white); border-color: transparent; }
.book-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; gap: 12px; }
.book-success { text-align: center; padding: 16px 0; }
.book-success .ok { width: 60px; height: 60px; border-radius: 50%; background: var(--practice-mist); color: var(--considered-pine); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.book-success .ok svg { width: 30px; height: 30px; }

/* FOOTER */
.site-footer { background: var(--paper-white); border-top: 1px solid var(--hairline); padding-top: 28px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 4px 0 20px; }
@media (max-width: 940px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; gap: 26px; } }
.footer-brand img, .footer-brand .brand-logo { height: 44px; width: auto; display: block; margin-bottom: 14px; }
.footer-brand p { font-size: 0.875rem; color: var(--slate); line-height: 1.65; max-width: 40ch; margin: 0 0 12px; }
.footer-prac { font-size: 0.8125rem; color: var(--quiet-stone); margin: 0; }
.footer-prac strong { color: var(--slate); }
.footer-col h3 { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--considered-pine); margin: 0 0 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 0.9375rem; color: var(--ink-charcoal); }
.footer-col a:hover { color: var(--considered-pine); text-decoration: none; }
/* Crisis line: a quiet hairline band rather than a filled box (owner,
   2026-07-07). The numbers stay load-bearing; the container recedes. */
.crisis-band { background: none; border: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 14px 0; margin-bottom: 24px; }
.crisis-band .eyebrow { margin-bottom: 6px; }
.crisis-band p { margin: 0; font-size: 0.8125rem; color: var(--slate); line-height: 1.6; }
/* Crisis numbers sit at body colour and weight — no emphasis (owner, 2026-07-17). */
.crisis-band strong { color: inherit; font-weight: 400; }
.ack-country { font-size: 0.6875rem; color: var(--quiet-stone); line-height: 1.55; margin: 0 0 8px; }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 0 22px; border-top: 1px solid var(--hairline); font-size: 0.8125rem; color: var(--quiet-stone); }
.footer-legal a { color: var(--quiet-stone); }
.footer-legal .links { display: flex; gap: 22px; }
.footer-disclaimer { font-size: 0.6875rem; color: var(--quiet-stone); line-height: 1.55; margin: 0 0 10px; }

/* Section nav dots removed (owner, 2026-07-07): low-affordance wayfinding
   the header already provides. */

/* REVEAL / MOTION SYSTEM (gated on .js so content is visible if JS fails) */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
html.js .reveal.in { opacity: 1; transform: none; }
/* Two-step section entrance: the head settles first, its body follows ~80ms
   after. One orchestrated gesture per section (never a per-item stagger) —
   put .reveal-lead on the section's primary content block, leave the
   .section-head at delay 0. Reuses the existing --reveal-delay knob, so it is
   already neutralised by prefers-reduced-motion below. */
html.js .reveal-lead { --reveal-delay: 0.08s; }
html.js .reveal[data-anim="fade"] { transform: none; }
html.js .reveal[data-anim="left"] { transform: translateX(-36px); }
html.js .reveal[data-anim="right"] { transform: translateX(36px); }
html.js .reveal[data-anim="scale"] { transform: scale(0.95); }
html.js .reveal[data-anim="blur"] { filter: blur(8px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out), filter 0.85s var(--ease-out); }
html.js .reveal[data-anim="left"].in, html.js .reveal[data-anim="right"].in, html.js .reveal[data-anim="scale"].in { transform: none; }
html.js .reveal[data-anim="blur"].in { filter: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* Hero load-in sequence */
html.js .hero-copy > * { opacity: 0; transform: translateY(22px); }
html.js .hero-media { opacity: 0; transform: translateY(28px) scale(0.97); }
html.js .hero-loaded .hero-copy > * { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
html.js .hero-loaded .hero-media { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-soft); transition-delay: 0.15s; }
/* Delay ladder assumes the h1 is the first hero-copy child (the availability
   pill moved to the closing CTA band, owner 2026-07-17). */
html.js .hero-loaded .hero-copy > *:nth-child(1) { transition-delay: 0.05s; }
html.js .hero-loaded .hero-copy > *:nth-child(2) { transition-delay: 0.14s; }
html.js .hero-loaded .hero-copy > *:nth-child(3) { transition-delay: 0.23s; }
html.js .hero-loaded .hero-copy > *:nth-child(4) { transition-delay: 0.32s; }
html.js .hero-loaded .hero-copy > *:nth-child(5) { transition-delay: 0.41s; }
/* The pine accent line settles a beat after the first line — an editorial, serif-led close to the headline. */
html.js .hero-copy .display .hl { display: inline-block; opacity: 0; transform: translateY(12px); }
html.js .hero-loaded .hero-copy .display .hl { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-soft); transition-delay: 0.25s; }

/* Typewriter reveal on the headline (motion path only; reduced-motion and
   no-JS get the static headline). The h1 opts out of the rise ladder so the
   two entrances never stack; characters render invisible at final size, so
   nothing reflows while they reveal. */
html.js .hero-copy > h1.display, html.js .hero-copy > h1.display .hl { opacity: 1; transform: none; transition: none; }
.display .tw-ch { opacity: 0; transition: opacity 180ms var(--ease-out); }
.display .tw-ch.on { opacity: 1; }
.tw-caret { display: inline-block; width: 2px; height: 0.82em; background: var(--considered-pine); vertical-align: -0.06em; margin-left: 3px; animation: twBlink 0.9s steps(1) infinite; }
@keyframes twBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .display .tw-ch { opacity: 1; } .tw-caret { display: none; } }
@media (prefers-reduced-motion: reduce) { html.js .hero-copy > *, html.js .hero-media, html.js .hero-copy .display .hl { opacity: 1 !important; transform: none !important; } }
/* The headline does NOT loop. Continuous motion on focal copy reads as gimmicky
   for this brand (and breaks "motion must mean something"). The hero stays alive
   through the one-time entrance above plus the ambient layers below: the glow
   drift, the floating media plate, and the live dot. A gentle wave hello. */

/* Floating hero atmosphere — the matted plate drifts almost imperceptibly */
.hero-plate { will-change: transform; animation: plateFloat 14s ease-in-out infinite; }
@keyframes plateFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-plate { animation: none !important; } }

/* Hero tactility — quiet hover/press micro-interactions (desktop pointer).
   Shadow-only on the plate so it never fights the plateFloat transform. */
.hero-plate { transition: box-shadow var(--dur-slow) var(--ease-soft); }
.hero-plate:hover { box-shadow: 0 26px 60px -30px rgba(20,40,30,0.45), var(--shadow-dropdown); }
/* Stacked faces fan out and lift slightly when the trust row is hovered */
.hero-people .faces .face { transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-out); }
.hero-people:hover .faces .face { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,20,20,0.18); }
.hero-people:hover .faces .face:nth-child(2) { transform: translate(5px, -2px); }
@media (prefers-reduced-motion: reduce) {
  .hero-people .faces .face { transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease; }
  .hero-people:hover .faces .face, .hero-people:hover .faces .face:nth-child(2) { transform: none; }
}

/* Parallax media */
.about-media img, .hero-media .frame { will-change: transform; }

/* Count-up tabular figures */
.fee-amount .num { font-variant-numeric: tabular-nums; }

/* ===== REAL MEDIA ===== */
/* Hero video */
.hero-media .frame { aspect-ratio: 4 / 5; background: var(--practice-mist); }
.hero-media video, .hero-media .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media .frame { display: block; }
/* Avatar stack: round portrait crops */
.hero-people .faces .face { background-size: cover; background-position: center top; }

/* About image */
.about-grid.has-media { grid-template-columns: 0.95fr 1.05fr; align-items: stretch; gap: 64px; }
/* Stacked (mobile/tablet): the copy leads and its image sits underneath, so no
   image ever appears before the text that gives it context. Desktop side-by-side
   ordering is unchanged. Same rule applied to .services-layout, .how-layout and
   pages.css .media-band. */
@media (max-width: 940px) {
  .about-grid.has-media { grid-template-columns: 1fr; gap: 36px; }
  .about-grid.has-media .about-copy { order: 1; }
  .about-grid.has-media .about-media { order: 2; }
}
.about-media { position: relative; min-height: 380px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-hover); background: var(--practice-mist); }
.about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.2); will-change: transform; }
@media (max-width: 940px) { .about-media { min-height: 0; height: 340px; } }
.about-copy { align-self: center; }

/* Team portraits */
.team { background: var(--warm-cream); }
.team-card { align-items: stretch; }
.team-card .portrait { width: 150px; height: 100%; min-height: 200px; border-radius: var(--radius-md); object-fit: cover; object-position: center top; display: block; background: var(--practice-mist); border: 1px solid var(--hairline); }
/* On a stacked mobile card the portrait spans full width. A fixed short height
   (was 240px) turned a 3:4 headshot into a zoomed, top-cropped landscape crop.
   Match the source orientation with a 4:5 box and centre on the face so the
   whole headshot reads proportionally. */
@media (max-width: 480px) { .team-card .portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; min-height: 0; object-position: center; } }

/* Booking psychologist thumbs */
.psych-opt .thumb { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }

/* ===== Section imagery (Pexels stills) ===== */
.services-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: stretch; margin-top: 44px; }
@media (max-width: 940px) {
  .services-layout { grid-template-columns: 1fr; gap: 28px; }
  .services-layout .services-main { order: 1; }
  .services-layout .services-media { order: 2; }
}
.services-media { position: relative; min-height: 380px; }
.services-frame { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-hover); }
/* One image per tab, stacked; the active one crossfades in when tabs switch. */
.services-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--dur-slow) var(--ease-soft); }
.services-frame img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .services-frame img { transition: none; } }
@media (max-width: 940px) { .services-media { min-height: 0; height: 340px; } }
.services-main { display: flex; flex-direction: column; min-width: 0; }

.how-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: stretch; margin-top: 52px; }
@media (max-width: 940px) { .how-layout { grid-template-columns: 1fr; gap: 28px; } .how-layout .how-timeline { order: 1; } .how-layout .how-media { order: 2; } }
.how-layout .how-timeline { margin-top: 0; }
/* Grid tracks default to minmax(auto, 1fr), so an image can push its track
   wider than its share and force horizontal overflow. Flooring the children at
   min-width: 0 is the same fix as minmax(0, 1fr) but survives the fractional
   track sizes above. Nothing overflows today; this keeps it that way. */
.hero-inner > *, .about-grid > *, .services-layout > *, .how-layout > *, .faq-grid > * { min-width: 0; }
.how-media { position: relative; min-height: 380px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-hover); }
.how-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 940px) { .how-media { min-height: 0; height: 300px; } }

.faq-media { margin-top: 34px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card-hover); flex: 1; min-height: 320px; position: relative; }
.faq-media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 940px) { .faq-media { display: none; } }

.book::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/book-bg.jpg") center / cover no-repeat; opacity: 0.13; }

/* ===== Alternating sides + image parallax ===== */
/* Mirrors the grid: the first child takes the narrow track but is drawn on the
   right. Kept as-is deliberately. An `order`-based swap looks equivalent but
   assigns the children to the opposite tracks, which would change the column
   widths on all seven pages that use this. Children reset to ltr, so the
   direction does not leak. */
.layout-flip { direction: rtl; }
.layout-flip > * { direction: ltr; }
/* 1.08 gives the parallax translate its headroom without upscaling the source
   image by a fifth (which softened the 4K assets for no visible gain). */
.parallax-media img { transform: scale(1.08); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .parallax-media img { transform: none; } }

/* =========================================================================
   FUNDING / PARTNER TRUST STRIP  (lives here so every page can use it —
   all pages load homepage.css). Compliant, text-based funding wordmarks
   (Medicare/NDIS/WorkCover/Private stated as text, never official govt
   logos) + the official Halaxy partner logo for the booking credit.
   ========================================================================= */
.funding-strip { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 26px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.funding-strip .fs-label { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--considered-pine); }
.funding-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.funding-marks .fm { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; letter-spacing: 0.01em; color: var(--slate); }
.funding-marks .fm-sep { color: var(--quiet-stone); font-size: 0.9rem; }
.funding-strip .funding-note { font-size: 0.8125rem; color: var(--quiet-stone); max-width: 64ch; margin: 0; line-height: 1.5; }

/* Compact inline variant (footer) */
.funding-strip.compact { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; padding: 0; border: 0; }
.funding-strip.compact .fs-label { color: var(--quiet-stone); }
.funding-strip.compact .funding-marks { gap: 8px 12px; }
.funding-strip.compact .funding-marks .fm { font-size: 0.875rem; font-weight: 400; color: var(--slate); }

/* Dark-section variant (homepage #book, dark CTA bands) */
.section-dark .funding-strip .fs-label { color: var(--apricot); }
.section-dark .funding-strip .funding-marks .fm { color: #fff; }
.section-dark .funding-strip .funding-note { color: var(--text-on-dark-muted); }

/* Halaxy booking credit (official partner logo, kept in its own brand colour) */
.halaxy-credit { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 0.875rem; color: var(--slate); }
.halaxy-credit img { height: 20px; width: auto; display: block; }
.halaxy-credit .hc-light { display: none; }
.section-dark .halaxy-credit { color: var(--text-on-dark-muted); }
.section-dark .halaxy-credit .hc-dark { display: none; }
.section-dark .halaxy-credit .hc-light { display: block; }

/* Footer funding line */
.footer-funding { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 18px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.footer-funding .fs-label { color: var(--quiet-stone); }
.footer-funding .funding-marks { gap: 8px 12px; }
.footer-funding .funding-marks .fm { font-size: 0.9375rem; font-weight: 500; color: var(--slate); }
.footer-funding .halaxy-credit { font-size: 0.8125rem; color: var(--quiet-stone); }
.footer-funding .halaxy-credit img { height: 19px; }
@media (max-width: 600px) { .footer-funding { gap: 8px 12px; } }

/* =========================================================================
   CONDITION-CARD ICON MICRO-INTERACTIONS
   Icon artwork adapted from itshover (https://www.itshover.com), Apache-2.0.
   The original Motion.dev hover variants are ported to CSS keyframes, fired
   once per hover/focus of the parent card. Guarded by prefers-reduced-motion.
   ========================================================================= */
.cond-ic svg.ih { overflow: visible; }
.cond-ic .ihf-center, .cond-ic .ihf-corners, .cond-ic .ihs-body,
.cond-ic .ihm, .cond-ic .ihh-heart, .cond-ic .ihh-hand,
.cond-ic .ihsp-m, .cond-ic .ihsp-t, .cond-ic .ihsp-b,
.cond-ic .ihc-drop, .cond-ic svg.ih-bag { transform-box: view-box; }
.cond-ic .ihf-center, .cond-ic .ihf-corners, .cond-ic .ihs-body, .cond-ic .ihm { transform-origin: 12px 12px; }
.cond-ic .ihh-heart { transform-origin: 16px 8px; }
.cond-ic .ihsp-m { transform-origin: 9px 12px; }
.cond-ic .ihsp-t { transform-origin: 18px 6px; }
.cond-ic .ihsp-b { transform-origin: 18px 18px; }
.cond-ic .ihfl { transform-box: fill-box; transform-origin: 50% 100%; }
.cond-ic svg.ih-bag { transform-origin: 50% 82%; }
.cond-ic .ihc-drop { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cond-card:hover .ihf-center, .cond-card:focus-visible .ihf-center { animation: ih-breathe 0.5s var(--ease-out); }
  .cond-card:hover .ihf-corners, .cond-card:focus-visible .ihf-corners { animation: ih-pullin 0.5s var(--ease-out); }
  .cond-card:hover .ihc-drop, .cond-card:focus-visible .ihc-drop { animation: ih-rain 1s ease-in-out; }
  .cond-card:hover .ihc-drop.d2, .cond-card:focus-visible .ihc-drop.d2 { animation-delay: 0.12s; }
  .cond-card:hover .ihc-drop.d3, .cond-card:focus-visible .ihc-drop.d3 { animation-delay: 0.24s; }
  .cond-card:hover .ihfl, .cond-card:focus-visible .ihfl { animation: ih-flicker 0.8s ease-in-out; }
  .cond-card:hover .ihh-heart, .cond-card:focus-visible .ihh-heart { animation: ih-pulse 0.55s ease-in-out; }
  .cond-card:hover .ihh-hand, .cond-card:focus-visible .ihh-hand { animation: ih-lift 0.55s ease-in-out; }
  .cond-card:hover .ihs-tick, .cond-card:focus-visible .ihs-tick { stroke-dasharray: 1; animation: ih-draw 0.4s 0.12s var(--ease-out) backwards; }
  .cond-card:hover .ihs-body, .cond-card:focus-visible .ihs-body { animation: ih-guard 0.45s ease-in-out; }
  .cond-card:hover .ihm, .cond-card:focus-visible .ihm { animation: ih-rock 0.55s ease-in-out; }
  .cond-card:hover svg.ih-bag, .cond-card:focus-visible svg.ih-bag { animation: ih-tilt 0.6s ease-in-out; }
  .cond-card:hover .ihsp-m, .cond-card:focus-visible .ihsp-m { animation: ih-spin 0.6s ease-in-out; }
  .cond-card:hover .ihsp-t, .cond-card:focus-visible .ihsp-t { animation: ih-pop 0.5s ease-in-out 0.1s; }
  .cond-card:hover .ihsp-b, .cond-card:focus-visible .ihsp-b { animation: ih-pop 0.5s ease-in-out 0.22s; }
}
@keyframes ih-breathe { 50% { transform: scale(1.4); } }
@keyframes ih-pullin { 50% { transform: scale(0.88); } }
@keyframes ih-rain { 0% { opacity: 0; transform: translateY(-1.5px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(1.5px); } }
@keyframes ih-flicker { 25% { transform: translate(1px, -2px) rotate(4deg); } 50% { transform: translate(-1px, -1px) rotate(-3deg); } 75% { transform: translate(0.5px, -2px) rotate(2deg); } }
@keyframes ih-pulse { 50% { transform: scale(1.25); } }
@keyframes ih-lift { 50% { transform: translateY(1.5px); } }
@keyframes ih-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ih-guard { 50% { transform: scale(1.08); } }
@keyframes ih-rock { 50% { transform: rotate(-15deg) scale(1.08); } }
@keyframes ih-tilt { 30% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } }
@keyframes ih-spin { 50% { transform: rotate(90deg) scale(1.15); } 100% { transform: rotate(180deg); } }
@keyframes ih-pop { 50% { transform: scale(1.35) rotate(20deg); } }

/* =========================================================================
   INTERIOR-CARD ICON HOVERS (owner request 2026-07-17)
   The same itshover-ported animations, extended to every card icon site-wide.
   Icons carry a type class (ih-*); parts are addressed structurally so the
   inline markup stays clean. Triggered by hovering the card that carries the
   icon. Same artwork source: itshover (itshover.com), Apache-2.0.
   ========================================================================= */
.ih path, .ih circle, .ih line, .ih g { transform-box: view-box; }
.ih-shieldcheck path:nth-of-type(1), .ih-checked path:nth-of-type(1),
.ih-target circle, .ih-clock path:nth-of-type(2) { transform-origin: 12px 12px; }
.ih-chartbar path { transform-origin: 12px 20px; }
.ih-info path:nth-of-type(2) { transform-origin: 12px 9px; }
svg.ih-bag { transform-origin: 50% 82%; }
svg.ih-refresh, svg.ih-world, svg.ih-pin { transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* shield-check + circle-check: frame steadies, tick redraws */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover :is(.ih-shieldcheck, .ih-checked) path:nth-of-type(1) { animation: ih-guard 0.45s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover :is(.ih-shieldcheck, .ih-checked) path:nth-of-type(2) { stroke-dasharray: 1; animation: ih-draw 0.4s 0.12s var(--ease-out) backwards; }
  /* users-group: centre person rises, the others lean in */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-users path:nth-of-type(-n+2) { animation: ih-rise 0.5s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-users path:nth-of-type(3), :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-users path:nth-of-type(4) { animation: ih-step-r 0.5s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-users path:nth-of-type(5), :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-users path:nth-of-type(6) { animation: ih-step-l 0.5s ease-in-out; }
  /* user-check: person rises, tick redraws */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-usercheck path:nth-of-type(-n+2) { animation: ih-rise 0.5s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-usercheck path:nth-of-type(3) { stroke-dasharray: 1; animation: ih-draw 0.4s 0.12s var(--ease-out) backwards; }
  /* wallet flap nudges open; bag tilts; hand-heart reuses the homepage parts */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-wallet path:nth-of-type(2) { animation: ih-step-r 0.5s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover svg.ih-bag { animation: ih-tilt 0.6s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ihh-heart { animation: ih-pulse 0.55s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ihh-hand { animation: ih-lift 0.55s ease-in-out; }
  /* lock shackle lifts (portal link + privacy card) */
  :is(.funding-card, .value-card, .rec-item, .how-point, .nav-portal):hover .ih-lock path:nth-of-type(3), .nav-portal:focus-visible .ih-lock path:nth-of-type(3) { animation: ih-rise 0.5s ease-in-out; }
  /* phone handset tilts (header call link + contact rows) */
  :is(.nav-phone, .book-contact a):hover svg.ih-phone, .nav-phone:focus-visible svg.ih-phone { animation: ih-tilt 0.6s ease-in-out; }
  /* about values */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover svg.ih-refresh { animation: ih-halfspin 0.55s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-clock path:nth-of-type(2) { animation: ih-wind 0.7s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-eye path:nth-of-type(1) { animation: ih-look 0.7s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover svg.ih-pin { animation: ih-hop 0.5s ease-in-out; }
  /* assessments */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-chartbar path:nth-of-type(1) { animation: ih-grow 0.4s var(--ease-out) backwards; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-chartbar path:nth-of-type(2) { animation: ih-grow 0.4s 0.08s var(--ease-out) backwards; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-chartbar path:nth-of-type(3) { animation: ih-grow 0.4s 0.16s var(--ease-out) backwards; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-target circle:nth-of-type(1) { animation: ih-ring 0.5s ease-in-out 0.2s; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-target circle:nth-of-type(2) { animation: ih-ring 0.5s ease-in-out 0.1s; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-target circle:nth-of-type(3) { animation: ih-ring 0.5s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-filedesc path:nth-of-type(3) { stroke-dasharray: 1; animation: ih-draw 0.35s 0.05s var(--ease-out) backwards; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-filedesc path:nth-of-type(4) { stroke-dasharray: 1; animation: ih-draw 0.35s 0.2s var(--ease-out) backwards; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-chartline path:nth-of-type(2) { stroke-dasharray: 1; animation: ih-draw 0.5s var(--ease-out) backwards; }
  /* ndis info: the "i" pops, then its stem draws */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-info path:nth-of-type(2) { animation: ih-pop2 0.45s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-info path:nth-of-type(3) { stroke-dasharray: 1; animation: ih-draw 0.35s 0.1s var(--ease-out) backwards; }
  /* team: sliders adjust, globe sways */
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-sliders line:nth-of-type(2) { animation: ih-slide-l 0.55s ease-in-out; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-sliders line:nth-of-type(5) { animation: ih-slide-r 0.55s ease-in-out 0.08s; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover .ih-sliders line:nth-of-type(8) { animation: ih-slide-l 0.55s ease-in-out 0.16s; }
  :is(.funding-card, .value-card, .rec-item, .how-point):hover svg.ih-world { animation: ih-sway 0.6s ease-in-out; }
}
@keyframes ih-rise { 50% { transform: translateY(-1.4px); } }
@keyframes ih-step-r { 50% { transform: translateX(1.4px); } }
@keyframes ih-step-l { 50% { transform: translateX(-1.4px); } }
@keyframes ih-halfspin { to { transform: rotate(180deg); } }
@keyframes ih-wind { 50% { transform: rotate(75deg); } }
@keyframes ih-look { 30% { transform: translateX(1.6px); } 65% { transform: translateX(-1.6px); } }
@keyframes ih-hop { 35% { transform: translateY(-2px); } }
@keyframes ih-grow { from { transform: scaleY(0.55); } }
@keyframes ih-ring { 50% { transform: scale(1.12); } }
@keyframes ih-pop2 { 50% { transform: scale(1.8); } }
@keyframes ih-slide-l { 50% { transform: translateX(-3px); } }
@keyframes ih-slide-r { 50% { transform: translateX(3px); } }
@keyframes ih-sway { 30% { transform: rotate(-8deg); } 70% { transform: rotate(5deg); } }