/* =====================================================================
   /v2 — black & white theme.
   Overrides the warm gold/green palette to a clean monochrome look,
   reshapes the hero image for the landscape team photo, and styles the
   simple 5-field consultation form. Loaded AFTER styles.css so these
   token overrides win. Only affects /v2 (the page links this file).
   ===================================================================== */
:root {
  --forest:      #0a0a0a;
  --forest-2:    #1a1a1a;
  --ink:         #0d0d0d;   /* primary text → near-black */
  --muted:       #585858;   /* secondary text */
  --muted-light: #9a9a9a;

  --accent:      #111111;   /* buttons / emphasis → black */
  --accent-deep: #000000;
  --accent-soft: #ececec;
  --accent-tint: #f5f5f5;

  --cream:   #ffffff;       /* page background → white */
  --cream-2: #f6f6f6;
  --sand:    #ededed;
  --paper:   #ffffff;
  --line:    rgba(0,0,0,0.16);
  --line-soft: rgba(0,0,0,0.08);

  /* Neutral shadows (the base ones are tinted green) */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04);
  --sh-md: 0 4px 14px rgba(0,0,0,0.08), 0 14px 40px rgba(0,0,0,0.06);
  --sh-lg: 0 14px 36px rgba(0,0,0,0.12), 0 30px 80px rgba(0,0,0,0.10);
}

/* Tagline a touch muted for refinement */
.hero-tag { color: #2a2a2a; }
.hero h1 .em { color: #111; }

/* ---- "Consultations open" status pill (sits above the headline) --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  padding: .55rem 1.1rem;
  background: #0d0d0d;
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.status-pill .dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #22c55e;
}

/* ---- Hero: landscape team photo (replaces the portrait arch) ------ */
.hero-portrait { margin: 0; }
.hero-portrait .frame {
  border-radius: 16px;          /* clean rectangle */
  aspect-ratio: 3 / 2;          /* matches the cover photo */
  background: #f0f0f0;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--sh-lg);
}
.hero-portrait .frame img { object-position: 50% 30%; }
.hero-portrait .seal { display: none; }
.hero-portrait .badge { background: #fff; border: 1px solid rgba(0,0,0,0.10); }
.hero-portrait .badge .b-name { color: #0d0d0d; }
.hero-portrait .badge .b-sub { color: #111; }

/* Credentials are now a logo-strip image (Double Board-Certified · Yale · Vanderbilt) */
.hero-trust { display: block; }
.hero-trust .cred-img { width: 100%; max-width: 400px; height: auto; display: block; margin-left: auto; margin-right: auto; }

/* ----- Desktop: value prop + actions stacked on the left, photo right ----- */
@media (min-width: 901px) {
  /* 100vh flex-centered; trimmed padding so the taller photo still fits
     one screen on common 768px-tall laptops (clears the fixed nav). */
  .hero { min-height: 100vh; display: flex; align-items: center; padding: 88px 0 40px; }
  .hero h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.1; }
  .hero-grid {
    width: 100%;
    grid-template-columns: 1fr 1.12fr;
    grid-template-areas: "intro image" "actions image";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 1.9rem;
    align-items: center;
  }
  .hero-intro    { grid-area: intro; }
  .hero-actions  { grid-area: actions; }
  .hero-portrait { grid-area: image; align-self: center; }
  /* Desktop uses the tighter near-square photo — match the frame to it
     (no crop) so the two doctors read larger than the old wide shot. */
  .hero-portrait { max-width: 560px; margin-left: auto; }
  .hero-portrait .frame { aspect-ratio: 1008 / 1066; }
  .hero-portrait .frame img { object-position: 50% 40%; }
  .hero-portrait .badge { left: -18px; bottom: -18px; }
}

/* ----- Mobile: tight, conversion-first — headline → photo → CTA → trust ----- */
@media (max-width: 900px) {
  /* Proper, consistent side gutters — sections.css zeroes the hero's
     horizontal padding, so set it here and align the nav to match. */
  .nav { padding-left: 22px; padding-right: 22px; }
  /* Nav (mobile): brand only — phone + CTA are hidden here, and the
     brand is centered and a touch larger. Desktop keeps all three.
     (.solid bumps specificity over the base nav rules that sit later
     in the file.) */
  .nav.solid.nav-v2 { display: flex; justify-content: center; }
  .nav.solid.nav-v2 .nav-left,
  .nav.solid.nav-v2 .nav-right { display: none; }
  .nav.solid.nav-v2 .brand { font-size: 1.3rem; }
  .hero { min-height: 0; padding: 86px 22px 44px; display: block; }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.45rem; }
  .hero h1 { font-size: clamp(1.55rem, 7.6vw, 1.95rem); margin-bottom: .8rem; }
  .hero .lede { margin-bottom: 0; max-width: none; }
  .hero-portrait { max-width: 100%; }
  /* Mobile now shows the same near-square photo as desktop, a touch taller. */
  .hero-portrait .frame { aspect-ratio: 1 / 1.12; }
  .hero-portrait .badge { left: 12px; bottom: 12px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: .7rem; margin: 0; }
  .hero-cta .btn { width: 100%; }
  /* Credentials logo strip — full content width on mobile */
  .hero-trust { margin-top: 1.35rem; padding-top: 1.3rem; }
  .hero-trust .cred-img { max-width: none; }
  /* Smaller status pill on mobile */
  .status-pill { font-size: .68rem; padding: .42rem .85rem; gap: .45rem; margin-bottom: 1rem; }
  .status-pill .dot { width: 8px; height: 8px; }
}

/* ---- Buttons: solid black / black outline ------------------------- */
.btn-primary { background: #111; box-shadow: none; }
.btn-primary:hover { background: #000; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5); }
.btn-ghost { border-color: rgba(0,0,0,0.42); color: #111; }
.btn-ghost:hover { border-color: #000; background: rgba(0,0,0,0.04); }

/* ---- Nav: white, monochrome --------------------------------------- */
.nav.solid { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.10); }
.nav .brand small { color: #111; font-size: .48rem; letter-spacing: .19em; }
.nav-phone svg { color: #111; }
.hero-trust .ht b { color: #0d0d0d; }

/* ---- Nav layout: phone (left) · brand (center) · CTA (right) ------- */
.nav.nav-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}
.nav.nav-v2 .nav-left  { justify-self: start;  display: flex; align-items: center; min-width: 0; }
.nav.nav-v2 .brand     { justify-self: center; text-align: center; white-space: nowrap; }
.nav.nav-v2 .nav-right { justify-self: end;    display: flex; align-items: center; }
/* Desktop shows the full CTA; the compact label is mobile-only. */
.nav.nav-v2 .cta-short { display: none; }

/* =====================================================================
   Consultation form modal (the new /v2 "Book a Consultation")
   ===================================================================== */
.cf-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.cf-overlay.open { opacity: 1; pointer-events: auto; }

.cf-card {
  background: #fff; width: 100%; max-width: 500px;
  border-radius: 18px; padding: 2.1rem 2rem 1.9rem;
  box-shadow: 0 30px 90px rgba(0,0,0,0.40);
  max-height: calc(100vh - 40px); overflow-y: auto;
  transform: translateY(14px) scale(.985);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.cf-overlay.open .cf-card { transform: none; }

.cf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cf-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.1rem); line-height: 1.05; margin-top: .35rem; }
.cf-sub { color: var(--muted); font-size: .96rem; line-height: 1.55; margin: .55rem 0 1.5rem; }

.cf-close {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14); background: #fff; color: #111;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.cf-close:hover { background: #f3f3f3; border-color: rgba(0,0,0,0.3); }

.cf-field { margin-bottom: 1.05rem; }
.cf-field label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #111; margin-bottom: .45rem;
}
.cf-field label .opt { font-weight: 600; color: var(--muted-light); letter-spacing: .02em; }
.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: #111;
  background: #fff; border: 1px solid rgba(0,0,0,0.22); border-radius: 11px;
  padding: .82rem .95rem; transition: border-color .15s, box-shadow .15s;
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #9a9a9a; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.cf-field textarea { resize: vertical; min-height: 90px; }
.cf-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.cf-err { color: #b00020; font-size: .82rem; margin-top: .35rem; }
.cf-submit { width: 100%; margin-top: .5rem; }
.cf-fine { text-align: center; font-size: .78rem; color: var(--muted-light); margin: .9rem 0 0; }

/* success state */
.cf-success { text-align: center; padding: 1.2rem .4rem .6rem; }
.cf-check {
  width: 64px; height: 64px; border-radius: 999px; margin: 0 auto 1.1rem;
  background: #111; color: #fff; display: grid; place-items: center;
}
.cf-success h2 { font-size: 1.9rem; margin-bottom: .2rem; }
.cf-success .cf-sub { margin: .6rem auto 1.4rem; max-width: 34ch; }