/* ==========================================================
   NEW LIFE IVF HOSPITAL — responsive.css
   Breakpoints: 1180 (nav) · 1024 (tablet) · 768 (mobile) · 480 · 360
   ========================================================== */

@media (max-width:1180px){
  .nav,.nav-cta{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:1fr 1fr}
  .why-list{grid-template-columns:repeat(3,1fr);row-gap:30px}
}

@media (max-width:1024px){
  :root{--header-h:76px}
  .brand img{width:50px;height:50px}
  .sec-head.split-row,.hero-grid,.intro,.story,.ivf-x,.lab-grid,.fac-grid,.faq-grid,.phil,.split-block,.contact-grid,.ph-split,.profile,.profile.rev,.faq-cat{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--header-h) + 24px);min-height:auto}
  .hero-visual{margin:20px auto 0;max-width:520px}
  .scroll-cue{display:none}
  .intro-media{max-width:560px}
  .badge-float{right:4%}
  .story-media{height:44svh;top:var(--header-h);z-index:3;margin-bottom:-6px}
  .story-step{min-height:62svh}
  .story-steps{margin-top:20px}
  .spec-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:240px}
  .spec.lg{grid-column:span 6;grid-row:span 2}
  .spec.tall,.spec.sm,.spec.md5,.spec.md7,.spec.wide{grid-column:span 3;grid-row:span 1}
  .spec.wide{grid-column:span 6}
  .ivf-media{max-width:520px}
  .lab-visual{order:-1;width:min(80%,440px)}
  .dept-flex{flex-direction:column;height:auto}
  .dp,.dp.active{flex:none;min-height:360px}
  .dp-vert{display:none}
  .dp-body{opacity:1;visibility:visible;transform:none}
  .dp.active>img{transform:none}
  .fac-media{aspect-ratio:16/11}
  .faq-side,.faq-cat>h2{position:static}
  .mag{display:block}
  .mag-img{max-width:520px;margin-bottom:-40px}
  .mag-title .title{padding-left:0;background:none}
  .mag-list{margin-top:10px}
  .dept-row,.dept-row.rev,.fac-split,.fac-split.rev{grid-template-columns:1fr}
  .dept-row.rev .dr-media,.fac-split.rev .fs-media,.profile.rev .pf-photo{order:0}
  .dr-media,.fs-media{min-height:min(60vw,420px)}
  .dept-row,.fac-split{min-height:0}
  .tx,.tx:nth-child(5n+1),.tx:nth-child(5n+2){grid-column:span 6}
  .modal-card{grid-template-columns:1fr}
  .modal-img{min-height:220px}
  .team-strip{grid-template-columns:1fr}
  .steps4{grid-template-columns:1fr 1fr;gap:34px 0}
  .steps4 li::after{display:none}
  .why-note{display:none}
  .fac-facts{grid-template-columns:1fr}
  .fac-facts li,.fac-facts li:first-child{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:24px 0}
  .tech-duo{grid-template-columns:1fr}
  .map-wrap{aspect-ratio:4/3}
  .dept-chips{grid-template-columns:1fr 1fr}
  .foot-grid{gap:36px}
}

@media (max-width:820px){
  /* history timeline collapses to a left rail */
  .hist::before,.hist::after{left:14px}
  .hist-item,.hist-item:nth-child(even){grid-template-columns:1fr;padding-left:44px;gap:6px}
  .hist-item::before{left:14px;top:34px}
  .hi-year,.hist-item:nth-child(even) .hi-year{text-align:left;padding:0;order:0;font-size:clamp(3rem,15vw,5rem)}
  .hi-text,.hist-item:nth-child(even) .hi-text{text-align:left;padding:0;order:1}
  .hist-item:nth-child(even) .hi-text p{margin-left:0}
}

@media (max-width:768px){
  body{padding-bottom:76px}
  .section{padding-block:clamp(56px,14vw,84px)}
  .curve-top{margin-top:-28px;border-radius:28px 28px 0 0}
  .btn-row .btn{flex:1 1 100%}
  .btn-row.keep .btn{flex:0 1 auto}
  .doc-head{flex-direction:column;align-items:flex-start}
  .doc-head .car-ctrl{align-self:flex-end}
  .spec-grid{grid-template-columns:1fr;grid-auto-rows:280px;gap:16px}
  .spec.lg,.spec.tall,.spec.sm,.spec.md5,.spec.md7,.spec.wide{grid-column:auto;grid-row:auto}
  .spec.lg{grid-row:span 1;min-height:340px}
  .spec p{max-height:120px;opacity:1;margin-top:6px}
  .why-list{grid-template-columns:1fr 1fr}
  .why-word{-webkit-text-stroke-width:1.5px}
  .why-row{padding-block:2px}
  .dept-chips{grid-template-columns:1fr}
  .bring{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .steps4{grid-template-columns:1fr}
  .tx,.tx:nth-child(5n+1),.tx:nth-child(5n+2){grid-column:1/-1;min-height:250px}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .mo-a,.mo-b,.mo-c,.mo-d,.mo-e,.mo-f{grid-column:span 1;grid-row:span 1}
  .mo-a{grid-column:1/-1;grid-row:span 2}
  .mosaic figure .cap{opacity:1;transform:none;font-size:.68rem;padding:7px 10px}
  .reveal-pair{grid-template-columns:1fr}
  .reveal-pair figure{min-height:260px}
  .g-masonry{columns:2 150px;column-gap:12px}
  .g-item{margin-bottom:12px;border-radius:14px}
  .g-item .cap{opacity:1;transform:none;font-size:.66rem;padding:6px 10px;left:8px;bottom:8px}
  .g-item .zoom{display:none}
  .g-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 6px;scrollbar-width:none}
  .g-filters button{flex:none}
  .g-filters::-webkit-scrollbar{display:none}
  .lb-prev,.lb-next{top:auto;bottom:18px;margin:0}
  .lb-prev{left:20px}.lb-next{right:20px}
  .lb-cap{bottom:28px;padding-inline:84px;font-size:.88rem}
  .lightbox{padding:70px 12px 100px}
  .map-card{position:static;max-width:none;border-radius:0}
  .map-wrap{aspect-ratio:auto;display:flex;flex-direction:column}
  .map-wrap iframe{height:320px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
  .pf-meta div{grid-template-columns:1fr;gap:2px}
  .team-strip figure{grid-template-columns:1fr;text-align:center}
  .team-strip img{max-width:220px;margin:auto}
  .ph-portraits{height:300px}
  .hero-circle{border-width:5px}
  .glass{font-size:.62rem;padding:8px 12px 8px 8px;gap:8px}
  .glass .ico{width:32px;height:32px;font-size:.95rem;border-radius:10px}
  .g1{left:-2%}.g2{right:-2%}
  .form-actions .btn{width:100%}
  .care::before{background:linear-gradient(180deg,rgba(23,42,70,.92),rgba(23,42,70,.7))}
  /* fixed bottom action bar */
  .m-bar{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:120;padding:8px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;box-shadow:0 18px 40px -14px rgba(23,42,70,.55);border:1px solid rgba(23,42,70,.08)}
  .m-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:16px;font-weight:800;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
  .m-bar a .i{font-size:1.25rem;color:var(--magenta)}
  .m-bar a.primary{background:linear-gradient(135deg,var(--magenta),var(--pink));color:#fff}
  .m-bar a.primary .i{color:#fff}
  .to-top{bottom:98px;right:14px;width:46px;height:46px}
  body.menu-open .m-bar,body.menu-open .to-top{display:none}
}

@media (max-width:480px){
  .brand-text b{font-size:.95rem}
  .brand-text small{letter-spacing:.32em}
  .brand img{width:46px;height:46px}
  .display{font-size:clamp(2.35rem,11.4vw,3.2rem)}
  .title{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .btn{padding-inline:20px;letter-spacing:.09em}
  .badge-float{padding:14px 18px;right:0}
  .ivf-media .float-label{left:0;font-size:.78rem;max-width:200px}
  .story-tag{font-size:.7rem;padding:10px 14px}
  .why-list{grid-template-columns:1fr}
  .lab-points li{grid-template-columns:44px 1fr;gap:14px;padding-left:14px}
  .lab-points .ico{width:44px;height:44px}
  .lab-visual .chip{right:0;font-size:.68rem}
  .doc-card{flex-basis:88vw}
  .car-btn{width:50px;height:50px}
  .g-masonry{column-gap:10px}
  .drawer nav a{font-size:clamp(1.7rem,9vw,2.4rem)}
}

@media (max-width:360px){
  :root{--gutter:16px}
  .brand-text small{display:none}
  .m-bar a{font-size:.6rem;letter-spacing:.06em}
  .g-masonry{columns:1}
}

@media (min-width:1600px){
  .container{width:min(100% - 2*var(--gutter),1480px)}
  .hero-visual{max-width:720px}
}

/* --- overflow safeguards --- */
.contact-grid>*,.faq-grid>*,.split-block>*,.ivf-x>*,.lab-grid>*,.fac-grid>*,.phil>*,.intro>*,.hero-grid>*{min-width:0}
.info-list a,.foot-contact a,.pf-meta dd{overflow-wrap:anywhere}
@media (max-width:768px){.mag-list{grid-template-columns:1fr}}

/* story cards overlap the sticky image on desktop */
@media (min-width:1025px){.story-steps{margin-left:calc(-1*clamp(20px,5vw,90px))}.story{grid-template-columns:1fr 1.02fr}}
.js .dr-media[data-mask].in,.js .fs-media[data-mask].in,.js .reveal-pair figure[data-mask].in{clip-path:inset(0)}
@media (max-width:1024px){.mag-img .tag{right:0}}