/* =========================================================================
   A+ Dental Care Haven · Chino Roces EDSA
   A lit room on a dark avenue. See DESIGN-SYSTEM.md for the contract.
   Family DNA (Fraunces + Inter, burgundy/ivory/gold) with an EDSA voice:
   deeper black, sharper corners, city verticals, directional light.
   ========================================================================= */

:root {
  --black:     #100D0F;            /* the avenue, deeper than QC's */
  --black-2:   #171215;
  --charcoal:  #241A1E;
  --burg-900:  #4E161F;
  --burg-700:  #69151F;
  --burg-600:  #6F1F28;
  --ivory:     #F5EFE7;
  --cream:     #F8F2EA;
  --taupe:     #E9DCCB;
  --ink:       #1F1517;
  --ink-2:     #3A2E30;
  --ink-mute:  #5A4B47;
  --gold:      #B99459;
  --gold-deep: #96793F;
  --gold-ink: #765E30;  /* small gold type on light rooms, AA on ivory/cream/taupe */
  --gold-pale: #E7D3A6;

  --iv-70: rgba(245, 239, 231, 0.70);
  --iv-55: rgba(245, 239, 231, 0.55);
  --gold-24: rgba(185, 148, 89, 0.24);
  --gold-38: rgba(185, 148, 89, 0.38);
  --gold-55: rgba(185, 148, 89, 0.55);

  --font-d: "Fraunces", Georgia, serif;
  --font-b: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.33, 0.7, 0.24, 1);
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--font-b);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, address, figure { margin: 0; font-style: normal; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  background: var(--gold-pale); color: var(--black);
  padding: 12px 20px; border-radius: 2px; font-weight: 700;
}
.skip:focus-visible { left: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.layer { position: relative; z-index: 2; }
.sec { position: relative; overflow: hidden; padding: clamp(84px, 10vw, 144px) 0; }

/* ------------------------------------------------------------------ type -- */
.display {
  font-family: var(--font-d); font-weight: 440;
  font-variation-settings: "opsz" 100;
  letter-spacing: -0.03em; line-height: 1.0; text-wrap: balance;
  color: var(--cream);
}
.display em { font-style: italic; font-weight: 400; color: var(--gold-pale); }
.h-hero { font-size: clamp(44px, 7.4vw, 108px); line-height: 0.97; }
.h-sec  { font-size: clamp(32px, 4.4vw, 62px); line-height: 1.02; }

/* the kicker is the EDSA signature: a hairline, then tracked capitals */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 22px;
}
.kicker::before { content: ""; width: 30px; height: 1px; background: var(--gold-55); flex: none; }

.lead {
  margin-top: 26px;
  font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65;
  color: var(--iv-70); max-width: 560px;
}
.small { font-size: 13.5px; color: var(--iv-55); }
.fine { margin-top: 18px; font-size: 12.5px; color: var(--iv-55); }
.side-note { font-size: 13px; color: var(--iv-55); }

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 720px; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; max-width: none; }

/* ------------------------------------------------------- light rooms ----- */
.room-ivory { background: var(--ivory); color: var(--ink); }
.room-taupe { background: linear-gradient(180deg, #EFE4D6 0%, var(--taupe) 100%); color: var(--ink); }
.room-ivory .display, .room-taupe .display { color: var(--ink); }
.room-ivory .display em, .room-taupe .display em { color: var(--burg-600); }
.room-ivory .kicker, .room-taupe .kicker { color: var(--gold-ink); }
.room-ivory .kicker::before, .room-taupe .kicker::before { background: var(--gold-ink); }
.room-ivory .lead, .room-taupe .lead { color: var(--ink-2); }
.room-ivory .small, .room-taupe .small { color: var(--ink-mute); }
.room-burg { background: linear-gradient(168deg, var(--burg-700) 0%, var(--burg-900) 62%, #380F16 100%); }
.room-char { background: var(--charcoal); }
.room-black { background: var(--black-2); }

/* -------------------------------------------- SYSTEM A · architecture ---- */
/* Complete words, crisp, sized to fit the viewport whole. Never blurred,
   never over content. One per room at most. */
.arch {
  position: absolute; z-index: 0;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(8px, 2vh, 24px);
  pointer-events: none; user-select: none;
  font-family: var(--font-d); font-weight: 520;
  letter-spacing: -0.04em; line-height: 0.78; white-space: nowrap;
  font-size: clamp(40px, 8vw, 118px);
  color: rgba(245, 239, 231, 0.05);
}
.arch-hero { color: rgba(231, 211, 166, 0.06); }
.arch-visit { color: rgba(78, 22, 31, 0.07); }
.arch-foot { font-size: clamp(120px, 22vw, 320px); bottom: -0.12em; color: rgba(231, 211, 166, 0.045); }

/* -------------------------------------------- SYSTEM B · atmosphere ------ */
/* Fragments: giant letterforms cropped far outside the viewport so only a
   bowl or a stroke survives. Blurred, champagne, genuinely glowing. */
.frag {
  position: absolute; z-index: 0;
  pointer-events: none; user-select: none;
  font-family: var(--font-d); font-weight: 460;
  line-height: 0.7; white-space: nowrap;
  color: rgba(222, 189, 128, 0.14);
  text-shadow: 0 0 110px rgba(231, 211, 166, 0.32);
  filter: blur(22px);
}
.frag-hero { font-size: clamp(420px, 52vw, 780px); right: -14%; top: -34%; }
.frag-proof { font-size: clamp(360px, 44vw, 660px); left: -10%; bottom: -46%; }

/* Blooms, redrawn: the radial disc becomes a wide, heavily blurred curved
   trail, the avenue light moving through the room rather than hanging in it.
   Same class, same placements, same slow drift on the hero. */
.bloom {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(124%, 1700px); aspect-ratio: 8 / 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620' fill='none'%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(231,211,166,0.11)' stroke-width='170' stroke-linecap='round'/%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(231,211,166,0.30)' stroke-width='64' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(28px);
  opacity: 0.9;
}
.bloom-hero { right: -18%; top: -14%; animation: drift 14s ease-in-out infinite alternate; }
.bloom-proof { right: -16%; top: -18%; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-3%, 4%); } }

/* Arc: the same luminous line as the bloom, drawn a touch brighter but every
   bit as diffused. No defined stroke anywhere in the family. */
.arc {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(118%, 1600px); aspect-ratio: 8 / 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620' fill='none'%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(231,211,166,0.13)' stroke-width='170' stroke-linecap='round'/%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(240,222,182,0.34)' stroke-width='64' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(26px);
  opacity: 0.8;
}
.arc-svc { right: -16%; bottom: -22%; }
.arc-low { left: -10%; bottom: -30%; }
.arc-high { right: -12%; top: -26%; }
/* the same line work in bronze, for the ivory and taupe rooms */
.arc.on-light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620' fill='none'%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(150,121,63,0.12)' stroke-width='170' stroke-linecap='round'/%3E%3Cpath d='M-120 380C120 90 300 560 560 300S920 40 1180 330 1450 560 1720 210' stroke='rgba(118,94,48,0.30)' stroke-width='64' stroke-linecap='round'/%3E%3C/svg%3E"); filter: blur(26px); opacity: 0.65; }

/* ---------------------------------------------------------------- header -- */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.head.scrolled {
  background: rgba(16, 13, 15, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(185, 148, 89, 0.28);
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 13px; min-height: 44px; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-38); }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.brand-t b { font-size: 14.5px; font-weight: 650; color: var(--ivory); }
.brand-t span { font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav > a:not(.btn) {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 13px; font-size: 13.5px; font-weight: 500; color: var(--iv-70);
  transition: color 0.25s ease;
}
.nav > a:not(.btn):hover { color: var(--gold-pale); }
.nav .btn { margin-left: 14px; }
/* The current page is marked by the same lit rule the site uses everywhere
   else, at nav scale, rather than by a heavier weight or a pill. */
.nav > a:not(.btn).on { color: var(--gold-pale); position: relative; }
.nav > a:not(.btn).on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 9px;
  height: 1px; background: var(--gold-55);
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 28px; border-radius: 2px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-primary { background: var(--burg-700); color: var(--cream); }
.btn-primary:hover { background: var(--burg-900); color: #fff; }
.btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(245, 239, 231, 0.35); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-pale); }
.room-ivory .btn-ghost, .room-cream .btn-ghost, .room-taupe .btn-ghost {
  color: var(--ink); border-color: rgba(31, 21, 23, 0.28);
}
.room-ivory .btn-ghost:hover, .room-cream .btn-ghost:hover, .room-taupe .btn-ghost:hover {
  color: var(--burg-700); border-color: var(--gold-ink);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-pale); outline-offset: 3px;
}
.room-ivory a:focus-visible, .room-taupe a:focus-visible { outline-color: var(--gold-ink); }

/* ------------------------------------------------------------ phone menu -- */
/* Two crisp rules rather than a hamburger: the same 1px gold line the hero,
   the section marks and the nav active state already use. */
.menu-btn {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px 0 10px;
  background: transparent; border: none; cursor: pointer;
}
.mb-mark { position: relative; width: 22px; height: 9px; flex: none; }
.mb-mark::before, .mb-mark::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--gold-pale); transition: transform 0.4s var(--ease);
}
.mb-mark::before { top: 0; }
.mb-mark::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .mb-mark::before { transform: translateY(4.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .mb-mark::after { transform: translateY(-4.5px) rotate(-45deg); }
.mb-t {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-pale);
}

.menu {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(16, 13, 15, 0.975);
  backdrop-filter: blur(18px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 0.35s ease;
}
.menu.is-open { opacity: 1; }
.menu-in {
  min-height: 100%; display: flex; flex-direction: column;
  padding: clamp(96px, 16vh, 140px) clamp(20px, 6vw, 44px)
           calc(clamp(34px, 8vh, 64px) + env(safe-area-inset-bottom));
}
.menu-in > a:not(.btn) {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0; min-height: 56px;
  font-family: var(--font-d); font-weight: 430;
  font-size: clamp(28px, 8.4vw, 42px); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ivory);
  border-bottom: 1px solid rgba(231, 211, 166, 0.16);
  transition: color 0.25s ease, padding-left 0.35s var(--ease);
}
.menu-in > a:not(.btn):hover,
.menu-in > a[aria-current="page"] { color: var(--gold-pale); }
.menu-in > a:not(.btn):hover { padding-left: 10px; }
.mi-n {
  font-family: var(--font-b); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--gold-deep); flex: none;
}
.menu-in > a[aria-current="page"] .mi-n { color: var(--gold-pale); }
.menu-cta { margin-top: 32px; width: 100%; justify-content: center; }
.menu-foot { margin-top: auto; padding-top: 22px; font-size: 12.5px; line-height: 1.7; color: var(--iv-55); }
body.menu-open { overflow: hidden; }
body.menu-open .head, body.menu-open .head.scrolled {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
body.menu-open .brand, body.menu-open .menu-btn { position: relative; z-index: 131; }

/* ------------------------------------------------------------------ hero -- */
/* The location photograph sits at the very back of the hero, graded into the
   room: desaturated, warmed, and darkened under a burgundy-black scrim so the
   headline keeps its full contrast. */
.hero-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/img/loc/loc-chino-roces.jpg') center 24% / cover no-repeat;
  filter: saturate(0.78) sepia(0.1) brightness(0.98) contrast(1.02);
}
/* Protection lives where the type lives: heavy over the left column, nearly
   clear over the subject, and a bottom fade into the next room. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(16, 13, 15, 0.94) 0%, rgba(16, 13, 15, 0.8) 36%, rgba(16, 13, 15, 0.28) 66%, rgba(30, 11, 16, 0.1) 100%),
    linear-gradient(180deg, rgba(16, 13, 15, 0.34) 0%, rgba(16, 13, 15, 0.08) 38%, rgba(16, 13, 15, 0.5) 78%, rgba(16, 13, 15, 0.97) 100%);
}
@media (max-width: 900px) {
  /* on a phone the type spans the full width, so the shield turns vertical:
     firm behind the copy block, open across the face band */
  /* the frame is lifted so the eyes sit in the open upper third, and the
     scrim ramps up exactly where the text block starts */
  .hero-photo { background-position: 58% 8%; }
  .hero-photo::after {
    background:
      linear-gradient(180deg,
        rgba(16, 13, 15, 0.62) 0%,    /* the header rides here */
        rgba(16, 13, 15, 0.16) 16%,   /* open: the face reads */
        rgba(16, 13, 15, 0.22) 28%,
        rgba(16, 13, 15, 0.82) 42%,   /* the type band begins */
        rgba(16, 13, 15, 0.93) 62%,
        rgba(16, 13, 15, 0.97) 100%);
  }
}

/* A full stage. svh is the small-viewport unit, so the hero fills the screen
   while the browser chrome is showing and never overflows once it retracts. */
.hero { min-height: 92vh; min-height: 92svh; display: flex; align-items: center; padding-top: clamp(120px, 16vh, 180px); }
.hero-grid { display: grid; grid-template-columns: 1px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: stretch; }
.vline { background: linear-gradient(180deg, transparent, var(--gold-55) 30%, var(--gold-55) 70%, transparent); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ------------------------------------------------------------------ intro -- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.intro-grid .kicker { margin-bottom: 0; padding-top: 10px; }

/* --------------------------------------------------------------- services -- */
.svc-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.svc-index { display: flex; flex-direction: column; }
.svc-item {
  display: flex; align-items: baseline; gap: 20px; text-align: left;
  width: 100%; min-height: 44px; padding: 20px 4px;
  background: transparent; border: none; cursor: pointer;
  border-top: 1px solid rgba(231, 211, 166, 0.2); color: var(--ivory);
  transition: color 0.25s ease, padding-left 0.35s var(--ease);
}
.svc-item:last-of-type { border-bottom: 1px solid rgba(231, 211, 166, 0.2); }
.si-body { min-width: 0; }
.si-num { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-pale); flex: none; }
.si-name { display: block; font-family: var(--font-d); font-weight: 430; font-size: clamp(21px, 2.1vw, 29px); letter-spacing: -0.02em; line-height: 1.1; }
.si-line { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(245, 239, 231, 0.64); transition: color 0.25s ease; }
.svc-item:hover { color: var(--gold-pale); }
.svc-item[aria-selected="true"] { color: var(--gold-pale); padding-left: 14px; }
.svc-item[aria-selected="true"] .si-line { color: rgba(245, 239, 231, 0.88); }
.svc-more { margin-top: 18px; font-size: 13px; color: var(--iv-55); }

.svc-stage {
  position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 4 / 3; max-width: 560px; justify-self: end; width: 100%;
  border: 1px solid var(--gold-24); isolation: isolate;
}
.ss-media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 1.1s var(--ease);
}
.svc-stage:hover .ss-media { transform: scale(1.03); }
.ss-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(16, 13, 15, 0.05) 30%, rgba(16, 13, 15, 0.72) 100%);
}
.ss-curtain {
  position: absolute; inset: 0; z-index: 2; background: var(--burg-900);
  transform: scaleX(0); transform-origin: left;
}
.ss-curtain.run { animation: curtain 0.7s var(--ease); }
@keyframes curtain {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.ss-cap {
  position: absolute; left: 22px; bottom: 20px; z-index: 1;
  display: flex; align-items: baseline; gap: 14px;
}
.ss-num { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-pale); }
.ss-name { font-family: var(--font-d); font-weight: 430; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; color: #fff; }

/* ------------------------------------------------------------ page hero -- */
/* Shorter than home's, same instrument: the vertical light rule, the kicker,
   then the headline. Room to breathe without eating the fold. */
/* The home hero is tall enough that the architectural word clears the copy.
   The page heroes are shorter, so the word was riding up through the headline
   and the lead on all four inner pages. This reserves a band for it. */
.page-hero { padding-top: clamp(132px, 18vh, 210px); padding-bottom: clamp(124px, 13vw, 214px); }
.ph-grid { display: grid; grid-template-columns: 1px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); }
.h-page { font-size: clamp(38px, 6.2vw, 88px); line-height: 0.98; }
.frag-page { font-size: clamp(360px, 46vw, 700px); right: -12%; top: -46%; }
.bloom-page { right: -14%; top: -34%; }
.arch-page { color: rgba(231, 211, 166, 0.055); }

/* -------------------------------------------------------- service rows -- */
/* Image and text alternate sides so the page reads as a sequence of editorial
   spreads rather than a stack of cards. Detail stays folded until asked for. */
.svc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 66px); align-items: center;
  padding: clamp(38px, 5vw, 70px) 0;
  border-top: 1px solid rgba(150, 121, 63, 0.26);
}
.svc-row:first-child { border-top: none; padding-top: 0; }
.svc-row:nth-child(even) .sr-media { order: 2; justify-self: end; }
/* Given a whole grid column these become large clinical macro shots on a wide
   screen. Capped and pushed to the outer edge they read as cropped editorial
   plates, and the text column gets the room. */
.sr-media {
  aspect-ratio: 4 / 3; width: 100%; max-width: 560px; justify-self: start;
  border-radius: 2px; overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid rgba(150, 121, 63, 0.3);
}
.sr-num { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-ink); }
.sr-name {
  margin-top: 12px; font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05; letter-spacing: -0.025em; color: var(--ink);
}
.sr-body { min-width: 0; }
.sr-line { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 40ch; }
.svc-row .acc { margin-top: 20px; }

/* ------------------------------------------------------------ accordion -- */
.acc-item { border-top: 1px solid rgba(150, 121, 63, 0.3); }
.acc-item:last-child { border-bottom: 1px solid rgba(150, 121, 63, 0.3); }
.acc-btn {
  width: 100%; min-height: 56px; padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  transition: color 0.25s ease;
}
.acc-btn:hover { color: var(--burg-700); }
.acc-sign { font-size: 18px; font-weight: 400; color: var(--gold-ink); flex: none; }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.5s var(--ease); }
.acc-panel .inner { padding: 2px 0 20px; font-size: 15px; line-height: 1.72; color: var(--ink-2); max-width: 58ch; }
.room-black .acc-item, .room-char .acc-item { border-color: rgba(231, 211, 166, 0.2); }
.room-black .acc-btn, .room-char .acc-btn { color: var(--ivory); }
.room-black .acc-btn:hover, .room-char .acc-btn:hover { color: var(--gold-pale); }
.room-black .acc-sign, .room-char .acc-sign { color: var(--gold-pale); }
.room-black .acc-panel .inner, .room-char .acc-panel .inner { color: var(--iv-70); }

.proof-side { min-width: 0; }

/* ------------------------------------------------------------ locations -- */
.loc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px; background: rgba(231, 211, 166, 0.22);
  border: 1px solid rgba(231, 211, 166, 0.22);
}
.loc { background: rgba(16, 13, 15, 0.32); padding: clamp(26px, 3vw, 38px); }
.loc.is-here { background: rgba(16, 13, 15, 0.55); }
.loc-k {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-d); font-weight: 440;
  font-size: clamp(20px, 2.1vw, 27px); letter-spacing: -0.02em; color: var(--cream);
}
.loc-here {
  font-family: var(--font-b); font-size: 10px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-pale);
}
.loc-a { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--iv-70); }
.tlink { color: var(--gold-pale); border-bottom: 1px solid var(--gold-38); }
.room-ivory .tlink, .room-taupe .tlink { color: var(--burg-700); border-color: rgba(150, 121, 63, 0.45); }

/* ----------------------------------------------------------------- form -- */
.appt { margin-top: 34px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 13px 15px; border-radius: 2px;
  background: rgba(245, 239, 231, 0.05); color: var(--ivory);
  border: 1px solid rgba(231, 211, 166, 0.26);
  font-family: var(--font-b); font-size: 15px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(245, 239, 231, 0.38); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-55);
  box-shadow: 0 0 0 3px rgba(185, 148, 89, 0.16);
}
.field select option { background: var(--black); color: var(--ivory); }
.form-err { margin-top: 14px; font-size: 13.5px; color: #F0B4A8; min-height: 1em; }

/* ----------------------------------------------------------- first visit -- */
/* Three numbered steps in one hairline row. The number stays quiet, the step
   name carries the weight; the row reads as one editorial spread. */
.fv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px; background: rgba(150, 121, 63, 0.26); border: 1px solid rgba(150, 121, 63, 0.26);
  margin-top: clamp(30px, 4vw, 50px);
}
.fv { background: var(--ivory); padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 38px); }
.fv .sr-num { display: block; }
.fv h3 {
  margin: 14px 0 0; font-family: var(--font-d); font-weight: 440;
  font-size: clamp(21px, 2.2vw, 29px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
}
.fv p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

/* ------------------------------------------------------- location chooser -- */
/* Three rooms, one per clinic. Each card is its branch's own ground with its
   city set as an oversized typographic mark behind the name, so the card
   represents a place without claiming photography nobody has taken. */
.locpick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(32px, 4vw, 52px);
}
.lp {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 34vw, 420px); padding: clamp(24px, 2.6vw, 36px);
  border-radius: 2px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(231, 211, 166, 0.2);
  text-decoration: none; color: var(--ivory);
  transition: border-color 0.4s ease, transform 0.5s var(--ease);
}
a.lp:hover, a.lp:focus-visible { border-color: var(--gold-55); transform: translateY(-3px); }
a.lp:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
.lp[data-b="paranaque"] { background-image: linear-gradient(180deg, rgba(111, 31, 40, 0.16) 0%, rgba(78, 22, 31, 0.44) 52%, rgba(40, 10, 15, 0.94) 100%), url('/assets/img/loc/loc-paranaque.jpg'); }
.lp[data-b="quezon-city"] { background-image: linear-gradient(180deg, rgba(58, 42, 46, 0.16) 0%, rgba(36, 26, 30, 0.46) 50%, rgba(19, 13, 16, 0.94) 100%), url('/assets/img/loc/loc-quezon-city.jpg'); }
.lp[data-b="chino-roces"] { background-image: linear-gradient(180deg, rgba(36, 26, 30, 0.16) 0%, rgba(78, 22, 31, 0.44) 48%, rgba(10, 7, 9, 0.95) 100%), url('/assets/img/loc/loc-chino-roces.jpg'); }
.lp { background-size: cover; background-position: center 26%; }
.lp-mark {
  position: absolute; z-index: 0; left: 50%; top: 38%; transform: translate(-50%, -50%);
  pointer-events: none; user-select: none;
  font-family: var(--font-d); font-weight: 480; letter-spacing: -0.045em;
  font-size: clamp(58px, 7vw, 92px); line-height: 0.8; white-space: nowrap;
  color: rgba(231, 211, 166, 0.07);
}
.lp-body { position: relative; z-index: 1; }
.lp-city {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-pale);
}
.lp-name {
  display: block; margin-top: 10px; font-family: var(--font-d); font-weight: 440;
  font-size: clamp(24px, 2.4vw, 33px); line-height: 1.05; letter-spacing: -0.025em;
}
.lp-where { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--iv-70); }
.lp-cta, .lp-here {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  transition: gap 0.3s ease, color 0.25s ease;
}
.lp-cta { color: var(--gold-pale); }
.lp-here { color: var(--iv-70); }
a.lp:hover .lp-cta { gap: 14px; color: var(--cream); }
.lp.is-here { border-color: var(--gold-55); }

/* ----------------------------------------------------------------- wheel -- */
/* Service cards on an arc. Each card is the image, with the text living on a
   scrim inside it; the selected card stands upright at full strength while
   neighbours lean away along the curve and dim. */
.ow { position: relative; margin-top: clamp(30px, 4vw, 52px); }
.ow-rotor {
  position: relative; height: clamp(360px, 44vw, 470px);
  touch-action: pan-y; cursor: grab; overflow: visible;
}
.ow-rotor.dragging { cursor: grabbing; }
.ow-rotor.dragging .ow-card { transition: none; }
.ow-card {
  position: absolute; left: 50%; top: 8px;
  width: clamp(230px, 26vw, 300px); aspect-ratio: 3 / 4;
  padding: 0; border: 1px solid rgba(231, 211, 166, 0.24); border-radius: 3px;
  overflow: hidden; isolation: isolate; cursor: pointer;
  background: var(--black); text-align: left;
  transition: transform 0.65s var(--ease), opacity 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease;
  will-change: transform;
}
.ow-card.is-front {
  border-color: var(--gold-55);
  box-shadow: 0 30px 60px -30px rgba(8, 5, 6, 0.85);
}
.ow-card:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
.owc-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.85) brightness(0.82);
  transition: filter 0.5s ease, transform 0.9s var(--ease);
}
.ow-card.is-front .owc-media { filter: saturate(1) brightness(0.95); }
.ow-card:hover .owc-media { transform: scale(1.05); }
.owc-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(16px, 1.8vw, 24px);
  background: linear-gradient(180deg, rgba(16, 13, 15, 0) 0%, rgba(16, 13, 15, 0.55) 34%, rgba(16, 13, 15, 0.92) 100%);
}
.owc-num { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold-pale); }
.owc-name {
  display: block; margin-top: 8px; font-family: var(--font-d); font-weight: 440;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ivory);
}
.owc-line { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: rgba(245, 239, 231, 0.78); }

.ow-ui {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(20px, 2.6vw, 30px); flex-wrap: wrap;
}
.ow-count { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--iv-70); }
.ow-count b { font-family: var(--font-d); font-weight: 440; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.02em; color: var(--gold-pale); margin-right: 6px; }
.ow-stage { min-width: 0; flex: 1 1 320px; }
.ow-stage .ds-name { margin-top: 4px; font-size: clamp(24px, 2.8vw, 38px); }
.ow-stage .ds-line { margin-top: 8px; font-size: 14.5px; }
.ow-arrows { display: flex; gap: 10px; }
.ow-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--gold-38); color: var(--gold-pale);
  font-size: 18px; cursor: pointer;
  transition: border-color 0.25s ease, background 0.3s ease, color 0.25s ease;
}
.ow-arrow:hover { border-color: var(--gold-pale); background: rgba(231, 211, 166, 0.08); }
.ow-arrow:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
.ow-hint { margin-top: 18px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--iv-55); }

/* ---------------------------------------------------------- service detail -- */
/* The panel the wheel answers to: number and name, the plain-language account,
   the procedures as a hairline grid, and what patients usually ask. */
.sd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.sd-media {
  aspect-ratio: 4 / 3; border-radius: 2px; background-size: cover; background-position: center;
  border: 1px solid rgba(150, 121, 63, 0.3); position: sticky; top: 110px;
}
#sd-about { margin-top: 16px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.sd-procs { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: rgba(150, 121, 63, 0.26); border: 1px solid rgba(150, 121, 63, 0.26); }
.sd-proc { background: var(--ivory); padding: 16px 18px; }
.sd-proc b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); }
.sd-proc span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-mute); }
.sd-ask-h { margin: 26px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
#sd-ask { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

/* ------------------------------------------------------------ case browser -- */
.case-ui { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.case-count { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--iv-70); }
.case-count b { font-family: var(--font-d); font-weight: 440; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--gold-pale); margin-right: 6px; }
#case-title { display: block; margin-top: 2px; font-family: var(--font-d); font-weight: 440; font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.02em; color: var(--ivory); }
.case-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.case-pill {
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(231, 211, 166, 0.28);
  color: var(--iv-70); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.3s ease;
}
.case-pill:hover { color: var(--gold-pale); border-color: var(--gold-55); }
.case-pill.is-on { color: var(--black); background: var(--gold-pale); border-color: var(--gold-pale); }
.case-pill:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }

/* ------------------------------------------------------------ floating CTA -- */
/* One quiet, always-reachable appointment button. It replaces the old
   Book / Call / Directions bar everywhere. */
.fab {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom));
  z-index: 120;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 999px;
  background: var(--burg-600); color: var(--cream);
  border: 1px solid rgba(231, 211, 166, 0.45);
  font-size: 13.5px; font-weight: 650; letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(8, 5, 6, 0.7), 0 0 0 0 rgba(231, 211, 166, 0);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, background 0.3s ease;
}
.fab::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-pale); box-shadow: 0 0 12px 2px rgba(231, 211, 166, 0.55); }
.fab:hover { transform: translateY(-2px); background: var(--burg-700); box-shadow: 0 24px 48px -20px rgba(8, 5, 6, 0.8); }
.fab:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
body.menu-open .fab { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- location overlay --
   Choose your location lands here directly: the gateway surface, first thing
   visible, instead of a long scroll through the page. */
.locov {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(16, 13, 15, 0.985);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 0.35s ease;
}
.locov.is-open { opacity: 1; }
.locov-in {
  min-height: 100%; max-width: 1100px; margin: 0 auto;
  padding: clamp(84px, 14vh, 130px) clamp(20px, 6vw, 44px) clamp(40px, 8vh, 70px);
  display: flex; flex-direction: column; justify-content: center;
}
.locov .kicker { color: var(--gold-pale); }
.locov h2 { color: var(--ivory); margin: 14px 0 0; }
.locov .locpick { margin-top: clamp(26px, 4vh, 44px); }
.locov-x {
  position: absolute; top: 20px; right: clamp(20px, 6vw, 44px);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(231, 211, 166, 0.38); background: transparent;
  color: var(--ivory); font-size: 18px; cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.locov-x:hover { border-color: var(--gold-pale); color: var(--gold-pale); }
.locov-x:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
body.locov-open { overflow: hidden; }
body.locov-open .fab { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .locov .locpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-right: 0; padding-right: 0; overflow: visible; }
  .locov .locpick .lp { min-height: 158px; }
}
@media (prefers-reduced-motion: reduce) { .locov { transition: none; } }

/* ------------------------------------------------------- location overlay --
   Choose your location lands here directly: the gateway surface, first thing
   visible, instead of a long scroll through the page. */
.locov {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(16, 13, 15, 0.985);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 0.35s ease;
}
.locov.is-open { opacity: 1; }
.locov-in {
  min-height: 100%; max-width: 1100px; margin: 0 auto;
  padding: clamp(84px, 14vh, 130px) clamp(20px, 6vw, 44px) clamp(40px, 8vh, 70px);
  display: flex; flex-direction: column; justify-content: center;
}
.locov .kicker { color: var(--gold-pale); }
.locov h2 { color: var(--ivory); margin: 14px 0 0; }
.locov .locpick { margin-top: clamp(26px, 4vh, 44px); }
.locov-x {
  position: absolute; top: 20px; right: clamp(20px, 6vw, 44px);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(231, 211, 166, 0.38); background: transparent;
  color: var(--ivory); font-size: 18px; cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.locov-x:hover { border-color: var(--gold-pale); color: var(--gold-pale); }
.locov-x:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
body.locov-open { overflow: hidden; }
body.locov-open .fab { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .locov .locpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-right: 0; padding-right: 0; overflow: visible; }
  .locov .locpick .lp { min-height: 158px; }
}
@media (prefers-reduced-motion: reduce) { .locov { transition: none; } }

/* --------------------------------------------------------- page transitions -- */
@view-transition { navigation: auto; }

/* ---------------------------------------------------------------- results -- */
.cmp {
  position: relative; overflow: hidden; border-radius: 2px;
  max-width: 720px; margin: 0 auto; aspect-ratio: 16 / 10;
  border: 1px solid var(--gold-38); background: var(--black);
  touch-action: pan-y; cursor: ew-resize; user-select: none;
}
@media (min-width: 900px) { .cmp { max-height: 450px; } }
.cmp-after, .cmp-before { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cmp-before { clip-path: inset(0 50% 0 0); }
.cmp-tag {
  position: absolute; top: 14px; z-index: 3; pointer-events: none;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 2px;
}
.t-before { left: 14px; color: var(--gold-pale); background: rgba(16, 13, 15, 0.72); border: 1px solid var(--gold-38); }
.t-after { right: 14px; color: var(--black); background: linear-gradient(140deg, var(--gold-pale), var(--gold)); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 48px; margin-left: -24px;
  padding: 0; border: none; background: transparent; cursor: ew-resize; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.ch-line {
  position: absolute; top: 0; bottom: 0; width: 1.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(231, 211, 166, 0.2), var(--gold-pale) 45%, var(--gold-pale) 55%, rgba(231, 211, 166, 0.2));
  box-shadow: 0 0 16px rgba(231, 211, 166, 0.5);
}
.ch-grip {
  position: relative; width: 48px; height: 48px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(145deg, #F2E3BD, var(--gold) 62%, var(--gold-deep));
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--black); font-size: 12px;
}
.fine { text-align: center; }

/* ------------------------------------------------------------------ proof -- */
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ig-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 3vw, 40px); border-radius: 2px;
  border: 1px solid var(--gold-38);
  background: linear-gradient(160deg, rgba(78, 22, 31, 0.35), rgba(16, 13, 15, 0.2));
  transition: border-color 0.3s ease, transform 0.5s var(--ease);
}
.ig-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.ig-handle { font-family: var(--font-d); font-weight: 430; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; color: var(--cream); }
.ig-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-pale); transition: gap 0.3s ease;
}
.ig-card:hover .ig-cta { gap: 16px; }
.ig-cta b { font-weight: 400; }

/* ------------------------------------------------------------------ visit -- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.addr { margin-top: 26px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-2); }
.room-taupe .small { margin-top: 18px; }
.visit-actions { display: flex; flex-direction: column; }
.act {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  min-height: 58px; padding: 17px 4px;
  border-top: 1px solid rgba(150, 121, 63, 0.3);
  transition: padding-left 0.3s var(--ease), color 0.25s ease;
}
.act:last-child { border-bottom: 1px solid rgba(150, 121, 63, 0.3); }
.act:hover { padding-left: 12px; color: var(--burg-700); }
.act-k { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); flex: none; }
.room-black .act-k, .room-char .act-k, .room-burg .act-k { color: var(--gold-pale); }
.act-v { font-size: 15px; font-weight: 550; color: var(--ink); text-align: right; }
.act:hover .act-v { color: var(--burg-700); }

/* ----------------------------------------------------------------- footer -- */
.foot { position: relative; overflow: hidden; background: var(--black); padding: clamp(56px, 7vw, 88px) 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: clamp(32px, 5vw, 72px); padding-bottom: 44px; }
.foot-addr { margin-top: 18px; font-size: 14px; line-height: 1.9; color: var(--iv-55); }
.foot-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.foot-col a { display: block; min-height: 32px; font-size: 14.5px; line-height: 2.1; color: var(--iv-70); }
.foot-col a:hover { color: var(--gold-pale); }
.soc-row { display: flex; gap: 10px; margin-top: 16px; }
/* .foot-col a is 0,1,1 and would beat .soc's 0,1,0, turning the circle into a
   block with a 2.1 line-height and shoving the glyph off centre. The compound
   selector keeps the icon's own geometry in charge. */
.soc, .foot-col a.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; border-radius: 50%;
  border: 1.5px solid var(--gold-55); color: var(--iv-70);
  line-height: 1; padding: 0;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.3s ease;
}
.soc svg { display: block; width: 17px; height: 17px; fill: currentColor; flex: none; }
.soc:hover { color: var(--black); background: var(--gold-pale); border-color: var(--gold-pale); }
.soc-note { margin-top: 10px; font-size: 11.5px; color: var(--iv-55); }
.foot-legal {
  border-top: 1px solid rgba(185, 148, 89, 0.22); padding-top: 26px;
  font-size: 13px; color: var(--iv-55);
}

/* ---------------------------------------------------------------- reveals -- */
.js [data-reveal], .js [data-words] .w {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.9s var(--ease);
}
.js [data-words] .w { display: inline-block; transform: translateY(0.6em); }
.js [data-reveal].in, .js [data-words].in .w { opacity: 1; transform: translateY(0); }
[data-words] { overflow: hidden; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1140px) {
  /* seven nav items need more room than five did, so the header hands over
     to the menu earlier */
  .nav > a:not(.btn) { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 980px) {
  .svc-grid, .proof-grid, .visit-grid, .intro-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-media { position: static; }
  .svc-row:nth-child(even) .sr-media { order: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .svc-stage { justify-self: stretch; max-width: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .foot-col a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 760px) {
  .foot { padding-bottom: calc(34px + 70px + env(safe-area-inset-bottom)); } /* room for the floating CTA */
  /* The hero owns the whole first screen, and the content drops into the
     lower band: the middle of the frame stays open so the photograph reads,
     and the type sits on a scrim built for it. Padding clears the
     architectural word pinned to the section floor. */
  /* the sticky action bar already carries Book, so the header CTA only
     crowds the brand at this width */
  .nav > a.btn { display: none; }
  .brand img { width: 36px; height: 36px; }
  .brand-t b { font-size: 13px; white-space: nowrap; }
  .brand-t span { font-size: 9px; letter-spacing: 0.2em; }
}
@media (max-width: 640px) {
  /* mobile rhythm: same content, more air. Desktop is untouched. */
  .sec { padding-top: 96px; padding-bottom: 96px; }
  .sec-head { margin-bottom: 28px; }
  .lead, p { line-height: 1.72; }
  .ds-line { line-height: 1.7; }
  main .btn { width: 100%; justify-content: center; }
  .cta-row { gap: 12px; }
  .fv-grid, .sd-procs { gap: 10px; background: transparent; border: none; }
  .fv, .sd-proc { border: 1px solid rgba(150, 121, 63, 0.26); border-radius: 2px; }
  .case-ui { gap: 14px; margin-top: 20px; }
  .case-tabs { gap: 8px; }
  /* the three clinic cards browse sideways on a phone instead of stacking
     into a 900px column; the next card peeks in to say there is more, and the
     container only owns horizontal panning so the page keeps scrolling freely */
  .locpick {
    display: flex; overflow-x: auto; gap: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; margin-right: calc(-1 * clamp(20px, 5vw, 44px));
    padding-right: clamp(20px, 5vw, 44px);
  }
  .locpick .lp { flex: 0 0 82%; scroll-snap-align: center; min-height: 280px; }
  .case-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .case-pill { flex: 0 0 auto; }
  .svc-item { padding: 22px 4px; }
  .sd-media { margin-top: 6px; }

  /* atmosphere simplifies: fragments and the arc go, blooms stay (cheap) */
  .frag, .arc { display: none; }
  .arch { font-size: clamp(34px, 9.6vw, 60px); }
  .arch-foot { font-size: clamp(90px, 26vw, 150px); }
  .nav .btn { min-height: 44px; padding: 10px 16px; font-size: 12.5px; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-words] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .acc-panel { transition: none; }
  .ow-card { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .menu { transition: none; }
  .mb-mark::before, .mb-mark::after { transition: none; }
  .bloom-hero { animation: none; }
  .ss-curtain.run { animation: none; }
  .ss-media, .svc-item, .act, .ig-card { transition: none; }
}

/* ------------------------------------------------------- hero, full stage --
   Tablets get the full-viewport hero too: at 768 the old 760px ceiling left
   the next room peeking 82px above the fold, which is the bitin the brief
   describes. Gated on height so a phone in landscape keeps the centred
   composition rather than a squashed one. */
@media (max-width: 900px) and (min-height: 600px) {
  .hero {
    min-height: 100vh; min-height: 100svh;
    align-items: flex-end;
    padding-top: clamp(96px, 14vh, 140px);
    padding-bottom: clamp(92px, 13vh, 132px);
  }
}