.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: 1.5px;
  background: var(--ink); transition: transform 0.4s var(--ease);
}
.mb-mark::before { top: 0; }
.mb-mark::after { bottom: 0; }
.head-dark .mb-mark::before, .head-dark .mb-mark::after { background: var(--gold-pale); }
.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(--ink);
}
.head-dark .mb-t { color: var(--gold-pale); }
body.menu-open .mb-mark::before, body.menu-open .mb-mark::after { background: var(--gold-pale); }
body.menu-open .mb-t { color: var(--gold-pale); }

.menu {
  position: fixed; inset: 0; z-index: 130;
  background: linear-gradient(170deg, var(--burg-900), var(--black) 80%);
  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-display); font-weight: 440;
  font-size: clamp(28px, 8.4vw, 42px); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ivory);
  border-bottom: 1px solid rgba(242, 233, 226, 0.12);
  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-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--gold); 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(--ivory-55); }
.menu-foot .mf-tel { color: var(--gold-pale); border-bottom: 1px solid var(--gold-38); }
body.menu-open { overflow: hidden; }
/* the header floats above the open panel so the toggle stays reachable */
body.menu-open .site-head { z-index: 131; background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
body.menu-open .brand, body.menu-open .menu-btn { position: relative; z-index: 131; }

/* ============================================================================
   A+ DENTAL CARE HAVEN · QC
   Design system. Warm editorial, quiet luxury, medically credible.

   Branch architecture: every branch shares these tokens and components.
   A future branch re-skins by overriding the custom properties on body
   (EDSA: darker canvas, stronger black; Parañaque: brighter ivory) without
   touching component CSS.
   ========================================================================== */

:root {
  /* brand palette, owner supplied */
  --burg-900: #4E161F;
  --burg-700: #69151F;
  --burg-600: #6F1F28;
  --taupe:    #AB9173;
  --ivory:    #F2E9E2;

  /* system derivations */
  --black:    #171013;         /* warm near black */
  --charcoal: #241A1E;
  --cream:    #F8F2EA;
  --ink:      #1F1517;
  --ink-2:    #3A2E30;
  --ink-mute: #5A4B47;

  /* champagne gold, brushed not casino */
  --gold:      #B99459;
  --gold-deep: #765E30;
  --gold-pale: #E7D3A6;
  --gold-24:   rgba(185, 148, 89, 0.24);
  --gold-38:   rgba(185, 148, 89, 0.38);
  --gold-55:   rgba(185, 148, 89, 0.55);

  --ivory-70: rgba(242, 233, 226, 0.7);
  --ivory-55: rgba(242, 233, 226, 0.55);
  --ivory-38: rgba(242, 233, 226, 0.38);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 44px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font-family: inherit; }
::selection { background: var(--burg-700); color: var(--ivory); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------------------------------------------------------------- type --- */
.display {
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: "opsz" 90;
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 420;
  color: var(--burg-600);
}
.on-dark .display em, .room-dark .display em { color: var(--gold-pale); }
/* body carries the light theme's ink and .display sets no colour of its own,
   so a section on a dark page without a room class rendered its heading in
   #1F1517 on #171013: a 1.05 ratio, invisible. This is what hid "In their
   own" on the reviews page. The light room block further down still wins for
   cream and taupe sections, which is why those keep their dark ink. */
.on-dark .display, .room-dark .display,
.room-charcoal .display, .room-burgundy .display { color: var(--cream); }

.h-hero  { font-size: clamp(46px, 7.2vw, 104px); line-height: 0.98; }
.h-page  { font-size: clamp(40px, 6vw, 84px);   line-height: 0.99; }
.h-sec   { font-size: clamp(30px, 4vw, 56px);   line-height: 1.04; }
.h-sub   { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; }

.eyebrow {
  display: block;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 22px;
}
/* The decorative rule beside eyebrows was removed globally. Labels now rely
   on tracking, gold colour, and spacing rather than a repeating dash. */
.eyebrow .rule { display: none; }
.on-dark .eyebrow, .room-dark .eyebrow { color: var(--gold); }

.lead { font-size: clamp(16.5px, 1.32vw, 19.2px); line-height: 1.65; color: var(--ink-2); max-width: 630px; }
.small { font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); }
.room-cream .small, .room-taupe .small { color: #4A3D3A; }
.on-dark .lead, .room-dark .lead { color: var(--ivory-70); }
.on-dark .small, .room-dark .small { color: var(--ivory-55); }

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 30px;
  border-radius: 2px;
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--burg-700); color: var(--cream); }
.btn-primary:hover { background: var(--burg-900); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(36, 26, 28, 0.35); }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.on-dark .btn-ghost, .room-dark .btn-ghost { color: var(--ivory); border-color: var(--ivory-38); }
.on-dark .btn-ghost:hover, .room-dark .btn-ghost:hover { border-color: var(--gold); color: var(--gold-pale); }
.btn-gold { background: transparent; color: var(--gold-deep); border-color: var(--gold-55); }
.btn-gold:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--burg-700);
  border-bottom: 1px solid var(--gold-38);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.text-link:hover { color: var(--gold-deep); border-color: var(--gold); }
.on-dark .text-link, .room-dark .text-link { color: var(--gold-pale); border-color: var(--gold-38); }

/* -------------------------------------------------------------- header --- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.site-head.scrolled {
  background: rgba(242, 233, 226, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--gold-24);
}
.site-head.head-dark.scrolled {
  background: rgba(23, 16, 19, 0.9);
  border-bottom-color: rgba(185, 148, 89, 0.3);
}
.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; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name b { font-size: 14.5px; font-weight: 650; letter-spacing: 0.01em; }
.brand-name span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-deep); margin-top: 3px;
}
.head-dark .brand-name b { color: var(--ivory); }
.head-dark .brand-name span { color: var(--gold); }

.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease;
}
.site-nav a:hover { color: var(--burg-700); }
.site-nav a[aria-current="page"] { color: var(--burg-700); border-bottom-color: var(--gold); }
.head-dark .site-nav a { color: var(--ivory-70); }
.head-dark .site-nav a:hover { color: var(--ivory); }
.head-dark .site-nav a[aria-current="page"] { color: var(--gold-pale); border-bottom-color: var(--gold); }
.site-nav .btn { min-height: 44px; padding: 10px 22px; margin-left: 14px; font-size: 13.5px; }
/* `.site-nav a` is more specific than `.btn-primary`, so without these the
   header button inherits body ink and disappears into its own background.
   Buttons keep their own colour scheme; only plain nav links take nav colour. */
.site-nav a.btn-primary,
.head-dark .site-nav a.btn-primary { color: var(--cream); }
.site-nav a.btn-primary:hover,
.head-dark .site-nav a.btn-primary:hover { color: #FFFFFF; }
.site-nav a.btn-ghost { color: var(--ink); }
.head-dark .site-nav a.btn-ghost { color: var(--ivory); }
.site-nav a.btn-gold { color: var(--gold-deep); }

/* The location photograph sits behind the hero under a cream wash: graded
   warm and quiet so the ink headline keeps its full contrast. */
/* ------------------------------------------------------------------ hero --
   The EDSA composition, in QC's own materials: a full-viewport stage, a lit
   vertical rule leading the block, then kicker, headline, lead and actions. */
.hero {
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: center;
  padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(56px, 8vh, 96px);
}
.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); }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero .h-hero { margin-top: 26px; max-width: 15ch; }
.hero .lead { margin-top: 28px; max-width: 480px; }

.hero-photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/img/loc/loc-quezon-city.jpg') 78% 18% / cover no-repeat;
  filter: saturate(0.82) sepia(0.07) brightness(1);
}
/* Photo first, editorial ivory grading: the wash sits over the text column
   and thins to nearly nothing across the face. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(248, 242, 234, 0.96) 0%, rgba(248, 242, 234, 0.85) 38%, rgba(248, 242, 234, 0.3) 66%, rgba(248, 242, 234, 0.04) 100%),
    linear-gradient(180deg, rgba(248, 242, 234, 0.2) 0%, rgba(248, 242, 234, 0.04) 40%, rgba(248, 242, 234, 0.5) 80%, rgba(248, 242, 234, 0.97) 100%);
}
@media (max-width: 900px) {
  /* same composition as EDSA, in QC's cream: full screen, photograph open
     through the middle, type in a protected lower band */
  .hero-photo { background-position: 44% 8%; }
  .hero-photo::after {
    background:
      linear-gradient(180deg,
        rgba(248, 242, 234, 0.7) 0%,
        rgba(248, 242, 234, 0.2) 16%,
        rgba(248, 242, 234, 0.36) 26%,
        rgba(248, 242, 234, 0.93) 39%,
        rgba(248, 242, 234, 0.96) 62%,
        rgba(248, 242, 234, 0.98) 100%);
  }
}


/* The family kicker: a short lit line leading the label, as on EDSA. */
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-55); flex: none; }

/* ------------------------------------------------------- location overlay --
   Choose your location lands here directly: the gateway surface, first thing
   visible, instead of a long scroll through page content. */
.locov {
  position: fixed; inset: 0; z-index: 150;
  background: linear-gradient(170deg, var(--burg-900), var(--black) 80%);
  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, 5vw, 44px) clamp(40px, 8vh, 70px);
  display: flex; flex-direction: column; justify-content: center;
}
.locov .eyebrow { color: var(--gold-pale); }
.locov h2 { color: var(--ivory); margin: 14px 0 0; }
.locov h2 em { color: var(--gold-pale); }
.locov .locpick { margin-top: clamp(26px, 4vh, 44px); }
.locov-x {
  position: absolute; top: 20px; right: clamp(20px, 5vw, 44px);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(242, 233, 226, 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; } }

/* ------------------------------------------------------------ sections --- */
.section { padding: clamp(84px, 10vw, 144px) 0; position: relative; }
.room-dark { background: var(--black); color: var(--ivory); }
.room-charcoal { background: var(--charcoal); color: var(--ivory); }
.room-burgundy { color: var(--ivory); }
.room-burgundy { background: linear-gradient(168deg, var(--burg-700) 0%, var(--burg-900) 62%, #380F16 100%); }
.room-cream { background: var(--cream); }
.room-taupe { background: linear-gradient(180deg, #EFE4D8 0%, #E6D6C4 100%); }

.hairline { border: none; height: 1px; background: var(--gold-24); margin: 0; }
.on-dark .hairline { background: rgba(185, 148, 89, 0.28); }

.sec-head { display: flex; flex-direction: column; gap: 26px; margin-bottom: clamp(52px, 6.5vw, 88px); }
/* measured from the reference: a headline and its supporting line sit in one
   column with a deliberate 28px hero / 48px section gap, never side by side. */
.display + .lead { margin-top: 30px; }
.h-sec + .lead, .h-page + .lead { margin-top: 34px; }
.sec-head .h-sec { max-width: 720px; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

.num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--gold); font-size: 15px; letter-spacing: 0.04em;
}

/* -------------------------------------------------------------- motion --- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-mask] { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease); }
[data-mask].in { clip-path: inset(0 0 0 0); }
[data-mask] img { transform: scale(1.07); transition: transform 1.7s var(--ease); }
[data-mask].in img { transform: none; }
[data-words] .w { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.8s var(--ease), transform 0.85s var(--ease); }
[data-words].in .w { opacity: 1; transform: none; }
[data-rule] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease) 0.2s; }
[data-rule].in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu { transition: none; }
  [data-reveal], [data-mask], [data-words] .w, [data-rule] {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  [data-mask] img { transform: none !important; }
  .marquee-track { animation: none !important; }
}

/* ------------------------------------------------------------- marquee --- */
.marquee { overflow: hidden; position: relative; padding: 18px 0; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: mq 46s linear infinite; }
.marquee.paused .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-item {
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 2vw, 26px); color: var(--ivory-55); white-space: nowrap;
}
.mq-item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; }

@media (min-width: 900px) {
  .cmp { max-height: 418px; }
  .cmp-wide { max-width: 820px; }
}

/* --------------------------------------------------- branch chooser ------ */
.branch-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.branch-card {
  position: relative; display: block; overflow: hidden;
  border-radius: 4px; border: 1px solid var(--gold-24);
  background: var(--cream); text-decoration: none; color: inherit;
  transition: border-color 0.35s ease, transform 0.5s var(--ease), box-shadow 0.5s ease;
}
a.branch-card:hover, a.branch-card:focus-visible {
  border-color: var(--gold-55); transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(35, 20, 24, 0.5);
}
a.branch-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.bc-media {
  display: block; aspect-ratio: 16 / 10;
  transition: transform 1s var(--ease);
  position: relative; overflow: hidden;
  /* layer 1 is the photograph slot, layer 2 a warm brand wash beneath it */
  background-color: var(--ivory);
  background-image: var(--branch-photo, none),
                    linear-gradient(150deg, rgba(110, 32, 41, 0.07), rgba(185, 148, 89, 0.12) 70%);
  background-size: cover, cover;
  background-position: center 32%, center;
  background-repeat: no-repeat, no-repeat;
}
/* The branch name, cropped, in the same architectural treatment the sections
   use. It is drawn only while the photograph slot is empty. */
.bc-media::after {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 520; letter-spacing: -0.045em;
  font-size: clamp(46px, 6.5vw, 78px); line-height: 0.8; white-space: nowrap;
  color: rgba(110, 32, 41, 0.13); filter: blur(1px); pointer-events: none;
}
.branch-card[data-branch="paranaque"] .bc-media::after   { content: "PARA\00D1 AQUE"; }
.branch-card[data-branch="quezon-city"] .bc-media::after { content: "QUEZON CITY"; }
/* ---------------------------------------------------------------------------
   BRANCH PHOTOGRAPH SLOTS. Uncomment a line and point it at a real interior,
   reception or storefront photograph for that branch. Nothing else changes.
   Do not point these at procedure or macro photography.
   --------------------------------------------------------------------------- */
.branch-card[data-branch="paranaque"]   { /* --branch-photo: url("../img/branches/paranaque.jpg"); */ }
.branch-card[data-branch="quezon-city"] { /* --branch-photo: url("../img/branches/quezon-city.jpg"); */ }
a.branch-card:hover .bc-media { transform: scale(1.04); }
.bc-body { display: block; padding: clamp(20px, 2.4vw, 30px); }
.bc-name {
  display: block; font-family: var(--font-display); font-weight: 460;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink);
}
.bc-where { display: block; margin-top: 9px; font-size: 13.5px; color: var(--ink-mute); }
.bc-cta {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burg-700); transition: color 0.25s ease, gap 0.3s ease;
}
a.branch-card:hover .bc-cta { color: var(--gold-deep); gap: 14px; }
.bc-here {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.branch-card.is-here { border-style: solid; border-color: var(--gold-55); }
.branch-card.is-here .bc-media { opacity: 0.72; }

/* ------------------------------------------------------ social proof ----- */
/* Heading and supporting line on one side, the figures on the other, divided by
   hairlines. The numbers stay part of a sentence about patients rather than
   three oversized digits floating on their own. */
.mention-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
.proof-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}
.proof-row .stat { padding-left: clamp(16px, 2vw, 30px); border-left: 1px solid var(--gold-24); }
.proof-row .stat:first-child { padding-left: 0; border-left: none; }
@media (max-width: 900px) {
  .mention-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-row { gap: 12px; }
  .proof-row .stat { padding-left: clamp(12px, 3vw, 18px); }
}

/* ---------------------------------------------------- social buttons ----- */
/* Icon only, 44px so the target still meets the accessibility rule, but reading
   as a small quiet mark rather than a labelled button. */
.social-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.social-btn,
.foot-grid a.social-btn {
  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(--ivory-70);
  line-height: 1; padding: 0; text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.3s ease;
}
.social-btn svg { display: block; width: 17px; height: 17px; fill: currentColor; flex: none; }
.social-btn:hover, .social-btn:focus-visible {
  color: var(--black); background: var(--gold-pale); border-color: var(--gold-pale);
}
.social-btn:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }

/* ------------------------------------------------------------ glow layer ---
   Ambient, never structural. Everything here is pointer-inert, sits at z 0
   under the .bg-layer content, and is cheap: one blurred element per use, no
   animation. The words are sized past the section bounds on purpose, so what
   remains visible is a fragment of a letterform, not a word to read. */
.glow-word {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 520; letter-spacing: -0.04em;
  line-height: 0.72; white-space: nowrap;
  font-size: clamp(300px, 36vw, 620px);
  color: rgba(222, 189, 128, 0.15);
  text-shadow: 0 0 90px rgba(231, 211, 166, 0.30);
  filter: blur(20px);
}
.room-cream .glow-word, .room-taupe .glow-word, .glow-word.on-light {
  color: rgba(150, 121, 63, 0.10);
}
/* Curved light, not circles. The stroke is a long flowing sweep drawn as an
   inline SVG: a thin bright line over a wide soft halo, then blurred, so it
   reads as a luminous trail moving through the room. This is the same abstract
   arc language the Parañaque atmosphere layer established; the family now
   shares it. The old circle ring and radial disc are retired. */
.glow-curve {
  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.10)' 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(26px);
  opacity: 0.8;
}
.room-cream .glow-curve, .room-taupe .glow-curve, .glow-curve.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(185,148,89,0.08)' 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(185,148,89,0.22)' stroke-width='64' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: blur(26px);
  opacity: 0.65;
}
/* The broad companion: the same sweep as a wide, heavily blurred trail, which
   does the atmospheric work the radial bloom used to do without ever reading
   as a disc. */
.glow-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.10)' 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(30px);
  opacity: 0.85;
}
.room-cream .glow-bloom, .room-taupe .glow-bloom {
  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(185,148,89,0.08)' 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(185,148,89,0.22)' stroke-width='64' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.7;
}
@media (max-width: 640px) {
  /* mobile rhythm: same content, more air. Desktop is untouched. */
  .section { padding-top: 96px; padding-bottom: 96px; }
  .sec-head { margin-bottom: 30px; }
  .lead { line-height: 1.75; }
  p { line-height: 1.72; }
  .grid-2 { row-gap: 34px; }
  main .btn { width: 100%; justify-content: center; }
  .grid-2 figure.frame { aspect-ratio: 16 / 10 !important; max-width: none !important; justify-self: stretch; }
  .steps-grid { gap: 10px; background: transparent; border: none; }
  .step { border: 1px solid var(--gold-24); border-radius: 3px; }
  .case-ui { gap: 14px; margin-top: 20px; }
  .orbit-ui { row-gap: 16px; }

  /* a 300px blurred glyph is all cost and no atmosphere on a phone */
  .glow-word { display: none; }
}

/* -------------------------------------------------------- drag rows ----- */
.drag-row {
  display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-y; cursor: grab; min-width: 0; max-width: 100%;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.drag-row::-webkit-scrollbar { display: none; }
.drag-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.drag-row.grabbing { cursor: grabbing; scroll-snap-type: none; }

/* ------------------------------------------------------ orbit carousel --- */
/* Geometry adapted from the proven Parañaque wheel: the ROTOR rotates as one
   unit by -index * step, and cards sit at fixed angles rotate(i*step)
   translateY(-R). Card box metrics come from JS so desktop and narrow share
   one source of truth. */
.orbit-zone { position: relative; }
.orbit-stage {
  position: relative; overflow: hidden;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.orbit-stage.grabbing { cursor: grabbing; }
.orbit-rotor { position: absolute; left: 50%; width: 0; height: 0; }

.orbit-card {
  position: absolute; padding: 0; text-align: left; cursor: pointer;
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  background-size: cover; background-position: center;
  border: 1px solid var(--gold-24);
  transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease;
}
.orbit-card .oc-num {
  position: relative; font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  font-feature-settings: "tnum"; color: var(--gold-pale); padding: 18px 20px 0;
}
.orbit-card .oc-title {
  position: relative; margin-top: auto; padding: 0 20px;
  font-family: var(--font-display); font-weight: 480; letter-spacing: -0.02em;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.12; color: var(--ivory);
}
.orbit-card .oc-line {
  position: relative; padding: 7px 20px 20px;
  font-size: 12.5px; line-height: 1.45; color: rgba(242, 233, 226, 0.72);
}
.orbit-card.active {
  border: 1.5px solid rgba(231, 211, 166, 0.9);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.75), 0 0 60px -18px var(--gold-38);
}
.orbit-card.dim { filter: saturate(0.72) brightness(0.8); }

.orbit-ui { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.orbit-count { font-feature-settings: "tnum"; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-mute); }
.orbit-count b { font-family: var(--font-display); font-size: 30px; font-weight: 480; color: var(--ink); letter-spacing: -0.02em; }
.on-dark .orbit-count { color: var(--ivory-55); }
.on-dark .orbit-count b { color: var(--gold-pale); }
.orbit-arrows { display: flex; gap: 10px; }
.o-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--gold-38); background: transparent; color: var(--ink);
  font-size: 16px; cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.o-arrow:hover { border-color: var(--gold); background: var(--gold); color: var(--black); }
.on-dark .o-arrow { color: var(--ivory); }

/* one organised reading area for the selected service */
.svc-detail {
  margin-top: clamp(44px, 5.5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(30px, 5vw, 76px); align-items: start;
}
.svc-overview { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 30ch; }
.room-cream .svc-overview { color: #33292B; }
.on-dark .svc-overview { color: var(--ivory-70); }

/* progressive disclosure */
.acc { border-top: 1px solid var(--gold-24); }
.acc-item { border-bottom: 1px solid var(--gold-24); }
.acc-btn {
  width: 100%; min-height: 56px; padding: 16px 0; background: transparent; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--ink);
  transition: color 0.25s ease;
}
.on-dark .acc-btn { color: var(--ivory); }
.acc-btn:hover { color: var(--gold-deep); }
.on-dark .acc-btn:hover { color: var(--gold-pale); }
.acc-sign {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--gold-38); color: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: transform 0.35s var(--ease), border-color 0.3s;
}
.on-dark .acc-sign { color: var(--gold-pale); }
.acc-btn[aria-expanded="true"] .acc-sign { transform: rotate(45deg); border-color: var(--gold); }
.acc-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.35s ease; }
.acc-panel.open { max-height: 460px; opacity: 1; }
.acc-panel .inner { padding: 2px 0 20px; font-size: 15.5px; line-height: 1.72; color: var(--ink-2); max-width: 56ch; }
.on-dark .acc-panel .inner { color: var(--ivory-70); }
.acc-panel ul li { padding: 9px 0; border-top: 1px solid var(--gold-24); display: flex; justify-content: space-between; gap: 18px; font-size: 14.5px; }
.acc-panel ul li .d { color: #554743; font-size: 13.5px; text-align: right; }
.on-dark .acc-panel ul li .d { color: var(--ivory-55); }

/* -------------------------------------------- oversized background type --- */
/* Architectural, not decorative. Very low contrast, deliberately cropped,
   never competing with the real headline. Reserved for key moments. */
.bg-type {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 520;
  letter-spacing: -0.04em; line-height: 0.78; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 0; z-index: 0;
}
.bg-type-fill { color: rgba(36, 26, 28, 0.045); }
.on-dark .bg-type-fill, .room-dark .bg-type-fill, .room-charcoal .bg-type-fill { color: rgba(242, 233, 226, 0.05); }
.room-burgundy .bg-type-fill { color: rgba(242, 233, 226, 0.055); }
/* Sized so the whole word fits on screen. Cropped words read as a mistake;
   the deliberately cropped fragments now live in the glow layer instead. */
/* One placement for every architectural word: centred, sitting low in the
   section so it clears the headline block, and sized so even the longest word
   ("QUEZON CITY") fits the viewport whole at 375px and at 1440px. Cropping and
   collisions were the complaint; both are structural here rather than tuned
   per page, so neither can come back when copy changes. */
.bg-type-fit {
  font-size: clamp(40px, 8vw, 118px);
  left: 50%; right: auto; transform: translateX(-50%);
  top: auto; bottom: clamp(10px, 2vh, 26px);
}
.bg-type-xl { font-size: clamp(120px, 21vw, 300px); }
.bg-type-lg { font-size: clamp(84px, 15vw, 210px); }
.bg-layer { position: relative; z-index: 1; }

/* ------------------------------------------------ architectural type ----- */
/* A softer, deeper variant of the existing background word. The slight blur is
   what stops it reading as text you are meant to finish; it becomes atmosphere.
   Kept very cheap: one filter on one element per section, never animated. */
/* bg-type-soft no longer blurs: the architectural words stay crisp and the
   blur lives in the separate .glow-* layer below. The class is kept inert so
   existing markup needs no edits. */
.bg-type-soft { }
.bg-type-md { font-size: clamp(64px, 11vw, 158px); }
.bg-type-sm { font-size: clamp(46px, 7.5vw, 104px); }
.bg-type-warm { color: rgba(110, 32, 41, 0.05); }
.room-taupe .bg-type-warm { color: rgba(78, 22, 31, 0.07); }
.on-dark .bg-type-gold, .room-dark .bg-type-gold,
.room-charcoal .bg-type-gold { color: rgba(185, 148, 89, 0.075); }
.room-burgundy .bg-type-gold { color: rgba(231, 211, 166, 0.07); }

/* deck intro: cards start gathered like an arranged deck, then unfold outward
   into the wheel. Transform is JS-driven; this only holds the pre-reveal state
   so nothing flashes into place before the choreography runs. */
.orbit-stage.deck-idle .orbit-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .orbit-stage.deck-idle .orbit-card { opacity: 1; }
}

/* --------------------------------------------------- compare slider ------ */
/* Sized deliberately. At full wrap width a 16/9 slider is 698px tall on a
   laptop, which turns a clinical close up into the whole screen. Capping the
   width and the height keeps it impactful without dominating, and the cap
   lifts below 900px so phones still get the full bleed. */
.cmp {
  max-width: 740px; margin-left: auto; margin-right: auto;
  position: relative; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--gold-38); background: var(--charcoal);
  touch-action: pan-y; cursor: ew-resize; user-select: none;
}
.cmp .layer { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cmp .layer.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;
}
.cmp .tag-before { left: 14px; color: var(--gold-pale); background: rgba(23, 16, 19, 0.72); border: 1px solid var(--gold-38); }
.cmp .tag-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;
}
.cmp-handle .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);
}
.cmp-handle .grip {
  position: relative; width: 50px; height: 50px; 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;
}

.case-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.case-tab {
  min-height: 46px; padding: 12px 20px; border-radius: 2px;
  border: 1px solid var(--gold-24); background: transparent;
  color: var(--ivory-55); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.case-tab:hover { border-color: var(--gold-55); color: var(--ivory); }
.case-tab.active { border-color: var(--gold); color: var(--gold-pale); background: rgba(185, 148, 89, 0.12); }

/* ----------------------------------------------------------- reviews ----- */
.review-focal {
  font-family: var(--font-display); font-weight: 420; font-style: italic;
  font-size: clamp(23px, 2.9vw, 40px); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--ivory); max-width: 21em; min-height: 9.2em;
}
.review-caret { display: inline-block; width: 3px; height: 0.7em; margin-left: 7px; background: var(--gold); vertical-align: -0.08em; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0.1; } }
.review-meta { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.review-name { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-pale); }
.review-src { font-size: 13px; color: var(--ivory-38); }

.review-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.review-pill {
  min-height: 44px; padding: 10px 20px; border-radius: 9999px;
  border: 1px solid rgba(242, 233, 226, 0.2); background: transparent;
  color: var(--ivory-70); font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  cursor: pointer; white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.3s ease;
}
.review-pill:hover { color: var(--ivory); border-color: var(--gold-55); }
.review-pill.active {
  background: var(--burg-700); border-color: var(--burg-600);
  color: var(--ivory); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(185, 148, 89, 0.45);
}
.review-index { display: flex; flex-direction: column; }
.review-index button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 12px 4px; text-align: left;
  background: transparent; border: none; cursor: pointer;
  border-top: 1px solid rgba(242, 233, 226, 0.1);
  color: var(--ivory-55); font-size: 14.5px; font-weight: 500;
  transition: color 0.25s ease, padding-left 0.3s var(--ease);
}
.review-index button .d { font-size: 12px; color: var(--ivory-38); font-feature-settings: "tnum"; }
.review-index button:hover { color: var(--ivory); }
.review-index button.active { color: var(--gold-pale); padding-left: 14px; }
.review-index button.active .d { color: var(--gold); }

/* ------------------------------------------------------------- footer ---- */
.site-foot { background: var(--black); color: var(--ivory); padding: clamp(56px, 7vw, 88px) 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.25fr 0.8fr 1fr; gap: clamp(32px, 5vw, 72px); padding-bottom: 44px; }
.foot-grid h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.foot-grid a, .foot-grid p { color: var(--ivory-70); font-size: 14.5px; line-height: 2.1; }
.foot-grid a { display: block; min-height: 32px; }
.foot-grid a:hover { color: var(--gold-pale); }
.foot-legal {
  border-top: 1px solid rgba(185, 148, 89, 0.22); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(242, 233, 226, 0.55);
}

/* --------------------------------------------------------------- forms --- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: #FFFDFA; border: 1px solid rgba(171, 145, 115, 0.55); border-radius: 2px;
  padding: 13px 14px; outline: none; width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--burg-600); box-shadow: 0 0 0 3px rgba(111, 31, 40, 0.14);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-err { color: var(--burg-600); font-size: 13.5px; font-weight: 500; }

/* -------------------------------------------------------------- helpers -- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.grid-31 { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.frame { border-radius: 4px; overflow: hidden; border: 1px solid var(--gold-38); position: relative; }
.stat { display: flex; flex-direction: column; }
/* Sized so the three metrics read as one proof group rather than three hero
   headlines. The clamp is tuned to land near 38px at 390, 47px at 768 and 64px
   at 1440, and is capped so a wide monitor cannot push it past 66px. Number and
   suffix share a baseline and sit almost touching, so each metric is one unit. */
.stat b {
  display: flex; align-items: baseline; gap: 0.01em;
  font-family: var(--font-display); font-weight: 450;
  font-size: clamp(34px, 28px + 2.5vw, 66px);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--gold-pale);
}
.stat b i {
  font-style: normal; font-weight: 450;
  font-size: 0.82em; letter-spacing: -0.025em;
  color: var(--gold); line-height: 1;
}
/* The label is a DIRECT child of .stat; the figure lives in a span inside <b>.
   A bare ".stat span" caught both, which rendered the number at label size and
   left the suffix looking enormous beside it. Scope the label to > span and let
   the figure inherit the display size. */
.stat > span {
  display: block; margin-top: 11px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--ivory-55);
}
/* The third proof column is a place, not a number. It keeps the display face
   and the same baseline as its neighbours but drops to a size where two words
   sit comfortably beside two figures instead of shouting over them. */
.stat.stat-fact b { font-size: clamp(21px, 1.5vw + 12px, 34px); letter-spacing: -0.02em; }
.stat b span[data-num] { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }

/* ------------------------------------------------------------ first visit --
   Three numbered steps in one hairline-divided row. Editorial, not a card
   grid: the number is small and gold, the step name carries the weight. */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px; background: var(--gold-24); border: 1px solid var(--gold-24);
  margin-top: clamp(30px, 4vw, 48px);
}
.step { background: var(--cream); padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 38px); }
.step .num { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #765E30; }
.step h3 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 460;
  font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.step p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

/* --------------------------------------------------------- page transitions --
   Cross-document fade for browsers that support it; everyone else keeps the
   instant navigation they have today. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------------------------------------------------------- floating CTA --
   One quiet, always-reachable appointment button; it replaced the bottom
   Book / Call / Directions bar. */
.fab {
  position: fixed; right: 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-700); 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(23, 16, 19, 0.7);
  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-900); }
.fab:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; }
body.menu-open .fab, body.mm-open .fab { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ case browser -- */
.case-ui { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------- clinic chooser --
   The EDSA card style, adopted family-wide: each card is its branch's own
   room with the city as an oversized typographic mark, and the current branch
   is marked rather than linked. */
.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: 3px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(185, 148, 89, 0.30);
  text-decoration: none; color: var(--ivory);
  transition: border-color 0.4s ease, transform 0.5s var(--ease), box-shadow 0.5s ease;
}
a.lp:hover, a.lp:focus-visible { border-color: var(--gold-55); transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(23, 16, 19, 0.55); }
a.lp:focus-visible { outline: 2px solid var(--gold-deep); 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-display); 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-display); font-weight: 440; font-size: clamp(24px, 2.4vw, 33px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ivory); }
.lp-where { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: rgba(242, 233, 226, 0.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: rgba(242, 233, 226, 0.70); }
a.lp:hover .lp-cta { gap: 14px; color: var(--cream); }
.lp.is-here { border-color: var(--gold-55); }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1260px) {
  /* seven items plus the button need more room than six did */
  .site-nav { gap: 2px; }
  .site-nav a { padding: 0 9px; font-size: 13px; }
  .site-nav .btn { padding: 10px 16px; margin-left: 8px; }
}
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 1020px) {
  .grid-2, .grid-31, .svc-detail { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .review-focal { min-height: 0; }
}
@media (max-width: 640px) {
}

/* ---------------------------------------------- light rooms on dark pages --
   Pages whose <body> carries .on-dark still contain ivory and cream sections.
   Without these overrides the inherited .on-dark colours put ivory text on a
   cream ground, which measured a 1.08 contrast ratio: effectively invisible.
   These rules follow the .on-dark declarations so they win on source order,
   and they are the authority for text on any light surface. */
.room-cream, .room-taupe, .room-ivory { color: var(--ink); }

.room-cream .lead, .room-taupe .lead,
.on-dark .room-cream .lead, .on-dark .room-taupe .lead { color: #3A2E30; }

.room-cream .small, .room-taupe .small,
.on-dark .room-cream .small, .on-dark .room-taupe .small { color: #4A3D3A; }

.room-cream .svc-overview, .on-dark .room-cream .svc-overview { color: #2E2426; }

.room-cream .display, .room-taupe .display,
.on-dark .room-cream .display, .on-dark .room-taupe .display { color: var(--ink); }
.room-cream .display em, .room-taupe .display em,
.on-dark .room-cream .display em, .on-dark .room-taupe .display em { color: var(--burg-600); }

.room-cream .btn-ghost, .room-taupe .btn-ghost, .room-ivory .btn-ghost,
.on-dark .room-cream .btn-ghost, .on-dark .room-taupe .btn-ghost {
  color: var(--ink); border-color: rgba(36, 26, 28, 0.35);
}
.room-cream .btn-ghost:hover, .room-taupe .btn-ghost:hover,
.on-dark .room-cream .btn-ghost:hover, .on-dark .room-taupe .btn-ghost:hover {
  color: var(--gold-deep); border-color: var(--gold-deep);
}

.room-cream .eyebrow, .room-taupe .eyebrow,
.on-dark .room-cream .eyebrow, .on-dark .room-taupe .eyebrow { color: var(--gold-deep); }

.room-cream .acc-btn, .on-dark .room-cream .acc-btn { color: var(--ink); }
.room-cream .acc-btn:hover, .on-dark .room-cream .acc-btn:hover { color: var(--burg-600); }
.room-cream .acc-sign, .on-dark .room-cream .acc-sign { color: var(--gold-deep); }
.room-cream .acc-panel .inner, .on-dark .room-cream .acc-panel .inner { color: #3A2E30; }
.room-cream .acc-panel ul li .d, .on-dark .room-cream .acc-panel ul li .d { color: #554743; }
.room-cream .acc, .room-cream .acc-item,
.on-dark .room-cream .acc, .on-dark .room-cream .acc-item { border-color: var(--gold-24); }

.room-cream .orbit-count, .on-dark .room-cream .orbit-count { color: #554743; }
.room-cream .orbit-count b, .on-dark .room-cream .orbit-count b { color: var(--ink); }
.room-cream .o-arrow, .on-dark .room-cream .o-arrow { color: var(--ink); }
.room-cream .text-link, .room-taupe .text-link,
.on-dark .room-cream .text-link, .on-dark .room-taupe .text-link { color: var(--burg-700); }
.room-cream .btn-ghost, .on-dark .room-cream .btn-ghost { color: var(--ink); border-color: rgba(31,21,23,0.4); }

/* ------------------------------------------------ phone strips (last word) --
   Declared last so they outrank the base grid: on a phone the clinic cards
   browse sideways with a peek of the next card, and the container owns only
   horizontal panning so the page keeps scrolling freely. */
@media (max-width: 640px) {
  .locpick {
    display: flex; overflow-x: auto; gap: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; margin-right: calc(-1 * var(--pad, 20px));
    padding-right: var(--pad, 20px);
  }
  .locpick .lp { flex: 0 0 82%; scroll-snap-align: center; min-height: 280px; }
  .case-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .case-tabs button { flex: 0 0 auto; }
}

/* ------------------------------------------------------- hero, full stage --
   Same reach as EDSA: tablets included, landscape phones excluded. */
@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(76px, 11vh, 112px);
  }
}