/* Mount Pleasant Eye Care — base styles
   Tokens derived from brand logo + live-site CSS audit (see plan.md Section 5) */

:root {
  /* Color */
  --teal: #007391;
  --teal-dark: #005a70;
  --teal-tint: #eaf4f6;
  --gold: #cca215;
  --gold-dark: #b59013;
  --ink: #1b1b1b;
  --ink-soft: #55534d;
  --paper: #ffffff;
  --hairline: #e7e2d8;

  /* Type */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-utility: 0.8125rem;
  --fs-nav: 0.9375rem;
  --fs-body: 1rem;

  /* Layout */
  --content-max: 1200px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Skip link — accessibility floor */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--paper);
  padding: var(--space-xs) var(--space-sm);
  z-index: 100;
}

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

/* Visible keyboard focus everywhere — accessibility floor */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================
   Utility bar
   ============================ */

.utility-bar {
  border-bottom: 1px solid var(--hairline);
}

.utility-bar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.utility-bar__contact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.utility-bar__row {
  font-size: var(--fs-utility);
  font-style: normal;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.utility-bar__row a {
  color: var(--ink-soft);
}

.utility-bar__row a:hover {
  color: var(--teal);
}

.utility-bar__row svg {
  flex-shrink: 0;
  color: var(--teal);
}

.utility-bar__phone {
  color: var(--ink-soft);
  font-weight: 700;
}

.utility-bar__phone:hover {
  color: var(--teal);
}

.utility-bar__logo-group {
  justify-self: center;
  margin: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.utility-bar__vs-logo {
  height: 18px;
  width: auto;
}

.site-logo-wink__base {
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* Wink animation overlay. Positions are percentages of the base image's
   own pixel dimensions (2070x121 native), measured directly from the
   source file — .site-logo-wink__mask covers the logo's second "eye"
   (already permanently closed/winking in the base image) with a
   background-color patch, and .site-logo-wink__overlay draws the real
   open-eye artwork (cropped from the logo's own first eye) on top of
   that patch. Both fade out together (see .is-winked, set by JS in
   app.js after a short delay) to reveal the untouched base image
   underneath — so the "after" state is pixel-identical to the logo
   Katelyn already has today, nothing about it is actually altered. */
.site-logo-wink {
  position: relative;
  display: inline-block;
}

.site-logo-wink__mask,
.site-logo-wink__overlay {
  position: absolute;
  top: 0;
  transition: opacity 0.35s ease;
}

.site-logo-wink__mask {
  left: 13.6232%;
  width: 6.8116%;
  height: 100%;
  background: var(--paper);
}

.site-logo-wink__overlay {
  left: 13.913%;
  width: 7.3913%;
  height: 91.7355%;
}

.site-logo-wink.is-winked .site-logo-wink__mask,
.site-logo-wink.is-winked .site-logo-wink__overlay {
  opacity: 0;
}

.utility-bar__cta {
  justify-self: end;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-nav);
  letter-spacing: 0.01em;
  background: var(--teal);
  color: var(--paper);
  padding: 0.7em 1.5em;
  border-radius: 2px;
  border: 1px solid var(--teal);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.btn--appt {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.55em 1.25em;
}

.btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

.btn__label {
  font-size: 0.8125rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.btn--appt:hover .btn__icon {
  transform: rotate(-12deg) scale(1.12);
  border-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .btn__icon {
    transition: border-color 0.2s ease;
  }

  .btn--appt:hover .btn__icon {
    transform: none;
  }
}

.btn:focus-visible {
  outline-offset: 3px;
}

/* ============================
   Header nav
   ============================ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  justify-content: center;
}

.site-header__mobile-logo,
.site-header__mobile-actions {
  display: none;
}

.site-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header__icon-btn:hover {
  background: var(--teal);
  color: #fff;
}

.site-header__icon-btn--solid {
  background: var(--teal);
  color: #fff;
}

.site-header__icon-btn--solid:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.primary-nav__list {
  display: flex;
  gap: 3rem;
}

.primary-nav__link {
  display: inline-block;
  padding: 1.1rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.primary-nav__link[aria-current="page"] {
  /* WCAG 1.4.1 — current-page state shouldn't rely on color alone;
     a small weight bump (not the hover/focus states, to avoid the
     nav jittering weight on every mouseover) adds a non-color cue. */
  font-weight: 600;
}

/* Dropdown-enabled nav items */
.primary-nav__item.has-dropdown {
  position: relative;
}

.primary-nav__link-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 1.1rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.primary-nav__link-row .primary-nav__link {
  padding: 0;
  border-bottom: none;
  font-size: 1rem;
}

.primary-nav__item.has-dropdown:hover .primary-nav__link-row,
.primary-nav__item.has-dropdown:focus-within .primary-nav__link-row,
.primary-nav__item.has-dropdown.is-open .primary-nav__link-row {
  border-bottom-color: var(--gold);
}

.nav-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.2rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease;
}

/* Scoped to the item's OWN link-row (not just any .nav-caret anywhere
   inside it) — otherwise this also matched the nested .nav-caret--sub
   buried inside .nav-dropdown, forcing it to always look "open" the
   entire time its ancestor was hovered, regardless of its own state. */
.primary-nav__item.has-dropdown:hover > .primary-nav__link-row .nav-caret,
.primary-nav__item.has-dropdown:focus-within > .primary-nav__link-row .nav-caret,
.nav-caret[aria-expanded="true"] {
  color: var(--teal);
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 230px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.primary-nav__item.has-dropdown:hover .nav-dropdown,
.primary-nav__item.has-dropdown:focus-within .nav-dropdown,
.primary-nav__item.has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Lets a caret click force the dropdown shut even while the mouse is
   still hovering it (same specificity as the :hover/:focus-within rule
   above, so source order — not !important — is what wins here). JS
   clears this the moment the pointer actually leaves the item, so
   hovering it again later still opens it normally. */
.primary-nav__item.has-dropdown.force-closed .nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

.primary-nav__item.has-dropdown.force-closed .primary-nav__link-row {
  border-bottom-color: transparent;
}

.primary-nav__item.has-dropdown.force-closed > .primary-nav__link-row .nav-caret {
  color: var(--ink-soft);
  transform: none;
}

.nav-dropdown a {
  display: block;
  padding: 0.65rem 1.1rem;
  font-size: 0.875rem;
  color: var(--teal);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--ink);
  border-left-color: var(--gold);
  background: var(--teal-tint);
}

/* Second-level submenu (e.g. Insurances > Vision Insurance > VSP) —
   reveals below its parent row rather than flying out sideways, so it
   can't run off the edge of the viewport regardless of nav position. */
.nav-dropdown__item {
  position: relative;
}

.nav-dropdown__link-row {
  display: flex;
  align-items: center;
}

.nav-dropdown__link-row a {
  flex: 1;
}

/* Subtle raised-button chrome (soft shadow + inset top highlight) reads
   as "this is a pressable square," without a heavy border or shape
   change. The rotation lives on the icon alone, not this container —
   rotating the container would flip the "lit from above" shading
   upside down along with it, which would look broken. Pressing in
   (inset shadow, no highlight) when expanded gives a toggled-on cue. */
.nav-caret--sub {
  margin: 0 0.75rem 0 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(27, 27, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-caret--sub svg {
  transition: transform 0.2s ease;
}

.nav-caret--sub:hover {
  border-color: var(--teal);
  background: var(--teal-tint);
}

.nav-caret--sub[aria-expanded="true"] {
  color: var(--teal);
  border-color: var(--gold);
  background: var(--teal-tint);
  box-shadow: inset 0 1px 3px rgba(27, 27, 27, 0.18);
}

.nav-caret--sub[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Deliberately its own class, not a modifier on .nav-dropdown — that
   base class is position:absolute, which would take this out of flow
   and let it overlay the next sibling row (e.g. "Medical Insurance")
   instead of pushing it down. */
/* Click-to-expand only (no :hover/:focus-within trigger) — unlike the
   top-level Insurances dropdown, this is a *second* nested level, and
   hover-opening it caused a real problem: collapsing Vision Insurance
   and moving the mouse down toward Medical Insurance passed back over
   Vision's row, re-opening it via :hover and pushing Medical's row out
   from under the cursor mid-motion. Click-only avoids that entirely. */
.nav-submenu {
  display: none;
  position: static;
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0.4rem;
  background: var(--teal-tint);
}

.nav-dropdown__item.has-submenu.is-open .nav-submenu {
  display: block;
}

.nav-submenu a {
  display: block;
  padding: 0.5rem 1.1rem 0.5rem 1.75rem;
  font-size: 0.8rem;
  color: var(--teal);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  color: var(--ink);
  border-left-color: var(--gold);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .nav-caret {
    transition: opacity 0.15s ease, visibility 0.15s;
  }

  .primary-nav__item.has-dropdown:hover .nav-dropdown,
  .primary-nav__item.has-dropdown:focus-within .nav-dropdown,
  .primary-nav__item.has-dropdown.is-open .nav-dropdown {
    transform: none;
  }

  .primary-nav__item.has-dropdown:hover .nav-caret,
  .primary-nav__item.has-dropdown:focus-within .nav-caret,
  .nav-caret[aria-expanded="true"] {
    transform: none;
  }
}

/* Mobile nav toggle — hidden above breakpoint */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-sm);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================
   Sticky nav (appears on scroll only — desktop)
   ============================ */

.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

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

.sticky-nav__inner {
  /* Grid, not absolute positioning: the logo, links and button each take
     their own column, so a long nav can never paint over the logo. Side
     columns are minmax(max-content, 1fr) — equal when there is room (links
     stay truly centered on the bar), content-sized when it is tight. Wider
     than --content-max because logo + 6 links + button need ~1.2k px. */
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
  height: 76px;
  padding: 0 var(--space-md);
}

.sticky-nav__logo {
  justify-self: start;
}

.sticky-nav__logo img {
  height: 13px;
  width: auto;
  display: block;
}

.sticky-nav__links {
  display: flex;
  justify-content: center;
}

.sticky-nav .primary-nav__list {
  gap: 1.25rem;
  flex-wrap: nowrap;
}

.sticky-nav .primary-nav__link {
  white-space: nowrap;
}

.sticky-nav .primary-nav__link {
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.6rem 0;
}

.sticky-nav .primary-nav__link-row .primary-nav__link {
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.sticky-nav .primary-nav__link-row {
  padding: 0.6rem 0;
}

.btn--appt-compact {
  justify-self: end;
  padding: 0.4em 0.9em;
  gap: 0.5em;
}

.btn--appt-compact .btn__icon {
  width: 26px;
  height: 26px;
}

.btn--appt-compact .btn__label {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Below ~1240px logo + links + full button no longer fit on one row, so
   the label shortens to "Book" (" Appointment" stays for screen readers).
   At <=1180px the logo is dropped too (the page header above it still
   shows it); the bar hides entirely at <=960px, where links no longer fit. */
@media (max-width: 1239px) {
  .btn--appt-compact .btn__label-extra {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 1180px) {
  .sticky-nav__logo {
    display: none;
  }

  .sticky-nav__links {
    grid-column: 2;
  }

  .btn--appt-compact {
    grid-column: 3;
  }
}

@media (max-width: 960px) {
  .sticky-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-nav {
    transition: opacity 0.15s ease, visibility 0.15s;
    transform: none;
  }
}

/* ============================
   Hero carousel
   ============================ */

.hero {
  position: relative;
  height: min(78vh, 640px);
  min-height: 420px;
  overflow: hidden;
  background: var(--ink);
}

.hero__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  display: flex;
  align-items: center;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__slide--1 { background-image: url('../assets/images/hero/hero-2-glasses.jpg'); background-size: cover; background-position: center; }
.hero__slide--2 { background-image: url('../assets/images/hero/hero-3-shelf.jpg'); background-size: cover; background-position: center; }
.hero__slide--3 { background-image: url('../assets/images/hero/hero-1-desk.jpg'); background-size: cover; background-position: 78% 25%; }

.hero__placeholder-tag {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 0.35em 0.7em;
  border-radius: 2px;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 4.5rem;
  color: #fff;
}

.hero__content > * {
  max-width: 34rem;
}

.hero__eyebrow {
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0 0 var(--space-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 2px;
  background: var(--gold);
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
}

.hero__sub {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0 0 var(--space-md);
  color: rgba(255, 255, 255, 0.92);
}

.btn--outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.hero__arrow--prev { left: var(--space-md); }
.hero__arrow--next { right: var(--space-md); }

.hero__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, width 0.25s ease;
}

.hero__dot.is-active {
  width: 26px;
  background: var(--gold);
  border-color: var(--gold);
}

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

@media (max-width: 720px) {
  .hero {
    height: 78vh;
    min-height: 480px;
  }

  .hero__heading {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
  }

  .hero__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  }

  .hero__content {
    align-self: flex-end;
    padding: 0 var(--space-md) 3.5rem;
  }

  .hero__arrow {
    width: 36px;
    height: 36px;
  }

  .hero__arrow--prev { left: var(--space-sm); }
  .hero__arrow--next { right: var(--space-sm); }
}

/* ============================
   Shared: eyebrow label + text link
   (light-background variant; see .hero__eyebrow for the dark-background version)
   ============================ */

.eyebrow {
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 0 0 var(--space-sm);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 2px;
  background: var(--gold);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  color: var(--teal);
  border-bottom: 2px solid transparent;
  padding-bottom: 0.15em;
  transition: border-color 0.15s ease;
}

.text-link:hover,
.text-link:focus-visible {
  border-bottom-color: var(--gold);
}

.text-link span {
  transition: transform 0.15s ease;
}

.text-link:hover span {
  transform: translateX(3px);
}

/* ============================
   Welcome / intro section
   ============================ */

.welcome {
  padding: var(--space-lg) var(--space-md);
}

.welcome__inner {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.welcome__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-md);
}

.welcome__body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-md);
}

@media (max-width: 720px) {
  .welcome {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ============================
   Featured services
   ============================ */

.services {
  padding: var(--space-lg) var(--space-md);
  background: #fbfaf7;
}

.services__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.services__intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.services__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--ink);
  margin: 0;
}

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

.service-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 2px,
    transparent 2px,
    transparent 14px
  );
}

.service-card__image .hero__placeholder-tag {
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.625rem;
}

.service-card__image--1 { background-image: url('../assets/images/services/comprehensive-eye-exams.jpg'); background-size: cover; background-position: center; }
.service-card__image--2 { background-image: url('../assets/images/services/dry-eye-new.jpg'); background-size: cover; background-position: center; }
.service-card__image--3 { background-image: url('../assets/images/services/katelyn_child_appt.jpg'); background-size: cover; background-position: center; }
.service-card__image--4 { background-image: url('../assets/images/services/pediatric-vision-care.jpg'); background-size: cover; background-position: center; }

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--ink);
  margin: 0 0 0.4em;
}

.service-card__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm);
}

@media (max-width: 900px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================
   Meet the team
   ============================ */

.team {
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(180deg, #dbf0f3 0%, #c2e5ea 100%);
}

.team__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

.team__intro {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0 auto var(--space-lg);
}

.team__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}

.team__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 280px));
  justify-content: center;
  gap: var(--space-lg) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.team-card__photo-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto var(--space-sm);
}

.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  width: 220px;
  border: 6px solid #fff;
  outline: 3px solid transparent;
  outline-offset: 5px;
  box-shadow: 0 10px 28px rgba(0, 60, 75, 0.16);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 2px,
    transparent 2px,
    transparent 14px
  );
  transition: outline-color 0.2s ease;
}

.team-card__photo-wrap:hover .team-card__photo {
  outline-color: var(--gold);
}

.team-card__placeholder-tag {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 0.3em 0.65em;
  border-radius: 2px;
  white-space: nowrap;
}

.team-card__photo--1 { background-image: url('../assets/images/team/katelyn.jpg'); background-size: cover; background-position: center 12%; }
.team-card__photo--2 { background-image: url('../assets/images/team/devin.jpg'); background-size: cover; background-position: center; }

.team-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--ink);
  margin: 0 0 0.2em;
}

.team-card__role {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 0.6em;
}

.team-card__bio {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 560px) {
  .team__grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================
   Interior page hero + staff profiles (proof-of-concept subpage,
   ahead of formal Phase 1 page templates)
   ============================ */

/* Standardized site-wide per Katelyn: the eye-pattern banner (originally
   trialed on Blog only, against a flat teal and a textured gradient) is
   the single hero style for every interior page header. v2 (2026-09-04):
   larger icons per Katelyn's request, trialed on About page first as
   heroTestBanner before rolling out here as the default. */
.page-hero {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--teal);
  background-image: url('../assets/images/hero/hero-banner-eye-pattern-v2.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
}

.page-hero__inner {
  max-width: 40rem;
  margin: 0 auto;
}

/* Widens the measure just for headings too long to sit on one line at
   the default 40rem width (e.g. "About Mount Pleasant Eye Care") —
   opt-in per page via heroWide in frontmatter, not applied globally. */
.page-hero--wide .page-hero__inner {
  max-width: 48rem;
}

.page-hero .eyebrow {
  color: #fff;
  justify-content: center;
}

.page-hero__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: #fff;
  margin: 0 0 var(--space-sm);
}

.page-hero__body {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.staff-profiles {
  padding: var(--space-lg) var(--space-md);
}

.staff-profiles__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

.staff-profile--reverse {
  flex-direction: row-reverse;
}

.staff-profile__photo-wrap {
  flex-shrink: 0;
  margin: 0;
  width: 220px;
}

.staff-profile__content {
  min-width: 0;
}

.staff-profile__bio {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 700px) {
  .staff-profile,
  .staff-profile--reverse {
    flex-direction: column;
    text-align: center;
  }

  .staff-profile__photo-wrap {
    margin: 0 auto;
  }
}

/* Doctors & Staff page — each bio gets a rectangular photo with a teal
   accent panel offset behind it (mirrored per section: up-left for the
   left-photo section, up-right for the right-photo one), styled as a
   raised 3D card — inset highlight + soft shadow, echoing the same
   "tactile card" language used for the Contact form. */
.staff-showcase {
  padding: var(--space-lg) var(--space-md);
}

.staff-showcase__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-lg) * 2.2);
}

.staff-showcase__section {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--space-md);
}

.staff-showcase__section--reverse {
  flex-direction: row-reverse;
}

.staff-showcase__photo-frame {
  position: relative;
  flex-shrink: 0;
  width: min(320px, 40vw);
}

.staff-showcase__accent {
  position: absolute;
  top: -1.25rem;
  left: -1.25rem;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 44px -18px rgba(0, 60, 75, 0.4);
  z-index: 0;
}

.staff-showcase__section--reverse .staff-showcase__accent {
  left: auto;
  right: -1.25rem;
}

.staff-showcase__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.28);
}

.staff-showcase__photo--katelyn {
  background-image: url('../assets/images/team/katelyn.jpg');
}

.staff-showcase__photo--devin {
  background-image: url('../assets/images/team/devin.jpg');
}

.staff-showcase__content {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-sm);
}

.staff-showcase__content .eyebrow {
  justify-content: flex-start;
}

.staff-showcase__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--ink);
  margin: 0 0 0.2em;
}

.staff-showcase__role {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

.staff-showcase__content p:not(.eyebrow):not(.staff-showcase__role) {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm);
}

.staff-showcase__content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .staff-showcase__section,
  .staff-showcase__section--reverse {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1.25rem;
  }

  .staff-showcase__photo-frame {
    width: min(280px, 70vw);
  }

  .staff-showcase__content .eyebrow {
    justify-content: center;
  }
}

/* ============================
   Service / condition detail template (Phase 1)
   ============================ */

.service-detail {
  padding: var(--space-lg) var(--space-md);
}

/* Explicit grid areas (rather than nesting image+nav in a shared wrapper)
   so image, content, and nav can each be repositioned independently per
   breakpoint — needed so "Other Services" can sit below the photo on
   desktop but move to the end of the article on mobile, without any JS
   reordering or duplicated markup. The "nav" row is 1fr so it stretches
   to match the content column's full height; without that, the sticky
   nav's containing block would only be as tall as the photo+nav
   themselves and it would run out of room to follow almost immediately. */
.service-detail__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image content"
    "nav content";
  gap: var(--space-lg);
}

.service-detail__image {
  grid-area: image;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 28px rgba(0, 60, 75, 0.16);
}

/* Follows the reader down the page (bounded to the aside column's own
   height via the grid, so it never overlaps the CTA banner below) —
   turns the empty space under a short photo next to a long article into
   a way to jump straight to another service while reading. */
.service-nav {
  grid-area: nav;
  /* Without this, the grid's default align-items: stretch makes this box
     itself fill the entire "nav" row (which spans down to match the much
     taller content column) — so it just IS the full height from the
     start, with no room left to visibly slide as a sticky element. This
     keeps the panel at its own content height while still letting the
     surrounding grid area (which stays full-height) act as the bounds
     the sticky position can travel within. */
  align-self: start;
  position: sticky;
  top: 96px;
  background: #fff;
  border-top: 3px solid var(--teal);
  border-left: 3px solid var(--teal);
  border-right: 3px solid #e8ae00;
  border-bottom: 3px solid #e8ae00;
  border-radius: 6px;
  padding: var(--space-md);
  /* Extra weight on the top/left edges, matching the teal side of the
     frame — a soft shadow hugging those two sides rather than a plain
     even drop shadow all around. */
  box-shadow: -10px -10px 20px -8px rgba(0, 60, 75, 0.28);
}

.service-nav__heading {
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm);
}

.service-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-nav__list li {
  border-bottom: 1px solid var(--hairline);
}

.service-nav__list li:last-child {
  border-bottom: none;
}

.service-nav__list a {
  display: block;
  padding: 0.6em 0.2em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  padding-left: 0.6em;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.service-nav__list a:hover {
  color: var(--teal);
}

.service-nav__list a.is-current {
  color: var(--teal);
  font-weight: 700;
  border-left-color: var(--gold);
}

@media (max-width: 700px) {
  /* "Other Services" moves to the end of the article on mobile, after
     the client noticed patients had to scroll past a full list of other
     services before reaching the article text they actually opened the
     page for. Desktop keeps it directly under the photo (with the sticky
     follow-scroll behavior); mobile has no sticky column to reuse. */
  .service-nav {
    position: static;
  }
}

.service-detail__content {
  grid-area: content;
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.service-detail__content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--ink);
  margin: var(--space-md) 0 var(--space-sm);
}

.service-detail__content h2:first-child {
  margin-top: 0;
}

.service-detail__content h2.service-detail__heading {
  font-size: 1.875rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--hairline);
}

.service-detail__content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  margin: var(--space-md) 0 0.4em;
}

.service-detail__content h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal);
  margin: var(--space-sm) 0 0.3em;
}

.service-detail__content p {
  margin: 0 0 var(--space-sm);
}

.service-detail__content p img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 60, 75, 0.16);
}

.service-detail__content .fine-print {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.service-detail__content .fine-print ol {
  list-style: decimal;
  padding-left: 1.25em;
  margin: 0.5em 0 0;
}

.service-detail__content .fine-print li {
  padding-left: 0;
  margin-bottom: 0.3em;
}

.service-detail__content .fine-print li::before {
  content: none;
}

.service-detail__content ul {
  margin: 0 0 var(--space-sm);
  padding-left: 0.25em;
}

/* The site resets `ul { list-style: none }` globally so every list opts
   in explicitly — this one hadn't, which is why bullets were missing.
   Custom teal dot marker instead of the browser default disc, to match
   the rest of the site's styled-not-default look. */
.service-detail__content li {
  position: relative;
  list-style: none;
  padding-left: 1.1em;
  margin-bottom: 0.4em;
}

.service-detail__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

@media (max-width: 700px) {
  .service-detail__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "image"
      "content"
      "nav";
  }
}

.page-cta {
  padding: var(--space-lg) var(--space-md);
  background: var(--teal);
  text-align: center;
}

.page-cta__inner {
  max-width: 30rem;
  margin: 0 auto;
}

.page-cta__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 var(--space-md);
}

/* ============================
   Static / informational page template (Phase 1)
   ============================ */

.static-content {
  padding: var(--space-lg) var(--space-md);
}

.static-content__inner {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.static-content__inner img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  box-shadow: 0 10px 28px rgba(0, 60, 75, 0.16);
  margin: 0 0 var(--space-md);
}

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

.about-gallery img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  margin: 0;
}

.google-review-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Recreated from a client-supplied reference image — a two-tone pill
   badge, not built from the site's own button system, since it's meant
   to read as "the Google review widget," matching Google's own brand
   blue rather than the site's teal. */
.google-review-badge {
  display: inline-flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.google-review-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.google-review-badge__icon {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.2rem;
}

.google-review-badge__text {
  background: #4285f4;
  color: #fff;
  /* NOT display:flex — that turns the <br>-separated text runs and the
     <strong> into separate flex items instead of letting them wrap as
     normal inline text, scrambling "Google!" onto the wrong line. Plain
     block flow with generous vertical padding centers it well enough
     against the icon side without needing flex at all. */
  display: block;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
}

.google-review-badge__text strong {
  font-weight: 700;
}

@media (max-width: 480px) {
  .google-review-badge__icon {
    padding: 0.75rem 1rem;
  }

  .google-review-badge__text {
    padding: 0.75rem 1.1rem;
    font-size: 0.9rem;
  }
}

/* Ratings summary badge — separate component from the badge above:
   that one drives people to leave a NEW review, this one just displays
   the aggregate rating/count, dark-themed like the client's reference. */
.google-rating-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  text-decoration: none;
  min-width: 150px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.google-rating-badge:hover {
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

.google-rating-badge__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.google-rating-badge__label {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}

.google-rating-badge__external {
  color: rgba(255, 255, 255, 0.5);
}

.google-rating-badge__body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.google-rating-badge__score {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
}

.google-rating-badge__count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}

.insurance-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.insurance-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-sm);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  position: static;
}

/* Cancels the generic .service-detail__content li bullet marker, which
   otherwise leaks onto these logo grid cells (they're not text list
   items) when this component is reused inside the service template. */
.insurance-logos li::before {
  content: none;
}

.insurance-logos img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

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

.resource-links--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .resource-links {
    grid-template-columns: 1fr;
  }
}

.resource-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: #fbfaf7;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.resource-link-card:hover {
  border-color: var(--teal);
  box-shadow: 0 12px 24px rgba(0, 60, 75, 0.12);
  color: var(--teal);
}

.resource-link-card svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gold);
  transition: transform 0.15s ease;
}

.resource-link-card:hover svg {
  transform: translateX(3px);
}

.testimonial-carousel {
  max-width: 42rem;
  margin: 0 auto;
}

.testimonial-carousel__stage {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-carousel__track {
  flex: 1;
  min-width: 0;
}

.testimonial-card {
  position: relative;
  background: #fbfaf7;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: var(--space-lg);
  overflow: hidden;
}

.testimonial-carousel__slide {
  display: none;
}

.testimonial-carousel__slide.is-active {
  display: block;
  animation: testimonial-fade-in 0.4s ease;
}

@keyframes testimonial-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel__slide.is-active {
    animation: none;
  }
}

.testimonial-card__mark {
  position: absolute;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
}

.testimonial-card__mark--open {
  top: 0;
  left: 0.5rem;
}

.testimonial-card__mark--close {
  bottom: -1.1rem;
  right: 0.5rem;
}

.review-stars {
  display: flex;
  gap: 0.15rem;
  margin-bottom: var(--space-sm);
  position: relative;
}

.review-star {
  color: var(--gold);
}

.review-star--filled {
  fill: var(--gold);
}

.testimonial-card__quote {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  position: relative;
}

.testimonial-card__name {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
}

.testimonial-carousel__arrow {
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--teal);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.testimonial-carousel__arrow:hover,
.testimonial-carousel__arrow:focus-visible {
  background: var(--teal-tint);
  border-color: var(--teal);
}

.testimonial-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-md);
}

.testimonial-carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, width 0.25s ease;
}

.testimonial-carousel__dot.is-active {
  width: 24px;
  background: var(--gold);
  border-color: var(--gold);
}

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

@media (max-width: 640px) {
  .testimonial-carousel__stage {
    gap: var(--space-xs);
  }

  .testimonial-carousel__arrow {
    width: 34px;
    height: 34px;
  }
}

.static-content__inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--ink);
  margin: var(--space-md) 0 var(--space-sm);
}

.static-content__inner h2:first-child {
  margin-top: 0;
}

/* Blog posts are ported verbatim, so their original h3/h4/h6 levels are kept
   and styled here instead of being flattened to h2. */
.static-content__inner h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  margin: var(--space-md) 0 var(--space-sm);
}

.static-content__inner h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  margin: var(--space-md) 0 var(--space-sm);
}

.static-content__inner h6 {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted, #5a6b70);
  margin: 0 0 var(--space-xs, 0.5rem);
}

.static-content__inner p {
  margin: 0 0 var(--space-sm);
}

.static-content__inner ul,
.static-content__inner ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25em;
}

.static-content__inner li {
  margin-bottom: 0.4em;
}

/* :not(.btn) — a plain .btn dropped into prose content (e.g. the
   testimonials page CTA row) was inheriting this teal text color at
   higher specificity than .btn's own white, turning its label invisible
   against the button's own teal background. */
.static-content__inner a:not(.btn) {
  color: var(--teal);
  /* WCAG 1.4.1 — a link in running prose can't rely on color alone to
     read as a link; underline is the always-visible non-color cue. */
  text-decoration: underline;
}

.static-content__inner a:not(.btn):hover {
  color: var(--gold);
}

/* Wider layout variant for pages that need a side-by-side block
   (e.g. Contact: info column + map), rather than a single prose column. */
.static-content__inner--wide {
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 700px) {
  .static-content__inner--wide {
    grid-template-columns: 1fr;
  }
}

.static-content__map {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 60, 75, 0.16);
}

.static-content__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Spans both columns of the --wide grid, for content that sits below a
   2-column row (e.g. Contact's map, below the form + info row). */
.static-content__full-row {
  grid-column: 1 / -1;
}

.static-content__map--wide {
  aspect-ratio: unset;
  height: 420px;
}

/* Contact page — form + supporting info, laid out as two clearly
   weighted columns (the form is the primary action; hours/address are
   secondary reference info, pushed right and set off by a divider). */
.contact-columns {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

@media (max-width: 800px) {
  .contact-columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.contact-columns__form h2 {
  margin-top: 0;
}

.contact-columns__info {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-left: 1px solid var(--hairline);
}

.contact-columns__info h2:first-child {
  margin-top: 0;
}

.contact-columns__info h2 {
  font-size: 1.375rem;
}

@media (max-width: 800px) {
  .contact-columns__info {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
  }
}

/* Icon badges — a small circular teal/gold treatment shared by the form
   card's heading and each line under "Visit or Call Us," replacing the
   previous bare inline glyphs with something more tactile. */
.contact-icon-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--gold);
  color: #fff;
}

.contact-icon-badge svg {
  width: 15px;
  height: 15px;
}

.contact-icon-badge--lg {
  width: 46px;
  height: 46px;
}

.contact-icon-badge--lg svg {
  width: 20px;
  height: 20px;
}

.contact-columns__info p {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.contact-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.contact-card__head h2 {
  margin: 0 0 0.15em;
}

.contact-card__subcopy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.contact-card__divider {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0 0 var(--space-md);
}

.contact-columns__info ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-sm);
  border-left: 3px solid var(--gold);
}

.contact-columns__info ul li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 0.3rem 0.6rem;
  line-height: 1.3;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.875rem;
}

.contact-columns__info ul li:last-child {
  border-bottom: none;
}

.contact-columns__info ul li:nth-child(even) {
  background: rgba(0, 115, 145, 0.045);
}

.contact-columns__info ul li span:first-child {
  color: var(--ink);
  font-weight: 700;
}

.contact-columns__info ul li span:last-child {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Real, interactive map, proportioned to sit inside the info column
   below Hours rather than sprawl full-page-width. */
.contact-columns__map {
  margin-top: var(--space-md);
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 24px rgba(0, 60, 75, 0.14);
}

.contact-columns__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The form itself reads as a real, tactile card — off-white ground (a hair
   warmer than the page's paper white, echoing --hairline's own warm bias),
   framed on all sides in a soft gold edge (rather than just a top accent
   stripe), with a layered shadow doing the work of a raised, 3D panel:
   a bright inset top highlight (the "catches the light" edge), a fine
   gold ambient ring just outside the border, and a soft ambient drop
   shadow to lift it off the page. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: #faf8f3;
  border: 1px solid rgba(204, 162, 21, 0.45);
  border-radius: 8px;
  padding: var(--space-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(204, 162, 21, 0.08),
    0 1px 2px rgba(27, 27, 27, 0.04),
    0 24px 44px -22px rgba(0, 60, 75, 0.28);
}

.contact-form[hidden] {
  display: none;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
}

.contact-form__field label {
  font-weight: 700;
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.contact-form__optional {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink-soft);
  opacity: 0.75;
}

.contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contact-form__input-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.contact-form__field-icon {
  position: absolute;
  top: 50%;
  right: 0.85em;
  transform: translateY(-50%);
  color: var(--ink-soft);
  opacity: 0.45;
  pointer-events: none;
}

.contact-form__input-wrap input {
  flex: 1;
  min-width: 0;
  padding-right: 2.5em;
}

.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.75em 0.95em;
  border: 1px solid rgba(0, 115, 145, 0.3);
  border-radius: 4px;
  color: var(--ink);
  background: rgba(0, 115, 145, 0.07);
  box-shadow: inset 0 1px 2px rgba(27, 27, 27, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.8;
}

.contact-form__field input:hover,
.contact-form__field textarea:hover {
  border-color: var(--gold);
  background: rgba(204, 162, 21, 0.09);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(204, 162, 21, 0.22);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  background: var(--teal-dark);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.9em 1.75em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.contact-form__submit svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.contact-form__submit:hover {
  background: #012631;
}

.contact-form__submit:hover svg {
  transform: translateX(3px);
}

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

.contact-form__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.contact-form__trust svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.contact-form__status {
  font-size: 0.9375rem;
  margin: 0;
}

.contact-form__status--error {
  color: #b3261e;
}

.contact-form__success {
  background: #faf8f3;
  border: 1px solid rgba(0, 115, 145, 0.35);
  border-radius: 8px;
  padding: var(--space-lg);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(0, 115, 145, 0.08),
    0 1px 2px rgba(27, 27, 27, 0.04),
    0 24px 44px -22px rgba(0, 60, 75, 0.28);
}

.contact-form__success h3 {
  margin: 0 0 var(--space-xs);
  color: var(--teal);
  font-family: var(--font-display);
}

/* Full-width variant — for content that manages its own internal layout
   (e.g. the blog index's card grid) rather than a single prose column. */
.static-content__inner--full {
  max-width: var(--content-max);
}

.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--teal);
  text-decoration: none;
  margin-bottom: var(--space-md);
  transition: color 0.15s ease, gap 0.15s ease;
}

.blog-post__back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.blog-post__back:hover {
  color: var(--teal-dark);
}

.blog-post__back:hover svg {
  transform: translateX(-3px);
}

.blog-post__back--bottom {
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.blog-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.blog-post__meta-item strong {
  color: var(--ink);
}

.blog-post__meta-divider {
  color: var(--hairline);
}

.blog-post__category {
  color: var(--teal);
  font-weight: 700;
}

.blog-post__share {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.blog-post__share-label {
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 0.1em;
}

/* Matches the footer social icons' resting-state treatment (outline,
   teal glyph) and gold hover — same interactive language, reused here. */
.blog-post__share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Extra `.blog-post__meta` qualifier bumps specificity above the generic
   `.static-content__inner a:hover { color: var(--gold); }` rule, which
   would otherwise win and leave the icon gold-on-gold (invisible). */
.blog-post__meta .blog-post__share-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

.blog-post__share-link svg {
  width: 15px;
  height: 15px;
}

/* Shared placeholder tile — used by any card/media slot that doesn't have
   a real photo yet (all blog posts, until Phase 2 crawls the live site
   for feature photography). A brand-toned gradient + a quiet eye/lens
   glyph, so the page reads as intentionally-in-progress rather than
   broken while photos are still pending. */
.blog-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: rgba(255, 255, 255, 0.7);
}

.blog-media-placeholder svg {
  width: 30%;
  max-width: 48px;
  height: auto;
}

/* ============================
   Blog index — featured post + "latest" sidebar, then a searchable,
   paginated archive grid (client-side slide, no real page reload)
   ============================ */

.blog-featured-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 900px) {
  .blog-featured-row {
    grid-template-columns: 1fr;
  }
}

.blog-featured {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.blog-featured__media {
  width: 87%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto var(--space-xs);
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 87%;
  margin: 0 auto;
}

.blog-featured .blog-featured__date {
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 0.35em;
}

.blog-featured .blog-featured__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.4em;
  color: var(--ink);
}

.blog-featured:hover .blog-featured__heading {
  color: var(--teal);
}

.blog-featured .blog-featured__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm);
}

.blog-latest {
  padding-left: var(--space-lg);
  border-left: 1px solid var(--hairline);
}

@media (max-width: 900px) {
  .blog-latest {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
  }
}

.blog-latest__heading {
  font-size: var(--fs-utility);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0 0 var(--space-md);
}

.blog-latest__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-latest__item {
  display: flex;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
}

.blog-latest__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-latest__media {
  flex-shrink: 0;
  width: 104px;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
}

.blog-latest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-latest__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 0 0 0.35em;
  color: var(--ink);
}

.blog-latest__item:hover .blog-latest__title {
  color: var(--teal);
}

.blog-latest__date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.blog-archive__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.blog-archive__heading {
  margin: 0;
}

.blog-archive__search {
  position: relative;
}

.blog-archive__search svg {
  position: absolute;
  left: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  opacity: 0.55;
  pointer-events: none;
}

.blog-archive__search input {
  width: 280px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.65em 1em 0.65em 2.5em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-archive__search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 115, 145, 0.14);
}

.blog-archive__viewport {
  overflow: hidden;
}

.blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.blog-archive__grid.is-sliding {
  transition: none;
}

@media (max-width: 900px) {
  .blog-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-archive__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-archive__grid {
    transition: none;
  }
}

.blog-archive__card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-archive__card:hover {
  border-color: var(--teal);
  box-shadow: 0 14px 28px rgba(0, 60, 75, 0.12);
}

.blog-archive__card-media {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.blog-archive__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-archive__card-body {
  padding: var(--space-md);
}

.blog-archive__card-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 0.5em;
}

.blog-archive__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 0.5em;
  color: var(--ink);
}

.blog-archive__card:hover .blog-archive__card-title {
  color: var(--teal);
}

.blog-archive__card-excerpt {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.blog-archive__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.blog-archive__nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-archive__nav-btn:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.blog-archive__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.blog-archive__page-label {
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: center;
}

.blog-archive__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: var(--space-lg) 0;
}

/* ============================
   Featured brands (marquee)
   ============================ */

.brands {
  padding: var(--space-lg) 0;
  background: #fbfaf7;
  overflow: hidden;
}

.brands__inner {
  max-width: var(--content-max);
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-md);
  text-align: center;
}

.brands__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--ink);
  margin: 0;
}

.brands__note {
  max-width: var(--content-max);
  margin: var(--space-md) auto 0;
  padding: 0 var(--space-md);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
}

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 1.75rem;
  animation: marquee-scroll 42s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* Showcase card: fixed footprint for every item (image or text placeholder)
   so spacing along the row reads as even regardless of each logo's native
   aspect ratio — the fix for "isn't spread out evenly." */
.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 116px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 60, 75, 0.06);
  padding: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--teal);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.marquee__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 26px rgba(0, 60, 75, 0.14);
  border-color: var(--gold);
}

.marquee__item img {
  max-height: 60px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }

  .marquee__item[aria-hidden="true"] {
    display: none;
  }

  .marquee__item {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .marquee__item:hover {
    transform: none;
  }
}

/* ============================
   Testimonials
   ============================ */

.testimonials {
  background: var(--teal);
}

.testimonials__inner {
  display: grid;
  /* Desktop: media column sized to the photo's real proportion rather than
     a rigid 50/50 split, so the right pane shrinks to match instead of
     leaving the layout looking arbitrary at different viewport widths. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: stretch;
  gap: var(--space-lg);
}

.testimonials__media {
  overflow: hidden;
}

/* Image fills its pane completely on desktop (cropped via object-fit
   rather than left short when the content column's natural height
   differs from the image's own intrinsic height at that column width). */
.testimonials__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials__content {
  min-width: 0;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.testimonials__intro {
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* On the solid-teal background, the shared light-bg .eyebrow (dark text)
   loses contrast — override to the same white+gold-dash pattern already
   used for .hero__eyebrow on dark backgrounds. */
.testimonials .eyebrow {
  color: #fff;
  justify-content: center;
}

.testimonials__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  /* Gold-on-teal measured 2.27:1, failing WCAG AA even at the large-text
     3:1 threshold — white matches the eyebrow above it on this same
     background (5.44:1, passes). */
  color: #fff;
  margin: 0;
}

.testimonials__carousel {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonials__track {
  display: grid;
  width: 100%;
}

.review-card {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(0, 40, 50, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.review-card.is-active {
  opacity: 1;
  visibility: visible;
}

.review-card__stars {
  color: var(--gold);
  letter-spacing: 0.15em;
  font-size: 0.9375rem;
  margin-bottom: var(--space-sm);
}

.review-card__quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__author {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0;
}

.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.testimonials__arrow {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.testimonials__arrow:hover,
.testimonials__arrow:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.testimonials__dots {
  display: flex;
  gap: 0.6rem;
}

.testimonials__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, width 0.25s ease;
}

.testimonials__dot.is-active {
  width: 24px;
  background: var(--gold);
  border-color: var(--gold);
}

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

.testimonials__note {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin: var(--space-md) 0 0;
  max-width: 340px;
}

@media (max-width: 860px) {
  .testimonials__inner {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: image sits on top at its own natural height, no row-
     height mismatch to fix, so keep it uncropped instead of object-fit: cover. */
  .testimonials__media img {
    height: auto;
    object-fit: initial;
  }

  .testimonials__content {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }

  .testimonials__carousel {
    max-width: 300px;
  }
}

/* ============================
   Site footer (map + overlapping contact panel)
   ============================ */

.site-footer {
  position: relative;
  margin-top: var(--space-lg);
}

.site-footer__map {
  height: 520px;
  width: 100%;
}

.site-footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.site-footer__panel {
  position: relative;
  z-index: 2;
  max-width: calc(var(--content-max) - 160px);
  margin: -220px auto 0;
  background: var(--paper);
  border-top: 3px solid var(--gold);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
}

.site-footer__col-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 var(--space-md);
}

.site-footer__line {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-sm);
}

.site-footer__line svg {
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 0.2em;
}

.site-footer__line a {
  color: var(--ink-soft);
}

.site-footer__line a:hover {
  color: var(--teal);
}

.site-footer__email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-xs);
  padding: 0.6em 1.25em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 2px;
  border: 1px solid var(--teal);
  color: var(--teal);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-footer__email-btn:hover {
  background: var(--teal);
  color: #fff;
}

.site-footer--standard .site-footer__email-btn {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.site-footer--standard .site-footer__email-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.site-footer__hours {
  margin: 0;
  font-size: 0.9375rem;
}

.site-footer__hours div {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-md);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--hairline);
}

.site-footer__hours dt {
  flex: 0 0 88px;
  color: var(--ink);
  font-weight: 700;
}

.site-footer__hours dd {
  margin: 0;
  color: var(--ink-soft);
}

.site-footer__col--social {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding: 0 var(--space-sm);
}

.site-footer__social-tagline {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 var(--space-md);
  max-width: 22ch;
}

.site-footer__social-icons {
  display: flex;
  gap: var(--space-md);
}

.site-footer__vs-logo {
  height: 44px;
  width: auto;
  margin-top: var(--space-md);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  color: var(--teal);
  background: var(--paper);
  transition: background-color 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.site-footer__social-link svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease;
}

.site-footer__social-link:nth-child(2):hover,
.site-footer__social-link:nth-child(2):focus-visible {
  transform: translateY(-4px) rotate(6deg);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-4px) rotate(-6deg);
  box-shadow: 0 10px 20px rgba(204, 162, 21, 0.35);
}

.site-footer__social-link:hover svg,
.site-footer__social-link:focus-visible svg {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social-link:hover,
  .site-footer__social-link:focus-visible {
    transform: none;
  }

  .site-footer__social-link:hover svg,
  .site-footer__social-link:focus-visible svg {
    transform: none;
  }
}

/* Full-bleed white bar — deliberately a different surface from the teal/map
   sections above it, so copyright/legal text and the design credit stay
   readable regardless of what's in the footer above. */
.site-footer__legal {
  width: 100%;
  background: var(--paper);
}

.site-footer__legal-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__legal nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-self: end;
}

.site-footer__legal nav a {
  color: var(--ink-soft);
}

.site-footer__legal nav a:hover {
  color: var(--teal);
}

.site-footer__credit {
  justify-self: center;
  white-space: nowrap;
}

.site-footer__credit a {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.site-footer__credit img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .site-footer__map {
    height: 360px;
  }

  .site-footer__panel {
    grid-template-columns: 1fr;
    margin-top: -100px;
    padding: var(--space-md);
    gap: var(--space-lg);
  }

  .site-footer__legal-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__legal nav {
    justify-self: center;
  }

  /* Left/right hairlines only make sense between side-by-side columns;
     stacked single-column mobile gets a top/bottom rule instead. */
  .site-footer__col--social {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-md) 0;
  }
}

/* ============================
   Standard site footer (no map) — every page except the landing page.
   Reuses the same content/columns as the landing footer, but as a solid
   teal block instead of a white panel overlapping a map image, since
   there's no map here to float over.
   ============================ */

.site-footer--standard {
  background: var(--teal);
}

.site-footer--standard .site-footer__panel {
  position: static;
  max-width: var(--content-max);
  margin: 0 auto;
  background: transparent;
  border-top: none;
  box-shadow: none;
  padding: var(--space-lg) var(--space-md);
}

.site-footer--standard .site-footer__col-heading {
  color: #fff;
}

.site-footer--standard .site-footer__line,
.site-footer--standard .site-footer__line a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer--standard .site-footer__line a:hover {
  color: var(--gold);
}

.site-footer--standard .site-footer__line svg {
  color: var(--gold);
}

.site-footer--standard .text-link {
  color: var(--gold);
}

.site-footer--standard .site-footer__social-tagline {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer--standard .site-footer__social-link {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  background: transparent;
}

/* Explicit hover override — needed because the resting-state rule above has
   the same specificity as the shared :hover rule and comes after it in the
   cascade, which was silently winning and preventing the gold hover from
   ever showing on this footer variant. */
.site-footer--standard .site-footer__social-link:hover,
.site-footer--standard .site-footer__social-link:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 10px 20px rgba(204, 162, 21, 0.35);
}

.site-footer--standard .site-footer__hours dt {
  color: #fff;
}

.site-footer--standard .site-footer__hours dd {
  color: rgba(255, 255, 255, 0.8);
}

.site-footer--standard .site-footer__hours div {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.site-footer--standard .site-footer__col--social {
  border-left-color: rgba(255, 255, 255, 0.2);
  border-right-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 800px) {
  .site-footer--standard .site-footer__panel {
    margin-top: 0;
  }

  .site-footer--standard .site-footer__col--social {
    border-top-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }
}

/* ============================
   Placeholder for sections below (removed as each is built)
   ============================ */

.build-placeholder {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 720px) {
  /* The one-line wordmark + Book Appointment box duplicated what's now in
     the sticky mobile header bar below (logo + call + book icons), and
     the client found seeing the same logo/appointment CTA twice in a row
     (once here, once in the nav bar) redundant. Drop this row on mobile
     entirely — phone/address becomes the whole utility bar. */
  .utility-bar__logo-group,
  .utility-bar__cta {
    display: none;
  }

  .utility-bar__inner {
    display: block;
    padding: 0.6rem var(--space-md);
  }

  .utility-bar__contact {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
  }

  /* The sticky header's call icon already covers phone on mobile, and the
     text number wrapped awkwardly ("(262) 267-" / "8161"). Hide it here
     (CSS only, so desktop and the markup are untouched) and let the
     address sit centered on its own two lines. */
  .utility-bar__phone {
    display: none;
  }

  .utility-bar__contact {
    justify-content: center;
  }

  .utility-bar__address {
    text-align: center;
    /* Pin sits beside the first line, not midway between the two. */
    align-items: flex-start;
  }

  .btn {
    padding: 0.6em 1.1em;
    font-size: 0.875rem;
  }

  .btn--appt {
    padding: 0.5em 0.9em;
    gap: 0.5em;
  }

  .btn__icon {
    width: 28px;
    height: 28px;
  }

  .btn__label {
    font-size: 0.6875rem;
  }

  /* Below 720px the desktop .sticky-nav is unavailable (it's hidden under
     1180px entirely) and the horizontal nav is replaced by a hidden
     dropdown behind the hamburger toggle — so without this, there is no
     way to reach navigation at all once scrolled past the header. Making
     the header itself sticky keeps the toggle reachable at any scroll
     position, reusing the same #nav-toggle/#primary-nav already wired up
     in js/app.js rather than building a second, duplicate nav. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 45;
  }

  /* Grid instead of flex so toggle/logo/actions can sit in fixed left
     /center/right slots regardless of each other's width, with the
     dropdown given its own full-width row underneath when opened —
     flexbox's space-between doesn't hold a true center against two
     unevenly-sized flanking groups the way an explicit grid column can. */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  /* The toggle's own padding insets the bars from the page gutter; pull
     it back by the same amount (and a bit tighter on the right) so the
     bars align with the gutter and the logo track gains the room. */
  .nav-toggle {
    display: block;
    grid-column: 1;
    margin-left: calc(var(--space-sm) * -1);
    padding-right: 0.5rem;
  }

  .site-header__mobile-logo {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  .site-header__mobile-logo img {
    height: 16px;
    width: auto;
  }

  .site-header__mobile-logo .site-header__mobile-vs-logo {
    height: 13px;
    width: auto;
  }

  .site-header__mobile-actions {
    grid-column: 3;
    display: flex;
    gap: 0.375rem;
  }

  .primary-nav {
    display: none;
    width: 100%;
    grid-column: 1 / -1;
  }

  .primary-nav.is-open {
    display: block;
  }

  .primary-nav__list {
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--space-sm);
  }

  /* Real bug: base .primary-nav__link is `display: inline-block` (needed
     for the horizontal desktop layout), which on mobile's stacked list
     shrinks the link's hit/highlight box down to just the width of its
     own text — so the hover/tap highlight only ever appeared in a narrow
     strip around the word itself, not across the full row width like
     dropdown-parent rows (.primary-nav__link-row, a flex container that
     already spans full width) do. Forcing block here makes plain links
     fill their <li> the same way, so hovering/tapping anywhere across the
     row lights it up — matching dropdown rows instead of looking "broken"
     next to them. */
  .primary-nav__link {
    display: block;
    padding: 0.85rem 0;
    border-bottom: none;
  }

  /* Gold left-border is reserved for the actual current page (a permanent
     "you are here" marker) — hover/focus only get the background fill, so
     pointing at a link doesn't falsely read as marking it the active page.
     Both still shift padding-left together so the row doesn't jump when
     the current page also happens to be hovered. */
  .primary-nav__link:hover,
  .primary-nav__link:focus-visible,
  .primary-nav__link[aria-current="page"] {
    border-bottom: none;
    padding-left: var(--space-xs);
    background: var(--teal-tint);
  }

  .primary-nav__link[aria-current="page"] {
    border-left: 2px solid var(--gold);
  }

  .primary-nav__link-row {
    padding: 0.85rem 0;
    border-bottom: none;
    justify-content: space-between;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
  }

  .primary-nav__item.has-dropdown:hover .primary-nav__link-row,
  .primary-nav__item.has-dropdown:focus-within .primary-nav__link-row,
  .primary-nav__item.has-dropdown.is-open .primary-nav__link-row {
    border-bottom: none;
    padding-left: var(--space-xs);
    background: var(--teal-tint);
  }

  .nav-caret {
    padding: 0.5rem;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 0;
    display: none;
  }

  /* Deliberately NOT :focus-within here (unlike the desktop rule above) —
     tapping the caret on mobile leaves focus sitting on that button, so
     :focus-within stayed true even after JS removed .is-open, and the
     submenu would only actually close once focus moved to a *different*
     caret. Mobile relies solely on the JS-driven .is-open class. */
  .primary-nav__item.has-dropdown.is-open .nav-dropdown {
    display: block;
  }

  .nav-dropdown a {
    padding: 0.65rem 0.5rem 0.65rem 1rem;
    font-size: 0.875rem;
  }

  .nav-caret--sub {
    padding: 0.5rem;
  }

  .nav-submenu a {
    padding: 0.6rem 0.5rem 0.6rem 1.75rem;
  }
}

/* Below ~500px the narrow header's grid middle track isn't wide enough for
   a 16px-tall rendering of the one-line wordmark (~17:1) without the global
   `img { max-width: 100% }` reset clamping its width and squishing the
   letterforms — same distortion class as the earlier "Header logo
   distorting on mobile" fix, fixed the same way: let height go auto
   instead of fighting the clamp. 150px matches the cap already used for
   this same asset elsewhere on narrow mobile. */
@media (max-width: 500px) {
  .site-header__mobile-logo img {
    height: auto;
    width: auto;
    max-width: 150px;
  }
}

/* ============================
   Our Story — scroll-drawn timeline
   Scoped entirely under .story-intro / .story-timeline / .story-carousel so
   nothing here leaks into the other pages sharing this stylesheet.

   The rail is two stacked layers: a static hairline track, and a teal-to-gold
   fill that is scaled vertically by --story-progress (0 to 1), which app.js
   recomputes on scroll. Only transform/opacity animate; the rail's pixel
   extent is measured once (and on resize) into --story-rail-top /
   --story-rail-height so the line starts and ends exactly on the first and
   last milestone bubbles rather than at arbitrary container edges.
   ============================ */

.story-intro {
  max-width: 44rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

.story-intro__lead {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}

/* Wordmark stands in for the practice name at the end of the lead
   sentence; its alt text carries the name so the sentence still reads
   in full for screen readers and crawlers. */
.static-content__inner .story-intro__logo {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  margin: var(--space-sm) auto var(--space-md);
  box-shadow: none;
  border-radius: 0;
}

.story-intro p + p {
  color: var(--ink-soft);
}

.story-timeline {
  --story-rail-col: 7rem;
  --story-rail-top: 1.6rem;
  --story-rail-height: calc(100% - 3.2rem);
  --story-progress: 0;
  --story-gap: 3.5rem;

  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) 0 var(--space-md);
  /* Soft vertical wash so the timeline reads as its own surface rather than
     floating on flat paper — keyed off the existing teal tint token. */
  background:
    radial-gradient(60% 40% at 50% 0%, var(--teal-tint) 0%, rgba(234, 244, 246, 0) 70%),
    radial-gradient(70% 45% at 50% 100%, rgba(234, 244, 246, 0.75) 0%, rgba(234, 244, 246, 0) 72%);
}

/* The `.static-content__inner ol` prose rule further up sets padding-left:
   1.25em, which shifted this grid ~21px right of the absolutely-positioned
   rail — the line ran down the edge of the bubbles instead of their centers.
   Matching that rule's specificity is what actually unsets it. */
.static-content__inner .story-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--story-gap);
}

.static-content__inner .story-timeline__item {
  margin: 0;
}

/* ---- The rail ---- */

.story-timeline__rail {
  position: absolute;
  left: 50%;
  top: var(--story-rail-top);
  height: var(--story-rail-height);
  width: 3px;
  transform: translateX(-50%);
  pointer-events: none;
}

.story-timeline__rail-track,
.story-timeline__rail-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.story-timeline__rail-track {
  background: var(--hairline);
}

/* Revealed with clip-path rather than scaleY: scaling would squash the
   gradient along with the element, so the leading edge would read gold from
   the very first pixel. Clipping keeps the teal→gold ramp anchored to the
   rail's true length, so the gold only arrives as the story does. */
.story-timeline__rail-fill {
  background: linear-gradient(180deg, var(--teal-dark) 0%, var(--teal) 45%, var(--gold) 100%);
  clip-path: inset(0 0 calc((1 - var(--story-progress)) * 100%) 0);
  box-shadow: 0 0 16px -2px rgba(0, 115, 145, 0.45);
}

/* The drawing head. It rides the fill's leading edge and tucks in behind the
   milestone bubbles at either end of the rail (they sit at a higher z-index),
   so it appears to emerge from one bubble and dock into the next. */
.story-timeline__rail-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(204, 162, 21, 0.18), 0 0 14px rgba(204, 162, 21, 0.6);
  transform: translateY(calc(var(--story-progress) * var(--story-rail-height)));
}

.story-timeline:not(.is-enhanced) .story-timeline__rail-head {
  display: none;
}

/* ---- Items ---- */

.story-timeline__item {
  /* --story-marker-y is the milestone heading's own first-line centre,
     measured by app.js and written back here, so the bubble tracks the
     title through any wrap, font size or breakpoint change. The fallback
     below is the eyebrow + half a heading line, for the no-JS case. */
  --story-marker-y: 2.6rem;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--story-rail-col) minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
}

/* Contents read left-aligned, but the block itself is pulled over to the
   rail so the copy still reads as attached to its milestone rather than
   stranded at the far edge of the page. */
.story-timeline__text {
  grid-column: 1;
  justify-self: end;
  max-width: 23rem;
  padding-right: var(--space-md);
  text-align: left;
}

/* A hairline "tick" connecting the copy to its bubble was tried here and
   removed: at this rail width it only had ~18px to span, so it read as a
   stray dash beside the date rather than as a connector. */

.story-timeline__media {
  grid-column: 3;
  padding-left: var(--space-md);
}

/* ---- Milestone bubble ---- */

/* Taken out of the grid and pinned to the rail's own axis at the heading's
   height: as a grid item it could only ever align to the top of the whole
   milestone block, which drifted further from the title the taller the
   block got (worst on Grand Opening Day). */
.story-timeline__marker {
  position: absolute;
  top: var(--story-marker-y);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 2px solid var(--hairline);
  color: var(--ink-soft);
  box-shadow: 0 6px 18px -8px rgba(0, 60, 75, 0.35);
  transition: border-color 0.45s ease, background-color 0.45s ease,
    color 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Outer halo — a separate ring so it can bloom without shifting the bubble. */
.story-timeline__marker::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 115, 145, 0.28);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-timeline__marker-num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.story-timeline__marker.is-lit {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--paper);
  /* Keeps the centring translate — this element is positioned by transform. */
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 0 0 6px rgba(0, 115, 145, 0.1),
    0 14px 30px -12px rgba(0, 60, 75, 0.55);
}

.story-timeline__marker.is-lit::before {
  opacity: 1;
  transform: scale(1);
}

/* ---- Text block ---- */

.story-timeline__date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 0.4rem;
}

.static-content__inner .story-timeline__heading {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}

.static-content__inner .story-timeline__text p:not(.story-timeline__date) {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0;
}

/* ---- Photo collage ----
   One shared treatment for milestones 1 and 2: a 3:2 establishing shot with
   a smaller card overlapping its lower-right corner. The inset is absolutely
   positioned so it costs almost no extra height — the earlier version hung
   the second photo below the first, which is what made the Construction
   section so tall. Both sections use it so they read as a set. */

.story-collage {
  position: relative;
  /* Just enough room for the inset's overhang; the frame itself is fixed
     3:2, so the whole cluster's height is predictable and compact. */
  padding-bottom: 2.25rem;
}

.story-collage__main {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 60, 75, 0.08),
    0 18px 38px -16px rgba(0, 60, 75, 0.42);
}

.static-content__inner .story-collage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Overhangs to the right by less than the page's own side padding, so it
   never introduces a horizontal scrollbar at any width. */
.story-collage__inset {
  position: absolute;
  right: -0.875rem;
  bottom: 0;
  width: 30%;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 5px solid var(--paper);
  box-shadow: 0 22px 44px -16px rgba(0, 60, 75, 0.55);
}

/* The logo-wall photo is only 500×500, so it gets a square frame and a
   smaller slot — enough to read as a portrait, not enough to go soft. */
.story-collage__inset--square {
  aspect-ratio: 1 / 1;
  width: 30%;
}

.static-content__inner .story-collage__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- In-section carousel (grand opening) ---- */

.story-carousel__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  background: var(--teal-tint);
  box-shadow:
    0 2px 4px rgba(0, 60, 75, 0.08),
    0 18px 38px -16px rgba(0, 60, 75, 0.42);
}

.story-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.65s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.story-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.story-carousel__slide picture,
.story-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.static-content__inner .story-carousel__slide img {
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Grand opening's indoor/outdoor pair are both portrait shots (900x1350,
   2:3). Each gets a genuine half-width column (600x800 at the frame's own
   1200x800 size) rather than a full-frame layer faked into a wedge with
   clip-path — that earlier approach sized object-fit: cover against the
   *entire* 1200-wide frame (a 3:2 box against a 2:3 photo is width-bound,
   so cover scaled the image to 1200x1800 and threw away 56% of its height
   before the wedge even clipped it further, guillotining heads and signage).
   A true half-width column is much closer to the photo's own aspect ratio
   (600x800, 3:4) and only crops ~11% of the height, split top/bottom — the
   whole photo, both people and the surrounding scene, actually fits. */
.story-diagonal {
  position: absolute;
  inset: 0;
  display: flex;
}

.story-diagonal__half {
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
}

.static-content__inner .story-diagonal__half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.story-diagonal__half--a {
  border-right: 3px solid var(--paper);
}

.story-carousel__nav {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.story-carousel__arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.86);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 18px -8px rgba(0, 40, 50, 0.6);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.story-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

.story-carousel__arrow:hover {
  background: var(--teal);
  color: var(--paper);
  transform: translateY(-2px);
}

.story-carousel__arrow:active {
  transform: translateY(0);
}

.story-carousel__dots {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

.story-carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--hairline);
  transition: background-color 0.25s ease, width 0.25s ease;
}

.story-carousel__dot.is-active {
  width: 1.5rem;
  background: var(--teal);
}

.story-carousel__dot:hover {
  background: var(--gold);
}

/* ---- Scroll reveal ---- */

.story-timeline__text,
.story-timeline__media {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-timeline__item.is-visible .story-timeline__text {
  opacity: 1;
  transform: translateY(0);
}

.story-timeline__item.is-visible .story-timeline__media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

/* No-JS safety net: without the observer the items never get .is-visible,
   so the un-enhanced markup must still show everything. */
.story-timeline:not(.is-enhanced) .story-timeline__text,
.story-timeline:not(.is-enhanced) .story-timeline__media {
  opacity: 1;
  transform: none;
}

.story-timeline:not(.is-enhanced) .story-timeline__rail-fill {
  clip-path: inset(0);
}

/* ---- Tablet ---- */

@media (max-width: 900px) {
  .story-timeline {
    --story-rail-col: 5rem;
    --story-gap: 2.75rem;
  }

  .static-content__inner .story-timeline__heading {
    font-size: 1.625rem;
  }
}

/* ---- Mobile: the rail moves to a left-hand gutter but keeps drawing ----
   A literally centered line at ~375px leaves two ~150px columns, which is
   too cramped for either the copy or the photos. The rail keeps its
   scroll-driven fill and its bubbles; only its horizontal position and the
   content flow change. */

@media (max-width: 760px) {
  .story-timeline {
    /* 3.75rem leaves ~10px of air between a 2.5rem bubble and the heading
       beside it; at 3.25rem the two nearly touched. */
    --story-rail-col: 3.75rem;
    --story-gap: 2.5rem;
    padding-top: var(--space-md);
  }

  .story-timeline__rail {
    left: calc(var(--story-rail-col) / 2);
    width: 2px;
  }

  .story-timeline__item {
    grid-template-columns: var(--story-rail-col) minmax(0, 1fr);
    row-gap: var(--space-md);
  }

  /* Still pinned to the heading's line, just on the left-hand rail axis. */
  .story-timeline__marker {
    left: calc(var(--story-rail-col) / 2);
    width: 2.5rem;
    height: 2.5rem;
  }

  .story-timeline__marker-num {
    font-size: 0.8125rem;
  }

  .story-timeline__marker::before {
    inset: -0.4rem;
  }

  .story-timeline__text {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: none;
    padding-right: 0;
  }

  .story-timeline__media {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
  }

  .story-intro__lead {
    font-size: 1.25rem;
  }
}

@media (max-width: 520px) {
  /* The inset needs a slightly larger share of a ~300px column to stay
     legible, and less overhang so it clears the page gutter. */
  .story-collage__inset {
    width: 36%;
    right: -0.5rem;
  }

  .story-collage__inset--square {
    width: 33%;
  }

  .story-carousel__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ---- Reduced motion: show the finished state, skip the draw ----
   The sitewide reduce block already flattens durations; these rules make
   sure the *end* state is what's shown rather than a 0-progress rail.
   app.js mirrors this by pinning progress to 1 and lighting every bubble. */

@media (prefers-reduced-motion: reduce) {
  .story-timeline__rail-fill {
    clip-path: inset(0);
  }

  /* No drawing is happening, so there is no leading edge to mark. */
  .story-timeline__rail-head {
    display: none;
  }

  .story-timeline__text,
  .story-timeline__media {
    opacity: 1;
    transform: none;
  }

  .story-carousel__slide {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Promotions (/promotions/, /promotions/<id>/)
   ------------------------------------------------------------------ */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.promo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: #fbfaf7;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--gold);
  border-radius: 6px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.promo-card:hover,
.promo-card:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 12px 24px rgba(0, 60, 75, 0.12);
}

.promo-card__audience {
  font-size: var(--fs-utility);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.promo-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}

.promo-card__amount {
  color: var(--ink-soft);
}

.promo-card__amount strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--teal-dark);
}

.promo-card__expires {
  font-size: var(--fs-utility);
  color: var(--ink-soft);
}

.promo-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-xs);
  font-weight: 700;
  color: var(--teal);
}

.promo-card__more svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  transition: transform 0.15s ease;
}

.promo-card:hover .promo-card__more svg {
  transform: translateX(3px);
}

.promo-detail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.promo-detail__badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--teal-tint);
  color: var(--teal-dark);
  border-radius: 999px;
  font-size: var(--fs-utility);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.promo-detail__headline {
  margin: var(--space-sm) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.35;
}

.promo-detail__headline strong {
  color: var(--teal-dark);
  font-size: 2.5rem;
}

.promo-detail__or {
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.promo-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.promo-detail__image {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 60, 75, 0.12);
}

.promo-detail__image img {
  display: block;
  width: 100%;
  height: auto;
}

.promo-steps {
  padding-left: 1.25rem;
}

.promo-steps li {
  margin-bottom: var(--space-sm);
}

.promo-detail__fine {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

@media (max-width: 800px) {
  .promo-grid,
  .promo-detail {
    grid-template-columns: 1fr;
  }
}

/* Promotions: the static-content link rule underlines/tints every anchor,
   so cards and image links opt out, and the outline button (built for the
   dark CTA banner) gets teal-on-white colors here. */
.static-content__inner a.promo-card,
.static-content__inner a.promo-detail__image {
  text-decoration: none;
  color: var(--ink);
}

.static-content__inner a.promo-card:hover {
  color: var(--ink);
}

.static-content__inner a.promo-card .promo-card__audience,
.static-content__inner a.promo-card .promo-card__more {
  color: var(--teal);
}

.promo-card__amount span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
}

.static-content__inner .promo-detail__actions .btn--outline {
  color: var(--teal-dark);
  border-color: var(--teal);
  background: transparent;
}

.static-content__inner .promo-detail__actions .btn--outline:hover {
  background: var(--teal-tint);
  color: var(--teal-dark);
  border-color: var(--teal-dark);
}

/* The global .static-content__inner img rule adds a bottom margin and its
   own shadow; inside the bordered promo frame that showed as a blank strip. */
.static-content__inner .promo-detail__image img {
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Thank-you pages (/contact/thank-you/, /make-an-appointment/thank-you-*) */
.thank-you {
  background: #faf8f3;
  border: 1px solid rgba(0, 115, 145, 0.35);
  border-radius: 8px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(0, 115, 145, 0.08),
    0 1px 2px rgba(27, 27, 27, 0.04),
    0 24px 44px -22px rgba(0, 60, 75, 0.28);
}

.thank-you__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal);
  margin-bottom: var(--space-sm);
}

.static-content__inner .thank-you__heading {
  margin-top: 0;
  color: var(--teal);
}

.thank-you__lead {
  font-size: 1.0625rem;
  margin-bottom: var(--space-md);
}

.static-content__inner .thank-you__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  text-align: left;
  display: grid;
  gap: var(--space-xs);
}

.thank-you__steps li {
  position: relative;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: #fff;
  border: 1px solid rgba(0, 115, 145, 0.15);
  border-radius: 6px;
}

.thank-you__steps li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gold);
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-md);
}

.static-content__inner a.thank-you__btn--secondary {
  background: transparent;
  color: var(--teal);
  text-decoration: none;
}

.static-content__inner a.btn {
  color: var(--paper);
  text-decoration: none;
}

.static-content__inner a.btn:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.static-content__inner a.thank-you__btn--secondary:hover {
  background: var(--teal-tint);
  color: var(--teal-dark);
}

.static-content__inner a.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.thank-you__phone {
  margin: 0;
  color: var(--ink-soft);
}