/* ==========================================================================
   William Place Dental Aesthetics
   Design system. Tokens carried from the June 2026 header/footer rebuild.

   Direction: the practice is a *place* - 12 William Place, Bow, since 2008.
   The signature is an enamel street nameplate in the hero, used once.
   Georgia carries warmth, Poppins carries structure, gold is reserved for
   rules and the plate border only.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --purple: #3f2056;
  --purple-deep: #311941;
  --purple-soft: #f8f5fb;
  --teal: #58b6af;
  --teal-deep: #3d918b;
  --gold: #c2a878;
  --ink: #2c2436;
  --muted: #6b6276;
  --line: #ece8f0;
  --white: #fff;
  --cream: #fdfcfe;

  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Fraunces is the display face used across the June 2026 rebuild. Georgia is
     the fallback, so the page still reads correctly before the webfont lands. */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --maxw: 1120px;
  --maxw-prose: 68ch;
  --radius-pill: 999px;
  /* The June designs are card-led and softly rounded, not sharp-edged. */
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --cream: #faf6f1;
  --blush: #f4eff8;
  --lilac: #e9def3;
  --gold-deep: #a98a52;
  --shadow: 0 18px 50px -28px rgba(63, 32, 86, 0.4);
  --shadow-sm: 0 8px 22px -16px rgba(63, 32, 86, 0.45);

  /* Type scale - 1.25 ratio, fluid between 380px and 1180px viewports. */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.05rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.75vw, 2.9rem);
  --step-4: clamp(2.1rem, 1.5rem + 3vw, 4rem);

  --space-s: 0.75rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --space-xl: clamp(3.5rem, 2rem + 7vw, 7rem);
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Fraunces is a variable face with SOFT and WONK axes. Loading it and then
   setting it like any other serif wastes the only thing that makes it itself.
   SOFT 40 rounds the terminals - that softness IS the brief for a practice
   that sells "warm and non-corporate". WONK is held back for the largest
   display sizes only: on an h1 it reads as character, everywhere it reads
   as twee. Optical sizing lets the big cuts differ from the small ones. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.14;
  color: var(--purple);
  margin: 0 0 var(--space-s);
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}

h1 { font-size: var(--step-4); font-variation-settings: "SOFT" 40, "WONK" 1; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-1); font-weight: 600; }
h4 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; font-variation-settings: normal; }

/* Numbers that sit in columns - fees, opening hours, GDC registrations, NHS
   band charges - must align. Proportional figures make a price list ragged. */
.hours td, .hours th, .prose table td, .band-price,
.person-cred, .support .gd, .plate-since {
  font-variant-numeric: tabular-nums;
}

p { margin: 0 0 var(--space-m); }

a { color: var(--purple); text-decoration-color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--purple);
  color: var(--white);
  padding: var(--space-s) var(--space-m);
  z-index: 200;
}
.skip-link:focus { left: 0; color: var(--white); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout primitives -------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline: auto;
}

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

/* The first block on a page sits directly under the header, which already
   separates it. A full section's worth of padding on top of that leaves a
   dead band before the content starts. Full-bleed heroes set their own
   padding and are unaffected. */
main > .section:first-child { padding-top: var(--space-l); }
main > .section:first-child.section--tint,
main > .section:first-child.section--deep { padding-top: var(--space-l); }
.section--tint { background: var(--blush); }
.section--deep {
  background: linear-gradient(170deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: #e9e3ef;
}
.section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep a { color: var(--white); }

/* Eyebrow: a small structural label. Encodes *where you are*, not decoration. */
.eyebrow {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-s);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  flex: none;
}
.section--deep .eyebrow { color: var(--gold); }
.section--deep .eyebrow::before { background: var(--gold); }

.lede {
  font-size: var(--step-1);
  font-family: var(--font-serif);
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}
.section--deep .lede { color: #cfc5da; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--teal); color: #10302e; }
.btn--primary:hover { background: var(--teal-deep); color: var(--white); }

.btn--ghost { border-color: currentColor; color: var(--purple); }
.btn--ghost:hover { background: var(--purple); color: var(--white); }

.section--deep .btn--ghost { color: var(--white); }
.section--deep .btn--ghost:hover { background: var(--white); color: var(--purple); }

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

/* --- Header --------------------------------------------------------------
   The June header: gold top rule, plum utility strip, then a main bar with the
   logo and independence badge left, strapline centred, phone and Book Online
   right, and the navigation on its own centred row beneath.
   ----------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 100;
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(49, 25, 65, 0.06);
}

.utility { background: var(--purple); color: #e9e2f0; font-size: 13px; letter-spacing: 0.2px; padding-block: 4px; }
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.utility span { display: inline-flex; align-items: center; gap: 0.5rem; }
.u-address, .u-hours { opacity: 0.92; }
.u-address svg, .u-hours svg { fill: var(--gold); flex: none; }
.u-socials { gap: 0.7rem; }
/* Ringed in gold and sized to a proper touch target, so they read as an
   invitation rather than as two grey dots in the corner. */
.u-socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--gold);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.u-socials a:hover, .u-socials a:focus-visible {
  background: var(--teal); border-color: var(--teal); transform: translateY(-2px);
}
.u-socials a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.u-socials svg { width: 17px; height: 17px; fill: var(--white); }
.u-socials a:hover svg, .u-socials a:focus-visible svg { fill: var(--purple-deep); }

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}
.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 1.25rem; }
.logo { flex: 0 0 auto; }
/* Fluid rather than fixed: the mark is the practice's strongest asset, so it
   takes as much room as the bar can spare before the nav needs it. */
.logo img { height: clamp(130px, 15vw, 210px); width: auto; display: block; }
.header-badge { width: clamp(110px, 11.5vw, 150px); height: auto; aspect-ratio: 1; flex: none; display: block; }

.strapline {
  flex: 1;
  text-align: center;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--purple);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}

.header-actions { display: flex; align-items: center; gap: 1.35rem; }
.header-call { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.header-call .ring {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88, 182, 175, 0.14);
}
.header-call .ring svg { width: 19px; height: 19px; fill: var(--teal); }
.call-label {
  display: block;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.call-num {
  display: block;
  font-size: 1.15rem; font-weight: 600; color: var(--purple); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header-call:hover .call-num { color: var(--teal-deep); }

.header-book {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--gold); color: #3a2c14;
  font-weight: 600; font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(194, 168, 120, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.header-book:hover {
  transform: translateY(-2px);
  background: #b89a66;
  color: #3a2c14;
  box-shadow: 0 10px 24px rgba(194, 168, 120, 0.45);
}
.header-book svg { width: 16px; height: 16px; fill: currentColor; }

.nav-wrap { border-top: 1px solid var(--line); background: var(--white); }
.nav-mobile-cta { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--purple);
}
.nav-toggle:hover { background: var(--line); }
.nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }

.nav { display: flex; align-items: center; justify-content: center; }
.nav-list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-list > li { position: relative; }

/* --- Navigation ---------------------------------------------------------
   The old site listed all 17 pages in one flat menu. Grouping into
   Treatments / About keeps every URL but makes the menu usable.
   ----------------------------------------------------------------------- */

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  color: var(--purple);
}
.nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.nav-list > li { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 0.7rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link svg { width: 11px; height: 11px; fill: currentColor; transition: transform 0.2s ease; }

/* Gold underline that draws in on hover, as in the June header. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.55rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--purple); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 252px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 34px rgba(49, 25, 65, 0.15);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.has-panel:hover > .nav-panel,
.has-panel:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-panel:hover .nav-link svg,
.has-panel:focus-within .nav-link svg { transform: rotate(180deg); }

.nav-panel a {
  display: block;
  padding: 0.7rem 1.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.nav-panel a::after { display: none; }
.nav-panel a:hover { background: #f7f3fa; color: var(--purple); }

.nav-cta { margin-left: 0.6rem; }

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .nav-wrap {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--white);
    border-top: 3px solid var(--gold);
    box-shadow: 0 20px 40px rgba(49, 25, 65, 0.16);
  }
  .nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; padding: 0.95rem 1.5rem; font-size: var(--step-0); white-space: normal; }
  .nav-link::after { display: none; }

  /* On mobile the submenu is simply shown, indented, rather than toggled -
     matching the June header and removing a state that can desync. */
  .nav-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    background: #faf8fc;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-panel a { padding: 0.8rem 1.5rem 0.8rem 2.75rem; font-size: 0.9rem; color: var(--muted); white-space: normal; }
  .nav-panel a:hover { background: #f1ecf6; color: var(--purple); }
  .has-panel .nav-link svg { display: none; }
  .nav-cta { margin: var(--space-s) 1.5rem var(--space-m); width: calc(100% - 3rem); }
}

/* --- Hero + the signature nameplate -------------------------------------
   The plate appears once, in the hero. Repeating it would make it kitsch.
   ----------------------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: #e9e3ef;
  padding-block: var(--space-xl);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }
}

.hero h1 { color: var(--white); margin-bottom: var(--space-m); }
.hero .lede { color: #cfc5da; max-width: 46ch; font-size: var(--step-1); }
.hero .eyebrow { color: var(--gold); }
.hero .btn-row { margin-top: var(--space-l); }

/* The nameplate itself: white on deep ground, gold keyline, borough above -
   the vernacular of an East London enamel street sign. */
.nameplate {
  background: var(--purple-deep);
  border: 3px solid var(--gold);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  position: relative;
  animation: plate-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.nameplate::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(194, 168, 120, 0.45);
  border-radius: 2px;
  pointer-events: none;
}
.nameplate .plate-borough {
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.nameplate .plate-name {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(1.9rem, 1rem + 4.5vw, 3.4rem);
  line-height: 1.05;
  color: var(--white);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nameplate .plate-rule {
  width: 60px;
  height: 2px;
  background: var(--teal);
  margin: 1rem auto;
  border: 0;
}
.nameplate .plate-since {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfc5da;
  margin: 0;
}

@keyframes plate-in {
  from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); }
  to { opacity: 1; transform: none; }
}

/* --- Trust strip -------------------------------------------------------- */

.trust {
  background: var(--purple-deep);
  color: #cfc5da;
  padding-block: var(--space-m);
  border-top: 1px solid rgba(194, 168, 120, 0.25);
}
.trust ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.trust li { display: flex; align-items: center; gap: 0.5rem; }
.trust svg { width: 15px; height: 15px; fill: var(--teal); flex: none; }

/* --- Editorial two-column block ----------------------------------------- */

.split {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); }
  .split--reverse > :first-child { order: 2; }
}
.split img { border-radius: var(--radius); }

/* --- Cards -------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-top: var(--space-l);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.card:hover,
a.card:focus-visible {
  border-top-color: var(--gold);
  box-shadow: 0 16px 34px rgba(49, 25, 65, 0.1);
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--space-s); }
.card .card-more {
  margin-top: auto;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--teal-deep);
}

/* --- NHS bands ----------------------------------------------------------
   A real sequence (Band 1 -> 2 -> 3, each including the last), so the
   numbering here carries information rather than decorating.
   ----------------------------------------------------------------------- */

.bands { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.band {
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--space-m);
  background: var(--white);
}
.band-name {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
}
.band-price {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--purple);
  margin: 0.2rem 0 var(--space-s);
  font-weight: 700;
}
.band p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* --- Prose (blog posts, policies, long-form pages) ---------------------- */

.prose { max-width: var(--maxw-prose); }
.prose h2 { margin-top: var(--space-l); font-size: var(--step-2); }
.prose h3 { margin-top: var(--space-m); }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: var(--space-m); }
.prose li { margin-bottom: 0.4rem; }
.prose img { margin-block: var(--space-m); border-radius: var(--radius); }
.prose blockquote {
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--gold);
  background: var(--purple-soft);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--purple);
}
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-m); font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--purple-soft); color: var(--purple); font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* --- Article meta ------------------------------------------------------- */

.article-head { border-bottom: 1px solid var(--line); padding-bottom: var(--space-m); margin-bottom: var(--space-l); }
.article-meta { color: var(--muted); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--space-s); }

.post-item h3 { margin-bottom: 0.3rem; }
.post-item a:hover h3 { color: var(--teal-deep); }

/* --- Team --------------------------------------------------------------- */

.team-grid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.team-member img { border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.team-member h3 { margin: var(--space-s) 0 0.1rem; font-size: var(--step-1); }
.team-role { color: var(--teal-deep); font-weight: 600; font-size: var(--step--1); margin: 0 0 0.3rem; }
.team-gdc { color: var(--muted); font-size: var(--step--1); margin: 0; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { max-width: var(--maxw-prose); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--space-s) 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--purple);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: 0.4rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--teal-deep);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > *:not(summary) { color: var(--muted); }

/* --- Forms -------------------------------------------------------------- */

.form { display: grid; gap: var(--space-m); max-width: 40rem; }
.field-row { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--purple);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(88, 182, 175, 0.3);
  outline-offset: 0;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field-hint { font-size: var(--step--1); color: var(--muted); margin: 0.3rem 0 0; }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step--1); color: var(--muted); }
.consent input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--teal-deep); }

/* Grouped form sections. The referral form is long enough that unbroken
   fields would be a wall; the legends give it structure a screen reader
   announces too. */
/* A section already provides its own bottom padding, so trailing margin on the
   last thing inside it is always dead space. Left unchecked it stacked up to
   48px of nothing under a lede on six pages. The second rule catches the same
   thing one level down, where a lede's margin collapses out of .section-head. */
.wrap > *:first-child { margin-top: 0; }
.wrap > *:last-child { margin-bottom: 0; }
.section-head > *:last-child { margin-bottom: 0; }

/* A section holding nothing but its heading is a title block, not a full band,
   so it shouldn't reserve a band's worth of space beneath itself. */
.section:has(> .wrap > .section-head:only-child) { padding-bottom: var(--space-m); }

.form-set {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 var(--space-m);
  padding: var(--space-m) 0 0;
  min-width: 0;
}
.form-set:first-of-type { border-top: 0; padding-top: 0; }
.form-set legend {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: 0;
  margin-bottom: var(--space-s);
}
.form input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  padding: 0.6rem 0;
}
.form input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--step--1);
  margin-right: 0.8rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--purple);
  cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover { border-color: var(--gold); }

.form-note {
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--purple-soft);
  border-left: 3px solid var(--gold);
  padding: var(--space-s) var(--space-m);
  margin: 0;
}

/* --- Contact panel ------------------------------------------------------ */

.contact-grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }

.detail-list { list-style: none; margin: 0 0 var(--space-m); padding: 0; display: grid; gap: var(--space-m); }
.detail-list dt, .detail-list .detail-label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.detail-list a { font-weight: 600; text-decoration: none; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.hours th { font-weight: 500; color: var(--muted); }
.hours td { text-align: right; font-weight: 600; color: var(--purple); }

.map-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  filter: saturate(0.9);
}


.blog-search { margin-bottom: var(--space-l); max-width: 560px; }
.blog-search[hidden] { display: none; }
.blog-search .faq-search { margin-bottom: 0; }
.blog-search .faq-count { margin-top: var(--space-s); }
/* A button that reads as a link, for the inline "clear the search" action. */
.link-button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--purple); text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--gold-deep); }
.link-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.post-card[hidden] { display: none; }

/* Placeholder for a service that has no photograph yet. */
.svc-thumb-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--purple-soft) 0%, var(--cream) 100%);
  color: var(--purple);
  opacity: 0.5;
}
.svc-thumb-blank svg { width: 38%; height: auto; }

/* --- Blog index ----------------------------------------------------------
   Cards with a cover where one exists. Three of the nineteen posts have no
   cover on the old site, so the card has to read well without one rather than
   leaving a grey hole where the image should be.
   ------------------------------------------------------------------------ */

.post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-l) var(--space-m);
}

.post-card { display: flex; }
.post-card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.post-card-link:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 20px 42px -28px rgba(63, 32, 86, 0.55);
}
.post-card-link:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--teal);
}

.post-thumb { display: block; line-height: 0; background: var(--cream); }
.post-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.post-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.35rem 1.4rem;
  flex: 1;
}

/* Without a cover the card leans on type instead, with a gold rule standing in
   for the image so the row still has a consistent rhythm. */
.post-card--plain .post-card-link { border-top: 3px solid var(--gold); }

.post-meta {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-dot { margin: 0 0.4rem; }

.post-title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--purple);
  margin: 0;
  text-wrap: pretty;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.post-card-link:hover .post-title { color: var(--purple-deep); }

.post-excerpt {
  font-size: var(--step--1);
  color: var(--muted);
  text-wrap: pretty;
  /* Excerpts vary a lot in length; capping them keeps the grid tidy without
     truncating anything a reader needs, since the full post is one tap away. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-more {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.post-more::after { content: " \2192"; }

@media (prefers-reduced-motion: reduce) {
  .post-card-link { transition: none; }
  .post-card-link:hover { transform: none; }
}


/* --- Google rating badge -------------------------------------------------
   Floats bottom-left on the home page, one link to the live reviews. The
   star fill is driven by the actual rating, so 4.6 renders as 4.6. */
.grating {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem 0.65rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 38px -18px rgba(42, 21, 57, 0.45);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.grating:hover, .grating:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 18px 44px -18px rgba(42, 21, 57, 0.55);
}
.grating:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.grating-g { width: 26px; height: 26px; flex: none; }
.grating-body { display: flex; flex-direction: column; line-height: 1.25; }
.grating-score {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.grating-stars {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: #d8d2df;                      /* the unfilled track */
}
.grating-stars-on {
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;                      /* Google's review-star amber */
}
.grating-count {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.grating-count { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.grating:hover .grating-count { text-decoration-color: var(--gold); }

@media (max-width: 700px) {
  .grating { left: 0.75rem; bottom: 0.75rem; padding: 0.5rem 0.8rem 0.5rem 0.65rem; }
  .grating-g { width: 22px; height: 22px; }
  .grating-score { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .grating { transition: none; }
  .grating:hover { transform: none; }
}

/* --- Signature details ---------------------------------------------------
   Small marks of identity, all built from what the brand already owns: the
   teal smile, the gold rule, Fraunces. One animated element (the smile);
   everything else is static CSS that costs nothing.
   ------------------------------------------------------------------------ */

/* Selecting text answers in the brand's own voice. */
::selection { background: var(--purple); color: var(--cream); }

/* Prose links carry a gold underline that turns teal on hover - the same
   gold-to-teal conversation the buttons and cards already have. */
.prose a {
  color: var(--purple);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.prose a:hover { color: var(--purple-deep); text-decoration-color: var(--teal); }

/* The smile draws itself when it enters the viewport. The stroke is only
   hidden once JS confirms it will run the animation, so without JS - and
   under reduced motion - the mark simply sits there, complete. */
.js-smile .smile-rule path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-smile .smile-rule.is-drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

/* Blog posts open on a Fraunces drop cap - the editorial voice the serif
   was chosen for. Scoped to the article body so UI prose is untouched. */
.post-prose > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.4em;
  font-weight: 600;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--purple);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

/* Reading progress on blog posts: a hairline of gold that fills as you read.
   It reflects the reader's own scrolling, so it is not gated on the
   reduced-motion preference - nothing moves that they didn't move. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 200;
  pointer-events: none;
}

/* A rejected form submission announces itself instead of failing silently. */
.form-error {
  max-width: 640px;
  margin: 0 auto var(--space-m);
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #b3383e;
  border-radius: var(--radius-sm);
  background: #fdf0f0;
  color: #7c2d31;
  font-size: var(--step--1);
}
.form-error[hidden] { display: none; }

/* --- Footer -------------------------------------------------------------
   Plum gradient, the teal smile closing the page, and three columns that
   collapse to one on a phone.
   ------------------------------------------------------------------------ */

.site-footer {
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--cream);
  font-size: var(--step--1);
  line-height: 1.65;
}
.footer-smile { display: block; width: 100%; height: 22px; }
.footer-smile svg { display: block; width: 100%; height: 100%; }

.site-footer a { color: rgba(250, 246, 241, 0.88); text-decoration: none; transition: color 0.18s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--teal); outline: none; }
.site-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  padding-block: var(--space-xl) 0;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3vw, 1.65rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 0.6rem;
  font-optical-sizing: auto;
}
.footer-tagline {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-m);
}
.footer-contact p { margin: 0 0 0.9rem; }
.footer-label {
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.footer-phone { font-family: var(--font-serif); font-size: 1.25rem; color: var(--white) !important; }
.footer-phone:hover { color: var(--teal) !important; }
.footer-directions { display: inline-block; margin: 0.2rem 0 0.9rem; color: var(--teal) !important; }
.footer-directions:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-cta {
  display: inline-block;
  margin-top: 0.4rem;
  background: var(--gold);
  color: var(--purple-deep) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.footer-cta:hover, .footer-cta:focus-visible {
  background: #d4bd95; color: var(--purple-deep) !important; transform: translateY(-2px);
}

.footer-head {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 var(--space-m);
}
.footer-head--spaced { margin-top: var(--space-l); }

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.footer-hours { margin-bottom: 0; }
.footer-hours th, .footer-hours td {
  border-bottom-color: rgba(250, 246, 241, 0.12);
  padding: 0.55rem 0;
}
.footer-hours th { color: rgba(250, 246, 241, 0.72); font-weight: 400; }
.footer-hours td { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }
.footer-hours tr:last-child th, .footer-hours tr:last-child td { border-bottom: 0; }

/* Scoped under .site-footer so it beats the generic .hours rule on specificity
   rather than on source order - that fight is what put a near-white bar across
   the plum. A teal edge reads as a marker; a pale block read as an error. */
.site-footer .hours tr.is-today {
  background: rgba(88, 182, 175, 0.10);
  box-shadow: inset 3px 0 0 var(--teal);
}
.site-footer .hours tr.is-today th,
.site-footer .hours tr.is-today td { color: var(--teal); font-weight: 600; }
.site-footer .hours tr.is-today th { padding-left: 0.7rem; }

/* The word, for anyone who can't use the colour. */
.is-today-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  background: var(--teal);
  color: var(--purple-deep);
}

.footer-social { display: flex; gap: 0.85rem; margin-top: var(--space-m); }
.footer-social a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(194, 168, 120, 0.55);
  border-radius: 50%;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  background: var(--teal); border-color: var(--teal); transform: translateY(-2px);
}
.footer-social svg { width: 19px; height: 19px; fill: var(--cream); }
.footer-social a:hover svg, .footer-social a:focus-visible svg { fill: var(--purple-deep); }

.footer-bar {
  border-top: 1px solid rgba(194, 168, 120, 0.22);
  margin-top: var(--space-xl);
  padding: var(--space-m) var(--gutter);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(250, 246, 241, 0.62);
}
.footer-bar p { margin: 0 0 0.5rem; }
.footer-bar p:last-child { margin-bottom: 0; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.4rem; margin-bottom: 0.8rem;
}
.footer-legal a, .footer-cookie-link { color: rgba(250, 246, 241, 0.82); white-space: nowrap; }
.footer-cookie-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: none; transition: color 0.18s ease;
}
.footer-cookie-link:hover { color: var(--teal); }
.footer-cookie-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* --- Entry pop-up --------------------------------------------------------
   Built on the site's own tokens and typefaces rather than the two extra
   Google families the original embed pulled in - one less round trip, and the
   card reads as part of the site instead of a visitor from another design.
   ------------------------------------------------------------------------ */

.promo {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  padding: 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(26, 12, 36, 0.62);
  backdrop-filter: blur(3px);
}
.promo[hidden] { display: none; }

.promo-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;                       /* centres it, and still allows scrolling */
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(20, 8, 30, 0.55);
  animation: promo-rise 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes promo-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.promo-head {
  position: relative;
  padding: 2.1rem 2rem 1.9rem;
  background: radial-gradient(120% 120% at 85% 0%, #56306f 0%, var(--purple) 45%, var(--purple-deep) 100%);
  color: var(--white);
  text-align: center;
}

.promo-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.promo-close:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); }
.promo-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.promo-close svg { width: 18px; height: 18px; fill: none; }

.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.85rem;
}
.promo-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(88, 182, 175, 0.25);
}

.promo-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.promo-sub {
  margin: 0.85rem auto 0;
  max-width: 30ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.promo-body { padding: 1.6rem 1.75rem 1.9rem; }

.promo-offer {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 8px 22px -16px rgba(63, 32, 86, 0.4);
}
.promo-offer::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: var(--gold);
}

.promo-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.65rem; }
.promo-tag {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.62rem;
  border-radius: 100px;
}
.promo-tag--gold { background: rgba(194, 168, 120, 0.18); color: #7d6132; }
.promo-tag--teal { background: rgba(88, 182, 175, 0.16); color: #276d67; }

.promo-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.25rem; }
.promo-price b {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.promo-price span { font-size: var(--step--1); font-weight: 600; color: var(--ink); }

.promo-offer-name {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 0.45rem;
}
.promo-offer-copy { font-size: var(--step--1); line-height: 1.6; color: var(--muted); margin: 0; }
.promo-offer-copy strong { color: var(--purple); font-weight: 600; }

.promo-cta {
  display: block;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--purple);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 11px;
  box-shadow: 0 10px 24px -10px rgba(63, 32, 86, 0.7);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.promo-cta:hover {
  background: #4d2a68;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(63, 32, 86, 0.75);
}
.promo-cta:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.promo-foot {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: var(--step--2);
  color: var(--muted);
  line-height: 1.5;
}
.promo-foot a { color: var(--purple); font-weight: 600; }

@media (max-width: 420px) {
  .promo { padding: 0.85rem; }
  .promo-head { padding: 1.9rem 1.35rem 1.6rem; }
  .promo-body { padding: 1.35rem 1.15rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-card { animation: none; }
  .promo-cta, .promo-close { transition: none; }
  .promo-cta:hover { transform: none; }
}

.hours-holiday-note {
  margin: 0.5rem 0 0;
  font-size: var(--step--2);
  color: rgba(250, 246, 241, 0.6);
}
.section .hours-holiday-note { color: var(--muted); }

/* --- Cookie notice ------------------------------------------------------- */

.cookie-note {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 9999;
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--cream);
  box-shadow: 0 12px 40px rgba(42, 21, 57, 0.35);
}
/* The hidden attribute has to beat display:flex or the notice never hides. */
.cookie-note[hidden] { display: none; }
.cookie-note { flex-wrap: wrap; z-index: 10001; }
.cookie-note p { margin: 0; font-size: var(--step--1); color: rgba(250, 246, 241, 0.9); }
.cookie-text { flex: 1 1 320px; }
.cookie-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; margin-left: auto; }
/* Reject and Accept are the same size and weight - consent only counts when
   refusing is as easy as agreeing. */
.cookie-btn {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cookie-btn--accept { background: var(--gold); color: var(--purple-deep); }
.cookie-btn--accept:hover { background: #d4bd95; }
.cookie-btn--reject { background: transparent; color: var(--cream); border-color: rgba(250, 246, 241, 0.55); }
.cookie-btn--reject:hover { background: rgba(250, 246, 241, 0.12); border-color: var(--cream); }
.cookie-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cookie-note strong { font-family: var(--font-serif); font-weight: 500; color: var(--white); }
.cookie-note a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.cookie-close {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(250, 246, 241, 0.4);
  border-radius: 50%;
  color: var(--cream);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cookie-close:hover { background: rgba(250, 246, 241, 0.1); border-color: var(--cream); }
.cookie-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .site-footer a, .footer-social a, .footer-cta, .cookie-close { transition: none; }
  .footer-social a:hover, .footer-cta:hover { transform: none; }
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, a.card:hover { transform: none; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav, .btn, .hero { background: none !important; color: #000 !important; }
  body { font-size: 11pt; }
}

/* --- Credibility band ---------------------------------------------------
   Both recommended landing patterns for this product type place proof
   directly after the hero, before any CTA. The old site had none at all.

   These are verifiable facts about the practice, not marketing claims, and
   they are set as an editorial line rather than stat tiles - the big-number
   tile row is the default answer for every site of this kind.
   ----------------------------------------------------------------------- */

.credibility {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-l);
}
.credibility-line {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--purple);
  max-width: 26ch;
  margin: 0 0 var(--space-m);
}
.credibility-line em {
  font-style: normal;
  color: var(--teal-deep);
}
.credibility-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s) var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.credibility-facts li {
  border-top: 2px solid var(--gold);
  padding-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.credibility-facts strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

/* --- Reviews ------------------------------------------------------------ */

.review-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--space-l);
}
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin: 0;
}
.review blockquote {
  margin: 0 0 var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  font-style: normal;
}
.review figcaption strong { color: var(--purple); display: block; font-weight: 600; }

.review-stars { display: flex; gap: 2px; margin-bottom: var(--space-s); }
.review-stars svg { width: 16px; height: 16px; fill: var(--gold); }

/* --- Before / after comparison ------------------------------------------
   WCAG 2.2 requires a single-pointer alternative to any drag operation, so
   this is driven by a native range input: it works with mouse, touch,
   arrow keys and assistive tech, with no drag-only path.
   ----------------------------------------------------------------------- */

.ba {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--purple-soft);
  line-height: 0;
}
.ba-frame { position: relative; aspect-ratio: 4 / 3; }
.ba-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The "after" image is revealed from the left as the slider moves right. */
.ba-after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(49, 25, 65, 0.25);
  pointer-events: none;
}
.ba-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(49, 25, 65, 0.35);
}

.ba-range {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  margin: 0;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.ba-range:focus-visible { opacity: 1; outline: 3px solid var(--teal); outline-offset: -3px; }

.ba-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 0.6rem;
}

/* --- Scroll reveal -------------------------------------------------------
   Subtle tier: a short fade with an 8-16px rise, so it reads as a fade
   rather than a slide. Content is visible by default and only hidden once
   JS confirms it can reveal it again, so it never disappears for crawlers
   or for users without JavaScript.
   ----------------------------------------------------------------------- */

[data-reveal] { opacity: 1; }
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Target size ---------------------------------------------------------
   WCAG 2.2 AA asks for 24x24 CSS px pointer targets. The social icons in
   the utility strip were 17px with no padding.
   ----------------------------------------------------------------------- */

.utility-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

a, button, summary, label.consent, [role="button"] { cursor: pointer; }

/* --- Live open/closed status ---------------------------------------------
   The most useful element on a local contact page. Rendered only after JS
   confirms the current time, so it can never show a stale answer.
   ----------------------------------------------------------------------- */

.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  margin: var(--space-m) 0 0;
}
.open-status[hidden] { display: none; }
.open-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); flex: none; }
.open-status.is-open .open-dot { background: #2e8b57; box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.18); }
.open-status.is-open .open-text { color: #1f6b41; }
.open-status.is-closed .open-dot { background: #9a4a4a; }
.open-status.is-closed .open-text { color: #7d3b3b; }

/* --- Travel + what3words ------------------------------------------------ */

.travel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.travel-list li { display: flex; gap: 0.75rem; align-items: baseline; font-size: var(--step--1); }
.travel-mode {
  flex: none;
  min-width: 86px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--purple);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-align: center;
}
.w3w-mark { color: #e11f26; font-weight: 700; margin-right: 0.35rem; }

/* --- FAQ page ------------------------------------------------------------
   Search and topic filters are progressive enhancement: the controls stay
   hidden until JS confirms it can drive them, so a visitor without JS sees
   every question rather than a dead search box.
   ----------------------------------------------------------------------- */

.faq-page { max-width: var(--maxw-prose); }

.faq-controls { margin-bottom: var(--space-l); }
.faq-controls[hidden] { display: none; }

.faq-search { position: relative; margin-bottom: var(--space-s); }
.faq-search svg {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.faq-search input {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  padding: 0.85rem 1.1rem 0.85rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
}
.faq-search input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(88, 182, 175, 0.3);
  outline-offset: 0;
}

.faq-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-pill {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--purple);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  min-height: 36px;
}
.faq-pill:hover { border-color: var(--gold); }
.faq-pill[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: var(--white); }

.faq-count { font-size: var(--step--1); color: var(--muted); margin: var(--space-s) 0 0; }

.faq-topic { margin-top: var(--space-l); }
.faq-topic[hidden] { display: none; }
.faq-topic-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-s); }
.faq-topic-head h2 { font-size: var(--step-1); margin: 0; }
.faq-topic-count {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.7rem;
  color: #7d6532;
  background: #f2e9d8;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  font-variant-numeric: tabular-nums;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  padding: 0;
}
.faq-item[hidden] { display: none; }
.faq-item[open] { border-color: var(--gold); box-shadow: 0 8px 28px -18px rgba(63, 32, 86, 0.45); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--purple);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--teal-deep);
  flex: none;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-num {
  flex: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  color: #7d6532;
  background: #f2e9d8;
  border-radius: 3px;
  padding: 0.25rem 0.45rem;
  margin-top: 0.15rem;
  min-width: 2.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.faq-q { flex: 1; }
.faq-a { padding: 0 1.2rem 1.2rem 4.1rem; color: var(--muted); font-size: var(--step--1); }
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-a strong { color: var(--purple); }
.faq-a table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-s); font-variant-numeric: tabular-nums; }
.faq-a th, .faq-a td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); }
.faq-a td:last-child { text-align: right; font-weight: 600; color: var(--purple); white-space: nowrap; }
@media (max-width: 560px) { .faq-a { padding-left: 1.2rem; } }

.faq-empty { text-align: center; padding: var(--space-l) var(--space-m); color: var(--muted); }
.faq-empty[hidden] { display: none; }

.faq-cta {
  margin-top: var(--space-xl);
  background: linear-gradient(135deg, #f2e9d8 0%, #f8f2e6 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-l) var(--space-m);
  text-align: center;
}
.faq-cta p { color: var(--muted); max-width: 52ch; margin: 0 auto var(--space-m); }

/* Today's row in any opening-hours table. Answers "are they open today?" at a
   glance, which is the question the table exists to answer. */
.hours tr.is-today th, .hours tr.is-today td { color: var(--purple); font-weight: 700; }
.hours tr.is-today { background: var(--purple-soft); }
.section--deep .hours tr.is-today { background: rgba(255, 255, 255, 0.1); }
.section--deep .hours tr.is-today th, .section--deep .hours tr.is-today td { color: var(--white); }

/* ==========================================================================
   June 2026 design system
   The signature devices from Ola's own designs: the teal smile-rule divider
   and the "Proudly Independent" seal. These replace the street-nameplate
   direction, which was a different visual language.
   ========================================================================== */

/* --- Smile rule: the recurring divider under section headings ------------ */

.smile-rule {
  display: block;
  width: 58px;
  height: 13px;
  color: var(--teal);
  margin: 0.9rem 0 1.4rem;
}
.section-head .smile-rule { margin-inline: auto; }
.smile-rule--lg { width: 120px; height: 18px; }

/* --- Centred section heading -------------------------------------------- */

.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-l); }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin-top: 0.3rem; }
.section-head p { color: var(--muted); margin-top: 0.8rem; }
.section--deep .section-head p { color: #d6c9e5; }

/* --- The Proudly Independent seal ---------------------------------------
   Ola's established brand mark, used beside the independence copy exactly as
   the June home page does. Decorative: the same claim is in the text next to
   it, so it is hidden from assistive tech rather than read out twice.
   ----------------------------------------------------------------------- */

.seal {
  width: 210px;
  height: 210px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--teal);
  border-radius: 50%;
  opacity: 0.6;
}
.seal .seal-big {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--purple);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}
.seal .seal-sm {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 0.55rem;
}
.seal .seal-est {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.45rem;
}
@media (max-width: 430px) {
  .seal { width: 170px; height: 170px; }
  .seal .seal-big { font-size: 1.28rem; }
}

/* --- Independence block: seal beside the copy --------------------------- */

.indie {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.indie .indie-copy { flex: 1; }
.indie .indie-copy p { color: var(--muted); max-width: 46ch; }
@media (max-width: 760px) {
  .indie { flex-direction: column; text-align: center; gap: var(--space-l); }
  .indie .indie-copy p { margin-inline: auto; }
  .indie .eyebrow { justify-content: center; }
}

/* --- Why cards ---------------------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-m);
}
.why-card {
  background: var(--cream);
  border: 1px solid rgba(63, 32, 86, 0.06);
  border-radius: var(--radius);
  padding: var(--space-m);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); background: var(--white); }
.why-card .why-ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--lilac);
  display: grid; place-items: center;
  color: var(--purple);
  margin-bottom: var(--space-s);
}
.why-card .why-ic svg { width: 22px; height: 22px; }
.why-card h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.why-card p { font-size: var(--step--1); color: var(--muted); margin: 0; }

/* --- Service cards on the dark band ------------------------------------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-m);
}
.svc-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: var(--space-m);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease, transform 0.3s ease;
}
.svc-card::before {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 100%; width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.svc-card:hover, .svc-card:focus-visible { background: rgba(255, 255, 255, 0.09); transform: translateY(-5px); }
.svc-card:hover::before, .svc-card:focus-visible::before { transform: scaleY(1); }
.svc-card .svc-ic {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold);
  display: grid; place-items: center;
  color: var(--purple-deep);
  margin-bottom: var(--space-s);
}
.svc-card .svc-ic svg { width: 22px; height: 22px; }
.svc-card h3 { color: var(--white); font-size: 1.16rem; margin-bottom: 0.5rem; }
.svc-card p { font-size: var(--step--1); color: rgba(255, 255, 255, 0.82); margin: 0; }
.svc-tag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--font-sans);
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}
.svc-tag--nhs { background: #dbeee1; color: #2e6b43; }
.svc-tag--pop { background: var(--gold); color: var(--purple-deep); }

/* --- Partner logos and accreditations ----------------------------------- */

.plabel {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-m);
}
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-s); }
.logo-tile {
  height: 62px;
  min-width: 118px;
  padding: 0 1.4rem;
  background: var(--white);
  border: 1px solid rgba(63, 32, 86, 0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.logo-tile:hover { filter: none; opacity: 1; box-shadow: var(--shadow-sm); }
.logo-tile img { max-height: 36px; max-width: 128px; width: auto; }

.accred-row { display: flex; justify-content: center; align-items: stretch; gap: var(--space-s); flex-wrap: wrap; }
.accred-tile {
  padding: 1.1rem 1.5rem;
  background: var(--white);
  border: 1px solid rgba(63, 32, 86, 0.12);
  border-radius: 12px;
  display: flex; align-items: center; gap: 0.8rem;
  font-size: var(--step--1);
  color: var(--ink);
  text-decoration: none;
  max-width: 300px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
a.accred-tile:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.accred-tile .ab {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--lilac);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--purple);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .why-card:hover, .svc-card:hover, a.accred-tile:hover { transform: none; }
}

/* --- Hero banner ---------------------------------------------------------
   Full-bleed photograph with a plum scrim, matching the June header banner.
   The image is decorative (the headline carries the meaning), so it is
   aria-hidden with an empty alt rather than described twice.
   ----------------------------------------------------------------------- */

.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 42vw, 520px);
  border-bottom: 3px solid var(--gold);
  overflow: hidden;
  isolation: isolate;
}
.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  z-index: -2;
}
.hero-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(49, 25, 65, 0.62) 0%, rgba(49, 25, 65, 0.68) 50%, rgba(42, 21, 57, 0.82) 100%);
}
.hero-banner-caption { text-align: center; color: var(--white); padding-block: var(--space-l); }
.hero-banner-caption h1 {
  color: var(--white);
  max-width: 20ch;
  margin-inline: auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.hero-banner-rule {
  display: block;
  width: 72px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: var(--space-m) auto 0;
}
.hero-banner .open-status { margin: var(--space-m) auto 0; }
.open-status--light {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
}
.open-status--light.is-open .open-text { color: #9fe0c8; }
.open-status--light.is-closed .open-text { color: #e6c9c9; }
.hero-banner .btn-row { margin-top: var(--space-m); }

/* --- Buttons used on dark grounds --------------------------------------- */

.btn--gold { background: var(--gold); color: var(--purple-deep); }
.btn--gold:hover { background: var(--gold-deep); color: var(--white); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.6); color: var(--white); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); }

/* --- Trust strip --------------------------------------------------------- */

.trust {
  background: var(--purple);
  color: var(--lilac);
}
.trust .wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem 2.8rem;
  padding-block: 1.25rem;
  font-size: var(--step--1);
}
.trust .ci { display: inline-flex; align-items: center; gap: 0.55rem; }
.trust .ci b { color: var(--white); font-family: var(--font-serif); font-weight: 600; }
.trust svg { flex: none; }

/* --- iTero --------------------------------------------------------------- */

.itero-top { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center; }
@media (min-width: 880px) { .itero-top { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); } }
.itero-intro { color: var(--muted); max-width: 46ch; }
.callout {
  background: var(--blush);
  border-left: 3px solid var(--teal);
  border-radius: 0 12px 12px 0;
  padding: 0.95rem 1.15rem;
  font-size: var(--step--1);
  color: var(--purple);
}
.itero-visual {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(63, 32, 86, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-m);
  text-align: center;
}
.itero-pill {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--teal);
  color: var(--purple-deep);
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
}
.itero-logo { height: 30px; width: auto; margin: 0 auto 0.9rem; }
.itero-scanner { max-height: 260px; width: auto; margin: 0 auto; }

.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.feat {
  background: var(--white);
  border: 1px solid rgba(63, 32, 86, 0.08);
  border-radius: var(--radius);
  padding: var(--space-m);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feat:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feat h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.feat p { font-size: var(--step--1); color: var(--muted); margin: 0; }

@media (prefers-reduced-motion: reduce) { .feat:hover { transform: none; } }

/* --- Contact page --------------------------------------------------------
   Three information cards, per the June contact design: Find us, Opening
   hours, Getting here.
   ----------------------------------------------------------------------- */

/* The treatment photographs are 900px square portraits. Stretching one across
   the full column both upscaled it past its native width and cropped a panorama
   out of a portrait, which cut through faces. Capping the frame below 900px and
   using a 3:2 crop biased upward keeps the subject whole and the pixels honest. */
.feature-img {
  position: relative;
  margin: var(--space-l) auto 0;
  max-width: 760px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.feature-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 32%;
  /* Same duotone as the service cards, so a treatment page and its card in the
     grid read as the same thing. Unlike the cards this one stays put - there is
     no hover state to reveal the colour underneath. */
  filter: grayscale(1) contrast(1.02);
}
/* Opt-out for photographs of the real practice and clinical evidence. */
.feature-img--plain img { filter: none; }
.feature-img--plain::after { display: none; }

.feature-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(63, 32, 86, 0.4), rgba(63, 32, 86, 0.58));
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

.info-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: var(--space-m);
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.info-card h2 { font-size: 1.3rem; margin-bottom: var(--space-s); }
.info-address { font-style: normal; line-height: 1.7; margin-bottom: var(--space-s); }

.w3w {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--lilac);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  margin-bottom: var(--space-s);
  font-size: var(--step--1);
}
.w3w:hover { background: #e4daec; color: var(--ink); }
.w3w small { color: var(--muted); }

.access { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: var(--step--1); margin: 0 0 var(--space-s); }
.tick {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem; flex: none;
  background: #2e8b57; color: var(--white);
  border-radius: 50%; font-size: 0.8rem;
}

.maplink { color: var(--purple); font-weight: 600; text-decoration: none; font-size: var(--step--1); }
.maplink:hover { text-decoration: underline; }

.emergency {
  font-size: var(--step--1);
  margin: var(--space-s) 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}

.map-wrap {
  margin-top: var(--space-m);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.map-embed { width: 100%; height: 380px; aspect-ratio: auto; border: 0; }
@media (max-width: 520px) { .map-embed { height: 300px; } }

/* --- Closing CTA band ---------------------------------------------------- */

.cta-band {
  background: linear-gradient(170deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: var(--space-l) var(--space-m);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: #e5dcec; max-width: 34em; margin: 0 auto var(--space-m); }

/* --- New patients page --------------------------------------------------- */

.np-hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(88, 182, 175, 0.18), transparent 55%),
    radial-gradient(110% 80% at -5% 110%, rgba(194, 168, 120, 0.18), transparent 55%),
    var(--cream);
  padding-block: var(--space-xl);
}
.np-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center; }
@media (min-width: 880px) { .np-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); } }
.np-hero .h1-sub {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  color: var(--teal-deep);
  margin-top: 0.6rem;
  letter-spacing: 0;
}

.np-aside {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  box-shadow: 0 28px 60px -34px rgba(63, 32, 86, 0.45);
}
.np-aside h2 { font-size: 1.18rem; margin-bottom: 0.2rem; }
.np-price-row { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.5rem 0 0.8rem; flex-wrap: wrap; }
.np-price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.np-offpeak { font-size: var(--step--1); color: var(--teal-deep); font-weight: 600; }

.btn--teal { background: var(--teal); color: var(--purple-deep); }
.btn--teal:hover { background: var(--teal-deep); color: var(--white); }

/* Four facts strip */
.np-stats { background: var(--purple); color: #efe6f1; }
.np-stats .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-m);
  padding-block: var(--space-m);
  text-align: center;
}
.np-stat {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.np-stat span { color: var(--gold); }
.np-stat-label { font-size: 0.78rem; color: #cbb9d4; margin: 0.2rem 0 0; }

/* Registration cards */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); margin-top: var(--space-m); }
.reg-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); }
.reg-card--nhs { border-left: 3px solid var(--teal); }
.reg-card--private { border-left: 3px solid var(--gold); }
.reg-card p { margin: 0; }
.reg-card strong { color: var(--purple); }

/* Honest picture */
.honest-block { max-width: 74ch; }
.honest-block + .honest-block {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pullquote {
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.05);
  padding: 1.1rem 1.5rem;
  border-radius: 0 14px 14px 0;
  margin: var(--space-m) 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--white);
  font-style: italic;
}
.nhs-alert {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  margin-top: var(--space-l);
  max-width: 760px;
}
.nhs-alert h3 { color: var(--purple); font-size: 1.3rem; margin-bottom: 0.4rem; }
.nhs-alert p, .nhs-alert li { color: var(--muted); }
.nhs-alert-label {
  font-weight: 700; color: var(--purple);
  margin: 1rem 0 0.3rem;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nhs-alert ul { margin: 0 0 var(--space-m); padding-left: 1.1rem; }
.nhs-alert strong { color: var(--purple); }

/* Pricing cards */
.np-price-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 880px) { .np-price-grid { grid-template-columns: 1.4fr 1fr; } }
.pcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-m); }
.pcard--lead { background: linear-gradient(180deg, #fff, #fff 62%, var(--blush)); }
.pcard h3 { font-size: 1.3rem; }

.ticks { list-style: none; padding: 0; margin: 0 0 var(--space-m); }
.ticks li { padding: 0.35rem 0 0.35rem 2rem; position: relative; font-size: var(--step--1); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.7rem;
  width: 1rem; height: 0.55rem;
  border-left: 2px solid var(--teal-deep);
  border-bottom: 2px solid var(--teal-deep);
  transform: rotate(-45deg);
}

.note-panel {
  background: var(--blush);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.3rem;
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: var(--space-m);
}

/* NHS vs private comparison */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  margin-top: var(--space-m);
}
@media (min-width: 880px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col + .compare-col { border-top: 1px solid var(--line); }
@media (min-width: 880px) { .compare-col + .compare-col { border-top: 0; border-left: 1px solid var(--line); } }
.compare-head {
  margin: 0;
  padding: 1.2rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
}
.compare-head--nhs { background: var(--blush); color: var(--purple); }
.compare-head--private { background: var(--purple); color: var(--white); }
.compare-body { padding: 0.5rem 1.5rem 1.5rem; }
.compare-grp {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep); margin: 1.1rem 0 0.5rem;
}
.compare-list { list-style: none; padding: 0; margin: 0; }
.compare-list li {
  padding: 0.4rem 0 0.4rem 1.8rem;
  position: relative;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--line);
}
.compare-list li:last-child { border-bottom: 0; }
.compare-list .yes::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-deep); font-weight: 700; }
.compare-list .no::before { content: "\2013"; position: absolute; left: 0; color: #b8a7c0; font-weight: 700; }

/* --- Fees page ----------------------------------------------------------- */

.fees-hero {
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--white);
  padding-block: var(--space-xl) 0;
  position: relative;
}
.fees-hero h1 { color: var(--white); max-width: 16ch; }
.fees-hero .eyebrow { color: var(--gold); }
.fees-hero .eyebrow::before { background: var(--gold); }
.fees-smile { display: block; width: 100%; height: auto; margin-top: var(--space-l); }

.guide-note {
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 70ch;
  border-left: 3px solid var(--teal);
  padding-left: 1rem;
  margin: var(--space-s) 0 0;
}

.jump-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--space-l) 0 var(--space-m); }
.jump-nav a {
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--purple);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.jump-nav a:hover { background: var(--purple); color: var(--white); border-color: var(--purple); }

.fee-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-m) 0.6rem;
  margin-bottom: var(--space-m);
  scroll-margin-top: 90px;
  box-shadow: 0 6px 22px rgba(42, 21, 57, 0.05);
}
.fee-cat-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.fee-cat-head h2 { font-size: 1.18rem; margin: 0; }
.fee-cat-sub { color: var(--muted); font-size: 0.84rem; margin: 0.15rem 0 0; }

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0.1rem;
  border-top: 1px solid var(--line);
}
.fee-cat .fee-row:first-of-type { border-top: 0; }
.fee-name { font-weight: 500; font-size: var(--step--1); }
.fee-name small { display: block; color: var(--muted); font-weight: 400; font-size: 0.78rem; margin-top: 0.1rem; }
.fee-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--purple);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.fee-from { font-family: var(--font-sans); font-weight: 500; font-size: 0.74rem; color: var(--muted); }

/* Finance panel */
.finance {
  background: linear-gradient(165deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-l) var(--space-m);
}
.finance h2 { color: var(--white); max-width: 22ch; }
.finance p { color: #ece4f0; }
.finance .eyebrow { color: var(--gold); }
.finance .eyebrow::before { background: var(--gold); }
.finance-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: start; }
@media (min-width: 760px) { .finance-grid { grid-template-columns: 1.5fr 1fr; gap: var(--space-xl); } }
.finance-points { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; gap: 0.7rem; }
.finance-points li { position: relative; padding-left: 2rem; color: #f3edf6; font-size: var(--step--1); }
.finance-points li::before {
  content: "";
  position: absolute; left: 0.25rem; top: 0.5rem;
  width: 0.9rem; height: 0.5rem;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.finance-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: var(--space-m);
  text-align: center;
}
.finance-card img { max-width: 150px; height: auto; background: var(--white); padding: 0.7rem 1rem; border-radius: var(--radius-sm); margin-inline: auto; }
.finance-apr { font-size: 0.78rem; color: #cbbdd6; margin: 0.9rem 0 0; }

.legal {
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 70ch;
  margin: var(--space-xl) auto 0;
  line-height: 1.6;
  text-align: center;
}

/* --- Practice policies page ---------------------------------------------- */

.pol-hero {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(88, 182, 175, 0.16) 0%, rgba(88, 182, 175, 0) 46%),
    radial-gradient(120% 140% at 0% 0%, rgba(194, 168, 120, 0.2) 0%, rgba(194, 168, 120, 0) 52%),
    linear-gradient(180deg, var(--cream) 0%, #fbf9f5 100%);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-xl);
}
.pol-hero h1 { max-width: 17ch; }

/* Mobile jump bar */
.pol-jump {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.8rem 1.25rem;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pol-jump::-webkit-scrollbar { display: none; }
.pol-jump a {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  white-space: nowrap;
}
@media (min-width: 900px) { .pol-jump { display: none; } }

.pol-layout { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: var(--space-l); }
@media (min-width: 900px) {
  .pol-layout { grid-template-columns: 248px 1fr; gap: var(--space-xl); align-items: start; }
}

.pol-toc { display: none; }
@media (min-width: 900px) { .pol-toc { display: block; position: sticky; top: 1.5rem; } }
.pol-toc h2 {
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin: 0 0 0.9rem;
}
.pol-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.pol-toc li { counter-increment: toc; }
.pol-toc a {
  display: flex; gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0;
  text-decoration: none;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.pol-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.72rem; color: var(--gold-deep); font-weight: 700;
  min-width: 20px; font-variant-numeric: tabular-nums;
}
.pol-toc a:hover, .pol-toc a.is-active { color: var(--purple); font-weight: 600; }
.pol-toc a.is-active::before { color: var(--teal-deep); }

.pol-main { min-width: 0; }
.policy { scroll-margin-top: 72px; margin-bottom: var(--space-l); }
.pol-head {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin-bottom: var(--space-m);
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--purple);
}
.pol-num {
  font-family: var(--font-serif);
  font-size: 1rem; color: var(--gold-deep); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pol-head h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }

.pol-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(63, 32, 86, 0.05), 0 10px 34px rgba(63, 32, 86, 0.07);
  padding: var(--space-m);
  max-width: none;
}
.pol-card h3 { font-size: 1.04rem; font-family: var(--font-sans); font-weight: 700; margin-top: var(--space-m); }
.pol-card > :first-child { margin-top: 0; }

/* Commitments, two columns */
.commit-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 680px) { .commit-grid { grid-template-columns: 1fr 1fr; } }
.commit {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(63, 32, 86, 0.07);
  padding: var(--space-m);
  overflow: hidden;
}
.commit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.commit--ours::before { background: var(--purple); }
.commit--yours::before { background: var(--teal); }
.commit-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 0.4rem;
}
.commit--ours .commit-tag { color: var(--gold-deep); }
.commit--yours .commit-tag { color: var(--teal-deep); }
.commit h3 { font-size: 1.32rem; margin-bottom: var(--space-s); }
.commit--yours .ticks li::before { border-color: var(--teal-deep); }
.commit .ticks li::before { border-color: var(--purple); }

/* Callouts */
.pol-callout {
  display: flex; gap: 0.9rem; align-items: flex-start;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: var(--space-m) 0;
  font-size: var(--step--1);
}
.pol-callout p { margin: 0; }
.pol-callout-ic {
  flex: none; width: 28px; height: 28px;
  border-radius: 8px; color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700;
}
.pol-callout--gold { background: #f6efe2; border: 1px solid #e6d6b6; border-left: 4px solid var(--gold); color: #6e5a23; }
.pol-callout--gold .pol-callout-ic { background: var(--gold-deep); }
.pol-callout--teal { background: #e7f6f3; border: 1px solid #bee6df; border-left: 4px solid var(--teal); color: #1f5b53; }
.pol-callout--teal .pol-callout-ic { background: var(--teal-deep); }
.pol-callout--plum { background: var(--blush); border: 1px solid #decbe7; border-left: 4px solid var(--purple); color: #3e2a4d; }
.pol-callout--plum .pol-callout-ic { background: var(--purple); }
.pol-callout strong { color: inherit; }

/* The 48-hour stat strip */
.stat-strip {
  display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap;
  background: linear-gradient(120deg, #f6efe2 0%, #fbf6ec 100%);
  border: 1px solid #e6d6b6;
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}
.stat-big {
  font-family: var(--font-serif);
  font-size: 3rem; line-height: 1; font-weight: 700;
  color: var(--purple); margin: 0;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.stat-big small { font-size: 1.05rem; font-weight: 500; color: var(--gold-deep); margin-left: 0.2rem; }
.stat-txt { font-size: var(--step--1); max-width: 48ch; color: #5a4a2a; flex: 1 1 240px; margin: 0; }
.stat-txt b { color: var(--purple); }

/* ==========================================================================
   Services page — the June services layout
   ========================================================================== */

.topline { height: 4px; background: linear-gradient(90deg, var(--gold), var(--teal), var(--purple)); }

.svc-hero { padding: clamp(40px, 9vw, 72px) 0 36px; text-align: center; background: var(--cream); }
.svc-hero h1 { margin: 0 auto; max-width: 14ch; }
.svc-place {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  color: #6a4d80;
}
.svc-rule { width: 64px; height: 2px; background: var(--gold); border: 0; border-radius: 2px; margin: 1.4rem auto 1.5rem; }
.svc-lede { max-width: 60ch; margin: 0 auto; color: var(--muted); font-size: var(--step-0); }

.svc-main { padding-bottom: var(--space-xl); background: var(--cream); }
.svc-group { padding: 1.4rem 0; }

/* Label then rule, per the June services page. */
.svc-group-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.svc-group-head h2 {
  font-family: var(--font-sans);
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--gold-deep);
  white-space: nowrap;
}
.svc-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.svc-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.svc-tile {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.svc-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--teal), 0 18px 40px -22px rgba(63, 32, 86, 0.55);
}

.svc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.svc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.55s ease, transform 0.8s ease;
}
/* Gold corner arc - the quiet signature on these cards. */
.svc-arc {
  position: absolute;
  top: -26px; right: -26px;
  width: 60px; height: 60px;
  border-bottom-left-radius: 60px;
  background: var(--gold);
  opacity: 0.92;
  transition: transform 0.45s ease;
  z-index: 1;
}

.svc-body { padding: 1.1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.svc-tile h3 { font-size: 1.4rem; margin: 0 0 0.35rem; line-height: 1.15; }
.svc-tile p { margin: 0 0 1rem; font-size: 0.92rem; color: var(--muted); flex: 1; }
.svc-more {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #2f9387;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.svc-more svg { transition: transform 0.3s ease; }

/* Colour returns on hover only where hover genuinely exists. On a touch screen
   the photos sit in full colour at rest, because there is nothing to hover. */
@media (hover: hover) {
  .svc-thumb img { filter: grayscale(1) contrast(1.02); }
  .svc-thumb::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(63, 32, 86, 0.4), rgba(63, 32, 86, 0.58));
    mix-blend-mode: multiply;
    transition: opacity 0.55s ease;
  }
  .svc-tile:hover, .svc-tile:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -22px rgba(63, 32, 86, 0.55);
    border-color: #e0d4e9;
  }
  .svc-tile:hover .svc-thumb img,
  .svc-tile:focus-visible .svc-thumb img { filter: none; transform: scale(1.04); }
  .svc-tile:hover .svc-thumb::after,
  .svc-tile:focus-visible .svc-thumb::after { opacity: 0; }
  .svc-tile:hover .svc-arc, .svc-tile:focus-visible .svc-arc { transform: scale(1.18); }
  .svc-tile:hover .svc-more svg, .svc-tile:focus-visible .svc-more svg { transform: translateX(4px); }
}
@media (hover: none) { .svc-tile:active { transform: scale(0.985); } }

.svc-extra { margin: var(--space-l) auto 0; }

/* --- New patients callout (shared by every page) ------------------------- */
.np-callout {
  position: relative;
  overflow: hidden;
  margin: 3rem 0 0;
  background: linear-gradient(135deg, #3f2056 0%, #4a2566 55%, #341a48 100%);
  border-radius: 22px;
  padding: 2.2rem 2.4rem;
  display: flex;
  gap: 1.7rem;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 24px 48px -28px rgba(63, 32, 86, 0.65);
}
.np-callout::before {
  content: "";
  position: absolute; top: -70px; right: -60px;
  width: 190px; height: 190px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(194, 168, 120, 0.55), rgba(194, 168, 120, 0) 70%);
}
.np-callout::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold), var(--teal));
}
.np-callout-badge {
  width: 74px; height: 74px; flex: none;
  border-radius: 18px;
  background: var(--cream);
  display: grid; place-items: center;
  position: relative; z-index: 1;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}
.np-callout-badge svg { width: 38px; height: 38px; }
.np-callout-text { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.np-callout-text h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--gold);
  margin: 0 0 0.6rem;
}
.np-callout-text p { margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; }
.np-callout-text a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--teal); }
.np-callout-text a:hover { color: #fff; border-color: #fff; }
.np-callout-cta {
  flex: none;
  background: var(--gold);
  color: var(--purple);
  text-decoration: none;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.92rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 22px -10px rgba(194, 168, 120, 0.7);
  transition: background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}
.np-callout-cta:hover { background: #d4bc92; color: var(--purple); transform: translateY(-2px); }

@media (max-width: 600px) {
  .svc-cards { grid-template-columns: 1fr; }
  .np-callout { padding: 1.6rem 1.4rem; }
  .np-callout-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tile, .svc-thumb img, .svc-arc, .svc-more svg, .np-callout-cta { transition: none !important; }
  .svc-tile:hover { transform: none; }
}

/* Header responsive behaviour, per the June header breakpoints. */
@media (max-width: 1240px) { .strapline { display: none; } }
@media (max-width: 1060px) {
  .header-badge, .u-hours, .header-call, .header-book { display: none; }
  .logo img { height: 122px; }
  .nav-toggle { display: flex; }
  .nav-wrap { display: none; }
  .nav-wrap.is-open { display: block; }
  .nav-mobile-cta { display: block; padding: 0.5rem 1.5rem 0; border-bottom: 0; }
  .nav-mobile-cta a {
    display: block; text-align: center; border-radius: var(--radius-sm);
    font-weight: 600; padding: 0.9rem 1rem; text-decoration: none;
  }
  .nav-mobile-book a { background: var(--gold); color: #3a2c14; }
  .nav-mobile-call a { background: rgba(63, 32, 86, 0.06); color: var(--purple); }
  .nav-mobile-call { padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .utility-inner { padding-inline: 0; }
  .u-address { font-size: 12px; }
  .logo img { height: 102px; }
}

/* ==========================================================================
   Team page — the June meet-our-team design
   ========================================================================== */

.wp-team {
  --wp-purple-soft: #f2ebf8;
  --wp-purple-ring: #e4d7f0;
  --wp-teal-soft: #e3f4f1;
  --wp-teal-ring: #cceae5;
  --wp-gold-soft: #f6f0e4;
  --wp-gold-ring: #e8dcc4;
  --wp-line: #ece7f1;

  /* Sits on the section's own cream rather than its former lilac card -
     the page reads as one surface, no seam at the card edge. */
  background: transparent;
  padding: 2.5rem 0;
  max-width: 1140px;
  margin: 0 auto;
}

.wp-hero { text-align: center; margin: 0 0 0.5rem; }
.wp-eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin: 0 0 0.65rem;
}
.wp-h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.05; margin: 0 0 0.9rem; }
.wp-intro { font-size: 1.03rem; line-height: 1.65; color: var(--muted); max-width: 560px; margin: 0 auto; }
.wp-rule { display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--gold); margin: 1.4rem auto 0; }

.wp-section { display: flex; align-items: center; gap: 0.9rem; margin: 2.75rem 0 1.4rem; }
.wp-section .lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.wp-section .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.wp-section .line { flex: 1; height: 1px; background: var(--wp-line); }
.wp-section--dentists .lbl { color: var(--purple); }
.wp-section--dentists .dot { background: var(--purple); }
.wp-section--hygienists .lbl { color: var(--teal-deep); }
.wp-section--hygienists .dot { background: var(--teal); }
.wp-section--care .lbl { color: var(--gold-deep); }
.wp-section--care .dot { background: var(--gold); }

.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 1.4rem; }

.wp-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--wp-line);
  border-radius: 20px;
  padding: 1.9rem 1.4rem 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wp-card::before {
  content: "";
  position: absolute; left: 24px; right: 24px; top: 0;
  height: 3px; border-radius: 0 0 3px 3px;
  background: var(--purple); opacity: 0.85;
}
.wp-card.teal::before { background: var(--teal); }
.wp-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(58, 33, 80, 0.1); border-color: var(--wp-purple-ring); }
.wp-card.teal:hover { border-color: var(--wp-teal-ring); }

.wp-photo {
  position: relative;
  width: 124px; height: 124px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 1.1rem;
  background: var(--wp-purple-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--wp-purple-ring);
  transition: box-shadow 0.2s ease;
}
.wp-card.teal .wp-photo { background: var(--wp-teal-soft); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--wp-teal-ring); }
.wp-card:hover .wp-photo { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--purple); }
.wp-card.teal:hover .wp-photo { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--teal); }
.wp-initials { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--purple); }
.wp-card.teal .wp-initials { color: var(--teal-deep); }
.wp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.wp-name { font-family: var(--font-serif); font-size: 1.31rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--ink); line-height: 1.2; }
.wp-role {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple); margin: 0 0 0.5rem; line-height: 1.4;
}
.wp-card.teal .wp-role { color: var(--teal-deep); }
.wp-cred { font-size: 12.5px; color: var(--muted); margin: 0 0 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }

.wp-days {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 12.5px; font-weight: 500;
  background: var(--wp-purple-soft); color: var(--purple-deep);
  padding: 0.45rem 0.95rem; border-radius: var(--radius-pill);
  margin: 0 0 1.1rem; line-height: 1.3;
}
.wp-card.teal .wp-days { background: var(--wp-teal-soft); color: var(--teal-deep); }
.wp-days svg { flex-shrink: 0; }

.wp-biobtn {
  margin-top: auto;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  color: var(--purple); background: transparent;
  border: 1.5px solid var(--wp-purple-ring); border-radius: var(--radius-pill);
  padding: 0.55rem 1.25rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wp-biobtn:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.wp-card.teal .wp-biobtn { color: var(--teal-deep); border-color: var(--wp-teal-ring); }
.wp-card.teal .wp-biobtn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.wp-biobtn svg { transition: transform 0.18s ease; }
.wp-biobtn:hover svg { transform: translateX(2px); }

/* The bio text stays in the DOM so search engines can read it. The dialog is
   what presents it to a visitor. */
.wp-biodata { display: none; }

.wp-ig {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--purple); background: var(--wp-purple-soft);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.wp-ig:hover { background: var(--purple); color: #fff; }
.wp-ig svg { width: 17px; height: 17px; }

.wp-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1rem; }
.wp-mini {
  position: relative;
  background: var(--white);
  border: 1px solid var(--wp-line);
  border-radius: 16px;
  padding: 1.4rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wp-mini::before {
  content: "";
  position: absolute; left: 20px; right: 20px; top: 0;
  height: 3px; border-radius: 0 0 3px 3px;
  background: var(--gold); opacity: 0.85;
}
.wp-mini:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(58, 33, 80, 0.07); border-color: var(--wp-gold-ring); }
.wp-mini .ic {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--wp-gold-soft); color: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0 0.75rem;
}
.wp-mini .ic svg { width: 24px; height: 24px; }
.wp-mini .nm { font-family: var(--font-serif); font-size: 1.06rem; font-weight: 600; color: var(--ink); margin: 0; }
.wp-mini .rl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); margin: 0.45rem 0 0; }
.wp-mini .gd { font-size: 11.5px; color: var(--muted); margin: 0.3rem 0 0; font-variant-numeric: tabular-nums; }

/* --- Bio dialog ---------------------------------------------------------- */

.wp-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(44, 33, 56, 0.55);
  animation: wpFade 0.2s ease;
}
.wp-modal[hidden] { display: none; }
.wp-dialog {
  position: relative;
  background: #fff;
  border-radius: 22px;
  max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: 2.4rem 2.1rem 2.1rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(28, 20, 40, 0.32);
  animation: wpRise 0.24s ease;
}
.wp-m-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--wp-purple-soft); color: var(--purple);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.wp-m-close:hover { background: var(--wp-purple-ring); }
.wp-m-photowrap {
  position: relative;
  width: 128px; height: 128px;
  border-radius: 50%; overflow: hidden;
  margin: 0 auto 1.1rem;
  background: var(--wp-purple-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--wp-purple-ring);
}
.wp-m-initials { font-family: var(--font-serif); font-size: 36px; font-weight: 600; color: var(--purple); }
.wp-m-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-m-name { font-family: var(--font-serif); font-size: 1.63rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--ink); }
.wp-m-role { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.5rem; }
.wp-m-cred { font-size: 13px; color: var(--muted); margin: 0 0 0.9rem; font-variant-numeric: tabular-nums; }
.wp-m-days {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 13px; font-weight: 500;
  background: var(--wp-purple-soft); color: var(--purple-deep);
  padding: 0.45rem 1rem; border-radius: var(--radius-pill); margin: 0 0 1.4rem;
}
.wp-m-bio { font-size: 14.5px; line-height: 1.75; color: var(--muted); text-align: left; }
.wp-m-bio p { margin: 0 0 0.9rem; }
.wp-m-bio p:last-child { margin: 0; }
.wp-m-bio a { color: var(--purple); font-weight: 500; text-underline-offset: 2px; }

.wp-modal.teal .wp-m-photowrap { background: var(--wp-teal-soft); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--wp-teal-ring); }
.wp-modal.teal .wp-m-initials, .wp-modal.teal .wp-m-role { color: var(--teal-deep); }
.wp-modal.teal .wp-m-close { background: var(--wp-teal-soft); color: var(--teal-deep); }
.wp-modal.teal .wp-m-days { background: var(--wp-teal-soft); color: var(--teal-deep); }
.wp-modal.teal .wp-m-bio a { color: var(--teal-deep); }

@keyframes wpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wpRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .wp-team { padding: 1.9rem 1rem; }
  .wp-grid { grid-template-columns: 1fr; }
  .wp-dialog { padding: 2.1rem 1.4rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-card, .wp-mini, .wp-photo, .wp-biobtn, .wp-biobtn svg { transition: none !important; }
  .wp-card:hover, .wp-mini:hover { transform: none; }
  .wp-modal, .wp-dialog { animation: none !important; }
}

/* ==========================================================================
   NHS dental care page — the live page's layout
   ========================================================================== */


.nhs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--purple);
}
.nhs-head-left { display: flex; align-items: center; gap: 1rem; }
.nhs-head-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--purple);
  margin: 0;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}
.nhs-star { color: var(--gold-deep); }
.nhs-from {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.4rem;
}
.nhs-provider { width: clamp(180px, 26vw, 300px); height: auto; }

/* Carded like .faq-item and .svc-tile so the charges read as part of the same
   set as every other service page, and so the price is scannable on its own
   line rather than buried mid-sentence. */
.nhs-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-m);
  margin: var(--space-l) 0 var(--space-m);
}
.nhs-band {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.nhs-band:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 34px -24px rgba(63, 32, 86, 0.55);
}
.nhs-band-name {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nhs-band-price {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--purple);
  margin: 0 0 0.6rem;
  line-height: 1;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-variant-numeric: tabular-nums;
}
.nhs-band-desc { font-size: var(--step--1); color: var(--ink); margin: 0; }

.nhs-note {
  font-size: var(--step--1);
  color: var(--muted);
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  max-width: 70ch;
}


@media (max-width: 700px) {
  .nhs-head { justify-content: flex-start; }
}

/* A panel's own questions, set inside it. Indented and rule-led so the nesting
   is legible rather than looking like a second top-level accordion. */
.faq-sub {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.faq-sub-head {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.8rem;
}
.faq-item--sub {
  background: var(--cream);
  margin-bottom: 0.5rem;
}
.faq-item--sub > summary { padding: 0.8rem 1rem; }
.faq-item--sub .faq-q { font-size: var(--step--1); }

/* --- Explainer band ------------------------------------------------------
   Same plum gradient as the hero, used once per page at most, to carry a
   single argument that deserves to interrupt the reading. */
.explainer {
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: #e9e3ef;
}
.explainer-grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .explainer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
.explainer-text { min-width: 0; }
.explainer h2 {
  color: var(--white);
  margin-bottom: var(--space-s);
  max-width: 20ch;
}
.explainer .eyebrow { color: var(--gold); }
.explainer .eyebrow::before { background: var(--gold); }
.explainer .prose,
.explainer .prose li { color: #cfc5da; }
.explainer .prose strong { color: var(--white); }
.explainer .prose a { color: var(--teal); }

.explainer-video { margin: 0; }
.explainer-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: #000;
}
/* Three numbered risks. Cards lifted off the plum so the text keeps its
   contrast rather than fighting the gradient behind it. */
.risk-list {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-m);
  counter-reset: risk;
}
.risk {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.risk-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}
.risk h3 {
  color: var(--white);
  font-size: var(--step-1);
  margin: 0 0 0.6rem;
}
.risk .prose, .risk .prose p { color: #cfc5da; font-size: var(--step--1); }
.risk .prose p:last-child { margin-bottom: 0; }
.risk-close {
  margin: var(--space-l) auto 0;
  max-width: 62ch;
  text-align: center;
  color: #cfc5da;
  text-wrap: pretty;
}
.risk-close a { color: var(--teal); }

.explainer-video figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: #b9aec6;
  text-wrap: pretty;
}

/* --- Before and after comparison ----------------------------------------
   The two photographs are stacked and the upper one clipped, so the pair
   overlaps in a single frame rather than sitting side by side. The control is
   a real range input: it drags, it takes a tap anywhere on the frame, and it
   answers the arrow keys, which is what WCAG 2.2 asks for - a drag-only
   handle would strand anyone who cannot drag.
   ------------------------------------------------------------------------ */
.ba-wrap { margin-top: var(--space-m); }
.ba-head {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.8rem;
}
.ba-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min() so a track can shrink below its ideal width on a narrow phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-m);
}
.ba-item { margin: 0; }

.ba-compare {
  position: relative;
  /* Set per gallery: clinical frames are not all the same shape, and cropping
     them to a house ratio would cut teeth out of the picture. */
  aspect-ratio: var(--ba-ratio, 3 / 2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  isolation: isolate;
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-after { clip-path: inset(0 0 0 var(--pos)); }

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(63, 32, 86, 0.25);
  pointer-events: none;
}
.ba-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(63, 32, 86, 0.35);
  backdrop-filter: blur(2px);
}

/* The input covers the frame so a tap anywhere moves the divider. It is
   transparent, so the divider above is what the eye follows. */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
  z-index: 2;
}
.ba-range::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; }
.ba-range::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
/* Focus has to be visible even though the control itself is not. */
.ba-range:focus-visible ~ .ba-divider::after {
  box-shadow: 0 0 0 3px var(--teal), 0 0 0 6px rgba(255, 255, 255, 0.9);
}

.ba-tag {
  position: absolute;
  bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  z-index: 1;
}
.ba-tag--before { left: 0.5rem; color: var(--white); background: rgba(63, 32, 86, 0.82); }
.ba-tag--after { right: 0.5rem; color: var(--purple); background: rgba(88, 182, 175, 0.95); }

/* --- Treatable misalignments -------------------------------------------
   Five illustrated cases. The artwork is already a navy disc on a
   transparent ground, so the card adds no ring of its own. */
.align-grid {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-m);
}
.align-card { display: flex; }
/* The whole card is the control, so the target is far larger than the 24px
   minimum and there is no separate small link to hunt for. */
.align-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  font: inherit;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem 1.3rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.align-btn:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 38px -26px rgba(63, 32, 86, 0.55);
}
.align-btn:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--teal);
}
.align-btn img {
  width: clamp(104px, 12vw, 132px);
  height: auto;
  margin: 0 auto 0.9rem;
  display: block;
}
/* A card with no dialog behind it: same frame as .align-btn, minus the
   affordances of a control. */
.align-plain {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem 1.3rem;
}
.align-plain img {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 0.9rem;
  display: block;
}
.align-sub {
  font-size: var(--step--2);
  color: var(--muted);
  margin: -0.3rem 0 0.5rem;
  font-style: italic;
}
.align-name {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.45rem;
}
.align-sum {
  font-size: var(--step--1);
  color: var(--muted);
  text-wrap: pretty;
}
.align-more {
  margin-top: 0.85rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.align-more::after { content: " \2192"; }

/* Always in the page for screen readers and for search; the dialog is a
   presentation of it, not the only copy. */
.align-detail {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.align-h { font-weight: 700; }
.align-dialog { max-width: 620px; text-align: left; }
.align-m-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #0b3a68;
  display: block;
  margin-bottom: var(--space-s);
}
.align-m-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  color: var(--purple);
  margin: 0 0 0.7rem;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.align-m-body .align-intro { font-size: var(--step-0); color: var(--ink); }
.align-m-body h4 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: var(--space-s) 0 0.25rem;
}
.align-m-body p { color: var(--muted); margin: 0 0 0.5rem; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .align-btn { transition: none; }
  .align-btn:hover { transform: none; }
}

/* --- Nine surgeries, three NHS -------------------------------------------
   The one fact that explains this practice's fees, its closed NHS waiting
   list and its cancellation policy: nine surgeries, three of them NHS-funded,
   a cap set by NHS England rather than by the practice.

   Drawn as nine marks rather than written as a statistic, because it is a
   count of real rooms, not a KPI. Used only where it does honest work.
   ----------------------------------------------------------------------- */

.surgeries {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--space-m);
  margin: var(--space-l) 0;
  max-width: 46ch;
}
.surgeries-marks {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
}
.surgeries-marks li {
  width: 1.5rem;
  height: 1.9rem;
  border-radius: 2px 2px 1px 1px;
  border: 2px solid var(--purple);
  opacity: 0.28;
}
.surgeries-marks li.is-nhs {
  background: var(--teal);
  border-color: var(--teal-deep);
  opacity: 1;
}
.surgeries p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.surgeries strong { color: var(--purple); }

.section--deep .surgeries {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: var(--gold);
}
.section--deep .surgeries p { color: #cfc5da; }
.section--deep .surgeries strong { color: var(--white); }
.section--deep .surgeries-marks li { border-color: #cfc5da; }

/* --- Treatment pages ------------------------------------------------------ */

.treat-banner {
  text-align: center;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  background: #f6f0e4;
  border: 1px solid #e8dcc4;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.4rem;
  margin: 0 auto var(--space-l);
  max-width: max-content;
}
.treat-banner a { color: var(--purple); font-weight: 700; }

.treat-prose { margin: var(--space-l) auto 0; }
.treat-prose h2 { font-size: var(--step-2); }

/* Figures inside a featured-treatment panel. */
.treat-figs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: flex-start;
  margin: var(--space-m) 0 0;
}
.treat-figs img {
  flex: 1 1 220px;
  max-width: 340px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
/* A lone photograph shouldn't sit as a small square against the left edge -
   it reads as an orphan. On its own it takes the full width of the panel. */
.treat-figs:has(img:only-child) img {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* A clinician introduced inside a panel: portrait beside the words rather than
   stranded underneath them with dead space alongside. Stacks on a phone. */
.panel-person {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
}
@media (min-width: 620px) {
  .panel-person { grid-template-columns: 132px 1fr; gap: var(--space-l); }
}
.panel-person-photo {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 10px 26px -14px rgba(63, 32, 86, 0.6);
  display: block;
}
.panel-person-text > :first-child { margin-top: 0; }
.panel-person-text > :last-child { margin-bottom: 0; }

/* --- Treatment video ------------------------------------------------------ */

.treat-video { margin: var(--space-l) auto 0; max-width: 852px; }
/* Inside an accordion panel the clip takes the panel's width, not the page's. */
.treat-video--panel { max-width: none; margin-top: var(--space-m); }
.treat-video--panel video { width: 100%; height: auto; border-radius: var(--radius); }
/* Two clips sit side by side where there is room and stack on a phone; a lone
   clip keeps the single-column width it already had. */
.treat-videos.is-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-m);
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
}
.treat-videos.is-multi .treat-video { max-width: none; margin-top: var(--space-l); }
.treat-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--blush);
}
.treat-video figcaption {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 0.7rem;
  text-align: center;
}