/* ============================================================
   OdontoBoss — Design Tokens & Base Styles
   ============================================================ */

:root {
  /* Palette — clinical premium */
  --ink: #0A1628;
  --ink-soft: #1E2E44;
  --ink-muted: #4A5A72;
  --bone: #F7F4EF;
  --bone-soft: #EFEAE1;
  --pearl: #FFFFFF;
  --gold: #B08D57;
  --gold-soft: #D4B989;
  --gold-deep: #8A6B3D;
  --muted: #6B7A8F;
  --stone: #D8D2C7;
  --stone-soft: #EAE5DB;
  --success: #2F7D63;
  --danger: #B23A3A;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 3px rgba(10, 22, 40, 0.06);
  --shadow-md: 0 6px 20px -8px rgba(10, 22, 40, 0.12), 0 2px 6px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 20px 50px -20px rgba(10, 22, 40, 0.25), 0 6px 20px -10px rgba(10, 22, 40, 0.12);
  --shadow-xl: 0 40px 80px -30px rgba(10, 22, 40, 0.35);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --nav-h: 76px;
  --page-max: 1240px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 520ms;
}

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

/* No `scroll-behavior: smooth` here on purpose. ScrollTrigger jumps the page to
   the top to measure the pinned sections and reads the position straight back;
   a smooth scroller animates that jump, so it measures mid-flight and every
   trigger ends up offset by the current scroll position. In-page anchors get
   their smooth scroll from window.scrollTo() in assets/js/main.js instead. */

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

button {
  font: inherit;
  cursor: pointer;
}

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

/* Accessible visible focus */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Typography scale
   ============================================================ */
.font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.font-ui {
  font-family: var(--font-ui);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.2;
}

h4 {
  font-size: 1.15rem;
  font-weight: 600;
}

p {
  margin: 0;
}

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Serif italic for accent phrases */
.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out-quart),
    background var(--dur-med) var(--ease-out-quart),
    color var(--dur-med) var(--ease-out-quart),
    border-color var(--dur-med) var(--ease-out-quart),
    box-shadow var(--dur-med) var(--ease-out-quart);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}

.btn--primary:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  box-shadow: var(--shadow-md);
}

.btn--gold {
  background: var(--gold);
  color: var(--pearl);
  border-color: var(--gold);
}

.btn--gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--pearl);
}

.btn--ghost-light {
  background: transparent;
  color: var(--pearl);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost-light:hover {
  background: var(--pearl);
  color: var(--ink);
  border-color: var(--pearl);
}

.btn__arrow {
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-med) var(--ease-out-quart),
    border-color var(--dur-med) var(--ease-out-quart),
    box-shadow var(--dur-med) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.nav.is-scrolled {
  background: rgba(247, 244, 239, 0.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--stone-soft);
  box-shadow: 0 6px 24px -18px rgba(10, 22, 40, 0.25);
}

.nav__brand {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.nav__brand-mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  transition: transform var(--dur-slow) var(--ease-out-quart);
}

.nav__brand:hover .nav__brand-mark {
  transform: scale(1.08) rotate(4deg);
}

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

.nav__links {
  display: none;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0;
  line-height: 1;
  transition: color var(--dur-med);
}

.nav__links a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__links a[aria-current="page"],
.nav__links a.is-current {
  color: var(--gold-deep);
}

/* Specialty pages flag the parent section without claiming to be its URL */
.nav__links a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__cta {
  display: none;
}

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--stone);
  border-radius: 2px;
  color: var(--ink);
}

.nav__burger:hover {
  background: var(--ink);
  color: var(--pearl);
  border-color: var(--ink);
}

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--pearl);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-menu.is-open {
  transform: translateY(0);
}

/* The drawer is `overflow: hidden` and the list is `flex: 1`, so on
   a 667px-tall phone the list needed ~580px but got ~424px and the
   last entries (Equipe, Contato) plus the footer were cut off with
   no way to reach them. Let the drawer scroll instead. */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: var(--nav-h);
}

.mobile-menu__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--pearl);
  border-radius: 2px;
}

.mobile-menu__list {
  list-style: none;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 0 auto;
}

.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--pearl);
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu__foot {
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

/* The phone and WhatsApp rows are the two actions most likely to be
   tapped from the drawer, so give them a real touch target. */
.mobile-menu__foot a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--pearl);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--nav-h) + 1.5rem);
  padding-bottom: 2rem;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}

.hero__stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-block: 1.5rem;
}

.hero__tooth-frame {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__lead {
  max-width: 38ch;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--ink-muted);
  text-align: center;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__stat-num sup {
  font-size: 0.6em;
  color: var(--gold);
}

.hero__stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ============================================================
   Hero — tooth-shaped portrait stage
   ============================================================ */
.hero__bg-word {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 35%, transparent 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}

.hero__bg-word--left {
  left: 0;
}

.hero__bg-word--right {
  right: 7%;
  background: linear-gradient(270deg, var(--ink) 0%, var(--ink) 35%, transparent 90%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__tooth {
  position: relative;
  z-index: 1;
  width: min(70vw, 380px);
  aspect-ratio: 1312 / 1199;
}

/* O dente em si — render 3D glossy com alto contraste e definição */
.hero__tooth-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  transform-origin: 50% 20%;
  pointer-events: none;
  filter: contrast(0.90) brightness(0.97);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.6) 93%, transparent 100%);
}

/* Container dos especialistas: sobrepõe o dente com cabeças sobressaindo */
.hero__tooth-people {
  position: absolute;
  top: -18%;
  left: -4%;
  width: 108%;
  height: 118%;
  z-index: 2;
  pointer-events: none;
}

/* Foto dos especialistas: 100% de opacidade sólida com transição suave na névoa dos pés */
.hero__tooth-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.8) 93%,
      rgba(0, 0, 0, 0.3) 97%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      #000 0%,
      #000 88%,
      rgba(0, 0, 0, 0.8) 93%,
      rgba(0, 0, 0, 0.3) 97%,
      transparent 100%);
}

/* Névoa suave na base: transição elegante e homogênea para o fundo da página */
.hero__tooth-shade {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -4%;
  height: 25%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(247, 244, 239, 0) 0%,
      rgba(247, 244, 239, 0.2) 35%,
      rgba(247, 244, 239, 0.6) 70%,
      rgba(247, 244, 239, 0.95) 95%,
      var(--bone) 100%);
}

.hero__corner {
  position: relative;
  z-index: 2;
}

.hero__corner--info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 340px;
}

.hero__doctor-card {
  width: min(84vw, 290px);
  background: var(--pearl);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(10, 22, 40, 0.10), 0 2px 8px rgba(10, 22, 40, 0.06);
  padding: 1rem 1.2rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med);
}

.hero__doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.14), 0 4px 12px rgba(10, 22, 40, 0.08);
}

.hero__doctor-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.hero__doctor-nav button {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}

.hero__doctor-track {
  flex: 1;
  height: 2px;
  background: var(--stone-soft);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.hero__doctor-track span {
  position: absolute;
  inset: 0 75% 0 0;
  background: var(--gold);
}

.hero__doctor-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hero__doctor-photo {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.1);
}

.hero__doctor-info strong {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.hero__doctor-role {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
}

.hero__doctor-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 6px;
}

.hero__doctor-rating {
  color: var(--gold-deep);
  font-weight: 600;
}

/* Diamond floating decoration */
.hero__deco {
  position: absolute;
  z-index: -1;
  opacity: 0.04;
  pointer-events: none;
}

.hero__deco--tr {
  top: 15%;
  right: -8%;
  width: 320px;
}

.hero__deco--bl {
  bottom: 8%;
  left: -8%;
  width: 280px;
}

/* ============================================================
   Geometric Diamond Decorative Watermarks
   ============================================================ */
.section-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  color: var(--ink);
  max-width: none;
}

.section-deco--gold {
  color: var(--gold);
  opacity: 0.045;
}

.section-deco--pearl {
  color: var(--pearl);
  opacity: 0.04;
}

.section-deco--tr {
  top: -30px;
  right: -6%;
  width: clamp(240px, 28vw, 420px);
}

.section-deco--tl {
  top: -20px;
  left: -6%;
  width: clamp(240px, 28vw, 400px);
}

.section-deco--br {
  bottom: -40px;
  right: -6%;
  width: clamp(240px, 28vw, 420px);
}

.section-deco--bl {
  bottom: -20px;
  left: -6%;
  width: clamp(240px, 28vw, 380px);
}

.section-deco--ml {
  top: 40%;
  left: -7%;
  width: clamp(260px, 30vw, 420px);
}

.section-deco--mr {
  top: 40%;
  right: -7%;
  width: clamp(260px, 30vw, 420px);
}

#especialidades,
.location-section,
#lista,
#especialistas,
.contact-section {
  position: relative;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero__stage {
    display: block;
  }

  .hero__tooth-frame {
    position: absolute;
    inset: 0;
  }

  .hero__tooth {
    width: min(36vw, 500px);
  }

  .hero__corner--info {
    position: absolute;
    left: 0;
    bottom: 4%;
    align-items: flex-start;
  }

  .hero__lead {
    text-align: left;
  }

  .hero__corner--stats {
    position: absolute;
    right: 2%;
    bottom: 10%;
  }

  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__burger {
    display: none;
  }
}

/* --- Phones/tablets: the wordmark IS the hero headline ---------
   Below 900px the tooth and the team photo cover the middle of
   the stage, so the split wordmark sat entirely behind them and
   the brand name never appeared (the <h1> is sr-only). The two
   halves are pulled onto a single centred line and lifted clear
   of the crown, so the name reads first and the tooth overlaps
   only its baseline.
   The directional fade is dropped here on purpose: on one line
   it erases the middle, which is exactly where the words meet. */
@media (max-width: 899px) {
  /* The frame becomes a 2x2 grid: "ODONTO" and "BOSS" share the top
     row, the tooth spans the bottom one. Taking the words out of
     absolute positioning is what makes them centre correctly —
     "ODONTO" is much wider than "BOSS", so pinning their shared gap
     to the 50% line threw the wordmark ~36px off centre and clipped
     the O. `justify-content: center` centres the pair as one block. */
  .hero__tooth-frame {
    --tooth-w: min(64vw, 300px);
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: end;
    column-gap: 0.13em;
  }

  .hero__bg-word {
    position: static;
    grid-row: 1;
    transform: none;
    font-size: clamp(2.15rem, 10.5vw, 3.6rem);
    line-height: 1;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--ink);
    opacity: 1;
  }

  .hero__bg-word--left {
    grid-column: 1;
  }

  .hero__bg-word--right {
    grid-column: 2;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }

  .hero__tooth {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--tooth-w);
    /* The team photo overhangs the tooth by 18% of its height
       (height = width x 1199/1312, so 0.1645 x width). Dropping the
       tooth by that much lands the heads on the wordmark's baseline:
       the name reads clean, the crown still overlaps it. */
    margin-top: calc(var(--tooth-w) * 0.1645 - 6px);
  }

  /* One clear primary action, sized for thumbs. */
  .hero__corner--info .btn {
    width: 100%;
    max-width: 320px;
  }

  .hero__stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
}

/* Short phones: claw back vertical space so the stats still land
   above the fold instead of being pushed off by the tooth. */
@media (max-width: 899px) and (max-height: 740px) {
  .hero__tooth-frame {
    --tooth-w: min(55vw, 250px);
  }

  .hero__bg-word {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }

  .hero__stage {
    gap: 1.35rem;
  }

  .hero__lead {
    font-size: 0.9rem;
  }
}

/* ============================================================
   Reveal animation base state
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Section header (eyebrow + title + lead)
   ============================================================ */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head .eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
}

.section-head h2+.lead {
  margin-top: 1.25rem;
}

.section-head.center {
  text-align: center;
  margin-inline: auto;
}

/* Service cards */
.services-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

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

/* Hover-reveal tiles: the hovered/focused card stands out in full color
   while its siblings recede (dim + blur), guided by .is-hovering /
   .is-active toggled from assets/js/main.js. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 410px;
  padding: 2rem 1.6rem 1.35rem;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background-color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease-out-quart),
    opacity var(--dur-slow) var(--ease-out-quart),
    filter var(--dur-slow) var(--ease-out-quart),
    box-shadow var(--dur-slow) var(--ease-out-quart),
    border-color var(--dur-med) var(--ease-out-quart);
}

.service-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.80);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out-quart),
    filter var(--dur-slow) var(--ease-out-quart);
  will-change: transform;
}

.service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(10, 22, 40, 0.04) 0%,
      rgba(10, 22, 40, 0.30) 38%,
      rgba(10, 22, 40, 0.85) 68%,
      rgba(10, 22, 40, 0.98) 95%);
  pointer-events: none;
  transition: background var(--dur-med) var(--ease-out-quart);
}

.service-card__content {
  position: relative;
  z-index: 2;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--pearl);
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.service-card__desc {
  font-size: 0.86rem;
  color: rgba(247, 244, 239, 0.90);
  line-height: 1.5;
  margin-top: 0.5rem;
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.service-card__arrow {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color var(--dur-med) var(--ease-out-quart);
}

.service-card__arrow svg {
  transition: transform var(--dur-med) var(--ease-out-quart);
}

/* Sibling recede while another card is active.
   Gated to real pointers: on a touchscreen `mouseenter` fires on
   tap but the matching `mouseleave` often never does, which left
   every other card stuck dimmed and blurred. */
@media (hover: hover) and (pointer: fine) {
  .services-grid.is-hovering .service-card:not(.is-active) {
    opacity: 0.55;
    filter: blur(1.5px) saturate(0.75);
    transform: scale(0.97);
  }
}

.service-card:hover,
.service-card:focus-visible,
.service-card.is-active {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(176, 141, 87, 0.5);
  box-shadow: 0 20px 45px -10px rgba(10, 22, 40, 0.45), 0 0 24px rgba(176, 141, 87, 0.15);
  z-index: 2;
  opacity: 1;
  filter: none;
}

.service-card:hover .service-card__bg,
.service-card:focus-visible .service-card__bg,
.service-card.is-active .service-card__bg {
  transform: scale(1.10);
  filter: brightness(0.95);
}

.service-card:hover .service-card__overlay,
.service-card:focus-visible .service-card__overlay,
.service-card.is-active .service-card__overlay {
  background: linear-gradient(180deg,
      rgba(10, 22, 40, 0.10) 0%,
      rgba(10, 22, 40, 0.45) 35%,
      rgba(10, 22, 40, 0.82) 70%,
      rgba(10, 22, 40, 0.96) 100%);
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow,
.service-card.is-active .service-card__arrow {
  color: #fff;
}

.service-card:hover .service-card__arrow svg,
.service-card:focus-visible .service-card__arrow svg,
.service-card.is-active .service-card__arrow svg {
  transform: translateX(4px);
}

/* Six 410px tiles stacked in one column is a very long scroll on
   a phone; trim the tile down instead. */
@media (max-width: 639px) {
  .service-card {
    min-height: 330px;
    padding: 1.6rem 1.25rem 1.15rem;
  }

  .service-card__title {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .service-card,
  .service-card__bg,
  .service-card__arrow svg {
    transition: none;
  }
}

/* Feature service (Invisalign) */
.service-feature {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--pearl);
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: 4px;
  border: 1px solid var(--stone-soft);
}

@media (min-width: 900px) {
  .service-feature {
    grid-template-columns: 1fr 1fr;
  }
}

.service-feature__media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(140deg, var(--bone-soft), var(--stone-soft));
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.service-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-feature__badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--ink);
  color: var(--pearl);
  padding: 0.5rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ============================================================
   Approach / values
   ============================================================ */
.approach {
  background: var(--ink);
  color: var(--pearl);
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.approach h2 {
  color: var(--pearl);
}

.approach .lead {
  color: rgba(255, 255, 255, 0.72);
}

.approach .eyebrow {
  color: var(--gold-soft);
}

.approach__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}

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

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

.approach__item {
  padding: clamp(1.75rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-med), border-color var(--dur-med), transform var(--dur-med);
}

.approach__item:hover {
  background: rgba(176, 141, 87, 0.1);
  border-color: rgba(176, 141, 87, 0.35);
  transform: translateY(-4px);
}

.approach__num {
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--gold-soft);
  margin-bottom: 1.25rem;
  display: block;
}

.approach__title {
  color: var(--pearl);
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.65rem;
  line-height: 1.2;
}

.approach__desc {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Approach decoration */
.approach__ornament {
  position: absolute;
  right: -5%;
  top: -6%;
  width: 520px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Team Image Accordion (Exact 21st.dev / Tailwind Effect)
   ============================================================ */
.team-section {
  background: var(--bone-soft);
  position: relative;
  overflow: hidden;
}

.team-section__head {
  max-width: 50rem;
}

.team-section__head .eyebrow {
  margin-bottom: 1.15rem;
}

.team-section__head h2 {
  max-width: 18ch;
  font-size: clamp(2.35rem, 4.6vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
}

.team-section__head h2 span,
.team-section__head h2 em {
  display: block;
}

.team-section__head h2 em {
  margin-top: 0.12em;
  color: var(--gold-deep);
  font-weight: 400;
}

.team-section__head .lead {
  max-width: 58ch;
  margin-top: 1.35rem;
}

@media (max-width: 479px) {
  .team-section__head h2 {
    font-size: clamp(2.15rem, 10vw, 2.55rem);
    line-height: 1;
  }

  .team-section__head .lead {
    margin-top: 1.15rem;
  }
}

.team-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 1140px;
  margin: 3rem auto 0;
}

@media (min-width: 768px) {
  .team-accordion {
    flex-direction: row;
    height: 460px;
    gap: 0.85rem;
    align-items: stretch;
  }
}

.team-accordion__card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  outline: none;
  isolation: isolate;
  transition: flex 350ms cubic-bezier(0.5, 0.85, 0.25, 1.15),
    transform 350ms cubic-bezier(0.5, 0.85, 0.25, 1.15),
    box-shadow 350ms ease;
  box-shadow: 0 4px 20px -6px rgba(10, 22, 40, 0.15);
}

@media (min-width: 768px) {
  .team-accordion__card {
    flex: 1 1 0%;
    height: 100%;
  }

  /* When the accordion group is hovered, non-hovered siblings shrink to ~15% */
  .team-accordion:hover .team-accordion__card:not(:hover),
  .team-accordion:focus-within .team-accordion__card:not(:focus-within) {
    flex: 0.5 1 0%;
  }

  /* Hovered or focused card expands to take remaining space (~70%) */
  .team-accordion__card:hover,
  .team-accordion__card:focus-within {
    flex: 3.2 1 0%;
    box-shadow: 0 20px 40px -10px rgba(10, 22, 40, 0.35);
  }
}

/* Photo */
.team-accordion__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.team-accordion__card:hover .team-accordion__img,
.team-accordion__card:focus-within .team-accordion__img {
  transform: scale(1.04);
}

/* Gradient overlay on bottom of card (before) */
.team-accordion__card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.35) 55%,
      transparent 100%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

@media (min-width: 768px) {

  .team-accordion__card:hover::before,
  .team-accordion__card:focus-within::before {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .team-accordion__card::before {
    opacity: 1;
  }
}

/* Frosted glass backdrop overlay on non-hovered siblings (after) */
.team-accordion__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

@media (min-width: 768px) {

  .team-accordion:hover .team-accordion__card:not(:hover)::after,
  .team-accordion:focus-within .team-accordion__card:not(:focus-within)::after {
    opacity: 1;
  }
}

/* Text Content Area */
.team-accordion__info {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  pointer-events: none;
}

.team-accordion__name {
  font-family: var(--font-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.5, 0.85, 0.25, 1.8),
    transform 250ms cubic-bezier(0.5, 0.85, 0.25, 1.8);
}

.team-accordion__role {
  font-family: var(--font-ui, sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 700;
  color: #ffffff;
  margin-top: 0.25rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.5, 0.85, 0.25, 1.8),
    transform 250ms cubic-bezier(0.5, 0.85, 0.25, 1.8);
}

@media (min-width: 768px) {

  .team-accordion__card:hover .team-accordion__name,
  .team-accordion__card:focus-within .team-accordion__name {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 200ms;
  }

  .team-accordion__card:hover .team-accordion__role,
  .team-accordion__card:focus-within .team-accordion__role {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 350ms;
  }
}

@media (max-width: 767px) {
  .team-accordion__card {
    height: 320px;
  }

  .team-accordion__name,
  .team-accordion__role {
    opacity: 1;
    transform: none;
    white-space: normal;
  }
}

/* Fallback grid styles for static pages if needed */
.team-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

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

.member {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.member__portrait {
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  background: var(--bone-soft);
  isolation: isolate;
}

.member__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 22, 40, 0.55) 100%);
  z-index: 1;
  transition: opacity var(--dur-med);
}

.member__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-quart);
}

.member:hover .member__portrait img {
  transform: scale(1.04);
}

.member__portrait-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.15;
}

.member__portrait-monogram--light {
  color: var(--pearl);
}

.member__portrait-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 2;
  color: var(--pearl);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.member__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}

.member__cro {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}

.member__spec {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.member__bio {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.member__tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.member__tag {
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  background: var(--bone-soft);
  color: var(--ink);
  border: 1px solid var(--stone-soft);
  border-radius: 999px;
  letter-spacing: 0.03em;
}

/* ============================================================
   Location / Contact
   ============================================================ */
.location {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

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

.info-block {
  display: grid;
  gap: 1.6rem;
  padding: 2.25rem 2rem;
  background: #ffffff;
  border: 1px solid var(--stone-soft);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(10, 22, 40, 0.04);
}

.info-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.15rem;
  align-items: center;
}

.info-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(176, 141, 87, 0.1);
  border: 1px solid rgba(176, 141, 87, 0.22);
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}

.info-item:hover .info-item__icon {
  transform: translateY(-2px);
  background: rgba(176, 141, 87, 0.18);
  border-color: var(--gold-deep);
}

.info-item__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.25rem;
}

.info-item__value {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
}

.info-item__value a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.info-item__value a:hover {
  color: var(--gold-deep);
}

.map-frame {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--stone-soft);
  background: var(--bone-soft);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.05);
}

/* ============================================================
   Contact form
   ============================================================ */
.form {
  display: grid;
  gap: 1.25rem;
}

.form__row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

.form__field {
  display: grid;
  gap: 0.4rem;
}

.form__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.form__label .required {
  color: var(--gold-deep);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  background: var(--pearl);
  border: 1px solid var(--stone);
  border-radius: 2px;
  font: inherit;
  color: var(--ink);
  transition: border-color var(--dur-med), box-shadow var(--dur-med);
}

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

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}

.form__helper {
  font-size: 0.78rem;
  color: var(--muted);
}

.form__error {
  font-size: 0.78rem;
  color: var(--danger);
  min-height: 1em;
}

.form__submit {
  justify-self: start;
  margin-top: 0.5rem;
}

.form__consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.form__consent input {
  margin-top: 0.2rem;
}

.form__status {
  padding: 1rem 1.25rem;
  border-radius: 2px;
  font-size: 0.9rem;
  display: none;
}

.form__status.is-success {
  display: block;
  background: rgba(47, 125, 99, 0.08);
  color: var(--success);
  border: 1px solid rgba(47, 125, 99, 0.25);
}

.form__status.is-error {
  display: block;
  background: rgba(178, 58, 58, 0.08);
  color: var(--danger);
  border: 1px solid rgba(178, 58, 58, 0.25);
}

/* ============================================================
   CTA final band
   ============================================================ */
.cta-band {
  background: var(--ink);
  color: var(--pearl);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}

.cta-band h2 {
  color: var(--pearl);
  max-width: 22ch;
}

.cta-band .lead {
  color: rgba(255, 255, 255, 0.7);
  max-width: 52ch;
}

.cta-band__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.cta-band__ornament {
  position: absolute;
  right: -10%;
  top: -20%;
  width: 480px;
  opacity: 0.04;
  pointer-events: none;
}

.cta-band__ornament--bl {
  right: auto;
  left: -10%;
  top: auto;
  bottom: -30%;
  width: 420px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.65);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.footer__ornament {
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: clamp(280px, 32vw, 480px);
  opacity: 0.04;
  pointer-events: none;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

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

.footer h4 {
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

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

.footer a:hover {
  color: var(--gold-soft);
}

/* Footer links were 19-22px tall — well under the 44px touch
   minimum, and they sit at the very bottom where thumbs are least
   accurate. Only the links get the taller box; plain text rows
   (the address) stay as they are. */
@media (max-width: 699px) {
  .footer ul {
    gap: 0.25rem;
  }

  .footer ul li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .info-item__value a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer__brand {
  font-family: var(--font-display);
  color: var(--pearl);
  font-size: 1.85rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__brand img,
.footer__brand svg,
.footer__brand-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: inline-block;
}

.footer__bio {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 30ch;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: background var(--dur-med), color var(--dur-med), border-color var(--dur-med);
}

.footer__social a:hover {
  background: var(--gold);
  color: var(--pearl);
  border-color: var(--gold);
}

.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-soft) 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--stone-soft);
}

.page-hero__inner {
  max-width: 780px;
}

.page-hero .eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
}

.page-hero .lead {
  color: var(--ink-muted);
  max-width: 60ch;
}

.page-hero__ornament {
  position: absolute;
  right: -4%;
  top: 15%;
  width: 380px;
  opacity: 0.035;
  pointer-events: none;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.breadcrumb a:hover {
  color: var(--gold-deep);
}

/* ============================================================
   Services page — detailed list
   ============================================================ */
.service-detail {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding: 2.5rem 0;
  border-top: 1px solid var(--stone-soft);
  align-items: start;
}

@media (min-width: 900px) {
  .service-detail {
    grid-template-columns: 220px 1fr 1fr;
    gap: 3rem;
  }
}

.service-detail__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
}

.service-detail__name {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.service-detail__tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.service-detail__desc {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.65;
}

.service-detail__list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.service-detail__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.service-detail__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  margin-top: 0.55rem;
  transform: rotate(45deg);
}

/* FAQ */
.faq {
  display: grid;
  gap: 0.5rem;
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--stone-soft);
  border-radius: 3px;
  overflow: hidden;
  background: var(--pearl);
  transition: border-color var(--dur-med);
}

.faq__item[open] {
  border-color: var(--gold-soft);
}

.faq__q {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  font-size: 1.02rem;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: '';
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform var(--dur-med);
  flex-shrink: 0;
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
  border-color: var(--gold-deep);
}

.faq__a {
  padding: 0 1.5rem 1.5rem;
  color: var(--ink-muted);
  line-height: 1.65;
  font-size: 0.95rem;
}

/* ============================================================
   Testimonials — vertical marquee, 3 columns
   ============================================================ */
.testimonials {
  background: var(--bone);
  position: relative;
  overflow: hidden;
}

.testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.testimonials__badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid var(--stone);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pearl);
}

.testimonials__title {
  margin-top: 1.5rem;
}

.testimonials__sub {
  margin-top: 1rem;
  color: var(--ink-muted);
  max-width: 46ch;
}

.testimonials__cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 3.5rem;
  height: 680px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.testimonials__col {
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
  height: 680px;
  overflow: hidden;
}

.testimonials__col--md {
  display: none;
}

.testimonials__col--lg {
  display: none;
}

@media (min-width: 768px) {
  .testimonials__col--md {
    display: block;
  }

  .testimonials__cols {
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .testimonials__col--lg {
    display: block;
  }

  .testimonials__cols {
    gap: 1.5rem;
  }
}

.testimonials__track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
  animation: marquee-y var(--dur, 28s) linear infinite;
  will-change: transform;
  flex-shrink: 0;
}

.testimonials__col--fast .testimonials__track,
.testimonials__col--medium .testimonials__track,
.testimonials__col--slow .testimonials__track {
  --dur: 35s;
}

.testi-card {
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--pearl);
  border: 1px solid var(--stone-soft);
  box-shadow: 0 8px 20px -12px rgba(10, 22, 40, 0.1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.testi-card__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 0.85rem;
  color: #FBBC04;
  font-size: 0.85rem;
}

.testi-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  font-weight: 400;
  margin-bottom: 1rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.testi-card__meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stone-soft);
  margin-top: auto;
  flex-shrink: 0;
}

.testi-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bone-soft);
  flex-shrink: 0;
}

.testi-card__info {
  display: flex;
  flex-direction: column;
}

.testi-card__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--ink);
}

.testi-card__role {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}

@keyframes marquee-y {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* ============================================================
   Utility
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.divider {
  height: 1px;
  background: var(--stone-soft);
  border: 0;
  margin-block: 2rem;
}

/* ============================================================
   Members Accordion
   ============================================================ */
.members-accordion {
  width: 100%;
}

.accordion-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.accordion-item {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  border-radius: 12px;
  overflow: hidden;
  background: var(--pearl);
  box-shadow: var(--shadow-md);
  transition: all var(--dur-med) var(--ease-out-quart);
  position: relative;
}

.accordion-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.accordion-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  background-size: cover;
  background-position: center 18%;
  overflow: hidden;
}

.accordion-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 40, 0.85), rgba(10, 22, 40, 0.3) 50%, transparent);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out-quart);
}

.accordion-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.accordion-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pearl);
  font-family: var(--font-display);
}

.accordion-specialty {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  width: fit-content;
}

.accordion-details {
  align-self: center;
  padding: clamp(2rem, 5vw, 4rem);
  max-height: none;
  overflow: visible;
}

@media (max-width: 767px) {
  .accordion-wrapper {
    gap: 1.5rem;
  }

  .accordion-item {
    grid-template-columns: 1fr;
  }

  .accordion-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .accordion-details {
    padding: 1.5rem;
  }
}

.member-cro {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
}

.member-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.member-tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--gold-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
}

.info-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-soft);
}

/* ============================================================
   Scroll Reveal Image (Clinic Reveal — Pure Cinematic)
   ============================================================ */
.clinic-scroll-reveal {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding-block: 3rem;
  background: var(--bone);
}

.scroll-reveal-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-reveal-box {
  width: 42vw;
  height: 58vh;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 8px;
  will-change: width, height, border-radius;
}

.scroll-reveal-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.scroll-reveal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.55);
  transform-origin: center center;
  will-change: transform;
  display: block;
}

.scroll-reveal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.82);
  opacity: 0;
  will-change: opacity;
  z-index: 2;
  pointer-events: none;
}

/* --- Approach content overlaid on scroll-reveal image --- */
.scroll-reveal-approach {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-reveal-approach.is-visible {
  pointer-events: auto;
}

.scroll-reveal-approach__head {
  max-width: 680px;
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
  flex-shrink: 0;
}

.scroll-reveal-approach__head .eyebrow {
  color: var(--gold-soft);
}

.scroll-reveal-approach__head h2 {
  color: var(--pearl);
  margin-top: 0.5rem;
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
}

.scroll-reveal-approach__head .lead {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1rem;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
}

.scroll-reveal-approach__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 1100px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .scroll-reveal-approach__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.scroll-reveal-approach__item {
  padding: clamp(1rem, 1.5vw, 2rem) clamp(0.85rem, 1.25vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  transition: background var(--dur-med), border-color var(--dur-med), transform var(--dur-med);
}

@media (hover: hover) and (pointer: fine) {
  .scroll-reveal-approach__item:hover {
    background: rgba(176, 141, 87, 0.12);
    border-color: rgba(176, 141, 87, 0.4);
    transform: translateY(-4px);
  }
}

.scroll-reveal-approach__item .approach__num {
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  margin-bottom: 0.75rem;
}

.scroll-reveal-approach__item .approach__title {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.scroll-reveal-approach__item .approach__desc {
  font-size: clamp(0.78rem, 0.9vw, 0.85rem);
}

/* Phones. Breakpoint matches the `innerWidth < 768` test in
   assets/js/main.js — at exactly 768px the old `max-width: 768px`
   applied the mobile box size while the JS animated to desktop
   values.

   The four approach cards used to need ~703px inside a box that
   is only `100vh - 6rem` tall, so on anything shorter than about
   a 780px viewport the bottom row (03 and 04) was clipped and the
   overlay silently turned into a nested scroller inside a pinned
   section — a scroll trap almost nobody finds. Everything below
   is sized so the content fits the box outright. */
@media (max-width: 767.98px) {
  .clinic-scroll-reveal {
    /* Every pixel of gutter here comes off the height the cards
       get to live in. */
    padding-block: 1.25rem;
  }

  .scroll-reveal-box {
    width: 85vw;
    height: 55vh;
    min-height: 0;
    border-radius: 6px;
  }

  .scroll-reveal-approach {
    padding: 1.25rem 1rem 1rem;
    /* Never a nested scroller: a hidden scroll area inside a
       pinned section swallows the user's touch scroll. */
    overflow: hidden;
  }

  .scroll-reveal-approach__head {
    margin-bottom: 1rem;
  }

  .scroll-reveal-approach__head h2 {
    font-size: clamp(1.25rem, 5.6vw, 1.7rem);
  }

  .scroll-reveal-approach__head .lead {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.6rem;
  }

  .scroll-reveal-approach__grid {
    gap: 0.6rem;
  }

  .scroll-reveal-approach__item {
    padding: 0.8rem 0.7rem;
  }

  .scroll-reveal-approach__item .approach__num {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
  }

  .scroll-reveal-approach__item .approach__title {
    font-size: 0.9rem;
    line-height: 1.25;
    margin-bottom: 0.35rem;
  }

  .scroll-reveal-approach__item .approach__desc {
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

/* Very short phones (~640px and under). The box is only
   `100vh - 2.5rem` tall there, which left the bottom row of cards
   grazing the edge — trim the head and the copy so all four keep
   real breathing room. */
@media (max-width: 767.98px) and (max-height: 680px) {
  .scroll-reveal-approach {
    padding: 1rem 0.9rem 0.85rem;
  }

  .scroll-reveal-approach__head {
    margin-bottom: 0.75rem;
  }

  .scroll-reveal-approach__head .lead {
    font-size: 0.75rem;
    margin-top: 0.45rem;
  }

  .scroll-reveal-approach__grid {
    gap: 0.5rem;
  }

  .scroll-reveal-approach__item {
    padding: 0.7rem 0.6rem;
  }

  .scroll-reveal-approach__item .approach__desc {
    font-size: 0.7rem;
    line-height: 1.4;
  }
}

/* Smallest phones (~568px tall and under). The four numbered cards
   carry the message on their own, so the intro paragraph gives up
   its space rather than pushing the bottom row out of the box. */
@media (max-width: 767.98px) and (max-height: 600px) {
  .scroll-reveal-approach {
    /* Narrower gutters also widen the cards, so the copy inside
       wraps onto fewer lines — it buys height twice over. */
    padding: 0.85rem 0.8rem 0.5rem;
  }

  .scroll-reveal-approach__head .lead {
    display: none;
  }

  .scroll-reveal-approach__head {
    margin-bottom: 0.6rem;
  }

  .scroll-reveal-approach__item .approach__num {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .scroll-reveal-approach__item .approach__title {
    margin-bottom: 0.25rem;
  }
}


/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .testimonials__cols {
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .testimonials__track {
    animation: none !important;
  }
}
/* ============================================================
   Nav — Especialidades dropdown
   Desktop only (the burger menu owns navigation below 900px).
   Opens on hover and on :focus-within so keyboard users reach it
   by tabbing from the parent link.
   ============================================================ */
.nav__links li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__item--has-sub>a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__chev {
  opacity: 0.55;
  transition: transform var(--dur-med) var(--ease-out-quart),
    opacity var(--dur-med) var(--ease-out-quart);
}

.nav__item--has-sub:hover .nav__chev,
.nav__item--has-sub:focus-within .nav__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* Invisible bridge so the pointer can cross the gap to the panel */
.nav__item--has-sub::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.1rem;
}

.nav__sub {
  position: absolute;
  top: calc(100% + 1rem);
  left: -0.9rem;
  z-index: 120;
  min-width: 330px;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--pearl);
  border: 1px solid var(--stone-soft);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease-out-quart),
    transform var(--dur-med) var(--ease-out-quart),
    visibility var(--dur-med);
}

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
  text-transform: none;
  letter-spacing: 0;
  transition: background var(--dur-fast) var(--ease-out-quart);
}

.nav__sub a::after {
  content: none;
}

.nav__sub a strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.nav__sub a span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.nav__sub a:hover,
.nav__sub a:focus-visible {
  background: var(--bone);
}

.nav__sub a:hover strong,
.nav__sub a[aria-current="page"] strong {
  color: var(--gold-deep);
}

/* Mobile drawer — nested specialty list */
.mobile-menu__list {
  overflow-y: auto;
  /* flex item needs min-height:0 or it refuses to shrink and the list clips
     instead of scrolling once the specialties are nested inside it */
  min-height: 0;
}

.mobile-menu__sub {
  list-style: none;
  margin: 0.85rem 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

/* Two columns from 340px up. Eight specialties stacked in one
   column is 352px of menu on its own — paired up it is 176px, which
   is what keeps the drawer fitting a phone screen now that each row
   is a proper 44px touch target. */
@media (min-width: 340px) {
  .mobile-menu__sub {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }
}

@media (min-width: 520px) {
  .mobile-menu__sub {
    column-gap: 1.5rem;
  }

  .mobile-menu__sub a {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
  }
}

.mobile-menu__sub a {
  font-family: var(--font-ui);
  /* Tighter tracking below 520px so the longest labels
     ("Estética Dentária") stay on one line in a half-width column. */
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  /* min-height keeps these at the 44px touch minimum; they were 33px. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--dur-fast) var(--ease-out-quart);
}

.mobile-menu__sub a:hover {
  color: var(--gold-soft);
}

/* ============================================================
   Specialty pages — hero extras
   ============================================================ */
.page-hero__subtitle {
  margin: -0.75rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--gold-deep);
}

.page-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.75rem;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.svc-note {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.svc-section {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   Specialty pages — overview split
   ============================================================ */
.svc-intro {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .svc-intro {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.svc-intro__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--stone-soft);
  background: linear-gradient(150deg, #12263F 0%, var(--ink) 60%, #0A1628 100%);
}

.svc-intro__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Draggable before/after comparison on the Estética overview. */
.before-after {
  --compare-position: 50%;
  isolation: isolate;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.before-after__image {
  pointer-events: none;
}

.before-after__after {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
  will-change: clip-path;
}

.before-after__label {
  position: absolute;
  top: 1rem;
  z-index: 3;
  padding: 0.42rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--pearl);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.before-after__label--before {
  left: 1rem;
}

.before-after__label--after {
  right: 1rem;
}

.before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  z-index: 4;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 12px rgba(10, 22, 40, 0.28);
  pointer-events: none;
  will-change: left;
}

.before-after__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.82);
  box-shadow: 0 4px 18px rgba(10, 22, 40, 0.3);
  color: var(--pearl);
}

.before-after__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  opacity: 0;
}

.before-after__range::-webkit-slider-thumb {
  width: 2.75rem;
  height: 2.75rem;
  appearance: none;
  -webkit-appearance: none;
}

.before-after__range::-moz-range-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
}

.before-after:focus-within .before-after__handle {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .before-after__handle {
    transition: transform 180ms ease, background-color 180ms ease;
  }

  .before-after:hover .before-after__handle {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(10, 22, 40, 0.92);
  }
}

/* Pages without a photo get the house diamond motif instead */
.svc-intro__pattern {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78%;
  color: var(--gold-soft);
  opacity: 0.22;
}

.svc-intro__badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  padding: 0.5rem 0.9rem;
  background: rgba(10, 22, 40, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--pearl);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}

.svc-intro__body .eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
}

.svc-intro__body h2 {
  margin-bottom: 1.5rem;
}

.svc-intro__body p {
  color: var(--ink-muted);
  line-height: 1.7;
}

.svc-intro__body p+p {
  margin-top: 1rem;
}

.svc-intro__panel {
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  background: var(--pearl);
  border: 1px solid var(--stone-soft);
  border-left: 2px solid var(--gold);
  border-radius: 3px;
}

.svc-intro__panel .eyebrow {
  display: block;
  margin-bottom: 1rem;
}

.svc-intro__panel .service-detail__list {
  margin-top: 0;
}

/* ============================================================
   Specialty pages — treatments grid
   ============================================================ */
.treat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

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

.treat-card {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 1.6rem;
  background: var(--pearl);
  border: 1px solid var(--stone-soft);
  border-radius: 4px;
  transition: border-color var(--dur-med) var(--ease-out-quart),
    box-shadow var(--dur-med) var(--ease-out-quart),
    transform var(--dur-med) var(--ease-out-quart);
}

.treat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.treat-card:hover {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.treat-card:hover::before {
  transform: scaleY(1);
}

.treat-card__num {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.treat-card__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0.5rem 0 0.75rem;
}

.treat-card__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.treat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.treat-card__link svg {
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.treat-card__link:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   Specialty pages — step-by-step (dark band)
   ============================================================ */
.svc-steps {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--pearl);
}

.svc-steps h2 {
  color: var(--pearl);
}

.svc-steps .eyebrow {
  color: var(--gold-soft);
}

.steps {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

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

.step {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.step__num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--gold-soft);
}

.step__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--pearl);
  margin: 0.6rem 0 0.5rem;
}

.step__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(247, 244, 239, 0.66);
}

/* ============================================================
   Specialty pages — related specialties
   ============================================================ */
.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

.related-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.75rem 1.6rem;
  background: var(--pearl);
  border: 1px solid var(--stone-soft);
  border-radius: 4px;
  transition: border-color var(--dur-med) var(--ease-out-quart),
    box-shadow var(--dur-med) var(--ease-out-quart),
    transform var(--dur-med) var(--ease-out-quart);
}

.related-card:hover {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.related-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
}

.related-card__desc {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.related-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.related-card__arrow svg {
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.related-card:hover .related-card__arrow svg {
  transform: translateX(4px);
}

/* ============================================================
   Service cards — index number + photoless variant
   ============================================================ */
.service-card__index {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Specialties without a photograph fall back to the house ornament */
.service-card__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #16304F 0%, #0F2138 55%, #0A1628 100%);
}

.service-card__deco-svg {
  position: absolute;
  right: -18%;
  top: 6%;
  width: 82%;
  color: var(--gold-soft);
  opacity: 0.2;
  transition: transform var(--dur-slow) var(--ease-out-quart),
    opacity var(--dur-slow) var(--ease-out-quart);
}

.service-card:hover .service-card__deco-svg,
.service-card:focus-visible .service-card__deco-svg,
.service-card.is-active .service-card__deco-svg {
  transform: scale(1.1) rotate(8deg);
  opacity: 0.34;
}

@media (prefers-reduced-motion: reduce) {

  .nav__sub,
  .nav__chev,
  .treat-card,
  .treat-card::before,
  .related-card,
  .service-card__deco-svg {
    transition: none;
  }
}

/* ============================================================
   Floating WhatsApp Button
   ============================================================ */

.whatsapp-float {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFFFFF;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.whatsapp-float__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(10, 22, 40, 0.2);
  transition: transform var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart),
              filter var(--dur-med) var(--ease-out-quart);
  z-index: 2;
}

.whatsapp-float__icon svg {
  width: 32px;
  height: 32px;
  fill: #FFFFFF;
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.whatsapp-float__ping {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  z-index: 1;
  pointer-events: none;
  animation: whatsapp-pulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.whatsapp-float__tooltip {
  display: none;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(212, 185, 137, 0.25);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--dur-med) var(--ease-out-quart),
              transform var(--dur-med) var(--ease-out-quart);
}

@media (min-width: 768px) {
  .whatsapp-float__tooltip {
    display: inline-block;
  }
}

.whatsapp-float:hover .whatsapp-float__tooltip,
.whatsapp-float:focus-visible .whatsapp-float__tooltip {
  opacity: 1;
  transform: translateX(0);
}

.whatsapp-float:hover .whatsapp-float__icon,
.whatsapp-float:focus-visible .whatsapp-float__icon {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px -2px rgba(37, 211, 102, 0.65), 0 6px 16px rgba(10, 22, 40, 0.25);
  filter: brightness(1.05);
}

.whatsapp-float:hover .whatsapp-float__icon svg {
  transform: scale(1.05);
}

.whatsapp-float:focus-visible .whatsapp-float__icon {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@keyframes whatsapp-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .whatsapp-float {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
  .whatsapp-float__icon {
    width: 52px;
    height: 52px;
  }
  .whatsapp-float__icon svg {
    width: 28px;
    height: 28px;
  }
  .whatsapp-float__ping {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__ping {
    display: none;
    animation: none;
  }
  .whatsapp-float__icon,
  .whatsapp-float__tooltip,
  .whatsapp-float__icon svg {
    transition: none;
  }
}

/* ============================================================
   Proposal Disclaimer Modal & Floating Trigger
   ============================================================ */

.proposal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 13, 23, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out-quart),
              visibility var(--dur-med) var(--ease-out-quart);
}

.proposal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.proposal-modal {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(165deg, #132438 0%, #0A1628 100%);
  border-radius: 20px;
  border: 1px solid rgba(212, 185, 137, 0.32);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75),
              0 0 40px rgba(176, 141, 87, 0.12);
  padding: 32px 30px 28px 30px;
  color: var(--pearl);
  transform: scale(0.92) translateY(14px);
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.proposal-overlay.is-visible .proposal-modal {
  transform: scale(1) translateY(0);
}

/* Custom scrollbar for modal if needed on small screens */
.proposal-modal::-webkit-scrollbar {
  width: 6px;
}
.proposal-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}
.proposal-modal::-webkit-scrollbar-thumb {
  background: rgba(212, 185, 137, 0.25);
  border-radius: 3px;
}

.proposal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.proposal-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(176, 141, 87, 0.14);
  border: 1px solid rgba(212, 185, 137, 0.35);
  color: var(--gold-soft);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proposal-modal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: proposal-dot-pulse 2s infinite ease-in-out;
}

@keyframes proposal-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.proposal-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--stone);
  cursor: pointer;
  transition: background var(--dur-fast),
              color var(--dur-fast),
              transform var(--dur-fast),
              border-color var(--dur-fast);
}

.proposal-modal__close:hover {
  background: rgba(176, 141, 87, 0.2);
  color: var(--gold-soft);
  border-color: var(--gold);
  transform: rotate(90deg);
}

.proposal-modal__title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--pearl);
  margin: 0 0 6px 0;
}

.proposal-modal__subtitle {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--gold-soft);
  margin: 0 0 16px 0;
  font-weight: 500;
}

.proposal-modal__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #C8D3E2;
  margin: 0 0 18px 0;
}

.proposal-modal__text strong {
  color: var(--pearl);
  font-weight: 600;
}

.proposal-modal__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.proposal-modal__card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.proposal-modal__card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(212, 185, 137, 0.25);
}

.proposal-modal__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(176, 141, 87, 0.12);
  border: 1px solid rgba(176, 141, 87, 0.25);
  color: var(--gold-soft);
  flex-shrink: 0;
  margin-top: 1px;
}

.proposal-modal__card-info strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pearl);
  margin-bottom: 2px;
}

.proposal-modal__card-info span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #9EAFCE;
}

.proposal-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proposal-modal__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #B08D57 0%, #D4B989 50%, #8A6B3D 100%);
  color: #0A1628;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(176, 141, 87, 0.45),
              0 3px 8px rgba(10, 22, 40, 0.3);
  transition: transform var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart),
              filter var(--dur-med) var(--ease-out-quart);
}

.proposal-modal__btn-primary svg {
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.proposal-modal__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(176, 141, 87, 0.65),
              0 4px 12px rgba(10, 22, 40, 0.4);
  filter: brightness(1.06);
}

.proposal-modal__btn-primary:hover svg {
  transform: translateX(3px);
}

.proposal-modal__btn-primary:focus-visible {
  outline: 3px solid var(--pearl);
  outline-offset: 3px;
}

.proposal-modal__footnote {
  text-align: center;
  font-size: 0.75rem;
  color: #7E8FA7;
  margin: 0;
}

/* Floating Reopen Badge */
.proposal-trigger-badge {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  z-index: 980;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 22, 40, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(176, 141, 87, 0.38);
  border-radius: 999px;
  color: var(--gold-soft);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: background var(--dur-fast),
              border-color var(--dur-fast),
              transform var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart);
}

.proposal-trigger-badge:hover {
  background: rgba(19, 36, 56, 0.96);
  border-color: var(--gold);
  color: var(--pearl);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(176, 141, 87, 0.25),
              0 4px 12px rgba(0, 0, 0, 0.4);
}

.proposal-trigger-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

@media (max-width: 600px) {
  .proposal-modal {
    padding: 22px 18px 20px 18px;
    border-radius: 16px;
    max-height: calc(100vh - 24px);
  }

  .proposal-modal__title {
    font-size: 1.45rem;
  }

  .proposal-modal__cards {
    gap: 8px;
    margin-bottom: 18px;
  }

  .proposal-modal__card {
    padding: 10px 12px;
  }

  .proposal-trigger-badge {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: calc(18px + env(safe-area-inset-left, 0px));
    padding: 7px 11px;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proposal-overlay,
  .proposal-modal,
  .proposal-modal__dot,
  .proposal-modal__close,
  .proposal-modal__btn-primary,
  .proposal-trigger-badge {
    transition: none !important;
    animation: none !important;
  }
}