/* ==========================================================================
   Metamorphosis Med Spa — original stylesheet.

   Palette and type scale are derived from the existing site so the rebuild
   looks like itself; the CSS is written from scratch (no Duda stylesheets).
   Mobile-first, with the nav switching to a bar at 768px.
   ========================================================================== */

:root {
  /* Brand.
     --teal is the identity colour and stays bright, but it only ever carries
     dark text or no text: white on #62c8c5 is 1.98:1, far below the 4.5:1
     WCAG AA needs. Anything with white text on it uses --teal-deep (4.83:1),
     hovering to --teal-darker (5.93:1). Going lighter than about #26827f
     drops below 4.5:1 and fails AA, so this is close to the ceiling. */
  --teal:        #62c8c5;   /* accents, borders, fills — never behind white text */
  --teal-light:  #68ccd1;   /* links on the black band — 11.1:1 there */
  --teal-deep:   #257e7b;   /* buttons, links, active chips — 4.83:1 on white */
  --teal-darker: #1a6f6d;   /* hover — 5.93:1 on white */
  --teal-wash:   #a8dedc;   /* tinted panel behind dark text */

  /* Neutrals */
  --heading:     #646464;
  --body:        #565656;
  --muted:       #8a8a8a;
  --faint:       #999999;
  --line:        #d1d1d1;
  --line-soft:   #e6e4e1;
  --band:        #eeece9;   /* warm grey section band */
  --offwhite:    #faf9f9;
  --white:       #ffffff;
  --dark:        #272a2f;
  --near-black:  #000000;

  --focus:       #1d4ed8;

  --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --wrap:      75rem;
  --wrap-text: 46rem;

  --radius: 2px;
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Vertical rhythm. Zeroing every margin and restoring it only inside .prose
   left template-level paragraphs and buttons with no spacing at all, so they
   touched. Flow spacing is a default here and removed on last children. */
body, dl, dd, figure { margin: 0; }
p, ul, ol, blockquote, address, table { margin: 0 0 1.05rem; }
h1, h2, h3, h4 { margin: 0 0 .7rem; }

p:last-child, ul:last-child, ol:last-child,
blockquote:last-child, address:last-child { margin-bottom: 0; }

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal-deep); text-underline-offset: 2px; }
a:hover { color: var(--heading); }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: 400;
  line-height: 1.25;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.35rem; }

/* --- utilities ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; z-index: 999;
  padding: .75rem 1.25rem; background: var(--dark); color: #fff;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.hp-wrap, .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 400;
  text-decoration: none;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: var(--teal-darker); color: #fff; }

.btn-ghost { background: transparent; color: var(--heading); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); }

.btn-outline-light {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.6);
}
.btn-outline-light:hover { background: #fff; color: var(--dark); }

.cta-actions {
  display: flex; flex-wrap: wrap;
  gap: .75rem;
  margin-block: 1.5rem 0;
}
.cta-actions:last-child { margin-bottom: 0; }
/* A lone button in a paragraph still needs breathing room from its neighbour. */
.btn { margin-bottom: 0; }

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-block: .75rem;
}

.brand { display: block; text-decoration: none; }
.brand img { width: 175px; height: auto; }
.brand-fallback {
  font-family: var(--font-head); font-size: 1.05rem;
  color: var(--heading); letter-spacing: .02em;
}

.header-phone {
  display: none;
  background: var(--teal-deep);
  color: #fff;
  font-size: 1rem;
  padding: .6rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { background: var(--teal-darker); color: #fff; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 1.15rem; height: 2px; background: var(--heading);
  transition: transform .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.primary-nav {
  grid-column: 1 / -1;
  display: none;
  border-top: 1px solid var(--line-soft);
  margin-top: .75rem;
}

/* The header is sticky, so an expanded menu taller than the screen has no way
   to scroll -- the Face list alone runs to ~25 items and everything past the
   fold was unreachable. Cap the open menu to the viewport and scroll inside it.
   dvh accounts for mobile browser chrome; vh is the fallback. */
.primary-nav.is-open {
  display: block;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* The header and the page are both white, so an open menu had no edge. Tint
     the panel and inset it slightly so it reads as a layer above the page. */
  background: var(--offwhite);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 6px 8px -8px rgba(0, 0, 0, .28);
  margin-inline: -1.25rem;          /* bleed to the header's edges */
  padding-inline: 1.25rem;
  padding-block: .25rem .75rem;
}

/* Dim the page beneath, so the menu clearly sits on top of it. */
.site-header.is-nav-open { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(39, 42, 47, .45);
  z-index: 90;                      /* under the sticky header (100) */
  border: 0;
  padding: 0;
}
.nav-scrim[hidden] { display: none; }

.nav-list { list-style: none; padding: 0; }

.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .8rem .25rem;
  font-family: var(--font-body); font-size: .98rem; font-weight: 400;
  color: var(--body); text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  text-align: left; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--teal-deep); }
.primary-nav.is-open .nav-link { border-bottom-color: var(--line); }
/* The last row sits against the panel's own edge, so its rule is redundant. */
.primary-nav.is-open .nav-item:last-child > .nav-link { border-bottom: 0; }

.primary-nav.is-open .nav-split {
  display: flex; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.primary-nav.is-open .nav-split .nav-link { flex: 1; border-bottom: 0; }
.primary-nav.is-open .nav-split .nav-disclosure { padding-inline: .9rem; }
.primary-nav.is-open .nav-item:last-child > .nav-split { border-bottom: 0; }
.primary-nav.is-open .nav-dropdown { background: var(--white); border-radius: 2px; }

/* Label and toggle sit side by side on desktop. */
.nav-split { display: flex; align-items: center; }
.nav-split .nav-link { padding-right: .3rem; }
.nav-split .nav-disclosure {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .55rem .5rem .2rem;
  background: none; border: 0; color: var(--body); cursor: pointer;
}
.nav-split .nav-disclosure:hover { color: var(--teal-deep); }

.chevron {
  width: .42rem; height: .42rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.nav-disclosure[aria-expanded="true"] .chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.nav-dropdown { display: none; list-style: none; padding: .1rem 0 .5rem .9rem; }
.nav-dropdown.is-open { display: block; }
.nav-dropdown a {
  display: block; padding: .45rem .25rem; font-size: .92rem;
  color: var(--muted); text-decoration: none;
}
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { color: var(--teal-deep); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex; align-items: center;
  /* Short by design: it carries a heading and one action, so height beyond
     that is page real estate spent on nothing. */
  min-height: 15rem;
  margin-bottom: 2.5rem;
  background: var(--band) center / cover no-repeat;
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 80%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: 2rem; }
.hero h1 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  max-width: 15ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.hero .cta-actions { margin-top: 1.1rem; }

/* The homepage hero keeps its original proportions: it is the first thing a
   visitor sees and carries the brand image, unlike inner-page heroes which
   are just a heading and a button. */
body.home .hero { min-height: 26rem; margin-bottom: 0; }
body.home .hero .wrap { padding-block: 3rem; }
body.home .hero h1 { font-size: clamp(1.9rem, 5.2vw, 3rem); }

/* Pages without hero art fall back to a plain band. */
.hero.no-image { background: var(--band); color: var(--heading); }
.hero.no-image::after { display: none; }
.hero.no-image h1 { color: var(--heading); text-shadow: none; }
.hero.no-image .lede { color: var(--body); }

/* --- page header ---------------------------------------------------------- */

.page-header { padding-block: 3rem 1.5rem; }
.page-header h1 { max-width: 24ch; }

.lede {
  margin-top: .2rem;
  margin-bottom: 1.75rem;
  font-size: 1.1rem;
  color: var(--body);
  font-weight: 300;
  max-width: 62ch;
}

/* --- bands ---------------------------------------------------------------- */

.band-intro {
  background: var(--band);
  padding-block: 4.5rem;
  text-align: center;
}
.band-intro .prose {
  max-width: 34rem; margin-inline: auto;
  font-size: 1.35rem; font-weight: 300; line-height: 1.45; color: var(--heading);
}
.band-intro .prose p + p { margin-top: 1rem; }

.section-band { padding-block: 4rem; }
.services-band { background: var(--offwhite); }

/* Small letterspaced label above a section heading. */
.eyebrow {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: .6rem;
}
.band-heading { font-size: 1.9rem; max-width: 20ch; margin-bottom: 2rem; }

/* --- About band ----------------------------------------------------------- */

.about-band { background: var(--white); }
.about-grid { display: grid; gap: 2.5rem; }
.about-lead { font-size: 1.08rem; color: var(--body); max-width: 52ch; }

.about-facts { list-style: none; padding: 0; display: grid; gap: 1.5rem; }
.about-facts li {
  padding-left: 1.15rem;
  border-left: 2px solid var(--teal);
}
.fact-figure {
  display: block;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 500;
  color: var(--heading); line-height: 1.15;
}
.fact-label {
  display: block; margin-top: .2rem;
  font-size: .88rem; color: var(--muted);
}

/* A general line about the area served, inside the About band. */
.about-areas { color: var(--muted); font-size: .97rem; max-width: 52ch; }
.about-areas a { white-space: nowrap; text-decoration: none; }
.about-areas a:hover { text-decoration: underline; }

.testimonials-band { background: var(--offwhite); }
.section-band h2 { margin-bottom: 2rem; }
.section-band h2 a { text-decoration: none; color: inherit; }
.section-band h2 a:hover { color: var(--teal-deep); }

/* Split feature: art on one side, tinted panel on the other. */
/* The band straddles the boundary between the grey services section above and
   the white about section below: the space around it is grey for its top half
   and white for its bottom, so the grey appears to run halfway down behind it.
   Only visible where the band is inset from the page edges (>=1024px) -- below
   that it is full-bleed and its own content covers the whole area. */
.feature-split {
  display: grid;
  background: linear-gradient(
    to bottom,
    var(--offwhite) 0, var(--offwhite) 50%,
    var(--white) 50%, var(--white) 100%
  );
}

/* Single column (mobile): the row has no intrinsic height, so height:100% on
   the image resolved to 0 and the photo vanished. Give the media a shape of
   its own here, and only stretch it to the row once the split is side by side.
*/
.feature-split .feature-media { aspect-ratio: 16 / 10; overflow: hidden; }
.feature-split .feature-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.feature-split .feature-body {
  background: var(--teal-wash);
  padding: 3rem 1.5rem;
  color: var(--heading);
}
.feature-split .feature-body h2 { font-size: 1.7rem; margin-bottom: .9rem; }
/* The band is full-bleed, but its text must still stop at the page's content
   edge rather than running to the viewport edge. With a 1fr 1fr split the text
   column starts at the horizontal centre, so capping it at half the wrap width
   lines its right edge up with every other section on the page. */
.feature-split .feature-body-inner {
  max-width: calc(var(--wrap) / 2 - 1.25rem);
}

/* Without artwork the band is full width, so centre the column instead. */
.feature-split.no-media .feature-body-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --- prose ---------------------------------------------------------------- */

/* .prose sets the reading measure. Nest it INSIDE .wrap, never combine the two,
   or the narrower max-width re-centres the block and the text stops lining up
   with the heading above it. */
.prose { max-width: var(--wrap-text); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.prose h3 { margin-top: 2rem; font-size: 1.25rem; }
.prose h4 { margin-top: 1.75rem; font-size: 1.08rem; color: var(--heading); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose > h2:first-child { font-size: 1.7rem; margin-bottom: .4rem; }
/* A tagline directly under the opening heading is a subtitle, not a section. */
.prose > h2:first-child + h3 {
  margin-top: 0; font-size: 1.15rem; color: var(--muted);
  font-weight: 400; margin-bottom: 1.75rem;
}
.prose ul, .prose ol { padding-left: 1.35rem; }
/* Brand-coloured markers: ::marker takes colour but not size, so the bullet
   stays at the browser default and only the hue changes. */
.prose ul > li::marker { color: var(--teal-deep); }
.prose li + li { margin-top: .55rem; }
.prose li { line-height: 1.6; }

/* A long list of short items (the towns we serve) wastes a full column each.
   Columns keep it compact without cramming the lines together. */
.prose ul.list-columns {
  columns: 2;
  column-gap: 2.5rem;
  margin-block: 1.25rem;
}
.prose ul.list-columns li { break-inside: avoid; }

@media (min-width: 768px) {
  .prose ul.list-columns { columns: 3; }
}
.prose img { margin-block: 1.5rem; }
.prose blockquote {
  border-left: 3px solid var(--teal); padding-left: 1.15rem; color: var(--muted);
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }

/* --- category tiles (homepage / index pages) ------------------------------ */

.tile-grid, .card-grid, .gallery-grid, .quote-grid {
  list-style: none; padding: 0; display: grid; gap: 1.5rem;
}

/* Homepage service tiles share the card treatment used on the procedure
   index pages. No whole-card click overlay here: each tile holds a list of
   individual treatment links, and an overlay would swallow them. */
.tile {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tile:hover {
  border-color: var(--teal);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.tile-media { display: block; overflow: hidden; }
/* No artwork for this section yet: keep the tile's proportions with a plain
   tinted panel rather than collapsing the card or borrowing another photo. */
.tile-media.is-empty {
  aspect-ratio: 7 / 8;
  background: linear-gradient(160deg, var(--teal-wash), var(--band));
}
.tile-media img {
  width: 100%; aspect-ratio: 7 / 8; object-fit: cover;
  transition: transform .4s ease;
}
.tile:hover .tile-media img { transform: scale(1.05); }

.tile-title {
  font-size: 1.2rem;
  padding: 1.15rem 1.25rem .6rem;
  margin-bottom: 0;
}
.tile-title a { text-decoration: none; color: inherit; }
.tile:hover .tile-title a { color: var(--teal-deep); }

.tile-list {
  list-style: none; padding: 0 1.25rem;
  margin-bottom: 1.1rem;
  font-size: .93rem;
}
.tile-list li { padding-block: .22rem; }
.tile-list a { color: var(--body); text-decoration: none; }
.tile-list a:hover { color: var(--teal-deep); text-decoration: underline; }

.tile-more {
  margin-top: auto;          /* pins the link to the bottom, so tiles align */
  padding: .85rem 1.25rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem; text-decoration: none;
}
.tile-more:hover { text-decoration: underline; }
.tile > .tile-more { margin-bottom: 1.1rem; }

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

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

.card {
  position: relative;
  background: var(--white); border: 1px solid var(--line-soft);
  padding-bottom: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card a { text-decoration: none; color: inherit; display: block; }
.card img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  display: block;                 /* kills the inline-image baseline gap */
  transition: transform .4s ease;
}
.card > a { overflow: hidden; }   /* contains the hover zoom */
.card:hover img { transform: scale(1.04); }
.card h2, .card h3 { font-size: 1.25rem; padding: 1.15rem 1.25rem .4rem; }
.card p { padding-inline: 1.25rem; color: var(--muted); font-size: .94rem; }
.card { padding-bottom: 1.25rem; }

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

/* Whole-card click target.
   The <a> still wraps only the heading, so its accessible name stays "Botox
   Treatment" rather than the whole card's text; this pseudo-element stretches
   the hit area over the card. Scoped to .card-link on purpose -- specials
   cards render staff rich text, and a blanket `.card a` rule would stretch the
   first link in that copy across the entire card. */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:hover {
  border-color: var(--teal);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.card:hover h2, .card:hover h3 { color: var(--teal-deep); }

/* The real link is small, so show the focus ring on the whole card instead. */
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-link:focus-visible { outline: none; }

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

.gallery-item figure { margin: 0; }
.gallery-item figcaption { font-size: .85rem; color: var(--faint); padding-top: .4rem; }

/* --- portfolio gallery ---------------------------------------------------- */

.gallery-count { color: var(--muted); font-size: .92rem; margin-top: .6rem; }

.gallery-filters {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  padding-block: 1.5rem .5rem;
}
.filter-label {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  font: inherit; font-size: .88rem;
  padding: .4rem 1rem;
  background: var(--white); color: var(--body);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--teal); color: var(--teal-deep); }
.chip.is-active { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

.gallery-group { padding-block: 1.75rem; }
.gallery-group[hidden] { display: none; }
.gallery-group-heading {
  font-size: 1.35rem; margin-bottom: 1.1rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line-soft);
}

.gallery-trigger {
  display: block; position: relative;
  width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden;
}
.gallery-trigger img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.gallery-trigger:hover img, .gallery-trigger:focus-visible img {
  transform: scale(1.04); filter: brightness(.92);
}
.gallery-zoom {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--heading);
  border-radius: 50%; font-size: .85rem;
  opacity: 0; transition: opacity .2s ease;
}
.gallery-trigger:hover .gallery-zoom,
.gallery-trigger:focus-visible .gallery-zoom { opacity: 1; }

.gallery-caption { font-size: .85rem; color: var(--faint); padding-top: .4rem; }
.gallery-empty { padding-block: 2rem; color: var(--muted); }

/* --- lightbox (native <dialog>) ------------------------------------------- */

.lightbox {
  width: min(94vw, 62rem);
  max-width: none;
  border: 0; padding: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(0,0,0,.85); }

.lightbox-figure { margin: 0; text-align: center; }
.lightbox-figure img {
  width: 100%; max-height: 82vh; object-fit: contain;
  margin-inline: auto; background: #000;
}
.lightbox-figure figcaption {
  color: #e8e8e8; font-size: .9rem; padding-top: .75rem;
}

.lightbox-close, .lightbox-nav {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  cursor: pointer; font-size: 1.4rem; line-height: 1;
}
.lightbox-close {
  top: -1rem; right: -.5rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
}
.lightbox-nav {
  top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 3.6rem;
}
.lightbox-prev { left: -.5rem; }
.lightbox-next { right: -.5rem; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

@media (min-width: 768px) {
  .lightbox-close { top: -1.5rem; right: -1.5rem; }
  .lightbox-prev  { left: -2.25rem; }
  .lightbox-next  { right: -2.25rem; }
}

/* Breathing room between the page intro and the first row of quotes. */
.reviews-list { padding-top: 1.75rem; }

.quote-grid blockquote { background: var(--offwhite); padding: 1.5rem; height: 100%; }
.quote-grid footer { margin-top: .9rem; font-size: .88rem; color: var(--faint); }
.quote-grid .source { display: block; font-size: .8rem; }
.rating { color: var(--teal-deep); letter-spacing: .1em; }

.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pill-list a {
  display: inline-block; padding: .4rem .95rem;
  background: var(--offwhite); border: 1px solid var(--line-soft);
  border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--body);
}
.pill-list a:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }

.related { padding-block: 2rem; }
.related h2 { margin-bottom: 1rem; }
.empty-state { color: var(--muted); }

.hero-image { width: 100%; margin-block: 1.5rem; }

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

/* Pages ending in a full-bleed band get their spacing from the band itself.
   A page whose last block is a plain .wrap has nothing between its content and
   the dark footer, so it needs its own bottom margin. */
.page > .wrap:last-child,
.page > section.wrap:last-child { margin-bottom: 4rem; }

.cta-band { background: var(--band); margin-top: 4rem; padding-block: 3.25rem; }
.cta-band h2 { font-size: 1.5rem; }
.cta-band p { color: var(--body); }

/* --- team ----------------------------------------------------------------- */

.team-list { padding-block: 1rem 2rem; display: grid; gap: 2.5rem; }
.team-member { display: grid; gap: 1.25rem; }
.headshot { width: 100%; max-width: 15rem; object-fit: cover; }
.team-member .role { color: var(--teal-deep); font-size: .95rem; }

/* --- forms ---------------------------------------------------------------- */

.contact-layout { display: grid; gap: 2.5rem; padding-block: 1rem 3rem; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.required { color: var(--teal-deep); }

.field input[type="text"], .field input[type="email"],
.field input[type="tel"], .field textarea {
  width: 100%; font: inherit; color: var(--body);
  padding: .6rem .1rem; background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-bottom-color: var(--teal); box-shadow: 0 1px 0 var(--teal);
}
.field .help { font-size: .85rem; color: var(--faint); margin-top: .35rem; }
.field-error input, .field-error textarea { border-bottom-color: #b3261e; }
.error-text { color: #b3261e; font-size: .87rem; margin-top: .35rem; }

.alert { padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.alert-error { background: #fdeceb; color: #7f1d1b; border: 1px solid #f4c7c4; }
.alert-success { background: #eaf5ee; color: #1b5e33; border: 1px solid #bfe0cb; }

/* --- newsletter ----------------------------------------------------------- */

.newsletter-panel {
  max-width: 34rem;
  background: var(--offwhite);
  border: 1px solid var(--line-soft);
  padding: 1.75rem;
}
.newsletter-form { margin-top: 1.25rem; }
.newsletter-panel .phi-notice { margin-top: 1.5rem; margin-bottom: 0; }

/* Sits in the light footer column, so it uses the page palette rather than
   the reversed-out treatment the dark band would need. */
.footer-newsletter-blurb { font-size: .92rem; color: var(--muted); }

.footer-newsletter-form { margin-top: .9rem; }
/* Sits inside the logo column now, so it stacks rather than sitting inline. */
.footer-newsletter { margin-top: 1.75rem; }
.footer-newsletter-row {
  display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
  max-width: 18rem;
}
.footer-newsletter-row .btn { align-self: flex-start; }
.footer-newsletter-row input[type="email"] {
  width: 100%; min-width: 0;
  font: inherit; color: var(--body);
  padding: .6rem .75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.footer-newsletter-row input::placeholder { color: var(--faint); }
.footer-newsletter-row input:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
  border-color: var(--teal-deep);
}
.footer-newsletter-row .btn { flex: 0 0 auto; padding-inline: 1.1rem; }

.phi-notice {
  background: var(--offwhite); border-left: 3px solid var(--teal);
  padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1.5rem; color: var(--body);
}

.contact-phone { font-size: 1.5rem; margin-block: .5rem 1rem; }
.contact-phone a { text-decoration: none; }
.contact-details-col address { font-style: normal; color: var(--body); }
.contact-details-col h3 { margin-top: 1.5rem; }

/* --- footer --------------------------------------------------------------- */

/* Dark enquiry band above the footer proper. */
.footer-contact {
  background: var(--near-black);
  color: #cfcfcf;
  padding-block: 4rem;
}
.footer-contact h2 { color: #fff; font-size: 1.9rem; margin-bottom: 1.25rem; }
.footer-contact address { font-style: normal; line-height: 1.6; }
.footer-contact a:not(.btn) { color: var(--teal-light); }
.footer-contact-grid { display: grid; gap: 2rem; }

.site-footer { background: var(--offwhite); color: var(--body); padding-block: 3rem 0; }
.footer-grid { display: grid; gap: 2rem; }
.footer-heading {
  font-family: var(--font-body);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--heading); margin-bottom: .85rem;
}
.site-footer address { font-style: normal; line-height: 1.7; }
.footer-logo { width: 175px; margin-bottom: 1rem; }

.social-row { display: flex; gap: .6rem; list-style: none; padding: 0; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--heading); color: #fff; text-decoration: none;
}
.social-row svg { width: 1rem; height: 1rem; fill: currentColor; }
.social-row a:hover { background: var(--teal-deep); }

.hours-list { font-size: .95rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .35rem; }
.hours-row dd { margin: 0; color: var(--muted); }

/* Legal links now live in the bottom bar next to the copyright. */
.legal-links ul {
  list-style: none; padding: 0; margin: 0 0 .6rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem .85rem;
}
.legal-links li { display: flex; align-items: center; }
.legal-links li + li::before {
  content: ""; width: 1px; height: .8em;
  background: var(--line); margin-right: .85rem;
}
.legal-links a { color: var(--teal-deep); font-size: .84rem; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid var(--line-soft);
  margin-top: 2.5rem; padding-block: 1.25rem;
  font-size: .8rem; color: var(--faint); text-align: center;
}
.footer-bottom p { margin-bottom: .35rem; }
.footer-bottom p:last-child { margin-bottom: 0; }

/* ==========================================================================
   768px and up
   ========================================================================== */

@media (min-width: 768px) {
  h1 { font-size: 2.6rem; }

  .nav-toggle { display: none; }
  .header-phone { display: inline-block; }

  .header-inner { grid-template-columns: auto 1fr auto; gap: 1.25rem; }

  .primary-nav,
  .primary-nav.is-open {
    display: block; grid-column: 2; grid-row: 1;
    border-top: 0; margin-top: 0;
    max-height: none; overflow: visible;
    background: none; box-shadow: none;
    margin-inline: 0; padding: 0;
  }
  .nav-scrim { display: none; }
  /* One rhythm for every top-level item, whether it is a plain link or a
     link paired with a disclosure toggle. Without this the split items sat
     at a different height and spacing from the rest. */
  .nav-list { display: flex; align-items: stretch; justify-content: flex-end; gap: 0; }
  .nav-item { position: relative; display: flex; align-items: center; }
  .nav-link {
    width: auto; border-bottom: 0;
    padding: .5rem .95rem;
    font-size: .93rem; white-space: nowrap;
    line-height: 1.4;
  }
  /* A split item owns the same total padding as a plain one: the label gives
     up its right padding to the toggle sitting beside it. */
  .nav-split { align-items: center; }
  /* A split item must leave the same text-to-text gap as a plain one. The
     chevron sits between the two labels, so the padding around it is reduced
     to compensate: .2 + .2 + .55 + .95 matches the plain 0.95 + 0.95 pair. */
  .nav-split .nav-link { padding-right: .2rem; }
  .nav-split .nav-disclosure {
    padding: .5rem .3rem .5rem .2rem;
    line-height: 1.4;
  }
  .nav-item > .nav-disclosure { padding: .5rem .95rem; line-height: 1.4; }

  .nav-dropdown {
    position: absolute; top: 100%; left: 0;
    min-width: 15rem; max-height: 70vh; overflow-y: auto;
    padding: .5rem 0; background: var(--white);
    border: 1px solid var(--line-soft);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 50;
  }
  .nav-dropdown a { padding: .5rem 1rem; }
  .nav-dropdown a:hover { background: var(--offwhite); }
  /* Hover opens it; an explicit toggle also opens it. :focus-within is
     deliberately absent -- it kept the panel open after the toggle was
     clicked to close it, which read as the button doing nothing. Keyboard
     focus is handled in nav.js instead. */
  .nav-item.has-children:hover .nav-dropdown,
  .nav-item.has-children .nav-dropdown.is-open { display: block; }

  .hero { min-height: 19rem; }
  .hero .wrap { padding-block: 2.5rem; }
  body.home .hero { min-height: 33rem; }
  body.home .hero .wrap { padding-block: 4rem; }

  .tile-grid  { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  /* Two across: the cards now carry photography, so bigger is better. */
  .card-grid  { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  /* Suppressed because this card's row-mate has no photo. Applies only here,
     in the two-column layout -- on mobile the pairing does not exist. */
  .card.hide-media .card-link img { display: none; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .quote-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

  .feature-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .feature-split .feature-media { aspect-ratio: auto; height: 100%; }
  .feature-split .feature-body {
    padding: 4rem 3rem;
    display: flex; align-items: center;
  }

  .footer-contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }

  .team-member { grid-template-columns: 15rem 1fr; gap: 2rem; }
  .contact-layout { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; }
  .about-grid { grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; }
  .page-header { padding-block: 3.5rem 1.25rem; }
}

/* Ultra-wide: the band is full-bleed, which sprawls on a 2560px display --
   the photo becomes an enormous slab and the copy floats in the middle of it.
   Cap the band and the artwork so it stays a banner rather than a billboard.
   The text column still lines up with the rest of the page, because both the
   band and the page container are centred. */
@media (min-width: 1500px) {
  .feature-split { max-width: 96rem; margin-inline: auto; padding-inline: 4rem; }
  .feature-split .feature-media { max-height: 30rem; }
  .feature-split .feature-body { padding-block: 3.5rem; }
}

@media (min-width: 1024px) {
  .tile-grid { gap: 1.75rem; }

  /* Inset the band so the split background behind it is actually visible.
     The gutters carry the grey-to-white transition. */
  .feature-split { max-width: 88rem; margin-inline: auto; padding-inline: 2.5rem; }
  .footer-grid { grid-template-columns: 1.1fr 1.2fr 1fr; gap: 3rem; }
}

/* --- motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .footer-contact, .cta-band, .skip-link { display: none; }
  body { color: #000; }
}

/* --- Cherry payment-plan widgets ------------------------------------------ */

/* Third-party markup we do not control; just give each mounted widget room. */
.cherry-widgets > div:not(:empty) { margin-block: 2rem; }
.cherry-widgets > div:first-child { margin-top: 0; }
.payment-page .page-header { padding-bottom: 1rem; }

/* --- legal pages ----------------------------------------------------------- */

/* Third-party markup: give it a readable measure and sane spacing. */
.legal-body { padding-bottom: 3rem; }
.legal-body h2 { font-size: 1.3rem; }
.legal-body h3 { font-size: 1.12rem; }
.legal-updated { font-size: .88rem; color: var(--muted); margin-top: .4rem; }

/* --- carousel --------------------------------------------------------------- */

.reviews-band { background: var(--offwhite); }

/* Without JS the slides are a readable stacked list. */
.carousel-track { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.carousel-viewport { overflow: hidden; }

/* Enhanced: a sliding row. One slide on small screens, three on desktop.
   --carousel-gap is read back by the script so its pixel maths matches. */
.carousel.is-enhanced .carousel-track {
  --carousel-gap: 1.25rem;
  display: flex;
  gap: var(--carousel-gap);
  transition: transform .5s ease;
}
.carousel.is-enhanced .carousel-slide { flex: 0 0 100%; min-width: 0; }

@media (min-width: 768px) {
  .carousel.is-enhanced .carousel-slide {
    flex: 0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
  }
}

.carousel-slide blockquote {
  background: var(--white);
  border: 1px solid var(--line-soft);
  padding: 2rem;
  margin: 0;
  height: 100%;
}
.carousel-slide blockquote p { font-size: 1.08rem; color: var(--body); }
.carousel-slide blockquote footer {
  margin-top: 1rem; font-size: .9rem; color: var(--muted);
}

.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.25rem;
}
.carousel-arrow {
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--heading);
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.carousel-arrow:hover { border-color: var(--teal-deep); color: var(--teal-deep); }

.carousel-dots { display: flex; gap: .45rem; }
.carousel-dot {
  width: .6rem; height: .6rem; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background-color .2s ease;
}
.carousel-dot.is-active { background: var(--teal-deep); }

@media (prefers-reduced-motion: reduce) {
  .carousel.is-enhanced .carousel-track { transition: none; }
}

/* --- specials --------------------------------------------------------------- */

.specials-intro { padding-block: .5rem 2.5rem; }
.specials-intro .cta-actions { margin-block: 1.5rem; }
.specials-alt { color: var(--muted); }

/* --- staff bios ------------------------------------------------------------ */

.bio-list { display: grid; gap: 2.5rem; padding-block: 1.5rem 1rem; }

.bio {
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-soft);
}
.bio:first-child { padding-top: .5rem; border-top: 0; }

.bio-name {
  font-size: 1.5rem;
  margin-bottom: .25rem;
  max-width: 30ch;
}
/* The descriptive half of the old "Meet <name>: <tagline>" heading, demoted
   to a subtitle so the name reads on its own line. */
/* Scoped to .bio-heading on purpose: the tagline is that div's last child, so
   the global "p:last-child { margin-bottom: 0 }" reset (0-1-1) outranks a bare
   .bio-tagline (0-1-0) and flattens the gap. Two classes take it back. */
.bio-heading .bio-tagline {
  /* Stacked layout only: above 768px the tagline sits in its own column and
     this is overridden to 0. */
  margin: 0 0 1.9rem;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
}
.bio-body { max-width: var(--wrap-text); }

@media (min-width: 768px) {
  /* Name in a fixed column, prose beside it, so each bio reads as a unit.
     The heading and its tagline must share one grid child, or the tagline
     takes the prose column and knocks the body onto the next row. */
  .bio { display: grid; grid-template-columns: 16rem 1fr; gap: 2.5rem; }
  .bio-heading .bio-tagline { margin-bottom: 0; }
}

/* Local-SEO summary in the footer contact block: supporting copy, so it sits
   a step below the sentence above it rather than competing with it. */
.footer-blurb {
  margin-top: .75rem;
  font-size: .9rem;
  line-height: 1.6;
  opacity: .9;
}