/* =============================================
   COMPONENT STYLES
   Nav, Hero, Cards, Testimonials, Forms, Footer
   ============================================= */

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  z-index: 1000;
  font-size: var(--text-sm);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position: relative;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
}

.nav--scrolled {
  box-shadow: var(--shadow-md);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: relative;
  z-index: 2;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__logo {
  max-height: 70px;
  width: auto;
  object-fit: contain;
}

/* Logo beside title — add .nav__brand--inline to .nav__brand */
.nav__brand--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.nav__brand--inline .nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__name {
  font-family: var(--font-heading);
  font-size: var(--nav-name-size, var(--text-lg));
  font-weight: var(--font-weight-bold);
  color: var(--nav-name-color, var(--color-text-heading));
  line-height: 1.2;
}

.nav__title {
  font-size: var(--nav-title-size, var(--text-xs));
  color: var(--color-text-light);
  text-transform: var(--nav-title-transform, uppercase);
  letter-spacing: var(--nav-title-tracking, 0.08em);
}
/* 1.7.24: at 16px a spaced-out tagline wraps on a phone; tighter tracking keeps most on one line */
@media (max-width: 479px) {
  .nav__title { letter-spacing: min(var(--nav-title-tracking, 0.08em), 0.03em); }
}

.nav__links {
  display: none;
  gap: var(--space-xl);
  align-items: center;
}

.nav__link {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color var(--transition-fast);
  position: relative;
  padding: var(--space-xs) 0;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-primary);
}

.nav__link:hover::after,
.nav__link--active::after {
  width: 100%;
}

.nav__cta {
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 600;
}

/* Mobile Menu Toggle */
.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  z-index: 110;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

.nav__toggle--open .nav__toggle-bar {
  background-color: var(--color-text-heading) !important;
}

.nav__toggle--open .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle--open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle--open .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Overlay — slide in from right, full viewport coverage */
.nav__mobile {
  display: flex;
  position: fixed;
  inset: 0;
  background-color: var(--color-surface);
  z-index: 1;
  padding: calc(72px + var(--space-xl)) var(--space-lg) var(--space-xl);
  flex-direction: column;
  gap: var(--space-lg);
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease,
              visibility 0.35s;
}

/* When opened from the compact scroll header */
.nav__mobile--from-scroll {
  padding-top: calc(56px + var(--space-sm));
  z-index: 201;
}

.nav__mobile--open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.nav__mobile .nav__link,
.nav__mobile .btn {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav__mobile--open .nav__link,
.nav__mobile--open .btn {
  opacity: 1;
  transform: translateX(0);
}

.nav__mobile--open > *:nth-child(1) { transition-delay: 0.05s; }
.nav__mobile--open > *:nth-child(2) { transition-delay: 0.1s; }
.nav__mobile--open > *:nth-child(3) { transition-delay: 0.15s; }
.nav__mobile--open > *:nth-child(4) { transition-delay: 0.2s; }
.nav__mobile--open > *:nth-child(5) { transition-delay: 0.25s; }
.nav__mobile--open > *:nth-child(6) { transition-delay: 0.3s; }
.nav__mobile--open > *:nth-child(7) { transition-delay: 0.35s; }

.nav__mobile .nav__link {
  font-size: var(--text-lg);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.nav__mobile .nav__link::after {
  display: none;
}

.nav__mobile .btn {
  margin-top: var(--space-md);
  text-align: center;
}

/* Two CTA buttons side by side in mobile menu */
.nav__mobile-ctas {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.nav__mobile-ctas .btn {
  flex: 1;
  text-align: center;
  margin-top: 0;
  padding: var(--space-sm);
}

/* WhatsApp button */
.btn--whatsapp {
  background-color: #2d7d52;
  border-color: #2d7d52;
  color: #ffffff;
}

.btn--whatsapp:hover {
  background-color: #246642;
  border-color: #246642;
  color: #ffffff;
}

@media (min-width: 1100px) {
  .nav__links {
    display: flex;
  }

  .nav__toggle {
    display: none;
  }
}

/* --- Nav Dropdowns (Desktop) --- */
.nav__dropdown {
  position: relative;
}

.nav__link--has-children {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}

.nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.nav__dropdown:hover .nav__chevron,
.nav__link--has-children[aria-expanded="true"] ~ .nav__dropdown-menu + .nav__chevron,
.nav__link--has-children[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}

.nav__dropdown-trigger .nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.nav__dropdown:hover .nav__dropdown-trigger .nav__chevron {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 110;
  margin-top: var(--space-xs);
}

.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav__dropdown-link,
.nav__dropdown-menu .nav__link--child {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.nav__dropdown-link:hover,
.nav__dropdown-menu .nav__link--child:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

.nav__dropdown-link--active {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Nav Mobile Sub-menus (Accordion) --- */
.nav__mobile-group {
  display: flex;
  flex-direction: column;
}

.nav__mobile-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__mobile-parent > .nav__link {
  flex: 1;
  cursor: default;
}

.nav__mobile-expand {
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  transition: transform var(--transition-fast);
  display: flex;
  align-items: center;
}

.nav__mobile-expand[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.nav__mobile-children {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-lg);
}

.nav__mobile-children[hidden] {
  display: none;
}

.nav__link--child {
  font-size: var(--text-base);
  color: var(--color-text-light);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.nav__link--child:hover {
  color: var(--color-primary);
}

.nav__link--child::after {
  display: none;
}

/* =============================================
   NAVIGATION: TWO-TIER VARIANT
   Top bar (brand + contact info) + bottom bar (nav links)
   ============================================= */
.nav--two-tier {
  position: relative;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition-base);
  padding: var(--nav-two-tier-padding, 20px) 0; /* v1.7.20 hook */
}

.nav--two-tier.nav--scrolled {
  box-shadow: var(--shadow-md);
}

/* --- Top bar: brand left, contact info right --- */
.nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--nav-top-padding, 20px); /* v1.7.20 hook */
  padding-bottom: var(--space-sm);
}

.nav__contact {
  display: none;
  align-items: center;
  gap: var(--space-xl);
}

.nav__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  white-space: nowrap;
}

.nav__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.nav__contact-item a {
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

.nav__contact-item a:hover {
  color: var(--color-primary);
}

/* --- Bottom bar: nav links + CTA --- */
.nav__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-sm);
  padding-bottom: 20px;
}

.nav--two-tier .nav__links {
  display: none;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
}

.nav--two-tier .nav__cta {
  margin-left: auto;
}

.nav--two-tier .nav__link {
  font-size: var(--text-base);
}

/* Mobile: hamburger in top bar, not bottom */
.nav--two-tier .nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  z-index: 110;
}

/* Two-tier mobile: hide bottom bar border, show only toggle */
.nav--two-tier .nav__bottom {
  border-top: none;
  padding: 0;
  position: absolute;
  right: var(--space-lg);
  top: var(--space-lg);
}

@media (min-width: 1100px) {
  .nav--two-tier .nav__bottom {
    position: static;
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
}

/* v1.7.15 - below 1100px the bottom bar holds only the menu button, pinned
   24px from the top. A brand that wraps to two lines (canonburyclinic.co.uk)
   left the button level with the top of the name instead of beside it.
   Stretch the bar over the header's height and centre the button in it. */
@media (max-width: 1099px) {
  .nav--two-tier .nav__bottom {
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }
  /* 1.7.24 - reserve the menu button's width so a long brand name never runs under it (withinyou.uk at 375 and 768px). */
  .nav--two-tier .nav__top { padding-right: calc(40px + var(--space-sm)); }
}

.nav__top {
  position: relative;
}

/* Desktop breakpoint */
@media (min-width: 900px) {
  .nav__contact {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .nav--two-tier .nav__links {
    display: flex;
  }

  .nav--two-tier .nav__toggle {
    display: none;
  }
}

/* Mobile menu for two-tier: needs more padding-top than single-tier nav */
.nav--two-tier .nav__mobile {
  top: 0;
  padding-top: 90px;
}

/* Contact info inside mobile menu */
.nav__mobile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.nav__mobile-contact .nav__contact-item {
  display: flex;
  font-size: var(--text-base);
}

/* Force readable dark colour on white overlay — overrides nav__contact-item a light colour */
.nav__mobile .nav__mobile-contact a,
.nav__mobile .nav__mobile-contact .nav__contact-item {
  color: var(--color-text);
}

@media (min-width: 900px) {
  .nav__mobile-contact {
    display: none;
  }
}

/* =============================================
   SCROLL-AWARE COMPACT HEADER
   Hidden by default. Slides in when user scrolls up
   after passing the main header. Shows brand + phone + hamburger.
   ============================================= */
.nav-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.nav-scroll--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-scroll__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.nav-scroll__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.nav-scroll__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-scroll__logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.nav-scroll__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-scroll__title {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* v1.7.15 - on a phone the bar is 56px tall and the brand gets ~200px, so a
   long practice name was cut to "Canonb..." with the tagline squeezed into
   three 11px lines beside it (canonburyclinic.co.uk). Drop the tagline and
   let the name use two lines instead. */
@media (max-width: 479px) {
  .nav-scroll__title {
    display: none;
  }
  .nav-scroll__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.nav-scroll__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-scroll__phone {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
}

.nav-scroll__phone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.nav-scroll__phone:hover {
  color: var(--color-primary);
}

/* Mobile: just phone icon, no text */
.nav-scroll__phone-icon {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

.nav-scroll__phone-icon svg {
  width: 20px;
  height: 20px;
}

/* WhatsApp icon in compact scroll header — mobile only */
.nav-scroll__wa-icon {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

.nav-scroll__wa-icon svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 600px) {
  .nav-scroll__phone {
    display: flex;
  }

  .nav-scroll__phone-icon {
    display: none;
  }
}

.nav-scroll__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-scroll__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-base);
  transform-origin: center;
}

/* Transform nav-scroll hamburger into X when from-scroll overlay is open */
body:has(.nav__mobile--from-scroll.nav__mobile--open) .nav-scroll__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body:has(.nav__mobile--from-scroll.nav__mobile--open) .nav-scroll__toggle-bar:nth-child(2) {
  opacity: 0;
}

body:has(.nav__mobile--from-scroll.nav__mobile--open) .nav-scroll__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.hero__content {
  order: 2;
}

.hero__image-wrap {
  order: 1;
}

.hero__label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.hero__heading {
  font-size: var(--text-h1);
  margin-bottom: var(--space-lg);
  color: var(--color-text-heading);
}

.hero__text {
  font-size: var(--text-md);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xl);
  max-width: 540px;
}

.hero__ticks {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero__ticks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-dark);
  background-color: var(--color-bg-alt);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.hero__ticks svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: var(--hero-actions-justify, center);
}

@media (min-width: 768px) {
  .hero__actions {
    justify-content: flex-start;
  }
}

.hero__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero__image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  text-align: center;
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .hero {
    padding: var(--space-3xl) 0;
  }

  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  .hero__content {
    order: 1;
  }

  .hero__image-wrap {
    order: 2;
  }

  .hero__heading {
    font-size: var(--text-h1-desktop);
  }
}

/* =============================================
   HERO VARIANTS
   Add class to <section class="hero hero--variant">
   Default (no modifier) = split layout
   ============================================= */

/* --- Fullwidth: background image, centered text overlay --- */
.hero--fullwidth {
  padding: var(--space-3xl) 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  color: var(--color-text-inverse);
}

.hero--fullwidth .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
}

.hero--fullwidth .hero__content {
  order: 1;
  max-width: 720px;
}

.hero--fullwidth .hero__image-wrap {
  display: none;
}

.hero--fullwidth .hero__label {
  color: var(--color-secondary-light);
}

.hero--fullwidth .hero__heading {
  color: var(--color-text-inverse);
}

.hero--fullwidth .hero__text {
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.hero--fullwidth .hero__actions {
  justify-content: center;
}

.hero--fullwidth .hero__ticks {
  justify-content: center;
}

.hero--fullwidth .hero__ticks li {
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.hero--fullwidth .hero__ticks svg {
  color: var(--color-secondary-light);
}

.hero--fullwidth .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.hero--fullwidth .btn--primary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.hero--fullwidth .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero--fullwidth .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text-inverse);
}

@media (min-width: 768px) {
  .hero--fullwidth {
    padding: var(--space-3xl) 0;
    min-height: 600px;
  }

  .hero--fullwidth .hero__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Minimal: premium light hero — centered, subtle texture, no image --- */
.hero--minimal {
  padding: var(--space-3xl) 0;
  text-align: center;
  background:
    radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--color-accent, var(--color-primary-light)) 5%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  position: relative;
  overflow: hidden;
}

.hero--minimal::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.hero--minimal::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.hero--minimal .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  position: relative;
  z-index: 1;
}

.hero--minimal .hero__content {
  order: 1;
  max-width: 800px;
}

.hero--minimal .hero__image-wrap {
  display: none;
}

.hero--minimal .hero__label {
  display: inline-block;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary-dark);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-lg);
}

.hero--minimal .hero__heading {
  font-size: var(--text-h1-desktop);
  margin-bottom: var(--space-xl);
}

.hero--minimal .hero__text {
  font-size: var(--text-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero--minimal .hero__actions {
  justify-content: center;
}

.hero--minimal .hero__ticks {
  justify-content: center;
}

.hero--minimal .hero__ticks li {
  color: var(--color-primary-dark);
  background-color: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.hero--minimal .hero__ticks svg {
  color: var(--color-secondary-dark);
}

@media (min-width: 768px) {
  .hero--minimal {
    padding: var(--space-3xl) 0;
  }

  .hero--minimal::before {
    width: 600px;
    height: 600px;
  }

  .hero--minimal::after {
    width: 500px;
    height: 500px;
  }

  .hero--minimal .hero__heading {
    font-size: 3.5rem;
  }

  .hero--minimal .hero__inner {
    grid-template-columns: 1fr;
  }
}

/* --- Half: edge-to-edge 50/50 split, image bleeds to edge --- */
.hero--half {
  padding: 0;
  overflow: hidden;
}

.hero--half .hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 100%;
  padding: 0;
  align-items: stretch;
}

.hero--half .hero__image-wrap {
  order: 1;
  width: 100%;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--half .hero__image-placeholder,
.hero--half .hero__image {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.hero--half .hero__content {
  order: 2;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--half .hero__text {
  max-width: none;
}

@media (min-width: 768px) {
  .hero--half .hero__inner {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
  /* v1.4 — column ratio modifiers (override the default 1fr 1fr) */
  .hero--half--text-wide .hero__inner   { grid-template-columns: 1.45fr 1fr; }
  .hero--half--image-wide .hero__inner  { grid-template-columns: 1fr 1.45fr; }

  .hero--half .hero__image-wrap {
    order: 1;
    min-height: auto;
  }

  .hero--half .hero__content {
    order: 2;
    padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-2xl);
  }
  /* v1.4 — flip image to the right (text-left layout) */
  .hero--half--image-right .hero__image-wrap { order: 2; }
  .hero--half--image-right .hero__content    { order: 1; }
}

/* v1.4 NOTE — .hero--half ships with a max-height: 85vh safety cap on
   .hero__inner / __image-wrap / __image / __content (defined later in this
   file). To opt out for a taller hero, set max-height: none on those four
   selectors in your theme.css — do this only when the design genuinely
   needs it; the cap exists to prevent the hero hiding the next section. */

@media (min-width: 1024px) {
  .hero--half .hero__content {
    padding: var(--space-4xl);
  }
}

/* --- Slope: hero with coloured background panel behind image + text --- */
.hero--slope-dark,
.hero--slope-light {
  padding: var(--space-3xl) 0;
}

.hero--slope-dark .hero__inner,
.hero--slope-light .hero__inner {
  position: relative;
  padding: 0;
}

/* Content needs padding on mobile since inner has none */
.hero--slope-dark .hero__content,
.hero--slope-light .hero__content {
  padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
}

/* Hide label and ticks in slope heroes */
.hero--slope-dark .hero__label,
.hero--slope-light .hero__label,
.hero--slope-dark .hero__ticks,
.hero--slope-light .hero__ticks {
  display: none;
}

/* Smaller heading for slope */
.hero--slope-dark .hero__heading,
.hero--slope-light .hero__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* Dark slope: light text */
.hero--slope-dark .hero__heading {
  color: var(--color-text-inverse);
}

.hero--slope-dark .hero__text {
  color: rgba(255, 255, 255, 0.85);
}

.hero--slope-dark .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.hero--slope-dark .btn--primary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.hero--slope-dark .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero--slope-dark .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text-inverse);
}

/* Coloured background panel — mobile: full coverage */
.hero--slope-dark .hero__inner::before,
.hero--slope-light .hero__inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--radius-lg);
  z-index: 0;
}

.hero--slope-dark .hero__inner::before {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.hero--slope-light .hero__inner::before {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
}

/* Image */
.hero--slope-dark .hero__image-wrap,
.hero--slope-light .hero__image-wrap {
  order: 1;
  position: relative;
  z-index: 1;
}

.hero--slope-dark .hero__image-placeholder,
.hero--slope-dark .hero__image,
.hero--slope-light .hero__image-placeholder,
.hero--slope-light .hero__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Content — position + z-index */
.hero--slope-dark .hero__content,
.hero--slope-light .hero__content {
  order: 2;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .hero--slope-dark,
  .hero--slope-light {
    padding: var(--space-3xl) 0;
  }

  .hero--slope-dark .hero__inner,
  .hero--slope-light .hero__inner {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: var(--space-3xl);
    align-items: center;
    padding: var(--space-3xl);
    padding-left: 0;
    min-height: 400px;
  }

  /* Background panel shifts right — sits behind middle of image */
  .hero--slope-dark .hero__inner::before,
  .hero--slope-light .hero__inner::before {
    left: 20%;
    border-radius: 0 40px 0 0;
  }

  .hero--slope-dark .hero__content,
  .hero--slope-light .hero__content {
    order: 2;
    padding: 0;
  }

  /* Desktop image: flush to left edge, bottom-left radius only */
  .hero--slope-dark .hero__image-placeholder,
  .hero--slope-dark .hero__image,
  .hero--slope-light .hero__image-placeholder,
  .hero--slope-light .hero__image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
    border-radius: 0 0 0 40px;
  }
}

/* --- Reverse modifier: flips image/text sides --- */

/* Classic (default split) reverse: image left, text right */
@media (min-width: 768px) {
  .hero.hero--reverse .hero__content {
    order: 2;
  }

  .hero.hero--reverse .hero__image-wrap {
    order: 1;
  }
}

/* Half (Split 50%) reverse: text left, image right */
@media (min-width: 768px) {
  .hero--half.hero--reverse .hero__image-wrap {
    order: 2;
  }

  .hero--half.hero--reverse .hero__content {
    order: 1;
    padding: var(--space-3xl) var(--space-2xl) var(--space-3xl) var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  .hero--half.hero--reverse .hero__content {
    padding: var(--space-4xl);
  }
}

/* Slope reverse: image right, text left */
@media (min-width: 768px) {
  .hero--slope-dark.hero--reverse .hero__inner,
  .hero--slope-light.hero--reverse .hero__inner {
    grid-template-columns: 1fr 45%;
    padding-left: var(--space-3xl);
    padding-right: 0;
  }

  .hero--slope-dark.hero--reverse .hero__image-wrap,
  .hero--slope-light.hero--reverse .hero__image-wrap {
    order: 2;
  }

  .hero--slope-dark.hero--reverse .hero__content,
  .hero--slope-light.hero--reverse .hero__content {
    order: 1;
  }

  .hero--slope-dark.hero--reverse .hero__inner::before,
  .hero--slope-light.hero--reverse .hero__inner::before {
    left: 0;
    right: 20%;
    border-radius: 40px 0 0 0;
  }

  /* Reversed image: bottom-right radius only */
  .hero--slope-dark.hero--reverse .hero__image-placeholder,
  .hero--slope-dark.hero--reverse .hero__image,
  .hero--slope-light.hero--reverse .hero__image-placeholder,
  .hero--slope-light.hero--reverse .hero__image {
    border-radius: 0 0 40px 0;
  }
}

/* --- Image Hero: full-bleed background image with dark overlay --- */
.hero--image {
  position: relative;
  padding: var(--space-3xl) 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-inverse);
  background-color: var(--color-bg-dark);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}

.hero--image .hero__inner {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  justify-items: center;
}

.hero--image .hero__content {
  order: 1;
  max-width: 720px;
}

.hero--image .hero__image-wrap {
  display: none;
}

.hero--image .hero__label {
  color: var(--color-secondary-light);
  /* v1.7.15 - the heading carries a shadow, the label did not, and a small
     gold line over a busy photograph was hard to read (canonburyclinic.co.uk). */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 0, 0, 0.45);
}

.hero--image .hero__heading {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero--image .hero__text {
  color: rgba(255, 255, 255, 0.9);
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.hero--image .hero__actions {
  justify-content: center;
}

.hero--image .hero__ticks {
  justify-content: center;
}

.hero--image .hero__ticks li {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.hero--image .hero__ticks svg {
  color: var(--color-secondary-light);
}

.hero--image .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.hero--image .btn--primary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.hero--image .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero--image .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-text-inverse);
}

/* --- Image Left: text left-aligned --- */
.hero--image-left {
  text-align: left;
}

.hero--image-left .hero__inner {
  justify-items: start;
}

.hero--image-left .hero__content {
  max-width: 600px;
}

.hero--image-left .hero__text {
  margin-left: 0;
  margin-right: 0;
}

.hero--image-left .hero__actions {
  justify-content: flex-start;
}

.hero--image-left .hero__ticks {
  justify-content: flex-start;
}

/* --- Image Right: text right-aligned --- */
.hero--image-right {
  text-align: right;
}

.hero--image-right .hero__inner {
  justify-items: end;
}

.hero--image-right .hero__content {
  max-width: 600px;
}

.hero--image-right .hero__text {
  margin-left: auto;
  margin-right: 0;
}

.hero--image-right .hero__actions {
  justify-content: flex-end;
}

.hero--image-right .hero__ticks {
  justify-content: flex-end;
}

/* Extra top padding when transparent nav overlays the hero */
body:has(.nav--transparent) .hero--image {
  padding-top: calc(var(--space-3xl) + 140px);
}

@media (min-width: 768px) {
  .hero--image {
    padding: var(--space-4xl) 0;
    min-height: 85vh;
  }

  body:has(.nav--transparent) .hero--image {
    padding-top: calc(var(--space-4xl) + 140px);
  }
}

/* --- Banner Hero: contained, shorter image strip with overlay text --- */
.hero--banner {
  padding: 0;
}

.hero--banner .hero__inner {
  grid-template-columns: 1fr;
  gap: 0;
}

.hero--banner .hero__image-wrap {
  position: relative;
  order: 0;
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.hero--banner .hero__image,
.hero--banner .hero__image-placeholder {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  aspect-ratio: auto;
}

.hero--banner .hero__content {
  order: 1;
  text-align: center;
  padding: var(--space-xl) 0;
}

.hero--banner .hero__heading {
  font-size: var(--text-h2-desktop);
}

.hero--banner .hero__text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero--banner .hero__actions {
  justify-content: center;
}

.hero--banner .hero__ticks {
  justify-content: center;
}

@media (min-width: 768px) {
  .hero--banner .hero__image,
  .hero--banner .hero__image-placeholder {
    height: 400px;
  }
}

/* --- Showcase Hero: full-bleed image, frosted glass floating card --- */
/* No overlay — image shown at full vibrancy.
   Card tone:  .hero--showcase-dark  (dark frosted bg, light text)
               .hero--showcase-light (light frosted bg, dark text)
   Card align: .hero--showcase-left / -center / -right                */

.hero--showcase {
  position: relative;
  padding: 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* No overlay — that's the whole point */
.hero--showcase::before {
  display: none;
}

.hero--showcase .hero__inner {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  width: 100%;
  padding: var(--space-xl);
}

.hero--showcase .hero__image-wrap {
  display: none;
}

.hero--showcase .hero__content {
  order: 1;
  max-width: 600px;
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Buttons and ticks must stay in 1 row — card should stay compact */
.hero--showcase .hero__actions {
  flex-wrap: nowrap;
}

.hero--showcase .hero__ticks {
  margin-bottom: 0;
}

/* --- Dark card (default) --- */
.hero--showcase-dark .hero__content {
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

.hero--showcase-dark .hero__heading {
  color: #ffffff;
}

.hero--showcase-dark .hero__label {
  color: var(--color-secondary-light);
}

.hero--showcase-dark .hero__text {
  color: rgba(255, 255, 255, 0.9);
}

.hero--showcase-dark .hero__ticks li {
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  border-radius: 0;
}

.hero--showcase-dark .hero__ticks svg {
  color: var(--color-secondary-light);
}

.hero--showcase-dark .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.hero--showcase-dark .btn--primary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.hero--showcase-dark .btn--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.hero--showcase-dark .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

/* --- Light card --- */
.hero--showcase-light .hero__content {
  background: rgba(255, 255, 255, 0.65);
  color: var(--color-text);
}

.hero--showcase-light .hero__heading {
  color: var(--color-text-heading);
}

.hero--showcase-light .hero__label {
  color: var(--color-primary);
}

.hero--showcase-light .hero__text {
  color: var(--color-text);
}

.hero--showcase-light .hero__ticks li {
  color: var(--color-text);
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  border-radius: 0;
}

.hero--showcase-light .hero__ticks svg {
  color: var(--color-primary);
}

.hero--showcase-light .btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.hero--showcase-light .btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.hero--showcase-light .btn--secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}

.hero--showcase-light .btn--secondary:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: var(--color-text);
}

/* --- Card alignment --- */
/* Default (left) — card sits left */
.hero--showcase .hero__inner {
  justify-items: start;
}

.hero--showcase-center .hero__inner {
  justify-items: center;
}

.hero--showcase-center .hero__content {
  text-align: center;
  max-width: 720px;
}

.hero--showcase-center .hero__text {
  margin-left: auto;
  margin-right: auto;
}

.hero--showcase-center .hero__actions {
  justify-content: center;
}

.hero--showcase-center .hero__ticks {
  justify-content: center;
}

.hero--showcase-right .hero__inner {
  justify-items: end;
}

.hero--showcase-right .hero__content {
  text-align: right;
}

.hero--showcase-right .hero__actions {
  justify-content: flex-end;
}

.hero--showcase-right .hero__ticks {
  justify-content: flex-end;
}

/* Extra top padding when transparent nav overlays */
body:has(.nav--transparent) .hero--showcase {
  padding-top: 100px;
}

/* --- Mobile: card goes full-width at bottom --- */
@media (max-width: 767px) {
  .hero--showcase {
    min-height: 400px;
    align-items: flex-end;
  }

  .hero--showcase .hero__inner {
    padding: var(--space-md);
  }

  .hero--showcase .hero__content {
    max-width: 100%;
    padding: 28px;
  }

  /* Card is full-width on mobile — buttons and ticks can wrap */
  .hero--showcase .hero__actions,
  .hero--showcase .hero__ticks {
    flex-wrap: wrap;
  }

  /* Reset alignment on mobile — always left-aligned full-width */
  .hero--showcase-center .hero__inner,
  .hero--showcase-right .hero__inner {
    justify-items: stretch;
  }

  .hero--showcase-center .hero__content,
  .hero--showcase-right .hero__content {
    text-align: left;
  }

  .hero--showcase-center .hero__actions,
  .hero--showcase-right .hero__actions {
    justify-content: flex-start;
  }

  .hero--showcase-center .hero__ticks,
  .hero--showcase-right .hero__ticks {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .hero--showcase {
    min-height: 650px;
  }

  .hero--showcase .hero__inner {
    padding: var(--space-2xl) var(--space-xl);
  }

  body:has(.nav--transparent) .hero--showcase {
    padding-top: 140px;
  }
}

/* =============================================
   NAV: TRANSPARENT OVERLAY
   Floats nav over hero on dark/image heroes.
   Add .nav--transparent + .nav--transparent-dark or .nav--transparent-light
   Supports custom bg via --nav-transparent-bg inline variable.
   JS removes it on scroll via nav-scroll.
   ============================================= */

/* --- Base: positioning only --- */
.nav--transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--nav-transparent-bg, transparent);
}

/* Dropdown menu always sits on white — dark text regardless of variant */
.nav--transparent .nav__dropdown-menu .nav__link {
  color: var(--color-text);
}

.nav--transparent .nav__dropdown-menu .nav__link:hover {
  color: var(--color-primary);
}

/* --- Dark variant: white text on dark/image backgrounds --- */
.nav--transparent-dark {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--nav-transparent-bg, rgba(42, 42, 42, 0.54));
}

.nav--transparent-dark .nav__name,
.nav--transparent-dark .nav__link {
  color: var(--color-text-inverse);
}

.nav--transparent-dark .nav__title {
  color: rgba(255, 255, 255, 0.6);
}

.nav--transparent-dark .nav__link:hover,
.nav--transparent-dark .nav__link--active {
  color: var(--color-secondary-light);
}

.nav--transparent-dark .nav__link--active::after {
  background-color: var(--color-secondary-light);
}

.nav--transparent-dark .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.nav--transparent-dark .nav__toggle span,
.nav--transparent-dark .nav__toggle-bar {
  background-color: var(--color-text-inverse);
}

.nav--transparent-dark .nav__toggle {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile menu resets — overlay has a white background, so restore dark text */
.nav--transparent-dark .nav__mobile .nav__link {
  color: var(--color-text);
}

.nav--transparent-dark .nav__mobile .nav__link:hover,
.nav--transparent-dark .nav__mobile .nav__link--active {
  color: var(--color-primary);
}

.nav--transparent-dark .nav__mobile .nav__mobile-expand {
  color: var(--color-text);
}

.nav--transparent-dark .nav__mobile .nav__mobile-contact a,
.nav--transparent-dark .nav__mobile .nav__mobile-contact svg,
.nav--transparent-dark .nav__mobile .nav__mobile-contact .nav__contact-item {
  color: var(--color-text);
}

.nav--transparent-dark .nav__mobile .nav__toggle-bar {
  background-color: var(--color-text);
}

/* Two-tier dark */
.nav--two-tier.nav--transparent-dark {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav--two-tier.nav--transparent-dark .nav__top {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav--two-tier.nav--transparent-dark .nav__brand-name,
.nav--two-tier.nav--transparent-dark .nav__name,
.nav--two-tier.nav--transparent-dark .nav__tagline,
.nav--two-tier.nav--transparent-dark .nav__contact-link,
.nav--two-tier.nav--transparent-dark .nav__contact-item a,
.nav--two-tier.nav--transparent-dark .nav__contact-item {
  color: var(--color-text-inverse);
}

.nav--two-tier.nav--transparent-dark .nav__contact-icon,
.nav--two-tier.nav--transparent-dark .nav__contact-item svg {
  color: var(--color-secondary-light);
}

/* --- Light variant: dark text on light overlay --- */
.nav--transparent-light {
  border-bottom: 1px solid var(--color-border-light);
  background-color: var(--nav-transparent-bg, rgba(255, 255, 255, 0.75));
}

.nav--transparent-light .nav__name,
.nav--transparent-light .nav__brand-name {
  color: var(--color-text-heading);
}

.nav--transparent-light .nav__title,
.nav--transparent-light .nav__tagline {
  color: var(--color-text-light);
}

.nav--transparent-light .nav__link {
  color: var(--color-text);
}

.nav--transparent-light .nav__link:hover,
.nav--transparent-light .nav__link--active {
  color: var(--color-primary);
}

.nav--transparent-light .nav__link--active::after {
  background-color: var(--color-primary);
}

.nav--transparent-light .btn--primary,
.nav--transparent-light .nav__cta {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.nav--transparent-light .btn--primary:hover,
.nav--transparent-light .nav__cta:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.nav--transparent-light .nav__toggle span,
.nav--transparent-light .nav__toggle-bar {
  background-color: var(--color-text-heading);
}

.nav--transparent-light .nav__toggle {
  border-color: var(--color-border);
}

/* Two-tier light */
.nav--two-tier.nav--transparent-light .nav__top {
  border-bottom-color: var(--color-border-light);
}

.nav--two-tier.nav--transparent-light .nav__contact-link,
.nav--two-tier.nav--transparent-light .nav__contact-item a,
.nav--two-tier.nav--transparent-light .nav__contact-item {
  color: var(--color-text);
}

.nav--two-tier.nav--transparent-light .nav__contact-icon,
.nav--two-tier.nav--transparent-light .nav__contact-item svg {
  color: var(--color-primary);
}

/* =============================================
   BRANDED NAV
   Solid primary-colour background with white text.
   Add .nav--branded to the <nav> element.
   Works with both default and two-tier layouts.
   ============================================= */
.nav--branded {
  background-color: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand name: white */
.nav--branded .nav__name {
  color: var(--color-text-inverse);
}

/* Strapline: secondary accent */
.nav--branded .nav__title {
  color: var(--color-secondary-light);
}

/* Nav links: white default */
.nav--branded .nav__link {
  color: var(--color-text-inverse);
}

/* Hover: secondary accent, active: stay white (underline provides the accent) */
.nav--branded .nav__link:hover {
  color: var(--color-secondary-light);
}

.nav--branded .nav__link--active {
  color: var(--color-text-inverse);
}

/* Active underline: secondary accent */
.nav--branded .nav__link--active::after {
  background-color: var(--color-secondary-light);
}

/* CTA button: secondary colour to stand out against primary bg */
.nav--branded .btn--primary,
.nav--branded .nav__cta {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.nav--branded .btn--primary:hover,
.nav--branded .nav__cta:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

/* Hamburger: white bars */
.nav--branded .nav__toggle-bar {
  background-color: var(--color-text-inverse);
}

/* Dropdown menu: reset to white bg with dark text */
.nav--branded .nav__dropdown-menu {
  background-color: var(--color-surface);
}

.nav--branded .nav__dropdown-menu .nav__link,
.nav--branded .nav__dropdown-menu .nav__dropdown-link {
  color: var(--color-text);
}

.nav--branded .nav__dropdown-menu .nav__link:hover,
.nav--branded .nav__dropdown-menu .nav__dropdown-link:hover {
  color: var(--color-primary);
}

/* Mobile menu: white bg, restore dark text */
.nav--branded .nav__mobile .nav__link {
  color: var(--color-text);
}

.nav--branded .nav__mobile .nav__link:hover,
.nav--branded .nav__mobile .nav__link--active {
  color: var(--color-primary);
}

.nav--branded .nav__mobile .btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Two-tier branded: uniform colour, subtle divider --- */
.nav--two-tier.nav--branded .nav__top {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav--two-tier.nav--branded .nav__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav--two-tier.nav--branded .nav__contact-item a,
.nav--two-tier.nav--branded .nav__contact-item {
  color: var(--color-text-inverse);
}

/* Contact icons: secondary accent */
.nav--two-tier.nav--branded .nav__contact-item svg {
  color: var(--color-secondary-light);
}

/* Stat bar — hidden by default */
.hero__stats {
  display: none;
}

/* =============================================
   INTRO / WELCOME SECTION
   ============================================= */
.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.intro__image-wrap {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 400px;
}

.intro__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.intro__image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  color: var(--color-text-light);
  text-align: center;
  padding: var(--space-xl);
}

.intro__text h2 {
  margin-bottom: var(--space-lg);
}

.intro__text p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.intro__text .btn {
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .intro__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-3xl);
  }
}

/* Reversed variant — text left, portrait right (narrower) */
.intro__inner--reversed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .intro__inner--reversed {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-3xl);
  }

  .intro__inner--reversed .intro__image-wrap {
    order: 2;
  }

  .intro__inner--reversed .intro__text {
    order: 1;
  }
}

/* =============================================
   CARDS
   ============================================= */
.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--aesthetic-radius);
  padding: var(--space-xl);
  box-shadow: var(--aesthetic-shadow-card);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
}

/* On alt-background sections, icon needs contrast against card bg */
.section--alt .card__icon {
  background-color: var(--color-surface-alt);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card__date {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.card__title {
  font-size: var(--text-h3-desktop);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.card__text {
  color: var(--color-text-light);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.card__link:hover {
  gap: var(--space-sm);
}

.card__link svg {
  width: 16px;
  height: 16px;
}

/* Service Card Variant */
.card--service {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
}

.card--service .card__icon {
  margin-left: auto;
  margin-right: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.card--service .card__link {
  justify-content: center;
}

/* Clickable service cards (when wrapped in <a>) */
a.card--service {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.card--service:hover .card__link {
  gap: var(--space-sm);
}

/* Feature Card Variant */
.card--feature {
  background-color: var(--color-surface);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  box-shadow: var(--aesthetic-shadow-card);
  padding: var(--space-xl);
  border-radius: var(--aesthetic-radius);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card--feature:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.card--feature .card__icon {
  margin-left: auto;
  margin-right: auto;
}

/* On alt sections, swap surface → surface-alt so card still pops */
.section--alt .card--feature {
  background-color: var(--color-surface);
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials {
  /* background controlled by .section / .section--alt — don't force here */
}

.testimonial {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.testimonial__quote {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.testimonial__author {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.testimonial__detail {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: 0;
}

.testimonial__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-md);
  color: var(--color-secondary);
}

.testimonial__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-inverse);
  text-align: center;
}

.cta-banner h2 {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
}

.cta-banner .btn--accent {
  font-size: var(--text-md);
  padding: var(--space-md) var(--space-2xl);
}

.cta-banner__buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner .btn--secondary,
.section--dark .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-banner .btn--secondary:hover,
.section--dark .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.8);
}

/* =============================================
   FORMS
   ============================================= */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}

.form__label--required::after {
  content: ' *';
  color: var(--color-error);
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: var(--space-md);
  border: calc(var(--aesthetic-border-width) + 1px) solid #ced1d5;
  border-radius: var(--aesthetic-radius);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Native dropdown options — never inherit colour from a dark parent like .final-cta */
.form__select option {
  color: var(--color-text);
  background-color: var(--color-surface);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-light);
  opacity: 0.6;
}

.form__textarea {
  min-height: 150px;
  resize: vertical;
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Contact Page Layout */
.contact-info__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
}

.contact-info__intro {
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

.contact-form-card {
  padding: var(--space-2xl);
}

/* v1.7.12 - at phone width 48px of card padding left a 229px field inside a 327px card and the
   enquiry dropdown truncated its own selected value (Elspeth Campbell review, 2026-09-17). */
@media (max-width: 767px) {
  .contact-form-card {
    padding: var(--space-lg);
  }
}

.contact-form-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.contact-form-card > p {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  margin-bottom: var(--space-xl);
}

.form__consent {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: center;
}

/* Checkbox + label alignment */
.form__group--checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
}

.form__group--checkbox input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: var(--form-check-size, auto); /* v1.7.20 hooks: a bigger tap target */
  height: var(--form-check-size, auto);
  accent-color: var(--form-check-accent, auto);
}

.form__group--checkbox label {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  text-align: left;
}

.form__consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

.map-placeholder {
  background: var(--color-border);
  border-radius: var(--radius-lg);
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: var(--text-base);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--space-4xl);
    row-gap: var(--space-xl);
  }
}

.contact-info__item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.contact-info__item:last-child {
  border-bottom: none;
}

.contact-info__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.contact-info__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info__label {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: 4px;
}

.contact-info__value,
.contact-info__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}

.about-hero h1,
.about-hero h2 {
  margin-bottom: var(--space-lg);
}

.about-hero__image-wrap {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}

.about-hero__image {
  width: 100%;
  max-height: 100vh;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

.about-hero__image-placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  text-align: center;
  padding: var(--space-xl);
}

@media (min-width: 768px) {
  .about-hero {
    padding: 0;
    overflow: hidden;
  }

  .about-hero .container {
    max-width: 100%;
    padding: 0;
  }

  .about-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .about-hero__image-wrap {
    overflow: hidden;
  }

  .about-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .about-hero__inner > div:last-child {
    padding: var(--space-4xl);
  }
}

/* =============================================
   ABOUT: SPLIT THIRD
   1fr image (left) + 2fr text (right).
   Narrower image column than about-hero.
   Uses background-image for full-bleed coverage.
   ============================================= */
.about-split-third {
  padding: 0;
}

.about-split-third__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}

.about-split-third h1,
.about-split-third h2 {
  margin-bottom: var(--space-lg);
}

.about-split-third__image-wrap {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 350px;
}

.about-split-third__text {
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-split-third__text p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.about-split-third__text p + p {
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .about-split-third {
    overflow: hidden;
  }

  .about-split-third__inner {
    grid-template-columns: 1fr 2fr;
    gap: 0;
  }

  .about-split-third__image-wrap {
    overflow: hidden;
    min-height: 500px;
  }

  .about-split-third__text {
    padding: var(--space-4xl);
  }
}

/* Qualifications */
.quals-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .quals-list {
    grid-template-columns: 1fr 1fr;
  }
}

.quals-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.quals-list__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quals-list__icon svg {
  width: 20px;
  height: 20px;
}

.quals-list__text {
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
}

.quals-list__text strong {
  display: block;
  color: var(--color-text-heading);
  margin-bottom: 2px;
}

/* Approach Section */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: approach;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.approach-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  align-items: start;
  /* v1.7.7 — align-CONTENT, not just align-items. The card is stretched by the
     parent grid to match its tallest sibling, and without this the surplus
     height inflates the heading ROW rather than sitting below the content, so
     a short card shows an ~80px hole between its h3 and its body text. Only
     visible when items in a row have uneven text lengths, which is why the
     even-length theme-preview demo never showed it. */
  align-content: start;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.approach-item__number {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
}

.approach-item h3 {
  grid-column: 2;
  font-size: calc(var(--text-h3-desktop) * 0.8);
  margin: 0;
}

.approach-item p {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

@media (min-width: 768px) {
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
   SERVICES PAGE
   ============================================= */
/* Service section wrapper — use around each service block */
.service-section {
  padding: 96px 0;
  border-bottom: 2px solid var(--color-border);
}

.service-section:last-of-type {
  border-bottom: none;
}

.service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Inline icon + title header */
.service-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.service-detail__header .service-detail__icon {
  margin-bottom: 0;
}

.service-detail__header h2 {
  margin: 0;
}

.service-detail__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.service-detail__icon svg {
  width: 32px;
  height: 32px;
}

.service-detail h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

/* v1.7.15 - .service-detail h2 is --text-xl (26px), but a bare h3 uses
   --text-h3 (26px on a phone, 28px on desktop), so FAQ questions under an h2
   in a post or service write-up were as big as, or bigger than, the heading
   above them (canonburyclinic.co.uk posts at 375px). Always a step smaller,
   and never larger than the site's own h3 size. */
.service-detail h3 {
  font-size: min(var(--text-lg), var(--text-h3));
}

@media (min-width: 768px) {
  .service-detail h3 {
    font-size: min(var(--text-lg), var(--text-h3-desktop));
  }
}

.service-detail p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-sm);
}

.service-detail p:last-of-type {
  margin-bottom: var(--space-md);
}

.service-detail ul {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
}

.service-detail ul li {
  position: relative;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
  /* v1.7.13 - inherit, not --text-sm. A post or service write-up puts a list
     straight after paragraphs, and at --text-sm the bullets read 16px against
     19px prose (canonburyclinic.co.uk blog posts, 2026-10-01). */
  font-size: inherit;
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

.service-detail ul li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Centred on the first line at any font size (was a fixed 7px). */
  top: calc(var(--line-height-normal) * 0.5em - 4px);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-light);
}

/* Inline SVG checklist variant — hides default dots */
.service-detail ul.checklist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-left: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}

.service-detail ul.checklist li::before {
  display: none;
}

.service-detail ul.checklist li svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: var(--color-primary);
  position: relative;
  top: 2px;
}

/* =============================================
   SERVICES: SIDEBAR LAYOUT
   Two-column layout with sticky sidebar nav.
   Sidebar auto-generated by JS from page sections.
   Hidden on mobile, visible on desktop (1024px+).
   ============================================= */
.services-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.services-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .services-layout {
    grid-template-columns: 1fr 260px;
    gap: var(--space-2xl);
    align-items: start;
  }

  .services-sidebar {
    display: block;
    position: sticky;
    top: 100px;
    align-self: start;
    margin-top: 96px;
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    /* Cap height so long link lists can scroll within the sidebar
       instead of disappearing below the viewport when sticky */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .services-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .services-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;
  }
}

.services-sidebar__heading {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.services-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.services-sidebar__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-fast);
}

.services-sidebar__link:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.services-sidebar__link--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border-left-color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.services-sidebar__btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-sm);
}

.services-sidebar__btn:first-of-type {
  margin-top: var(--space-lg);
}

/* Pricing */
.pricing-card {
  background-color: var(--color-surface);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.pricing-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  position: relative;
}

.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap; /* 1.7.24: one line at 16px */
}

.pricing-card h3 {
  font-size: calc(var(--text-h3-desktop) * 0.8);
  margin-bottom: var(--space-sm);
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.pricing-card__duration {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.pricing-card__features {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.pricing-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pricing-card__features li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-success);
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-lg) 0;
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item__question {
  font-family: var(--font-heading);
  font-size: calc(var(--text-h3-desktop) * 0.8);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-sm);
}

.faq-item__answer {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* =============================================
   PRIVACY PAGE
   ============================================= */
.privacy-content {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.privacy-content h1 {
  margin-bottom: var(--space-md);
}

.privacy-content .last-updated {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
}

.privacy-content h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.privacy-content h3 {
  font-size: var(--text-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.privacy-content p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  font-size: var(--text-base);
}

.privacy-content ul {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

.privacy-content ul li {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xs);
}

.privacy-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-content a:hover {
  color: var(--color-primary-dark);
}

/* =============================================
   PAGE HEADER (inner pages)
   ============================================= */
.page-header {
  padding: var(--page-header-padding, 96px) 0; /* v1.7.20 hook: a site can tighten title bands on phones */
  background-color: var(--color-bg-alt);
  text-align: center;
}

.page-header h1 {
  margin-bottom: var(--space-sm);
}

.page-header p {
  font-size: var(--text-md);
  color: var(--color-text-light);
  max-width: 540px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page-header {
    padding: var(--page-header-padding-desktop, var(--space-3xl)) 0;
  }
}

/* Dark coloured page header */
.page-header--dark {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-inverse);
}

.page-header--dark h1 {
  color: var(--color-text-inverse);
}

.page-header--dark p {
  color: rgba(255, 255, 255, 0.85);
}

.page-header--dark .section-label {
  color: var(--color-secondary-light);
}

/* Breadcrumbs on a dark page-header.
   TWO NAMING CONVENTIONS ON PURPOSE - do not "tidy" either set away.
   PLURAL (.breadcrumbs__item / __separator / __item--active) is the real one:
   it is what blog-post.html, theme-preview.html and 44 client pages actually
   emit, and it is the set with base styling further down this file. Only the
   SINGULAR names (.breadcrumb__link / __current / __separator) were listed here
   originally, so they matched nothing and a dark header left the breadcrumbs in
   their default dark-on-dark colours, i.e. invisible. The singular selectors are
   retained purely so any hand-written markup using them keeps working.
   The anchor is overridden explicitly: .breadcrumbs__item a sets its own colour,
   so colouring only the parent item would never reach the link. */
.page-header--dark .breadcrumbs__item,
.page-header--dark .breadcrumb__link {
  color: rgba(255, 255, 255, 0.7);
}

.page-header--dark .breadcrumbs__item a {
  color: rgba(255, 255, 255, 0.85);
}

.page-header--dark .breadcrumbs__item a:hover {
  color: var(--color-text-inverse);
}

.page-header--dark .breadcrumbs__item--active,
.page-header--dark .breadcrumb__current {
  color: var(--color-text-inverse);
}

.page-header--dark .breadcrumbs__separator,
.page-header--dark .breadcrumb__separator {
  color: rgba(255, 255, 255, 0.4);
}

/* Image background page header */
.page-header--image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverse);
}

.page-header--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.45) 100%);
}

.page-header--image .container {
  position: relative;
  z-index: 2;
}

.page-header--image h1 {
  color: var(--color-text-inverse);
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.page-header--image p {
  color: rgba(255, 255, 255, 0.9);
}

/* Pill-style label on image page-headers for legibility on busy backgrounds */
.page-header--image .section-label {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-secondary-dark);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-full);
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Secondary meta line under subtitle (e.g. credentials strip on issue pages) */
.page-header__meta {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.page-header--image .page-header__meta {
  color: rgba(255, 255, 255, 0.75);
}

.page-header--dark .page-header__meta {
  color: rgba(255, 255, 255, 0.75);
}
/* v1.7.12 - button row under a page-header. A page-header used as a mid-page
   image band (Elspeth Campbell, 2026-09-17) had its button sitting flush on the
   paragraph because .page-header p carries margin: 0 auto. One slot owns the gap. */
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Breadcrumbs on an image page-header. Same two-convention story as
   .page-header--dark above - see the comment there before editing. */
.page-header--image .breadcrumbs__item,
.page-header--image .breadcrumb__link {
  color: rgba(255, 255, 255, 0.7);
}

.page-header--image .breadcrumbs__item a {
  color: rgba(255, 255, 255, 0.85);
}

.page-header--image .breadcrumbs__item a:hover {
  color: var(--color-text-inverse);
}

.page-header--image .breadcrumbs__item--active,
.page-header--image .breadcrumb__current {
  color: var(--color-text-inverse);
}

.page-header--image .breadcrumbs__separator,
.page-header--image .breadcrumb__separator {
  color: rgba(255, 255, 255, 0.4);
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
}

.footer__brand-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
  max-width: 300px;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-lg);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-text-inverse);
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-sm);
}

.footer__contact-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-secondary-light);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  text-align: center;
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  justify-content: center;
}

.footer__legal a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.footer__legal a:hover {
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* =============================================
   CONTENT: TEXT + IMAGE
   Generic reusable text-beside-image section.
   Default: image right. Add .split--reverse for image left.
   ============================================= */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.split__text h2 {
  margin-bottom: var(--space-md);
}

.split__text h3 {
  margin-bottom: var(--space-sm);
}

.split__text p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.split__text .btn,
.split__content .btn {
  margin-top: var(--space-lg);
}

.split__text .signature {
  font-family: var(--font-signature, var(--font-heading));
  font-size: var(--signature-size, var(--text-xl));
  font-style: var(--signature-style, italic);
  color: var(--color-text-heading);
  margin-top: var(--space-lg);
}

.split__image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.split__image--portrait {
  aspect-ratio: 3 / 4;
}

.split__image--landscape {
  aspect-ratio: 4 / 3;
}

.split__image--square {
  aspect-ratio: 1 / 1;
}

.split__image-placeholder {
  width: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  padding: var(--space-xl);
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  .split--reverse .split__text,
  .split--reverse .split__content {
    order: 2;
  }

  .split--reverse picture,
  .split--reverse .split__image,
  .split--reverse .split__image-placeholder {
    order: 1;
  }

  /* Wider text column */
  .split--text-wide {
    grid-template-columns: 7fr 5fr;
  }

  /* Wider image column */
  .split--image-wide {
    grid-template-columns: 5fr 7fr;
  }
}

/* =============================================
   SPLIT: FULL-BLEED
   Edge-to-edge image on one side, padded text on the other.
   Image fills 50% of viewport width with no gaps or rounding.
   Use .split--bleed-reverse to flip image to the right.
   ============================================= */
.split--bleed {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.split--bleed .split__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 80vh;
  align-self: center;
  object-fit: cover;
  border-radius: 0;
}

.split--bleed .split__content {
  padding: var(--space-2xl) var(--space-lg);
}

.split--bleed .split__content h2 {
  margin-bottom: var(--space-lg);
}

/* Gap between consecutive containers within a section (e.g. intro para then content grid) */
.section .container + .container {
  margin-top: var(--space-2xl);
}

/* Remove section padding and margin so split--bleed truly reaches the edges */
.section:has(.split--bleed) {
  padding: 0;
  margin: 0;
}

/* v1.7.15 - a bleed column touches the viewport edge, and the reveal starts
   it 34px further out (translateX), so every bleed split with a column on the
   right gave the whole page a 34px sideways scroll until it animated in
   (canonburyclinic.co.uk about and laser-therapy pages). Clip the band, never
   html or body. */
.section:has(.split--bleed) {
  overflow-x: clip;
}

@media (min-width: 768px) {
  .split--bleed {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
  }

  .split--bleed .split__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
  }

  .split--bleed .split__content {
    padding: var(--space-4xl);
  }

  /* Reverse: image on right */
  .split--bleed-reverse {
    direction: rtl;
  }

  .split--bleed-reverse > * {
    direction: ltr;
  }
}

/* v1.7.16 - a bleed photo kept a fixed 4:3 box, so beside text taller than it
   (three paragraphs at 1280px) it floated mid-band with up to ~400px of empty
   half-band above and below (canonburyclinic.co.uk laser-therapy and about).
   The photo now fills the band's full height. min-height keeps the old 4:3
   height of a half-width column, so a band with short text looks as before.
   Covers both markups in the fleet: img as a direct child, or inside
   .split__image-wrap. */
@media (min-width: 768px) {
  .split--bleed {
    align-items: stretch;
  }

  .split--bleed > .split__content {
    align-self: center;
  }

  .split--bleed > .split__image,
  .split--bleed > .split__image-wrap {
    min-height: min(37.5vw, 80vh);
  }

  .split--bleed > .split__image {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }

  .split--bleed > .split__image-wrap {
    position: relative;
  }

  .split--bleed > .split__image-wrap > .split__image {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
}

/* =============================================
   CONTENT: FULL-WIDTH TEXT
   Centered heading + text, no image.
   ============================================= */
.text-block {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.text-block h2 {
  margin-bottom: var(--space-lg);
}

.text-block h3 {
  margin-bottom: var(--space-md);
}

.text-block p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.text-block--center {
  text-align: center;
}

.text-block .btn {
  margin-top: var(--space-lg);
}

/* =============================================
   CONTENT: STORY SPLIT
   Centered heading above, then h3 lead on the left
   with body paragraphs on the right.
   ============================================= */
.story-split {
  max-width: var(--container-wide);
  margin: 0 auto;
}

.story-split .text-center {
  margin-bottom: var(--space-2xl);
}

.story-split__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.story-split__lead {
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.story-split__lead h3 {
  font-weight: 400;
  line-height: 1.3em;
}

.story-split__content p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.story-split__content p + p {
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .story-split__body {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-2xl);
  }
}

/* =============================================
   CONTENT: TWO-COLUMN TEXT
   Heading spans full width, text splits into 2 cols.
   ============================================= */
.two-col-text h2 {
  margin-bottom: var(--space-xl);
}

.two-col-text__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.two-col-text__columns p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .two-col-text__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* =============================================
   CONTENT: STORY TEXT
   Centred header spanning full width, then a
   two-column layout: large pull-quote (left)
   and regular body text (right).
   ============================================= */
.story-text {
  max-width: var(--container-wide);
  margin: 0 auto;
}

.story-text__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.story-text__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.story-text__quote {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-heading);
}

.story-text__content p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.story-text__content p + p {
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .story-text__header {
    margin-bottom: var(--space-3xl);
  }

  .story-text__body {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-3xl);
  }
}

/* =============================================
   CONTENT: HIGHLIGHT BOX
   Stacked card: dark header on top (full width, centred),
   white body below (centred). Used for standout callouts.
   ============================================= */
.highlight-box {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.highlight-box__heading {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
}

.highlight-box__heading h2,
.highlight-box__heading h3,
.highlight-box__heading h4 {
  color: var(--color-text-inverse);
  font-size: var(--text-h3-desktop);
  line-height: var(--line-height-tight);
  margin: 0;
}

.highlight-box__content {
  background-color: var(--color-surface);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  border: 1px solid var(--color-border-light);
  border-top: none;
  flex: 1;
}

/* --text-base, matching .card__text, so all secondary prose sits at one size.
   At --text-sm this dropped 19px body copy to 16px inside a callout that often
   sits directly under body copy, which reads as an inconsistent type scale. */
.highlight-box__content p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  font-size: var(--text-base);
  margin: 0 0 var(--space-md);
}

.highlight-box__content p:last-child {
  margin-bottom: 0;
}

.highlight-box__content .btn {
  margin-top: var(--space-md);
}

/* Secondary colour variant */
.highlight-box--secondary .highlight-box__heading {
  background-color: var(--color-secondary);
}

/* Accent colour variant */
.highlight-box--accent .highlight-box__heading {
  background-color: var(--color-accent);
}

/* Soft/muted variant */
.highlight-box--soft .highlight-box__heading {
  background-color: var(--color-bg-alt);
  color: var(--color-text-heading);
  text-align: left;
}

.highlight-box--soft .highlight-box__heading h2,
.highlight-box--soft .highlight-box__heading h3,
.highlight-box--soft .highlight-box__heading h4 {
  color: var(--color-text-heading);
}

.highlight-box--soft .highlight-box__content {
  text-align: left;
}

/* =============================================
   CONTENT: BLOCKQUOTE / PULL QUOTE
   Styled quote with left border accent.
   ============================================= */
.blockquote {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  background-color: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.blockquote__text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.blockquote__cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

/* Large centered pull quote variant */
.blockquote--pull {
  border-left: none;
  text-align: center;
  padding: var(--space-2xl);
  background: transparent;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.blockquote--pull::before {
  content: '\201C';
  display: block;
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary-light);
  margin-bottom: var(--space-sm);
}

.blockquote--pull .blockquote__text {
  font-size: var(--text-xl);
}

/* =============================================
   CONTENT: CHECKLIST
   Tick-icon list items. Used for features,
   benefits, qualifications, conditions lists.
   ============================================= */
.checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* v1.7.7 — a checklist followed by more content collided with it (0px where
   the normal paragraph gap is 16px), because the list carries no bottom
   margin. Two exclusions, both load-bearing:
     :not(:last-child)          — a checklist that ENDS its container keeps
                                  margin 0, so no existing layout shifts.
     :not(.checklist-grid) >    — inside .checklist-grid the lists are siblings
                                  spaced by the grid's own `gap`; adding a
                                  margin there double-spaces and grew the grid
                                  by 16px (measured 290 -> 306 in
                                  theme-preview). The first, unscoped version of
                                  this rule DID regress it. */
:not(.checklist-grid) > .checklist:not(:last-child) {
  margin-bottom: var(--space-md);
}

/* Checklist items that use inline SVG instead of ::before — constrain SVG size */
.checklist > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  /* v1.7.15 - inherit, not --text-base: a checklist follows a paragraph and
     read 17px against 19px (canonburyclinic.co.uk laser-therapy.html). */
  font-size: inherit;
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.checklist > li > svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 4px;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: inherit;
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.checklist__item::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Negative/cross variant for "not a fit" lists */
.checklist__item--negative::before {
  background-color: var(--color-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Subtle variant — no filled circle, just coloured tick */
.checklist--subtle .checklist__item::before {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7B6F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 18px;
}

/* Numbered variant (v1.7.22, 2026-10-22): the same list with 1, 2, 3 in the
   circle where the tick sits, for steps or anything in order. Markup:
   ol.checklist.checklist--numbered > li.checklist__item (never type the
   numbers). The circle is larger than the tick's so the number is 16px. */
.checklist--numbered {
  counter-reset: checklist-number;
}

.checklist--numbered .checklist__item {
  counter-increment: checklist-number;
}

.checklist--numbered .checklist__item::before {
  content: counter(checklist-number);
  width: 26px;
  height: 26px;
  margin-top: 0;
  background-image: none;
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 26px;
  text-align: center;
}

/* =============================================
   CONTENT: TWO-COLUMN CHECKLIST GRID
   Side-by-side checklists. Used for conditions,
   values, features, etc.
   ============================================= */
.checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .checklist-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* =============================================
   CARDS: ICON GRID
   2/3/4-column icon boxes. Icon top, heading, text.
   Uses existing .grid--2, .grid--3 from base.css.
   ============================================= */
.icon-box {
  text-align: center;
  padding: var(--space-xl);
}

.icon-box__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  color: var(--color-primary);
}

.icon-box__icon svg {
  width: 28px;
  height: 28px;
}

.icon-box__title {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-sm);
}

.icon-box__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* Left-aligned variant */
.icon-box--left {
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.icon-box--left .icon-box__icon {
  margin: 0;
  flex-shrink: 0;
}

/* Bordered card variant */
.icon-box--card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.icon-box--card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 4-column grid */
.grid--4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 5-item grid — 3 across top, 2 centred below */
.grid--5 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--5 {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid--5 > * {
    grid-column: span 2;
  }

  /* Centre the last 2 items across the 6-col grid */
  .grid--5 > :nth-child(4) {
    grid-column: 2 / 4;
  }

  .grid--5 > :nth-child(5) {
    grid-column: 4 / 6;
  }
}

/* =============================================
   BENTO GRID
   Featured first card spanning 2 rows beside
   a 2-col grid of smaller cards. Works with
   4 or 5 items. Uses card--feature children.
   ============================================= */
.grid--bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .grid--bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }

  .grid--bento > :first-child {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Bento children get visible card styling */
.grid--bento > .card--feature {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

/* Highlighted / featured card (dark background) */
.card--highlight {
  background-color: var(--color-bg-dark) !important;
  border-color: transparent !important;
  color: var(--color-text-inverse);
}

.card--highlight .card__title {
  color: var(--color-text-inverse);
}

.card--highlight .card__text {
  color: rgba(255, 255, 255, 0.8);
}

.card--highlight .card__icon {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-secondary-light);
}

/* Stat number for featured cards */
.card__stat {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.card--highlight .card__stat {
  color: var(--color-secondary-light);
}

/* =============================================
   CARDS: NUMBERED STEPS
   Step 1, 2, 3 process flow.
   ============================================= */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  counter-reset: step;
}

.step {
  text-align: center;
  padding: var(--space-lg);
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xl);
  margin: 0 auto var(--space-lg);
}

.step__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.step__title {
  font-size: calc(var(--text-h3-desktop) * 0.8);
  margin-bottom: var(--space-sm);
}

.step__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* Horizontal steps with connecting line */
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps--connected {
    position: relative;
  }

  .steps--connected .step {
    position: relative;
  }

  .steps--connected .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-lg) + 28px);
    right: -12.5%;
    width: 25%;
    height: 2px;
    background-color: var(--color-border);
  }
}

@media (min-width: 1024px) {
  /* 3-item steps */
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4-item steps — override to 4 columns */
  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 4-item steps — narrower connecting lines for tighter columns */
  .steps--connected.steps--4 .step:not(:last-child)::after {
    right: -10%;
    width: 20%;
  }
}

/* =============================================
   CARDS: IMAGE CARDS
   Photo + title + text. For services, blog, etc.
   ============================================= */
.image-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.image-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.image-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.image-card__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.image-card__body {
  padding: var(--space-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.image-card__title {
  font-size: calc(var(--text-h3-desktop) * 0.8);
  margin-bottom: var(--space-sm);
}

.image-card__title a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.image-card__title a:hover {
  color: var(--color-primary-dark);
}

.image-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}

.image-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.image-card__link:hover {
  gap: var(--space-sm);
}

/* =============================================
   CARDS: OVERLAY IMAGE BOXES
   Image with text overlay on hover/always.
   For service grids, portfolio.
   ============================================= */
.overlay-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.overlay-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.overlay-card__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
}

.overlay-card:hover .overlay-card__image {
  transform: scale(1.05);
}

.overlay-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
  color: var(--color-text-inverse);
}

.overlay-card__title {
  font-size: calc(var(--text-h3-desktop) * 0.8);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.overlay-card__text {
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
  opacity: 0.85;
}

/* =============================================
   CARDS: BENTO GRID
   Mixed-size feature showcase grid.
   ============================================= */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.bento__item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.bento__item h3 {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-sm);
}

.bento__item p {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.bento__item--highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
}

.bento__item--highlight h3 {
  color: var(--color-text-inverse);
}

.bento__item--highlight p {
  color: rgba(255, 255, 255, 0.85);
}

.bento__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.bento__item--highlight .bento__image-placeholder {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__item--wide {
    grid-column: span 2;
  }

  .bento__item--tall {
    grid-row: span 2;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   CARDS: STATS / NUMBERS ROW
   Metric + label. For social proof, achievements.
   ============================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.stat {
  text-align: center;
  padding: var(--space-lg);
}

.stat__number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.stat__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
}

.stat__icon svg {
  width: 40px;
  height: 40px;
}

/* Card variant */
.stat--card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .stats--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   SOCIAL PROOF: TESTIMONIAL GRID
   2-column grid of testimonial cards.
   ============================================= */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Testimonial with avatar variant */
.testimonial--avatar {
  text-align: center;
}

.testimonial__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto var(--space-md);
}

.testimonial__avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.testimonial--avatar .testimonial__quote {
  padding-left: 0;
  text-align: center;
}

.testimonial--avatar .testimonial__quote::before {
  display: none;
}

.testimonial--avatar .testimonial__stars {
  justify-content: center;
}

/* =============================================
   TESTIMONIAL CAROUSEL
   Single featured testimonial that rotates.
   JS handles fade transitions + auto-advance.
   ============================================= */
.testimonial-carousel {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  min-height: 200px;
}

.testimonial-carousel .testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  text-align: center;
  box-shadow: none;
  background: transparent;
}

.testimonial-carousel .testimonial--active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.testimonial-carousel .testimonial__quote {
  font-size: var(--text-lg);
  padding-left: 0;
  text-align: center;
}

.testimonial-carousel .testimonial__quote::before {
  display: none;
}

.testimonial-carousel .testimonial__stars {
  justify-content: center;
}

.testimonial-carousel__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.testimonial-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.testimonial-carousel__dot:hover {
  background-color: var(--color-primary-light);
}

.testimonial-carousel__dot--active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

/* Large quote mark above carousel */
.testimonial-carousel__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-lg);
  color: var(--color-primary-light);
  opacity: 0.4;
}

/* =============================================
   SOCIAL PROOF: TRUST / LOGO BAR
   Horizontal row of association/accreditation logos.
   ============================================= */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
}

.trust-bar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.trust-bar__label {
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

.trust-bar__logo {
  height: 52px;
  width: auto;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  filter: grayscale(100%);
}

.trust-bar__logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.trust-bar__logo-placeholder {
  height: 40px;
  width: 100px;
  border-radius: var(--radius-sm);
  background-color: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-text-light);
  opacity: 0.6;
}

@media (min-width: 768px) {
  .trust-bar,
  .trust-bar__logos {
    gap: var(--space-3xl);
  }

  .trust-bar__logo {
    height: 60px;
  }

  .trust-bar__logo-placeholder {
    height: 48px;
    width: 120px;
  }
}

/* =============================================
   INFO BAND
   Dark horizontal bar with 3-4 icon+text items.
   Common use: session formats, opening hours, key facts.
   Wrap in a <section> or <div> — no .section padding needed.
   ============================================= */
.info-band {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-xl) 0;
}

.info-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  text-align: center;
  /* Self-centering safety net: the band spans full width, the items stay
     centred to the content width even if the author forgets `.container`
     on this element. Redundant (harmless) when `.container` is present. */
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.info-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.info-band__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary-light);
}

.info-band__icon svg {
  width: 22px;
  height: 22px;
}

.info-band__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  display: block;
  margin-bottom: 2px;
}

.info-band__text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--line-height-normal);
}

/* Primary colour variant */
/* The gradient's light stop is tokenised so a site can tune the band without
   forking this file. Default is unchanged, so existing sites are unaffected. */
.info-band--primary {
  background: linear-gradient(135deg, var(--info-band-from, var(--color-primary-dark)) 0%, var(--color-primary) 100%);
}

/* A lighter gradient stop pushes both the inverse-cream title (~4.3:1) and the
   muted 70%-white sub-line (~3.1:1) below AA on a mid-tone clay. Pure white on
   the primary variant clears 4.5:1 at both gradient stops without relying on a
   borderline "large text" exemption; hierarchy still comes from size + typeface. */
.info-band--primary,
.info-band--primary .info-band__text {
  color: var(--info-band-text, #FFFFFF);
}

.info-band--primary .info-band__icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
}

/* Surface/light variant */
.info-band--light {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.info-band--light .info-band__icon {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.info-band--light .info-band__title {
  color: var(--color-text-heading);
}

.info-band--light .info-band__text {
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .info-band__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-band__item {
    flex-direction: row;
    text-align: left;
    gap: var(--space-md);
  }

  .info-band__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

/* 4-column variant */
@media (min-width: 768px) {
  .info-band--4 .info-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .info-band--4 .info-band__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =============================================
   LOCATION / GETTING HERE
   Map left + transport/directions grid right.
   Uses existing .map-placeholder or real iframe.
   ============================================= */
.location {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
}

.location__map iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}

.location__map .map-placeholder {
  height: 100%;
  min-height: 300px;
  border-radius: 0;
}

.location__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.location__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.location__address svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 3px;
}

.location__transport {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.location__transport-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

.location__transport-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

.location__transport-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  display: block;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .location {
    grid-template-columns: 1fr 1fr;
  }

  .location__map {
    min-height: 400px;
  }

  .location__map iframe {
    min-height: 400px;
  }

  .location__transport {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   SOCIAL PROOF: GOOGLE REVIEWS BADGE
   Compact trust signal with star rating.
   ============================================= */
.google-reviews {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.google-reviews__logo {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.google-reviews__logo svg {
  width: 24px;
  height: 24px;
}

.google-reviews__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.google-reviews__stars {
  display: flex;
  gap: 2px;
  color: #FBBC04;
}

.google-reviews__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.google-reviews__text {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* =============================================
   SOCIAL PROOF: COMPARISON CARDS
   "Is this the right fit?" — green ticks vs red crosses.
   ============================================= */
.comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.comparison__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.comparison__card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .comparison {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================
   TEAM: TEAM GRID
   Photo + name + role cards in a grid.
   ============================================= */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.team-member {
  text-align: center;
}

.team-member__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.team-member__image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.team-member__name {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-xs);
}

.team-member__role {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.team-member .btn {
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =============================================
   TEAM: TEAM LIST (horizontal)
   Avatar + bio in a horizontal layout.
   Used for "Meet your Therapist" with sidebar.
   ============================================= */
.team-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.team-list-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border-light);
}

.team-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.team-list-item__avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.team-list-item__avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-text-light);
  flex-shrink: 0;
}

.team-list-item__name {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.team-list-item__role {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.team-list-item__bio {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .team-list-item {
    grid-template-columns: 100px 1fr;
  }
}

/* =============================================
   CTA: INLINE CTA
   Text left, button right. Full-width band.
   ============================================= */
.cta-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-xl);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.cta-inline h2,
.cta-inline h3 {
  margin-bottom: var(--space-xs);
}

.cta-inline p {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

.cta-inline .btn {
  flex-shrink: 0;
}

/* Dark variant — plum gradient bg with white text */
.cta-inline--dark {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-2xl) var(--space-xl);
}

/* Full-width mid-page CTA: applied to a <section>.
   Whole section is plum gradient, text left-aligned, button right-aligned. */
.section.cta-mid-banner {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-text-inverse);
  padding: var(--space-2xl) 0;
}

.section.cta-mid-banner h2,
.section.cta-mid-banner h3,
.section.cta-mid-banner h4 {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-xs);
}

.section.cta-mid-banner p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.cta-mid-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  text-align: left;
}

.cta-mid-banner__inner > :first-child {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .cta-mid-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
}

.cta-inline--dark h2,
.cta-inline--dark h3 {
  color: var(--color-text-inverse);
}

.cta-inline--dark p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-base);
}

/* In dark CTA, secondary button inverts to outlined white-on-transparent */
.cta-inline--dark .btn--secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
}

.cta-inline--dark .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Full-width band sub-variant — removes rounded corners when used as a section */
.cta-inline--dark.cta-inline--band {
  border-radius: 0;
}

@media (min-width: 768px) {
  .cta-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =============================================
   CTA: IMAGE + TEXT CTA
   Small image on left, text + button on right.
   Like "An Invitation to Begin" block.
   ============================================= */
.cta-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.cta-image__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.cta-image__img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.cta-image__text h3 {
  margin-bottom: var(--space-sm);
}

.cta-image__text p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  font-size: var(--text-sm);
}

.cta-image__text .btn {
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .cta-image {
    grid-template-columns: 200px 1fr;
  }
}

/* =============================================
   CTA: ANNOUNCEMENT BAR
   Thin strip at very top of page.
   ============================================= */
.announcement-bar {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.announcement-bar a {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: var(--space-sm);
}

.announcement-bar a:hover {
  opacity: 0.85;
}

/* Secondary / accent variant */
.announcement-bar--secondary {
  background-color: var(--color-secondary);
}

.announcement-bar--subtle {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.announcement-bar--subtle a {
  color: var(--color-primary);
}

/* =============================================
   FAQ: ACCORDION
   Expandable question/answer with JS toggle.
   ============================================= */
.accordion {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.accordion__item {
  border-bottom: 1px solid var(--color-border-light);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) 0;
  text-align: left;
  font-family: var(--font-heading);
  font-size: calc(var(--text-h3-desktop) * 0.8);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  cursor: pointer;
  background: none;
  border: none;
  gap: var(--space-md);
}

.accordion__trigger:hover {
  color: var(--color-primary);
}

.accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.accordion__icon-vertical {
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.accordion__item--open .accordion__icon-vertical {
  transform: scaleY(0);
  opacity: 0;
}

.accordion__content {
  display: none;
  padding-bottom: var(--space-lg);
}

.accordion__item--open .accordion__content {
  display: block;
}

.accordion__content p {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* =============================================
   FAQ: TWO-COLUMN ACCORDION
   Side-by-side FAQ lists.
   ============================================= */
.accordion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Each list fills its column (the base .accordion centres itself with
   auto margins, which in a grid shrinks it to its longest question). */
.accordion-grid .accordion {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) {
  .accordion-grid {
    grid-template-columns: 1fr 1fr;
  }

  .accordion-grid .accordion {
    max-width: none;
  }
}

/* =============================================
   PRICING: FEE LINE ITEMS
   Service name ....... price. For therapy fees etc.
   ============================================= */
.fee-table {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.fee-table h3 {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-lg);
}

.fee-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.fee-item:last-child {
  border-bottom: none;
}

.fee-item__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  font-size: var(--text-base);
}

.fee-item__detail {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: 2px;
}

.fee-item__dots {
  flex-grow: 1;
  border-bottom: 2px dotted var(--color-border);
  margin: 0 var(--space-sm);
  min-width: 40px;
  align-self: center;
  margin-bottom: 4px;
}

.fee-item__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  white-space: nowrap;
}

/* =============================================
   PRICING: PRICING CARDS GRID
   2 or 3 column pricing layout.
   Uses existing .pricing-card from components.css.
   ============================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
  }
}

/* =============================================
   PRICING: SINGLE CENTERED PRICING CARD
   One highlighted plan, centered on page.
   ============================================= */
.pricing-single {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================
   PRICING: COMPARISON TABLE
   Feature comparison across plans/options.
   ============================================= */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 2px solid #ccc;
}

.comparison-table thead th {
  background-color: var(--color-bg-alt);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  text-align: center;
  border-bottom: 2px solid #ccc;
  border-right: 1px solid var(--color-border-light);
}

.comparison-table thead th:last-child {
  border-right: none;
}

.comparison-table thead th:first-child {
  text-align: left;
}

.comparison-table tbody td {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  text-align: center;
}

.comparison-table tbody td:last-child {
  border-right: none;
}

.comparison-table tbody td:first-child {
  text-align: left;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-heading);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table .check {
  color: var(--color-success);
  font-size: var(--text-lg);
}

.comparison-table .cross {
  color: var(--color-text-light);
  opacity: 0.4;
}

/* Highlight column */
.comparison-table .col-highlight {
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

/* =============================================
   PRICING: COMPANY DETAILS TABLE
   Label:value pairs in a card.
   ============================================= */
.details-table {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  max-width: 500px;
}

.details-table h3 {
  font-size: var(--text-h3-desktop);
  margin-bottom: var(--space-lg);
}

.details-row {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
}

.details-row:last-child {
  border-bottom: none;
}

.details-row__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  min-width: 140px;
  flex-shrink: 0;
}

.details-row__value {
  color: var(--color-text-light);
}

/* =============================================
   CHUNK 6: CONTACT & FOOTER VARIANTS
   ============================================= */

/* --- Contact Cards (icon cards row above form) --- */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: box-shadow var(--transition-normal);
}

.contact-card:hover {
  box-shadow: var(--shadow-md);
}

.contact-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  color: var(--color-primary);
}

.contact-card__icon svg {
  width: 22px;
  height: 22px;
}

.contact-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.contact-card__detail {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.contact-card__detail a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.contact-card__detail a:hover {
  color: var(--color-primary-dark);
}

/* --- Full-Width Form --- */
.form--full-width {
  max-width: 700px;
  margin: 0 auto;
}

.form--full-width .form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .form--full-width .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Simple Centered Footer --- */
.footer--simple {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  padding: var(--space-xl) 0;
  text-align: center;
}

.footer--simple .footer__brand-name {
  color: var(--color-text-heading);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
}

.footer--simple .footer__brand-text {
  color: var(--color-text-light);
  max-width: none;
  margin-bottom: var(--space-md);
}

.footer--simple .footer__links {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-lg);
}

.footer--simple .footer__link {
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

.footer--simple .footer__link:hover {
  color: var(--color-primary);
}

.footer--simple .footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.footer--simple .footer__copyright {
  color: var(--color-text-light);
}

.footer--simple .footer__legal a {
  color: var(--color-text-light);
}

.footer--simple .footer__legal a:hover {
  color: var(--color-primary);
}

/* --- Two-Column Footer --- */
.footer--two-col .footer__inner {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer--two-col .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.footer--two-col .footer__col-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .footer--two-col .footer__col-right {
    align-items: flex-end;
    text-align: right;
  }
}

.footer__social {
  display: flex;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .footer--two-col .footer__social {
    justify-content: flex-end;
  }
}

.footer__social a,
.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: all var(--transition-fast);
}

.footer__social a:hover,
.footer__social-link:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.footer__social a svg,
.footer__social-link svg {
  width: 16px;
  height: 16px;
}

/* Footer hours list */
.footer__hours {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
}

.footer__hours dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  margin-top: var(--space-sm);
}

.footer__hours dt:first-child {
  margin-top: 0;
}

.footer__hours dd {
  margin-left: 0;
}

/* =============================================
   CHUNK 7: UTILITIES
   ============================================= */

/* --- Section Dividers --- */
.divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

.divider--flip svg {
  transform: scaleY(-1);
}

.divider--wave svg path {
  fill: var(--color-bg-alt);
}

.divider--curve svg path {
  fill: var(--color-bg-alt);
}

.divider--angle svg polygon {
  fill: var(--color-bg-alt);
}

.divider--dark svg path,
.divider--dark svg polygon {
  fill: var(--color-bg-dark);
}

.divider--primary svg path,
.divider--primary svg polygon {
  fill: var(--color-primary);
}

/* Line variant (v1.7.22, 2026-10-22): a thin rule between two parts of the
   text in one column, where .divider alone (a wave or other shape between
   bands, drawn by its SVG) would draw nothing. It takes the colour of the
   text around it, faintly, so it reads on a white section and on a colour
   band. Markup: div.divider.divider--line (no SVG inside). */
.divider--line {
  height: 0;
  margin: var(--space-xl) 0;
  overflow: visible;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

/* --- Video Embed --- */
.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.video-embed iframe,
.video-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-embed--placeholder {
  background: var(--color-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-lg);
}

.video-embed--placeholder:hover .video-embed__play {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translate(-50%, -50%) scale(1.1);
}

.video-embed__play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

/* --- Gallery Grid --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-fast);
}

.gallery__item:hover::after {
  background: rgba(0, 0, 0, 0.15);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.lightbox--open {
  display: flex;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* v1.4 — entrance animation when lightbox opens */
@keyframes lightbox-img-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox--open .lightbox__img {
  animation: lightbox-img-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox--open .lightbox__img { animation: none; }
}

.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: var(--text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  z-index: 2;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* v1.4 — prev/next navigation buttons (auto-wired by main.js when present) */
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  font-family: inherit;
  padding: 0 0 6px 0;
  z-index: 2;
}
.lightbox__prev { left: var(--space-lg); }
.lightbox__next { right: var(--space-lg); }
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.05);
}
@media (max-width: 540px) {
  .lightbox__prev,
  .lightbox__next { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox__prev { left: var(--space-sm); }
  .lightbox__next { right: var(--space-sm); }
}

/* =============================================
   VIDEO EMBED
   Responsive 16:9 wrapper for iframe videos.
   ============================================= */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
}

/* =============================================
   VIDEO SPLIT
   Optional centered header across both columns,
   then text left + video right. Stacks on mobile.
   ============================================= */
.video-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.video-split__header {
  text-align: center;
}

.video-split__header h2 {
  margin-bottom: var(--space-sm);
}

.video-split__content p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .video-split {
    grid-template-columns: 1fr 1fr;
  }

  .video-split__header {
    grid-column: 1 / -1;
  }
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-normal);
  z-index: 100;
}

.back-to-top--visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Alert / Notice Boxes --- */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert__icon svg {
  width: 20px;
  height: 20px;
}

.alert--info {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.alert--info .alert__icon {
  color: #3B82F6;
}

.alert--success {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}

.alert--success .alert__icon {
  color: #22C55E;
}

.alert--warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.alert--warning .alert__icon {
  color: #F59E0B;
}

.alert--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.alert--error .alert__icon {
  color: #EF4444;
}

/* Themed alert (uses palette colours) */
.alert--themed {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.alert--themed .alert__icon {
  color: var(--color-primary);
}

/* --- Badge / Tag Pills --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--aesthetic-radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.badge--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.badge--secondary {
  background: var(--color-secondary);
  color: white;
}

.badge--accent {
  background: var(--color-accent);
  color: white;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.badge--subtle {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.badge--success {
  background: #DCFCE7;
  color: #166534;
}

.badge--warning {
  background: #FEF3C7;
  color: #92400E;
}

.badge--error {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  padding: var(--space-md) 0;
}

.breadcrumbs__item {
  color: var(--color-text-light);
}

.breadcrumbs__item a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.breadcrumbs__item a:hover {
  color: var(--color-primary-dark);
}

.breadcrumbs__separator {
  color: var(--color-border);
  font-size: var(--text-xs);
}

.breadcrumbs__item--active {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* =============================================
   FORM: SUCCESS / ERROR STATES
   Shown after AJAX submission.
   ============================================= */
.form__success {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.form__success svg {
  width: 48px;
  height: 48px;
  color: var(--color-success);
  margin: 0 auto var(--space-md);
}

.form__success h3 {
  margin-bottom: var(--space-sm);
}

.form__success p {
  color: var(--color-text-light);
}

.form__error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

/* =============================================
   COOKIE CONSENT BANNER
   Fixed bottom bar, hidden by default.
   ============================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-lg);
  transform: translateY(100%);
  transition: transform var(--transition-slow);
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}

.cookie-banner__text {
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.cookie-banner__text a {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner__accept {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.cookie-banner__accept:hover {
  background: var(--color-primary-dark);
}

.cookie-banner__decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cookie-banner__decline:hover {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.6);
}

.cookie-banner__buttons {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .cookie-banner__text {
    flex: 1;
  }
}

/* =============================================
   BLOG: POST ARTICLE
   Single blog post layout.
   ============================================= */
.blog-post {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.blog-post__date,
.blog-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.blog-post__meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.blog-post__hero {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-post__hero-placeholder {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  padding: var(--space-xl);
}

.blog-post__body h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.blog-post__body h3 {
  font-size: var(--text-h3-desktop);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.blog-post__body p {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

.blog-post__body ul,
.blog-post__body ol {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

.blog-post__body ol {
  list-style: decimal;
}

.blog-post__body li {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xs);
}

.blog-post__body blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.blog-post__body blockquote p {
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text);
  margin-bottom: 0;
}

.blog-post__body img {
  width: 100%;
  border-radius: var(--radius-md);
  margin: var(--space-xl) 0;
}

.blog-post__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-post__body a:hover {
  color: var(--color-primary-dark);
}

/* Blog post share links */
.blog-post__share {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-2xl);
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border-light);
}

.blog-post__share-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.blog-post__share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-light);
  transition: all var(--transition-fast);
}

.blog-post__share a:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.blog-post__share a svg {
  width: 18px;
  height: 18px;
}

/* =============================================
   BLOG: LISTING GRID
   Grid of blog cards with image + title + date.
   ============================================= */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* v1.7.15 - cards in a row are the same height (grid stretch), but the body
   was not, so "Read more" sat wherever the excerpt ended and drifted between
   neighbours. Column flex pins it to the bottom of every card. */
.blog-card {
  display: flex;
  flex-direction: column;
}

.blog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__link {
  margin-top: auto;
  align-self: flex-start;
}

/* v1.7.15 - a lone card on the last row sits in the middle, not hard left
   with two empty slots beside it (10 posts in a 3-column grid). */
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid > .blog-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-xl)) / 2);
  }
}

@media (min-width: 1024px) {
  .blog-grid > .blog-card:last-child:nth-child(3n+1) {
    grid-column: 2;
  }
}

.blog-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.blog-card__body {
  padding: var(--space-lg);
}

.blog-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-h3-desktop) * 0.8);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

.blog-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.blog-card__title a:hover {
  color: var(--color-primary);
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.blog-card__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--transition-fast);
}

.blog-card__link:hover {
  color: var(--color-primary-dark);
}

.blog-card__link svg {
  width: 16px;
  height: 16px;
}

/* v1.7.14 - category label on a blog card, above the date. Until now the
   listing emitted this span with no CSS behind it, so it read as a line of
   plain body text (canonburyclinic.co.uk, 2026-10-01). */
.blog-card__category {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

/* v1.7.14 - category filter pills above the blog grid, emitted by the listing
   generator once a site has 2+ categories. A sibling of .blog-grid, never a
   child: inside the grid it took the first card slot. Same look as
   .shop-filter, separate classes so a change to one cannot break the other. */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.blog-filter {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--aesthetic-radius-pill);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-filter--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* :hover (0,2,0) outranks --active (0,1,0); keep the active pill readable. */
.blog-filter--active:hover {
  color: var(--color-text-inverse);
}

/* v1.7.14 - the listing's empty state. It sits inside .blog-grid, so it spans
   every column rather than squeezing into the first card slot. */
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-2xl) 0;
}

/* =============================================
   LEGAL CONTENT
   Privacy, cookies, terms — long-form prose pages
   ============================================= */
.legal-content h2 {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}

.legal-content h3 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.legal-content p,
.legal-content ul,
.legal-content ol {
  margin-bottom: var(--space-md);
}

/* =============================================
   404 PAGE
   ============================================= */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}

.error-page__code {
  font-family: var(--font-heading);
  font-size: 8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  opacity: 0.15;
  margin-bottom: var(--space-md);
}

.error-page h1 {
  margin-bottom: var(--space-md);
}

.error-page p {
  color: var(--color-text-light);
  max-width: 480px;
  margin: 0 auto var(--space-xl);
  line-height: var(--line-height-relaxed);
}

/* =============================================
   SITE CREDIT
   "Website by" link — sits outside section comments
   so the AI editor cannot modify it.
   ============================================= */
.site-credit {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background: #2a2a2a;
}

.site-credit p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.site-credit .site-credit__heart {
  color: #e25555;
  font-size: var(--text-sm);
}

.site-credit a {
  color: var(--color-secondary-light);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.site-credit a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* =============================================
   SCROLL REVEAL ANIMATIONS
   Add .reveal to any section for a subtle
   fade-up on scroll. Respects prefers-reduced-motion.
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal trigger: fires its children's cascade when IT enters view, without
   animating itself. Use where the cascade content sits far below the section
   top (e.g. a list beneath a heading + intro) so the section-level .reveal would
   otherwise fire the cascade while the items are still below the fold. Markup:
   add `reveal reveal-trigger` to the wrapper around the grid/list. */
.reveal-trigger {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Stagger children inside grids and lists for a cascade effect */
.reveal .grid--2 > *,
.reveal .grid--3 > *,
.reveal .grid--4 > *,
.reveal .grid--bento > *,
.reveal .steps > *,
.reveal .testimonial-grid > *,
.reveal .pricing-grid > *,
.reveal .team-grid > *,
.reveal .quals-list > *,
.reveal .fee-table {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible .grid--2 > *,
.reveal--visible .grid--3 > *,
.reveal--visible .grid--4 > *,
.reveal--visible .grid--bento > *,
.reveal--visible .steps > *,
.reveal--visible .testimonial-grid > *,
.reveal--visible .pricing-grid > *,
.reveal--visible .team-grid > *,
.reveal--visible .quals-list > *,
.reveal--visible .fee-table {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for cascade children (grids/steps up to 6; quals-list to 10) */
.reveal--visible .grid--2 > *:nth-child(1),
.reveal--visible .grid--3 > *:nth-child(1),
.reveal--visible .grid--4 > *:nth-child(1),
.reveal--visible .grid--bento > *:nth-child(1),
.reveal--visible .steps > *:nth-child(1),
.reveal--visible .testimonial-grid > *:nth-child(1),
.reveal--visible .pricing-grid > *:nth-child(1),
.reveal--visible .team-grid > *:nth-child(1),
.reveal--visible .quals-list > *:nth-child(1),
.reveal--visible .fee-table:nth-child(1) { transition-delay: 0s; }

.reveal--visible .grid--2 > *:nth-child(2),
.reveal--visible .grid--3 > *:nth-child(2),
.reveal--visible .grid--4 > *:nth-child(2),
.reveal--visible .grid--bento > *:nth-child(2),
.reveal--visible .steps > *:nth-child(2),
.reveal--visible .testimonial-grid > *:nth-child(2),
.reveal--visible .pricing-grid > *:nth-child(2),
.reveal--visible .team-grid > *:nth-child(2),
.reveal--visible .quals-list > *:nth-child(2),
.reveal--visible .fee-table:nth-child(2) { transition-delay: 0.1s; }

.reveal--visible .grid--2 > *:nth-child(3),
.reveal--visible .grid--3 > *:nth-child(3),
.reveal--visible .grid--4 > *:nth-child(3),
.reveal--visible .grid--bento > *:nth-child(3),
.reveal--visible .steps > *:nth-child(3),
.reveal--visible .testimonial-grid > *:nth-child(3),
.reveal--visible .pricing-grid > *:nth-child(3),
.reveal--visible .team-grid > *:nth-child(3),
.reveal--visible .quals-list > *:nth-child(3),
.reveal--visible .fee-table:nth-child(3) { transition-delay: 0.2s; }

.reveal--visible .grid--2 > *:nth-child(4),
.reveal--visible .grid--3 > *:nth-child(4),
.reveal--visible .grid--4 > *:nth-child(4),
.reveal--visible .grid--bento > *:nth-child(4),
.reveal--visible .steps > *:nth-child(4),
.reveal--visible .pricing-grid > *:nth-child(4),
.reveal--visible .team-grid > *:nth-child(4),
.reveal--visible .quals-list > *:nth-child(4) { transition-delay: 0.3s; }

.reveal--visible .grid--3 > *:nth-child(5),
.reveal--visible .grid--4 > *:nth-child(5),
.reveal--visible .grid--bento > *:nth-child(5),
.reveal--visible .team-grid > *:nth-child(5),
.reveal--visible .quals-list > *:nth-child(5) { transition-delay: 0.4s; }

.reveal--visible .grid--4 > *:nth-child(6),
.reveal--visible .team-grid > *:nth-child(6),
.reveal--visible .quals-list > *:nth-child(6) { transition-delay: 0.5s; }

.reveal--visible .quals-list > *:nth-child(7) { transition-delay: 0.6s; }
.reveal--visible .quals-list > *:nth-child(8) { transition-delay: 0.7s; }
.reveal--visible .quals-list > *:nth-child(9) { transition-delay: 0.8s; }
.reveal--visible .quals-list > *:nth-child(10) { transition-delay: 0.9s; }

/* Directional reveal — split columns slide in from their own side as the
   section enters view (text from the left, image from the right).
   MOBILE-SAFE: below 768px .split is a single stacked column, so a horizontal
   slide would push a child past the viewport edge (a ~10px horizontal scrollbar)
   AND read oddly. So mobile uses a plain fade-up; the directional X-slide only
   applies at >=768px, where the two columns sit side by side. */
.reveal .split__text,
.reveal .split__content,
.reveal .split__image,
.reveal .split__image-placeholder {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .reveal .split__text,
  .reveal .split__content { transform: translateX(-34px); }
  .reveal .split__image,
  .reveal .split__image-placeholder { transform: translateX(34px); }
  /* Reversed splits: flip the slide directions to match the visual order */
  .reveal .split--reverse .split__text,
  .reveal .split--reverse .split__content { transform: translateX(34px); }
  .reveal .split--reverse .split__image,
  .reveal .split--reverse .split__image-placeholder { transform: translateX(-34px); }
}

.reveal--visible .split__text,
.reveal--visible .split__content,
.reveal--visible .split__image,
.reveal--visible .split__image-placeholder {
  opacity: 1;
  transform: none;
}

/* v1.7.17 - the reversed-split slide (.reveal .split--reverse .split__content,
   0,3,0) out-ranks the reset above (0,2,0), so on a photo-left band the 34px
   offset never cleared: text pushed past the right edge and a gap beside the
   photo, on every desktop visit (canonburyclinic.co.uk laser-therapy). Same
   weight, later in the file, so it wins. */
.reveal--visible .split--reverse .split__text,
.reveal--visible .split--reverse .split__content,
.reveal--visible .split--reverse .split__image,
.reveal--visible .split--reverse .split__image-placeholder {
  transform: none;
}

/* Checklist grid cascade — same staggered fade-up as the other grids/lists */
.reveal .checklist-grid > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--visible .checklist-grid > * { opacity: 1; transform: translateY(0); }
.reveal--visible .checklist-grid > *:nth-child(1) { transition-delay: 0s; }
.reveal--visible .checklist-grid > *:nth-child(2) { transition-delay: 0.08s; }
.reveal--visible .checklist-grid > *:nth-child(3) { transition-delay: 0.16s; }
.reveal--visible .checklist-grid > *:nth-child(4) { transition-delay: 0.24s; }
.reveal--visible .checklist-grid > *:nth-child(5) { transition-delay: 0.32s; }
.reveal--visible .checklist-grid > *:nth-child(6) { transition-delay: 0.40s; }
.reveal--visible .checklist-grid > *:nth-child(7) { transition-delay: 0.48s; }
.reveal--visible .checklist-grid > *:nth-child(8) { transition-delay: 0.56s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal .grid--2 > *,
  .reveal .grid--3 > *,
  .reveal .grid--4 > *,
  .reveal .grid--bento > *,
  .reveal .steps > *,
  .reveal .testimonial-grid > *,
  .reveal .pricing-grid > *,
  .reveal .team-grid > *,
  .reveal .quals-list > *,
  .reveal .checklist-grid > *,
  .reveal .split__text,
  .reveal .split__content,
  .reveal .split__image,
  .reveal .split__image-placeholder,
  .reveal .fee-table {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__mobile {
    transition: none;
  }
  .nav__mobile .nav__link,
  .nav__mobile .btn {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* =============================================
   CARD HOVER LIFTS
   Subtle lift effect on interactive cards.

   .team-card intentionally has NO base rule and must not be given one. It is a
   hover-intensity hook, not a standalone component: it is always written
   alongside .card (see creativewellness.co.uk/about.html, which uses
   "card card--image-top card--portrait team-card"), so .card supplies the base
   styling and .card:hover the default -2px lift, and this rule upgrades that
   lift to -4px. The real standalone team component is .team-member.
   Do not delete it as an orphan either - a live client site depends on it.
   ============================================= */
.card--service:hover,
.icon-box--card:hover,
.image-card:hover,
.pricing-card:hover,
.blog-card:hover,
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* =============================================
   FOCUS-VISIBLE RING
   Accessible keyboard focus indicator.
   ============================================= */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* =============================================
   HERO ENTRANCE ANIMATION
   Gentle fade-in on page load for hero content.
   ============================================= */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content {
  animation: heroFadeIn 0.8s ease-out both;
}

.hero__image-wrap {
  animation: heroFadeIn 0.8s ease-out 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .hero__image-wrap {
    animation: none;
  }
}

/* =============================================
   BUTTON HOVER MICRO-INTERACTIONS
   Slight scale + shadow lift on button hover.
   ============================================= */
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* SMOOTH LINK UNDERLINE ANIMATION - REMOVED in v1.7.10.
   It was scoped to `.content`, and no element in master or across the fleet has
   ever carried that class: a sweep of every shipped page in master-site-template
   and all client sites found zero exact `content` class tokens. (Beware the false
   positive - a substring search matches `privacy-content` and `cookies-content`
   and reports ~74 pages.) So the rule could never fire. Prose links are handled
   by the `main p a` / `main li a` rule instead - see the "Inline content links"
   entry in COMPONENTS.md. If an animated underline is ever wanted, add it there
   rather than reviving a class nothing applies. */

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .nav,
  .nav__mobile,
  .skip-link,
  .back-to-top,
  .cookie-banner,
  .site-credit,
  .cta-banner,
  .footer {
    display: none !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: '';
  }

  .btn::after {
    content: '' !important;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 1rem 0;
  }

  .hero {
    padding: 1rem 0;
  }

  .hero__image-wrap,
  .hero__image-placeholder {
    display: none;
  }
}

/* ─── Gallery ───────────────────────────────────────────────── */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 8px);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__caption {
  opacity: 1;
}

.gallery-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted, #888);
  grid-column: 1 / -1;
}

/* ─── Gallery Lightbox ──────────────────────────────────────── */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.gallery-lightbox--active {
  opacity: 1;
  pointer-events: auto;
}

.gallery-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.gallery-lightbox__close:hover { opacity: 1; }

.gallery-lightbox__prev,
.gallery-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.2s, background 0.2s;
}

.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover {
  opacity: 1;
  background: rgba(255,255,255,0.25);
}

.gallery-lightbox__prev { left: 1rem; }
.gallery-lightbox__next { right: 1rem; }

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .gallery-lightbox__prev,
  .gallery-lightbox__next {
    font-size: 1.5rem;
    padding: 0.4rem 0.8rem;
  }
}

/* =============================================
   GOLDEN RULE: SECTION BACKGROUND ALTERNATION (safety net)
   Only fires in the explicit "two same in a row" case. Does NOT
   try to infer alternation from neighbouring classes — cascading
   overrides cause new bugs. Author discipline (alternating
   .section / .section--alt in HTML) is still the primary fix.

   Covered:
   - Two plain .section in a row → second forced to --alt look
   - Two .section--alt in a row → second forced to plain look
   - Two .section--dark in a row → would be unusual, not handled
   ============================================= */

main > .section:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner)
  + .section:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--color-bg-alt);
}

main > .section--alt + .section--alt:not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--color-bg);
}

/* =============================================
   HERO--HALF SAFETY: height clamp
   Prevents the recurring bug where content column makes the hero
   taller than the viewport, pushing the image below the fold and
   hiding the next section entirely.
   ============================================= */
@media (min-width: 768px) {
  .hero--half .hero__inner {
    min-height: 560px;
    max-height: 85vh;
  }
  .hero--half .hero__image-wrap {
    max-height: 85vh;
  }
  .hero--half .hero__image {
    max-height: 85vh;
    object-fit: cover;
  }
  .hero--half .hero__content {
    max-height: 85vh;
    overflow-y: auto;
  }
}

@media (max-width: 767px) {
  .hero--half .hero__image-wrap {
    aspect-ratio: 4 / 3;
    max-height: 55vh;
    min-height: 0;
  }
  .hero--half .hero__image {
    max-height: 55vh;
  }
}

/* =============================================
   PRICING GRID SAFETY: auto-fit columns
   Prevents empty column slots when card count ≠ --N modifier
   ============================================= */
.pricing-grid:not(.pricing-grid--2):not(.pricing-grid--3):not(.pricing-grid--4) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .pricing-grid.pricing-grid--3:has(> :nth-child(2):last-child) {
    /* only 2 children present — override --3 to --2 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* =============================================
   LOGO TICKER
   Infinite-scroll horizontal marquee for client logos.
   Markup pattern: duplicate the .logo-ticker__item set inside the
   track so the loop is seamless (translate -50% on the track).
   Use real <img> logos OR .logo-ticker__pill text fallbacks.
   ============================================= */
.logo-ticker {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
}
.logo-ticker__label {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}
.logo-ticker__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
@keyframes logo-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding: 0 var(--space-lg);
  width: max-content;
  animation: logo-ticker-scroll 40s linear infinite;
}
.logo-ticker:hover .logo-ticker__track { animation-play-state: paused; }
/* v1.4 modifiers — opt-out of the edge fade-mask and/or hover-pause */
.logo-ticker--no-fade .logo-ticker__viewport {
  -webkit-mask-image: none;
          mask-image: none;
}
.logo-ticker--no-pause:hover .logo-ticker__track { animation-play-state: running; }
.logo-ticker__item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.logo-ticker__logo {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.7;
  transition: opacity 0.18s;
}
.logo-ticker__logo:hover { opacity: 1; }
.logo-ticker__pill {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  padding: var(--space-sm) var(--space-lg);
  border: var(--aesthetic-border-width) solid var(--color-border);
  border-radius: var(--aesthetic-radius-pill);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .logo-ticker__track { animation: none; }
  .logo-ticker__viewport { overflow-x: auto; }
}

/* =============================================
   CARD: IMAGE-TOP VARIANT + BADGE
   .card--image-top — service/team card with photo at the top.
   Pair with .card__image (the <img>) and optional .card__badge
   (corner ribbon pill).
   ============================================= */
.card--image-top {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.card--image-top .card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}
.card--image-top .card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card--image-top .card__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card--image-top .card__title {
  margin-bottom: var(--space-sm);
}
.card--image-top .card__text {
  margin-bottom: var(--space-md);
  flex: 1;
}
.card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--aesthetic-radius-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.card__badge--accent { background-color: var(--color-accent); }
/* Square aspect for team portraits */
.card--image-top.card--portrait .card__image-wrap { aspect-ratio: 1 / 1; }

/* =============================================
   STAT extensions — additive to existing .stats / .stat / .stat__number
   block (line ~4618). Adds a sub-line element + accent-coloured number
   variant. Use .stats with .stat children; .stat__number for the big
   figure, .stat__label for the heading, .stat__sub for an optional
   small caption beneath. Pair with .stat--card for a boxed look.
   ============================================= */
.stat__number--accent { color: var(--color-accent); }
.stat__sub {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

/* =============================================
   ANNOUNCEMENT BAR extensions — additive to existing .announcement-bar
   block (line ~5487). The base bar is a centred single-line strip;
   these modifiers let you build a richer "pill + message + CTA link"
   layout used for time-bound promos (e.g. MHAW). Markup:
   <div class="announcement-bar">
     <div class="announcement-bar__inner container">
       <span class="announcement-bar__msg">
         <span class="announcement-bar__pill">Now Booking</span>
         Limited spaces this month
       </span>
       <a href="#" class="announcement-bar__link">Get in touch →</a>
     </div>
   </div>
   ============================================= */
.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.announcement-bar__msg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-weight-medium);
}
.announcement-bar__pill {
  display: inline-block;
  background-color: rgba(255,255,255,0.18);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--space-sm);
  border-radius: var(--aesthetic-radius-pill);
  white-space: nowrap; /* 1.7.24: one line at 16px, never squeezed by the message beside it */
  flex-shrink: 0;
}
@media (max-width: 479px) {
  /* the message drops below the pill when both do not fit; only a pill wider than the phone wraps */
  .announcement-bar__msg { flex-wrap: wrap; justify-content: center; }
  .announcement-bar__pill { white-space: normal; max-width: 100%; }
}
.announcement-bar--subtle .announcement-bar__pill {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.announcement-bar__link {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.18s;
  text-decoration: none;
  margin-left: 0;
}
.announcement-bar--subtle .announcement-bar__link { color: var(--color-primary); }
.announcement-bar__link:hover { opacity: 1; }
.announcement-bar--accent { background-color: var(--color-accent); }
@media (max-width: 640px) {
  .announcement-bar__inner { justify-content: center; text-align: center; }
}

/* =============================================
   GALLERY: aspect modifiers + caption overlay + mobile collapse
   ADDITIVE to the existing .gallery / .gallery__item / .lightbox
   block above (line ~6144). Existing .gallery__item is 1:1; these
   modifiers let you opt into 4:3, 3:4, or 16:9, plus add an
   optional hover-revealed caption.
   ============================================= */
.gallery__item--landscape { aspect-ratio: 4 / 3; }
.gallery__item--portrait  { aspect-ratio: 3 / 4; }
.gallery__item--wide      { aspect-ratio: 16 / 9; }

.gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1;
}
.gallery__item:hover .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile collapse: show only first 4 until .gallery--expanded */
@media (max-width: 540px) {
  .gallery--collapsible .gallery__item:nth-child(n+5) { display: none; }
  .gallery--collapsible.gallery--expanded .gallery__item:nth-child(n+5) { display: block; }
}

/* =============================================
   PROCESS GRID
   3- or 4-step process visualization with image per step.
   Different from .approach-grid (text + numbered circles only).
   Markup: .process-grid > .process-step (each containing
   .process-step__image, .process-step__num, .process-step__title,
   .process-step__text).
   ============================================= */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  counter-reset: process;
}
@media (min-width: 768px) {
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.process-step {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.process-step__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}
.process-step__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.process-step__num {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  line-height: 1;
  box-shadow: var(--shadow-md);
}
/* v1.4 — centered number above title in body (transparent bg, white border).
   Move .process-step__num inside .process-step__body and add
   .process-step--num-centered on the parent .process-step. */
.process-step--num-centered .process-step__body { text-align: center; }
.process-step--num-centered .process-step__num {
  position: static;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-sm);
  background-color: transparent;
  color: currentColor;
  border: 2px solid currentColor;
  box-shadow: none;
  font-size: 1rem;
}
.process-step__body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.process-step__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h3-mobile);
  margin-bottom: var(--space-sm);
  color: var(--color-text-heading);
}
.process-step__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* =============================================
   HERO FLOATING STAT CARDS
   Glass-morphism cards positioned absolutely over the hero image.
   Add .hero__floats wrapper inside .hero__image-wrap with
   .hero__float--tl / --tr / --bl / --br for corner placement.
   Hidden on mobile (image is already cropped tight there).

   v1.4 CANTILEVER PATTERN
   For floats that should hang past the image edge (drama like the
   ref-page hero), wrap the <img> in a child <div class="hero__image-clip">
   and add .hero--floats-cantilever to .hero__image-wrap. The clip
   keeps the image rounded/cropped while the wrap allows floats with
   .hero__float--out-r / --out-l to extend past its edges.
   ============================================= */
.hero__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* Cantilever support — only kicks in when authors add the modifier */
.hero__image-wrap.hero--floats-cantilever { overflow: visible; }
.hero__image-wrap.hero--floats-cantilever .hero__image-clip {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.hero__float--out-r { right: -16px !important; }
.hero__float--out-l { left: -16px !important; }
.hero__float--out-t { top: -16px !important; }
.hero__float--out-b { bottom: -16px !important; }
.hero__float {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  min-width: 140px;
  pointer-events: auto;
}
.hero__float--accent {
  background-color: rgba(46, 127, 216, 0.92); /* falls back; primary-tinted variants below */
}
.hero__float--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.hero__float--primary .hero__float-num,
.hero__float--primary .hero__float-label,
.hero__float--primary .hero__float-sub { color: var(--color-text-inverse); }
.hero__float--tl { top: var(--space-lg); left: var(--space-lg); }
.hero__float--tr { top: var(--space-lg); right: var(--space-lg); }
.hero__float--bl { bottom: var(--space-lg); left: var(--space-lg); }
.hero__float--br { bottom: var(--space-lg); right: var(--space-lg); }
.hero__float--mr { top: 50%; right: var(--space-lg); transform: translateY(-50%); }
.hero__float--ml { top: 50%; left: var(--space-lg); transform: translateY(-50%); }
.hero__float-num {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.hero__float-num--accent { color: var(--color-accent); }
.hero__float-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.hero__float-sub {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-top: 1px;
}
@media (max-width: 767px) {
  .hero__floats { display: none; }
}

/* =============================================
   CTA BANNER — SPLIT-IMAGE VARIANT
   Two-column layout: text left (dark bg), image right with
   gradient mask fading into the dark bg. Strong for time-bound
   offers, MHAW, sales windows, etc.
   ============================================= */
.cta-banner--split {
  text-align: left;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 340px;
  overflow: hidden;
  position: relative;
  /* v1.4 — prevent grid auto-min-content from forcing children wider than viewport */
  min-width: 0;
}
.cta-banner--split > * { min-width: 0; }
.cta-banner--split .cta-banner__content {
  padding: var(--space-3xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cta-banner--split h2,
.cta-banner--split p { margin-left: 0; margin-right: 0; max-width: none; }
.cta-banner--split .cta-banner__buttons { justify-content: flex-start; }
.cta-banner__image-wrap {
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.cta-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cta-banner__image-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--color-primary-dark) 0%,
    rgba(0,0,0,0.4) 45%,
    rgba(0,0,0,0.15) 100%);
}
@media (min-width: 768px) {
  .cta-banner--split { grid-template-columns: 1fr 1fr; }
  .cta-banner__image-wrap { min-height: 100%; }
}

/* =============================================
   RATED PILL
   Small inline badge for awards / ratings ("Rated #1 by …").
   Pairs nicely below a logo strip or hero. Inline-flex with
   optional star/icon slot.
   ============================================= */
.rated-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border: calc(var(--aesthetic-border-width) + 0.5px) solid var(--color-primary);
  border-radius: var(--aesthetic-radius-pill);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  box-shadow: var(--shadow-sm);
}
.rated-pill__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}
.rated-pill__highlight { color: var(--color-primary); }
.rated-pill--accent { border-color: var(--color-accent); }
.rated-pill--accent .rated-pill__highlight { color: var(--color-accent); }

/* =============================================
   v1.4 — HERO HEADING WORD-BY-WORD ANIMATION
   Opt-in: add .hero__heading--animate to your <h1>.
   main.js wraps each word in <span class="word"> and adds
   .anim-in to trigger the animation on next paint.
   ============================================= */
@keyframes hero-word-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.hero__heading--animate .word {
  display: inline-block;
  opacity: 0;
  white-space: pre;
}
.hero__heading--animate.anim-in .word {
  animation: hero-word-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero__heading--animate .word { opacity: 1; animation: none; filter: none; transform: none; }
}

/* =============================================
   v1.4 — STAT COUNTER (visual hint for tabular numerals)
   The animation logic is in main.js (data-target driven).
   ============================================= */
.stat__number[data-target] {
  font-variant-numeric: tabular-nums;
}

/* =============================================
   v1.4 — PILL GLOW UTILITY
   Reusable animated box-shadow ring for any pill / badge /
   .announcement-bar__pill / .section-label / .mhaw-style call-out.
   Inherits its glow colour from the pill's currentColor by default.
   Override with --pill-glow-rgb (R,G,B triplet) to set a fixed colour.
   ============================================= */
@keyframes pill-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(var(--pill-glow-rgb, 59,130,246), 0.5),
      0 0 12px 0 rgba(var(--pill-glow-rgb, 59,130,246), 0.6);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(var(--pill-glow-rgb, 59,130,246), 0),
      0 0 22px 2px rgba(var(--pill-glow-rgb, 59,130,246), 0.9);
  }
}
.pill--glow {
  animation: pill-glow 2.6s ease-in-out infinite;
}
.pill--glow-accent { --pill-glow-rgb: 232,100,42; }
.pill--glow-primary { --pill-glow-rgb: 46,127,216; }
@media (prefers-reduced-motion: reduce) {
  .pill--glow { animation: none; }
}

/* =============================================
   TIMELINE COMPRESS
   Side-by-side horizontal bars comparing two durations.
   Use to visualise "industry standard vs us" speed claims.
   Markup:
     <div class="timeline-compress">
       <div class="timeline-compress__row timeline-compress__row--baseline">
         <div class="timeline-compress__label">Industry standard</div>
         <div class="timeline-compress__bar"><span class="timeline-compress__fill" style="width:100%"></span></div>
         <div class="timeline-compress__value">5–7 years</div>
       </div>
       <div class="timeline-compress__row timeline-compress__row--us">
         <div class="timeline-compress__label">Hercules</div>
         <div class="timeline-compress__bar"><span class="timeline-compress__fill" style="width:32%"></span></div>
         <div class="timeline-compress__value">24–36 months</div>
       </div>
     </div>
   ============================================= */
.timeline-compress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}
.timeline-compress__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  align-items: center;
}
@media (min-width: 768px) {
  .timeline-compress__row {
    grid-template-columns: 200px 1fr 160px;
    gap: var(--space-xl);
  }
}
.timeline-compress__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.timeline-compress__bar {
  position: relative;
  height: 14px;
  background-color: var(--color-bg-alt);
  border: var(--aesthetic-border-width) solid var(--color-border);
  overflow: hidden;
  border-radius: var(--aesthetic-radius);
}
.timeline-compress__fill {
  display: block;
  height: 100%;
  background-color: var(--color-text-light);
  transform-origin: left;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: inherit;
}
.timeline-compress__row--us .timeline-compress__bar {
  height: 18px;
  border-color: var(--color-primary);
}
.timeline-compress__row--us .timeline-compress__fill {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary-light)) 100%);
}
.timeline-compress__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: 1.1;
  white-space: nowrap;
}
.timeline-compress__row--us .timeline-compress__value {
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .timeline-compress__value {
    font-size: var(--text-2xl);
    text-align: right;
  }
}
/* On dark sections, invert the baseline colours */
.section--dark .timeline-compress__label,
.bg-dark .timeline-compress__label {
  color: rgba(255, 255, 255, 0.65);
}
.section--dark .timeline-compress__value,
.bg-dark .timeline-compress__value {
  color: #fff;
}
.section--dark .timeline-compress__bar,
.bg-dark .timeline-compress__bar {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.section--dark .timeline-compress__row--us .timeline-compress__value,
.bg-dark .timeline-compress__row--us .timeline-compress__value {
  color: var(--color-accent-light, var(--color-accent));
}

/* ======================================
}

/* =============================================
   PROCESS SPINE
   Vertical numbered process with a connector rail.
   More dramatic than .process-grid — single column, no images,
   stacked steps with a vertical line linking the numbered nodes.
   Markup:
     <ol class="process-spine">
       <li class="process-spine__step">
         <div class="process-spine__num">01</div>
         <div class="process-spine__body">
           <h3 class="process-spine__title">Step title</h3>
           <p class="process-spine__text">Step body copy.</p>
         </div>
       </li>
       ...
     </ol>
   ============================================= */
.process-spine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  counter-reset: spine;
}
.process-spine__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-2xl);
}
.process-spine__step:last-child { padding-bottom: 0; }
.process-spine__step::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 64px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border) 100%);
  opacity: 0.3;
}
.process-spine__step:last-child::before { display: none; }
.process-spine__num {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  border-radius: var(--aesthetic-radius);
  position: relative;
  z-index: 2;
}
.process-spine__body {
  padding-top: var(--space-sm);
}
.process-spine__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-sm);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .process-spine__title { font-size: var(--text-h3-desktop); }
}
.process-spine__text {
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
  margin: 0;
}
/* Dark variant */
.section--dark .process-spine__title,
.bg-dark .process-spine__title { color: #fff; }
.section--dark .process-spine__text,
.bg-dark .process-spine__text { color: rgba(255, 255, 255, 0.75); }
.section--dark .process-spine__step::before,
.bg-dark .process-spine__step::before {
  background: linear-gradient(180deg, var(--color-accent-light, var(--color-accent)) 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0.5;
}
.section--dark .process-spine__num,
.bg-dark .process-spine__num {
  background-color: var(--color-accent, var(--color-primary-light));
  color: var(--color-text-heading);
}

/* =============================================
   TREATMENT LIST — vertical menu of services/treatments
   Each item: title + price row, summary, native <details> "Read more" expand.
   Designed for spa/clinic menus where item descriptions vary in length —
   avoids the uniform-card-content problem of pricing-grid.
   Uses native <details>/<summary> so no JS is required.
   ============================================= */
.treatment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.treatment-list__item {
  background-color: var(--color-surface);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  border-radius: var(--aesthetic-radius);
  box-shadow: var(--aesthetic-shadow-card);
  padding: var(--space-lg) var(--space-xl);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.treatment-list__item:hover {
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.12), 0 4px 12px -4px rgba(0,0,0,0.08);
}
.treatment-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.treatment-list__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
/* Dotted leader between title and price — classic spa/restaurant menu treatment.
   Pseudo grows to fill the gap; overflow:hidden on the title clips it cleanly. */
.treatment-list__title::after {
  content: '';
  flex: 1 1 auto;
  border-bottom: 2px dotted #8b847e;
  margin: 0 var(--space-md);
  margin-bottom: 0.4em;
  min-width: 24px;
}
.treatment-list__price {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.treatment-list__duration {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-light);
  margin-left: var(--space-xs);
}
.treatment-list__summary {
  margin: var(--space-sm) 0 0;
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}
.treatment-list__details {
  margin-top: var(--space-md);
}
.treatment-list__details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xs) 0;
  user-select: none;
}
.treatment-list__details > summary::-webkit-details-marker {
  display: none;
}
.treatment-list__details > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: var(--space-xs);
  transition: transform 0.2s ease;
}
.treatment-list__details[open] > summary::after {
  transform: rotate(-135deg);
  margin-bottom: 4px;
}
.treatment-list__details > summary:hover {
  color: var(--color-primary-dark);
}
.treatment-list__body {
  padding-top: var(--space-md);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}
.treatment-list__body > p {
  margin-bottom: var(--space-md);
}
.treatment-list__body > p:last-child {
  margin-bottom: 0;
}
.treatment-list__body ul {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}
.treatment-list__body ul li {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}
.treatment-list__body .btn {
  margin-top: var(--space-md);
}
@media (max-width: 640px) {
  .treatment-list__item {
    padding: var(--space-md) var(--space-lg);
  }
  .treatment-list__head {
    align-items: flex-start;
  }
  .treatment-list__title {
    white-space: normal;
    overflow: visible;
    flex: 1 1 100%;
  }
  /* Hide dotted leader on mobile — titles wrap freely instead. */
  .treatment-list__title::after {
    display: none;
  }
  .treatment-list__price {
    font-size: var(--text-md);
  }
}

/* --- Treatment-list image variants (v1.5.2) ---
   Two visual variants of the same component: square thumbnail on the left,
   or a circular thumbnail. Both use the same markup:
     <div class="treatment-list__item treatment-list__item--image-square">
       <div class="treatment-list__image"><img src="..." alt="..."></div>
       <div class="treatment-list__content"> ... existing __head / __summary / __details ... </div>
     </div>
   On mobile both variants stack the image above the content. */

.treatment-list__item--image-square,
.treatment-list__item--image-circle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.treatment-list__image {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.treatment-list__item--image-square .treatment-list__image {
  border-radius: calc(var(--aesthetic-radius) * 0.6);
}

.treatment-list__item--image-circle .treatment-list__image {
  border-radius: 50%;
}

.treatment-list__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.treatment-list__content {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .treatment-list__item--image-square,
  .treatment-list__item--image-circle {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }
  .treatment-list__image {
    width: 100%;
    height: 200px;
  }
  .treatment-list__item--image-circle .treatment-list__image {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
}

/* ============================================
   CONTENT LISTS (bullets restored for bare <ul>/<ol> inside .section)
   ============================================ */
/* base.css strips list-style globally so nav / footer / mobile-menu lists
   render cleanly. Page content inside <section> is the opposite case —
   bare <ul>/<ol> with no class are content lists (e.g. AI-generated
   bullet lists from the editor) and need disc/decimal markers. */
.section ul:not([class]),
.section ol:not([class]) {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}
.section ol:not([class]) {
  list-style: decimal;
}
.section ul:not([class]) li,
.section ol:not([class]) li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}
/* v1.7.13 - .service-detail draws its own dot with ::before, but the rules
   above out-rank .service-detail ul (0,2,1 vs 0,1,1), so a plain list in a
   .service-detail column got the browser's disc beside that dot: a double
   bullet in every post body (canonburyclinic.co.uk, 2026-10-01). Hand those
   lists back to the component. Added as an override rather than by narrowing
   the selectors above, because a selector that disappears from this file is
   copied into each site's theme.css by the update's orphan-CSS migration,
   which would bring the double bullet straight back. */
.section .service-detail ul:not([class]) {
  list-style: none;
  padding-left: 0;
}
.section .service-detail ul:not([class]) li {
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-normal);
}

/* ============================================
   CONTENT LINKS (visible affordance for bare inline links)
   ============================================ */
/* base.css resets `a { color: inherit; text-decoration: none }` so nav,
   buttons and cards (all <a> tags) don't go blue+underlined. The trade-off
   is that a plain <a> dropped into body prose — by a client edit or the
   editor AI — inherits the surrounding text colour and has NO underline, so
   it's indistinguishable from normal text (fails WCAG: no colour AND no
   underline). This restores the link affordance for genuine inline content
   links only: bare <a> (no class) inside a paragraph or a classless list
   item within <main>. Classed links (.btn, .nav__link, .breadcrumbs__item a,
   card links, .skip-link, etc.) keep their own styling because :not([class])
   skips them, and nav/footer sit outside <main>. Matches the .link /
   .blog-post__body a / .privacy-content a convention (primary + underline). */
main p a:not([class]),
main li:not([class]) a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
main p a:not([class]):hover,
main li:not([class]) a:not([class]):hover {
  color: var(--color-primary-dark);
}

/* =============================================
   SHOP (Shop upgrade feature)
   Product cards, price display, product detail layout, option selects,
   quantity stepper, category filter pills, cart fab + drawer (both
   DOM-injected by js/shop.js), checkout return pages.
   Markup contracts are generated by the editor (ShopHtmlBuilder) and
   pinned by api/tests/ShopHtmlBuilderTest.php — keep class names stable.
   ============================================= */

/* Product card — whole card is an <a> to the product page */
.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--aesthetic-radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--aesthetic-shadow-card);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.product-card:hover .product-card__image {
  transform: scale(1.04);
}

.product-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-alt);
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

.product-card__image-placeholder--detail {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
}

.product-card__body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

.product-card__category {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0;
}

.product-card__title {
  font-size: var(--text-lg);
  margin-bottom: 0;
  color: var(--color-text-heading);
}

/* Price display (listing card + detail page) */
.product-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 0;
  margin-top: auto; /* pins price to the card bottom in the grid */
}

.product-price__amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.product-price__compare {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.product-price--sale .product-price__amount {
  color: var(--color-accent);
}

/* Detail page: bigger price + breathing room under the H1 */
.product-layout__info .product-price {
  margin: var(--space-md) 0 var(--space-lg);
}

.product-layout__info .product-price__amount {
  font-size: var(--text-3xl);
}

/* Product detail layout — gallery left, info right */
.product-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 860px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Product gallery: 2-up grid, first image is the full-width hero */
.gallery--product,
.gallery--product .gallery__item {
  cursor: pointer;
}

/* Appended after the .gallery media queries, so this 2-col override wins
   at every breakpoint without needing !important. */
.gallery--product {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .gallery--product {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .gallery--product {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery--product .gallery__item:first-child {
  grid-column: 1 / -1;
}

/* Option selects */
.product-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.product-option__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.product-option .form__select {
  max-width: 280px;
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--aesthetic-radius);
  overflow: hidden;
  background-color: var(--color-surface);
}

.qty-stepper__btn {
  width: 40px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.qty-stepper__btn:hover {
  background-color: var(--color-bg-alt);
}

.qty-stepper__input {
  width: 3.2ch;
  border: none;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: var(--space-sm) 0;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Buy row */
.product-buy {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.product-soldout {
  background-color: var(--color-bg-alt);
  color: var(--color-text-light);
}

.product-description {
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
}

/* Category filter pills (mirrors the blog filter UX, separate classes) */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.shop-filter {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--aesthetic-radius-pill);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.shop-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.shop-filter--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* :hover (0,2,0) outranks --active (0,1,0) — without this, hovering the
   active pill paints primary text on a primary background (invisible). */
.shop-filter--active:hover {
  color: var(--color-text-inverse);
}

.shop-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-2xl) 0;
}

/* Checkout return pages (shop/success.html, shop/cancelled.html) */
.shop-result {
  max-width: 560px;
  text-align: center;
}

.shop-result h1 {
  margin-bottom: var(--space-md);
}

.shop-result p {
  margin-bottom: var(--space-xl);
  color: var(--color-text-light);
}

/* Nav basket button (v1.6.1, replaces the v1.6.0 .cart-fab).
   Injected by js/shop.js just before .nav__toggle, so it sits at the right
   end of the desktop nav and beside the hamburger on mobile. Icon is always
   visible on shop-enabled sites; the count pill hides at 0. */
.nav__basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  margin-left: var(--space-sm);
  border: none;
  background: transparent;
  color: var(--color-text-heading);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.nav__basket:hover {
  color: var(--color-primary);
}

.nav__basket svg {
  width: 22px;
  height: 22px;
}

/* Keep the icon legible on transparent/dark nav variants */
.nav--transparent .nav__basket,
.nav--transparent-dark .nav__basket {
  color: var(--color-text-inverse);
}

.nav__basket-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--aesthetic-radius-pill);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__basket-count[hidden] {
  display: none;
}

/* Fallback when a page has no standard nav: float like the old fab */
.nav__basket--floating {
  position: fixed;
  bottom: var(--space-xl);
  left: var(--space-xl);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  z-index: 1100;
  margin: 0;
}

.nav__basket--floating:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* Basket drawer (injected by js/shop.js) */
.cart-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  z-index: 1190;
}

.cart-drawer__overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: 1200;
  display: flex;
  flex-direction: column;
}

.cart-drawer--open {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
}

.cart-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin: 0;
}

.cart-drawer__close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-light);
  padding: var(--space-xs);
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
}

.cart-drawer__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.cart-drawer__item-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.cart-drawer__item-options {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.cart-drawer__item-price {
  text-align: right;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.cart-drawer__item-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.cart-drawer__item-controls .qty-stepper__btn {
  width: 32px;
}

.cart-drawer__item-controls .qty-stepper__input {
  padding: var(--space-xs) 0;
}

.cart-drawer__item-remove {
  border: none;
  background: transparent;
  color: var(--color-text-light);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
}

.cart-drawer__item-remove:hover {
  color: var(--color-accent);
}

.cart-drawer__empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-2xl) 0;
}

.cart-drawer__footer {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--color-border-light);
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-xs);
}

.cart-drawer__note {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.cart-drawer__error {
  font-size: var(--text-sm);
  color: #b3261e;
  margin-bottom: var(--space-sm);
}

.cart-drawer__checkout {
  width: 100%;
}

/* =============================================
   BOOKING (Booking upgrade feature)
   Four-step booking widget (service cards, month calendar, time-slot
   pills, details form — all DOM-injected by js/booking.js into
   [data-booking-widget]), result pages, cancel page.
   Markup contracts are generated by the editor (BookingHtmlBuilder +
   js/booking.js) and pinned by api/tests/BookingHtmlBuilderTest.php —
   keep class names stable.
   ============================================= */

.booking-widget {
  max-width: 720px;
  margin: 0 auto;
}

/* Step indicator */
.booking-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2xl);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 1.7.24: four steps at 16px fit a phone with less gap and tracking; wrap rather than overflow */
@media (max-width: 479px) {
  .booking-steps { gap: var(--space-sm); letter-spacing: 0.02em; flex-wrap: wrap; }
}

.booking-steps__item {
  color: var(--color-text-light);
  opacity: 0.55;
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid transparent;
}

.booking-steps__item--active {
  color: var(--color-accent);
  opacity: 1;
  border-bottom-color: var(--color-accent);
}

.booking-steps__item--done {
  color: var(--color-text);
  opacity: 0.8;
}

/* aria-live region — visually hidden, read by screen readers */
.booking-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.booking-heading {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-lg);
}

.booking-heading__hint {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  margin-top: var(--space-2xs);
}

.booking-back {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  padding: 0;
  margin-bottom: var(--space-md);
}

.booking-back:hover {
  text-decoration: underline;
}

/* Step 1: service cards */
.booking-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.booking-service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
  background-color: var(--color-surface);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  border-radius: var(--aesthetic-radius);
  box-shadow: var(--aesthetic-shadow-card);
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.booking-service-card:hover,
.booking-service-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.booking-service-card__name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  font-size: var(--text-lg);
}

.booking-service-card__desc {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

.booking-service-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

.booking-service-card__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  font-size: var(--text-sm);
}

.booking-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  /* Solid accent + white: accent-on-accent-light was unreadable on warm
     palettes (v1.7.1 contrast fix). */
  color: #fff;
  background-color: var(--color-accent);
  border-radius: var(--aesthetic-radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

/* Step 2: month calendar */
.booking-cal {
  background-color: var(--color-surface);
  border: var(--aesthetic-border-width) solid var(--color-border-light);
  border-radius: var(--aesthetic-radius);
  box-shadow: var(--aesthetic-shadow-card);
  padding: var(--space-lg);
}

.booking-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.booking-cal__month {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.booking-cal__nav {
  background: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--text-lg);
  transition: border-color var(--transition-base), color var(--transition-base);
}

.booking-cal__nav:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.booking-cal__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.booking-cal__dow {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-2xs);
}

.booking-cal__day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: none;
  background: none;
  color: var(--color-text);
}

.booking-cal__day--muted {
  color: var(--color-text-light);
  opacity: 0.35;
}

.booking-cal__day--available {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-bg-alt);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.booking-cal__day--available:hover,
.booking-cal__day--available:focus-visible {
  background-color: var(--color-accent);
  color: #fff;
}

.booking-cal__day--available:hover .booking-cal__dot,
.booking-cal__day--available:focus-visible .booking-cal__dot {
  background-color: #fff;
}

.booking-cal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
  margin-top: 2px;
}

.booking-empty-month {
  text-align: center;
  color: var(--color-text-light);
  margin-top: var(--space-lg);
}

/* Step 3: time slots */
.booking-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--space-sm);
}

.booking-slot {
  min-height: 44px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--aesthetic-radius-pill);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.booking-slot:hover,
.booking-slot:focus-visible {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Step 4: summary + form */
/* The widget form carries .form__group/.form__label but no .form parent
   (whose column gap normally provides the rhythm), so it sets its own:
   breathing room under each label and between fields (v1.7.1). */
.booking-form .form__group {
  margin-bottom: var(--space-lg);
}

.booking-form .form__label {
  display: block;
  margin-bottom: var(--space-xs);
}

.booking-summary {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-relaxed);
}

.booking-summary__price {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: var(--space-2xs);
}

/* Custom tick-box question (e.g. a required "I agree to the terms") —
   the label is the whole tap target (v1.7.2). */
.booking-form .booking-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.booking-form .booking-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.booking-form .booking-submit {
  width: 100%;
  margin-top: var(--space-sm);
}

/* Honeypot — hidden from humans, present for bots */
.booking-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-policy-note {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin: var(--space-sm) 0;
  line-height: var(--line-height-relaxed);
}

/* States */
.booking-loading {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-2xl) 0;
}

.booking-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  margin: 0 auto var(--space-sm);
  animation: booking-spin 0.8s linear infinite;
}

@keyframes booking-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .booking-loading__spinner { animation: none; }
  .booking-service-card,
  .booking-service-card:hover,
  .booking-service-card:focus-visible { transform: none; }
}

.booking-alert {
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.booking-alert--error {
  background-color: #fdecea;
  color: #b3261e;
}

.booking-alert--error p {
  color: inherit;
  margin-bottom: var(--space-sm);
}

.booking-alert--error p:last-child {
  margin-bottom: 0;
}

.booking-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-2xl) 0;
}

.booking-confirmed {
  text-align: center;
}

.booking-confirmed .booking-summary {
  display: inline-block;
}

/* Result + cancel pages (booking/success, cancelled, cancel) */
.booking-result {
  max-width: 560px;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}

.booking-result h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.booking-result p {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.booking-result .booking-summary {
  text-align: left;
}

/* Manage page (cancel.html): action buttons + reschedule day list */
.booking-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.booking-cancel-link {
  /* de-emphasise destructive action next to the primary "Change time" */
  opacity: 0.85;
}

.booking-resched-day {
  margin-bottom: var(--space-lg);
}

.booking-resched-day h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  margin: 0 0 var(--space-sm);
}

/* Static policy + noscript fallbacks */
.booking-policy {
  max-width: 720px;
}

.booking-noscript ul {
  list-style: disc;
  padding-left: var(--space-xl);
  margin: var(--space-md) 0;
}

@media (min-width: 768px) {
  .booking-services {
    grid-template-columns: repeat(2, 1fr);
  }
  .booking-cal {
    padding: var(--space-xl);
  }
}

/* =====================================================================
   SIGNATURE COMPONENTS (added 2026-10-07)
   Seven patterns the originals we are asked to match use and the library
   lacked: day schedule, warm stat strip, video testimonial carousel, press
   bar, arched image with proof badge, numbered service list, editorial blog
   cards. Additive only: no existing selector is changed. Tokens only, so every
   palette and aesthetic dial applies. Documented in COMPONENTS.md
   ("Signature components") with a demo block in theme-preview.html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DAY SCHEDULE - hour-by-hour cards ("a day at the retreat", "a class day").
   <ol class="day-schedule"><li class="day-schedule__item">
     <span class="day-schedule__time">07:00</span>
     <div class="day-schedule__card"><h3 class="day-schedule__title">..</h3>
     <p class="day-schedule__text">..</p></div></li>...</ol>
   Default is a vertical rail (time left, card right). --grid turns it into a
   grid of cards with the time as a chip on top.
   --------------------------------------------------------------------- */
.day-schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  position: relative;
}

.day-schedule::before {
  content: "";
  position: absolute;
  top: var(--space-md);
  bottom: var(--space-md);
  left: calc(3.5rem + var(--space-sm) / 2);
  width: 1px;
  background: var(--color-border);
}

.day-schedule__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  position: relative;
}

.day-schedule__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-md) + 0.45em);
  left: calc(3.5rem + var(--space-sm) / 2 - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg);
}

.day-schedule__time {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-primary);
  padding-top: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.day-schedule__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--aesthetic-radius, var(--radius-lg));
  box-shadow: var(--aesthetic-shadow-card, var(--shadow-sm));
  padding: var(--space-md);
}

.day-schedule__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-xs);
}

.day-schedule__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* grid of cards, time as a chip on top */
.day-schedule--grid::before,
.day-schedule--grid .day-schedule__item::before {
  display: none;
}

.day-schedule--grid .day-schedule__item {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 0;
}

.day-schedule--grid .day-schedule__time {
  justify-self: start;
  padding: var(--space-xs) var(--space-md);
  margin-bottom: calc(var(--space-sm) * -1);
  position: relative;
  z-index: 1;
  margin-left: var(--space-md);
  font-size: var(--text-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
}

.day-schedule--grid .day-schedule__card {
  padding-top: calc(var(--space-md) + var(--space-sm));
}

@media (min-width: 768px) {
  .day-schedule__item {
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-lg);
  }
  .day-schedule::before {
    left: calc(5.5rem + var(--space-lg) / 2);
  }
  .day-schedule__item::before {
    left: calc(5.5rem + var(--space-lg) / 2 - 4px);
  }
  .day-schedule__card {
    padding: var(--space-lg) var(--space-xl);
  }
  .day-schedule__time {
    padding-top: var(--space-lg);
    font-size: var(--text-xl);
  }
  .day-schedule__item::before {
    top: calc(var(--space-lg) + 0.55em);
  }
  .day-schedule--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .day-schedule--grid .day-schedule__item {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .day-schedule--grid .day-schedule__time {
    padding-top: var(--space-xs);
    font-size: var(--text-sm);
  }
}

@media (min-width: 1024px) {
  .day-schedule--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------------
   STAT STRIP, WARM - a quiet tinted strip of big numbers with hairline
   dividers. Use on .stats: <div class="stats stats--warm"> with .stat
   children (the counter animation and __sub work as usual).
   --------------------------------------------------------------------- */
.stats--warm {
  gap: 1px;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--aesthetic-radius, var(--radius-lg));
  overflow: hidden;
}

.stats--warm .stat {
  background: var(--color-bg-alt);
  padding: var(--space-xl) var(--space-md);
}

.stats--warm .stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.stats--warm .stat__number {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stats--warm .stat__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.stats--warm .stat__sub {
  margin-top: var(--space-xs);
}

@media (min-width: 768px) {
  .stats--warm {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .stats--warm .stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .stats--warm .stat {
    padding: var(--space-2xl) var(--space-md);
  }
}

/* ---------------------------------------------------------------------
   VIDEO TESTIMONIAL CAROUSEL - a swipeable row of portrait video cards.
   No script: native scroll-snap, native <video controls>.
   <div class="video-carousel" role="region" aria-label="Video testimonials">
     <figure class="video-carousel__item">
       <div class="video-carousel__media"><video controls preload="none"
            poster="images/t1.jpg"><source src="videos/t1.mp4"></video></div>
       <blockquote class="video-carousel__quote">..</blockquote>
       <figcaption><span class="video-carousel__name">..</span>
                   <span class="video-carousel__role">..</span></figcaption>
     </figure>...</div>
   A poster that links out instead of playing inline: put an <a> with an <img>
   and <span class="video-carousel__play"></span> inside __media.
   --------------------------------------------------------------------- */
.video-carousel {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-xs) 0 var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.video-carousel__item {
  flex: 0 0 78%;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.video-carousel__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--aesthetic-radius, var(--radius-lg));
  background: var(--color-bg-dark);
}

.video-carousel__media video,
.video-carousel__media img,
.video-carousel__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video-carousel__media a {
  position: absolute;
  inset: 0;
  display: block;
}

.video-carousel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  transition: transform var(--transition-base);
}

.video-carousel__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent var(--color-primary);
}

.video-carousel__media a:hover .video-carousel__play {
  transform: scale(1.08);
}

.video-carousel__quote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.video-carousel__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.video-carousel__role {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .video-carousel__item {
    flex-basis: calc((100% - var(--space-lg)) / 2);
  }
}

@media (min-width: 1024px) {
  .video-carousel__item {
    flex-basis: calc((100% - 2 * var(--space-lg)) / 3);
  }
}

/* ---------------------------------------------------------------------
   PRESS BAR - "As featured in" strip with an optional one-line quote per
   outlet. Sits directly under the hero. Outlet is text or a logo <img>.
   <div class="press-bar"><div class="container">
     <p class="press-bar__label">As featured in</p>
     <ul class="press-bar__list"><li class="press-bar__item">
       <span class="press-bar__outlet">Vogue</span>
       <q class="press-bar__quote">..</q></li>...</ul></div></div>
   Only outlets the client has actually been featured in (Content Integrity).
   --------------------------------------------------------------------- */
.press-bar {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-lg) 0;
}

.press-bar__label {
  margin: 0 0 var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-light);
}

.press-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}

.press-bar__item {
  text-align: center;
}

/* An odd last outlet takes the whole row on phones, centred, not alone on the left. */
.press-bar__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.press-bar__outlet {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-heading);
  opacity: 0.85;
}

.press-bar__outlet img {
  display: inline-block;
  max-height: 28px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
}

.press-bar__quote {
  display: block;
  quotes: none;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: var(--line-height-tight);
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .press-bar {
    padding: var(--space-xl) 0;
  }
  .press-bar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg) var(--space-3xl);
  }
  .press-bar__item {
    max-width: 14rem;
  }
}

/* ---------------------------------------------------------------------
   ARCH MEDIA - a photo cropped to an arch, with a floating proof badge
   (rating, years, number of clients). Use in a two-column band beside text.
   <div class="arch-media"><div class="arch-media__img"><img ...></div>
     <div class="arch-media__badge"><span class="arch-media__badge-value">4.9</span>
     <span class="arch-media__badge-label">120 five-star reviews</span></div></div>
   --right moves the badge to the right edge. The badge must state a fact the
   client has supplied (Content Integrity), never an invented rating.
   --------------------------------------------------------------------- */
.arch-media {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.arch-media__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: var(--color-bg-alt);
}

.arch-media__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch-media__badge {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 8.5rem;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--aesthetic-radius, var(--radius-lg));
  box-shadow: var(--shadow-lg);
}

.arch-media__badge-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-primary);
}

.arch-media__badge-label {
  font-size: var(--text-xs);
  line-height: var(--line-height-tight);
  color: var(--color-text-light);
}

.arch-media--right .arch-media__badge {
  left: auto;
  right: var(--space-sm);
}

@media (min-width: 768px) {
  .arch-media__badge {
    left: calc(var(--space-xl) * -1);
  }
  .arch-media--right .arch-media__badge {
    left: auto;
    right: calc(var(--space-xl) * -1);
  }
}

/* ---------------------------------------------------------------------
   SERVICE LIST, NUMBERED - hairline-divided rows: number, title + line,
   arrow. Replaces a grid of identical icon cards when the offer is a list.
   <ol class="service-list service-list--numbered"><li class="service-list__item">
     <a class="service-list__link" href="..">
       <div class="service-list__body"><h3 class="service-list__title">..</h3>
       <p class="service-list__text">..</p></div>
       <span class="service-list__arrow" aria-hidden="true">&rarr;</span></a></li>
   The number is generated by CSS (01, 02 ...), never typed. Without
   --numbered it is the same list with no numbers.
   --------------------------------------------------------------------- */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: service;
  border-top: 1px solid var(--color-border);
}

.service-list__item {
  counter-increment: service;
  border-bottom: 1px solid var(--color-border);
}

.service-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-lg) 0;
  color: inherit;
  text-decoration: none;
  transition: padding var(--transition-base), background-color var(--transition-base);
}

.service-list--numbered .service-list__link {
  grid-template-columns: auto 1fr auto;
}

.service-list--numbered .service-list__link::before {
  content: counter(service, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1;
  color: var(--color-accent);
  min-width: 2.25ch;
  font-variant-numeric: tabular-nums;
}

.service-list__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-xs);
}

.service-list__text {
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
  margin: 0;
  max-width: 46rem;
}

.service-list__arrow {
  font-size: var(--text-xl);
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

a.service-list__link:hover {
  padding-left: var(--space-sm);
}

a.service-list__link:hover .service-list__arrow {
  transform: translateX(6px);
}

a.service-list__link:hover .service-list__title {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .service-list__link {
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
  }
  .service-list__title {
    font-size: var(--text-h3-desktop);
  }
}

/* ---------------------------------------------------------------------
   EDITORIAL BLOG CARDS - magazine style: no card chrome, a category and
   read-time meta row, a larger headline, hairline spacing. Opt in with
   .blog-grid--editorial on the grid and .blog-card--editorial on each card.
   .blog-card--feature on the FIRST card makes it a wide image-left lead
   story on desktop. New slots: __meta (flex row) and __read-time.
   <article class="blog-card blog-card--editorial">
     <div class="blog-card__image"><img ...></div>
     <div class="blog-card__body">
       <div class="blog-card__meta"><span class="blog-card__category">..</span>
         <span class="blog-card__read-time">6 min read</span></div>
       <h3 class="blog-card__title"><a href="..">..</a></h3>
       <p class="blog-card__excerpt">..</p>
       <a class="blog-card__link" href="..">Read more</a></div></article>
   --------------------------------------------------------------------- */
.blog-grid--editorial {
  gap: var(--space-2xl) var(--space-xl);
}

.blog-card--editorial {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.blog-card--editorial:hover {
  box-shadow: none;
  transform: none;
}

.blog-card--editorial .blog-card__image {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--aesthetic-radius, var(--radius-lg));
}

.blog-card--editorial .blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card--editorial:hover .blog-card__image img {
  transform: scale(1.04);
}

.blog-card--editorial .blog-card__body {
  padding: var(--space-md) 0 0;
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.blog-card__meta .blog-card__category {
  display: inline;
  margin: 0;
}

.blog-card__read-time::before {
  content: "\00B7";
  margin-right: var(--space-sm);
}

.blog-card--editorial .blog-card__title {
  font-size: var(--text-xl);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid--editorial > .blog-card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .blog-grid--editorial > .blog-card:last-child:nth-child(3n+1) {
    grid-column: auto;
  }
  .blog-grid--editorial > .blog-card--feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .blog-grid--editorial > .blog-card--feature:last-child {
    grid-column: 1 / -1;
  }
  .blog-grid--editorial > .blog-card--feature .blog-card__image {
    aspect-ratio: 16 / 10;
  }
  .blog-grid--editorial > .blog-card--feature .blog-card__body {
    padding: 0;
  }
  .blog-grid--editorial > .blog-card--feature .blog-card__title {
    font-size: var(--text-h3-desktop);
  }
}

/* =============================================
   PHOTO BAND (v1.7.19, 2026-10-18)
   One wide photo with an optional caption, as its own band.
   Markup: section.section.photo-band > .container > figure.photo-band__figure
           > img.photo-band__img + figcaption.photo-band__caption (optional)
   --full runs the photo edge to edge (no container width, no rounding).
   ============================================= */
.photo-band__figure {
  margin: 0;
}

.photo-band__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.photo-band__caption {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
}

.photo-band--full {
  padding-top: 0;
  padding-bottom: 0;
}

.photo-band--full .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.photo-band--full .photo-band__img {
  border-radius: 0;
}

.photo-band--full .photo-band__caption {
  padding: 0 var(--space-lg) var(--space-md);
}

@media (max-width: 767px) {
  .photo-band__img {
    aspect-ratio: 4 / 3;
  }
}

/* =============================================
   TEXT PHOTO (v1.7.22, 2026-10-22)
   One photo inside a column of text, between paragraphs: as wide as the
   column, its own shape, rounded like the library's other photos. A very
   tall photo is cut to 600px, keeping its upper part, where faces usually
   are. For one wide photo as a band of its own, use .photo-band.
   Markup: img.text-photo, a child of the text column.
   ============================================= */
.text-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: 50% 30%;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-lg);
}

.text-photo:first-child {
  margin-top: 0;
}

.text-photo:last-child {
  margin-bottom: 0;
}

/* =============================================
   COLOUR BANDS (v1.7.20, 2026-10-18)
   Put a whole band (.section, .hero, .page-header) on one of four brand
   colours: class="section band band--2". Each slot defaults to a palette
   colour (1 primary, 2 secondary, 3 accent, 4 bg-dark); a site retargets a
   slot in its theme.css :root with --band-N-bg and sets the text colour that
   reads on it with --band-N-text (white by default: give a light colour a
   dark ink so its text stays at 4.5:1 or better). Cards and steps inside a
   band keep their own surface and text colours; only the band's own heading,
   label, intro, quote and hero words take the band's text colour.
   First used by figspeech.co.uk (her orange, coral, lime and teal bands).
   ============================================= */
.band--1 { --band-bg: var(--band-1-bg, var(--color-primary));   --band-text: var(--band-1-text, var(--color-text-inverse)); }
.band--2 { --band-bg: var(--band-2-bg, var(--color-secondary)); --band-text: var(--band-2-text, var(--color-text-inverse)); }
.band--3 { --band-bg: var(--band-3-bg, var(--color-accent));    --band-text: var(--band-3-text, var(--color-text-inverse)); }
.band--4 { --band-bg: var(--band-4-bg, var(--color-bg-dark));   --band-text: var(--band-4-text, var(--color-text-inverse)); }

.band {
  display: flow-root; /* holds its children's margins, so a band never leaks a white strip */
  background-color: var(--band-bg);
  color: var(--band-text);
}

.band > .container > :is(h1, h2, h3, p, .section-label, .section-subtitle),
.band .hero__heading,
.band .hero__text,
.band .hero__label,
.band .blockquote__text,
.band .blockquote__cite,
.band .blockquote--pull::before,
.band .split__text > :is(h2, h3, p),
.band .split__content > :is(h2, h3, p) {
  color: inherit;
}

/* The outline button takes the band's text colour, so it reads on any band. */
.band .btn--secondary:not(.card .btn, .process-step .btn) {
  color: var(--band-text);
  border-color: var(--band-text);
}

.band .btn--secondary:not(.card .btn, .process-step .btn):hover {
  background-color: var(--band-text);
  color: var(--band-bg);
}

/* A band is its own background. These two mirror the alternation safety net
   (GOLDEN RULE) one class stronger, so the net never repaints a band and never
   tints the plain section after one. Overrides, not an edit to the net's own
   selector, so no site's copy of the net changes. */
main > .section:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner)
  + .section.band:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--band-bg);
}

main > .section.band:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner)
  + .section:not(.band):not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--color-bg);
}

/* Words in a band's text columns (v1.7.23, 2026-10-23). Headings, paragraphs and ticked lists that sit in a
   text column inside a band (including what a client adds in the Page Editor or the AI Site Editor) take the
   band's text colour, like the band's own heading; before this only words straight in .container or a split
   column did, so words in a .text-block or intro column stayed dark on a dark band. A quote on its own panel
   (.blockquote without --pull) keeps the panel's colours, so it never turns light-on-light; a pull quote has
   no panel and still takes the band's colour. Cards and steps keep their own colours, as before. */
.band :is(.container, .container--narrow, .text-center, .text-left, .text-block, .text-block--center, .intro__text,
  .service-detail, .split__text, .split__content, .story-split__text, .story-text__header, .story-text__content,
  .video-split__header, .video-split__content, .about-split-third__text, .legal-content, div:not([class]))
  > :is(h2, h3, p):not(.card *, .process-step *),
.band :is(.container, .container--narrow, .text-center, .text-left, .text-block, .text-block--center, .intro__text,
  .service-detail, .split__text, .split__content, .story-split__text, .story-text__header, .story-text__content,
  .video-split__header, .video-split__content, .about-split-third__text, .legal-content, div:not([class]))
  > .checklist:not(.card *, .process-step *) > .checklist__item {
  color: inherit;
}

.band .blockquote:not(.blockquote--pull) .blockquote__text {
  color: var(--color-text);
}

.band .blockquote:not(.blockquote--pull) .blockquote__cite {
  color: var(--color-text-heading);
}

/* =============================================
   FULL-COLOUR LOGO ROW (v1.7.20, 2026-10-18)
   .trust-bar greys and fades its logos; add .trust-bar--colour to show them
   in their own colours at full strength (registration and membership bodies,
   whose small print must stay readable). Markup: div.trust-bar.trust-bar--colour
   > img.trust-bar__logo. First used by figspeech.co.uk (HCPC, RCSLT, ASLTIP).
   ============================================= */
.trust-bar--colour .trust-bar__logo,
.trust-bar--colour .trust-bar__logo:hover {
  opacity: 1;
  filter: none;
}

/* =============================================
   BOLD OPTIONS (v1.7.20, 2026-10-18)
   Opt-in classes for bright, child-friendly brands. Nothing changes on a
   site until it uses one. Token hooks added in the same release (each
   falls back to the old value): --btn-accent-text / --btn-accent-hover-text
   (base.css), --nav-name-color, --nav-title-size, --nav-title-transform,
   --nav-title-tracking, --font-signature, --signature-style,
   --signature-size, --hero-actions-justify, --blockquote-rule-color,
   --nav-title-phone-display, --btn-radius (base.css), --page-header-padding,
   --page-header-padding-desktop, --nav-two-tier-padding, --nav-top-padding,
   --nav-name-size, --form-check-size, --form-check-accent. First used by figspeech.co.uk.
   ============================================= */

/* Hero tick pills, bold: white pills, 16px words, green ticks. */
.hero__ticks--bold li {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  background-color: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  padding: 6px var(--space-md);
}

.hero__ticks--bold svg {
  width: 18px;
  height: 18px;
  color: var(--color-success);
  stroke-width: 3;
}

/* Card icon, bold: a larger solid disc in the primary colour, white icon. */
.card .card__icon--bold {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.card .card__icon--bold svg {
  width: 32px;
  height: 32px;
}

/* Pull quote, bold: upright and heavy, for display fonts with no italic. */
.blockquote--bold .blockquote__text {
  font-style: normal;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  line-height: var(--line-height-tight);
}

@media (min-width: 768px) {
  .blockquote--bold .blockquote__text {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 767px) {
  .blockquote--pull.blockquote--bold {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Hero lead line: the subtitle one step up from the hero text, in bold. */
.hero__text--lead {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

/* Bold quote mark: a short rule instead of the quote glyph, which a rounded
   display font draws small enough to read as a stray character. */
.blockquote--pull.blockquote--bold::before {
  content: '';
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--blockquote-rule-color, currentColor);
  margin: 0 auto var(--space-lg);
}

/* Token hook: the tagline under the brand name on small phones. A logo, a
   name and a two-line tagline are taller than the 72px bar; a site can set
   --nav-title-phone-display: none to keep the bar clean (default unchanged). */
@media (max-width: 479px) {
  .nav__title {
    display: var(--nav-title-phone-display, inline);
  }
}

/* Square image box: shows a square picture (a drawing, a logo, a product)
   whole instead of cropping it to the default 4:3. */
.card--image-top .card__image-wrap--square {
  aspect-ratio: 1 / 1;
}

/* Footer logo: the brand mark above the footer name. */
.footer__logo {
  display: block;
  width: auto;
  height: 72px; /* fixed, so the space is kept before a lazy logo loads */
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
}

/* =============================================
   PAGE FRAME (v1.7.25)
   The whole page as a centred box over a full-page photograph, the look of
   many older client sites moving off Elementor (woodlandscounselling.co.uk).
   Put the class on <body>; the photo is a token, set in the site's theme.css:
     :root { --page-frame-image: url('../images/background.jpg'); }
   Optional: --page-frame-width (default 1180px), --page-frame-gap (default
   --space-lg), --page-frame-position (default top center), --page-frame-bg
   (the colour behind the photo, default --color-bg-dark).
   From 1024px only: on phones and tablets the page is full width as usual,
   because a frame there only steals width.
   ============================================= */
@media (min-width: 1024px) {
  .page-frame {
    background-color: var(--page-frame-bg, var(--color-bg-dark));
    background-image: var(--page-frame-image, none);
    background-size: cover;
    background-position: var(--page-frame-position, top center);
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: var(--page-frame-gap, var(--space-lg));
  }

  .page-frame > .announcement-bar,
  .page-frame > .nav,
  .page-frame > main,
  .page-frame > .footer {
    max-width: var(--page-frame-width, 1180px);
    margin-left: auto;
    margin-right: auto;
  }

  .page-frame > .nav,
  .page-frame > main {
    background-color: var(--color-bg);
  }

  .page-frame > .footer {
    margin-bottom: var(--page-frame-gap, var(--space-lg));
  }

  /* The fixed scroll bar stays the width of the box, not of the window */
  .page-frame > .nav-scroll {
    max-width: var(--page-frame-width, 1180px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================
   TWO-TIER MENU BAR COLOUR (v1.7.25, token hook)
   The menu row of .nav--two-tier in its own colour, with the brand row above
   it left as it is (woodlandscounselling.co.uk: white brand row, sage menu
   bar). Opt in from the site's theme.css :root:
     --nav-bar-bg: #93A37E;     the bar
     --nav-bar-text: #FFFFFF;   its menu words (keep 4.5:1 on the bar)
   Desktop only (1100px+), where the bar is a row of its own; below that the
   row holds only the menu button. Dropdown panels keep their own colours.
   ============================================= */
@media (min-width: 1100px) {
  .nav--two-tier .nav__bottom {
    background-color: var(--nav-bar-bg, transparent);
  }

  .nav--two-tier .nav__bottom .nav__links > .nav__link,
  .nav--two-tier .nav__bottom .nav__links > .nav__dropdown > .nav__link {
    color: var(--nav-bar-text, var(--color-text));
  }

  .nav--two-tier .nav__bottom .nav__links > .nav__link::after,
  .nav--two-tier .nav__bottom .nav__links > .nav__dropdown > .nav__link::after {
    background-color: var(--nav-bar-text, var(--color-primary));
  }
}

/* =============================================
   TOKEN HOOKS (v1.7.25), set in a site's theme.css :root; each falls back to
   the old value, so a site changes only when it opts in.
     --hero-slope-panel        the light slope hero's angled panel (default a
                               12% tint of the primary; a pale band colour
                               such as var(--color-bg-alt) when the primary is
                               a deep red that would tint it pink)
     --trust-bar-logo-height   logo height in .trust-bar (default 52px, 60px
                               from 768px); raise it when a membership logo's
                               small print must stay readable
   ============================================= */
.hero--slope-light .hero__inner::before {
  background: var(--hero-slope-panel, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)));
}

.trust-bar__logo {
  height: var(--trust-bar-logo-height, 52px);
}

@media (min-width: 768px) {
  .trust-bar__logo {
    height: var(--trust-bar-logo-height, 60px);
  }
}

/* The handwritten sign-off also in the homepage welcome band (v1.7.25):
   .intro__text .signature, same look as .split__text .signature */
.intro__text .signature {
  font-family: var(--font-signature, var(--font-heading));
  font-size: var(--signature-size, var(--text-xl));
  font-style: var(--signature-style, italic);
  color: var(--color-text-heading);
  margin-top: var(--space-lg);
}

/* =============================================
   MORE TOKEN HOOKS (v1.7.25), from the first Elementor-to-flat move
   (woodlandscounselling.co.uk). A site's look is set here, in tokens, so the
   library holds structures and each site keeps its own style. Every hook
   falls back to the old value.
     --heading-weight       h1 to h6 and the brand name (default bold; 400 for
                            a regular-weight serif look)
     --hero-heading-color   the hero h1 on light heroes (default heading colour)
     --footer-brand-color   the brand name in .footer--simple
     --nav-title-color      the tagline under the brand name
     --nav-title-font       its font (default the body font)
     --intro-align          vertical alignment of .intro__inner and
                            .intro__inner--reversed (default centre; start
                            puts the portrait level with the heading)
   ============================================= */
h1, h2, h3, h4, h5, h6,
.nav__name {
  font-weight: var(--heading-weight, var(--font-weight-bold));
}

.hero__heading {
  color: var(--hero-heading-color, var(--color-text-heading));
}

.footer--simple .footer__brand-name {
  color: var(--footer-brand-color, var(--color-text-heading));
}

.nav__title {
  color: var(--nav-title-color, var(--color-text-light));
  font-family: var(--nav-title-font, inherit);
}

.intro__inner,
.intro__inner--reversed {
  align-items: var(--intro-align, center);
}

/* .page-frame and the slope hero / two-tier bar (v1.7.25): inside the box the
   slope hero keeps a gutter either side instead of running into the box edge,
   and a coloured two-tier menu bar runs the full width of the box. */
@media (min-width: 1024px) {
  .page-frame .hero--slope-dark .hero__inner,
  .page-frame .hero--slope-light .hero__inner {
    width: auto;
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
  }
}

@media (min-width: 1100px) {
  .page-frame .nav--two-tier .nav__bottom {
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Tap-to-call on phones (v1.7.25, token hook). Below 900px the
   two-tier header hides its contact row (it shows from 900px); set
   --nav-call-phone-display: flex in
   a site's theme.css to show the phone number (only the item holding a tel:
   link) on its own line under the brand. No markup change, so the editor's nav
   rebuild cannot drop it. */
@media (max-width: 899px) {
  .nav--two-tier .nav__top {
    flex-wrap: wrap;
  }

  .nav--two-tier .nav__contact {
    display: var(--nav-call-phone-display, none);
    width: 100%;
    margin-top: var(--space-xs);
  }

  .nav--two-tier .nav__contact-item {
    display: none;
  }

  .nav--two-tier .nav__contact-item:has(a[href^="tel:"]) {
    display: flex;
    font-size: var(--text-base);
  }

  .nav--two-tier .nav__contact-item a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* a thumb-sized tap target */
  }
}

/* The footer brand name follows --heading-weight too (v1.7.25) */
.footer--simple .footer__brand-name {
  font-weight: var(--heading-weight, var(--font-weight-bold));
}

/* .page-header--rule (v1.7.25): a short line in the primary colour under the
   page title, the divider many Elementor page titles carry. */
.page-header--rule h1::after {
  content: '';
  display: block;
  width: var(--page-header-rule-width, 64px); /* v1.7.26 hooks */
  height: var(--page-header-rule-height, 2px);
  margin: var(--page-header-rule-gap, var(--space-md)) auto 0;
  background-color: var(--color-primary);
}

/* =============================================
   SHOW BY SCREEN SIZE (v1.7.25)
   Elementor's "Hide On Desktop / Tablet / Mobile" switches, at Elementor's own
   breakpoints, so a converted site keeps content that its old site showed on
   one screen size only (woodlandscounselling.co.uk: the portrait sits top right
   on desktop and after the content on phones). Combine them freely:
   class="hide-tablet hide-desktop" shows on phones only.
     .hide-mobile    hidden below 768px
     .hide-tablet    hidden from 768px to 1024px
     .hide-desktop   hidden from 1025px
   Use sparingly: anything duplicated for two screen sizes has to be edited
   twice.
   ============================================= */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}

/* .text-photo--natural (v1.7.25): a photo narrower than its column shown at its
   own width, centred, never stretched (a 600px photo of a real room in a 752px
   reading column). The converter adds it when an image is narrower than the column. */
.text-photo--natural {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================
   v1.7.26 - THE LOOKS ELEMENTOR SITES ARE BUILT FROM
   From woodlandscounselling.co.uk (30-10-2026), whose first flat rebuild Rick
   rejected beside her original: the library had drawn its own nearest version
   of her header, hero, sidebar, tabs and footer instead of hers. Each piece
   below is a structure many Elementor sites share; every size, colour and
   spacing is a token with her measured value as the example, so the next site
   sets its own numbers in theme.css and adds no CSS.
   Measure the original first: scripts/style_parity.py.
   ============================================= */

/* --- Page frame as a share of the window (Elementor's boxed page: 90% up to a
   maximum), and the box's own shadow. Sets:
     --page-frame-fluid: 90%;    --page-frame-shadow: 0 0 10px rgba(0,0,0,.5);  */
@media (min-width: 1024px) {
  .page-frame > .announcement-bar,
  .page-frame > .nav,
  .page-frame > main,
  .page-frame > .footer,
  .page-frame > .nav-scroll {
    width: var(--page-frame-fluid, auto);
  }

  .page-frame > .nav,
  .page-frame > main,
  .page-frame > .footer {
    box-shadow: var(--page-frame-shadow, none);
  }
}

/* --- Headings level by level, and the brand name. Sets --h1-weight,
   --h2-weight, --h3-weight (each falls back to --heading-weight),
   --nav-name-weight, --nav-name-tracking. */
h1 { font-weight: var(--h1-weight, var(--heading-weight, var(--font-weight-bold))); }
h2 { font-weight: var(--h2-weight, var(--heading-weight, var(--font-weight-bold))); }
h3 { font-weight: var(--h3-weight, var(--heading-weight, var(--font-weight-bold))); }

.nav__name {
  font-weight: var(--nav-name-weight, var(--heading-weight, var(--font-weight-bold)));
  letter-spacing: var(--nav-name-tracking, normal);
}

/* --- Section in the light grey surface colour (a third band colour beside
   plain and --alt): <section class="section section--muted">. It is its own
   background: the alternation safety net (GOLDEN RULE) neither repaints it nor
   tints the plain section after it (same pattern as .band). */
.section--muted,
main > .section:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner)
  + .section.section--muted:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--color-surface-alt);
}

main > .section.section--muted:not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner)
  + .section:not(.section--muted):not(.band):not(.section--alt):not(.section--dark):not(.cta-banner):not(.cta-mid-banner) {
  background-color: var(--color-bg);
}

/* --- Two-tier menu bar: the words, their spacing and the bar's own padding.
   Sets --nav-link-size, --nav-link-weight, --nav-link-padding (e.g. 13px 20px,
   which makes the bar as tall as the links), --nav-link-gap, --nav-bar-padding,
   --nav-active-line (0% hides the line under the current page; hover keeps it). */
@media (min-width: 1100px) {
  .nav--two-tier .nav__bottom {
    padding-top: var(--nav-bar-padding, var(--space-sm));
    padding-bottom: var(--nav-bar-padding, var(--space-sm));
  }

  .nav--two-tier .nav__links {
    gap: var(--nav-link-gap, var(--space-lg));
  }

  .nav--two-tier .nav__links > .nav__link,
  .nav--two-tier .nav__links > .nav__dropdown > .nav__link {
    font-size: var(--nav-link-size, var(--text-base));
    font-weight: var(--nav-link-weight, var(--font-weight-medium));
    padding: var(--nav-link-padding, var(--space-xs) 0);
  }

  .nav--two-tier .nav__links > .nav__link--active::after {
    width: var(--nav-active-line, 100%);
  }

  .nav--two-tier .nav__links > .nav__link:hover::after {
    width: 100%;
  }
}

/* =============================================
   .nav--brand-place (with .nav--two-tier): the brand stack of many Elementor
   headers. Desktop: name, tagline and the place on three lines at the left,
   phone and email top right, the social icon under them. Phones: everything
   centred in one column, the menu button centred in the menu bar.
   Markup is the normal two-tier nav; the FIRST .nav__contact-item is the place
   (its icon is hidden), the LAST holds the social link(s):
     <nav class="nav nav--two-tier nav--brand-place">
   Sets: --nav-top-padding / --nav-top-padding-bottom (brand row),
   --nav-contact-size (contact words), --nav-place-gap (tagline to place),
   --nav-social-bg / --nav-social-size (round social icon), --nav-toggle-bg and
   --nav-toggle-bar (the menu button on phones).
   ============================================= */
.nav--two-tier.nav--brand-place {
  padding: 0;
}

.nav--brand-place .nav__top {
  flex-wrap: wrap;
  padding-top: var(--nav-top-padding, 20px);
  padding-bottom: var(--nav-top-padding-bottom, var(--space-lg));
  row-gap: var(--nav-place-gap, var(--space-sm));
  column-gap: var(--space-lg);
}

.nav--brand-place .nav__contact {
  display: contents;
}

.nav--brand-place .nav__brand {
  flex: 1 1 auto;
}

.nav--brand-place .nav__contact-item {
  display: flex;
  font-size: var(--nav-contact-size, var(--text-sm));
  color: var(--color-text);
}

.nav--brand-place .nav__contact-item a {
  color: inherit;
  font-weight: var(--font-weight-normal);
}

.nav--brand-place .nav__contact-item svg {
  color: var(--color-secondary);
}

/* the place: its own line under the tagline */
.nav--brand-place .nav__contact-item:first-child {
  order: 2;
  flex: 1 0 calc(100% - 4rem);
}

.nav--brand-place .nav__contact-item:first-child svg {
  display: none;
}

.nav--brand-place .nav__contact-item:last-child {
  order: 3;
  margin-left: auto;
}

/* the social link as a round icon */
.nav--brand-place .nav__contact-item:last-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-social-size, 32px);
  height: var(--nav-social-size, 32px);
  border-radius: 50%;
  background-color: var(--nav-social-bg, var(--color-primary));
  color: var(--color-text-inverse);
}

.nav--brand-place .nav__contact-item:last-child svg {
  width: 50%;
  height: 50%;
  color: inherit;
}

/* The menu bar runs the full width of the header (and of the page box), not
   just the width of the menu: its colour is drawn wider than the bar and the
   header clips it at its own edges. */
.nav--two-tier.nav--brand-place {
  overflow-x: clip;
}

.nav--two-tier.nav--brand-place .nav__bottom {
  position: relative;
}

.nav--two-tier.nav--brand-place .nav__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  background-color: var(--nav-bar-bg, transparent);
  z-index: -1;
}

@media (min-width: 1100px) {
  .nav--two-tier.nav--brand-place .nav__bottom,
  .page-frame .nav--two-tier.nav--brand-place .nav__bottom {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 0;
    background-color: transparent;
  }
}

/* Below 900px: one centred column */
@media (max-width: 899px) {
  .nav--brand-place .nav__top {
    justify-content: center;
    text-align: center;
    column-gap: var(--space-md);
  }

  .nav--brand-place .nav__brand {
    flex: 1 0 100%;
    justify-content: center;
  }

  .nav--brand-place .nav__brand-text {
    align-items: center;
  }

  .nav--two-tier.nav--brand-place .nav__contact-item,
  .nav--two-tier.nav--brand-place .nav__contact-item:has(a[href^="tel:"]) {
    display: flex;
    font-size: var(--nav-contact-size, var(--text-base));
  }

  .nav--brand-place .nav__contact-item:first-child {
    order: 0;
    flex: 1 0 100%;
    justify-content: center;
  }

  .nav--brand-place .nav__contact-item:last-child {
    flex: 1 0 100%;
    justify-content: center;
    margin-left: 0;
  }
}

/* Below 1100px the menu bar is a row of its own with the menu button centred */
@media (max-width: 1099px) {
  .nav--two-tier.nav--brand-place .nav__top {
    padding-right: 0;
  }

  .nav--two-tier.nav--brand-place .nav__bottom {
    position: relative;
    justify-content: center;
    padding: 3px 0;
  }

  .nav--two-tier.nav--brand-place .nav__toggle {
    background-color: var(--nav-toggle-bg, transparent);
    border-radius: 0;
    padding: 9px 8px;
  }

  .nav--two-tier.nav--brand-place .nav__toggle-bar {
    background-color: var(--nav-toggle-bar, var(--color-text-heading));
  }
}

/* =============================================
   .hero--slope-cut (with .hero--slope-light): the Elementor two-column hero
   with a slanted panel. Desktop: the photo on the left with one rounded
   corner and no shadow, the panel behind it cut on a slant, the text in the
   panel on the right. Phones: the photo edge to edge, then the panel.
   Sets: --hero-cut-image-width (47.6%), --hero-cut-image-height (350px),
   --hero-cut-image-radius (0 0 0 50px), --hero-cut-top / --hero-cut-bottom
   (where the slant meets the top and bottom edge, 11% / 34%),
   --hero-cut-content-padding (60px), --hero-cut-padding (the band, 32px 0 40px),
   --hero-cut-heading-size (2rem), --hero-cut-heading-gap, --hero-lead-size,
   --hero-cut-image-height-mobile (300px). The panel colour is --hero-slope-panel.
   ============================================= */
.hero--slope-light.hero--slope-cut .hero__heading {
  font-size: var(--hero-cut-heading-size, 2rem);
  margin-bottom: var(--hero-cut-heading-gap, var(--space-xl));
}

.hero--slope-cut .hero__text--lead {
  font-size: var(--hero-lead-size, var(--text-md));
}

.hero--slope-cut .hero__text {
  line-height: var(--hero-cut-line-height, var(--line-height-normal));
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .hero--slope-light.hero--slope-cut {
    padding: var(--hero-cut-padding, 32px 0 40px);
  }

  .hero--slope-light.hero--slope-cut .hero__inner,
  .page-frame .hero--slope-light.hero--slope-cut .hero__inner {
    grid-template-columns: var(--hero-cut-image-width, 47.6%) 1fr;
    gap: 0;
    padding: 0;
    min-height: 0;
    align-items: stretch;
    width: calc(100% - 2 * var(--container-gutter, var(--space-lg)));
    max-width: calc(var(--container-max) - 2 * var(--container-gutter, var(--space-lg)));
    margin-left: auto;
    margin-right: auto;
  }

  .hero--slope-light.hero--slope-cut .hero__inner::before {
    left: 0;
    right: 0;
    border-radius: 0;
    clip-path: polygon(var(--hero-cut-top, 11%) 0, 100% 0, 100% 100%, var(--hero-cut-bottom, 34%) 100%);
  }

  .hero--slope-light.hero--slope-cut .hero__image-wrap {
    align-self: center;
    padding: 40px 0;
  }

  .hero--slope-light.hero--slope-cut .hero__image {
    height: var(--hero-cut-image-height, 350px);
    min-height: 0;
    border-radius: var(--hero-cut-image-radius, 0 0 0 50px);
    box-shadow: none;
  }

  .hero--slope-light.hero--slope-cut .hero__content {
    padding: var(--hero-cut-content-padding, 60px);
  }

  .hero--slope-light.hero--slope-cut .hero__text {
    max-width: none;
  }

  .hero--slope-light.hero--slope-cut .hero__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .hero--slope-light.hero--slope-cut {
    padding: 0;
  }

  .hero--slope-light.hero--slope-cut .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .hero--slope-light.hero--slope-cut .hero__inner::before {
    display: none;
  }

  .hero--slope-light.hero--slope-cut .hero__image {
    width: 100%;
    height: var(--hero-cut-image-height-mobile, 300px);
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }

  .hero--slope-light.hero--slope-cut .hero__content {
    background: var(--hero-slope-panel, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)));
    padding: var(--hero-cut-content-padding-mobile, 60px 20px);
  }

  .hero--slope-light.hero--slope-cut .hero__heading {
    text-align: center;
  }

  .hero--slope-light.hero--slope-cut .hero__actions {
    justify-content: center;
  }
}

/* =============================================
   .sidebar-layout: the page's text in a wide column with a narrow column
   beside it (a portrait card, contact details). The sidebar follows the text
   on phones and tablets.
     <div class="container sidebar-layout">
       <div class="sidebar-layout__main"> ...text... </div>
       <aside class="sidebar-layout__aside"> ...profile-card... </aside>
     </div>
   Sets: --sidebar-main (69%), --sidebar-aside (24%), --sidebar-gap (on
   phones), --prose-h2-size / --prose-h2-weight and --prose-h3-size (headings
   inside the main column, when the old site drew them smaller than section
   titles).
   ============================================= */
.sidebar-layout {
  display: grid;
  gap: var(--sidebar-gap, var(--space-3xl));
}

.sidebar-layout__main {
  min-width: 0;
}

.sidebar-layout__main h2 {
  font-size: var(--prose-h2-size, var(--text-h2));
  font-weight: var(--prose-h2-weight, var(--h2-weight, var(--heading-weight, var(--font-weight-bold))));
  margin-bottom: var(--space-md);
}

.sidebar-layout__main h3 {
  font-size: var(--prose-h3-size, var(--text-h3));
  margin-top: var(--prose-h3-gap, var(--space-xl));
  margin-bottom: var(--prose-h3-after, var(--space-sm));
}

/* paragraph gap in the main column (--prose-p-gap): an Elementor text box
   separates paragraphs by a blank line, wider than the library's gap */
.sidebar-layout__main p {
  margin-bottom: var(--prose-p-gap, var(--space-md));
}

.sidebar-layout__main > h3:first-child,
.sidebar-layout__main > :first-child > h3:first-child {
  margin-top: 0;
}

@media (min-width: 1025px) {
  .sidebar-layout {
    grid-template-columns: var(--sidebar-main, 69%) var(--sidebar-aside, 24%);
    justify-content: space-between;
    align-items: start;
  }
}

/* =============================================
   .profile-card: a portrait with the name, a line of credentials and a
   button, centred, no frame (the "about me" card many therapist sites put
   beside their text).
     <div class="profile-card">
       <img class="profile-card__image" src=... alt=... width height>
       <p class="profile-card__name">Catherine Nicholas</p>
       <p class="profile-card__meta">BA (Hons) MBACP ...</p>
       <a class="btn btn--accent" href=...>Learn More</a>
     </div>
   Sets --profile-name-size (1.5rem), --profile-meta-size / --profile-meta-weight.
   ============================================= */
.profile-card {
  text-align: center;
}

.profile-card__image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-xl);
}

.profile-card__name {
  font-family: var(--font-heading);
  font-size: var(--profile-name-size, 1.5rem);
  color: var(--color-text-heading);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.profile-card__meta {
  font-size: var(--profile-meta-size, var(--text-base));
  font-weight: var(--profile-meta-weight, var(--font-weight-semibold));
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

/* =============================================
   .tabs: tabbed text, the titles in a column of pills beside the panel from
   768px (Elementor's vertical nested tabs), stacked above it on phones. One
   panel shows at a time; main.js switches them and sets the keyboard and
   screen reader roles. Without JavaScript every panel shows.
     <div class="tabs">
       <div class="tabs__list" role="tablist">
         <button class="tabs__tab" type="button" role="tab" aria-selected="true" aria-controls="t1" id="t1-tab">Title</button> ...
       </div>
       <div class="tabs__panel" role="tabpanel" id="t1" aria-labelledby="t1-tab"> ...text... </div> ...
     </div>
   Sets --tabs-list-width (30%), --tabs-radius (20px), --tabs-panel-bg
   (surface-alt), --tabs-active-bg (secondary).
   ============================================= */
.tabs {
  display: grid;
  gap: 10px;
}

.tabs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tabs__tab {
  font: inherit;
  font-size: var(--btn-font-size, var(--text-base));
  font-weight: var(--btn-weight, var(--font-weight-semibold));
  text-transform: var(--btn-transform, none);
  text-align: left;
  line-height: 1.2;
  padding: 15px 35px;
  border: 0;
  border-radius: var(--tabs-radius, 20px);
  background-color: var(--tabs-panel-bg, var(--color-surface-alt));
  color: var(--color-text);
  cursor: pointer;
}

.tabs__tab:hover {
  color: var(--color-primary);
}

.tabs__tab[aria-selected="true"] {
  background-color: var(--tabs-active-bg, var(--color-secondary));
  color: var(--color-text-inverse);
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tabs__panel {
  background-color: var(--tabs-panel-bg, var(--color-surface-alt));
  border-radius: var(--tabs-radius, 20px);
  padding: var(--space-xl) var(--space-lg);
}

.tabs--ready .tabs__panel[hidden] {
  display: none;
}

/* Phones: each panel straight under its own title, as Elementor's tabs do
   (titles 1 to 8; a panel is .tabs' child n+1 because the list comes first) */
@media (max-width: 767px) {
  .tabs { display: flex; flex-direction: column; }
  .tabs__list { display: contents; }
  .tabs__tab:nth-child(1) { order: 1; }  .tabs > .tabs__panel:nth-child(2) { order: 2; }
  .tabs__tab:nth-child(2) { order: 3; }  .tabs > .tabs__panel:nth-child(3) { order: 4; }
  .tabs__tab:nth-child(3) { order: 5; }  .tabs > .tabs__panel:nth-child(4) { order: 6; }
  .tabs__tab:nth-child(4) { order: 7; }  .tabs > .tabs__panel:nth-child(5) { order: 8; }
  .tabs__tab:nth-child(5) { order: 9; }  .tabs > .tabs__panel:nth-child(6) { order: 10; }
  .tabs__tab:nth-child(6) { order: 11; } .tabs > .tabs__panel:nth-child(7) { order: 12; }
  .tabs__tab:nth-child(7) { order: 13; } .tabs > .tabs__panel:nth-child(8) { order: 14; }
  .tabs__tab:nth-child(8) { order: 15; } .tabs > .tabs__panel:nth-child(9) { order: 16; }
}

@media (min-width: 768px) {
  .tabs {
    grid-template-columns: var(--tabs-list-width, 30%) 1fr;
    align-items: start;
  }

  .tabs__panel {
    grid-column: 2;
    grid-row: 1 / span 20;
    padding: 40px;
  }
}

/* =============================================
   Flat CTA band and the footer card.
   .section.cta-mid-banner takes --cta-band-bg (a flat colour instead of the
   gradient), and .btn--outline-light is the outlined white button of many
   Elementor CTA strips. .cta-mid-banner--center-mobile centres it on phones.
   .footer--card (with .footer--simple): the footer's contents in a white card
   on the band colour, everything centred (name, phone and email on their own
   lines, a round social icon .footer__social, the legal links in the primary
   colour, the copyright). Sets --footer-card-bg, --footer-card-padding (40px),
   --footer-name-size (2.125rem).
   ============================================= */
.section.cta-mid-banner {
  background: var(--cta-band-bg, linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%));
  padding: var(--cta-band-padding, var(--space-2xl)) 0;
}

/* the handwritten sign-off also in the main column of .sidebar-layout */
.sidebar-layout__main .signature {
  font-family: var(--font-signature, var(--font-heading));
  font-size: var(--signature-size, var(--text-xl));
  font-style: var(--signature-style, italic);
  color: var(--color-text-heading);
  line-height: 1.6;
}

.btn--outline-light {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.btn--outline-light:hover {
  background-color: var(--color-text-inverse);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .cta-mid-banner--center-mobile .cta-mid-banner__inner {
    align-items: center;
    text-align: center;
  }
}

.footer--card {
  padding: var(--space-xl) 0;
}

.footer--card > .container {
  background-color: var(--footer-card-bg, var(--color-surface));
  padding: var(--footer-card-padding, 40px);
  max-width: calc(var(--container-max) - 2 * var(--container-gutter, var(--space-lg)));
  width: calc(100% - 2 * var(--container-gutter, var(--space-lg)));
}

.footer--card .footer__brand-name {
  font-size: var(--footer-name-size, 2.125rem);
  margin-bottom: var(--space-md);
}

.footer--card .footer__links {
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-md);
}

.footer--card .footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.footer--card .footer__link svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.footer--card .footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--nav-social-bg, var(--color-primary));
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
}

.footer--card .footer__social svg {
  width: 50%;
  height: 50%;
}

.footer--card .footer__bottom {
  border-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-md);
}

.footer--card .footer__legal a {
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.footer--card .footer__copyright {
  font-size: var(--text-sm);
  color: #777;
}

/* .card--icon-bare (v1.7.26, with .card--feature): the icon drawn on its own,
   no circle behind it, at --card-icon-size (50px), in the primary colour. */
.card--icon-bare .card__icon,
.section--alt .card--icon-bare .card__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.card--icon-bare .card__icon svg {
  width: var(--card-icon-size, 50px);
  height: var(--card-icon-size, 50px);
}

/* v1.7.26 token hooks: --checklist-icon-size (20px) for the tick of
   .checklist, --card-text-size (base) for .card__text. */
.checklist > li > svg {
  width: var(--checklist-icon-size, 20px);
  height: var(--checklist-icon-size, 20px);
  min-width: var(--checklist-icon-size, 20px);
}

.card__text {
  font-size: var(--card-text-size, var(--text-base));
}

/* .text-note (v1.7.26): a paragraph in small print, for a notice the old site
   set smaller than its body text (a safety message, terms in brief). The
   Elementor converter adds it when a text box was set smaller than the body.
   Size: --text-note-size (default --text-sm). */
.text-note {
  font-size: var(--text-note-size, var(--text-sm));
}

/* .as-h2 / .as-h3 / .as-h4 (v1.7.26): a heading drawn at another level's size,
   so a page keeps a valid heading order (h1, h2, h3) while each heading looks as
   the old site drew it. The Elementor converter adds it when an old page went
   straight from its title to h3 sub-headings: they become h2.as-h3. */
.as-h2 { font-size: var(--text-h2); font-weight: var(--h2-weight, var(--heading-weight, var(--font-weight-bold))); }
.as-h3 { font-size: var(--text-h3); font-weight: var(--h3-weight, var(--heading-weight, var(--font-weight-bold))); }
.as-h4 { font-size: var(--text-lg); }

@media (min-width: 768px) {
  .as-h2 { font-size: var(--text-h2-desktop); }
  .as-h3 { font-size: var(--text-h3-desktop); }
}

.sidebar-layout__main .as-h3 {
  font-size: var(--prose-h3-size, var(--text-h3));
  font-weight: var(--h3-weight, var(--heading-weight, var(--font-weight-bold)));
  margin-top: var(--prose-h3-gap, var(--space-xl));
  margin-bottom: var(--prose-h3-after, var(--space-sm));
}

.sidebar-layout__main > .as-h3:first-child,
.sidebar-layout__main > :first-child > .as-h3:first-child {
  margin-top: 0;
}

/* .contact-form-card--muted (v1.7.26): the form on the light grey surface, no
   frame, where the old site boxed its form in grey. .contact-columns: two
   columns of contact details, form and map in the old site's own order
   (with .grid.grid--2); a map inside one fills its column. Tokens:
   --contact-columns-gap, --contact-map-height, --contact-form-radius. */
.contact-form-card--muted {
  background-color: var(--color-surface-alt);
  border: 0;
  box-shadow: none;
  border-radius: var(--contact-form-radius, var(--aesthetic-radius));
}

.contact-columns {
  gap: var(--contact-columns-gap, var(--space-2xl));
}

.contact-columns .map-placeholder {
  height: auto;
  margin: var(--space-md) 0;
  border-radius: 0;
}

.contact-columns .map-placeholder iframe {
  display: block;
  width: 100%;
  height: var(--contact-map-height, 300px);
}

main .contact-columns .checklist a:not([class]) {
  color: inherit;
  text-decoration: none;
}

.contact-columns h2 {
  font-size: var(--prose-h2-size, var(--text-h2));
  font-weight: var(--prose-h2-weight, var(--h2-weight, var(--heading-weight, var(--font-weight-bold))));
  margin-bottom: var(--space-md);
}

/* v1.7.26 token hooks: --nav-brand-gap (name to tagline in .nav--brand-place),
   --form-label-size (form labels). */
.nav--brand-place .nav__brand-text {
  gap: var(--nav-brand-gap, 2px);
}

.form__label {
  font-size: var(--form-label-size, var(--text-sm));
}

/* =============================================
   .accordion--boxed (v1.7.26): Elementor's nested accordion as it is drawn by
   default: each title in a thin box with the plus at the left, the open panel
   on the light grey surface in the same thin border, the text at body size,
   filling its column. Tokens: --accordion-border (#D5D8DC), --accordion-title-size
   (1.25rem), --accordion-panel-padding (40px).
   ============================================= */
.accordion--boxed {
  max-width: none;
}

.accordion--boxed .accordion__item {
  border-bottom: 0;
}

.accordion--boxed .accordion__trigger {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--accordion-border, #D5D8DC);
  margin-top: -1px;
  font-size: var(--accordion-title-size, 1.25rem);
  color: var(--color-text-heading);
}

.accordion--boxed .accordion__icon {
  width: 13px;
  height: 13px;
  color: var(--accordion-icon-color, var(--color-primary));
  stroke-width: 4; /* Elementor's solid plus */
}

.accordion--boxed .accordion__content {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--accordion-border, #D5D8DC);
  border-top: 0;
  padding: var(--accordion-panel-padding, 40px);
}

.accordion--boxed .accordion__content p {
  font-size: inherit;
  color: var(--color-text);
  line-height: inherit;
}

/* Lists in a page's own text column (v1.7.26): the plain bullets and numbers
   of the old site's text, indented (--prose-list-indent, 40px), with the gap
   after the list --prose-list-gap (20px). Only lists with no class: tick lists
   (.checklist) keep their own look. */
.sidebar-layout__main ul:not([class]),
.sidebar-layout__main ol:not([class]),
.accordion__content ul:not([class]),
.accordion__content ol:not([class]) {
  list-style: disc;
  padding-left: var(--prose-list-indent, 40px);
  margin-bottom: var(--prose-list-gap, 20px);
}

.sidebar-layout__main ol:not([class]),
.accordion__content ol:not([class]) {
  list-style: decimal;
}

/* A section's own column width, carried from the old site (Elementor's
   --content-width) on the element: <div class="container container--content"
   style="--content-width: 960px">. Default 800px. */
.container--content {
  max-width: calc(var(--content-width, 800px) + 2 * var(--container-gutter, var(--space-lg)));
}

/* .as-h1: a heading inside the text drawn at the page title's size (the old
   site's text carried its own h1, which becomes an h2 here). */
.as-h1 {
  font-size: var(--text-h1);
  font-weight: var(--h1-weight, var(--heading-weight, var(--font-weight-bold)));
}

@media (min-width: 768px) {
  .as-h1 { font-size: var(--text-h1-desktop); }
}

.sidebar-layout__main .as-h1 {
  font-size: var(--text-h1-desktop);
  font-weight: var(--h1-weight, var(--heading-weight, var(--font-weight-bold)));
}

/* Page title band: the title's own width (--page-header-title-width, e.g. 750px)
   so a long title wraps as the old site wrapped it. */
.page-header h1 {
  max-width: var(--page-header-title-width, none);
  margin-left: auto;
  margin-right: auto;
}

/* Links inside the page's text: --content-link-decoration (underline) and
   --content-link-color (primary), for an old site whose text links were plain. */
main p a:not([class]),
main li:not([class]) a:not([class]) {
  color: var(--content-link-color, var(--color-primary));
  text-decoration-line: var(--content-link-decoration, underline);
}

/* The page box's shadow without a seam where main meets the footer: each casts
   it only sideways there (v1.7.26, with --page-frame-shadow). The nav is never
   clipped, so its dropdown menus are never cut off. */
@media (min-width: 1024px) {
  .page-frame > main { clip-path: inset(0 -30px); }
  .page-frame > .footer { clip-path: inset(0 -30px -30px -30px); }
}

/* .footer--card legal links flow as one line of text with their | separators;
   size --footer-legal-size (default --text-xs). */
.footer--card .footer__legal {
  display: block;
  text-align: center;
  font-size: var(--footer-legal-size, var(--text-xs));
  color: var(--color-primary);
}

.footer--card .footer__legal a {
  font-size: inherit;
}

/* .checklist--solid (v1.7.26): a contact or details list with filled icons (a
   phone, a clock, a pin) in the primary colour instead of ticks, the icon list
   of most Elementor contact pages. .checklist--heading sets its words in the
   heading font (--checklist-heading-size, 1.25rem). */
.checklist--solid > li > svg {
  color: var(--color-primary);
  width: var(--checklist-solid-size, 20px);
  height: var(--checklist-solid-size, 20px);
  min-width: var(--checklist-solid-size, 20px);
  margin-top: 0.3em;
}

.checklist--heading > li {
  font-family: var(--font-heading);
  font-size: var(--checklist-heading-size, 1.25rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

/* A sub-heading kept inside a bulleted list (the old site bulleted it);
   space above it --prose-list-heading-gap */
.sidebar-layout__main li > h3,
.sidebar-layout__main li > h4 {
  margin: var(--prose-list-heading-gap, var(--space-md)) 0 var(--space-md);
}

/* a heading drawn at the page title's size keeps the title's own line height */
.sidebar-layout__main .as-h1 {
  line-height: var(--line-height-tight);
}

/* v1.7.26 token hooks for forms: --form-input-padding, --form-input-radius,
   --form-input-size, --form-textarea-height, --form-label-weight,
   --form-label-color, --form-label-gap. */
.form__input,
.form__textarea,
.form__select {
  padding: var(--form-input-padding, var(--space-md));
  border-radius: var(--form-input-radius, var(--aesthetic-radius));
  font-size: var(--form-input-size, var(--text-base));
}

.form__textarea {
  min-height: var(--form-textarea-height, 150px);
}

.form__group {
  gap: var(--form-label-gap, var(--space-sm));
}

.form__label {
  font-weight: var(--form-label-weight, var(--font-weight-medium));
  color: var(--form-label-color, var(--color-text-heading));
}

/* v1.7.26 token hooks for the flat CTA band and the footer card:
   --cta-band-heading-gap (heading to sentence), --footer-card-padding-mobile. */
.section.cta-mid-banner h2 {
  margin-bottom: var(--cta-band-heading-gap, var(--space-xs));
}

@media (max-width: 767px) {
  .footer--card > .container {
    padding: var(--footer-card-padding-mobile, var(--footer-card-padding, 40px));
  }
}

/* h2 to what follows it (--h2-gap, default --space-xl), for an old site whose
   section titles sit closer to their content. */
h2 {
  margin-bottom: var(--h2-gap, var(--space-xl));
}

/* v1.7.26 spacing hooks measured off an Elementor original:
   --prose-li-gap / --prose-li-line-height  list items in the text column
   --trust-bar-padding                      the logo strip's own padding
   --profile-card-padding-bottom            space under a portrait card
   --form-input-line-height, --form-gap, --form-top  form fields and spacing
   --contact-form-padding                   the grey form box (with --muted) */
.section .sidebar-layout__main ul:not([class]) li,
.section .sidebar-layout__main ol:not([class]) li {
  margin-bottom: var(--prose-li-gap, var(--space-xs));
  line-height: var(--prose-li-line-height, var(--line-height-relaxed));
}

.trust-bar {
  padding: var(--trust-bar-padding, var(--space-lg) 0);
}

/* only a card that ends in a button (the saved "about me" card) carries it */
.profile-card:has(> .btn) {
  padding-bottom: var(--profile-card-padding-bottom, 0);
}

/* headings in the text column: space above and their own line height
   (--prose-h2-gap, --prose-h2-line-height) */
.sidebar-layout__main h2 {
  margin-top: var(--prose-h2-gap, 0);
  line-height: var(--prose-h2-line-height, var(--line-height-tight));
}

.form__input,
.form__textarea,
.form__select {
  line-height: var(--form-input-line-height, inherit);
}

.form {
  gap: var(--form-gap, var(--space-lg));
  margin-top: var(--form-top, var(--space-lg));
}

.contact-form-card.contact-form-card--muted {
  padding: var(--contact-form-padding, var(--space-2xl));
}