/* ============================================================
   TPL — Mobile layer.  EVERYTHING here is inside a max-width
   media query (or hidden-by-default), so desktop is never changed.
   Loaded LAST so it wins the cascade on mobile only.
   ============================================================ */

/* injected components hidden on desktop by default */
.tplm-burger,.tplm-overlay,.tplm-drawer,.tplm-bar{display:none}

/* ---------- NAV: swap to hamburger on tablet & mobile ---------- */
@media (max-width:1024px){
  header .nav-center,
  header .nav-c,
  header .nav-right,
  header .nav-cta,
  header .nav-ghost,
  header .nav-pill,
  header .nav-book,
  header .nav-portal,
  header .burger{ display:none !important; }
  .tplm-burger{ display:flex !important; }
}

/* burger — lives inside .nav-in as a flex child, so it's centered & aligned with the logo */
.tplm-burger{
  flex:none; order:99; width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0; border-radius:12px; cursor:pointer; background:#0A0A0C; border:0;
}
.tplm-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; }
/* fallback if there is no nav bar to host it (rare) */
.tplm-burger.tplm-float{ position:fixed; top:calc(var(--topbar-h,40px) + 13px); right:16px; z-index:1200; box-shadow:0 6px 18px -8px rgba(0,0,0,.5); }

.tplm-overlay{position:fixed;inset:0;z-index:1190;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s ease}
.tplm-overlay.show{opacity:1}
.tplm-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:1200;background:#fff;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .38s cubic-bezier(.16,1,.3,1);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-24px 0 70px -34px rgba(0,0,0,.55);
}
.tplm-drawer.open{transform:none}
.tplm-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line,rgba(0,0,0,.1));position:sticky;top:0;background:#fff}
.tplm-brand{font-family:'Times New Roman',Times,serif;font-size:17px;font-weight:500}
.tplm-close{width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#0A0A0C;display:grid;place-items:center;margin-right:-8px}
.tplm-nav{padding:10px 22px 4px;display:flex;flex-direction:column}
.tplm-nav a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:16px;font-weight:600;color:#0A0A0C;border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.tplm-nav a.tplm-ind{font-weight:400;font-size:14.5px;color:var(--muted,#5C6675);padding-left:16px}
.tplm-group{font-family:'Times New Roman',Times,serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2,#8A93A1);margin:18px 0 2px}
.tplm-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:18px 22px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line,rgba(0,0,0,.1));background:#fff}
.tplm-portal,.tplm-book{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:100px;font-weight:600;font-size:15px}
.tplm-portal{border:1px solid var(--line-2,rgba(0,0,0,.16));color:#0A0A0C}
.tplm-book{background:#0A0A0C;color:#fff}

/* ---------- sticky bottom Call / Book bar (phones) ---------- */
.tplm-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--line,rgba(0,0,0,.1));
}
.tplm-bar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:100px;font-weight:600;font-size:15px;text-decoration:none}
.tplm-bar .tb-call{background:#fff;color:#0A0A0C;border:1px solid var(--line-2,rgba(0,0,0,.16))}
.tplm-bar .tb-book{background:#0A0A0C;color:#fff}
@media (max-width:760px){
  .tplm-bar{display:flex}
  body{padding-bottom:76px}
  .mobile-book{display:none !important}   /* hide homepage's old bar (superseded) */
  .greviews{display:none !important}       /* google-reviews badge would collide with the bar */
}

/* ============================================================
   LAYOUT FIXES  (mobile only)
   ============================================================ */

/* comfortable page gutter — also fixes sections that zeroed .wrap side padding */
@media (max-width:600px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .nav-in{ padding-left:20px; padding-right:20px; }
  .statement{ padding-left:20px; padding-right:20px; }
  .sec .lead,.hero p{ max-width:100%; }
}

@media (max-width:760px){
  /* trust logos: fit inside their cells, never overflow (override inline heights) */
  .logo-cloud{ grid-template-columns:repeat(3,1fr) !important; gap:22px 14px; align-items:center; }
  .logo-cloud .lg{ min-width:0; }
  .logo-cloud .lg img{ height:auto !important; max-height:24px !important; max-width:100%; width:auto; }

  /* Step-Inside tour: stack the room tabs, image and caption (no overlap) */
  .tour{ display:block; min-height:0; padding:22px; }
  .tour-rooms{ position:static; max-width:100%; margin-bottom:16px; }
  .tour-body{ max-width:100%; }

  /* physician cards: 3:4 headshots, full head visible */
  .pcard .pimg{ aspect-ratio:3/4; }
  .pcard .pimg img{ object-position:center top; }

  /* statement headshots — keep them perfectly circular (flex must not squish them) */
  .avatars{ flex:none; }
  .avatars .av{ flex:0 0 44px; width:44px; height:44px; }

  /* Technology carousel — contain it so it can't push the page sideways */
  .tech-rail{ padding-left:20px; padding-right:20px; scroll-padding-left:20px; overscroll-behavior-x:contain; }
  .tech-rail .tcard{ flex-basis:82vw; height:440px; }

  /* keep any media inside its container */
  img,video{ max-width:100%; }
  *{ min-width:0; }
}
/* hard stop against any horizontal page scroll on phones */
@media (max-width:760px){ html,body{ overflow-x:hidden; max-width:100%; } }

/* reduce oversized hero text on the smallest phones */
@media (max-width:430px){
  .hero h1{ font-size:clamp(30px,8.5vw,40px); line-height:1.05; }
  .statement h2{ font-size:clamp(26px,8vw,38px); }
}

/* leadership flip cards: make the headshot a true 3:4 on phones (keeps tap-to-flip) */
@media (max-width:600px){
  .lflip{ height:calc((100vw - 40px) * 1.333 + 118px); }
}

/* ---------- drawer: collapsible groups (roll sub-pages up under Specialties / About) ---------- */
.tplm-acc{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;font-family:inherit;
  min-height:48px;padding:6px 0;font-size:16px;font-weight:600;color:#0A0A0C;
  border-bottom:1px solid var(--line,rgba(0,0,0,.08));
}
.tplm-acc .tplm-chev{transition:transform .3s var(--ease,ease);font-size:20px;font-weight:400;color:var(--muted-2,#8A93A1)}
.tplm-acc.open .tplm-chev{transform:rotate(45deg)}
.tplm-sub{overflow:hidden;max-height:0;transition:max-height .35s var(--ease,ease)}
.tplm-sub.open{max-height:640px}
.tplm-sub a{display:flex;align-items:center;min-height:44px;padding:5px 0 5px 4px;font-size:15px;font-weight:500;color:var(--ink,#0A0A0C);border-bottom:1px solid var(--line,rgba(0,0,0,.06))}
.tplm-sub a.tplm-ind{font-weight:400;font-size:14px;color:var(--muted,#5C6675);padding-left:18px}
.tplm-sub a:last-child{border-bottom:0}

/* ============================================================
   TPL — CONVERSION LAYER (PPC launch, Aug 2026)
   Tap-to-call in the header + brand-bronze primary CTAs.
   Loaded last (all pages) so these win the cascade on every breakpoint.
   ============================================================ */
:root{ --tpl-bronze:linear-gradient(118deg,#B98D66 0%,#7C5538 52%,#5F3C22 100%); }

/* Desktop header tap-to-call — injected into .nav-cta/.nav-right, so it inherits their
   display:none on mobile (where the sticky bottom bar handles calling). */
.tpl-callbtn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;order:-1;
  padding:10px 17px;border-radius:100px;font-size:14px;font-weight:700;letter-spacing:.01em;
  color:#5F3C22;border:1.5px solid #B98D66;background:rgba(185,141,102,.10);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.tpl-callbtn svg{flex:none}
.tpl-callbtn:hover{background:var(--tpl-bronze);color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(95,60,34,.7)}
/* readable over a transparent hero nav (index, before scroll) */
header.nav:not(.solid) .tpl-callbtn{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.10)}
header.nav:not(.solid) .tpl-callbtn:hover{background:#fff;color:#5F3C22;border-color:#fff}

/* Primary "Book" CTAs → brand bronze, sitewide */
.nav-book,.nav-pill,.tplm-book,.tplm-bar .tb-book,.btn.btn-dark{
  background:var(--tpl-bronze) !important;color:#fff !important;border-color:transparent !important;
}
.btn.btn-dark .ico{background:#fff !important;color:#5F3C22 !important}

/* Sticky mobile bar: Call = bronze-outline pill w/ number; Book = bronze-filled */
.tplm-bar .tb-call{color:#5F3C22 !important;border:1.5px solid #B98D66 !important;background:#fff !important;font-weight:700;gap:8px}
.tplm-bar .tb-call svg{flex:none}
/* Drawer call link (bronze outline) */
.tplm-call{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:100px;font-weight:700;font-size:15px;color:#5F3C22;border:1.5px solid #B98D66;background:rgba(185,141,102,.08)}