/* ==========================================================================
   responsive.css  ·  standard breakpoints  (1440 · 1200 · 992 · 768 · 576 · 400)
   ========================================================================== */

@media (max-width:1440px){ :root{ --max:1200px; } }

/* 1200 — laptop */
@media (max-width:1200px){
  .hero-card--tl{left:-2%;}
  .hero-card--br{right:-2%;}
}

/* 992 — small laptop: nav off-canvas, hero stacks */
@media (max-width:992px){
  /* header collapses to logo-left + burger-right */
  .hdr{grid-template-columns:1fr auto;}
  .hdr-book{display:none;}
  .hdr-burger{display:flex;}
  /* centered nav box becomes the off-canvas drawer */
  .hdr-nav{position:fixed;inset:0 0 0 auto;justify-self:auto;width:min(84vw,360px);height:100svh;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem;
    padding:3rem 2.5rem;border-radius:0;background:var(--ivory);
    transform:translateX(100%);transition:transform .5s var(--ease);
    box-shadow:-20px 0 60px rgba(33,28,78,.18);z-index:95;}
  .hdr-nav.is-open{transform:translateX(0);}
  .hdr-link{font-size:1.5rem;}
  .hdr-nav-book{display:inline-flex;margin-top:.6rem;font-size:.85rem;}
  body.nav-lock{overflow:hidden;}

  .hero{min-height:auto;padding-top:8rem;padding-bottom:4rem;text-align:center;}
  .hero-grid{grid-template-columns:1fr;gap:3rem;}
  .hero-copy{order:1;display:flex;flex-direction:column;align-items:center;}
  .hero-actions{justify-content:center;}
  .hero-desc{margin-inline:auto;}
  .hero-visual{order:2;max-width:420px;margin-inline:auto;}
  /* pull all 4 badges INSIDE the visual bounds so they never go off-screen */
  .hero-card{padding:.6rem .85rem;gap:.65rem;}
  .hero-card-ico{width:36px;height:36px;font-size:.95rem;}
  .hero-card-main{font-size:1rem;}
  .hero-card-top{font-size:.85rem;}
  .hero-card--tl{top:8%;left:0;}
  .hero-card--tr{top:5%;right:0;}
  .hero-card--bl{bottom:22%;left:0;}
  .hero-card--br{bottom:10%;right:0;}

  /* intro → stack */
  .intro-grid{grid-template-columns:1fr;gap:3rem;}
  .intro-figure{max-width:480px;}

  /* dental → stack (photo first, then index) */
  .dental-grid{grid-template-columns:1fr;gap:3.5rem;}
  .dental-body{order:2;}
  .dental-figure{order:1;max-width:560px;}

  /* aesthetics → stack (photo first, then index) */
  .aes-grid{grid-template-columns:1fr;gap:3.5rem;}
  .aes-figure{max-width:360px;margin-inline:auto;}
  .aes-figure::before{display:none;}

  /* about → stack */
  .about-grid{grid-template-columns:1fr;gap:4.5rem;}
  .about-visual{max-width:520px;}

  /* proof → stack */
  .proof-grid{grid-template-columns:1fr;gap:3rem;}
  .proof-ig{max-width:480px;}

  /* footer → stack (info, then map) */
  .ftr-top{grid-template-columns:1fr;}
  .ftr-map{min-height:300px;order:2;}
}

/* 768 — tablet: keep only 2 hero badges (TL & BR), shrink visual a touch */
@media (max-width:768px){
  .hero-name{font-size:clamp(3rem,13vw,4.5rem);}
  .hero-visual{max-width:380px;}
  .hero-card--tr,.hero-card--bl{display:none;}
  .hero-card--tl{top:6%;left:0;}
  .hero-card--br{bottom:8%;right:0;}
  .index-list--two{grid-template-columns:1fr;}
  .index-list--two .index-col:last-child .index-row:first-child{border-top:none;}
  .feats{grid-template-columns:1fr;gap:1.2rem;}
  .ftr-cols{grid-template-columns:1fr 1fr;}
  .ftr-bottom{flex-direction:column;align-items:flex-start;}
}

/* 576 — smartphone: hide ALL hero badges for a clean photo-only hero */
@media (max-width:576px){
  .btn{width:100%;}
  .hero-actions{flex-direction:column;width:100%;}
  .hero-actions .btn{width:100%;}
  .hero-visual{max-width:320px;}
  .hero-card{display:none;}
  .intro-note{position:static;margin-top:1.5rem;max-width:100%;left:0;bottom:0;}
  .dental-badge{position:static;margin-top:1.5rem;max-width:100%;left:0;bottom:0;}
  .aes-badge{position:static;margin-top:1.5rem;max-width:100%;right:0;bottom:0;}
  .about-frame{display:none;}
  .about-quote{position:static;margin-top:1.5rem;max-width:100%;left:0;bottom:0;}
}

/* 400 — small phone */
@media (max-width:400px){
  :root{--pad-x:1.1rem;}
  .hdr-logo img{height:42px;}
  .hero-kicker{font-size:.66rem;letter-spacing:.2em;}
  .hero-visual{max-width:280px;}
}


/* ==========================================================================
   INNER PAGES — append starts here (about · contact)
   ========================================================================== */

/* 1200 — laptop */
@media (max-width:1200px){
  .philosophy-grid{gap:1.4rem;}
  .next-grid{gap:1.3rem;}
  .contact-info{top:5.5rem;}
}

/* 992 — small laptop: heros stack, two-cols become single column */
@media (max-width:992px){
  /* page hero stacks */
  .ph-grid{grid-template-columns:1fr;gap:3rem;text-align:center;}
  .ph-copy .eyebrow{justify-content:center;}
  .ph-copy .lead{margin-inline:auto;}
  .ph-meta{justify-content:center;}
  .ph-visual{max-width:380px;margin-inline:auto;}
  .ph-tag{left:50%;transform:translateX(-50%);}
  .ph-deco{display:none;}

  /* story stacks (head above, body below) — text-only section */
  .about-story-grid{grid-template-columns:1fr;gap:1.6rem;}
  .about-story-head{position:static;top:auto;}

  /* services 2-col → 1-col */
  .services-grid{grid-template-columns:1fr;gap:3rem;}

  /* founder stacks (portrait above, body below) */
  .founder-grid{grid-template-columns:1fr;gap:3rem;}
  .founder-figure{max-width:360px;margin-inline:auto;}
  .founder-figure::before{inset:-1rem 1rem 1rem -1rem;}

  /* philosophy 3-col → 2-col */
  .philosophy-grid{grid-template-columns:1fr 1fr;}

  /* contact main stacks */
  .contact-grid{grid-template-columns:1fr;gap:3rem;}
  .contact-info{position:static;top:auto;}

  /* next 3-col → 1-col (sequential steps) */
  .next-grid{grid-template-columns:1fr;gap:1.2rem;}
}

/* 768 — tablet */
@media (max-width:768px){
  /* form rows stack */
  .contact-form .field-row{grid-template-columns:1fr;gap:1.4rem;}

  /* philosophy 2-col → 1-col */
  .philosophy-grid{grid-template-columns:1fr;}

  /* contact info card slightly tighter */
  .contact-info{padding:1.8rem 1.5rem;}
}

/* 576 — smartphone */
@media (max-width:576px){
  /* hero portrait smaller, tag below the frame */
  .ph-visual{max-width:300px;}
  .ph-tag{position:static;transform:none;margin-top:1.2rem;max-width:100%;}

  /* meta row stacks */
  .ph-meta{flex-direction:column;align-items:center;gap:1rem;}

  /* chips stack full-width */
  .ph-chips .ph-chip{width:100%;justify-content:center;}

  /* founder sign stacks if cramped */
  .founder-sign{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .founder-sign-role{padding-left:0;border-left:0;}

  /* quote band sizing */
  .quote-mark{font-size:4.5rem;}

  /* form spacing tightens */
  .contact-form{gap:1.2rem;}
  .field input,.field select,.field textarea{padding:.95em 1.05em;}
  .form-foot{flex-direction:column;align-items:stretch;gap:1rem;}
  .form-submit{width:100%;}
}

/* 400 — small phone */
@media (max-width:400px){
  .ph-visual{max-width:260px;}
  .philosophy-card{padding:1.5rem 1.4rem;}
  .next-card{padding:1.8rem 1.5rem;}
  .contact-info{padding:1.5rem 1.3rem;}
  .field-phone .field-prefix{padding:0 .75rem;font-size:.88rem;}
}

/* ---- service pages ---- */
@media (max-width:992px){
  .svc-grid{grid-template-columns:1fr;gap:2rem;}
  .svc-toc{display:none;}
  .svc-hero .title{font-size:clamp(1.9rem,5.6vw,2.8rem);}
}
@media (max-width:576px){
  .svc-block-facts{grid-template-columns:1fr;gap:.6rem;}
  .svc-block-image{aspect-ratio:4/3;}
  .svc-block-title{font-size:clamp(1.65rem,5.5vw,2.1rem);}
}
@media (max-width:400px){
  .svc-hero{padding-top:5.5rem;}
  .faq-q{font-size:1rem;padding:1.3rem 0;}
}