/*
Theme Name: AMP Westmead
Theme URI: https://theamp.com.au/
Author: Advance Medical Practice Westmead
Description: Practice website for Advance Medical Practice Westmead. Bulk billing general practice on Hawkesbury Road, with in-page online booking through HotDoc and HealthEngine. Practice details are edited under Appearance > Customize > Practice details.
Version: 1.14.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amp-westmead
Tags: healthcare, one-column, custom-logo, custom-menu, accessibility-ready
*/

/* This file is generated from the Astro sources; see wordpress/README.md. */

/* ==========================================================================
   Advance Medical Practice Westmead design foundation
   Light-only by design: a public health service should look the same on every
   device a patient opens it on. Type is set a step larger than a typical
   marketing site and tap targets are 48px minimum, because a large share of
   this practice's patients are older adults reading on a phone.
   ========================================================================== */

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

/* ----- tokens ----- */
:root {
  /* china blue, the primary voice of the brand */
  --brand-900: #13314c;
  --brand-800: #1b4468;
  --brand-700: #265d87;
  --brand-600: #31719f;
  --brand-300: #a3c5dd;
  --brand-100: #dce9f3;
  --brand-50:  #f1f7fb;

  /* red, taken from the logo and carried by the primary calls to action.
     #c1272d clears AA both as a white-on-red fill and as red text on white. */
  --accent-700: #9c1f24;
  --accent-600: #c1272d;
  --accent-100: #fbe7e9;

  /* the logo's own blue, brighter than the site's surface blues; used only by
     the mark, which keeps its brand colours regardless of the page palette */
  --logo-blue: #1b75bc;

  /* a deeper red, reserved for the emergency notice so that it still outranks
     the red CTAs it now sits alongside */
  --alert-900: #7a0f1b;
  --alert-700: #8d1220;
  --alert-100: #fbe7e9;

  --ink:        #12283c;
  --ink-muted:  #44596e;
  --ink-subtle: #5a6e82;
  --line:       #d5e2ed;
  --line-soft:  #e8f0f7;
  --surface:    #ffffff;
  --surface-alt:#f6fafd;

  /* A warm ivory for the alternating sections. The site's blues are cool, and
     a page of nothing but white and pale blue reads as clinical rather than
     welcoming; the warmth sits under the white cards and lifts them. */
  --paper:      #fbf7f1;
  --paper-deep: #f4ede2;

  /* a brighter step of the brand blue, for gradients and the icon tiles */
  --brand-500: #3b86bd;

  /* fluid type scale */
  --step--1: clamp(0.94rem, 0.92rem + 0.10vw, 1.00rem);
  --step-0:  clamp(1.06rem, 1.02rem + 0.20vw, 1.19rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.80vw, 2.15rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.60vw, 3.05rem);
  --step-4:  clamp(2.45rem, 1.70rem + 3.00vw, 4.35rem);

  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --radius-xl: 32px;

  /* Soft, wide and tinted with the navy rather than grey, so a raised card
     reads as sitting in the page's own light. */
  --shadow-s: 0 1px 2px rgb(19 49 76 / 0.05), 0 2px 6px rgb(19 49 76 / 0.05);
  --shadow-m: 0 10px 24px -8px rgb(19 49 76 / 0.14), 0 3px 8px rgb(19 49 76 / 0.05);
  --shadow-l: 0 30px 60px -18px rgb(19 49 76 / 0.28), 0 10px 22px -10px rgb(19 49 76 / 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 72rem;
  --measure: 68ch;

  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-body);
}

/* ----- base ----- */
html { scroll-behavior: smooth; }

/* the header is sticky, so anchored sections need to clear it when jumped to */
section[id], h2[id], h3[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--brand-900);
  text-wrap: balance;
}
h1, h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, li { text-wrap: pretty; }

a { color: var(--brand-700); text-underline-offset: 0.2em; }
a:hover { color: var(--brand-800); }

:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

::selection { background: var(--brand-100); color: var(--brand-900); }

/* ----- layout ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
@media (min-width: 48rem) { .container { padding-inline: var(--space-l); } }

.section { padding-block: var(--space-xl); }
@media (min-width: 48rem) { .section { padding-block: var(--space-2xl); } }
.section--tight { padding-block: var(--space-l); }
.section--alt { background: var(--paper); }
.section--brand { background: var(--brand-900); color: #e3eef8; }
.section--brand h2, .section--brand h3 { color: #ffffff; }
.section--brand p { color: #c2d8e8; }

.stack > * + * { margin-top: var(--flow, var(--space-s)); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-s); }
.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2xs); }

.grid { display: grid; gap: var(--space-m); }
@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* A short red rule leads every eyebrow: a small, repeated touch of the logo's
   red that ties the sections together without shouting. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.eyebrow::before {
  content: '';
  flex: none;
  width: 1.5em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-600);
}
.section--brand .eyebrow { color: var(--brand-300); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ----- buttons ----- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.75rem 1.45rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; width: 1.15em; height: 1.15em; }
.btn--lg { min-height: 3.5rem; padding: 0.9rem 1.75rem; }

.btn--primary {
  background: linear-gradient(180deg, #d0343a, var(--accent-600));
  border-color: var(--accent-600);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgb(193 39 45 / 0.55), var(--shadow-s);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent-600), var(--accent-700));
  border-color: var(--accent-700);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgb(193 39 45 / 0.6), var(--shadow-s);
}
/* A band of light crosses the filled buttons under the pointer. */
.btn--primary::after,
.btn--brand::after,
.btn--on-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after,
  .btn--brand:hover::after,
  .btn--on-dark:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease-out); }
}

.btn--brand {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  box-shadow: var(--shadow-s);
}
.btn--brand:hover {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
  box-shadow: var(--shadow-m);
}

.btn--outline {
  background: transparent;
  border-color: var(--brand-700);
  color: var(--brand-800);
}
.btn--outline:hover { background: var(--brand-50); color: var(--brand-900); }

.btn--on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--brand-900);
}
.btn--on-dark:hover { background: var(--brand-100); color: var(--brand-900); }

.btn--ghost-on-dark {
  background: transparent;
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}
.btn--ghost-on-dark:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ----- cards ----- */
.card {
  background: var(--surface);
  border: 1px solid rgb(19 49 76 / 0.08);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
  transition:
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out),
    border-color 320ms ease;
}
.card--raise:hover {
  box-shadow: var(--shadow-l);
  transform: translateY(-6px);
  border-color: rgb(49 113 159 / 0.28);
}

/* ----- skip link ----- */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  padding: 0.75rem 1.15rem;
  background: var(--brand-900);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-m);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 140ms ease;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ==========================================================================
   Motion

   Everything here is opt-in twice over: the .js-anim class is only put on the
   document when JavaScript runs AND the visitor has not asked for reduced
   motion. With scripting off, motion reduced, or printing, nothing is ever
   hidden, so the page is always readable.

   The selector list below is mirrored in public/motion.js, which observes the
   same elements. Change one and change the other.
   ========================================================================== */

/* The list sits inside :where() so it carries no specificity of its own.
   Without that, `.js-anim .section > .container > *` (three classes) outranks
   the reveal rule below (two), and elements take the class but never fade in.

   A grid reveals by the item rather than as one block, so a row of cards
   arrives as a row of cards. The grid itself is excluded on the line above it,
   because a container fading in around children that are also fading in gives
   them two lots of travel and a muddled arrival. */
.js-anim :where(
  .page-header > .container > *,
  .section > .container > *:not(.grid),
  .grid > li,
  .allied__half,
  .assurances__grid > li,
  .cta__inner > *
) {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* A card travels a little less than a block of prose does, which also keeps
   the total sensible where a grid sits inside a section that is itself being
   revealed, as the fact sheet groups do. */
.js-anim :where(.grid > li) { transform: translateY(12px); }

/* Opacity finishes before the movement does, so the element is readable while
   it is still settling rather than arriving and then stopping. */
.js-anim .is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition:
    opacity 480ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Safety nets: nothing stays invisible in any of these situations. */
@media (prefers-reduced-motion: reduce) {
  .js-anim :where(
    .page-header > .container > *,
    .section > .container > *:not(.grid),
    .grid > li,
    .allied__half,
    .assurances__grid > li,
    .cta__inner > *
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media print {
  .js-anim :where(
    .page-header > .container > *,
    .section > .container > *:not(.grid),
    .grid > li,
    .allied__half,
    .assurances__grid > li,
    .cta__inner > *
  ) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The sticky header lifts off the page once it is over content, and its
   backing goes from translucent to nearly solid so text scrolling underneath
   never shows through the navigation. */
.site-header {
  transition:
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 320ms ease;
}
.site-header[data-scrolled='true'] {
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgb(19 49 76 / 0.09);
}

/* A component that sets its own display would otherwise beat the browser's
   [hidden] rule, which is how the status pill showed up empty with scripting
   off. Anything hidden stays hidden. */
[hidden] { display: none !important; }

/* A trailing arrow leans in the direction it is pointing. */
.btn > svg:last-child,
.sheet__source svg,
.news-item__more svg,
.map-card__cta svg { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover > svg:last-child,
.sheet:hover .sheet__source svg,
.news-item:hover .news-item__more svg { transform: translateX(4px); }
/* The map card holds a map frame rather than being one big link, so here the
   link itself is what has to be hovered. */
.map-card__cta:hover svg { transform: translateX(4px); }

/* Cross-fade between pages where the browser supports it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }

/* Shared movement. Each is small on purpose: things drift and settle, nothing
   bounces across the page. Every use of these sits behind
   prefers-reduced-motion: no-preference. */
@keyframes amp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes amp-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
@keyframes amp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes amp-spin { to { transform: rotate(360deg); } }
@keyframes amp-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.8; }
}
@keyframes amp-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3rem, -2rem) scale(1.08); }
}
@keyframes amp-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2.5rem, 2rem); }
}
@keyframes amp-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0.55); }
  75% { box-shadow: 0 0 0 9px rgb(74 222 128 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}

/* ----- helpers ----- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }


/* ==========================================================================
   Header and utility bar
   ========================================================================== */

.utility {
    background: var(--brand-900);
    color: #b7d2e8;
    font-size: var(--step--1);
  }
  .utility__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    align-items: center;
    justify-content: space-between;
    padding-block: 0.5rem;
  }
  .utility__item { display: inline-flex; align-items: center; gap: 0.5em; }
  /* Filled in by the browser, so it stays hidden until there is an answer. */
  .status { gap: 0.45em; font-weight: 600; }
  .status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ink-subtle);
  }
  /* The dot repeats what the words already say, so it carries no meaning of
     its own; these are simply light enough to read on the dark bar. */
  .status[data-open='true'] .status__dot {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgb(74 222 128 / 0.25);
  }
  .status[data-open='false'] .status__dot { background: #fca5a5; }
  .status__detail { font-weight: 400; opacity: 0.85; }
  .status__detail:not(:empty)::before { content: '\00b7'; margin-inline-end: 0.45em; }
  .utility__link { color: #fff; font-weight: 600; text-decoration: none; }
  .utility__link:hover { color: var(--brand-300); text-decoration: underline; }
  @media (max-width: 34rem) { .utility__inner { justify-content: center; text-align: center; } }

  .lang-switch__list { display: flex; gap: 0.35em; margin: 0; padding: 0; }
  .lang-switch__link {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: #b7d2e8;
    text-decoration: none;
    font-weight: 600;
  }
  .lang-switch__link:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
  .lang-switch__link[aria-current='true'] { color: #fff; background: rgb(255 255 255 / 0.16); }

  /* The header row is wider than the reading column, so it gets its own
     container width; the horizontal nav only switches on at the width where
     that row genuinely fits, measured against the fallback fonts (which are
     wider than Inter/Jakarta and render first while webfonts swap in). */
  .utility__inner,
  .site-header__inner { max-width: 78rem; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    justify-content: space-between;
    padding-block: 0.75rem;
  }

  /* flex:none, not min-width:0: allowed to shrink, the masthead collapses
     under its own content and the badge lands on top of the navigation. */
  .masthead { display: flex; align-items: center; gap: 0.7rem; flex: none; }
  .brand { display: inline-flex; align-items: center; text-decoration: none; }

  /* The accreditation only joins the masthead where there is genuinely room
     for it beside seven navigation items; below that it lives in the menu. */
  .masthead__accred { display: none; }
  .primary-nav__accred {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--line-soft);
  }
  .primary-nav__accred .accred { padding-left: 0; border-left: 0; }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--brand-50);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--brand-800);
    cursor: pointer;
  }
  .nav-toggle__open,
  .nav-toggle__close { display: grid; place-items: center; }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

  .primary-nav { display: none; }
  /* The reset only strips markers from lists that declare role="list", and a
     WordPress-generated menu declares nothing, so this says it outright. */
  .primary-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .primary-nav__list a {
    display: block;
    padding: 0.8rem 0.65rem;
    border-radius: var(--radius-m);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-900);
    text-decoration: none;
  }
  .primary-nav__list a:hover { background: var(--brand-50); }
  .primary-nav__list a[aria-current='page'] {
    color: var(--brand-700);
    background: var(--brand-100);
  }
  .primary-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--line-soft);
  }

  /* open state on small screens */
  .site-header[data-open='true'] .primary-nav {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    padding: var(--space-s) var(--space-m) var(--space-m);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  @media (min-width: 78rem) {
    .nav-toggle { display: none; }
    .primary-nav {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }
    .primary-nav__list { flex-direction: row; align-items: center; gap: 0.05rem; }
    /* Seven items share this row with the brand and the booking button, so the
       horizontal padding is tighter here than a link would normally get. */
    .primary-nav__list a {
      position: relative;
      padding: 0.5rem 0.55rem;
      font-size: var(--step--1);
      white-space: nowrap;
    }
    /* On the desktop row a link is marked by a short red rule that grows out
       from the middle, rather than by a filled block. */
    .primary-nav__list a:hover,
    .primary-nav__list a[aria-current='page'] { background: none; }
    .primary-nav__list a::after {
      content: '';
      position: absolute;
      inset-inline: 0.55rem;
      bottom: 0.15rem;
      height: 2px;
      border-radius: 2px;
      background: var(--accent-600);
      transform: scaleX(0);
      transition: transform 320ms var(--ease-out);
    }
    .primary-nav__list a:hover::after,
    .primary-nav__list a[aria-current='page']::after { transform: scaleX(1); }
    .primary-nav__list a[aria-current='page'] { color: var(--brand-900); }
    /* the masthead and the actions keep their intrinsic width; only the link
       list is allowed to give ground when the viewport tightens */
    .masthead, .primary-nav__actions { flex: none; }
    .primary-nav__actions {
      flex-direction: row;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
    .primary-nav__actions .btn { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--step--1); }
    .primary-nav__accred { display: none; }
  }

  /* The accreditation only joins the masthead on screens wide enough to widen
     the header row for it. The row has its own container width, so this does
     not change how wide the page content reads. */
  @media (min-width: 96rem) {
    .masthead__accred { display: block; }
    .utility__inner,
    .site-header__inner { max-width: 88rem; }
  }
  @media (min-width: 78rem) {
    /* On desktop the header carries only the primary booking action. The phone
       number already appears in the utility bar directly above, on every page
       body, and in the footer. Repeating it as a button here pushed the row
       past the container width and forced the labels to wrap. */
    .primary-nav__actions .btn--outline { display: none; }
  }

/* ==========================================================================
   Logo lockup
   ========================================================================== */

.logo { display: inline-flex; align-items: center; gap: 0.6rem; }
  .logo__mark { display: block; flex: none; }
  .logo__image { display: block; flex: none; width: auto; height: 2.75rem; }

  .logo__words { display: flex; flex-direction: column; line-height: 1.05; }
  .logo__name {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: 0.02em;
    color: var(--accent-600);
    white-space: nowrap;
  }
  .logo__sub {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent-600);
    white-space: nowrap;
  }

  /* The locality is not part of the practice's logo, so it is set apart from
     the lockup rather than dropped into it. */
  .logo__place {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: 0.6rem;
    border-left: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-700);
  }

  .logo__place { white-space: nowrap; }

  /* the lockup has to share the bar with the menu button on a phone */
  @media (max-width: 34rem) {
    .logo { gap: 0.45rem; }
    .logo__mark { width: 36px; height: 36px; }
    .logo__name { font-size: 1.02rem; }
    .logo__sub { font-size: 0.55rem; letter-spacing: 0.1em; }
    .logo__place { padding-left: 0.45rem; font-size: 0.55rem; letter-spacing: 0.1em; }
  }
  @media (max-width: 22rem) {
    .logo__place { display: none; }
  }

/* ==========================================================================
   Accreditation mark
   ========================================================================== */

.accred {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
  }
  .accred__image { display: block; width: auto; height: 2.5rem; }

  .accred__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .accred__icon svg { width: 1.05rem; height: 1.05rem; }

  .accred__words { display: flex; flex-direction: column; line-height: 1.15; }
  .accred__line {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
  }
  a.accred:hover .accred__line { color: var(--brand-700); }

/* ==========================================================================
   Practice notice
   ========================================================================== */

.notice {
    background: var(--accent-100);
    border-bottom: 1px solid #f3cdd0;
    color: var(--accent-700);
    font-size: var(--step--1);
  }
  .notice__inner {
    display: flex;
    align-items: center;
    gap: 0.65em;
    padding-block: 0.6rem;
  }
  .notice__icon { display: inline-flex; flex: none; }
  .notice__text { margin: 0; flex: 1; }
  .notice__text a {
    color: inherit;
    font-weight: 700;
    margin-inline-start: 0.4em;
  }
  .notice__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    /* A comfortable tap target on a phone, pulled back into the bar so
       reaching for it does not make the bar taller. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-block: -0.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .notice__close:hover { background: rgb(156 31 36 / 0.1); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--brand-900);
    color: #c2d8e8;
    padding-block: var(--space-xl) var(--space-l);
    margin-top: auto;
  }
  .site-footer a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.4); }
  .site-footer a:hover { color: var(--brand-300); text-decoration-color: currentColor; }
  .site-footer .btn { text-decoration: none; }
  /* the generic footer link colour outranks the button modifiers, so the
     on-dark button needs its dark text restored explicitly */
  .site-footer .btn--on-dark { color: var(--brand-900); }
  .site-footer .btn--on-dark:hover { color: var(--brand-900); }
  .site-footer .btn--ghost-on-dark,
  .site-footer .btn--ghost-on-dark:hover { color: #fff; }

  .site-footer__grid {
    display: grid;
    gap: var(--space-l);
  }
  @media (min-width: 44rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 68rem) {
    .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 0.8fr; gap: var(--space-xl); }
  }

  .site-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--step-1);
    color: #fff;
    letter-spacing: -0.02em;
  }
  .site-footer__mark { flex: none; fill: #e25b5f; }
  .site-footer__blurb {
    margin-block: var(--space-xs) 0;
    max-width: 42ch;
  }
  /* The number people most need, set large enough to find without reading. */
  .site-footer .site-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--space-m);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  .site-footer__phone svg {
    flex: none;
    box-sizing: content-box;
    padding: 0.6rem;
    border-radius: 50%;
    background: var(--accent-600);
    width: 1.1rem;
    height: 1.1rem;
  }
  .site-footer .site-footer__phone:hover { color: var(--brand-300); }

  .site-footer__heading {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-300);
    margin-bottom: var(--space-xs);
  }

  .site-footer__address { font-style: normal; margin-bottom: var(--space-2xs); }
  .site-footer__col p + p { margin-top: var(--space-2xs); }

  .site-footer__hours { display: grid; gap: 0.3rem; font-size: var(--step--1); }
  .site-footer__hours li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    max-width: 16rem;
  }
  .site-footer__hours span:first-child { color: #fff; font-weight: 600; }
  .site-footer__hours span:last-child { white-space: nowrap; }

  .site-footer__links {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__urgent {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    margin-top: var(--space-xl);
    padding: var(--space-s) var(--space-m);
    background: rgb(255 255 255 / 0.07);
    border: 1px solid rgb(255 255 255 / 0.18);
    border-left: 4px solid var(--accent-600);
    border-radius: var(--radius-m);
    font-size: var(--step--1);
  }
  .site-footer__urgent svg { flex: none; color: #ffc2c9; margin-top: 0.15em; }
  @media (max-width: 34rem) { .site-footer__urgent { flex-direction: column; gap: var(--space-xs); } }
  .site-footer__urgent strong { color: #fff; }

  .site-footer__base {
    margin-top: var(--space-l);
    padding-top: var(--space-s);
    border-top: 1px solid rgb(255 255 255 / 0.15);
    font-size: 0.85rem;
    color: #a3c5dd;
    display: grid;
    gap: var(--space-2xs);
  }

/* ==========================================================================
   Inner page header
   ========================================================================== */

/* Warm ivory washed with the brand's blue and the logo's red, and a few soft
   shapes drifting behind the heading: enough colour to say where you are,
   quiet enough that the heading is still the first thing read. */
.page-header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(46rem 26rem at 8% -30%, #d7e8f6, transparent 68%),
      radial-gradient(34rem 22rem at 96% -10%, #fbe2e1, transparent 64%),
      radial-gradient(40rem 26rem at 72% 140%, var(--paper-deep), transparent 70%),
      var(--paper);
    padding-block: var(--space-xl) calc(var(--space-xl) + 0.5rem);
  }
  @media (min-width: 48rem) {
    .page-header { padding-block: calc(var(--space-2xl) - 0.5rem) var(--space-2xl); }
  }
  .page-header .eyebrow { margin-bottom: var(--space-xs); }
  .page-header h1 { max-width: 20ch; }
  .page-header .lede { margin-top: var(--space-s); }

  .page-header__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .page-header__shape { position: absolute; display: block; border-radius: 50%; }
  .page-header__shape--a {
    inset-inline-end: 4%;
    top: -6rem;
    width: 24rem;
    height: 24rem;
    border: 1.5rem solid rgb(59 134 189 / 0.08);
  }
  .page-header__shape--b {
    inset-inline-end: 24%;
    bottom: -4.5rem;
    width: 10rem;
    height: 10rem;
    background: rgb(193 39 45 / 0.07);
  }
  .page-header__cross {
    position: absolute;
    display: none;
    inset-inline-end: 11%;
    top: 32%;
    width: 5.5rem;
    height: 5.5rem;
    fill: rgb(38 93 135 / 0.12);
  }
  @media (min-width: 56rem) { .page-header__cross { display: block; } }
  @media (prefers-reduced-motion: no-preference) {
    .page-header__shape--a { animation: amp-drift-b 24s ease-in-out infinite; }
    .page-header__shape--b { animation: amp-drift-a 18s ease-in-out infinite; }
    .page-header__cross { animation: amp-float 8s ease-in-out infinite; }
  }

/* ==========================================================================
   Service card
   ========================================================================== */

.service {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  a.service:hover { color: inherit; }
  .service__icon {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.4rem;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    box-shadow: 0 12px 22px -12px rgb(38 93 135 / 0.8);
    transition: transform 420ms var(--ease-out);
  }
  /* The tiles run blue, red, navy across each row, so a grid of services has a
     rhythm rather than being a wall of identical squares. */
  .service-grid > li:nth-child(3n + 2) .service__icon {
    background: linear-gradient(140deg, #de4a4f, var(--accent-700));
    box-shadow: 0 12px 22px -12px rgb(193 39 45 / 0.8);
  }
  .service-grid > li:nth-child(3n + 3) .service__icon {
    background: linear-gradient(140deg, var(--brand-700), var(--brand-900));
    box-shadow: 0 12px 22px -12px rgb(19 49 76 / 0.85);
  }
  .card--raise:hover .service__icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
  .service h3 { color: var(--brand-900); }
  .service__summary { color: var(--ink); font-weight: 500; }
  .service__detail { color: var(--ink-muted); font-size: var(--step--1); }
  .service__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--brand-700);
    font-size: var(--step--1);
    font-weight: 700;
  }
  .service__more svg { transition: transform 260ms var(--ease-out); }
  a.service:hover .service__more { color: var(--accent-600); }
  a.service:hover .service__more svg { transform: translateX(4px); }

  /* Arriving from a home-page card, the service it named is picked out. */
  .service[id] { scroll-margin-top: 7rem; }
  .service:target {
    border-color: rgb(193 39 45 / 0.45);
    box-shadow: 0 0 0 5px rgb(193 39 45 / 0.1), var(--shadow-m);
  }

/* ==========================================================================
   Opening hours card
   ========================================================================== */

.hours__title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--brand-800);
    margin-bottom: var(--space-s);
  }
  .hours__table { width: 100%; border-collapse: collapse; }
  .hours__table th,
  .hours__table td { padding: 0.5rem 0; text-align: left; font-weight: 500; }
  .hours__table td { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .hours__table tr + tr { border-top: 1px solid var(--line-soft); }
  .hours__table tr[data-today] th,
  .hours__table tr[data-today] td { color: var(--brand-700); font-weight: 700; }
  .hours__table td[data-closed] { color: var(--ink-subtle); font-style: italic; }
  .hours__table tr[data-today] td[data-closed] { color: var(--accent-700); font-style: normal; }
  .hours__note {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--line-soft);
    font-size: var(--step--1);
    color: var(--ink-subtle);
  }
  /* Today is marked with a red dot beside the day, as well as in colour. */
  .hours__table tr[data-today] th::before {
    content: '';
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-inline-end: 0.5em;
    border-radius: 50%;
    background: var(--accent-600);
    vertical-align: 0.12em;
  }

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.cta { padding-block: var(--space-xl); }
  @media (min-width: 48rem) { .cta { padding-block: var(--space-2xl); } }
  .cta__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(42rem 24rem at 110% -20%, rgb(59 134 189 / 0.55), transparent 62%),
      radial-gradient(30rem 20rem at -10% 125%, rgb(193 39 45 / 0.32), transparent 62%),
      linear-gradient(135deg, var(--brand-900), #0d2638);
    color: #dbe8f4;
    box-shadow: var(--shadow-l);
  }
  .cta__panel h2 { color: #fff; font-size: var(--step-3); }
  .cta__panel p { color: #c6d9ea; }
  .cta__inner { display: grid; gap: var(--space-l); align-items: center; }
  .cta__inner > div:first-child { max-width: 34rem; }
  .cta__inner p { margin-top: var(--space-xs); }
  @media (min-width: 56rem) {
    .cta__inner { grid-template-columns: 1fr auto; gap: var(--space-xl); }
  }
  .cta__side { display: grid; gap: var(--space-s); justify-items: start; }
  @media (min-width: 56rem) { .cta__side { justify-items: end; } }
  .cta__actions { max-width: 34rem; }
  @media (min-width: 56rem) { .cta__actions { justify-content: flex-end; } }
  .cta__alt a { color: #fff; font-weight: 600; text-decoration-color: rgb(255 255 255 / 0.45); }
  .cta__alt a:hover { color: var(--brand-300); }

  .cta__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .cta__shape { position: absolute; display: block; border-radius: 50%; }
  .cta__shape--a {
    inset-inline-end: -5rem;
    top: -8rem;
    width: 20rem;
    height: 20rem;
    border: 1.25rem solid rgb(255 255 255 / 0.06);
  }
  .cta__shape--b {
    inset-inline-start: 40%;
    bottom: -5rem;
    width: 10rem;
    height: 10rem;
    background: rgb(255 255 255 / 0.05);
  }
  @media (prefers-reduced-motion: no-preference) {
    .cta__shape--a { animation: amp-drift-b 20s ease-in-out infinite; }
    .cta__shape--b { animation: amp-drift-a 16s ease-in-out infinite; }
  }

/* ==========================================================================
   Booking buttons
   ========================================================================== */

/* .btn is globally nowrap so header labels never break mid-row, but these
     labels carry a platform name and cannot fit one line on a 320px screen. */
  .booking-btn { white-space: normal; text-align: center; }
  @media (max-width: 30rem) {
    .booking-btn { flex: 1 1 100%; }
  }

/* ==========================================================================
   Booking panel
   ========================================================================== */

.booking__grid {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
  }
  @media (min-width: 44rem) { .booking__grid { grid-template-columns: repeat(2, 1fr); } }

  /* grid items default to min-width:auto, and .btn is globally nowrap, so a
     long platform name would otherwise push the card wider than the viewport */
  .booking__card { display: flex; flex-direction: column; min-width: 0; }
  .booking__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
  }
  .booking__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .booking__head h3 { color: var(--brand-900); }
  .booking__tag {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-100);
    color: var(--accent-700);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .booking__note { color: var(--ink-muted); font-size: var(--step--1); }
  .booking__btn {
    margin-top: var(--space-m);
    align-self: flex-start;
    white-space: normal;
    text-align: center;
  }
  @media (max-width: 30rem) {
    .booking__btn { align-self: stretch; width: 100%; }
  }

  .booking__fallback {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: var(--space-m);
    padding: var(--space-s) var(--space-m);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-m);
    font-size: var(--step--1);
    color: var(--ink-muted);
  }
  .booking__fallback svg { flex: none; color: var(--brand-700); margin-top: 0.2em; }

/* ==========================================================================
   LinkedIn posts
   ========================================================================== */

.linkedin__head {
    display: grid;
    gap: var(--space-m);
    align-items: end;
  }
  @media (min-width: 48rem) {
    .linkedin__head {
      grid-template-columns: 1fr auto;
      gap: var(--space-l);
    }
  }
  .linkedin__grid {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
  }
  @media (min-width: 48rem) {
    .linkedin__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 72rem) {
    .linkedin__grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* LinkedIn's frames do not resize themselves, so the card fixes the height
     and the row stays even whatever the posts are. */
  .linkedin__card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-s);
  }
  .linkedin__frame {
    display: block;
    width: 100%;
    height: 34rem;
    border: 0;
    background: var(--surface);
  }

/* ==========================================================================
   Home page pop-up
   ========================================================================== */

/* The counselling service's green and white. Kept apart from the site's own
     tokens so it cannot drift into the rest of the page, and chosen so every
     pair of them carries enough contrast to read: the deep green on white is
     12.2:1, the eyebrow green 6.5:1, and white on the footer green 4.9:1,
     which is what the 13px crisis line underneath needs.

     Declared for the pop-up and the services-page panel together: they
     advertise the same service, and two copies of a palette is how one
     campaign ends up in two slightly different greens. */
  .promo {
    --promo-ink: #0b3d2e;
    --promo-green: #148056;
    --promo-deep: #0f6b49;
    --promo-leaf: #2fa173;
    --promo-mint: #dff3e9;
    --promo-card: #ffffff;
  }

  .promo {
    position: fixed;
    inset: 0;
    /* Clear of the sticky header, which sits at 100. Tying with it would leave
       which one covers the other down to document order. */
    z-index: 200;
    display: grid;
  }
  /* The site's focus ring is its red, which has nothing to do with this
     palette. A ring here has to show on the white card, on the green footer
     and on the dark arch, so it is two-tone: whichever half disappears into
     the surface, the other one does not. */
  .promo :focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--promo-ink);
  }

  .promo__scrim {
    position: absolute;
    inset: 0;
    background: rgb(8 35 26 / 0.58);
    backdrop-filter: blur(2px);
    animation: promo-scrim 0.5s ease both;
  }
  .promo__shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .promo__shape {
    position: absolute;
    display: block;
    border-radius: 50%;
    animation: promo-shape 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) both;
  }
  .promo__shape--a { left: -90px; top: -70px; width: 300px; height: 300px; background: var(--promo-green); opacity: 0.92; animation-delay: 0.05s, 0.8s; }
  .promo__shape--b { left: 120px; top: 62%; width: 170px; height: 170px; background: var(--promo-mint); animation-delay: 0.18s, 0.9s; }
  .promo__shape--c { right: -70px; top: -50px; width: 240px; height: 240px; background: var(--promo-leaf); animation-delay: 0.12s, 0.7s; }
  .promo__shape--d { right: 60px; bottom: -90px; width: 320px; height: 320px; background: var(--promo-green); opacity: 0.94; animation-delay: 0.22s, 1.1s; }
  .promo__shape--e { left: 8%; bottom: -60px; width: 260px; height: 130px; border-radius: 999px 999px 0 0; background: var(--promo-mint); opacity: 0.85; animation-delay: 0.36s, 1.3s; }
  .promo__shape--f { right: -30px; top: 44%; width: 190px; height: 190px; border: 16px solid var(--promo-leaf); box-sizing: border-box; animation-delay: 0.42s, 1.4s; }
  .promo__shape--g { left: 36%; top: -72px; width: 150px; height: 150px; border: 14px solid var(--promo-mint); box-sizing: border-box; animation-delay: 0.5s, 1.6s; }
  .promo__shape--h { left: 2%; top: 14%; width: 76px; height: 76px; border-radius: 22px; background: var(--promo-leaf); animation-delay: 0.62s, 1.2s; }

  /* The stage scrolls, so a tall card on a short screen is still reachable. */
  .promo__stage {
    position: relative;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 2.5rem);
  }
  .promo__card {
    position: relative;
    width: 100%;
    max-width: 47.5rem;
    overflow: hidden;
    border-radius: 22px;
    background: var(--promo-card);
    box-shadow: 0 40px 90px rgb(8 35 26 / 0.34);
    animation: promo-in 0.72s cubic-bezier(0.22, 1.1, 0.36, 1) 0.18s both;
  }
  /* Decoration behind the text. In the ad's pink it took the eyebrow down to
     1.47:1 and had to be dropped on a narrow card; in mint the eyebrow still
     reads at 5.63:1 over it, so it can stay at every size. */
  .promo__blob {
    display: block;
    position: absolute;
    right: -90px;
    top: -110px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--promo-mint);
    animation: promo-float 9s ease-in-out infinite;
  }
  .promo__close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    /* On a white card a translucent cross washes out: 55% dark leaves it at
       3.27:1. 75% reads at 5.6:1 and still softens against the card. */
    background: rgb(11 61 46 / 0.75);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease;
  }
  .promo__close:hover { background: var(--promo-ink); }

  .promo__body { position: relative; display: grid; }
  @media (min-width: 40rem) {
    .promo__body { grid-template-columns: 1fr auto; }
  }
  .promo__text {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    padding-inline-end: clamp(1.25rem, 3vw, 2.5rem);
  }
  .promo__eyebrow {
    margin: 0;
    color: var(--promo-deep);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: promo-rise 0.5s ease 0.55s both;
  }
  .promo__headline {
    margin: 0;
    color: var(--promo-ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 2.875rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
    animation: promo-soft 0.8s ease both;
  }
  .promo__lede {
    margin: 0;
    max-width: 26rem;
    color: #3a4a43;
    font-size: clamp(1rem, 2.4vw, 1.1875rem);
    line-height: 1.45;
    text-wrap: pretty;
    animation: promo-soft 0.8s ease 0.1s both;
  }
  .promo__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0.25rem 0 0;
    padding: 0;
    animation: promo-rise 0.5s ease 0.7s both;
  }
  .promo__pills li {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--promo-ink);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
  }
  .promo__dots { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
  .promo__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: var(--promo-ink);
    opacity: 0.28;
    cursor: pointer;
    transition: width 400ms ease, opacity 400ms ease;
  }
  .promo__dot[aria-selected='true'] { width: 30px; opacity: 1; }

  .promo__aside { display: none; }
  @media (min-width: 40rem) {
    .promo__aside {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 2.25rem 2rem 0 0;
    }
  }
  .promo__arch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    width: 16.25rem;
    height: 18.75rem;
    padding: 2.375rem 1.625rem 1.625rem;
    box-sizing: border-box;
    border-radius: 130px 130px 18px 18px;
    background: var(--promo-ink);
    text-align: center;
    animation: promo-rise 0.6s ease 0.4s both;
  }
  .promo__arch p { margin: 0; }
  .promo__arch-eyebrow {
    color: var(--promo-mint);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .promo__arch-title {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 2.625rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.035em;
  }
  .promo__arch-title span,
  .promo__arch-lines span { display: block; }
  .promo__rule { width: 44px; height: 3px; border-radius: 99px; background: var(--promo-leaf); }
  .promo__arch-lines { color: #fff; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }

  .promo__foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.375rem clamp(1.75rem, 4vw, 2.75rem);
    background: var(--promo-green);
    color: #fff;
    animation: promo-rise 0.5s ease 0.85s both;
  }
  .promo__foot p { margin: 0; }
  .promo__call a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .promo__call {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.4vw, 1.625rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  /* The one line on here that somebody might need in a bad moment, so it is
     the one line that has to be legible. The footer green was picked for it:
     plain white reads at 4.94:1 on it, which is what 13px needs. */
  .promo__crisis {
    margin-top: 0.35rem !important;
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
  }
  .promo__crisis a { color: inherit; font-weight: 700; }
  .promo__cta {
    padding: 0.875rem 1.625rem;
    border-radius: 999px;
    background: var(--promo-card);
    color: var(--promo-ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    animation: promo-pulse 2.6s ease-out 1.4s infinite;
  }
  .promo__cta:hover { background: var(--promo-ink); color: #ffffff; }

  @keyframes promo-scrim { from { opacity: 0 } to { opacity: 1 } }
  @keyframes promo-in {
    0% { opacity: 0; transform: translateY(38px) scale(0.94) }
    60% { opacity: 1; transform: translateY(-6px) scale(1.01) }
    100% { opacity: 1; transform: translateY(0) scale(1) }
  }
  @keyframes promo-float { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-18px, 14px) scale(1.06) } }
  @keyframes promo-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
  @keyframes promo-soft { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
  @keyframes promo-shape { 0% { opacity: 0; transform: scale(0.2) rotate(-40deg) } 100% { opacity: 1; transform: scale(1) rotate(0deg) } }
  @keyframes promo-drift1 { 0%, 100% { transform: translate(0, 0) rotate(0deg) } 50% { transform: translate(26px, -22px) rotate(8deg) } }
  @keyframes promo-drift2 { 0%, 100% { transform: translate(0, 0) rotate(0deg) } 50% { transform: translate(-30px, 18px) rotate(-10deg) } }
  @keyframes promo-drift3 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(14px, 26px) scale(1.12) } }
  @keyframes promo-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
  @keyframes promo-pulse {
    0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.65) }
    70% { box-shadow: 0 0 0 18px rgb(255 255 255 / 0) }
    100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0) }
  }

  /* The drifting is the part that never stops, so it is the part that is worth
     only doing for people who have not asked for less movement. */
  @media (prefers-reduced-motion: no-preference) {
    .promo__shape--a, .promo__shape--f { animation-name: promo-shape, promo-drift1; animation-duration: 0.7s, 12s; animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
    .promo__shape--b, .promo__shape--c, .promo__shape--g { animation-name: promo-shape, promo-drift2; animation-duration: 0.7s, 13s; animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
    .promo__shape--d { animation-name: promo-shape, promo-drift1; animation-duration: 0.8s, 14s; animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
    .promo__shape--e { animation-name: promo-shape, promo-drift3; animation-duration: 0.7s, 16s; animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1), ease-in-out; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
    .promo__shape--h { animation-name: promo-shape, promo-spin; animation-duration: 0.6s, 26s; animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1), linear; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .promo__scrim,
    .promo__shape,
    .promo__card,
    .promo__blob,
    .promo__eyebrow,
    .promo__headline,
    .promo__lede,
    .promo__pills,
    .promo__arch,
    .promo__foot,
    .promo__cta { animation: none !important; }
    .promo__dot { transition: none; }
  }

  /* The decoration is the first thing to go when there is no room for it. */
  @media (max-width: 40rem) {
    .promo__shape--b,
    .promo__shape--f,
    .promo__shape--g,
    .promo__shape--h { display: none; }
  }

/* ==========================================================================
   Home
   ========================================================================== */

/* ----- hero -----
   The words on the left; on the right a stage: a panel in the practice's
   blues (or a photo of the practice, when one is uploaded in the Customizer),
   the opening hours laid over it, and the bulk-billing seal pinned to its
   corner. The stage is what gives the first screen a sense of place. */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-xl) calc(var(--space-2xl) + 2.5rem);
    background:
      radial-gradient(60rem 36rem at 0% -10%, #dcebf7, transparent 62%),
      radial-gradient(44rem 28rem at 100% 8%, #fbe5e4, transparent 60%),
      linear-gradient(180deg, #ffffff 30%, var(--paper));
  }
  @media (min-width: 64rem) {
    .hero { padding-block: var(--space-2xl) calc(var(--space-2xl) + 3.5rem); }
  }

  .hero__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .hero__blob { position: absolute; display: block; border-radius: 50%; }
  .hero__blob--a {
    inset-inline-start: -10rem;
    top: 28%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle at 35% 35%, rgb(59 134 189 / 0.2), transparent 68%);
  }
  .hero__blob--b {
    inset-inline-start: 34%;
    top: -9rem;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgb(193 39 45 / 0.12), transparent 68%);
  }
  .hero__blob--c {
    inset-inline-end: -12rem;
    bottom: -16rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgb(38 93 135 / 0.16), transparent 68%);
  }

  .hero__inner { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 64rem) {
    .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); }
  }
  .hero__content { min-width: 0; }

  /* The live opening status, repeated from the utility bar where a patient
     looks first. Filled in by status.js; hidden until it has an answer. */
  .hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: var(--space-s);
    padding: 0.4rem 0.95rem 0.4rem 0.75rem;
    border: 1px solid rgb(19 49 76 / 0.08);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-s);
    font-size: var(--step--1);
    color: var(--brand-900);
  }
  .hero__status .status__detail { color: var(--ink-muted); opacity: 1; }
  .hero__status[data-open='false'] .status__dot { background: var(--accent-600); }

  .hero__title { margin-top: var(--space-xs); font-size: var(--step-4); }

  /* "bulk billing" is set in the logo's red with a highlighter stroke behind
     it, drawn in from the left once the heading has settled. */
  .hero__mark {
    font-style: normal;
    color: var(--accent-600);
    padding-inline: 0.06em;
    background: linear-gradient(transparent 60%, rgb(193 39 45 / 0.14) 60%, rgb(193 39 45 / 0.14) 92%, transparent 92%) no-repeat;
    background-size: 100% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hero .lede { margin-top: var(--space-s); max-width: 36rem; color: var(--ink-muted); }
  .hero__actions { margin-top: var(--space-l); }
  .hero__alt { margin-top: var(--space-s); font-size: var(--step--1); }
  .hero__alt a { color: var(--brand-700); font-weight: 600; }
  .hero__alt a:hover { color: var(--accent-600); }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin-top: var(--space-m);
    padding: 0;
  }
  .hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--ink-muted);
    font-size: var(--step--1);
    font-weight: 600;
  }
  .hero__trust svg { flex: none; color: var(--accent-600); }

  /* ----- the stage ----- */

  /* The panel sits behind and to one side; the hours card overlaps its lower
     corner, leaving the top of the panel, with its artwork, in view above. */
  .hero__stage { position: relative; min-width: 0; padding-top: 8rem; }
  @media (min-width: 64rem) {
    .hero__stage { padding-block: 9rem 1rem; }
  }

  .hero__panel {
    position: absolute;
    inset: 0 0 auto;
    height: 12.5rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
      radial-gradient(26rem 20rem at 85% 10%, rgb(59 134 189 / 0.55), transparent 65%),
      linear-gradient(155deg, var(--brand-700), var(--brand-900) 72%);
    box-shadow: var(--shadow-l);
  }
  @media (min-width: 64rem) {
    .hero__panel { inset: 0 0 5.5rem 12%; height: auto; }
  }
  .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__ring { fill: none; stroke: #fff; stroke-width: 2; stroke-opacity: 0.2; }
  .hero__ring--2 { stroke-opacity: 0.16; stroke-dasharray: 3 11; }
  .hero__cross { fill: #fff; fill-opacity: 0.16; }

  .hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hero__panel--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 45%, rgb(19 49 76 / 0.4));
  }

  .hero__card { position: relative; z-index: 1; width: min(100%, 26rem); margin-inline: 0.75rem 0; }
  @media (min-width: 64rem) { .hero__card { margin-inline: 0; } }
  .hero__card .hours {
    padding: var(--space-m) var(--space-m) var(--space-s);
    border-color: rgb(255 255 255 / 0.8);
    background: rgb(255 255 255 / 0.97);
    box-shadow: var(--shadow-l);
    backdrop-filter: blur(10px);
  }
  /* Tighter rows than the full-size card: here it shares the first screen. */
  .hero__card .hours__table th,
  .hero__card .hours__table td { padding-block: 0.4rem; }
  .hero__card .hours__title { margin-bottom: var(--space-xs); }

  .hero__where {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.15rem 0.9rem;
    margin-top: 0.75rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgb(19 49 76 / 0.08);
    border-radius: var(--radius-l);
    background: #fff;
    box-shadow: var(--shadow-m);
    color: var(--ink);
    text-decoration: none;
    transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  }
  .hero__where:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); color: var(--ink); }
  .hero__where-icon {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--accent-100);
    color: var(--accent-600);
  }
  .hero__where-text { display: grid; line-height: 1.35; }
  .hero__where-text strong { font-family: var(--font-display); color: var(--brand-900); }
  .hero__where-text span { color: var(--ink-muted); font-size: var(--step--1); }
  .hero__where-go {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--brand-700);
    font-size: var(--step--1);
    font-weight: 700;
  }
  .hero__where-go svg { transition: transform 260ms var(--ease-out); }
  .hero__where:hover .hero__where-go { color: var(--accent-600); }
  .hero__where:hover .hero__where-go svg { transform: translateX(4px); }

  /* The seal: "$0" inside a ring of "bulk billed", turning slowly. */
  .hero__badge {
    position: absolute;
    z-index: 2;
    top: 2.5rem;
    inset-inline-end: 1.25rem;
    display: grid;
    place-items: center;
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 36px -12px rgb(8 25 40 / 0.55);
  }
  @media (min-width: 64rem) {
    .hero__badge { top: 1.75rem; inset-inline-end: 1.75rem; width: 8.5rem; height: 8.5rem; }
  }
  /* Always laid out left to right: under a right-to-left page the text would
     otherwise start from the end of the path and run off it. Arabic words on
     the ring still read correctly, as the bidi algorithm orders them. */
  .hero__badge-ring { position: absolute; inset: 0.3rem; width: calc(100% - 0.6rem); height: calc(100% - 0.6rem); direction: ltr; }
  .hero__badge-ring text {
    fill: var(--brand-700);
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hero__badge-figure {
    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent-600);
  }

/* ----- why patients choose us: a strip laid over the foot of the hero ----- */

.assurances { position: relative; z-index: 2; margin-top: -4.5rem; }
  @media (min-width: 64rem) { .assurances { margin-top: -5.5rem; } }
  .assurances__grid {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgb(19 49 76 / 0.06);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-l);
  }
  @media (min-width: 40rem) { .assurances__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .assurances__grid { grid-template-columns: repeat(4, 1fr); } }

  .assurance { display: flex; gap: var(--space-s); align-items: flex-start; padding: var(--space-m); }
  .assurance > div { min-width: 0; }
  .assurance + .assurance { border-top: 1px solid var(--line-soft); }
  @media (min-width: 40rem) and (max-width: 63.99rem) {
    .assurance + .assurance { border-top: 0; }
    .assurance:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
    .assurance:nth-child(even) { border-inline-start: 1px solid var(--line-soft); }
  }
  @media (min-width: 64rem) {
    .assurance + .assurance { border-top: 0; border-inline-start: 1px solid var(--line-soft); }
    /* Four across, the icon sits above the words so the words get the width. */
    .assurance { flex-direction: column; gap: var(--space-s); padding: var(--space-l) var(--space-m); }
  }
  .assurance__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    box-shadow: 0 10px 18px -10px rgb(38 93 135 / 0.75);
  }
  .assurance:nth-child(2) .assurance__icon {
    background: linear-gradient(140deg, #de4a4f, var(--accent-700));
    box-shadow: 0 10px 18px -10px rgb(193 39 45 / 0.75);
  }
  .assurance:nth-child(3) .assurance__icon {
    background: linear-gradient(140deg, var(--brand-700), var(--brand-900));
  }
  .assurance__title {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-900);
  }
  .assurance__body { margin-top: 0.15rem; font-size: var(--step--1); color: var(--ink-muted); }

/* ----- section heads and the service grid ----- */

  .section-head {
    display: grid;
    gap: var(--space-m);
    margin-bottom: var(--space-l);
  }
  .section-head .eyebrow { margin-bottom: var(--space-2xs); }
  .section-head .lede { margin-top: var(--space-s); }
  @media (min-width: 56rem) {
    .section-head { grid-template-columns: 1fr auto; align-items: end; }
  }

  .services-home { padding-top: calc(var(--space-2xl) - 0.5rem); }
  .service-grid { align-items: stretch; }
  .service-grid > li { display: flex; }

/* ----- the ticker: everything the practice does, drifting past ----- */

.ticker {
    overflow: hidden;
    padding-block: 1.15rem;
    background:
      radial-gradient(40rem 8rem at 50% 0%, rgb(59 134 189 / 0.35), transparent 70%),
      var(--brand-900);
    color: #fff;
  }
  .ticker__track { display: flex; width: max-content; }
  .ticker__list { display: flex; flex: none; margin: 0; padding: 0; }
  .ticker__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding-inline: 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }
  /* Every other name is set in outline, which keeps a long band from reading
     as one grey wall of type. */
  .ticker__list li:nth-child(even) span {
    color: transparent;
    -webkit-text-stroke: 1.2px rgb(255 255 255 / 0.8);
  }
  .ticker__mark { flex: none; fill: #e25b5f; }
  @media (prefers-reduced-motion: no-preference) {
    .ticker__track { animation: ticker 55s linear infinite; }
    .ticker:hover .ticker__track { animation-play-state: paused; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker__track { width: auto; }
    .ticker__list { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
    .ticker__list ~ .ticker__list { display: none; }
  }

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

.billing-band { background: var(--paper); }
  .billing-band__inner { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 62rem) {
    .billing-band__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  }
  .billing-band__lead { max-width: var(--measure); }
  .billing-band__lead > * + * { margin-top: var(--space-s); }
  .billing-band__lead h2 { margin-top: var(--space-xs); }
  .billing-band .btn-row { margin-top: var(--space-m); }

  .billing-band__feature { display: grid; gap: var(--space-s); }
  .billing-band__stat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-l);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(22rem 14rem at 100% 0%, rgb(59 134 189 / 0.5), transparent 70%),
      linear-gradient(140deg, var(--brand-900), var(--brand-700));
    box-shadow: var(--shadow-l);
  }
  .billing-band__stat::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline-end: -3.5rem;
    top: -3.5rem;
    width: 12rem;
    height: 12rem;
    border: 1rem solid rgb(255 255 255 / 0.06);
    border-radius: 50%;
  }
  .billing-band__figure {
    flex: none;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2.4rem + 4vw, 5.75rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #fff;
  }
  .billing-band__caption {
    max-width: 17ch;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.25;
    color: #e6f0f8;
  }
  .billing-band__quote {
    margin: 0;
    padding: var(--space-m) var(--space-l);
    border: 1px solid rgb(19 49 76 / 0.06);
    border-radius: var(--radius-l);
    background: #fff;
    box-shadow: var(--shadow-m);
  }
  .billing-band__quote blockquote p { color: var(--ink); font-size: var(--step-0); }
  .billing-band__quote figcaption {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: var(--space-s);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--brand-700);
  }

/* ----- latest news ----- */

.news-strip__head {
    display: grid;
    gap: var(--space-m);
    align-items: end;
  }
  @media (min-width: 48rem) {
    .news-strip__head { grid-template-columns: 1fr auto; gap: var(--space-l); }
  }
  .news-strip__grid {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
  }
  @media (min-width: 48rem) {
    .news-strip__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 72rem) {
    .news-strip__grid { grid-template-columns: repeat(3, 1fr); }
  }
  .news-strip__item {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding-top: calc(var(--space-m) + 0.35rem);
    transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  }
  /* A rule across the top of each card, which runs the full width under the
     pointer. */
  .news-strip__item::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-600), var(--brand-500));
    transform: scaleX(0.2);
    transform-origin: left;
    transition: transform 600ms var(--ease-out);
  }
  .news-strip__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }
  .news-strip__item:hover::before { transform: scaleX(1); }
  .news-strip__date {
    justify-self: start;
    margin: 0;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 0.85rem;
    font-weight: 700;
  }
  .news-strip__item h3 { margin: 0; font-size: var(--step-1); }
  .news-strip__item h3 a { color: var(--brand-900); text-decoration: none; }
  .news-strip__item h3 a:hover { color: var(--accent-600); }
  /* The heading is the link; this only points at it. */
  .news-strip__item h3 a::after { content: ''; position: absolute; inset: 0; }
  /* Four lines is enough to know what an update is about; the rest is one
     click away, and the cards then line up. */
  .news-strip__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0;
    color: var(--ink-subtle);
  }
  .news-strip__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.35rem;
    color: var(--brand-700);
    font-weight: 700;
    font-size: var(--step--1);
  }
  .news-strip__more svg { transition: transform 260ms var(--ease-out); }
  .news-strip__item:hover .news-strip__more { color: var(--accent-600); }
  .news-strip__item:hover .news-strip__more svg { transform: translateX(4px); }

/* ----- home motion -----
   The hero animates on arrival rather than on scroll, because it is already
   in view. Everything is gated on js-anim, which the head script only sets
   when motion has not been turned down, and on the media query as well. */

  @media (prefers-reduced-motion: no-preference) {
    .js-anim .hero__content > * { animation: amp-rise 850ms var(--ease-out) both; }
    .js-anim .hero__content > :nth-child(2) { animation-delay: 80ms; }
    .js-anim .hero__content > :nth-child(3) { animation-delay: 160ms; }
    .js-anim .hero__content > :nth-child(4) { animation-delay: 260ms; }
    .js-anim .hero__content > :nth-child(5) { animation-delay: 340ms; }
    .js-anim .hero__content > :nth-child(6) { animation-delay: 420ms; }
    .js-anim .hero__content > :nth-child(7) { animation-delay: 480ms; }
    .js-anim .hero__content > :nth-child(n + 8) { animation-delay: 540ms; }

    .js-anim .hero__mark {
      background-size: 0% 100%;
      animation: amp-mark 900ms var(--ease-out) 850ms forwards;
    }

    .js-anim .hero__panel { animation: amp-panel 1100ms var(--ease-out) 120ms both; }
    .js-anim .hero__card {
      animation:
        amp-rise 950ms var(--ease-out) 380ms both,
        amp-float 9s ease-in-out 1.6s infinite;
    }
    .js-anim .hero__badge {
      animation:
        amp-pop 850ms cubic-bezier(0.34, 1.56, 0.64, 1) 820ms both,
        amp-float 7s ease-in-out 2s infinite;
    }
    .hero__badge-ring { animation: amp-spin 28s linear infinite; }
    .hero__ring--2 { transform-box: fill-box; transform-origin: center; animation: amp-spin 70s linear infinite; }
    .hero__cross { transform-box: fill-box; transform-origin: center; animation: amp-breathe 8s ease-in-out infinite; }

    .hero__blob--a { animation: amp-drift-a 26s ease-in-out infinite; }
    .hero__blob--b { animation: amp-drift-b 21s ease-in-out infinite; }
    .hero__blob--c { animation: amp-drift-a 32s ease-in-out infinite reverse; }

    .status[data-open='true'] .status__dot { animation: amp-pulse-dot 2.4s ease-out infinite; }
  }

  /* Where the browser can tie an animation to scrolling, the hero's backdrop
     drifts more slowly than the page, which gives the first screen depth. */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero__backdrop {
        animation: amp-parallax linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
      }
    }
  }

  @keyframes amp-mark { to { background-size: 100% 100%; } }
  @keyframes amp-panel {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: none; }
  }
  @keyframes amp-parallax { to { transform: translateY(22%); } }
  /* Three copies of the list, so moving by one copy's width loops seamlessly. */
  @keyframes ticker { to { transform: translateX(-33.3333%); } }

/* ==========================================================================
   Services
   ========================================================================== */

.service-grid > li { display: flex; }
  .services__note {
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-soft);
    color: var(--ink-muted);
  }
  .appointment-grid { margin-top: var(--space-l); }
  .appointment { display: flex; gap: var(--space-s); align-items: flex-start; }
  .appointment > div { min-width: 0; }
  .appointment__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .appointment h3 { margin-bottom: 0.25rem; }
  .appointment p { color: var(--ink-muted); font-size: var(--step--1); }

/* ==========================================================================
   Our Practice
   ========================================================================== */

.practice__intro { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 62rem) {
    .practice__intro { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-2xl); }
  }
  .practice__facts h3 { margin-bottom: var(--space-s); color: var(--brand-800); }
  .practice__facts ul { display: grid; gap: var(--space-s); }
  .practice__facts li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step--1); }
  .practice__facts li svg { flex: none; color: var(--brand-600); margin-top: 0.15em; }
  .practice__facts-btn { margin-top: var(--space-m); width: 100%; }

  .team-grid { margin-top: var(--space-l); }
  .person h3 { color: var(--brand-900); }
  .person__role { color: var(--brand-700); font-weight: 600; font-size: var(--step--1); }
  .person__bio { margin-top: var(--space-xs); color: var(--ink-muted); font-size: var(--step--1); }
  .person__languages { margin-top: var(--space-xs); font-size: 0.85rem; color: var(--ink-subtle); }

  .steps { margin-top: var(--space-l); counter-reset: step; }
  .step { display: flex; gap: var(--space-s); align-items: flex-start; }
  .step > div { min-width: 0; }
  .step__number {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
  }
  .step h3 { margin-bottom: 0.25rem; }
  .step p { color: var(--ink-muted); font-size: var(--step--1); }

  .privacy { padding-block: var(--space-xl); }

/* ==========================================================================
   Booking page
   ========================================================================== */

.bookpage__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .bookpage__tab {
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--ink-muted);
    cursor: pointer;
  }
  .bookpage__tab:hover { background: var(--brand-50); color: var(--brand-800); }
  .bookpage__tab[aria-selected='true'] {
    background: var(--accent-600);
    border-color: var(--accent-600);
    color: #fff;
  }

  .bookpage__note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: var(--space-m);
    font-size: var(--step--1);
    color: var(--ink-muted);
  }
  .bookpage__note svg { flex: none; color: var(--accent-600); margin-top: 0.2em; }

  .bookpage__frame-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-s);
  }
  /* width is forced because the vendor's script sets an inline width on the
     frame, which a plain class rule cannot beat; height is deliberately left
     alone, since the same script sets that to fit the booking content. */
  .bookpage__frame {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40rem;
    border: 0;
  }

  .bookpage__linked { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); }
  /* .btn is globally nowrap so header labels never break; these carry a
     platform name and cannot fit one line on a 320px screen. */
  .bookpage__linked .btn,
  .bookpage__links .btn { white-space: normal; text-align: center; }
  @media (max-width: 30rem) {
    .bookpage__linked .btn,
    .bookpage__links .btn { flex: 1 1 100%; }
  }

  .bookpage__fallback { display: flex; gap: var(--space-m); align-items: flex-start; }
  .bookpage__fallback > div { min-width: 0; }
  .bookpage__fallback-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .bookpage__fallback h2 { font-size: var(--step-1); margin-bottom: 0.3rem; }
  .bookpage__fallback p { color: var(--ink-muted); }
  .bookpage__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); }
  @media (max-width: 40rem) { .bookpage__fallback { flex-direction: column; gap: var(--space-s); } }

/* ==========================================================================
   Fact sheets
   ========================================================================== */

.sheets-intro {
    display: flex;
    gap: var(--space-m);
    align-items: flex-start;
    background: var(--brand-50);
    border-color: var(--brand-100);
    border-left: 4px solid var(--brand-600);
  }
  .sheets-intro > div { min-width: 0; }
  .sheets-intro__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-m);
    background: var(--brand-700);
    color: #fff;
  }
  .sheets-intro h2 { font-size: var(--step-1); margin-bottom: 0.3rem; }
  .sheets-intro p { color: var(--ink-muted); font-size: var(--step--1); max-width: var(--measure); }
  @media (max-width: 40rem) { .sheets-intro { flex-direction: column; gap: var(--space-s); } }

  .sheet-group { margin-top: var(--space-xl); }
  .sheet-group__head {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    margin-bottom: var(--space-m);
  }
  .sheet-group__head > div { min-width: 0; }
  .sheet-group__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .sheet-group__head h2 { font-size: var(--step-2); }
  .sheet-group__head p { color: var(--ink-muted); margin-top: 0.2rem; max-width: var(--measure); }

  .sheet-grid > li { display: flex; }
  .sheet {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  .sheet h3 { color: var(--brand-900); }
  .sheet__body { color: var(--ink-muted); font-size: var(--step--1); }
  .sheet__source {
    display: flex;
    align-items: center;
    gap: 0.35em;
    margin-top: auto;
    padding-top: var(--space-xs);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-700);
  }
  .sheet:hover .sheet__source { color: var(--accent-600); }

/* ==========================================================================
   Fees and billing
   ========================================================================== */

.bulk {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
    background: var(--brand-50);
    border-color: var(--brand-100);
    border-left: 4px solid var(--brand-600);
    padding: var(--space-m) var(--space-l);
  }
  .bulk > div, .fee-enquiry > div { min-width: 0; }
  .bulk__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
  }
  .bulk h2 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
  .bulk p { color: var(--ink-muted); max-width: 62ch; }

  .billing-grid { margin-top: var(--space-m); }
  .billing-point h3 { margin-bottom: 0.35rem; }
  .billing-point p { color: var(--ink-muted); font-size: var(--step--1); }

  .fee-group { margin-top: var(--space-l); }
  .fee-group__title { color: var(--brand-800); font-size: var(--step-1); }
  .fee-group__note {
    margin-top: 0.35rem;
    max-width: var(--measure);
    font-size: var(--step--1);
    color: var(--ink-muted);
  }

  .fee-table-wrap { margin-top: var(--space-s); overflow-x: auto; }
  .fee-table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
  }
  .fee-table th,
  .fee-table td { padding: 0.8rem 1rem; text-align: left; }
  .fee-table thead th {
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-800);
    background: var(--brand-50);
  }
  .fee-table tbody tr + tr { border-top: 1px solid var(--line-soft); }
  .fee-table tbody th { font-weight: 500; color: var(--ink); }
  .fee-table td {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--brand-800);
    white-space: nowrap;
  }
  .fee-table__item { display: block; }
  .fee-table__code {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-subtle);
  }
  .fee-table__note {
    display: block;
    font-size: var(--step--1);
    font-weight: 400;
    font-style: italic;
    color: var(--ink-muted);
    white-space: normal;
  }

  .fee-enquiry {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
    margin-top: var(--space-l);
  }
  @media (min-width: 40rem) {
    .bulk { flex-direction: row; gap: var(--space-m); }
    .fee-enquiry { flex-direction: row; gap: var(--space-m); }
  }
  .fee-enquiry__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-m);
    background: var(--accent-100);
    color: var(--accent-700);
  }
  .fee-enquiry h3 { margin-bottom: 0.3rem; }
  .fee-enquiry p { color: var(--ink-muted); }

/* ==========================================================================
   News listing
   ========================================================================== */

.news-list { display: grid; gap: var(--space-m); }
  @media (min-width: 52rem) { .news-list { grid-template-columns: repeat(2, 1fr); } }

  .news-item { display: flex; flex-direction: column; gap: 0.4rem; }
  .news-item__date {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand-600);
  }
  .news-item__title { font-size: var(--step-1); }
  .news-item__title a { color: var(--brand-900); text-decoration: none; }
  .news-item__title a:hover { color: var(--brand-700); text-decoration: underline; }
  .news-item__summary { color: var(--ink-muted); font-size: var(--step--1); }
  .news-item__more {
    display: flex;
    align-items: center;
    gap: 0.35em;
    margin-top: auto;
    padding-top: var(--space-xs);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--accent-600);
  }

  .news-empty { display: flex; gap: var(--space-m); align-items: flex-start; }
  .news-empty__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .news-empty p { color: var(--ink-muted); margin-top: 0.3rem; }

/* ==========================================================================
   News post
   ========================================================================== */

.page-header {
    background:
      radial-gradient(60rem 26rem at 12% -20%, var(--brand-100), transparent 65%),
      var(--surface-alt);
    border-bottom: 1px solid var(--line-soft);
    padding-block: var(--space-xl);
  }
  .page-header .eyebrow { margin-bottom: var(--space-2xs); }

  .post__date {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-top: var(--space-s);
    font-weight: 600;
    color: var(--brand-700);
  }
  .post__body h2 { font-size: var(--step-2); }
  .post__body h3 { font-size: var(--step-1); }

  .post__back { margin-top: var(--space-l); }
  .post__back a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
  }
  .post__back a:hover { text-decoration: underline; }
  .post__back svg { transform: rotate(180deg); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__grid { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 62rem) {
    .contact__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); }
  }

  .contact__list { display: grid; gap: var(--space-l); }
  .contact__list li { display: flex; gap: var(--space-s); align-items: flex-start; }
  /* flex items default to min-width:auto, which stops the long email address
     from wrapping and pushes the page wider than the viewport on small phones */
  .contact__list li > div { min-width: 0; }
  .contact__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .contact__list h2 {
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: 0.25rem;
  }
  .contact__value {
    font-family: var(--font-display);
    /* scales down far enough that the email address fits a 390px screen
       without having to break mid-word */
    font-size: clamp(1.02rem, 0.9rem + 0.6vw, 1.5rem);
    font-weight: 700;
    color: var(--brand-900);
    font-style: normal;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  a.contact__value:hover { color: var(--brand-700); text-decoration: underline; }
  .contact__value--address { line-height: 1.3; display: block; }
  .contact__hint {
    margin-top: 0.35rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
    max-width: 46ch;
  }

  .contact__aside { display: grid; gap: var(--space-s); }

  /* The control and the frame are built at runtime, so they never carry
     Astro's scoping attribute;  is how a scoped stylesheet reaches
     them. The generator unwraps it on the way into the theme.

     Google is not contacted until someone asks for the map. Until then this is
     a drawn placeholder, and the address sits under it as text, which is what
     search engines and anyone who never taps it will read. With scripting off
     the placeholder stays a plain link out to Google Maps. */
  .map-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--brand-50);
    box-shadow: var(--shadow-s);
  }
  .map-card__preview {
    position: relative;
    display: block;
    width: 100%;
    height: 17rem;
    padding: 0;
    border: 0;
    background: linear-gradient(160deg, var(--brand-50), #e7f0f8 60%, var(--brand-100));
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .map-card__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--brand-300) 1px, transparent 1px),
      linear-gradient(90deg, var(--brand-300) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    opacity: 0.35;
  }
  .map-card__pin {
    position: absolute;
    top: 38%;
    left: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--brand-700);
    color: #fff;
    box-shadow: 0 0 0 8px rgb(38 93 135 / 0.18);
    transition: box-shadow 160ms ease;
  }
  .map-card__preview:hover .map-card__pin { box-shadow: 0 0 0 12px rgb(38 93 135 / 0.22); }
  .map-card__action {
    position: absolute;
    top: 62%;
    left: 50%;
    translate: -50% 0;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-s);
    color: var(--brand-700);
    font-size: var(--step--1);
    font-weight: 700;
    white-space: nowrap;
  }
  .map-card__frame {
    display: block;
    width: 100%;
    height: 17rem;
    border: 0;
    /* The tiles are a light map either way; this keeps the frame from
       flashing white on a dark background before it paints. */
    background: var(--brand-50);
  }
  .map-card__label {
    display: grid;
    gap: 0.1rem;
    padding: var(--space-s) var(--space-m) var(--space-m);
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--step--1);
  }
  .map-card__label strong { font-family: var(--font-display); color: var(--brand-900); }
  .map-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    justify-self: start;
    margin-top: 0.45rem;
    font-weight: 700;
    color: var(--brand-700);
  }
  .map-card__cta:hover { color: var(--accent-600); }

  .travel-grid { margin-top: var(--space-l); }
  .travel__icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-m);
    background: var(--brand-100);
    color: var(--brand-700);
  }
  .travel h3 { margin-bottom: 0.3rem; }
  .travel p { color: var(--ink-muted); font-size: var(--step--1); }

  /* Red is now a brand colour and carries the primary CTAs, so the emergency
     notice is filled solid to keep it a step above them in the hierarchy. */
  .urgent__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: flex-start;
    padding: var(--space-m) var(--space-l);
    background: var(--alert-900);
    border-radius: var(--radius-l);
    color: #ffe3e6;
  }
  .urgent__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: #fff;
  }
  .urgent h2 { font-size: var(--step-2); color: #fff; }
  .urgent__lead { font-weight: 700; color: #fff; }
  .urgent a { color: #fff; text-decoration-thickness: 2px; }
  @media (min-width: 40rem) {
    .urgent__card { flex-direction: row; gap: var(--space-m); }
  }

/* ==========================================================================
   Not found
   ========================================================================== */

.notfound { padding-block: var(--space-2xl); }
  .notfound__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block: var(--space-m);
    padding: 0;
  }
  .notfound__links a {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
  }
  .notfound__links a:hover { background: var(--brand-100); }

/* ==========================================================================
   Allied health strip

   One full-width strip on the services page for the two allied health
   services that run inside the practice: counselling on the left, dietetics
   on the right, stacking on a narrow screen. Each half keeps its service's own
   colours rather than the site's blues, because an advertisement that matches
   the page it sits on stops reading as one.

   Everything a half takes from its palette is a custom property set on the
   modifier, so the two share one set of rules and cannot drift apart.

   Type is set larger than the Claude Design artwork (which had 10-11px labels)
   to match the rest of the site: a large share of this practice's patients
   are older adults reading on a phone.
   ========================================================================== */

.allied__grid {
    display: grid;
    /* min() so the column can never be wider than a 320px phone */
    grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  }

  .allied__half {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-xl) var(--space-l) var(--space-l);
    background: var(--al-bg);
    color: #fff;
  }
  @media (max-width: 30rem) {
    .allied__half { padding: var(--space-l) var(--space-m); }
  }
  .allied__half :focus-visible { outline: 3px solid var(--al-accent); outline-offset: 3px; }

/* ----- palettes ----- */

  .allied__half--counselling {
    --al-bg: #0f4433;
    --al-eyebrow: #8fc3ab;
    --al-accent: #ddf0e4;
    --al-accent-ink: #0f4433;
    --al-tick: #7fc4a1;
    --al-rule: #4e9b78;
    --al-card-line: rgb(255 255 255 / 0.3);
    --al-card-radius: 999px 999px 10px 10px;
    --al-chip-radius: 999px;
    --al-btn-radius: var(--radius-s);
    --al-spot-bg: rgb(255 255 255 / 0.3);
    --al-spot-ink: #fff;
    --al-figure: #fff;
  }

  /* Dietetics is ruled off at the top in its yellow, and set square. */
  .allied__half--dietetics {
    --al-bg: #221334;
    --al-eyebrow: #f2c13d;
    --al-accent: #f2c13d;
    --al-accent-ink: #221334;
    --al-tick: #f2c13d;
    --al-rule: rgb(255 255 255 / 0.22);
    --al-card-line: rgb(255 255 255 / 0.22);
    --al-card-radius: 0;
    --al-chip-radius: 0;
    --al-btn-radius: 0;
    --al-spot-bg: #f2c13d;
    --al-spot-ink: #221334;
    --al-figure: #f2c13d;
    border-top: 3px solid #f2c13d;
  }

/* ----- decoration ----- */

  .allied__shapes {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  .allied__shape { position: absolute; display: block; }

  .allied__half--counselling .allied__shape { border-radius: 50%; }
  .allied__half--counselling .allied__shape--a { inset-inline-start: -4rem; top: 1.5rem; width: 12.5rem; height: 12.5rem; border: 1px solid rgb(255 255 255 / 0.08); }
  .allied__half--counselling .allied__shape--b { inset-inline-end: 8%; top: -2.5rem; width: 8rem; height: 8rem; background: rgb(255 255 255 / 0.035); }
  .allied__half--counselling .allied__shape--c { inset-inline-end: -2rem; bottom: -3rem; width: 14rem; height: 14rem; border: 1px solid rgb(255 255 255 / 0.06); }
  .allied__half--counselling .allied__shape--d { inset-inline-start: 34%; bottom: 10%; width: 4.5rem; height: 4.5rem; background: rgb(255 255 255 / 0.03); }

  .allied__half--dietetics .allied__shape--a { inset-inline-start: -3rem; top: 2.5rem; width: 11rem; height: 11rem; border: 1px solid rgb(242 193 61 / 0.14); transform: rotate(8deg); }
  .allied__half--dietetics .allied__shape--b { inset-inline-end: 10%; top: -3rem; width: 7.5rem; height: 7.5rem; background: rgb(255 255 255 / 0.03); transform: rotate(-14deg); }
  .allied__half--dietetics .allied__shape--c { inset-inline-end: -2.5rem; bottom: -3.75rem; width: 13.75rem; height: 13.75rem; border: 1px solid rgb(255 255 255 / 0.07); transform: rotate(24deg); }
  .allied__half--dietetics .allied__shape--d { inset-inline-start: 38%; bottom: 8%; width: 4rem; height: 4rem; background: rgb(242 193 61 / 0.06); transform: rotate(8deg); }

/* ----- heading row: the words, with the session card beside them ----- */

  .allied__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
  }
  /* On a phone the card would squeeze the heading into a narrow column. */
  @media (max-width: 30rem) {
    .allied__head { flex-direction: column; }
  }
  .allied__intro { display: grid; gap: var(--space-xs); min-width: 0; }

  .allied__eyebrow {
    color: var(--al-eyebrow);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .allied__title {
    color: #fff;
    font-size: var(--step-2);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .allied__lede {
    max-width: 46ch;
    color: rgb(255 255 255 / 0.88);
    line-height: 1.55;
  }
  .allied__name { color: #fff; font-weight: 700; }

  .allied__card {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 9.5rem;
    padding: 1.1rem 0.75rem;
    border: 1px solid var(--al-card-line);
    border-radius: var(--al-card-radius);
    text-align: center;
  }
  .allied__half--counselling .allied__card { padding-top: 1.75rem; }
  .allied__half--dietetics .allied__card { align-items: flex-start; text-align: start; }

  .allied__card-eyebrow {
    color: var(--al-eyebrow);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .allied__figure {
    color: var(--al-figure);
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .allied__unit {
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .allied__rule {
    display: block;
    width: 1.5rem;
    height: 2px;
    margin: 0.2rem 0;
    background: var(--al-rule);
  }
  .allied__half--dietetics .allied__rule { width: 100%; height: 1px; }
  .allied__card-lines { color: rgb(255 255 255 / 0.75); font-size: 0.82rem; line-height: 1.4; }
  .allied__card-lines span { display: block; }

/* ----- what the service helps with ----- */

  .allied__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
  .allied__chips li {
    padding: 0.35rem 0.8rem;
    border-radius: var(--al-chip-radius);
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.92);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
  }

  .allied__points { display: grid; gap: 0.45rem; margin: 0; padding: 0; }
  .allied__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    font-weight: 700;
  }
  .allied__points svg { flex: none; margin-top: 0.2em; color: var(--al-tick); }

/* ----- more about the practitioner (a disclosure, so the strip stays short) ----- */

  .allied__more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    color: var(--al-eyebrow);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .allied__more summary::-webkit-details-marker { display: none; }
  .allied__more summary::after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform 200ms ease;
  }
  .allied__more[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
  .allied__more-body {
    display: grid;
    gap: var(--space-xs);
    max-width: 52ch;
    padding-block: var(--space-2xs) var(--space-xs);
    color: rgb(255 255 255 / 0.85);
    font-size: var(--step--1);
    line-height: 1.6;
  }

/* ----- actions and the footnote ----- */

  .allied__actions .btn {
    border-radius: var(--al-btn-radius);
    background: var(--al-accent);
    border-color: var(--al-accent);
    color: var(--al-accent-ink);
  }
  .allied__actions .btn:hover { background: #fff; border-color: #fff; color: var(--al-accent-ink); }

  .allied__note {
    max-width: 54ch;
    color: rgb(255 255 255 / 0.68);
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .allied__note a { color: rgb(255 255 255 / 0.85); font-weight: 700; white-space: nowrap; }

/* ----- motion -----
   The halves reveal through the theme's own scroll observer; everything below
   starts only once a half is revealed, and none of it runs for a visitor who
   has asked for reduced motion. */

  @media (prefers-reduced-motion: no-preference) {
    .allied__half--counselling .allied__shape--a { animation: allied-drift-1 19s ease-in-out infinite; }
    .allied__half--counselling .allied__shape--b { animation: allied-drift-2 23s ease-in-out infinite; }
    .allied__half--counselling .allied__shape--c { animation: allied-drift-3 27s ease-in-out infinite; }
    .allied__half--counselling .allied__shape--d { animation: allied-drift-2 16s ease-in-out infinite reverse; }

    .allied__half--dietetics .allied__shape--a { animation: allied-sq-1 21s ease-in-out infinite; }
    .allied__half--dietetics .allied__shape--b { animation: allied-sq-2 25s ease-in-out infinite; }
    .allied__half--dietetics .allied__shape--c { animation: allied-sq-3 29s ease-in-out infinite; }
    .allied__half--dietetics .allied__shape--d { animation: allied-sq-1 17s ease-in-out infinite reverse; }

    .allied__half.is-revealed .allied__card { animation: allied-pop 600ms cubic-bezier(0.2, 0.8, 0.3, 1) 280ms both; }
    .allied__half.is-revealed .allied__rule { transform-origin: left; animation: allied-rule 500ms ease-out 650ms both; }

    /* A spotlight walks along the chips, one every 1.4s, and the row then
       rests for three seconds. The cycle is worked out from the chip count,
       so adding a chip does not make two light up at once. */
    .allied__half.is-revealed .allied__chips li {
      animation: allied-spot calc(var(--chip-count) * 1.4s + 3s) linear infinite;
      animation-delay: calc(var(--chip) * 1.4s + 1.2s);
    }

    .allied__actions .btn { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.3, 1), background-color 180ms ease, border-color 180ms ease; }
    .allied__actions .btn:hover { transform: translateY(-2px); }
  }

  /* Lit, then faded out before the next chip lights: with ten chips the cycle
     is 17s, so 8% is 1.36s, inside the 1.4s gap between chips. */
  @keyframes allied-spot {
    0%, 6% { background: var(--al-spot-bg); color: var(--al-spot-ink); }
    8%, 100% { background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.92); }
  }
  @keyframes allied-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
  @keyframes allied-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes allied-drift-1 { 0%, 100% { translate: 0 0; } 50% { translate: 30px -24px; } }
  @keyframes allied-drift-2 { 0%, 100% { translate: 0 0; } 50% { translate: -26px 28px; } }
  @keyframes allied-drift-3 { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 16px 20px; scale: 1.14; } }
  @keyframes allied-sq-1 { 0%, 100% { transform: rotate(8deg); translate: 0 0; } 50% { transform: rotate(38deg); translate: -20px 18px; } }
  @keyframes allied-sq-2 { 0%, 100% { transform: rotate(-14deg); translate: 0 0; } 50% { transform: rotate(16deg); translate: 24px -20px; } }
  @keyframes allied-sq-3 { 0%, 100% { transform: rotate(24deg); scale: 1; } 50% { transform: rotate(-6deg); scale: 1.12; } }

/* ==========================================================================
   Icon tiles

   Every icon tile across the site takes the service cards' treatment, so a
   patient meets one visual language on every page: a rounded gradient tile
   with a white icon, alternating the brand's blue with the logo's red. Kept
   last in the file so it wins over each page's own earlier, plainer rule.
   ========================================================================== */

.appointment__icon,
.booking__icon,
.bookpage__fallback-icon,
.contact__icon,
.news-empty__icon,
.sheet-group__icon,
.sheets-intro__icon,
.travel__icon,
.bulk__icon,
.fee-enquiry__icon {
    border-radius: 15px;
    background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
    color: #fff;
    box-shadow: 0 10px 20px -10px rgb(38 93 135 / 0.75);
  }
  .appointment-grid > li:nth-child(even) .appointment__icon,
  .booking__grid > :nth-child(even) .booking__icon,
  .contact__list > li:nth-child(even) .contact__icon,
  .sheet-group:nth-of-type(even) .sheet-group__icon,
  .travel-grid > li:nth-child(even) .travel__icon,
  .fee-enquiry__icon {
    background: linear-gradient(140deg, #de4a4f, var(--accent-700));
    box-shadow: 0 10px 20px -10px rgb(193 39 45 / 0.75);
  }
  .step__number {
    background: linear-gradient(140deg, var(--brand-500), var(--brand-800));
    box-shadow: 0 8px 16px -8px rgb(38 93 135 / 0.75);
  }