/* ===========================================================
   DC Dental — Global responsive layer
   Loaded last on every page. Uses !important because page
   styles are inlined after this file in the document head.
   Breakpoints: 1180 (small laptop) · 1024 (iPad landscape)
                900 (iPad portrait) · 700 (large phone) · 480 (phone)
   =========================================================== */

img,svg,video,iframe{max-width:100%}
img{height:auto}
html{-webkit-text-size-adjust:100%}

/* ---------- Mobile nav drawer (built by mobile-nav.js) ---------- */
.mnav-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;margin-left:auto;flex:0 0 auto;color:#6B5A45}
.mnav-btn span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:background .2s}
.mnav-btn span::before,.mnav-btn span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.mnav-btn span::before{top:-7px}
.mnav-btn span::after{top:7px}
body.mnav-open .mnav-btn span{background:transparent}
body.mnav-open .mnav-btn span::before{transform:translateY(7px) rotate(45deg)}
body.mnav-open .mnav-btn span::after{transform:translateY(-7px) rotate(-45deg)}
.mnav-scrim{position:fixed;inset:0;background:rgba(45,35,25,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:2400}
body.mnav-open .mnav-scrim{opacity:1;visibility:visible}
.mnav-drawer{position:fixed;top:0;right:0;height:100%;width:min(86vw,360px);background:#FFFDF8;z-index:2500;transform:translateX(102%);transition:transform .34s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(60,45,30,.18);overscroll-behavior:contain}
body.mnav-open .mnav-drawer{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(196,168,130,.28)}
.mnav-head img{height:44px;width:auto}
.mnav-close{width:44px;height:44px;border:0;background:transparent;font-size:26px;line-height:1;color:#6B5A45;cursor:pointer}
.mnav-drawer,.mnav-drawer *{box-sizing:border-box}
.mnav-body{display:block!important;width:100%!important;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 24px}
.mnav-body a{display:block;padding:14px 20px;font-size:19px;font-weight:600;color:#3D2E1C;text-decoration:none;border-bottom:1px solid rgba(196,168,130,.16)}
.mnav-body a:hover,.mnav-body a:active{background:rgba(196,168,130,.14);color:#8B7355}
.mnav-group>.mnav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;font:inherit;font-size:19px;font-weight:700;color:#3D2E1C;background:transparent;border:0;border-bottom:1px solid rgba(196,168,130,.16);cursor:pointer;text-align:left}
.mnav-toggle .mnav-caret{transition:transform .25s;font-size:14px;color:#8B7355}
.mnav-group.open .mnav-caret{transform:rotate(180deg)}
.mnav-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(196,168,130,.07)}
.mnav-group.open .mnav-sub{max-height:640px}
.mnav-sub a{padding-left:36px;font-size:18px;font-weight:500}
.mnav-foot{padding:16px 20px 22px;border-top:1px solid rgba(196,168,130,.28);display:flex;flex-direction:column;gap:10px}
.mnav-cta{display:flex;align-items:center;justify-content:center;padding:14px;border-radius:10px;background:linear-gradient(135deg,#C4A882,#8B7355);color:#fff!important;font-weight:700;font-size:19px;text-decoration:none}
.mnav-social{display:flex;gap:14px;justify-content:center;padding-top:4px}
.mnav-social a{padding:8px!important;border:0!important}
.mnav-lang{display:flex;gap:8px;justify-content:center}
.mnav-lang a{padding:8px 16px!important;border:1px solid rgba(196,168,130,.4)!important;border-radius:6px;font-size:17px}

@media(max-width:900px){
  nav.nav>ul{display:none!important}
  nav.nav .mnav-btn{display:flex!important;color:#fff}
  nav.nav>.btn-nav{display:none!important}
  nav#nav .mnav-btn{color:currentColor}
  nav#nav .nav-in{align-items:center}
  .pan p{height:auto!important}
  .pan{margin-top:min(250px,26vh)!important}
  .doc-card{grid-template-columns:1fr!important}
  .doc-card>*,.tl-row>*{min-width:0!important}
}

/* ===================== ≤1180px — small laptop ===================== */
@media(max-width:1180px){
  .dr-grid>*,.dr-card>*{min-width:0!important}
  .dr-card{min-width:0!important;max-width:100%!important;padding:20px 22px!important;gap:16px!important}
  .v3frame{max-width:100%!important}
  .page-wrap{padding-left:28px!important;padding-right:28px!important;gap:28px!important}
  .container,.section{padding-left:28px!important;padding-right:28px!important}
  .nav-list{gap:14px!important}
  .nav-list>li>a{font-size:17px!important}
}

/* ===================== ≤1024px — iPad landscape ===================== */
@media(max-width:1024px){
  nav{gap:12px!important}
  .dr-grid,.plans-grid{grid-template-columns:1fr 1fr!important}
  .case-grid{grid-template-columns:repeat(3,1fr)!important}
  .related-grid{grid-template-columns:repeat(2,1fr)!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px!important}
  .hero-inner{gap:28px!important}
  h1{font-size:clamp(30px,4.4vw,46px)!important}
}

/* ===================== ≤900px — iPad portrait / tablet ===================== */
@media(max-width:900px){
  .topbar{display:none!important}
  .nav-list{display:none!important}
  .mnav-btn{display:flex!important}
  header nav{padding:0 20px!important;height:70px!important;display:flex!important;align-items:center!important;gap:12px!important}
  header nav>a:first-child img{height:52px!important}
  .btn-nav{display:none!important}

  .page-wrap{grid-template-columns:1fr!important;padding:24px 22px 60px!important}
  .sidebar{position:static!important;order:2}
  .toc,.toc-box{position:static!important}
  .page-hero,.page-hero-in{padding:18px 22px 0!important}

  .hero{padding:36px 22px 56px!important}
  .hero-inner{grid-template-columns:1fr!important;gap:28px!important}
  .hero-chips{position:static!important;transform:none!important;flex-direction:row!important;flex-wrap:wrap!important;margin-top:16px!important}
  .section{padding:48px 22px!important}
  .about-grid,.tech-layout,.contact-grid{grid-template-columns:1fr!important}
  .svc-grid,.team-grid,.dr-grid{grid-template-columns:1fr 1fr!important}
  .ins-grid,.testi-grid{grid-template-columns:1fr 1fr!important}
  .plans-grid,.why-grid,.freebies-grid{grid-template-columns:1fr!important}
  .stats-inner{flex-wrap:wrap!important;justify-content:center!important;gap:22px!important}
  .ctabar-inner{flex-wrap:wrap!important;height:auto!important;padding:18px 22px!important;gap:14px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .contact-map{min-height:300px!important}

  /* grid/flex children must be allowed to shrink */
  .about-grid>*,.hero-inner>*,.page-wrap>*,.contact-grid>*,.tech-layout>*,.svc-grid>*,.team-grid>*{min-width:0!important}
  .about-img-placeholder,.hero-img-placeholder,.about-img-col{width:100%!important;max-width:100%!important}
  .about-img-placeholder{height:auto!important;aspect-ratio:1/1!important}
  image-slot{max-width:100%!important}

  /* card grids: never let a fixed-width child force the page wide */
  .layer-card,.symptom-card,.imp-card,.reason-card,.age-card,.pkg-card,.branch-card,.dr-card,.why-card,.plan-card,.blog-card,.svc-card,.testi-card{min-width:0!important;max-width:100%!important}
  .layer-card>*,.symptom-card>*,.imp-card>*,.reason-card>*,.age-card>*,.pkg-card>*,.branch-card>*,.why-card>*,.plan-card>*{min-width:0!important}
  .layer-grid,.symptom-grid,.imp-grid,.reason-grid,.age-grid,.pkg-grid,.branch-grid{grid-template-columns:1fr 1fr!important}

  /* inline-styled grids (footer, feature rows) collapse to 2 up */
  footer>div{padding:44px 22px 18px!important}
  div[style*="grid-template-columns:1fr 1fr 1fr"],div[style*="grid-template-columns: 1fr 1fr 1fr"],div[style*="grid-template-columns:repeat(3"],div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important;gap:24px!important}

  /* chip / pill nav rows wrap instead of overflowing */
  .chip-nav,.line-cta-btns,.hero-chips,.badge-row,.tag-row{flex-wrap:wrap!important}
  .chip-nav{gap:8px!important}

  /* tables scroll instead of squeezing */
  table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .price-table,.tbl-wrap{overflow-x:auto!important}
}

/* ===================== ≤700px — large phone ===================== */
@media(max-width:700px){
  header nav{height:64px!important;padding:0 16px!important}
  header nav>a:first-child img{height:46px!important}
  .page-wrap{padding:20px 16px 48px!important}
  .section{padding:40px 16px!important}
  .hero{padding:28px 16px 44px!important}
  .container{padding-left:16px!important;padding-right:16px!important}

  .svc-grid,.team-grid,.dr-grid,.ins-grid,.testi-grid,.related-grid,.why-grid{grid-template-columns:1fr!important}
  .layer-grid,.symptom-grid,.imp-grid,.reason-grid,.age-grid,.pkg-grid,.branch-grid{grid-template-columns:1fr!important}

  /* legible badges + comfortable tap targets on phones */
  .plan-badge,.tag-best,.tag-win,.pkg-num,.pkg-badge,.layer-num,.branch-tag,.blog-tag,.blog-date,.rv-badge,.meta,.lb,.label{font-size:13px!important}
  .cc-map,.price-cta,.rev-link,.ig-link,.blog-more,.read-more{display:inline-flex!important;align-items:center!important;min-height:40px!important}
  a[href^="tel:"],a[href^="https://line.me"],a[href*="maps"],.ci a,.contact-info a{display:inline-flex!important;align-items:center!important;min-height:40px!important}

  .case-grid{grid-template-columns:1fr 1fr!important}
  div[style*="grid-template-columns:1fr 1fr 1fr"],div[style*="grid-template-columns: 1fr 1fr 1fr"],div[style*="grid-template-columns:repeat(3"],div[style*="grid-template-columns:repeat(4"],div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  footer>div{padding:36px 16px 16px!important}
  .dr-card{flex-direction:row!important;text-align:left!important;align-items:center!important;padding:16px 16px!important;gap:14px!important}
  .stats-inner{flex-direction:column!important;gap:18px!important}
  .stat-sep{width:48px!important;height:1px!important}
  .testi-track>.testi-card{flex:0 0 86%!important}
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .footer-bottom{flex-direction:column!important;gap:6px!important}
  .line-cta-box{padding:24px 18px!important}
  .line-cta-btns{flex-direction:column!important;width:100%!important;align-items:stretch!important}
  .line-btn{width:100%!important;justify-content:center!important}
  .float-cta{bottom:16px!important;right:16px!important}
  .float-btn{width:52px!important;height:52px!important}

  h1{font-size:clamp(26px,7vw,34px)!important;line-height:1.3!important}
  h2{font-size:clamp(23px,6vw,30px)!important}
  h3{font-size:20px!important}
  .article-content p,.section-block p,p{font-size:18px}

  /* generous tap targets */
  a.btn,.btn,.btn-nav,button{min-height:44px}
}

/* ===================== ≤480px — phone ===================== */
@media(max-width:480px){
  .page-wrap{padding:16px 14px 44px!important}
  .section{padding:34px 14px!important}
  .case-grid{grid-template-columns:1fr!important}
  .plan-card,.section-block,.sidebar-box{padding:18px 16px!important}
  .ctabar-inner{flex-direction:column!important;align-items:stretch!important;text-align:center!important}
  .mnav-drawer{width:100%}
}