/* ──────────────────────────────────────────────────────────
   AHDD — 2026-04-19 revisions override stylesheet
   Applied on every page. Original styles preserved above.
   Order of concerns:
     1. Nav: enlarge logo, Services dropdown, mobile dropdown
     2. Home: hide hero pills, hide in-house pill, 1-col virtual tour,
              section padding reductions, mobile hero fix
     3. About: remove gradient overlay, title below hero, round team photos
     4. Technology: hide stats bar, hide hero badge pill, paperless video fix,
                    hide redundant doc+stat section, padding reductions
     5. Sitewide mobile friendliness (375–768px)
   ────────────────────────────────────────────────────────── */

/* 1 — NAV: logo enlarged, Services dropdown ─────────────── */
/* 2026-04-20 v2: nav bar restored to the original 64px. The logo is
   intentionally LARGER than the bar — `overflow:visible` lets it extend
   above and below the nav so the mark reads as the hero element while
   the bar itself stays slim. */
#nav{height:64px !important}
#nav.scrolled{height:64px !important}
#nav .nav-wrap{height:64px !important;overflow:visible !important}
#nav .nav-logo{display:flex;align-items:center;overflow:visible;z-index:2}
#nav .nav-logo img{height:100px !important;width:auto;max-height:none !important}
@media(min-width:1200px){ #nav .nav-logo img{height:120px !important} }
@media(max-width:1024px){ #nav .nav-logo img{height:88px !important} }
/* DISABLED 2026-04-26 — superseded by section 22 width-based sizing
@media(max-width:768px){  #nav .nav-logo img{height:72px !important} }
@media(max-width:480px){  #nav .nav-logo img{height:60px !important} }
*/
.hero-inner{padding-top:64px !important}

/* 2026-04-20: HOME-ONLY translucent glass nav. Other pages keep the
   solid off-white bar. Target home via `body:has(#hero)` — #hero is
   unique to index.html. When the user scrolls, bump opacity so nav
   text stays legible against arbitrary page content. */
body:has(#hero) #nav{
  background:rgba(255,255,255,0.55) !important;
  backdrop-filter:blur(18px) saturate(1.8) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.8) !important;
  border-bottom:1px solid rgba(29,62,92,0.06) !important;
}
body:has(#hero) #nav.scrolled{
  background:rgba(255,255,255,0.82) !important;
  box-shadow:0 2px 20px rgba(29,62,92,0.10) !important;
}

/* Services dropdown (desktop) — injected via JS */
.nav-links li.has-dropdown{position:relative}
.nav-links li.has-dropdown > a::after{
  content:'';display:inline-block;width:6px;height:6px;margin-left:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;vertical-align:middle;
}
.nav-links li.has-dropdown:hover > a::after,
.nav-links li.has-dropdown.open > a::after{transform:rotate(-135deg) translateY(-1px)}
.nav-dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(255,255,255,.96);backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border:1px solid rgba(15,30,51,.08);border-radius:14px;
  box-shadow:0 12px 40px rgba(15,30,51,.12);
  padding:10px;min-width:260px;list-style:none;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:1200;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown,
.nav-links li.has-dropdown.open .nav-dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);
}
.nav-dropdown li{list-style:none}
.nav-dropdown a{
  display:block;padding:10px 14px;font-size:13px;color:#1A2D4A;
  border-radius:8px;transition:background .15s,color .15s;
  font-weight:500;letter-spacing:-.005em;white-space:nowrap;
}
.nav-dropdown a::after{display:none !important}
.nav-dropdown a:hover{background:rgba(15,30,51,.06);color:#0F1E33}

/* Mobile nav submenu (collapsible) */
#mobile-nav .mob-sub-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;font-size:15px;color:#0F1E33;width:100%;
  border-bottom:1px solid rgba(15,30,51,.04);background:none;border-top:none;
  border-left:none;border-right:none;cursor:pointer;font-family:inherit;
}
#mobile-nav .mob-sub-toggle::after{
  content:'';width:8px;height:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
#mobile-nav .mob-sub-toggle.open::after{transform:rotate(-135deg)}
#mobile-nav .mob-sub{
  display:none;padding-left:16px;margin-bottom:4px;
  border-bottom:1px solid rgba(15,30,51,.04);
}
#mobile-nav .mob-sub.open{display:block}
#mobile-nav .mob-sub a{padding:11px 0;font-size:14px;color:#3B4A5C;border-bottom:none}

/* 2 — HOME ──────────────────────────────────────────────── */

/* Hide hero pills entirely (preserved in markup) */
body .hero-pills{display:none !important}

/* Hide the in-house pill in services header */
#services .svc-norefs{display:none !important}

/* Reduce dead space between home sections */
#services{padding:52px 0 !important}
#doctors .doc-text{padding-top:48px !important;padding-bottom:48px !important}
#tech{padding:52px 0 !important}
#virtual-tour{padding:52px 0 !important}
#team{padding:52px 0 !important}
#reviews{padding:48px 0 56px !important}
#ins{padding:48px 0 40px !important}
#cta{padding:52px 0 !important}
#instagram{padding:48px 0 52px !important}
.vt-header{margin-bottom:36px !important}
.svc-header{margin-bottom:32px !important}
.tech-hd{margin-bottom:36px !important}
.team-hd{margin-bottom:36px !important}
.team-docs{margin-bottom:36px !important}

/* Virtual tour in CTA: 1-column stacked */
#cta .cta-split{grid-template-columns:1fr !important;gap:36px !important}
#cta .cta-left,#cta .cta-right{max-width:840px;margin:0 auto;width:100%}
#cta .cta-sub{max-width:100% !important}
#cta .cta-tour-wrap{padding-bottom:56.25% !important}

/* Mobile hero — 2026-04-20 v3: the source photo is wide landscape
   (both doctors side-by-side). With `object-fit:cover` on a portrait
   phone the browser scales to fill height and crops the sides, cutting
   off one or both doctors. Fix: `contain` the full photo on a navy
   backdrop so no one is cropped; push the overlay text into the navy
   area below the image. */
@media (max-width:768px){
  #hero{
    height:auto !important;
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    background:#1D3E5C !important; /* navy brand fill under/around the photo */
  }
  #hero-img{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    aspect-ratio:3 / 2 !important;    /* common landscape; contain guarantees no crop */
    object-fit:contain !important;    /* show the WHOLE photo; no side cropping */
    object-position:center center !important;
    background:#1D3E5C !important;
    display:block !important;
  }
  #hero-overlay{
    display:none !important;           /* dark gradient no longer needed */
  }
  .hero-inner{
    position:relative !important;
    inset:auto !important;
    padding:28px 20px 36px !important; /* text sits on navy, below the photo */
    display:block !important;
  }
  .hero-content{
    position:static !important;
    right:auto !important;left:auto !important;top:auto !important;bottom:auto !important;
    transform:none !important;
    width:100% !important;max-width:none !important;
    padding:0 !important;margin:0 !important;
  }
  /* Text + pills re-color for navy bg */
  .hero-badge,.hero-h1,.hero-line1,.hero-line2,.hero-sub,
  #typed-word,#tw-cursor{color:#fff !important}
  .hero-sub{color:rgba(255,255,255,0.82) !important}
  .hero-h1{font-size:30px !important;line-height:1.15 !important;margin:0 0 12px !important}
  .hero-sub{font-size:14.5px !important;line-height:1.6 !important;margin:0 0 20px !important}
  .hero-line1,.hero-line2{white-space:normal !important}
}
@media (max-width:480px){
  #hero-img{ aspect-ratio:4 / 3 !important; }
  .hero-inner{ padding:24px 16px 32px !important; }
  .hero-h1{ font-size:26px !important; }
  .hero-sub{ font-size:13.5px !important; }
}

/* 3 — ABOUT ─────────────────────────────────────────────── */

/* Remove gradient overlay on the hero photo */
.about-hero-overlay{display:none !important}

/* Title moves BELOW hero photo */
.about-hero .about-hero-content{display:none !important}
.about-hero-caption{
  background:#fff;padding:36px 80px 12px;max-width:1200px;margin:0 auto;
}
.about-hero-caption .about-hero-eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--copper);margin-bottom:12px;
}
.about-hero-caption .about-hero-h1{
  font-family:var(--serif,-apple-system,BlinkMacSystemFont);
  font-size:clamp(30px,4vw,52px);font-weight:500;color:#0F1E33;
  line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;
}
.about-hero-caption .about-hero-sub{
  font-size:16px;color:#3B4A5C;line-height:1.65;max-width:640px;font-weight:300;
}
@media(max-width:768px){
  .about-hero-caption{padding:28px 24px 8px}
  .about-hero-caption .about-hero-h1{font-size:28px}
  .about-hero-caption .about-hero-sub{font-size:14px}
}

/* Shrink the about hero photo slightly so the title has breathing room below */
.about-hero{height:auto !important;min-height:0 !important}
.about-hero img{
  position:relative !important;inset:auto !important;
  width:100% !important;height:auto !important;max-height:480px;
  object-fit:cover !important;object-position:center 32% !important;
}
@media(max-width:768px){
  .about-hero img{max-height:320px}
}

/* Team photos: circle frames */
body .team-photo,
body .team-photo-wrap{
  border-radius:50% !important;aspect-ratio:1/1 !important;
  width:190px !important;height:190px !important;
}
body .team-staff .team-photo,
body .team-grid-staff .team-photo-wrap{
  width:100% !important;max-width:180px;height:auto !important;
  aspect-ratio:1/1 !important;margin-left:auto;margin-right:auto;
}
body .team-photo img,
body .team-photo-wrap img{
  border-radius:50% !important;object-position:center 20% !important;
}
/* 2026-05-19 — Dr. David's head was being clipped by center 20% crop
   (his original photo has less headroom above the head). Pull the
   crop to the top edge on the About-page doctor row only and lock
   the containers to identical dimensions so the two circles match
   the staff row visually. */
body .team-grid-docs .team-photo-wrap{
  width:190px !important;
  height:190px !important;
  max-width:190px !important;
  flex:0 0 190px !important;
  aspect-ratio:1 / 1 !important;
}
body .team-grid-docs .team-photo-wrap img{
  object-position:center top !important;
}
@media(max-width:768px){
  body .team-grid-docs .team-photo-wrap{
    width:150px !important;height:150px !important;
    max-width:150px !important;flex:0 0 150px !important;
  }
}
@media(max-width:480px){
  body .team-grid-docs .team-photo-wrap{
    width:130px !important;height:130px !important;
    max-width:130px !important;flex:0 0 130px !important;
  }
}
@media(max-width:768px){
  body .team-photo,body .team-photo-wrap{width:150px !important;height:150px !important}
  body .team-staff .team-photo,body .team-grid-staff .team-photo-wrap{max-width:140px}
}
@media(max-width:480px){
  body .team-photo,body .team-photo-wrap{width:130px !important;height:130px !important}
}

/* 2026-04-20: Home page team photos (BOTH doctors and staff) revert
   to rectangles with a 14px radius. About page stays circular.
   Targets the home-only selectors `.team-docs .team-photo` and
   `.team-staff .team-photo` (about.html uses `.team-grid-*
   .team-photo-wrap`, which is left circular). */

/* Home DOCTORS — 200x260 portrait rectangle */
body .team-docs .team-photo{
  border-radius:14px !important;
  aspect-ratio:auto !important;
  width:200px !important;
  height:260px !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body .team-docs .team-photo img{
  border-radius:14px !important;
  object-position:center top !important;
}
@media(max-width:768px){
  body .team-docs .team-photo{ width:180px !important; height:234px !important; }
}
@media(max-width:480px){
  body .team-docs .team-photo{ width:160px !important; height:208px !important; }
}

/* Home STAFF — 3/4 portrait rectangle, fills grid cell */
body .team-staff .team-photo{
  border-radius:14px !important;
  aspect-ratio:3/4 !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body .team-staff .team-photo img{
  border-radius:14px !important;
  object-position:center top !important;
}

/* 2026-04-20: Dr. David's source photo is cropped tighter than
   Dr. Shawn's, so `object-fit:cover` scales him up more and he
   visually "fills" the frame while Shawn has headroom. Targets
   ONLY the small circular frames (home team-docs + about team-grid-docs).
   The large bio photo on /about uses the original cover rule.
   ─── DISABLED 2026-05-04 — superseded by Section 24 below which uses
       per-image object-position to match face placement instead of
       contain (which made David smaller than Shawn). ─── */
/*
body .team-docs .team-photo img[src*="David"],
body .team-grid-docs .team-photo-wrap img[src*="David"]{
  object-fit:contain !important;
  object-position:center center !important;
  background:#eef1f5 !important;
}
*/

/* 4 — TECHNOLOGY ────────────────────────────────────────── */

/* Hide stats bar entirely (preserved in markup) */
body .stats-bar{display:none !important}

/* Hide hero video pill/badge */
body .svc-hero-badge{display:none !important}

/* Swap before/after: the markup says before=before, but visually the
   clip-path makes the .ba-after show on the RIGHT. The user says they are
   reversed — so swap the images via CSS-level rename is not clean; instead
   we swap via a small data attribute hook (applied by ahdd-enhance.js).  */

/* Paperless-forms video sizing fix — the .tr-media expects consistent aspect
   and the inline video has no sizing rules. Force cover fit. */
.tech-row .tr-media video,
.tech-row .tr-media img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center center !important;
  display:block;
}
.tech-row .tr-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:#f0f3f7}
@media (max-width:768px){ .tech-row .tr-media{aspect-ratio:16/10} }

/* Hide redundant doctor + stat footer on Technology page */
body .wt-footer{display:none !important}

/* Reduce technology section padding */
#videa-feature{padding:48px 0 !important}
#simulator-feature{padding:48px 0 !important}
#tech-features{padding-top:56px !important;padding-bottom:0 !important}
#why-tech{padding:64px 0 !important}
#tech-cta{padding:64px 0 !important}
#virtual-tour{padding:56px 0 !important}
.wt-header{margin-bottom:32px !important}
.tf-intro{margin-bottom:28px !important}

/* 5 — SITEWIDE MOBILE (375–768px) ──────────────────────── */

html,body{overflow-x:hidden}
img,video,iframe{max-width:100%}

/* Section padding trims on phone */
@media (max-width:768px){
  section{padding-left:0;padding-right:0}
  .wrap{padding:0 20px !important}

  /* Booking modal full-bleed */
  #bk-modal{padding:0}
  .bk-box{max-width:100% !important;border-radius:16px 16px 0 0;max-height:98vh}

  /* Touch target min-size */
  a.nav-book,.nav-book,.btn-dark,.btn-outline,.cta-book,.cta-call,
  .btn-primary,.btn-secondary,.loc-btn-dir,.loc-btn-book,
  .ins-cta-primary,.ins-cta-secondary,.ins-check-btn,
  .svc-consult-btn,.pill,.team-card{min-height:44px}

  /* Chatbot full width on small phones */
  #chat-win{width:calc(100vw - 24px) !important;height:min(72vh,560px) !important}

  /* Virtual tour iframe: keep 16:9 */
  .vt-embed-wrap,.cta-tour-wrap{padding-bottom:56.25% !important}

  /* About/Tech two-column sections to stack */
  .intro-grid,.doctor-layout,.svc-hero,.videa-wrap,.sim-wrap,.tech-row,.tech-row.flip{
    grid-template-columns:1fr !important;
  }
  .tech-row,.tech-row.flip{gap:16px !important}

  /* Smile analysis widget 1-column (see dedicated rules below) */
  .sai-grid{grid-template-columns:1fr !important}

  /* Insurance widget breathing room */
  .ins-plan-btns{grid-template-columns:1fr 1fr !important}

  /* Footer tighten */
  #footer{padding:44px 0 24px}
  .footer-grid{gap:24px !important}

  /* Team wrap */
  .team-staff,.team-grid-staff{grid-template-columns:repeat(3,1fr) !important;gap:14px !important}
  .team-docs,.team-grid-docs{gap:24px !important;flex-wrap:wrap}
}
@media (max-width:480px){
  .team-staff,.team-grid-staff{grid-template-columns:repeat(2,1fr) !important}
  .wrap{padding:0 16px !important}
  .ins-plan-btns{grid-template-columns:1fr !important}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .tech-grid{grid-template-columns:1fr !important}
  .svc-grid{grid-template-columns:1fr !important}
  .svc-card.hero-card{grid-column:span 1 !important}
  /* Ensure no heading overflows at small phone widths */
  .page-hero h1,.svc-hero-h1,.about-hero-h1,
  .hero-h1,.tr-h3,.sim-h2,.videa-h2,
  .section-h2,.section-h,.sai-h2,.svc-h2,.team-title,
  .rev-h2,.cta-h2,.doc-h2,.tech-title,.vt-h2,.loc-h2{
    font-size:clamp(22px,7vw,28px) !important;
    line-height:1.18 !important;
    word-break:break-word;
    hyphens:auto;
  }
  .page-hero p,.svc-hero-p,.about-hero-sub,
  .hero-sub,.tr-p,.videa-p,.videa-p2,.sim-p,.sim-p2{
    font-size:14px !important;line-height:1.6 !important;
  }
  /* Service pages often use page-hero with big padding */
  .page-hero{padding:48px 0 32px !important}
}

/* Smile-analysis widget visual refresh — Apple-meets-dentist ─── */
.sai-section{
  background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%) !important;
  padding:80px 0 !important;
}
.sai-section::before{display:none !important}
.sai-card{
  background:#ffffff !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid rgba(15,30,51,.06) !important;
  border-radius:24px !important;
  box-shadow:
    0 1px 2px rgba(15,30,51,.04),
    0 12px 32px rgba(15,30,51,.06),
    0 32px 64px rgba(15,30,51,.04) !important;
}
.sai-left{border-right:1px solid rgba(15,30,51,.05) !important}
.sai-eyebrow{color:#0071e3 !important}
.sai-eyebrow-line{background:#0071e3 !important}
.sai-h2 em{color:#0071e3 !important}
.sai-chip{
  background:#f5f7fa !important;border:1px solid rgba(15,30,51,.06) !important;
  box-shadow:none !important;color:#2d3340 !important;
}
.sai-chip-dot{background:#34c759 !important}
.sai-drop{
  background:#fafbfd !important;
  border:1.5px dashed rgba(15,30,51,.14) !important;
  border-radius:18px !important;transition:border-color .2s,background .2s;
}
.sai-drop:hover,.sai-drop.drag{
  background:#f0f6ff !important;border-color:#0071e3 !important;
}
.sai-cta,.sai-btn-primary,button.sai-btn-primary{
  background:#0071e3 !important;color:#fff !important;
  border-radius:100px !important;font-weight:600 !important;
  letter-spacing:-.01em !important;
  box-shadow:0 4px 14px rgba(0,113,227,.24) !important;
}
.sai-cta:hover,.sai-btn-primary:hover{
  background:#0058b0 !important;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,113,227,.32) !important;
}
.sai-preview-badge{background:#0071e3 !important;color:#fff !important;letter-spacing:-.01em !important}
.sai-analyze-btn{
  background:#0071e3 !important;color:#fff !important;
  border-radius:100px !important;font-weight:600 !important;
  padding:14px 28px !important;
  box-shadow:0 4px 14px rgba(0,113,227,.24) !important;
  letter-spacing:-.01em !important;
}
.sai-analyze-btn:hover:not(:disabled){
  background:#0058b0 !important;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,113,227,.32) !important;
}
.sai-gate-icon{background:linear-gradient(135deg,#0071e3,#4a9fd4) !important}
.sai-gate-field{
  background:#fafbfd !important;border:1.5px solid rgba(15,30,51,.08) !important;
  border-radius:12px !important;color:#0a0e14 !important;
}
.sai-gate-field:focus{border-color:#0071e3 !important;box-shadow:0 0 0 3px rgba(0,113,227,.12) !important}
.sai-gate-submit,.sai-primary-btn,button.sai-gate-submit{
  background:#0071e3 !important;color:#fff !important;border-radius:100px !important;
  font-weight:600 !important;letter-spacing:-.01em !important;
  box-shadow:0 4px 14px rgba(0,113,227,.24) !important;
}
.sai-gate-submit:hover,.sai-primary-btn:hover{
  background:#0058b0 !important;
}
.sai-drop-icon{
  background:#fafbfd !important;border:1px solid rgba(15,30,51,.08) !important;
  box-shadow:0 1px 2px rgba(15,30,51,.04) !important;
}
.sai-trust,.sai-privacy{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif !important}

@media (max-width:768px){
  .sai-section{padding:48px 0 !important}
  .sai-grid{grid-template-columns:1fr !important}
  .sai-left{padding:32px 24px !important;border-right:none !important;
    border-bottom:1px solid rgba(15,30,51,.05) !important}
  .sai-right{padding:32px 24px !important}
  .sai-card{border-radius:20px !important}
}
/* ──────────────────────────────────────────────────────────
   6 — 2026-04-20 mobile fit patch
   Originals above preserved. Adds fixes for:
     a) Technology cards: .tr-media was overflowing the card on phone.
     b) Paperless Forms card: portrait video, contain-fit, navy letterbox.
     c) Small-phone tap-target polish on mobile nav + footer links.
   ────────────────────────────────────────────────────────── */

/* a) Stop .tr-media from overflowing its card on mobile + tablet */
@media (max-width:1024px){
  .tech-row .tr-media{
    min-height:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  .tech-row,
  .tech-row.flip{
    max-width:100% !important;
    overflow:hidden;
  }
  .tech-row .tr-media video,
  .tech-row .tr-media img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* b) Paperless Forms card — portrait video, contain-fit, letterbox */
@supports selector(:has(*)){
  .tech-row:has(video source[src*="Paperless"]) .tr-media,
  .tech-row:has(video[src*="Paperless"]) .tr-media{
    background:#0F1E33 !important;
    aspect-ratio: 9 / 12 !important;
  }
  .tech-row:has(video source[src*="Paperless"]) .tr-media video,
  .tech-row:has(video[src*="Paperless"]) .tr-media video{
    object-fit:contain !important;
    object-position:center center !important;
  }
  @media (min-width:769px){
    .tech-row:has(video source[src*="Paperless"]) .tr-media,
    .tech-row:has(video[src*="Paperless"]) .tr-media{
      aspect-ratio: 4 / 3 !important;
    }
  }
}
.tech-row.paperless .tr-media{
  background:#0F1E33 !important;
  aspect-ratio: 9 / 12 !important;
}
.tech-row.paperless .tr-media video{
  object-fit:contain !important;
  object-position:center center !important;
}
@media (min-width:769px){
  .tech-row.paperless .tr-media{ aspect-ratio: 4 / 3 !important; }
}

/* c) Small-phone tap-target polish */
@media (max-width:768px){
  .tech-row > *,
  .tr-media,
  .tr-body{ max-width:100% !important; }

  #mobile-nav a{ min-height:44px !important; display:flex !important; align-items:center !important; }
  .foot-links a{ padding:8px 0 !important; display:inline-block !important; }
}

/* ──────────────────────────────────────────────────────────
   7 — 2026-04-20 v3: mobile padding + Matian order
   a) On mobile, the home "Meet the Doctors" section renders
      photo-first (image above headline), not text-first.
   b) Cut the oversized vertical padding sitewide on phone.
   ────────────────────────────────────────────────────────── */

/* a) Home — #doctors section: photo above text on mobile */
@media (max-width:768px){
  #doctors .doc-outer{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    grid-template-columns:none !important;
  }
  #doctors .doc-photo{
    order:1 !important;
    position:relative !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    width:100% !important;
  }
  #doctors .doc-photo img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
  #doctors .doc-text{
    order:2 !important;
    padding:36px 20px 44px !important;
  }
  #doctors .doc-text .doc-p{ font-size:15px !important; line-height:1.65 !important; margin-bottom:14px !important; }
  #doctors .doc-btns{ margin-top:24px !important; gap:10px !important; }
  #doctors .doc-btns > *{ flex:1 1 auto; justify-content:center; }
}

/* b) Sitewide mobile padding trim — cut all oversized section padding */
@media (max-width:768px){
  /* Home sections already trimmed earlier; these are additional trims */
  #hero-below,#social-proof,#stats,#reviews,#virtual-tour,#ins,#cta,#doctors,
  #services,#tech,#team,#process,#faq,#cta-strip,#membership,#lenders,
  #intro,#team-section,#practice-intro,.doctor-section,
  #videa-feature,#simulator-feature,#tech-features,#why-tech,#tech-cta{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

  /* Generic section padding cap — catches anything not listed above */
  section[class*="svc-"],section[class*="sim-"],section[class*="videa-"],
  section.about-hero-caption,section.page-hero{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }

  /* Common hero-caption block paddings (about + other pages) */
  .about-hero-caption{ padding:28px 20px 12px !important; }
  .about-hero-caption .about-hero-h1{ margin-bottom:8px !important; }

  /* Doctor-section on About — the intro + bio blocks still felt bloated */
  .doctor-section{ padding:44px 0 !important; }
  .doc-photo-col{ padding-top:0 !important; }
  .doc-photo-wrap img{ max-height:360px !important; }
  .doc-bio p{ margin-bottom:14px !important; }

  /* Team blocks */
  #team{ padding:44px 0 !important; }
  .team-hdr{ margin-bottom:28px !important; }

  /* CTA strips tighter */
  #cta-strip,#cta{ padding:44px 0 !important; }
  .cta-inner{ gap:20px !important; }

  /* Footer tighter top padding on phone */
  #footer{ padding:36px 0 22px !important; }
  .footer-grid{ margin-bottom:28px !important; gap:20px !important; }

  /* Intro cards / blocks */
  .intro-grid{ gap:28px !important; }
  .intro-card{ padding:32px 26px !important; }

  /* Service card containers and page heroes */
  .svc-hero{ padding:80px 0 32px !important; }
  .svc-hero-content{ padding:0 !important; }
  .page-hero{ padding:80px 0 28px !important; }

  /* Container horizontal padding — snug, not cramped */
  .wrap{ padding-left:16px !important; padding-right:16px !important; }

  /* Headings breathing room — prevent stacked giants */
  h1,h2,h3{ margin-top:0 !important; }
  h2{ margin-bottom:12px !important; }
}

/* c) Tiny phone (≤480) — one more pass */
@media (max-width:480px){
  #doctors .doc-text{ padding:28px 16px 36px !important; }
  #hero-below,#social-proof,#stats,#reviews,#virtual-tour,#ins,#cta,#doctors,
  #services,#tech,#team,#process,#faq,#cta-strip,#membership,#lenders,
  #intro,#team-section,#practice-intro,.doctor-section,
  #videa-feature,#simulator-feature,#tech-features,#why-tech,#tech-cta{
    padding-top:32px !important;
    padding-bottom:32px !important;
  }
  .wrap{ padding-left:14px !important; padding-right:14px !important; }
  .page-hero{ padding:64px 0 20px !important; }
  .svc-hero{ padding:64px 0 24px !important; }
}

/* ──────────────────────────────────────────────────────────
   8 — 2026-04-20 v4: insurance "NO PHI" pill + chatbot size
   a) Pill was a stacked card with lots of dead space on phone.
      Convert to a compact horizontal pill spanning the full row.
   b) Chatbot window was near-fullscreen on phone — shrink to a
      more appropriate floating panel.
   ────────────────────────────────────────────────────────── */

/* a) NO PHI pill — compact horizontal layout on mobile */
@media (max-width:768px){
  .ins-header-badge{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:14px !important;
    padding:10px 16px !important;
    border-radius:12px !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
    align-self:stretch !important;
  }
  .ins-header-badge .ins-badge-label{
    margin-bottom:0 !important;
    font-size:10px !important;
    letter-spacing:.1em !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
    padding-right:14px !important;
    border-right:1px solid rgba(43,125,181,0.3) !important;
    line-height:1.3 !important;
  }
  .ins-header-badge .ins-badge-text{
    font-size:11.5px !important;
    line-height:1.35 !important;
    flex:1 !important;
  }
  .ins-header-badge .ins-badge-text br{ display:inline !important; content:' '; }
}
@media (max-width:480px){
  .ins-header-badge{ padding:8px 14px !important; gap:12px !important; }
  .ins-header-badge .ins-badge-label{ font-size:9.5px !important; padding-right:10px !important; }
  .ins-header-badge .ins-badge-text{ font-size:11px !important; }
}

/* b) Chatbot — sensible size on mobile (was nearly full-screen) */
@media (max-width:768px){
  #chat-wrap{ bottom:16px !important; right:16px !important; }
  #chat-tog{ width:52px !important; height:52px !important; }
  #chat-tog svg{ width:22px !important; height:22px !important; }
  #chat-win{
    width:min(92vw, 380px) !important;
    height:min(58vh, 500px) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 100px) !important;
    bottom:72px !important;
    right:0 !important;
    border-radius:16px !important;
  }
  #chat-hd{ padding:11px 14px !important; }
  #chat-hd-title{ font-size:12px !important; }
  #chat-status{ font-size:10.5px !important; }
  .c-msg{ font-size:12.5px !important; padding:8px 11px !important; }
  #chat-inp-area{ padding:9px 11px !important; }
  #chat-inp{ font-size:13px !important; padding:8px 12px !important; }
  #chat-send{ width:32px !important; height:32px !important; }
  .ahdd-qp-btn{ font-size:11.5px !important; padding:6px 10px !important; }
}
@media (max-width:480px){
  #chat-win{
    width:min(92vw, 340px) !important;
    height:min(56vh, 460px) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   9 — 2026-04-21 lender card alignment
   Force all three cards to match heights via grid stretch and
   pin each CTA to the bottom so "Prequalify / Check rate / Apply"
   buttons sit on the same baseline regardless of body length.
   ────────────────────────────────────────────────────────── */
.lenders-grid{ align-items:stretch !important; }
.lenders-grid .lender-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}
.lenders-grid .lender-features{ flex:1 1 auto !important; }
.lenders-grid .lender-cta{ margin-top:auto !important; }
.lenders-grid .lender-disclaimer{
  margin-top:16px !important;
  margin-bottom:18px !important;
}

/* ──────────────────────────────────────────────────────────
   10 — 2026-04-21 nav parity across all pages
   Every non-home page painted a copper 2px underline bar under
   the current-page nav link via `.nav-links a.active::after`.
   Home doesn't do this (its Services link is `/#services`, not
   active). Kill the copper bar everywhere so the nav matches
   home on every page — just the gray dropdown chevron on the
   Services item, no page-indicator bar. */
.nav-links a.active::after,
.nav-links a:hover::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
}

/* ──────────────────────────────────────────────────────────
   11 — 2026-04-21 unify page-header typography
   Match the /financing page-hero font family, weight, and
   tracking across every page header so the type system reads
   consistently. The home page main hero (typed-word effect over
   the team photo) is intentionally left alone.
   ────────────────────────────────────────────────────────── */
body .page-hero h1,
body .about-hero-h1,
body .about-hero-caption .about-hero-h1,
body .svc-hero-h1,
body .policy-h1,
body .city-hero h1{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:-0.03em !important;
  line-height:1.04 !important;
  font-size:clamp(36px,5vw,64px) !important;
  color:#0F1E33 !important;
}
/* Emphasis inside the headline reads lighter/softer (same pattern
   as financing's "your budget.") */
body .page-hero h1 em,
body .about-hero-h1 em,
body .about-hero-caption .about-hero-h1 em,
body .svc-hero-h1 em,
body .policy-h1 em,
body .city-hero h1 em{
  font-family:inherit !important;
  font-style:normal !important;
  font-weight:300 !important;
  color:#3B4A5C !important;
}
/* Small-phone sizing — keep headers from overflowing narrow screens */
@media (max-width:480px){
  body .page-hero h1,
  body .about-hero-h1,
  body .about-hero-caption .about-hero-h1,
  body .svc-hero-h1,
  body .policy-h1,
  body .city-hero h1{
    font-size:clamp(28px,8vw,38px) !important;
    line-height:1.12 !important;
  }
}

/* ──────────────────────────────────────────────────────────
   12 — 2026-04-21 Instagram section: reasonable sizing
   Cap the widget so it doesn't dominate the page. Fit nicely
   on phones without overflow.
   ────────────────────────────────────────────────────────── */
#instagram .instagram-media,
#instagram iframe.instagram-media{
  max-width:480px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 auto !important;
}
@media (max-width:768px){
  #instagram{ padding:48px 0 !important; }
  #instagram .instagram-media,
  #instagram iframe.instagram-media{
    max-width:calc(100vw - 48px) !important;
    min-width:0 !important;
  }
}
@media (max-width:480px){
  #instagram{ padding:36px 0 !important; }
  #instagram .instagram-media,
  #instagram iframe.instagram-media{
    max-width:calc(100vw - 40px) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   13 — 2026-04-24 mobile polish pass
   Four issues reported from live mobile testing:
     a) Top nav logo was oversized on phones, making the bar feel huge
     b) Mobile hamburger "Book Online" button rendered navy-on-navy
        (invisible text) due to #mobile-nav a beating .mob-book on
        specificity
     c) "Speak With Our Team" insurance CTA was a tight pill on mobile;
        should stretch full-width to match the "See Membership Plans"
        card directly beneath it
     d) Chat window opened too large on phones — only the top-right
        corner was visible; needs a proper in-viewport layout
   ────────────────────────────────────────────────────────── */

/* a) Mobile nav logo — dramatically smaller so the bar reads slim */
/* DISABLED 2026-04-26 — superseded by section 22 width-based sizing
@media (max-width:768px){
  #nav .nav-logo img{ height:48px !important; }
}
@media (max-width:480px){
  #nav .nav-logo img{ height:42px !important; }
}
@media (max-width:380px){
  #nav .nav-logo img{ height:38px !important; }
}
*/

/* b) Book Online button in hamburger menu — force white text on navy.
   Specificity fix: #mobile-nav a.mob-book (0,1,1,1) beats #mobile-nav a (0,1,0,1). */
#mobile-nav a.mob-book{
  background:#0F1E33 !important;
  color:#FAFAF7 !important;
  text-align:center !important;
  padding:14px !important;
  border-bottom:none !important;
  border-radius:100px !important;
  font-size:14px !important;
  font-weight:500 !important;
}
#mobile-nav a.mob-book:hover{ background:#1A2D4A !important; }

/* Also clean the "(818) 706-6077" line so the phone number doesn't
   get a bottom underline that looks out of place above the pill button */
#mobile-nav a.mob-phone{
  border-bottom:none !important;
  text-align:center !important;
  padding:10px 0 !important;
}

/* c) Insurance banner — stack vertically on mobile and stretch the
   CTA button full-width so it matches the membership card beneath it */
@media (max-width:768px){
  .ins-banner{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    padding:18px 20px !important;
  }
  .ins-banner p{
    min-width:0 !important;
    text-align:center !important;
  }
  .ins-banner-btn{
    width:100% !important;
    justify-content:center !important;
    padding:14px 20px !important;
    font-size:.9rem !important;
    border-radius:12px !important;
  }
}

/* d) Chat window — hard-clamp size and pin to viewport corners so it
   NEVER overflows. Overrides earlier (less strict) rules at lines 725+. */
@media (max-width:768px){
  #chat-wrap{
    bottom:16px !important;
    right:16px !important;
  }
  #chat-win{
    /* Positioned bottom-right, clamped to stay fully in viewport */
    position:fixed !important;
    bottom:84px !important;
    right:12px !important;
    left:12px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:calc(100vh - 110px) !important;
    /* Give it a sensible explicit height so it doesn't balloon */
    height:min(520px, calc(100vh - 110px)) !important;
    border-radius:16px !important;
    box-shadow:0 16px 48px rgba(26,31,36,.22) !important;
  }
}
@media (max-width:480px){
  #chat-win{
    bottom:78px !important;
    left:10px !important;
    right:10px !important;
    height:min(480px, calc(100vh - 100px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   14 — MOBILE NAV BAR HEIGHT (the white container itself)
   The logo shrink alone was not enough — the white bar was still
   64px tall on phones, eating vertical space. Reduce the actual
   container height and the hero offset to match.
   Logo is re-scaled to fit proportionally inside each breakpoint.
   ────────────────────────────────────────────────────────── */
/* DISABLED 2026-04-26 — superseded by section 22
@media (max-width:768px){
  #nav,
  #nav.scrolled,
  #nav .nav-wrap{
    height:52px !important;
    min-height:52px !important;
  }
  .hero-inner{ padding-top:52px !important; }
  #nav .nav-logo img{ height:40px !important; }
  #nav .hamburger,
  #nav #hamburger{
    top:50% !important;
    transform:translateY(-50%) !important;
  }
  #mobile-nav{ top:52px !important; }
}
@media (max-width:480px){
  #nav,
  #nav.scrolled,
  #nav .nav-wrap{
    height:48px !important;
    min-height:48px !important;
  }
  .hero-inner{ padding-top:48px !important; }
  #nav .nav-logo img{ height:34px !important; }
  #mobile-nav{ top:48px !important; }
}
*/

/* ──────────────────────────────────────────────────────────
   14 — 2026-04-24 Insurance pill: force single-line on mobile
   Prior `<br>{display:inline}` hack (section 8a) was unreliable
   across iOS Safari + Chrome mobile — browsers render <br> as
   a hard line break in flow content regardless of inline
   display. Fix: zero out the original text content and inject
   a single-line replacement via ::before so the pill stays one
   row at every width down to 360px.
   ────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .ins-header-badge .ins-badge-text{
    font-size:0 !important;
    line-height:1 !important;
  }
  .ins-header-badge .ins-badge-text::before{
    content:"Private & Secure · 100% Client-Side";
    font-size:11.5px !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    display:inline !important;
    color:#475569 !important;
    font-family:'Plus Jakarta Sans', sans-serif !important;
  }
  .ins-header-badge .ins-badge-text br{ display:none !important; }
}
@media (max-width:480px){
  .ins-header-badge .ins-badge-text::before{ font-size:10.5px !important; }
}
@media (max-width:380px){
  .ins-header-badge .ins-badge-text::before{
    content:"Private · 100% Client-Side";
    font-size:10px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   15 — 2026-04-24 Chat panel mobile: dvh + safe-area + keyboard
   Prior rule (section 8b) used `vh` which iOS Safari does not
   recompute when the on-screen keyboard opens — bottom of the
   panel slides off-screen and the input field appears detached
   mid-viewport. Switch to `dvh` (dynamic viewport height) +
   env(safe-area-inset-bottom) so the input stays pinned above
   the keyboard. Enforces flex layout so messages scroll while
   header, quick-pick chips, and input stay anchored.
   ────────────────────────────────────────────────────────── */
@media (max-width:768px){
  #chat-win{
    width:min(94vw, 380px) !important;
    height:min(70dvh, 540px) !important;
    max-height:calc(100dvh - 90px) !important;
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
    right:8px !important;
    border-radius:16px !important;
    flex-direction:column !important;
  }
  #chat-win.open{ display:flex !important; }
  #chat-msgs{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #ahdd-qp{
    flex:0 0 auto !important;
    max-height:84px !important;
    overflow-y:auto !important;
  }
  #chat-inp-area{
    flex:0 0 auto !important;
    padding-bottom:max(11px, env(safe-area-inset-bottom)) !important;
  }
  #chat-wrap{
    bottom:max(16px, env(safe-area-inset-bottom)) !important;
    right:16px !important;
  }
}
@media (max-width:480px){
  #chat-win{
    width:calc(100vw - 24px) !important;
    height:min(72dvh, 500px) !important;
    right:12px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   16 — 2026-04-24 Nav final mobile sizing (authoritative)
   Resolves cascade conflicts from prior nav iterations
   (sections 1, 7-a, 13). Final values:
     - Bar 56px @ ≤768px, 52px @ ≤480px, 50px @ ≤380px
     - Logo proportional, hamburger 44×44 tap target (Apple HIG)
     - Mobile menu drawer top edge synced to bar height
   This block must remain LAST in the file to win the cascade.
   ────────────────────────────────────────────────────────── */
/* DISABLED 2026-04-26 — superseded by section 22
@media (max-width:768px){
  #nav,
  #nav.scrolled,
  #nav .nav-wrap{
    height:56px !important;
    min-height:56px !important;
  }
  .hero-inner{ padding-top:56px !important; }
  #nav .nav-wrap{ padding:0 16px !important; }
  #nav .nav-logo img{ height:42px !important; }
  #nav .hamburger,
  #nav #hbg{
    display:flex !important;
    width:44px !important;
    height:44px !important;
    padding:11px !important;
    align-items:center !important;
    justify-content:center !important;
    margin-right:-8px !important;
    gap:5px !important;
  }
  #nav .hamburger span,
  #nav #hbg span{
    width:22px !important;
    height:2px !important;
  }
  #mobile-nav{ top:56px !important; }
}
@media (max-width:480px){
  #nav,
  #nav.scrolled,
  #nav .nav-wrap{
    height:52px !important;
    min-height:52px !important;
  }
  .hero-inner{ padding-top:52px !important; }
  #nav .nav-logo img{ height:38px !important; }
  #mobile-nav{ top:52px !important; }
}
@media (max-width:380px){
  #nav,
  #nav.scrolled,
  #nav .nav-wrap{
    height:50px !important;
    min-height:50px !important;
  }
  .hero-inner{ padding-top:50px !important; }
  #nav .nav-logo img{ height:34px !important; }
  #mobile-nav{ top:50px !important; }
}
*/

/* ══════════════════════════════════════════════════════════
   22 — 2026-04-26 MOBILE NAV + HERO PADDING (CLEAN AUTHORITATIVE)
   ══════════════════════════════════════════════════════════
   Replaces sections 17, 19, 20, 21 entirely.
   All previous mobile nav rules (sections 1 mobile, 13a,
   duplicate 14, 16) are commented out above.

   Logo: width-based sizing because the source PNG has heavy
   transparent padding — height-based rules render the visible
   wordmark too small. Width fills horizontal space cleanly.

   Hamburger: kept from section 20 (working perfectly per user
   feedback) — re-stated here at the bottom for cascade safety.

   Hero block padding: trimmed to fix the "way too much padding
   under the hero photo" reported on mobile.

   AUTHORITATIVE — must remain LAST.
   ══════════════════════════════════════════════════════════ */

/* ── LOGO ── */
@media (max-width:768px){
  body #nav .nav-logo img{
    width:190px !important;
    height:auto !important;
    max-height:58px !important;
    max-width:62vw !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
}
@media (max-width:480px){
  body #nav .nav-logo img{
    width:180px !important;
    max-height:54px !important;
    max-width:66vw !important;
  }
}
@media (max-width:380px){
  body #nav .nav-logo img{
    width:160px !important;
    max-height:48px !important;
    max-width:70vw !important;
  }
}

/* ── NAV BAR + HAMBURGER (preserved working values from section 20) ── */
@media (max-width:768px){
  body #nav,
  body #nav.scrolled{
    height:auto !important;
    min-height:0 !important;
    padding-top:env(safe-area-inset-top) !important;
  }
  body #nav .nav-wrap{
    height:64px !important;
    min-height:64px !important;
    padding:0 18px !important;
  }
  /* Hamburger — working perfectly per user feedback, locked in */
  html body #nav .hamburger,
  html body #nav #hbg{
    position:static !important;
    top:auto !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    gap:5px !important;
    flex-shrink:0 !important;
    background:transparent !important;
    border:0 !important;
    cursor:pointer !important;
  }
  html body #nav .hamburger span:nth-child(1),
  html body #nav .hamburger span:nth-child(2),
  html body #nav .hamburger span:nth-child(3),
  html body #nav #hbg span:nth-child(1),
  html body #nav #hbg span:nth-child(2),
  html body #nav #hbg span:nth-child(3){
    display:block !important;
    width:22px !important;
    height:2px !important;
    min-height:2px !important;
    max-height:2px !important;
    background:#0F1E33 !important;
    border-radius:2px !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 2px !important;
    transition:transform .25s, opacity .25s !important;
  }
  html body #nav .hamburger.open span:nth-child(1),
  html body #nav #hbg.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }
  html body #nav .hamburger.open span:nth-child(2),
  html body #nav #hbg.open span:nth-child(2){
    opacity:0 !important;
  }
  html body #nav .hamburger.open span:nth-child(3),
  html body #nav #hbg.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }
  #mobile-nav{ top:calc(64px + env(safe-area-inset-top)) !important; }
}
@media (max-width:480px){
  body #nav .nav-wrap{
    height:60px !important;
    min-height:60px !important;
    padding:0 16px !important;
  }
  #mobile-nav{ top:calc(60px + env(safe-area-inset-top)) !important; }
}
@media (max-width:380px){
  body #nav .nav-wrap{
    height:56px !important;
    min-height:56px !important;
    padding:0 14px !important;
  }
  #mobile-nav{ top:calc(56px + env(safe-area-inset-top)) !important; }
}

/* ── HERO BLOCK PADDING (under the photo) ── */
@media (max-width:768px){
  #hero .hero-inner{
    padding:16px 20px 24px !important;
  }
  .hero-h1{ margin-bottom:10px !important; }
  .hero-sub{ margin-bottom:0 !important; }
}
@media (max-width:480px){
  #hero .hero-inner{
    padding:14px 16px 22px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   23 — 2026-04-26 ABOUT page polish
   ══════════════════════════════════════════════════════════
   Three targeted fixes for the About Us page only:
     1. Remove the soft drop-shadow on .about-hero-h1 / .about-
        hero-sub. The base about.html stylesheet (line 199)
        applied text-shadow assuming the title rendered over
        the dark hero photo; since section 3's "title moves
        below hero photo" override moved it to a white card,
        the shadow now reads as a smudge behind the text.
     2. Dr David's photo appears too zoomed-out vs Dr Shawn
        because David's source image has more whitespace
        around the subject. Apply targeted scale + adjusted
        object-position to the David photo only.
     3. Style the new "Connect With Us" section (#connect)
        added before the footer on /about.
   ══════════════════════════════════════════════════════════ */

/* — 1. Kill the title shadow site-wide on hero/page headings — */
body .page-hero h1,
body .about-hero-h1,
body .about-hero-caption .about-hero-h1,
body .about-hero-caption .about-hero-sub,
body .svc-hero-h1,
body .policy-h1,
body .city-hero h1{
  text-shadow:none !important;
}

/* — 2. Dr David photo: zoom in to match Dr Shawn's framing —
   ─── DISABLED 2026-05-04 — superseded by Section 24 below
       which uses object-position only to align both bio photos. ─── */
/*
.doc-photo-david img{
  transform:scale(1.18) !important;
  transform-origin:center 28% !important;
  object-position:center 22% !important;
}
@media (max-width:768px){
  .doc-photo-david img{
    transform:scale(1.14) !important;
    transform-origin:center 30% !important;
  }
}
*/

/* — 3. Connect With Us section styling — */
.connect-section{
  background:#FAFAF7;
  padding:80px 0 96px;
  border-top:1px solid rgba(15,30,51,.06);
}
.connect-section .connect-inner{
  text-align:center;
  max-width:1080px;
  margin:0 auto;
}
.connect-section .connect-eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#C97B5C; /* copper accent */
  margin-bottom:14px;
}
.connect-section .connect-h2{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:400;
  letter-spacing:-0.025em;
  color:#0F1E33;
  margin:0 0 14px;
  line-height:1.08;
}
.connect-section .connect-sub{
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  color:#3B4A5C;
  max-width:600px;
  margin:0 auto 40px;
}
.connect-section .connect-sub strong{
  font-weight:500;
  color:#0F1E33;
}
.connect-section .connect-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  max-width:920px;
  margin:0 auto;
}
.connect-section .connect-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:24px 14px;
  background:#fff;
  border:1px solid rgba(15,30,51,.08);
  border-radius:14px;
  text-decoration:none;
  color:#0F1E33;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height:148px;
}
.connect-section .connect-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(15,30,51,.10);
  border-color:rgba(201,123,92,.4);
}
.connect-section .connect-icon{
  width:32px;
  height:32px;
  color:#0F1E33;
  margin-bottom:4px;
  object-fit:contain;
  display:block;
}
.connect-section .connect-label{
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#0F1E33;
}
.connect-section .connect-handle{
  font-size:11px;
  font-weight:500;
  color:#6B7989;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  line-height:1.35;
  max-width:100%;
  padding:0 2px;
}

/* Tablet: 5 → 3 columns (Yelp + Google wrap to row 2) */
@media (max-width:900px){
  .connect-section .connect-grid{
    grid-template-columns:repeat(3, 1fr);
    max-width:560px;
  }
}
/* Phone: 3 → 2 columns */
@media (max-width:520px){
  .connect-section{ padding:56px 0 64px; }
  .connect-section .connect-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    max-width:380px;
  }
  .connect-section .connect-card{
    padding:20px 12px;
    min-height:128px;
  }
  .connect-section .connect-icon{ width:28px; height:28px; }
  .connect-section .connect-label{ font-size:13px; }
  .connect-section .connect-handle{ font-size:10.5px; }
  .connect-section .connect-sub{ margin-bottom:28px; padding:0 16px; }
}

/* ══════════════════════════════════════════════════════════
   24 ─ TEAM PHOTO UNIFICATION + LOGO SIZE (2026-05-04)
   ──────────────────────────────────────────────────────────
   Problems addressed:
     1. Dr. David's source photo is shot wider/further-back than
        Dr. Shawn's. Previous fix used `object-fit:contain` on David
        in small frames, which made him look SMALLER (letterboxed)
        next to Shawn. The big bio photo also had a `transform:scale`
        which produced a different mismatch.
     2. Staff photos have varied source crops too (head sizes
        different at the same `object-fit:cover`).
     3. Logo was set to 100px, but renders too small visually.

   Approach:
     - Use `object-fit:cover` for ALL team/doctor photos.
     - Set `object-position` percentages per face so every subject's
       eyes/forehead land at the same vertical zone in the frame.
     - Use `transform:scale` only when source framing genuinely
       requires it to match the visual head size (David specifically).
     - Bump logo to 130px desktop / 150px on wide screens.
   ══════════════════════════════════════════════════════════ */

/* ── 24a. UNIFIED OBJECT-FIT FOR ALL TEAM/DOCTOR PHOTOS ── */
body .team-photo img,
body .team-photo-wrap img,
body .doc-photo-wrap img{
  object-fit:cover !important;
  background:transparent !important;
}

/* ── 24b. ABOUT PAGE BIG BIO PHOTOS ──────────────────────
   Both doctors anchored to same vertical position. The source bio
   photos are different crops (Shawn shows more torso, David shows
   more head) so each gets its own object-position that lands their
   eyes at the same visual height. NO transform/scale — that creates
   visual size mismatches. */
body .doc-photo-wrap img{
  object-position:center 18% !important;
}
body .doc-photo-david img{
  object-position:center 30% !important;
}
/* (no scale — keeps both doctors at the same visual size) */

/* ── 24c. ABOUT PAGE TEAM GRID (small portraits) ────────
   .team-grid-docs (190x240) and .team-grid-staff (3/4 ratio). */
body .team-grid-docs .team-photo-wrap img,
body .team-grid-staff .team-photo-wrap img{
  object-fit:cover !important;
  object-position:center 12% !important;
  background:transparent !important;
}

/* David's source headshot has him standing further from camera with
   slightly more headroom. Shift his anchor DOWN (higher %) so face
   sits at same visual height as Shawn's, no scale needed. */
body .team-grid-docs .team-photo-wrap img[src*="David"]{
  object-position:center 25% !important;
}

/* Heidi's source has a wider aspect — shift focus up so she's not chin-cropped */
body .team-grid-staff .team-photo-wrap img[src*="Heidi"]{
  object-position:center 8% !important;
}

/* ── 24d. HOMEPAGE TEAM SECTION ──────────────────────────
   .team-docs .team-photo (200x260) for doctors,
   .team-staff .team-photo (3/4 grid) for staff. */
body .team-docs .team-photo img,
body .team-staff .team-photo img{
  object-fit:cover !important;
  object-position:center 12% !important;
  background:transparent !important;
}
body .team-docs .team-photo img[src*="David"]{
  object-position:center 25% !important;
}
body .team-staff .team-photo img[src*="Heidi"]{
  object-position:center 8% !important;
}

/* ── 24e. LOGO SIZE + VERTICAL POSITION ──────────────────
   Sizes set at every breakpoint with the SAME visual ratio
   relative to the 64px nav bar — logo ALWAYS overflows the nav
   to feel substantial:
     desktop+:   logo height ≈ 2.0× nav-height
     tablet:     logo height ≈ 1.7× nav-height
     mobile:     logo height ≈ 1.6× nav-height
   2026-05-04: also nudge 1px down at every breakpoint —
   top of logo was clipping against nav bar's top edge. */
#nav .nav-logo img{
  height:130px !important;          /* base desktop ≈ 2.03× 64px nav */
  position:relative !important;
  top:1px !important;
}
@media (min-width:1200px){ #nav .nav-logo img{ height:150px !important; top:1px !important; } }
@media (max-width:1024px){ #nav .nav-logo img{ height:115px !important; top:1px !important; } }
@media (max-width:768px){  #nav .nav-logo img{ height:105px !important; top:1px !important; } }
@media (max-width:480px){  #nav .nav-logo img{ height:90px !important;  top:1px !important; } }

/* ──────────────────────────────────────────────────────────
   NAV FONT UNIFICATION — 2026-05-13
   Across the 20-page site the nav rules disagreed on font
   family (--sans vs --sans-sf), size (13 vs 14), and weight
   (400 vs 500). Locking every nav element to one canonical
   look so the bar reads identically on every page.
   ────────────────────────────────────────────────────────── */
#nav .nav-links a,
#nav .nav-phone,
#nav .nav-book,
#mobile-nav a,
#mobile-nav .mob-phone,
#mobile-nav .mob-book,
#mobile-nav .mob-sub-toggle,
#mobile-nav .mob-sub a,
.nav-dropdown a{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  letter-spacing:-0.005em !important;
}
#nav .nav-links a{font-size:14px !important;font-weight:500 !important;color:#3B4A5C !important}
#nav .nav-links a.active,
#nav .nav-links a:hover{color:#0F1E33 !important}
#nav .nav-phone{font-size:14px !important;font-weight:500 !important;color:#3B4A5C !important}
#nav .nav-phone:hover{color:#0F1E33 !important}
#nav .nav-book{font-size:14px !important;font-weight:600 !important}
#mobile-nav a,
#mobile-nav .mob-sub-toggle{font-size:15px !important;font-weight:500 !important}
#mobile-nav .mob-sub a{font-size:14px !important;font-weight:500 !important}
.nav-dropdown a{font-size:13.5px !important;font-weight:500 !important}

/* ──────────────────────────────────────────────────────────
   LEGIBILITY FLOOR — 2026-05-19
   Catalina flagged tiny text across the site. Establish a
   minimum readable type size so nothing requires zooming.
   Floor: 12px for body micro-copy, 11px for ALL-CAPS labels
   (caps read smaller than lowercase at the same size).
   ────────────────────────────────────────────────────────── */

/* Footer micro-copy */
#footer .foot-links a,
#footer .foot-desc,
#footer .foot-bot a,
#footer .foot-copy,
#footer .foot-legal a{ font-size:13px !important; line-height:1.6 !important }
#footer .foot-head{ font-size:11.5px !important; letter-spacing:.12em !important }
#footer .foot-ph{ font-size:14.5px !important }

/* Eyebrows + small caps labels */
.eyebrow,
.svc-eyebrow,
.section-label,
.sec-label,
.svc-kicker-text,
.team-label,
.connect-eyebrow,
.cta-ey,
.tech-ey,
.vt-eyebrow,
.rev-ey,
.loc-ey,
.doc-eyebrow{ font-size:12px !important; letter-spacing:.16em !important }

/* Service tags inside cards */
.svc-num,.svc-tag,.tech-tag,.tr-tag,.fin-card-desc,
.svc-consult-eyebrow,.svc-norefs,.svc-tag{ font-size:12px !important }

/* Plan card supporting copy */
.smile-plan-for{ font-size:12px !important }
.smile-includes li{ font-size:13.5px !important }
.smile-savings-note{ font-size:12.5px !important }

/* Insurance widget micro-copy */
.ins-disclaimer,.ins-not-listed,.ins-plan-desc,.ins-trust,
.ins-step-label,.ins-result-msg,.ins-result-badge{
  font-size:12px !important; line-height:1.55 !important;
}

/* Disclaimer text on financing + service pages */
.plan-compare-note,
.join-note,
.financing-disclaimer{
  font-size:12.5px !important; line-height:1.6 !important;
}

/* Mobile booking modal subhead and booking-page subs */
.bk-sub,.svc-cta-info,.cta-info{ font-size:13px !important }

/* Chatbot status/title */
#chat-status{ font-size:12px !important }
#chat-hd-title{ font-size:13.5px !important }
.c-msg{ font-size:13.5px !important; line-height:1.55 !important }

/* Tiny ARIA / sup elements should never be sub-11 */
sup,.sub-note,.fine-print{ font-size:11px !important }

/* Specific small offenders we hit during audit */
.implant-quiz-q,.impba-caption{ font-size:13.5px !important }
.foot-bot{ gap:14px !important }

/* ──────────────────────────────────────────────────────────
   HOME TEAM DOCTORS — equalize Dr. David vs Dr. Shawn
   2026-05-19
   Catalina: "Dr David's photo on the home page still looks bigger
   than the rest." Source photo of David is framed closer to camera
   than Shawn's, so object-fit:cover scales him up more inside the
   same 200x260 box. Apply a per-image scale to David that brings
   his head/torso proportions in line with Shawn's. Wrapper bg set
   to black to match the dark studio background of every team photo,
   so the slight inset created by the scale reads as an intentional
   frame rather than a gray seam.
   ────────────────────────────────────────────────────────── */
body #team .team-photo,
body .team-docs .team-photo,
body .team-staff .team-photo{
  background:#0a0a0a !important;
}
body .team-docs .team-photo img[alt*="David"],
body #team .team-staff .team-photo img[alt*="David"]{
  transform:scale(.88) !important;
  transform-origin:center 18% !important;
}
body .team-docs .team-card:hover .team-photo img[alt*="David"],
body #team .team-staff .team-card:hover .team-photo img[alt*="David"]{
  transform:scale(.93) !important;
}

/* ──────────────────────────────────────────────────────────
   TITLE SIZE TRIM — 2026-05-19
   Catalina: "the title fonts need to be 2pts smaller."
   Reduce major H1/H2 sizes by 2px across the site so headlines
   read with more refinement (Apple-meets-dentist aesthetic).
   ────────────────────────────────────────────────────────── */
.section-h2,
.page-hero h1,
.about-hero-h1,
.svc-h2,
.svc-hero-h1,
.tech-title,
.team-title,
.rev-h2,
.cta-h2,
.doc-h2,
.vt-h2,
.sec-title,
.fin-h2,
.connect-h2,
.sim-h2,
.videa-h2,
.section-h{
  font-size:clamp(26px, 3.4vw, 42px) !important;
  letter-spacing:-0.025em !important;
}
/* Smaller sub-headings (tech-row, etc.) get a gentler trim */
.tr-h3{ font-size:clamp(20px, 2.2vw, 28px) !important; letter-spacing:-0.02em !important }
/* Plan-card name stays compact — not a section heading */
.smile-plan-name{ font-size:20px !important; font-weight:500 !important }
@media (min-width: 1280px){
  .section-h2,.page-hero h1,.about-hero-h1,.svc-hero-h1,
  .tech-title,.team-title,.rev-h2,.cta-h2,.doc-h2,
  .vt-h2,.sec-title,.fin-h2,.connect-h2,.videa-h2{
    font-size:42px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   FINANCING SECTION HEADERS — Apple-style refinement 2026-05-19
   Single-line headlines underneath the eyebrow. Tighter rhythm.
   ────────────────────────────────────────────────────────── */
#lenders .lenders-intro--lg .section-h2,
#membership .lenders-intro .section-h2{
  font-size:clamp(28px, 3.6vw, 42px) !important;
  font-weight:500 !important;
  letter-spacing:-0.03em !important;
  line-height:1.08 !important;
  margin-bottom:12px !important;
  color:var(--ink) !important;
}
/* No italic em treatment on these (single statement) */
#lenders .lenders-intro--lg .section-h2 em,
#membership .lenders-intro .section-h2 em{
  font-style:normal !important;color:inherit !important;font-weight:500 !important;
}
/* Tighten intros */
#lenders .lenders-intro,
#membership .lenders-intro{ margin-bottom:28px !important }
#lenders .lenders-intro .eyebrow,
#membership .lenders-intro .eyebrow{ margin-bottom:14px !important }
#lenders .lenders-intro .section-sub,
#membership .lenders-intro .section-sub{
  font-size:15.5px !important;line-height:1.6 !important;
  max-width:560px !important;margin:0 auto !important;
}

/* ──────────────────────────────────────────────────────────
   TECHNOLOGY — Soft Tissue Laser solo card (no image)  2026-05-21
   Single-column info card, full width, centered content.
   ────────────────────────────────────────────────────────── */
.tech-row.tech-row--solo{
  grid-template-columns:1fr !important;
  background:#fff !important;
  border:1px solid rgba(29,62,92,.08) !important;
  box-shadow:0 4px 32px rgba(29,62,92,.08) !important;
}
.tech-row.tech-row--solo .tr-body--solo{
  padding:clamp(40px, 5vw, 72px) clamp(28px, 5vw, 80px) !important;
  max-width:780px !important;
  margin:0 auto !important;
  text-align:left !important;
}
.tr-solo-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:28px !important;
  flex-wrap:wrap !important;
}
.tr-solo-icon{
  width:56px;height:56px;
  border-radius:16px;
  background:linear-gradient(135deg,#0f3020 0%,#1f5a3a 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 4px 14px rgba(15,48,32,.22);
  flex-shrink:0;
}
.tr-solo-icon svg{ width:28px;height:28px }
.tr-solo-badge{
  display:inline-block;
  background:rgba(29,62,92,.06);
  color:var(--navy,#1D3E5C);
  border-radius:100px;
  padding:6px 14px;
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--sans);
}
@media (max-width:768px){
  .tech-row.tech-row--solo .tr-body--solo{
    padding:36px 24px !important;
  }
  .tr-solo-icon{ width:48px;height:48px;border-radius:14px }
  .tr-solo-icon svg{ width:24px;height:24px }
}

/* ──────────────────────────────────────────────────────────
   TECHNOLOGY — "Why It Matters" numbers legibility fix 2026-05-21
   Was rgba(29,62,92,.08) — invisible. Bump to a readable
   tint so 01 / 02 / 03 actually read, still secondary to copy.
   ────────────────────────────────────────────────────────── */
.wt-num{
  color:rgba(29,62,92,.32) !important;
  font-weight:500 !important;
  font-size:clamp(40px, 4.6vw, 56px) !important;
  letter-spacing:-0.02em !important;
}

/* ──────────────────────────────────────────────────────────
   CHATBOT — Online status dot  2026-05-21
   Small green pulsing indicator left of "Online — Ready to help"
   ────────────────────────────────────────────────────────── */
#chat-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
}
#chat-status::before{
  content:'';
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:ahdd-online-pulse 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes ahdd-online-pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55) }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0) }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) }
}