/* ────────────────────────────────────────────────────────────
   DermAesthetics — luxury black & gold
   ──────────────────────────────────────────────────────────── */

:root {
  --bg-deep:    #000000;
  --bg-soft:    #0a0907;
  --bg-card:    #121008;
  --bg-elev:    #1a1610;

  --gold:       #d4b86a;       /* primary accent — matches logo gold */
  --gold-light: #e8cb7c;
  --gold-deep:  #9c7e36;
  --gold-glow:  rgba(212, 184, 106, .35);

  --cream:      #f7f1e1;
  --ink:        #faf7ec;
  --muted:      rgba(247, 241, 225, .65);
  --border:     rgba(212, 184, 106, .18);
  --border-soft: rgba(247, 241, 225, .08);

  --font-display: 'Cinzel', 'Cormorant Garamond', serif;
  --font-script:  'Pinyon Script', cursive;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --shadow-soft: 0 10px 40px rgba(0, 0, 0, .5);
  --shadow-gold: 0 12px 36px rgba(212, 184, 106, .25);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(212, 184, 106, .15); }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;
}
/* Anchor sections clear of the sticky navbar */
section[id] { scroll-margin-top: 76px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }

/* Selection */
::selection { background: var(--gold); color: var(--bg-deep); }

/* ───────── Layout primitives ───────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; position: relative; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 26px;
  font-family: var(--font-body); font-weight: 500;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px; transition: all .35s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer; white-space: nowrap;
}
.btn-primary {
  background: var(--gold); color: var(--bg-deep);
  border: 1px solid var(--gold);
}
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-ghost {
  background: transparent; color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-ghost:hover { background: var(--gold); color: var(--bg-deep); transform: translateY(-2px); }
.btn-large { padding: 17px 30px; font-size: .9rem; }

/* ───────── Section heads ───────── */
.section-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.2vw, 3.4rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.005em;
  color: var(--ink); margin-bottom: 18px;
}
.section-title em {
  font-family: var(--font-script);
  font-style: normal; font-weight: 400;
  color: var(--gold); letter-spacing: 0;
  font-size: 1.15em;
}
.section-title.light { color: var(--ink); }
.section-lead { font-size: 1.05rem; color: var(--muted); max-width: 620px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head .section-lead { margin: 0 auto; }

/* ───────── Navbar ───────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border-soft);
  transition: background .3s, border-color .3s;
  padding-top: env(safe-area-inset-top);
}
.navbar.scrolled { background: rgba(0, 0, 0, .92); border-bottom-color: var(--border); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 28px; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  font-family: var(--font-script); font-size: 1.6rem;
  color: var(--gold); border: 1px solid var(--gold);
  border-radius: 50%; line-height: 1;
}
.brand-text { font-family: var(--font-display); font-weight: 500; letter-spacing: .12em; font-size: .95rem; color: var(--ink); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); transition: color .25s; padding: 6px 0; position: relative;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px;
  background: var(--gold); transition: all .3s;
}
.nav-links a:hover::after { width: 100%; left: 0; }
.nav-cta {
  padding: 10px 18px; background: transparent;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px; transition: all .25s;
}
.nav-cta:hover { background: var(--gold); color: var(--bg-deep); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 24px; height: 1.5px; background: var(--gold); transition: all .3s; }
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(0, 0, 0, .98); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  flex-direction: column; gap: 14px;
  transform: translateY(-10px); opacity: 0;
  transition: all .25s; z-index: 49;
  max-height: calc(100vh - 100%); overflow-y: auto;
}
.mobile-menu.open { display: flex; transform: translateY(0); opacity: 1; }
.mobile-link { font-family: var(--font-display); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.mobile-cta { color: var(--gold); border-bottom: none; margin-top: 8px; }

/* ───────── Hero ───────── */
.hero {
  min-height: 100vh;
  background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 120px 24px 80px;
}
.hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(212, 184, 106, .12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212, 184, 106, .06), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; }
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
  animation: rise .8s .1s cubic-bezier(.4, 0, .2, 1) both;
}
.hero-logo {
  display: inline-block; max-width: 540px; width: 80%;
  margin: 0 auto 32px;
  animation: rise .9s .25s cubic-bezier(.4, 0, .2, 1) both;
}
.hero-logo img {
  width: 100%; height: auto; mix-blend-mode: screen;
  filter: drop-shadow(0 8px 32px rgba(212, 184, 106, .25));
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.8vw, 4.2rem);
  font-weight: 500; line-height: 1.05; color: var(--ink);
  margin-bottom: 22px; letter-spacing: -.005em;
  animation: rise .9s .35s cubic-bezier(.4, 0, .2, 1) both;
}
.hero-title em {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  color: var(--gold); letter-spacing: 0; font-size: 1.2em;
}
.hero-lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto 36px; line-height: 1.7; animation: rise .9s .45s cubic-bezier(.4, 0, .2, 1) both; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; animation: rise .9s .55s cubic-bezier(.4, 0, .2, 1) both; }
.hero-trust {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font-size: .76rem; letter-spacing: .12em; color: var(--muted);
  padding-top: 36px; border-top: 1px solid var(--border-soft);
  animation: rise .9s .65s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────── Services ───────── */
.section-services { background: var(--bg-soft); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  padding: 36px 28px; border-radius: 2px;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  position: relative; overflow: hidden;
}
.svc::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(212, 184, 106, .04));
  pointer-events: none; opacity: 0; transition: opacity .35s;
}
.svc:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.svc:hover::before { opacity: 1; }
.svc-icon { font-size: 1.4rem; color: var(--gold); margin-bottom: 14px; letter-spacing: .2em; }
.svc h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: .04em; color: var(--ink); margin-bottom: 4px; }
.svc-sub { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.svc p { color: var(--muted); font-size: .94rem; line-height: 1.7; margin-bottom: 18px; }
.svc-meta {
  display: inline-block; padding: 5px 12px;
  background: rgba(212, 184, 106, .08); color: var(--gold);
  font-size: .72rem; letter-spacing: .12em;
  border: 1px solid var(--border); border-radius: 2px;
}

/* ───────── GLP-1 / Weight Loss ───────── */
.section-glp { background: var(--bg-deep); position: relative; }
.section-glp::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 40% at 80% 20%, rgba(212, 184, 106, .08), transparent 70%);
  pointer-events: none;
}
.glp-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; position: relative; z-index: 1; }
.glp-content .section-tag { color: var(--gold); }
.glp-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 30px; max-width: 560px; }
.glp-perks { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.glp-perks li { display: flex; gap: 14px; align-items: flex-start; }
.glp-check {
  flex-shrink: 0; width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(212, 184, 106, .14); color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
  font-size: .76rem; font-weight: 600;
}
.glp-perks li strong { display: block; font-family: var(--font-display); letter-spacing: .04em; color: var(--ink); margin-bottom: 4px; font-weight: 500; }
.glp-perks li span { color: var(--muted); font-size: .92rem; }
.glp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.glp-tier {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  padding: 24px 22px; border-radius: 2px; position: relative;
  transition: all .3s;
}
.glp-tier:hover { border-color: var(--gold); transform: translateY(-2px); }
.glp-tier-feat { border-color: var(--gold); background: linear-gradient(180deg, rgba(212, 184, 106, .06), transparent 60%), var(--bg-card); }
.glp-tier-feat-tag {
  position: absolute; top: -10px; left: 22px;
  background: var(--gold); color: var(--bg-deep);
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px; font-weight: 600;
}
.glp-tier-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; color: var(--gold); margin-bottom: 8px; font-weight: 500; }
.glp-tier-price { font-family: var(--font-display); font-size: 2rem; color: var(--ink); font-weight: 500; line-height: 1; margin-bottom: 12px; }
.glp-tier-price span { font-family: var(--font-body); font-size: .82rem; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.glp-tier-desc { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.glp-cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.glp-fineprint { font-size: .76rem; color: rgba(247, 241, 225, .4); max-width: 480px; line-height: 1.6; }

.glp-sidecard {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 2px; padding: 32px 28px; align-self: start;
  position: sticky; top: 110px;
}
.glp-side-eyebrow { font-family: var(--font-display); font-size: .76rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.glp-steps { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.glp-steps li { display: flex; gap: 14px; align-items: flex-start; }
.glp-steps li span {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .9rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
}
.glp-steps li div { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.glp-steps li strong { font-size: .94rem; color: var(--ink); font-weight: 500; }
.glp-steps li div { color: var(--muted); font-size: .82rem; }

/* ───────── About / Provider ───────── */
.section-about { background: var(--bg-soft); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.about-layout {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px;
  align-items: center; max-width: 1180px; margin: 0 auto;
}

/* Portrait card */
.about-portrait { position: relative; aspect-ratio: 1 / 1; }
.about-portrait::before {
  content: ''; position: absolute; inset: -14px -14px 14px 14px;
  border: 1px solid var(--gold); border-radius: 2px;
  pointer-events: none; opacity: .6;
  transition: all .4s cubic-bezier(.4,0,.2,1);
}
.about-portrait:hover::before { inset: -10px -10px 10px 10px; opacity: 1; }
.about-portrait picture { display: block; height: 100%; }
.about-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 2px;
  filter: contrast(1.02) saturate(.92);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.about-portrait-tag {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px);
  color: var(--gold); padding: 8px 16px;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .25em; text-transform: uppercase;
  border: 1px solid var(--border);
}

/* Content */
.about-content { max-width: 540px; }
.about-eyebrow {
  display: inline-block; font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.about-credentials {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 4px 0 26px;
  padding: 12px 16px;
  background: rgba(212, 184, 106, .04);
  border-left: 2px solid var(--gold);
  border-radius: 0 2px 2px 0;
}
.cred-line {
  font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  font-weight: 500;
}
.cred-sep { color: var(--gold); font-size: .82rem; }
.cred-soft { color: var(--muted); letter-spacing: .14em; font-style: italic; text-transform: none; font-size: .82rem; font-weight: 400; }
.about-body { color: var(--muted); font-size: 1.02rem; line-height: 1.85; margin-bottom: 18px; }
.about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}
.about-stats > div { display: flex; flex-direction: column; gap: 6px; }
.about-stats b { font-family: var(--font-display); font-size: 2rem; font-weight: 500; color: var(--gold); line-height: 1; }
.about-stats span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ───────── Booking ───────── */
.section-book { background: var(--bg-deep); position: relative; }
.section-book::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(212, 184, 106, .08), transparent 70%);
  pointer-events: none;
}
.book-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; position: relative; z-index: 1; }
.book-pitch .section-tag { color: var(--gold); }
.book-lead { color: var(--muted); font-size: 1.05rem; margin: 18px 0 28px; }
.book-perks { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.book-perks li { color: var(--muted); padding-left: 24px; position: relative; font-size: .95rem; }
.book-perks li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: .82rem; top: 4px; }
.book-form {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 36px 32px; border-radius: 2px;
  display: flex; flex-direction: column; gap: 18px; position: relative;
}
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bf-group { display: flex; flex-direction: column; gap: 8px; }
.bf-group label {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.bf-group input, .bf-group select, .bf-group textarea {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .94rem;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--border-soft); border-radius: 2px;
  outline: none; transition: all .25s; appearance: none;
  font-family: var(--font-body);
}
.bf-group input:focus, .bf-group select:focus, .bf-group textarea:focus {
  border-color: var(--gold); background: var(--bg-deep);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Visible placeholder text on dark theme — without this iOS Safari renders
   placeholders so dim they look invisible (the date input appears "missing"
   until tapped, then suddenly shows up once it has a value). */
.bf-group input::placeholder,
.bf-group textarea::placeholder { color: rgba(247, 241, 225, .55); opacity: 1; }
.bf-group input::-webkit-input-placeholder { color: rgba(247, 241, 225, .55); }
/* Lock min-height on the date input + the flatpickr alt-input it generates,
   so the field doesn't collapse to 0 before flatpickr finishes attaching */
.bf-group #bf-date, .bf-group input.flatpickr-input, .bf-group input.flatpickr-alt-input { min-height: 48px; }

/* Medical pre-screening — appears when service is a neuromodulator or GLP-1 */
.bf-screening {
  background: rgba(212, 184, 106, .04);
  border: 1px solid rgba(212, 184, 106, .25);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 18px 20px;
  margin-top: 4px;
  animation: rhSlide .35s cubic-bezier(.4, 0, .2, 1);
}
.bf-screening-head { margin-bottom: 14px; }
.bf-screening-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.bf-screening-head span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.55; }
.bf-screening-list { display: flex; flex-direction: column; gap: 10px; }
.bf-screen-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}
.bf-screen-q.flagged { border-color: var(--red); background: rgba(220, 38, 38, .06); }
.bf-screen-q.flagged-yellow { border-color: rgba(234, 179, 8, .55); background: rgba(234, 179, 8, .06); }
.bf-screen-q-text { flex: 1; min-width: 0; font-size: .88rem; color: var(--ink); line-height: 1.5; }
.bf-screen-q-yn { display: flex; gap: 8px; flex-shrink: 0; }
.bf-screen-q-yn label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px;          /* iOS HIG tappable target */
  padding: 8px 16px;
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
.bf-screen-q-yn input { position: absolute; opacity: 0; pointer-events: none; }
.bf-screen-q-yn label:hover { border-color: var(--gold); color: var(--ink); }
.bf-screen-q-yn input:checked + label { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
/* Yes-on-blocked turns red so the visual matches the flag state, not gold */
.bf-screen-q.flagged .bf-screen-q-yn input:checked + label {
  background: var(--red); border-color: var(--red); color: #fff;
}
.bf-screen-q.flagged-yellow .bf-screen-q-yn input:checked + label {
  background: rgba(234, 179, 8, .9); border-color: rgba(234, 179, 8, .9); color: #1a1610;
}

.bf-screening-block, .bf-screening-yellow {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 4px;
  font-size: .88rem; line-height: 1.55;
}
.bf-screening-block {
  background: rgba(220, 38, 38, .1);
  border: 1px solid rgba(220, 38, 38, .55);
  color: #fca5a5;
}
.bf-screening-yellow {
  background: rgba(234, 179, 8, .08);
  border: 1px solid rgba(234, 179, 8, .55);
  color: #fde68a;
}
.bf-block-icon, .bf-yellow-icon { font-size: 1.2rem; flex-shrink: 0; }
.bf-screening-block strong, .bf-screening-yellow strong { display: block; margin-bottom: 4px; }
.bf-screening-block a { color: #fca5a5; text-decoration: underline; }

@media (max-width: 540px) {
  /* Stack vertically and let Yes/No fill the row 50/50 — easier to tap
     accurately than a right-aligned cluster, especially with 13 questions. */
  .bf-screening { padding: 14px 16px; }
  .bf-screen-q { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .bf-screen-q-yn { width: 100%; gap: 8px; }
  .bf-screen-q-yn label { flex: 1; min-width: 0; }
  .bf-screening-block, .bf-screening-yellow { padding: 12px 14px; font-size: .85rem; }
}

/* Respect users who prefer reduced motion — kills the slide-in. */
@media (prefers-reduced-motion: reduce) {
  .bf-screening { animation: none; }
}

/* The booking-form date field uses an overlay span as its "placeholder"
   because iOS Safari hides the native placeholder on readonly text inputs
   in certain states, especially after flatpickr attaches event handlers.
   The overlay is pointer-events: none so taps pass through to the input. */
.bf-date-wrap { position: relative; }
.bf-date-wrap input { position: relative; z-index: 1; background: rgba(212, 184, 106, .06) !important; }
.bf-date-overlay {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  color: rgba(212, 184, 106, .9);
  font-style: italic;
  /* Match the underlying input font-size so iOS doesn't zoom on focus */
  font-size: 16px;
  font-family: var(--font-body);
  letter-spacing: .01em;
  transition: opacity .15s;
  /* Prevent overlay text from being selectable / tappable above the input */
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  /* Truncate gracefully on very narrow screens */
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide the overlay only when the JS has explicitly marked the wrapper as
   "has-value" (script.js sets this in flatpickr's onChange). Don't try to
   detect via [value=""] attribute matching — flatpickr sets the .value
   PROPERTY but the attribute stays absent, so the negation selector
   wrongly matched at page load and hid the overlay before any input. */
.bf-date-wrap.has-value .bf-date-overlay { opacity: 0; }

/* Date / datetime / time inputs — keep the field visibly outlined on dark
   backgrounds so patients can SEE there's a tappable field without having
   to know it's there. iOS Safari otherwise renders empty date inputs with
   near-invisible default styling that vanishes against #000.
   #bf-date is included explicitly because it's type="text" (flatpickr-driven)
   so the [type="date"] selectors don't catch it. */
.bf-group #bf-date,
.bf-group input[type="date"],
.bf-group input[type="datetime-local"],
.bf-group input[type="time"],
.bf-group input.flatpickr-input,
.bf-group input.flatpickr-alt-input {
  background: rgba(212, 184, 106, .06);
  border: 1px solid rgba(212, 184, 106, .35);
  color: var(--ink);
  cursor: pointer;
}
.bf-group #bf-date:hover,
.bf-group input[type="date"]:hover,
.bf-group input[type="datetime-local"]:hover,
.bf-group input[type="time"]:hover,
.bf-group input.flatpickr-input:hover,
.bf-group input.flatpickr-alt-input:hover {
  background: rgba(212, 184, 106, .12);
  border-color: rgba(212, 184, 106, .55);
}
.bf-group #bf-date::placeholder,
.bf-group input[type="date"]::placeholder,
.bf-group input[type="datetime-local"]::placeholder,
.bf-group input[type="time"]::placeholder,
.bf-group input.flatpickr-input::placeholder,
.bf-group input.flatpickr-alt-input::placeholder {
  color: rgba(212, 184, 106, .9);
  font-style: italic;
  opacity: 1;
}
.bf-group input[type="date"]::-webkit-calendar-picker-indicator,
.bf-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.bf-group input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(73%) sepia(18%) saturate(2073%) hue-rotate(7deg) brightness(95%) contrast(82%);
  cursor: pointer;
}
/* iOS background-color reset on text inputs (Safari adds a default fill that
   hides our --bg-elev color) */
.bf-group input { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; }
.bf-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4b86a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer;
}
.bf-group textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.bf-fineprint { font-size: .76rem; color: rgba(247, 241, 225, .4); margin-top: -4px; }
.bf-hours-note { font-size: .76rem; color: var(--muted); line-height: 1.5; padding: 8px 12px; background: rgba(212, 184, 106, .04); border-left: 2px solid var(--gold); border-radius: 0 2px 2px 0; }

/* Slot grid */
.bf-slots { display: none; flex-wrap: wrap; gap: 8px; padding: 14px; margin-top: 8px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 2px; min-height: 60px; align-content: flex-start; }
.bf-slots.active { display: flex; }
.bf-slots-msg { width: 100%; text-align: center; color: var(--muted); font-size: .85rem; padding: 12px; font-style: italic; }
.bf-slots-msg.error { color: #fca5a5; font-style: normal; }
.bf-slots-day { width: 100%; font-family: var(--font-display); font-size: .72rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.bf-slot {
  flex: 0 0 calc(25% - 6px); min-width: 88px;
  padding: 10px 8px; text-align: center;
  background: var(--bg-card); border: 1.5px solid var(--border-soft);
  border-radius: 2px; color: #ffffff;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em;
  font-weight: 600;
  cursor: pointer; transition: all .2s; user-select: none;
}
.bf-slot:hover { border-color: var(--gold); background: rgba(212,184,106,.06); transform: translateY(-1px); }
.bf-slot.selected { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); box-shadow: 0 4px 14px rgba(212,184,106,.3); }
.bf-slot.unavailable {
  color: rgba(247,241,225,.25); cursor: not-allowed; text-decoration: line-through;
  background: var(--bg); border-style: dashed; border-color: rgba(247,241,225,.08);
}
.bf-slot.unavailable:hover { transform: none; border-color: rgba(247,241,225,.08); background: var(--bg); }
.bf-slot.unavailable[data-reason="too_soon"] { text-decoration: none; font-style: italic; }
@media (max-width: 540px) {
  .bf-slot { flex-basis: calc(33.33% - 6px); min-width: 0; }
}

/* Flatpickr — themed to match the booking form */
.flatpickr-calendar { background: var(--bg-card) !important; border: 1px solid var(--gold) !important; box-shadow: 0 16px 48px rgba(0,0,0,.6) !important; color: var(--ink) !important; font-family: 'Inter', sans-serif !important; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--gold) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { background: var(--bg-card) !important; color: var(--ink) !important; }
.flatpickr-monthDropdown-months option { background: var(--bg-card) !important; color: var(--ink) !important; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--gold) !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--gold) !important; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--gold) !important; fill: var(--gold) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gold-light) !important; }
.flatpickr-weekdays, span.flatpickr-weekday { background: var(--bg-card) !important; color: var(--gold) !important; font-family: 'Cinzel', serif !important; letter-spacing: .12em; }
.flatpickr-day { color: var(--ink) !important; border-radius: 2px !important; }
.flatpickr-day:hover { background: rgba(212,184,106,.18) !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--gold) !important; color: var(--bg-deep) !important; border-color: var(--gold) !important; }
.flatpickr-day.today { border-color: var(--gold) !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: rgba(247,241,225,.25) !important; }
.flatpickr-day.flatpickr-disabled { background: rgba(220,38,38,.06) !important; cursor: not-allowed; }
.flatpickr-time { background: var(--bg-card) !important; border-top: 1px solid var(--gold) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--ink) !important; background: var(--bg-card) !important; }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: var(--bg-elev) !important; }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--gold) !important; }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--gold) !important; }
.flatpickr-time .flatpickr-time-separator { color: var(--gold) !important; }

/* PWA install banner (iOS Safari only) */
.pwa-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(10, 9, 7, .96);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  color: var(--ink);
  animation: pwaIn .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pwaIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-banner.pwa-banner-leaving {
  animation: pwaOut .25s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes pwaOut {
  to { opacity: 0; transform: translateY(20px); }
}
.pwa-banner-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--bg-deep);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.pwa-banner-text {
  flex: 1; line-height: 1.4;
}
.pwa-banner-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 2px;
}
.pwa-banner-text span {
  display: block;
  font-size: .76rem;
  color: var(--muted);
}
.pwa-banner-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  border-radius: 50%;
  transition: all .2s;
}
.pwa-banner-close:hover { background: var(--bg-elev); color: var(--ink); }

/* Welcome-back banner */
.welcome-back {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(212, 184, 106, .14), rgba(212, 184, 106, .04));
  border: 1px solid var(--gold);
  border-radius: 2px;
  animation: wbSlide .35s cubic-bezier(.4,0,.2,1);
}
@keyframes wbSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.wb-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
}
.wb-text {
  flex: 1; color: var(--ink); font-size: .94rem; line-height: 1.5;
}
.wb-name {
  font-family: var(--font-display);
  letter-spacing: .04em; color: var(--gold); font-weight: 500;
}
.wb-clear {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-soft); padding: 6px 12px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: all .2s; border-radius: 2px;
}
.wb-clear:hover { background: var(--bg-elev); color: var(--ink); border-color: var(--gold); }
@media (max-width: 540px) {
  .welcome-back { flex-wrap: wrap; }
  .wb-text { flex-basis: 100%; }
}

/* "Returning patient" simplified-form hint */
.returning-hint {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(212, 184, 106, .08);
  border: 1px solid var(--gold);
  border-radius: 2px;
  animation: rhSlide .35s cubic-bezier(.4,0,.2,1);
}
@keyframes rhSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.rh-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
}
.rh-body { display: flex; flex-direction: column; gap: 2px; }
.rh-body strong {
  font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.rh-body span { font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* Hidden in returning-patient mode */
.book-form.is-returning .new-only { display: none; }

/* Patient-type toggle */
.patient-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.pt-option { cursor: pointer; }
.pt-option input { position: absolute; opacity: 0; pointer-events: none; }
.pt-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1.5px solid var(--border-soft);
  border-radius: 2px;
  transition: all .25s;
}
.pt-option:hover .pt-card { border-color: rgba(212, 184, 106, .5); }
.pt-option input:checked ~ .pt-card {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(212, 184, 106, .12), rgba(212, 184, 106, .03));
  box-shadow: 0 0 0 2px rgba(212, 184, 106, .15);
}
.pt-icon {
  font-family: var(--font-display);
  font-size: 1.1rem; color: var(--gold);
  letter-spacing: .12em;
}
.pt-label {
  font-family: var(--font-display);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.pt-sub {
  font-size: .76rem; color: var(--muted);
}
@media (max-width: 540px) {
  .patient-type { grid-template-columns: 1fr; }
}

/* Bloodwork upload block */
.bloodwork-block { animation: bwSlide .35s cubic-bezier(.4,0,.2,1); }
@keyframes bwSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.bw-drop {
  display: block; cursor: pointer;
  padding: 16px; text-align: center;
  background: rgba(212, 184, 106, .04);
  border: 1.5px dashed var(--border);
  border-radius: 2px;
  transition: all .25s;
}
.bw-drop:hover, .bw-drop.drag { border-color: var(--gold); background: rgba(212, 184, 106, .08); }
.bw-drop strong {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.bw-drop span {
  display: block;
  font-size: .76rem; color: var(--muted);
}
.bw-picked {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(212, 184, 106, .08);
  border: 1px solid var(--gold);
  border-radius: 2px;
}
.bw-icon { font-size: 1.4rem; }
.bw-meta { flex: 1; min-width: 0; }
.bw-name { color: var(--ink); font-size: .92rem; font-weight: 500; word-break: break-all; }
.bw-size { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.bw-remove {
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--muted); width: 28px; height: 28px;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: all .2s;
}
.bw-remove:hover { background: var(--gold); color: var(--bg-deep); border-color: var(--gold); }
.bw-fineprint {
  font-size: .72rem; color: rgba(247, 241, 225, .45);
  margin-top: 8px; line-height: 1.5;
}

/* Consent block */
.consent-block {
  background: rgba(212, 184, 106, .04);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 18px 20px;
}
.consent-head {
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-soft);
}
.consent-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.consent-list li {
  position: relative; padding-left: 18px;
  font-size: .82rem; line-height: 1.6; color: var(--muted);
}
.consent-list li::before {
  content: '✦'; position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: .62rem; line-height: 1.8;
}
.consent-list li strong { color: var(--ink); font-weight: 500; }
.consent-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--border-soft); border-radius: 2px;
  cursor: pointer; transition: all .25s;
}
.consent-check:hover { border-color: var(--gold); background: rgba(212, 184, 106, .04); }
.consent-check input[type="checkbox"] {
  flex-shrink: 0; appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: 2px;
  border: 1.5px solid var(--gold); border-radius: 2px;
  background: transparent; cursor: pointer;
  transition: all .2s; position: relative;
}
.consent-check input[type="checkbox"]:checked { background: var(--gold); }
.consent-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--bg-deep); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-check span {
  font-size: .9rem; color: var(--ink); line-height: 1.5;
  user-select: none;
}
.consent-check em { color: var(--gold); font-style: normal; font-size: .82rem; letter-spacing: .04em; }

/* Visit map */
.visit-map {
  display: block; width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 2px; overflow: hidden;
  background: var(--bg-card);
  text-align: left;
}
.visit-map iframe {
  display: block; width: 100% !important; height: 360px;
  border: 0; filter: grayscale(.45) contrast(1.05) brightness(.9);
  transition: filter .35s;
}
.visit-map:hover iframe { filter: grayscale(0) contrast(1) brightness(1); }
.visit-map-cta {
  display: inline-flex; align-items: center;
  margin: 0 0 28px;
  background: var(--gold); color: var(--bg-deep);
  padding: 12px 22px; border-radius: 2px;
  font-family: var(--font-body); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  transition: all .25s;
}
.visit-map-cta:hover { background: var(--gold-light); transform: translateY(-2px); color: var(--bg-deep); }

.book-success {
  grid-column: 1 / -1;
  background: var(--bg-card); border: 1px solid var(--gold);
  padding: 56px 40px; border-radius: 2px; text-align: center;
}
.bs-icon { font-size: 2rem; color: var(--gold); margin-bottom: 14px; letter-spacing: .2em; }
.book-success h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.book-success p { color: var(--muted); max-width: 480px; margin: 0 auto; }

/* ───────── Visit ───────── */
.section-visit { background: var(--bg-soft); border-top: 1px solid var(--border-soft); padding: 80px 0; }
.visit-content { text-align: center; max-width: 700px; margin: 0 auto; }
.visit-lead { color: var(--muted); font-size: 1.05rem; margin: 16px 0 36px; }
.visit-info {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  text-align: left; padding: 32px; background: var(--bg-card);
  border: 1px solid var(--border-soft); border-radius: 2px;
}
.visit-info b {
  display: block; font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 8px; font-weight: 500;
}
.visit-info span, .visit-info a { color: var(--ink); font-size: .98rem; line-height: 1.7; }
.visit-info a:hover { color: var(--gold); }

/* ───────── Footer ───────── */
.footer { background: var(--bg-deep); border-top: 1px solid var(--border-soft); padding-top: 56px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border-soft); }
.footer-mark { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .14em; color: var(--gold); margin-bottom: 12px; }
.footer-brand p { color: var(--muted); font-size: .92rem; max-width: 360px; line-height: 1.7; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-cols h4 {
  font-family: var(--font-display); font-size: .76rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px; font-weight: 500;
}
.footer-cols a { display: block; padding: 4px 0; color: var(--muted); font-size: .9rem; transition: color .2s; }
.footer-cols a:hover { color: var(--gold); }
.footer-bottom {
  max-width: 1180px; margin: 0 auto; padding: 22px 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .76rem; color: rgba(247, 241, 225, .35);
}
.footer-credit {
  max-width: 1180px; margin: 0 auto; padding: 0 28px 22px;
  font-family: var(--font-display);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247, 241, 225, .18);
  text-align: center;
}
.footer-credit span { color: rgba(212, 184, 106, .55); }

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .glp-layout { grid-template-columns: 1fr; gap: 40px; }
  .glp-sidecard { position: static; }
  .book-layout { grid-template-columns: 1fr; gap: 36px; }
  .about-layout { grid-template-columns: 1fr; gap: 40px; max-width: 620px; }
  .about-portrait { max-width: 420px; margin: 0 auto; width: 100%; }
  .about-content { max-width: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  /* Section + container rhythm */
  .section { padding: 64px 0; }
  .container { padding: 0 18px; }
  section[id] { scroll-margin-top: 72px; }

  /* Navbar */
  .nav-inner { padding: 14px 18px; gap: 14px; }
  .brand-text { font-size: .82rem; }
  .brand-mark { width: 32px; height: 32px; font-size: 1.4rem; }

  /* Hero */
  .hero { padding: 96px 18px 56px; min-height: auto; }
  .hero-eyebrow { font-size: .68rem; letter-spacing: .28em; margin-bottom: 18px; }
  .hero-logo { width: 92%; max-width: 380px; margin-bottom: 22px; }
  .hero-title { margin-bottom: 16px; }
  .hero-title em { font-size: 1.15em; }
  .hero-lead { font-size: .98rem; margin-bottom: 28px; padding: 0 6px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 36px; }
  .hero-actions .btn { width: 100%; padding: 16px; }
  .hero-trust { gap: 10px; flex-direction: column; align-items: center; padding-top: 24px; font-size: .72rem; }

  /* Services */
  .section-head { margin-bottom: 40px; }
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc { padding: 28px 22px; }
  .svc h3 { font-size: 1.18rem; }

  /* GLP */
  .glp-tiers { grid-template-columns: 1fr; gap: 14px; }
  .glp-tier { padding: 22px 20px; }
  .glp-tier-feat-tag { left: 18px; }
  .glp-perks li strong { font-size: .98rem; }
  .glp-sidecard { padding: 24px 22px; }

  /* About */
  .about-layout { gap: 32px; }
  .about-portrait { max-width: 320px; }
  .about-portrait::before { inset: -10px -10px 10px 10px; }
  .about-portrait-tag { bottom: 12px; left: 12px; padding: 6px 12px; font-size: .64rem; letter-spacing: .2em; }
  .about-credentials { padding: 10px 14px; gap: 8px; }
  .cred-line, .cred-soft { font-size: .76rem; letter-spacing: .14em; }
  .about-body { font-size: .96rem; line-height: 1.8; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; padding-top: 24px; }
  .about-stats b { font-size: 1.5rem; }
  .about-stats span { font-size: .62rem; letter-spacing: .1em; }

  /* Form — bump inputs to 16px to suppress iOS zoom-on-focus */
  .book-form { padding: 26px 20px; gap: 14px; }
  .bf-grid { grid-template-columns: 1fr; gap: 12px; }
  .bf-group input, .bf-group select, .bf-group textarea { font-size: 16px; padding: 12px 14px; }

  /* Visit */
  .visit-info { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .visit-info span, .visit-info a { font-size: .92rem; }
  .visit-map iframe { height: 280px; }
  .visit-map-cta { bottom: 10px; right: 10px; padding: 8px 14px; font-size: .68rem; }
  .consent-block { padding: 16px; }
  .consent-list li { font-size: .8rem; }

  /* Footer */
  .footer { padding-top: 44px; }
  .footer-inner { padding-bottom: 36px; gap: 28px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; padding: 18px; }
}

/* Tiny phones (≤380px — iPhone SE, older small Androids) */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero { padding: 88px 14px 48px; }
  .hero-logo { max-width: 320px; }
  .hero-eyebrow { font-size: .62rem; letter-spacing: .22em; }
  .hero-trust { gap: 8px; font-size: .66rem; }
  .nav-inner { padding: 12px 14px; gap: 10px; }
  .brand-text { display: none; }
  .svc { padding: 22px 18px; }
  .svc-meta { font-size: .68rem; }
  .glp-tier-price { font-size: 1.7rem; }
  .about-stats { grid-template-columns: 1fr; }
  .about-stats b { font-size: 2rem; }
  .footer-cols { grid-template-columns: 1fr; gap: 18px; }
  .book-form { padding: 22px 16px; }
}

/* Landscape phones — keep hero compact so the CTA is visible */
@media (max-height: 600px) and (max-width: 980px) {
  .hero { min-height: auto; padding-top: 84px; padding-bottom: 40px; }
  .hero-logo { max-width: 280px; }
  .hero-trust { padding-top: 18px; }
}

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