/* =========================================================
   CRADLE MEDICARE — MOBILE APP EXPERIENCE
   Shared enhancement layer. Existing desktop design remains intact.
========================================================= */
:root{
  --app-navy:#163F63;
  --app-navy-dark:#0F2F4A;
  --app-red:#B5121B;
  --app-red-dark:#8F0F16;
  --app-bg:#F6F8FA;
  --app-card:#FFFFFF;
  --app-border:#E3E9EE;
  --app-muted:#71818C;
  --app-shadow:0 12px 32px rgba(15,47,74,.10);
}

/* Keep the large source logo from creating an oversized visual footprint. */
.logo img{height:58px !important;width:auto !important;object-fit:contain;}

/* Mobile application shell */
.mobile-app-nav{display:none;}
.mobile-app-fab{display:none;}

@media (max-width:767px){
  html{scroll-padding-top:74px;}
  body{
    background:var(--app-bg);
    padding-bottom:84px !important;
  }

  .site-header{
    position:sticky;
    top:0;
    height:74px;
    background:rgba(255,255,255,.97);
    box-shadow:0 4px 18px rgba(15,47,74,.07);
  }
  .nav-wrap{
    height:74px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .logo{height:74px;max-width:calc(100% - 58px);}
  .logo img{height:48px !important;max-width:210px;}
  .hamburger{
    width:44px;height:44px;border:1px solid var(--app-border);
    background:#fff;border-radius:13px;box-shadow:0 4px 12px rgba(15,47,74,.06);
  }

  /* Turn large desktop sections into a compact mobile-app feed. */
  .container{padding-left:16px !important;padding-right:16px !important;}
  section{overflow:clip;}
  .hero{padding:30px 0 34px !important;}
  .hero-grid{gap:26px !important;}
  .hero-copy h1{font-size:2.15rem !important;line-height:1.12;}
  .hero-copy p{font-size:.94rem !important;line-height:1.6;margin-top:14px !important;}
  .hero-actions{gap:10px !important;margin-top:22px !important;}
  .hero-actions .btn{width:100%;min-height:48px;font-size:.92rem;}
  .hero-image-frame{border-radius:20px !important;aspect-ratio:1.12/1 !important;}
  .float-card{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;top:auto !important;margin:10px 0 0 !important;padding:12px 14px !important;border-radius:15px !important;}

  .highlights,.services,.why,.about-preview,.intro,.ivf{padding:46px 0 !important;}
  .section-head{margin-bottom:26px !important;}
  .section-head h2{font-size:1.7rem !important;}
  .section-head p{font-size:.9rem !important;}

  .hl-grid,.hc-cards,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  .hl-card,.hc-card,.why-card{
    min-width:0;
    border-radius:17px !important;
    background:var(--app-card);
    box-shadow:0 5px 16px rgba(15,47,74,.055);
    border:1px solid var(--app-border);
  }
  .hl-card{padding:17px 10px !important;}
  .hl-card span{font-size:.78rem !important;}
  .hc-card{padding:18px 12px !important;min-height:0 !important;}
  .hc-card h4{font-size:.88rem !important;line-height:1.25;}
  .hc-icon{width:46px !important;height:46px !important;border-radius:13px !important;}
  .why-card{padding:18px 11px !important;}
  .why-card h4{font-size:.88rem !important;}

  .intro-grid,.about-layout{gap:28px !important;}
  .big-number{font-size:62px !important;}
  .intro-text h2,.about-content h2,.ivf-title{font-size:1.72rem !important;}
  .intro-text p,.about-content p,.ivf-text{font-size:.9rem !important;}
  .intro-points,.about-mini{gap:9px !important;}
  .intro-point,.about-mini div{padding:11px !important;font-size:.78rem !important;border-radius:12px;}

  .fert-panel{border-radius:20px !important;overflow:hidden;box-shadow:var(--app-shadow);}
  .fert-visual img{min-height:260px;object-fit:cover;}

  .cta{padding:8px 0 48px !important;}
  .cta-inner{padding:28px 22px !important;border-radius:20px !important;}
  .cta-inner h2{font-size:1.55rem !important;}
  .cta-actions .btn{min-height:48px;width:100%;}

  .footer{padding:46px 0 22px !important;}
  .footer-grid{gap:26px !important;}
  .footer-bottom{padding-bottom:4px;}

  /* Existing bottom CTA is replaced by the app navigation. */
  .mobile-cta-bar{display:none !important;}
  .mobile-app-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    left:0;right:0;bottom:0;
    z-index:2500;
    min-height:74px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--app-border);
    box-shadow:0 -8px 28px rgba(15,47,74,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-app-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    color:#71818C;
    font-size:.67rem;
    font-weight:700;
    line-height:1;
    border-radius:14px;
    transition:.2s ease;
  }
  .mobile-app-nav a.active{color:var(--app-red);background:#FFF5F6;}
  .mobile-app-nav a.call{color:var(--app-navy);}
  .mobile-app-nav .nav-icon{
    width:27px;height:27px;
    display:grid;place-items:center;
  }
  .mobile-app-nav svg{width:21px;height:21px;stroke:currentColor;}
  .mobile-app-nav a.appointment{
    color:#fff;
    background:var(--app-red);
    margin:1px 0;
    box-shadow:0 7px 16px rgba(181,18,27,.24);
  }
  .mobile-app-nav a.appointment .nav-icon{width:25px;height:25px;}
  .mobile-app-nav a.appointment.active{color:#fff;background:var(--app-red-dark);}

  /* Compact mobile menu: it behaves like an app drawer, not a desktop nav. */
  .mobile-menu{
    inset:74px 0 0 0 !important;
    background:rgba(246,248,250,.98) !important;
    padding:14px 14px 100px !important;
    transform:translateY(-10px) !important;
  }
  .mobile-menu.show{transform:translateY(0) !important;}
  .mobile-menu ul{padding:4px !important;gap:8px !important;}
  .mobile-menu li a{
    display:flex !important;
    align-items:center;
    min-height:54px;
    padding:12px 15px !important;
    border:1px solid var(--app-border) !important;
    background:#fff;
    box-shadow:0 4px 12px rgba(15,47,74,.04);
  }
  .mobile-menu .btn{margin:10px 4px 0 !important;width:calc(100% - 8px);}

  /* Form becomes a clean mobile card. */
  form{width:100%;}
  input,select,textarea{
    max-width:100%;
    font-size:16px !important; /* prevents iOS zoom */
  }
  .form-card,.appointment-form,.booking-card,.contact-form{
    border-radius:20px !important;
  }
}

@media (max-width:420px){
  .logo img{height:44px !important;max-width:190px;}
  .hero-copy h1{font-size:1.95rem !important;}
  .hl-grid,.hc-cards,.why-grid{gap:8px !important;}
  .mobile-app-nav{padding-left:6px;padding-right:6px;}
}

@media (min-width:768px){
  .mobile-app-nav{display:none !important;}
}

/* =========================================================
   MOBILE APP — COMPACT HERO / FAST SERVICE ACCESS
   Added after all page CSS so these mobile rules win.
========================================================= */
@media (max-width:767px){
  /* Keep the app header compact and prevent the hero from consuming the screen. */
  .site-header{height:74px !important;}
  .nav-wrap{height:74px !important;}
  .logo{height:74px !important;}
  .logo img{height:44px !important;max-height:44px !important;width:auto !important;}

  /* Internal page heroes: show title + short intro, then get to the cards quickly. */
  .page-hero{
    padding:28px 0 30px !important;
    min-height:0 !important;
  }
  .page-hero .container{max-width:none !important;}
  .page-hero .eyebrow{font-size:.72rem !important;letter-spacing:.14em !important;}
  .page-hero h1{
    font-size:2rem !important;
    line-height:1.08 !important;
    margin-top:10px !important;
    letter-spacing:-.02em !important;
  }
  .page-hero p{
    font-size:.9rem !important;
    line-height:1.48 !important;
    margin-top:12px !important;
    max-width:100% !important;
  }

  /* Services starts immediately after the compact hero. */
  .services{padding:34px 0 58px !important;}
  .services .section-head{margin-bottom:20px !important;}
  .services .section-head .eyebrow{font-size:.72rem !important;}
  .services .section-head h2{
    font-size:1.62rem !important;
    line-height:1.15 !important;
    margin-top:8px !important;
  }
  .services .section-head p{
    font-size:.84rem !important;
    line-height:1.4 !important;
    margin-top:8px !important;
  }
  .svc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .svc-card{
    min-height:0 !important;
    padding:17px 13px !important;
    border-radius:17px !important;
    box-shadow:0 5px 16px rgba(15,47,74,.055) !important;
  }
  .svc-icon{
    width:44px !important;height:44px !important;
    border-radius:12px !important;
    margin-bottom:11px !important;
  }
  .svc-icon svg{width:21px !important;height:21px !important;}
  .svc-card h3{
    font-size:.9rem !important;
    line-height:1.22 !important;
    margin-bottom:6px !important;
  }
  .svc-card p{
    font-size:.73rem !important;
    line-height:1.4 !important;
    margin-bottom:8px !important;
  }
  .svc-view-btn{
    font-size:.72rem !important;
    padding:5px 0 !important;
  }

  /* Home page hero: keep the introduction useful but much shorter on phones. */
  .hero{padding:28px 0 38px !important;}
  .hero-copy .eyebrow{margin-bottom:10px !important;}
  .hero-copy h1{font-size:2rem !important;line-height:1.1 !important;}
  .hero-copy p{font-size:.9rem !important;line-height:1.5 !important;margin-top:12px !important;}
  .hero-actions{margin-top:18px !important;gap:9px !important;}
  .hero-actions .btn{min-height:46px !important;padding:11px 15px !important;}
  .hero-image-frame{aspect-ratio:16/10 !important;border-radius:18px !important;}
  .hero-visual{margin-top:4px !important;}

  /* When a user taps Services, scroll just past the sticky header instead of hiding the heading. */
  #services, .services{scroll-margin-top:82px;}
}

@media (max-width:420px){
  .page-hero h1{font-size:1.82rem !important;}
  .page-hero p{font-size:.86rem !important;}
  .svc-card{padding:15px 11px !important;}
  .svc-card h3{font-size:.86rem !important;}
  .svc-card p{font-size:.7rem !important;}
  .svc-view-btn{font-size:.68rem !important;}
}

/* =========================================================
   MOBILE CONTACT SHEET — ONE CALL ICON, TWO CONTACT OPTIONS
========================================================= */
@media (max-width:767px){
  body.contact-sheet-open{overflow:hidden;}

  .contact-sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:6000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(9,25,38,.46);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }
  .contact-sheet-backdrop.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .contact-sheet{
    position:relative;
    width:100%;
    max-width:520px;
    padding:24px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
    background:#fff;
    box-shadow:0 -18px 50px rgba(15,47,74,.22);
    transform:translateY(24px);
    transition:transform .24s ease;
  }
  .contact-sheet-backdrop.show .contact-sheet{transform:translateY(0);}
  .contact-sheet::before{
    content:"";
    display:block;
    width:42px;
    height:4px;
    margin:0 auto 18px;
    border-radius:99px;
    background:#d9e1e5;
  }
  .contact-sheet-close{
    position:absolute;
    top:13px;
    right:14px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#f2f5f6;
    color:#173b55;
    font-size:25px;
    line-height:1;
    cursor:pointer;
  }
  .contact-sheet-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin:0 auto 10px;
    border-radius:15px;
    background:#fff1f2;
    color:#b5121b;
    font-size:22px;
  }
  .contact-sheet h3{
    margin:0;
    text-align:center;
    color:#173b55;
    font-family:'Poppins',sans-serif;
    font-size:1.18rem;
  }
  .contact-sheet p{
    margin:5px 0 17px;
    text-align:center;
    color:#71818c;
    font-size:.82rem;
  }
  .contact-sheet-actions{display:grid;gap:10px;}
  .contact-action{
    display:flex;
    align-items:center;
    gap:13px;
    min-height:62px;
    padding:10px 13px;
    border:1px solid #e4eaed;
    border-radius:16px;
    color:#173b55;
    background:#fff;
  }
  .contact-action:active{transform:scale(.99);}
  .contact-action-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    font-size:20px;
  }
  .call-action .contact-action-icon{background:#fff1f2;color:#b5121b;}
  .whatsapp-action .contact-action-icon{background:#eaf8f1;color:#148a55;}
  .contact-action strong{display:block;font-size:.9rem;line-height:1.2;}
  .contact-action small{display:block;margin-top:3px;color:#7a8b94;font-size:.72rem;}
}


/* Two contact numbers, kept compact inside the single Call bottom sheet */
@media (max-width:767px){
  .contact-choice{
    padding:12px;
    border:1px solid #e4eaed;
    border-radius:17px;
    background:#fff;
  }
  .contact-choice-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#173b55;}
  .contact-choice-head strong{font-size:.9rem;}
  .call-choice .contact-action-icon{background:#fff1f2;color:#b5121b;}
  .whatsapp-choice .contact-action-icon{background:#eaf8f1;color:#148a55;}
  .contact-number-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .contact-number-grid a{
    display:block;
    padding:9px 8px;
    border-radius:12px;
    background:#f7f9fa;
    text-align:center;
    color:#173b55;
    border:1px solid #edf1f3;
  }
  .contact-number-grid a:active{transform:scale(.98);}
  .contact-number-grid span{display:block;color:#84939b;font-size:.61rem;line-height:1.1;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em;}
  .contact-number-grid b{display:block;font-size:.78rem;line-height:1.15;white-space:nowrap;}
}