/* ===========================================================
   DC Dental — Mobile & tablet layer v2  (≤1024px only)
   Desktop (>1024px) is untouched.
   Loaded after responsive.css.
   =========================================================== */
@media(max-width:1024px){

/* ---------- 1. Header: bigger logo, no CTA button (it lives in the drawer) ---------- */
.topbar{display:none!important}
.nav-list,nav.nav>ul,nav#nav .nlinks{display:none!important}
.mnav-btn{display:flex!important}
header nav>.btn-nav,nav.nav>.btn-nav{display:none!important}
header nav{height:74px!important;padding:0 18px!important;gap:14px!important}
header nav>a:first-child img{height:58px!important}
.mnav-btn{width:46px!important;height:46px!important}

/* ---------- 2. Type scale & page gutters ---------- */
body{font-size:18px}
.page-wrap{grid-template-columns:1fr!important;padding:20px 18px 56px!important;gap:26px!important}
.section{padding:44px 18px!important}
.container{padding-left:18px!important;padding-right:18px!important}
.page-hero,.page-hero-in{padding:16px 18px 0!important}
.article-content p,.section-block p,.sdesc,.sidebar-box p{font-size:18px!important;line-height:1.75!important}
h1{font-size:clamp(27px,7vw,36px)!important;line-height:1.3!important}
h2,.stitle{font-size:clamp(24px,6vw,32px)!important;line-height:1.28!important}
h3{font-size:21px!important}
h4{font-size:19px!important}
.eyebrow{font-size:15px!important;letter-spacing:.12em!important;justify-content:center}
.eyebrow::before{display:none!important}
.section-block,.sidebar-box,.plan-card,.why-card-body,.toc,.toc-box{padding:20px 18px!important}

/* ---------- 3. Everything single column (iPad included) ---------- */
.svc-grid,.team-grid,.dr-grid,.ins-grid,.testi-grid,.related-grid,.why-grid,.plans-grid,
.freebies-grid,.case-grid,.about-grid,.tech-layout,.contact-grid,.blog-grid,.home-blog-grid,
.layer-grid,.symptom-grid,.imp-grid,.reason-grid,.age-grid,.branch-grid,.cred{grid-template-columns:1fr!important}
.sidebar{position:static!important;order:2}

/* ---------- 4. Chip nav: a real horizontal scroller, edge to edge ---------- */
.chip-nav{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  margin-left:-18px!important;margin-right:-18px!important;padding:4px 18px 12px!important;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.chip-nav a{flex:0 0 auto!important;scroll-snap-align:start;padding:10px 18px!important;font-size:17px!important}

/* ---------- 5. LINE / Facebook CTA box: stack, never squeeze the text ---------- */
.line-cta-box{flex-direction:column!important;align-items:stretch!important;padding:22px 18px!important;gap:16px!important}
.line-cta-box .line-cta-text{width:100%!important;flex:0 0 auto!important;text-align:center}
.line-cta-box h3{font-size:20px!important}
.line-cta-box p{font-size:17px!important}
.line-cta-btns{flex-direction:column!important;width:100%!important;flex-shrink:1!important;gap:10px!important}
.line-cta-box .line-btn,.line-cta-box .fb-btn{width:100%!important;min-width:0!important;padding:15px 18px!important}

/* ---------- 6. Home hero: doctors photo first, full bleed ---------- */
.hero{padding:0 0 30px!important;overflow:hidden}
.hero-inner{display:flex!important;flex-direction:column!important;gap:0!important}
.hero-visual{order:-1;width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.hero-visual .hero-img-placeholder{border-radius:0!important;width:100%!important;aspect-ratio:5/4!important;height:auto!important;margin:0!important}
.hero-visual .hero-img-placeholder image-slot::part(frame){-webkit-mask-image:none!important;mask-image:none!important}
.hero-text{padding:26px 18px 0!important;text-align:center}
.hero-text h1{font-size:clamp(30px,8vw,40px)!important;margin-bottom:16px!important}
.hero-rating{margin:0 auto!important}
.hero-chips{position:static!important;transform:none!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-top:18px!important}
.hero-btns{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
.hero-btns a{text-align:center}

/* ---------- 7. CTA band: one full-width booking button ---------- */
.ctabar{margin-top:0!important}
.ctabar-inner{flex-direction:column!important;height:auto!important;padding:16px 18px!important;gap:0!important}
.ctabar-item,.ctabar-sep{display:none!important}
.ctabar-btn{width:100%!important;justify-content:center!important;text-align:center;padding:16px 18px!important;font-size:19px!important}

/* ---------- 8. Review / case cards: photo full width on top ---------- */
.testi-card,.case-card,.review-card,.mv2-stack{flex-direction:column!important;align-items:stretch!important}
.testi-card img,.testi-photo,.case-photo,.review-photo,.mv2-stack>img,.mv2-stack>.mv2-media{
  width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:cover;border-radius:12px!important;margin:0 0 14px!important}
.testi-quote,.testi-who{width:100%!important}
.testi-track>.testi-card{flex:0 0 88%!important}

/* ---------- 9. Price / comparison tables → cards (built by mobile-v2.js) ---------- */
.mv2-cards{display:flex;flex-direction:column;gap:12px;margin:16px 0 22px}
.mv2-card{background:#FFFDF8;border:1px solid rgba(196,168,130,.35);border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(140,115,85,.06)}
.mv2-card-title{font-size:19px;font-weight:700;color:#3D2E1C;line-height:1.35;margin-bottom:6px}
.mv2-card-lead{font-size:26px;font-weight:700;color:#8B7355;line-height:1.2;margin-bottom:10px}
.mv2-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid rgba(196,168,130,.22);font-size:17px}
.mv2-row .k{color:#7A6348;flex:0 0 auto;font-weight:600}
.mv2-row .v{color:#3D2E1C;text-align:right}
.mv2-hidden{display:none!important}
.mv2-onecol{grid-template-columns:1fr!important;gap:14px!important}
.mv2-onecol>*{min-width:0!important}
.mv2-onecol .img-placeholder,.mv2-onecol img,.mv2-onecol image-slot{width:100%!important;max-width:100%!important}
.mv2-hide-table,table.mv2-hide-table{display:none!important}

/* ---------- 10. Package cards: featured one first, rest behind a button ---------- */
.pkg-card{min-width:0!important;max-width:100%!important}
.pkg-name{font-size:20px!important;line-height:1.35!important}
.pkg-price{font-size:26px!important}
.pkg-items li{font-size:17px!important}
.mv2-more{display:block;width:100%;margin:6px 0 18px;padding:14px;border:1.5px solid rgba(196,168,130,.55);border-radius:12px;background:#FFFDF8;
  font:inherit;font-size:18px;font-weight:700;color:#8B7355;cursor:pointer}
.mv2-more:active{background:rgba(196,168,130,.14)}

/* ---------- 11. Timelines: line stays glued to the dots, arrows off ---------- */
.tl-line{left:9px!important;width:2px!important;margin:0!important}
.tl-row{grid-template-columns:1fr!important;padding-left:34px!important}
.igx-step::after,.igx-step:not(:last-child)::after{display:none!important}
.igx-arrow{display:none!important}
.ig-step,.igx-step{min-width:0!important}

/* ---------- 12. Floating buttons: smaller, out of the way ---------- */
.float-cta{bottom:14px!important;right:12px!important;gap:8px!important}
.float-btn{width:44px!important;height:44px!important;box-shadow:0 3px 12px rgba(0,0,0,.2)!important}
.float-btn svg{width:20px!important;height:20px!important}

/* ---------- 13. Footer: tighter, services in two columns ---------- */
footer>div{padding:34px 18px 14px!important}
footer h3,footer h4{font-size:18px!important;margin-bottom:10px!important}
footer p,footer a,footer .ci{font-size:17px!important;line-height:1.55!important}
footer .ci{margin-bottom:8px!important}
footer .footer-grid{gap:22px!important}
.mv2-cols{column-count:2;column-gap:18px}
.mv2-cols>a{display:block;break-inside:avoid;padding:7px 0!important;font-size:17px!important}
.footer-bottom{flex-direction:column!important;align-items:center!important;text-align:center;gap:4px!important;font-size:15px!important;padding-top:14px!important}
}

@media(max-width:480px){
  .page-wrap{padding:18px 16px 48px!important}
  .section{padding:38px 16px!important}
  .container{padding-left:16px!important;padding-right:16px!important}
  .chip-nav{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important}
}