/* Clean White Medical Palette with High-Contrast Typography & Emergency Accents */
:root {
  --porcelain: #ffffff;
  --stone: #f8fafc;
  --sage: #e2e8f0;
  --leaf: #cbd5e1;
  --moss: #94a3b8;
  --ink: #0f172a;
  --muted: #475569;
  --red: #e53935;
  --red-hover: #c62828;
  --line: #e2e8f0;
  --pale: #f8fafc;
}

body {
  background: #ffffff !important;
  color: var(--ink);
}

body:before {
  display: none !important;
}

.topbar {
  background: #0f172a;
  color: #f8fafc;
  border-bottom: 1px solid #1e293b;
}

.topbar a {
  color: #34d399;
}

.topbar i,
.eyebrow i,
.live {
  background: #10b981;
}

header {
  background: #ffffff;
}

.brand-icon {
  background: rgba(229, 57, 53, 0.1);
  border: 1px solid rgba(229, 57, 53, 0.25);
  color: #e53935;
  border-radius: 12px;
  padding: 6px 10px;
}

.brand small {
  color: #64748b;
}

nav a[aria-current],
nav a:hover {
  color: #e53935;
  border-color: #e53935;
}

.button.primary {
  background: var(--red);
  color: #ffffff;
  border: 1px solid var(--red);
  box-shadow: 0 6px 20px rgba(229, 57, 53, 0.35);
}

.button.primary:hover {
  background: var(--red-hover);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(229, 57, 53, 0.5);
}

.button.secondary {
  border-color: #cbd5e1;
  color: var(--ink);
  background: #ffffff;
}

.button.secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.hero .eyebrow,
.eyebrow {
  color: #059669;
}

.hero h1 em {
  color: #e53935;
}

.hero-copy > p {
  color: var(--muted);
}

.hero-note strong {
  color: var(--ink);
}

.pulse {
  background: rgba(229, 57, 53, 0.1);
  color: #e53935;
}

.hero-image {
  background: #f1f5f9;
  border-color: #e2e8f0;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
}

.hero-image > img {
  filter: saturate(0.9) brightness(1);
}

.hero-image:hover > img {
  filter: saturate(1) brightness(1.02);
}

.image-tag {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e2e8f0;
  color: var(--ink);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.orbit-label {
  background: #0f172a;
  color: #ffffff;
  border-color: #ffffff;
}

.image-caption {
  color: #fff;
}

.image-caption span {
  color: #e2e8f0;
}

.ambient {
  opacity: 0.35;
}

.motion-toggle {
  background: #ffffff;
  color: var(--ink);
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.trust {
  background: #ffffff;
  border-color: #e2e8f0;
}

.trust b {
  color: var(--ink);
}

.trust span {
  color: var(--muted);
}

.service {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.service:after {
  color: #059669;
}

.service:hover {
  border-color: #e53935;
  box-shadow: 0 16px 36px rgba(229, 57, 53, 0.08);
}

.number {
  color: #e53935;
}

.service p {
  color: var(--muted);
}

.arrow,
.text-link {
  color: #059669;
}

.split > img,
.photo-stack > img {
  filter: saturate(0.9);
}

.photo-stack > span {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-color: #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.checks li:before {
  color: #10b981;
}

.gallery img {
  filter: saturate(0.9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.cta {
  background: radial-gradient(ellipse at right, #1e293b, #0f172a 70%);
  border-color: #334155;
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.cta .eyebrow {
  color: #34d399;
}

.cta p {
  color: #94a3b8;
}

.cta .primary {
  background: #e53935;
  color: #ffffff;
  border-color: #e53935;
}

.cta .primary:hover {
  background: #c62828;
}

footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.copyright {
  color: var(--muted);
  border-color: #e2e8f0;
}

.contact-panel {
  background: linear-gradient(145deg, #0f172a, #1e293b);
  border-color: #334155;
  color: #ffffff;
}

.contact-panel .eyebrow {
  color: #34d399;
}

.contact-panel p {
  color: #cbd5e1;
}

.contact-panel .big-phone {
  color: #34d399;
}

.contact-panel hr {
  border-color: #334155;
}

.enquiry {
  color: var(--ink);
}

input,
textarea,
select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

input:focus,
textarea:focus,
select:focus {
  outline-color: #059669;
  border-color: #059669;
}

.partner,
.team .cards,
#result {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.scroll-progress {
  background: #e53935;
}

.skip:focus {
  background: #ffffff;
  color: var(--ink);
}

::selection {
  background: rgba(229, 57, 53, 0.2);
  color: var(--ink);
}

.brand-logo-img {
  height: 52px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo-img {
  height: 48px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}

/* ==========================================================================
   NAVIGATION & RIGHT-SIDE MOBILE FRAME DRAWER SYSTEM
   ========================================================================== */

/* Global SVG Icon Constraints */
.nav-svg {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
}

.nav-arrow-svg {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0 !important;
}

/* Desktop Navigation (default > 820px) */
@media (min-width: 821px) {
  .menu,
  .drawer-header,
  .drawer-footer,
  .nav-backdrop,
  .nav-svg,
  .nav-arrow-svg,
  .nav-arrow,
  .nav-icon {
    display: none !important;
  }

  nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .drawer-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 32px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .drawer-links a,
  nav > a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .drawer-links a:hover,
  .drawer-links a[aria-current="page"],
  nav > a:hover,
  nav > a[aria-current="page"] {
    color: var(--red) !important;
    background: transparent !important;
    border-color: var(--red) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .drawer-links a .nav-link-content {
    display: inline !important;
  }
}

/* ==========================================================================
   MOBILE FRAME LAYOUT (SCREEN WIDTH <= 820px)
   Drawer slides in from the RIGHT SIDE when menu button is clicked
   ========================================================================== */
@media (max-width: 820px) {
  header {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand-logo-img {
    height: 46px;
    max-width: 185px;
  }

  .header-call {
    display: none !important;
  }

  /* Hamburger Menu Toggle Button on Right Side */
  .menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1050;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .menu:hover,
  .menu:focus-visible {
    background: #f8fafc;
    border-color: var(--red);
    color: var(--red);
    outline: none;
  }

  .menu[aria-expanded="true"] {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
  }

  /* Right-Side Mobile Frame Drawer */
  nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(340px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: 2100 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: -12px 0 38px rgba(15, 23, 42, 0.28) !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  nav.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Frosted Glass Backdrop Overlay */
  .nav-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 2050 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
  }

  .nav-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Drawer Header */
  .drawer-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    gap: 12px;
  }

  .drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .drawer-logo {
    height: 54px;
    max-height: 58px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
  }

  .drawer-brand-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    font-family: Manrope, sans-serif;
  }

  .drawer-brand-sub {
    display: block;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 2px;
  }

  .drawer-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    z-index: 10 !important;
    flex-shrink: 0;
  }

  .drawer-close:hover,
  .drawer-close:active {
    background: #fee2e2;
    border-color: #fca5a5;
    color: var(--red);
    transform: rotate(90deg);
  }

  /* Drawer Navigation Links */
  .drawer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 16px !important;
    flex: 1;
    overflow-y: auto;
  }

  .drawer-links a,
  nav > a:not(.drawer-call-btn):not(.drawer-whatsapp-btn) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .drawer-links a .nav-link-content,
  nav > a .nav-link-content {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .drawer-links a .nav-svg,
  nav > a .nav-svg {
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    stroke: #64748b !important;
    stroke-width: 2 !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transition: stroke 0.2s ease !important;
  }

  .drawer-links a .nav-label,
  nav > a .nav-label {
    flex: 1;
    font-size: 14px;
    letter-spacing: -0.1px;
  }

  .drawer-links a .nav-arrow-svg,
  nav > a .nav-arrow-svg,
  .drawer-links a .nav-arrow,
  nav > a .nav-arrow {
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    stroke: #94a3b8 !important;
    stroke-width: 2 !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
  }

  .drawer-links a:hover,
  .drawer-links a:active,
  nav > a:hover,
  nav > a:active {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    border-left-color: var(--red) !important;
    color: var(--red) !important;
  }

  .drawer-links a:hover .nav-svg,
  .drawer-links a:active .nav-svg,
  nav > a:hover .nav-svg,
  nav > a:active .nav-svg {
    stroke: var(--red) !important;
  }

  .drawer-links a:hover .nav-arrow-svg,
  .drawer-links a:active .nav-arrow-svg,
  nav > a:hover .nav-arrow-svg,
  nav > a:active .nav-arrow-svg {
    stroke: var(--red) !important;
    transform: translateX(2px);
  }

  .drawer-links a[aria-current="page"],
  nav > a[aria-current="page"] {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    border-left: 3px solid var(--red) !important;
    color: var(--red) !important;
    font-weight: 700 !important;
  }

  .drawer-links a[aria-current="page"] .nav-svg,
  nav > a[aria-current="page"] .nav-svg {
    stroke: var(--red) !important;
  }

  .drawer-links a[aria-current="page"] .nav-arrow-svg,
  nav > a[aria-current="page"] .nav-arrow-svg {
    stroke: var(--red) !important;
  }

  /* Drawer Footer Actions */
  .drawer-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 18px 16px 24px !important;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
  }

  .drawer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #1e3a47;
    background: #e6f4ea;
    padding: 7px 12px;
    border-radius: 6px;
    margin-bottom: 2px;
  }

  .drawer-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    display: inline-block;
  }

  .drawer-call-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: var(--red) !important;
    color: #ffffff !important;
    padding: 13px 16px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(229, 57, 53, 0.35);
    border: none !important;
    transition: transform 0.2s, background 0.2s !important;
  }

  .drawer-call-btn:hover,
  .drawer-call-btn:active {
    background: #c62828 !important;
    transform: translateY(-1px);
  }

  .drawer-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: #25d366 !important;
    color: #ffffff !important;
    padding: 11px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: center;
    text-decoration: none !important;
    border: none !important;
    transition: transform 0.2s, background 0.2s !important;
  }

  .drawer-whatsapp-btn:hover,
  .drawer-whatsapp-btn:active {
    background: #1eb857 !important;
    transform: translateY(-1px);
  }

  .drawer-lead-note {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    margin: 4px 0 0;
    font-weight: 600;
  }

  .mobile-call {
    background: #e53935;
    color: #ffffff;
    border-top: 1px solid #c62828;
  }

  /* Prevent background scrolling when mobile drawer is open */
  body.nav-open {
    overflow: hidden !important;
  }
}