:root{
    
      --hc-teal:#367E7D;
      --hc-red:#C62828;
      --hc-black:#111111;
      --hc-bg:#F5F7F7;
      --hc-border:#D9E1E1;
      --hc-muted:#4B5563;
      --hc-white:#FFFFFF;
      --shadow:0 6px 18px rgba(0,0,0,.08);
      --header-h:56px;
      --maxw:1024px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--hc-black);
      background:var(--hc-white);
    }
    .container{ max-width:var(--maxw); margin:0 auto; padding:0 14px; }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:var(--hc-white);
      border-bottom:1px solid var(--hc-border);
        background-color: #e6f4f3; /* very light teal */

    }
    .header-inner{
      height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:inherit;
      min-width:0;
    }
    .brand img{ height:50px; width:auto; display:block; }
    .brand-text{
      display:none;
      flex-direction:column;
      gap:2px;
      line-height:1.05;
      min-width:0;
    }
    .brand-name{ font-weight:900; letter-spacing:.2px; font-size:14px; }
    .brand-slogan{
      font-weight:650;
      font-size:12px;
      color:var(--hc-muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:44vw;
    }
    .desktop-nav{
      display:none;
      align-items:center;
      gap:10px;
    }
    .nav-a{
      color:var(--hc-black);
      text-decoration:none;
      font-weight:650;
      padding:10px 10px;
      border-radius:12px;
      white-space:nowrap;
    }
    .nav-a:hover{ background:var(--hc-bg); }
    .nav-a:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }

    /* Editions dropdown (desktop) */
    details.dd{ position:relative; }
    details.dd > summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
      font-weight:650;
      padding:10px 10px;
      border-radius:12px;
    }
    details.dd > summary::-webkit-details-marker{ display:none; }
    details.dd > summary:hover{ background:var(--hc-bg); }
    details.dd[open] > summary{ background:rgba(54,126,125,.08); }
    .dd-panel{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      width:280px;
      background:var(--hc-white);
      border:1px solid var(--hc-border);
      border-radius:14px;
      box-shadow: var(--shadow);
      padding:8px;
      z-index:80;
    }
    .dd-item{
      display:flex;
      flex-direction:column;
      gap:2px;
      padding:10px 10px;
      border-radius:12px;
      text-decoration:none;
      color:var(--hc-black);
    }
    .dd-item:hover{ background:var(--hc-bg); }
    .dd-item small{ color:var(--hc-muted); font-weight:550; }

    /* Mobile hamburger */
    .menu-btn{
      border:1px solid var(--hc-border);
      background:var(--hc-white);
      border-radius:12px;
      height:42px;
      width:42px;
      display:grid;
      place-items:center;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .menu-btn:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .menu-icon line{ stroke:var(--hc-black); stroke-width:2.2; stroke-linecap:round; }

    /* Drawer (mobile) */
    .overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      z-index:60;
    }
    .drawer{
      position:fixed;
      top:0;
      right:0;
      height:100%;
      width:min(84vw, 360px);
      background:var(--hc-white);
      border-left:1px solid var(--hc-border);
      transform:translateX(100%);
      transition:transform .22s ease;
      z-index:70;
      display:flex;
      flex-direction:column;
    }
    .drawer-header{
      height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      border-bottom:1px solid var(--hc-border);
    }
    .drawer-title{ font-weight:800; font-size:14px; letter-spacing:.2px; }
    .close-btn{
      border:1px solid var(--hc-border);
      background:var(--hc-white);
      border-radius:12px;
      height:38px;
      width:38px;
      display:grid;
      place-items:center;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .close-btn svg path{ stroke:var(--hc-black); stroke-width:2.2; stroke-linecap:round; }
    .drawer-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
    .nav-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 12px;
      border:1px solid var(--hc-border);
      border-radius:14px;
      text-decoration:none;
      color:var(--hc-black);
      background:var(--hc-white);
    }
    .nav-link span{ font-weight:650; }
    .nav-link small{ color:var(--hc-muted); font-weight:550; }
    .drawer-footer{
      margin-top:auto;
      padding:14px;
      border-top:1px solid var(--hc-border);
      background:var(--hc-bg);
    }
    .slogan{ margin:0; font-size:13px; font-weight:750; }
    .slogan-sub{ margin:6px 0 0; font-size:12px; color:var(--hc-muted); line-height:1.35; }

    html.is-open .overlay{
      opacity:1;
      pointer-events:auto;
    }

    html.is-open .drawer{
      transform:translateX(0);
    }

    /* Main */
    main{ padding:12px 0 10px; background:linear-gradient(to bottom, rgba(54,126,125,.05), transparent 140px); }
    .stack{ display:grid; gap:10px; }
    .card{ background:var(--hc-white); border:1px solid var(--hc-border); border-radius:18px; box-shadow: var(--shadow); padding:12px; }

    /* Welcome strip (compact) */
    .welcome{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .welcome-left{ display:flex; align-items:center; gap:10px; min-width:0; }
    .glow{ width:10px; height:10px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); flex:0 0 auto; }
    .welcome-title{ margin:0; font-size:13px; font-weight:900; letter-spacing:.1px; }
    .welcome-right{ text-align:right; margin-left:auto; }
    .welcome-meta{ margin:0; font-size:12px; color:var(--hc-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw; }
    .meta-dot{ display:inline-block; width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.16); margin-right:8px; vertical-align:middle; }

    /* Mobile-first Welcome (stacked) */
    .welcome-card{ padding:10px 12px; }
    .home-welcome{ margin:0; font-size:16px; font-weight:950; letter-spacing:.1px; }
    .home-slogan{ margin:3px 0 0; font-size:12.5px; font-weight:750; color:var(--hc-muted); line-height:1.25; }
    .home-stats{ margin:5px 0 0; font-size:12px; color:var(--hc-muted); display:flex; align-items:center; gap:8px; }
    .home-stats .meta-dot{ margin:0; }

    /* Mobile compaction: keep header slim & show slider + find-provider above-the-fold */
    @media (max-width: 767px){
      main{ padding:8px 0 8px; background:linear-gradient(to bottom, rgba(54,126,125,.05), transparent 120px); }
      .stack{ gap:8px; }
      .card{ padding:10px;}
      .slider-wrap{ padding:8px; }
      .slide{ height:110px; flex:0 0 76%; }
      .title{ font-size:14px; margin:0 0 6px; }
      .text{ font-size:12px; }
      .btn{ padding:11px 12px; font-size:13.5px;  cursor:pointer; }
    }

    /* Hero */ .hero h2{ margin:0 0 6px; font-size:15px; } .sub1{ margin:0; font-size:12px; color:var(--hc-muted); } .sub2{ margin:4px 0 0; font-size:11px; color:var(--hc-muted); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:14px; border:1px solid var(--hc-border); background:var(--hc-white); color:var(--hc-black); text-decoration:none; font-weight:800; font-size:14px; width:100%;  cursor:pointer; } .btn-primary{ background:var(--hc-teal); border-color:var(--hc-teal); color:var(--hc-white); } .btn-danger{ background:var(--hc-red); border-color:var(--hc-red); color:var(--hc-white); cursor:pointer; }
    button.btn{ cursor:pointer; } /* Emergency A&E pulse (blinking effect) */
    @keyframes aeRing{
      0%,100%{ box-shadow:0 0 0 0 rgba(198,40,40,0), 0 0 0 0 rgba(198,40,40,0); opacity:.55; }
      50%{ box-shadow:0 0 0 6px rgba(198,40,40,.18), 0 0 18px rgba(198,40,40,.55); opacity:1; }
    }
    @keyframes aeBadge{
      0%,100%{ box-shadow:0 0 0 2px rgba(198,40,40,.18); transform:scale(1); }
      50%{ box-shadow:0 0 0 6px rgba(198,40,40,.22), 0 0 14px rgba(198,40,40,.45); transform:scale(1.06); }
    }

    /* Glowing H badge (Hospital & Pharmacies) */
    .h-badge{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:8px; background:rgba(255,255,255,.92); color:var(--hc-red); border:1px solid rgba(255,255,255,.65); box-shadow:0 0 0 2px rgba(198,40,40,.18); font-weight:950; letter-spacing:.2px; line-height:1; }
    .btn-danger .h-badge{ border-color:rgba(255,255,255,.75); }

    /* Apply A&E blink */
    .ae-blink{ position:relative; }
    .ae-blink > *{ position:relative; z-index:1; }
    .ae-blink::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; animation:aeRing 1.05s ease-in-out infinite; }
    .ae-blink .h-badge{ animation:aeBadge 1.05s ease-in-out infinite; transform-origin:center; }

    @media (prefers-reduced-motion: reduce){
      .ae-blink::after, .ae-blink .h-badge{ animation:none !important; }
    }

    .btn:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .btn:focus-visible{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .btn-danger:focus{ outline:3px solid rgba(198,40,40,.28); outline-offset:2px; box-shadow:0 0 0 4px rgba(198,40,40,.12); }
    .btn-danger:focus-visible{ outline:3px solid rgba(198,40,40,.28); outline-offset:2px; box-shadow:0 0 0 4px rgba(198,40,40,.12); }

    /* Slider carousel */
    .slider-wrap{ padding:10px; }
    .carousel{ position:relative; }
    .carousel-viewport{ overflow:hidden; touch-action: pan-y; border-radius:16px; }
    .carousel-track{ display:flex; gap:10px; transform:translateX(0);transition: transform .4s ease; }
    .carousel-card{ flex:0 0 100%; height:160px !important; border-radius:16px; border:1px solid var(--hc-border); background:#fff; padding:0; cursor:pointer; overflow:hidden; position:relative; appearance:none; }
    .carousel-card:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .carousel-card img{ width:100%; height:100%;  object-position:50% 22%; display:block; }
    .carousel-chip{ position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.84); border:1px solid var(--hc-border); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:850; color:var(--hc-black); }
    .carousel-chip .dot{ width:8px; height:8px; border-radius:999px; background:rgba(54,126,125,.95); }
    .carousel-card.is-built{ background:linear-gradient(135deg, rgba(54,126,125,.18), rgba(0,0,0,.05)); }
    .carousel-built-inner{ position:absolute; inset:0; padding:14px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; }
    .carousel-built-title{ margin:0; font-size:16px; font-weight:950; letter-spacing:.1px; }
    .carousel-built-sub{ margin:0; font-size:12.5px; color:var(--hc-muted); line-height:1.25; max-width:92%; }
    .carousel-arrows{ position:absolute; inset:0; pointer-events:none; }
    .carousel-arrow{ pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); height:40px; width:40px; border-radius:14px; border:1px solid var(--hc-border); background:rgba(255,255,255,.92); box-shadow: var(--shadow); display:grid; place-items:center; cursor:pointer; }
    .carousel-arrow:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .carousel-arrow[disabled]{ opacity:.45; cursor:not-allowed; }
    .carousel-prev{ left:8px; }
    .carousel-next{ right:8px; }
    .carousel-dots{ display:none !important; justify-content:center; gap:8px; margin-top:10px; }
    .carousel-dot{ height:10px; width:10px; border-radius:999px; border:1px solid var(--hc-border); background:var(--hc-white); cursor:pointer; }
    .carousel-dot[aria-current="true"]{ background:rgba(54,126,125,.85); border-color:rgba(54,126,125,.85); }
    .carousel-dot:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }

    @media (min-width: 768px){
      .carousel-card{ flex-basis:31%; height:155px; }
    }

    @media (prefers-reduced-motion: reduce){
      .carousel-track{ transition:none !important; }
    }

    /* Slider details modal */
    .modal{ position:fixed; inset:0; display:none; z-index:90; }
    .modal.is-on{ display:block; }
    .modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
    .modal .panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(94vw, 820px); border-radius:18px; background:var(--hc-white); border:1px solid var(--hc-border); box-shadow:0 16px 50px rgba(0,0,0,.25); overflow:hidden; }
    .modal .top{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--hc-border); gap:10px; }
    .modal .top strong{ font-size:13px; }
    .icon-btn{ height:36px; width:36px; border-radius:12px; border:1px solid var(--hc-border); background:var(--hc-white); cursor:pointer; }
    .icon-btn:focus{ outline:3px solid rgba(54,126,125,.25); outline-offset:2px; }
    .modal-media{ width:100%; max-height:320px; background:linear-gradient(135deg, rgba(54,126,125,.18), rgba(0,0,0,.05)); overflow:hidden; }
    .modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
    .modal-body{ padding:12px 12px 14px; }
    .modal-title{ margin:0; font-size:16px; font-weight:950; letter-spacing:.1px; }
    .modal-sub{ margin:6px 0 0; color:var(--hc-muted); font-size:12.8px; line-height:1.35; }
    .modal-pill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--hc-border); background:rgba(54,126,125,.08); font-weight:850; font-size:12px; margin-top:10px; } 
    /* Two-up cards (desktop) */
    .two-up{ display:grid; gap:10px; }
    @media (min-width: 768px){ .two-up{ grid-template-columns:1fr 1fr; } }
    /* Card text */ .title{ margin:0 0 6px; font-size:15px; } .text{ margin:0; color:var(--hc-muted); font-size:12.5px; line-height:1.35; } .cta{ margin-top:10px; } 
    /* Footer */
    footer{ border-top:1px solid var(--hc-border); background:var(--hc-bg); }
    .footer-inner{ padding:14px 0 18px; }
    .footer-links{ 
      display:flex; 
      flex-wrap:wrap; 
      align-items:center; 
      justify-content:center;  /* center the links horizontally */
      gap:10px 14px; 
      margin:12px 0 10px; 
      padding:0; 
      list-style:none; 
    }
    .footer-links a{ 
      color:var(--hc-black); 
      text-decoration:none; 
      border-bottom:1px solid rgba(17,17,17,.25); 
    }
    .fb-icon{ 
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      width:28px; 
      height:28px; 
      border-radius:999px; 
      border:1px solid var(--hc-border); 
      background:var(--hc-white); 
      box-shadow: var(--shadow); 
    }
    .fb-icon svg path{ fill:var(--hc-black); }
    .copyright{ 
      color:var(--hc-muted); 
      font-size:12px; 
      text-align:center;  /* center the copyright text */
    } 
    /* Desktop */
    @media (min-width: 768px){
      :root{ --header-h:64px; }
      .brand img{ height:55px; }
      .brand-text{ display:flex; }
      .desktop-nav{ display:flex; }
      .menu-btn{ display:none; }
      .overlay, .drawer{ display:none; }
      .btn{ width:auto;  cursor:pointer; }
      .slide{ flex-basis: 31%; height:150px; }
      .welcome-meta{ max-width:360px; }
    } 

    /* Community Initiatives alignment */
    .feature-top{display:flex;align-items:center;gap:10px;}
    .feature-top .icon{width:38px;height:38px;border-radius:12px;}
    .feature-top .feature-name{margin:0;flex:1;}

    /* Community Initiatives: tidy inner cards */
    .community-cards{display:grid;gap:10px;margin-top:12px;}
    .subcard{
      background:rgba(255,255,255,1);
      border:1px solid var(--hc-border);
      border-radius:16px;
      padding:12px;
    }
    @media (min-width:768px){
      .community-cards{grid-template-columns:1fr 1fr;}
    }

    /* Coming soon pill (light shade) */
    .badge.soon.feature-tag, .pill-soon{
      display:inline-flex;
      align-items:center;
      padding:4px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      background:rgba(54,126,125,.10);
      border:1px solid rgba(54,126,125,.18);
      color:var(--hc-teal);
      white-space:nowrap;
    }
    .h-emergency-btn{
  height:42px;
  width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:14px;
  border:1px solid var(--hc-red);
  background:var(--hc-red);
  color:var(--hc-white);
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
    
/* Make image fill remaining space */
.sponsored-card img {
  flex: 1;
  width: 100%;
  object-fit: cover;
}
.carousel-footer-text {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
  color: #000000;
  letter-spacing: 0.5px;
}
@media (max-width: 768px) {

  /* Home stats center */
  .home-stats, .home-welcome, .home-slogan {
    justify-content: center;   /* flex center */
    text-align: center;
  }

}
/* Back to Top Button */
#backToTop {
  position: fixed;
  bottom: 25px;
  right: 25px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  border: none;
  background: var(--hc-teal);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: all .3s ease;
  z-index: 999;
}

#backToTop:hover {
  background: var(--hc-red);
  transform: translateY(-3px);
}

/* Drawer Community group */
    details.drawer-dd{ margin:0; }
    details.drawer-dd > summary{ list-style:none; }
    details.drawer-dd > summary::-webkit-details-marker{ display:none; }
    .drawer-sub{ padding:6px 6px 10px; }
    .drawer-sub a.sub-link{
      display:block;
      padding:10px 10px;
      margin:6px 0;
      border-radius:14px;
      text-decoration:none;
      color:var(--hc-black);
      font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(17, 17, 17, 0.05);
    text-align: right;
    }
    .drawer-sub a.sub-link small{ display:block; margin-top:2px; color:var(--hc-muted); font-weight:800; }
    .drawer-sub a.sub-link:hover{ background:rgba(54,126,125,.06); }
    
     .nav-chevron {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.4;
      fill: none;
      transition: transform .18s ease;
      flex-shrink: 0;
    }
    details[open] .nav-chevron {
      transform: rotate(180deg);
    }
    /* Ensure dropdown summaries use flex for alignment */
    details.dd > summary,
    details.drawer-dd > summary {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    @media (max-width: 768px) {
  .hero h2, .sub1 {
    text-align:center;
  }
}