/* HHDDC India — breakpoint refinements. Base stylesheet is fluid; these handle structural shifts. */

/* Large desktop 1440px+ : more breathing room, capped measure */
@media (min-width:1440px){
  :root{--gut:56px}
  .section-head{margin-bottom:56px}
  .hero h1{font-size:clamp(58px,4.6vw,70px)}
}
@media (min-width:1920px){ :root{--gut:64px} .wrap{max-width:1440px} }

/* Laptop 1024–1279 */
@media (max-width:1279px){
  .nav-desktop a{padding:13px 11px;font-size:11.8px}
}

/* Nav collapses to menu button below 1000px */
@media (max-width:999px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .nav-row{justify-content:stretch}
  .header-cta{padding:11px 18px;font-size:13px}
}

/* Tablet 768–1023 */
@media (max-width:1023px){
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .masonry{columns:3 clamp(180px,30vw,240px)}
  .timeline li{gap:14px}
  .quote-chip{right:0;max-width:min(230px,86%)}
  .panel-cta{flex-direction:column;align-items:flex-start}
}

/* Large mobile 640–767 */
@media (max-width:767px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .masonry{columns:2 clamp(140px,42vw,220px)}
  .figure{max-width:520px;margin-inline:auto}
  .quote-chip{position:static;max-width:none;margin-top:14px;border-radius:var(--r-m)}
  .steps li{flex:1 1 100%}
  .step-legend .pf{font-size:23px}
  .btn{width:auto}
  .form-foot{gap:10px}
  .form-foot .btn{flex:1 1 140px}
  .step-counter{order:3;flex:1 1 100%;text-align:center}
  .cta-band h2 br{display:none}
}

/* Standard mobile ≤639 */
@media (max-width:639px){
  .grid-4{grid-template-columns:1fr}
  .hero h1{max-width:none}
  .hero-glow{display:none}
  .btn-row .btn{flex:1 1 100%}
  .header-cta{flex:1 1 100%;margin-left:0}
  .footer-bar-inner{flex-direction:column;gap:10px}
  .check{grid-template-columns:1fr}
  .fab-cta{padding:13px 18px;font-size:14px}
  .lightbox-img img{max-height:64vh}
}

/* Small mobile ≤374 */
@media (max-width:374px){
  .masonry{columns:1}
  .tag{font-size:10.5px;letter-spacing:.12em}
  .brand{gap:8px}
  .btn{padding:14px 20px;font-size:14.5px}
}

/* Landscape phones: keep hero from filling the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-inner{padding-top:56px;padding-bottom:56px}
  .nav-mobile{max-height:60vh}
  .lightbox-img img{max-height:56vh}
}