/* =========================================================
   Dent-O-Care · responsive layer (Complete Website Version 06) · loaded last on every page
   Desktop (1200px and up) is the approved design and is not changed here.

   Breakpoint system
     1920+  large desktop   content keeps its approved max width, centred
     1440   desktop         approved design
     1280   laptop          approved design (nav already compacts at 1240)
     1024   tablet landscape / small laptop (901-1199): desktop layouts, tuned below
      768   tablet portrait (761-900): stacked tablet layouts from the page stylesheets
      390   mobile (380-760): mobile layouts, tuned below
      320   small mobile (<=379): tightened type and full-width actions
   (The page stylesheets' old 1024px "tablet" rules start at 900px from this version on, so a
    1024px tablet or small laptop gets the desktop composition instead of the phone stack.)
   ========================================================= */

/* ---------- all sizes: headings never leave a single word on a line; paragraphs avoid orphans ---------- */
h1, h2, h3, .h2 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
/* split headings settle into normal text flow after their reveal (site.js), so they re-wrap on resize/rotation */
.split.settled .ln { display: inline; overflow: visible; padding: 0; margin: 0; }
.split.settled .ln > span { display: inline; transform: none !important; transition: none !important; }

/* ---------- touch devices: clear pressed state instead of hover ---------- */
@media (hover: none) {
  .btn:active, .cw-b:active, .sv6-cat:active, .tlink:active, .tc-link:active, .area-list a:active { transform: scale(.97); opacity: .9; }
  .btn, .cw-b, .sv6-cat, .tlink, .tc-link { -webkit-tap-highlight-color: transparent; transition-property: transform, opacity, background, color, border-color; }
}

/* =========================================================
   TABLET LANDSCAPE / SMALL LAPTOP  901px - 1199px
   ========================================================= */
@media (min-width: 901px) and (max-width: 1199px) {
  :root { --gutter: 32px; --sec: clamp(76px, 8.5vw, 100px); }
  /* header: full navigation stays on one line */
  .nav-links { gap: 16px; }
  .nav-links a, .dd-t { font-size: 13.5px; }
  .nav .btn { padding-left: 16px; font-size: 13.5px; }
  /* heroes: two-column composition kept, type scaled to the narrower columns */
  .hero-in { gap: 28px; }
  #h1 { font-size: clamp(34px, 4.1vw, 46px); }
  .phero-in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 36px; }
  .phero #h1 { font-size: clamp(32px, 3.9vw, 44px); }
  .phero #h1.h1-long { font-size: clamp(30px, 3.5vw, 40px); }
  .sv6-in #h1 { font-size: clamp(36px, 4.6vw, 52px); }
  .ph-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  /* homepage trust strip: 2 x 2 instead of four squeezed columns */
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item::before { display: none; }
  .trust-item:nth-child(2n)::before { display: block; top: 18px; bottom: 18px; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  /* footer: 2 x 2 columns */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px 48px; }
  /* contact page: the information panel gets more room */
  .ct-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ct-hours dt, .ct-hours dd { font-size: 13.5px; }
}

/* =========================================================
   TABLET PORTRAIT  761px - 900px
   ========================================================= */
@media (min-width: 761px) and (max-width: 900px) {
  :root { --gutter: 32px; --sec: 84px; }
  #h1 { font-size: clamp(36px, 5.2vw, 44px); }
  .phero #h1.h1-long { font-size: clamp(32px, 4.6vw, 40px); }
  /* hero visuals sit below the copy, centred and not oversized */
  .hero-visual { max-width: 500px; margin-inline: auto; }
  .ph-doc, .ph-clinic { max-width: 420px; }
  /* treatment and service grids: two balanced columns */
  .sv-grid, .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-loc-head { grid-template-columns: minmax(0, 1fr); }
  /* small labels stay legible on tablets */
  .gc-k, .hc-s, .dc-t small, .doc-chip small, .cred-card .cl, .ab-stats li span, .ab-video .vt, .tc-body .chip, .chip, .fq-count, .fcat .k-mono, .cw-num small, .ct-status small, .ct-areas h3.k-mono, .hero-proof dt, .stat small, .k-mono { font-size: 11.5px; }
  .tlink, .tc-link, .fc-more, .ct-all, .area-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer ul a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .logo, .ci-big { min-height: 44px; display: inline-flex; align-items: center; }
  .sv-mini .k-mono, .tp-tag, .ba-lbl, .gallery figcaption, .ph-chip2, .glass-stat .gs-t, .rs-tile figcaption span { font-size: 11.5px; }
}

/* =========================================================
   MOBILE  up to 760px
   ========================================================= */
@media (max-width: 760px) {
  /* type: compact, readable headings; nothing below ~12px for real content */
  #h1 { font-size: clamp(30px, 8.2vw, 36px); line-height: 1.08; }
  .phero #h1.h1-long { font-size: clamp(27px, 7.4vw, 32px); }
  .sv6-in #h1 { max-width: none; font-size: clamp(31px, 8.4vw, 38px); }
  .h2, h2.h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .display-2 { font-size: clamp(28px, 7.8vw, 36px); }
  .cta .btn, .cta-sec .btn { justify-content: center; width: 100%; white-space: nowrap; }
  .eyebrow.pill, .gc-k, .hc-s, .tc-body .chip, .tp-tag, .vid-tag, .ph-chip2, .hs-hint, .vt,
  .sv-more-h, .ex-tag, .ct-status small, .ct-areas h3.k-mono, .k-mono, .gs-t, .pm-tag .k-mono, .cw-num small { font-size: 11.5px; }
  .hero-proof dt, .trust-item dt, dl dt { font-size: 11.5px; }
  .glass-stat .gs-t, .cred-card .cl, .ab-stats li span, .ab-video .vt, .sv-mini .k-mono, .rs-tile figcaption span, .story footer small, .story small { font-size: 11.5px; }
  .gallery figcaption, .glass-stat .gs-t { font-size: 11.5px; }
  figcaption, .ba-lbl, .ph-card small, .ct-status small, .res-cap, .rc-cap, [class*="cap"] { font-size: 12px; }
  .dc-t small, .doc-chip small, .cred-k, .cred-card small, .stat small, .infra small, .infra span, .ph-card span, .hs-card small, .sv-item .chip, .chip, .fcat .k-mono, .fq-count, .cw-num small { font-size: 11.5px; letter-spacing: .08em; }
  /* tap targets: every link and button is at least 44px tall */
  .tlink, .tc-link, .fc-more, .ct-all, .ci-big, .hc-link, .ulink { display: inline-flex; align-items: center; min-height: 44px; }
  .tc-link { width: 100%; }
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .footer ul li + li { margin-top: 0; }
  .area-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .burger { min-width: 44px; min-height: 44px; }
  .mnav a, .mnav summary { min-height: 48px; }
  /* buttons never overflow: they wrap their label and fill the row when needed */
  .btn { max-width: 100%; white-space: normal; text-align: left; }
  .phero-ctas .btn, .ct-submit .btn, .ct-all { justify-content: center; }
  /* mobile menu: comfortable rows */
  .mnav a { min-height: 48px; display: flex; align-items: center; }
  /* section rhythm */
  :root { --sec: 64px; }
  .sec-head { gap: 14px; }
  /* contact page order: information, then the appointment form, then the map */
  .ct-grid { display: flex; flex-direction: column; gap: 22px; }
  .ct-info { order: 1; } .ct-form-card { order: 2; }
  .ct-map iframe { width: 100%; }
  .ci-pair .btn { flex: 1 1 0; justify-content: center; }
  /* FAQ: question text wraps and the toggle stays visible */
  .fq h4 button, .faq-item button, .acc button { align-items: flex-start; gap: 14px; }
  .fq-ic, .acc-ic { flex: none; }
}

/* =========================================================
   SMALL MOBILE  up to 379px (320-375)
   ========================================================= */
@media (max-width: 379px) {
  :root { --gutter: 16px; }
  #h1 { font-size: 28px; }
  .phero #h1.h1-long { font-size: 25px; }
  .sv6-in #h1 { font-size: 29px; }
  .h2, h2.h2 { font-size: 25px; }
  .display-2 { font-size: 26px; }
  .cta { padding-left: 20px; padding-right: 20px; }
  .cta .btn, .cta-sec .btn { white-space: nowrap; font-size: 13.5px; }
  .lead { font-size: 15.5px; }
  .btn { padding-left: 18px; font-size: 14px; }
  .phero-ctas .btn, .ct-submit .btn, .ct-all, .f-cta { width: 100%; }
  .cw-num { font-size: 14px; }
  .nav .btn { font-size: 13px; }
  .trust-item { padding: 18px 12px; }
  .ct-map-wide .ct-map-loading, .ct-map-wide iframe { height: 300px; }
}

/* very large screens: keep the approved composition, just centred with breathing room */
@media (min-width: 1920px) {
  .atmo-b.b1 { width: 900px; }
  .atmo-b.b2 { width: 760px; }
}