/* ===========================================================
   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%}
}

/* drawer v2: section labels + flat links + feature cards */
.mnav-drawer{background:#fff!important;width:min(80vw,340px)!important}
.mnav-head{border-bottom:0!important;padding:18px 22px 6px!important}
.mnav-head img{height:40px!important}
.mnav-close{color:#9A8F84!important;display:flex;align-items:center;justify-content:center}
.mnav-body{padding:4px 0 20px!important}
.mnav-sec{padding:18px 22px 4px}
.mnav-lbl{font-size:16px;color:#9A8F84;font-weight:400;margin:0 0 12px}
.mnav-body .mnav-sec>a{padding:5px 0!important;border:0!important;font-size:18px!important;font-weight:400!important;color:#3B2A1C!important;background:none!important}
.mnav-body .mnav-sec>a:active{color:#8B7355!important}
.mnav-feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.mnav-body a.mnav-card{display:flex!important;flex-direction:column;padding:0!important;border:0!important;border-radius:14px;overflow:hidden;background:#fff!important;box-shadow:0 6px 20px rgba(80,60,40,.08)}
.mnav-card-img{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:linear-gradient(120deg,#F3E6D6,#FBF4EC 45%,#F7EDE6 70%,#EFE2D2)}
.mnav-card-img img{width:46%;height:auto;object-fit:contain}
.mnav-card-t{padding:10px 12px 2px;font-size:18px;font-weight:600;color:#3B2A1C;line-height:1.2}
.mnav-card-d{padding:0 12px 12px;font-size:14px;font-weight:400;color:#9A8F84;line-height:1.3}
.mnav-foot{border-top:0!important;padding:8px 22px 24px!important}
.mnav-cta{border-radius:999px!important;background:linear-gradient(125deg,#B09786,#CCB2A0 14%,#937C6B 32%,#6F5949 50%,#937C6B 68%,#CCB2A0 86%,#826B5B)!important;font-weight:500!important}
.mnav-body a.mnav-pill{display:inline-flex!important;align-items:center;height:46px;padding:0 24px!important;margin:6px 0 4px;border-radius:999px;background:linear-gradient(110deg,#F3E6D6 0%,#FBF4EC 35%,#F7EDE6 60%,#EFE2D2 100%)!important;color:#3B2A1C!important;font-size:18px!important;font-weight:500!important}
.mnav-body .mnav-sec>a.mnav-ci{display:flex!important;align-items:center;gap:12px;padding:7px 0!important}
.mnav-ci svg{width:20px;height:20px;flex:none;color:#4A3828}
.mnav-rev{border-top:1px solid rgba(196,168,130,.25);margin:14px 22px 0;padding:18px 0 4px!important}
.mnav-g{display:flex;align-items:center;gap:8px;font-size:18px;color:#3B2A1C}
.mnav-g svg{width:26px;height:26px}
.mnav-g b{font-weight:600}.mnav-g i{color:#F2B705;font-style:normal}
.mnav-foot:empty,.mnav-foot:not(:has(*)){display:none!important}
.mnav-head{gap:8px!important}.mnav-head>img{margin-right:auto}
.mnav-langdd{position:relative}
.mnav-langbtn{display:flex;align-items:center;gap:6px;height:40px;padding:0 6px;border:0;background:none;cursor:pointer;color:#3B2A1C}
.mnav-drawer .flag{width:28px;height:19px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mnav-caret2{font-size:13px}
.mnav-langmenu{position:absolute;right:0;top:44px;min-width:150px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(60,45,30,.16);padding:6px;display:none;z-index:5}
.mnav-langdd.open .mnav-langmenu{display:block}
.mnav-langmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;font:inherit;font-size:17px;color:#3B2A1C;border-radius:8px;cursor:pointer;text-align:left}
.mnav-langmenu button:active{background:#F7EFE5}
.mnav-ci svg path,.mnav-ci svg circle{fill:currentColor}
.mnav-foot{display:none!important}