:root{
    --navy:#105272;
    --navy-deep:#1f2b6c;
    --accent:#bfd2f8;
    --ink:#212124;
    --white:#fcfefe;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Work Sans', sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.4;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .container{max-width:1180px;margin:0 auto;padding:0 24px;}
  .full-img{width:100%;height:auto;display:block;}

  /* STICKY HEADER */
  .site-header{
    position:sticky;
    top:0;
    z-index:200;
  }

  /* TOP INFO BAR */
  .site-header{ position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; }
  .topbar{background:var(--white);padding:10px 0;border-bottom:1px solid #eee;}
  .topbar .container{display:flex;justify-content:flex-end;gap:32px;align-items:center;}
  .topbar-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);}
  .topbar-item svg{flex:none;}
  .topbar-item .label{color:#8a8f98;display:block;font-size:11px;}
  .topbar-item .value{font-weight:600;display:block;}
  .lang-switcher{
    border:1px solid #d5dce8;border-radius:6px;padding:6px 10px;font-size:13px;
    color:var(--navy);background:var(--white);cursor:pointer;font-family:inherit;
  }
  .nav-lang-item{display:flex;align-items:center;padding:0 4px;}

  /* AUTH MODAL */
  .modal-overlay{
    display:none;position:fixed;inset:0;background:rgba(16,82,114,0.5);
    z-index:1000;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--white);border-radius:16px;padding:32px;width:100%;max-width:420px;
    max-height:90vh;overflow-y:auto;position:relative;
  }
  .modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:#888;}
  .modal-title{font-family:'Yeseva One',serif;color:var(--navy);font-size:24px;margin-bottom:6px;}
  .modal-subtitle{font-size:14px;color:#666;margin-bottom:24px;}
  .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .role-card{
    background:#f2f7ff;border:2px solid transparent;border-radius:12px;padding:20px 12px;
    text-align:center;cursor:pointer;font-weight:600;color:var(--navy-deep);font-size:15px;
  }
  .role-card:hover{border-color:var(--accent);}
  .role-icon{font-size:28px;display:block;margin-bottom:8px;}
  .modal-back{background:none;border:none;color:var(--navy-deep);font-size:14px;cursor:pointer;margin-bottom:16px;padding:0;}
  .auth-form{display:flex;flex-direction:column;gap:14px;}
  .auth-form input{
    padding:12px 14px;border:1px solid #d5dce8;border-radius:8px;font-size:15px;width:100%;
  }
  .auth-form button{
    background:var(--navy);color:var(--white);border:none;padding:13px;border-radius:8px;
    font-weight:600;font-size:15px;cursor:pointer;
  }
  .auth-form button:disabled{background:#aab;cursor:not-allowed;}
  .auth-switch{font-size:13px;text-align:center;color:#666;margin-top:4px;}
  .auth-switch a{color:var(--navy-deep);font-weight:600;cursor:pointer;}
  .auth-msg{font-size:13px;padding:8px;border-radius:6px;margin-top:4px;}
  .auth-or{display:flex;align-items:center;gap:10px;color:#999;font-size:12px;margin:16px 0 12px;}
  .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:#e5e5e5;}
  .google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#333;border:1px solid #dadce0;border-radius:8px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;}
  .google-btn:hover{background:#f8f9fa;}
  .google-btn:disabled{opacity:.6;cursor:not-allowed;}
  .link-btn{background:none !important;color:var(--navy) !important;border:none;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px !important;}
  .auth-msg.error{background:#fde8e8;color:#a33;}
  .auth-msg.success{background:#e8f5e9;color:#2a6;}
  .otp-choice{display:flex;flex-direction:column;gap:8px;align-items:stretch;border-top:1px dashed #d5dce8;padding-top:12px;}
  .otp-choice > span{font-size:12px;color:#888;text-align:center;}
  .otp-choice-btns{display:flex;gap:8px;}
  .auth-form .otp-choice-btns .otp-pick{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:10px 8px;font-size:14px;}
  .auth-form .otp-choice-btns .otp-pick:hover{background:#f2f7ff;}
  .otp-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;font-weight:600;text-decoration:none !important;}
  .otp-link i{width:16px;height:16px;}
  .otp-link:hover{text-decoration:underline !important;}
  .reg-cta{border-top:1px solid #e5e9f0;padding-top:14px;margin-top:2px;text-align:center;}
  .reg-cta span{display:block;font-size:13px;color:#666;margin-bottom:8px;}
  .reg-cta-btn{display:block;background:#fff;color:var(--navy);border:1.5px solid var(--navy);border-radius:8px;padding:12px;font-weight:700;font-size:15px;text-decoration:none;}
  .reg-cta-btn:hover{background:#f2f7ff;}

  /* NAVBAR */
  .navbar{background:var(--navy);padding:18px 0;display:flex;align-items:center;}
  .navbar .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
  .nav-logo-img{height:40px;width:auto;display:block;align-self:center;margin:0;}
  .nav-links{display:flex;gap:28px;list-style:none;}
  .nav-links a{color:var(--white);font-size:16px;}
  .nav-links a.active{color:var(--accent);font-weight:600;}
  .nav-cta{background:var(--accent);color:var(--navy);font-weight:600;font-size:15px;padding:10px 22px;border-radius:48px;border:none;cursor:pointer;}
  .nav-toggle{display:none;background:none;border:none;font-size:26px;color:var(--white);cursor:pointer;}

  /* HERO */
  .hero-cta-wrap{text-align:center;padding:28px 0 60px;}
  .btn-primary{
    display:inline-block;background:var(--navy);color:var(--white);
    font-weight:600;font-size:15px;padding:14px 30px;border-radius:8px;border:none;cursor:pointer;
  }

  /* WELCOME */
  .welcome{padding:60px 0;text-align:center;}
  .eyebrow{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;color:var(--navy-deep);margin-bottom:8px;}
  .section-title{font-family:'Yeseva One',serif;font-size:32px;color:var(--navy);margin-bottom:16px;}
  .welcome p{max-width:660px;margin:0 auto 20px;color:var(--ink);}
  .link-more{color:var(--navy-deep);font-weight:500;display:inline-flex;align-items:center;gap:8px;}
  .welcome-banner{
    margin-top:50px;background:rgb(224,237,253);border-radius:16px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    padding:24px 40px 24px 24px;
  }
  .welcome-banner img{flex:none;width:260px;height:auto;border-radius:8px;}
  .welcome-banner-text{flex:1 1 320px;text-align:left;padding:20px 30px;}
  .welcome-banner-text h3{color:var(--navy-deep);font-size:22px;margin-bottom:8px;}
  .welcome-banner-text p{margin:0;max-width:340px;}

  /* GENERIC SECTION */
  .section{padding:50px 0;text-align:center;}
  .section p.lead{max-width:700px;margin:0 auto;color:var(--ink);}

  /* ABOUT US */
  .about-body{max-width:720px;margin:0 auto;}
  .about-body p{color:var(--ink);line-height:1.7;margin:0 0 14px;}
  .about-body .about-goal{color:var(--navy-deep);font-size:17px;margin-top:6px;}
  .about-body .about-goal b{color:var(--navy);}
  .about-points{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;}
  .about-pt{display:inline-flex;align-items:center;gap:10px;background:rgb(224,237,253);color:var(--navy-deep);border-radius:40px;padding:10px 20px;font-weight:600;font-size:15px;}
  .about-pt i{display:inline-flex;font-size:20px;color:var(--navy);}
  @media (max-width:560px){ .about-points{flex-direction:column;align-items:stretch;} .about-pt{justify-content:center;} }

  /* FEATURES GRID (real cards) */
  .features-divider{
    max-width:900px;
    margin:20px auto 0;
    border:none;
    border-top:1px solid #d5dce8;
  }
  .features-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    max-width:900px;
    margin:40px auto 0;
    text-align:left;
  }
  .feature-card{
    background:#f2f7ff;
    border-radius:12px;
    padding:26px 28px;
    display:flex;
    gap:18px;
    align-items:flex-start;
  }
  .feature-icon{
    background:var(--accent);
    border-radius:12px;
    width:56px;height:56px;
    flex:none;
    display:flex;align-items:center;justify-content:center;
    padding:12px;
  }
  .feature-icon img{width:100%;height:100%;object-fit:contain;}
  .feature-card h4{color:var(--navy-deep);font-size:18px;margin-bottom:6px;}
  .feature-card p{font-size:14px;color:var(--ink);opacity:.85;}
  @media (max-width:700px){
    .features-grid{grid-template-columns:1fr;}
  }

  /* FOOTER */
  /* FOOTER */
  .site-footer{background:var(--navy);color:var(--white);padding:50px 0 20px;margin-top:20px;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    gap:24px;
    padding-bottom:30px;
  }
  .footer-brand{font-family:'Yeseva One',serif;font-size:24px;color:var(--accent);margin-bottom:12px;}
  .footer-grid p{font-size:14px;opacity:.85;}
  .footer-grid h6{font-size:15px;margin-bottom:14px;font-weight:700;text-transform:uppercase;}
  .footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
  .footer-grid a{font-size:13px;opacity:.9;}
  .footer-grid li{font-size:13px;opacity:.9;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.2);
    padding-top:16px;
    font-size:13px;
    opacity:.85;
    text-align:center;
  }
  @media (max-width:800px){
    .footer-grid{grid-template-columns:1fr 1fr;}
  }

  @media (max-width:900px){
    .nav-links{
      display:none;
      position:absolute;
      top:100%;left:0;right:0;
      background:var(--navy);
      flex-direction:column;
      gap:0;
      padding:10px 0;
      box-shadow:0 8px 16px rgba(0,0,0,0.15);
    }
    .nav-links.open{display:flex;}
    .nav-links li{width:100%;}
    .nav-lang-item{padding:10px 24px;}
    .nav-links a{display:block;padding:14px 24px;}
    .nav-toggle{display:block;}
    .navbar{position:relative;}
  }

  /* MOBILE: declutter the top info bar (Emergency No / Work Hour) */
  @media (max-width:700px){
    .topbar .container{flex-wrap:wrap;row-gap:8px;}
    .topbar .container > div:last-child{gap:18px;}
    .topbar-item{gap:6px;font-size:12px;}
    .nav-logo-img{height:32px;}
  }
  @media (max-width:460px){
    .topbar{padding:8px 0;}
    .topbar .container > div:last-child{gap:12px;}
    .topbar-item svg{width:15px;height:15px;}
    .topbar-item .label{font-size:9px;}
    .topbar-item .value{font-size:12px;}
    .lang-switcher{font-size:11px;padding:4px 6px;}
  }

  /* MOBILE: declutter the login/register modal header */
  @media (max-width:480px){
    .modal-box{padding:22px 18px;}
    .modal-title{font-size:20px;}
    .modal-subtitle{font-size:13px;margin-bottom:18px;}
    .modal-close{top:12px;right:12px;font-size:20px;}
    .role-grid{gap:10px;}
    .role-card{padding:16px 8px;font-size:13px;}
    .role-icon{font-size:24px;margin-bottom:6px;}
  }

/* Patient login / register */
.auth-tabs{display:flex;gap:6px;background:#f2f7ff;border-radius:10px;padding:4px;margin:6px 0 16px;}
.auth-tab{flex:1;border:none;background:transparent;padding:10px;border-radius:8px;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer;font-family:inherit;}
.auth-tab.active{background:var(--navy);color:#fff;}
.auth-row{display:flex;gap:10px;}
.auth-row > *{flex:1;min-width:0;}
.auth-form select{padding:12px 14px;border:1px solid #d5dce8;border-radius:8px;font-size:15px;width:100%;background:#fff;font-family:inherit;}
.modal-box{max-height:92vh;overflow-y:auto;}

/* ---------- Home hero slideshow ---------- */
.hero-slider{position:relative;width:100%;aspect-ratio:1366/550;overflow:hidden;background:#eef4fb;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;}
.hero-slider .hs-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.hero-slider .hs-slide.on{opacity:1;}
.hero-slider img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;}
.hero-slider .hs-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;}
.hero-slider .hs-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(16,82,114,.3);cursor:pointer;transition:width .3s,background .3s;}
.hero-slider .hs-dots button.on{width:24px;border-radius:5px;background:#105272;}
.hero-slider .hs-paused{position:absolute;top:10px;right:12px;background:rgba(16,82,114,.75);color:#fff;font-size:11px;letter-spacing:1px;border-radius:14px;padding:4px 9px;opacity:0;transition:opacity .2s;pointer-events:none;}
.hero-slider.paused .hs-paused{opacity:1;}
.hero-slider:focus-visible{box-shadow:inset 0 0 0 3px #f0b429;}
@media (max-width:600px){ .hero-slider .hs-dots{bottom:6px;gap:6px;} .hero-slider .hs-dots button{width:7px;height:7px;} .hero-slider .hs-dots button.on{width:18px;} }
@media (prefers-reduced-motion:reduce){ .hero-slider .hs-slide{transition:none;} }

/* ---------- Home contact cards ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1000px;margin:36px auto 0;}
.contact-cards .cc{background:#c0d4f7;color:#105272;border-radius:6px;padding:40px 24px 28px;display:flex;flex-direction:column;gap:8px;min-height:220px;text-decoration:none;transition:transform .15s,box-shadow .15s;}
.contact-cards .cc.dark{background:#105272;color:#fff;}
.contact-cards a.cc:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(16,82,114,.18);}
.contact-cards .cc svg{margin-bottom:14px;}
.contact-cards .cc b{font-size:15px;letter-spacing:.5px;}
.contact-cards .cc span{font-size:15px;}
.contact-cards .cc span.sm{font-size:13px;line-height:1.5;}
.contact-cards .cc em{font-style:normal;font-size:12px;font-weight:600;margin-top:auto;opacity:.75;}
@media (max-width:900px){ .contact-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .contact-cards{grid-template-columns:1fr;gap:12px;} .contact-cards .cc{min-height:0;padding:22px 20px;} .contact-cards .cc svg{margin-bottom:4px;} }

/* Home (mobile/tablet): language picker sits between Login/Register and ☰ */
.nav-lang-mobile{display:none;}
@media (max-width:900px){
  .navbar .container{gap:10px;}
  .navbar .nav-cta{margin-right:auto;}
  .nav-lang-mobile{display:block;max-width:110px;}
  .nav-links .nav-lang-item{display:none;}
}
.contact-cards .cc{text-align:left;}
/* section jumps: exact offset is set by js/mobile-menu.js (header height differs per device) */
.auth-msg .auth-reg-btn{display:block;text-align:center;margin-top:10px;padding:10px 14px;border-radius:8px;text-decoration:none;color:#fff;}