html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Scroll reveal-on-view animation */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sticky header: compact state once the page has scrolled */
#site-header.is-stuck {
  box-shadow: 0 8px 24px rgba(18, 46, 77, 0.10);
}
#site-header.is-scrolled #header-row {
  height: 64px;
}

/* Mobile nav toggle -> animated hamburger to close icon */
#nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#nav-toggle.is-open span:nth-child(2) { opacity: 0; }
#nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hide scrollbar for the services carousel while keeping it scrollable */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Trusted-by marquee */
.marquee-track {
  animation: marquee 22s linear infinite;
  width: max-content;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ======================================================================
   PREMIUM DESIGN-SYSTEM LAYER
   Shared by every page via css/custom.css - upgrades navbar, cards,
   buttons and imagery site-wide without touching each page's markup.
   ====================================================================== */

/* --- Glass navbar (single unified header component) ---------------- */
#navbar-main {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
}
#site-header.is-stuck #navbar-main {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(18, 46, 77, 0.12);
  border-color: rgba(18, 46, 77, 0.08);
}
#site-header .hidden.sm\:block.bg-navy-deep {
  max-height: 36px;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
#site-header.is-scrolled .hidden.sm\:block.bg-navy-deep {
  max-height: 0;
  opacity: 0;
}
#header-row { transition: height .35s cubic-bezier(.22,1,.36,1); }

/* Active nav dot + sliding pill highlight (see #nav-pill, driven by initNavHighlight in main.js) */
.nav-link { position: relative; border-radius: 9999px; }
.nav-link.text-saffron { font-weight: 600; }
.nav-link.text-saffron::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #F26B35, #FFB012);
}
#nav-pill { box-shadow: inset 0 0 0 1px rgba(242,107,53,0.14); }
#main-nav::-webkit-scrollbar { display: none; }
#main-nav { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile nav panel: smooth slide/fade instead of an abrupt show/hide.
   pointer-events is toggled explicitly so the closed (invisible) panel can
   never swallow taps meant for the page underneath it, and so it becomes
   tappable the instant it opens. */
.mobile-nav {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.mobile-nav.is-open {
  max-height: 80vh;
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 16px 32px -12px rgba(15,23,42,0.18);
}


/* --- Card lift: applies to every card using the shared shadow-soft
   utility across all 8 pages (services, packages, tests, careers, etc.) */
.shadow-soft {
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1),
              border-color .45s ease;
}
a.shadow-soft:hover, .shadow-soft:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(18, 46, 77, 0.18);
  border-color: rgba(242, 107, 53, 0.25);
}
.shadow-deep { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }

/* Image zoom inside any overflow-hidden rounded card on hover */
.rounded-2xl.overflow-hidden img,
.rounded-3xl.overflow-hidden img {
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.shadow-soft:hover img, .shadow-deep:hover img {
  transform: scale(1.06);
}

/* Icon tiles get a subtle pop on card hover */
.shadow-soft:hover .rounded-xl.bg-navy-deep,
.shadow-soft:hover .rounded-full.bg-navy-deep {
  transform: translateY(-2px) scale(1.05);
}
.rounded-xl.bg-navy-deep, .rounded-full.bg-navy-deep {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

/* --- Buttons: arrow glide + soft glow ------------------------------ */
a.bg-saffron, button.bg-saffron {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .25s ease;
}
a.bg-saffron:hover, button.bg-saffron:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(242, 107, 53, 0.35);
}
a.bg-navy-deep:hover, button.bg-navy-deep:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(18, 46, 77, 0.28);
}
a[class*="border-navy-deep"]:hover, a[class*="border-white/40"]:hover {
  transform: translateY(-2px);
}
a.bg-saffron, a.bg-navy-deep, a[class*="border-2 border-navy-deep"] {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .25s ease, color .25s ease;
}
a span[aria-hidden="true"] { display: inline-block; transition: transform .3s ease; }
a:hover > span[aria-hidden="true"] { transform: translateX(4px); }

/* Shimmer sweep across saffron CTAs on hover - a single quiet moment of shine */
a.bg-saffron::before, button.bg-saffron::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
a.bg-saffron:hover::before, button.bg-saffron:hover::before { left: 135%; }

/* --- Decorative gradient-mesh / blob background utilities ---------- */
.bg-mesh { position: relative; isolation: isolate; }
.bg-mesh::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(242,107,53,0.10), transparent 60%),
    radial-gradient(500px 260px at 85% 80%, rgba(18,46,77,0.08), transparent 60%);
}
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.blob-animate { animation: blobFloat 9s ease-in-out infinite; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(14px,-18px) scale(1.06); }
}

/* Floating stat card that overlaps a hero/media edge */
.float-card {
  animation: floatCard 5s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Stagger reveal delays - add data-delay="1".."6" on any .reveal element */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.reveal[data-delay="6"] { transition-delay: .48s; }

/* Fine-grained reveal variants */
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }
.reveal-left { opacity: 0; transform: translateX(-26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .blob-animate, .float-card { animation: none; }
}

/* Subtle noise/grid texture, used sparingly on dark sections */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Form inputs: focus glow */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(242, 107, 53, 0.15);
  border-color: #F26B35 !important;
}

/* --- Extra attractiveness pass ------------------------------------ */

/* Top accent bar - premium brand signature */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, #F26B35, #FFB012, #1B4A73);
}

/* Gradient CTA buttons instead of flat saffron */
a.bg-saffron, button.bg-saffron {
  background-image: linear-gradient(135deg, #F26B35 0%, #FFB012 130%);
  background-color: #F26B35;
}
a.bg-saffron:hover, button.bg-saffron:hover {
  background-image: linear-gradient(135deg, #D9531F 0%, #F26B35 130%);
}

/* Slightly richer dark sections with a soft gradient instead of flat navy */
.bg-navy-deep {
  background-image: linear-gradient(160deg, #16375c 0%, #122E4D 60%, #0e2439 100%);
}

/* Headings: tighter, punchier tracking site-wide */
h1.font-display, h2.font-display, h3.font-display {
  letter-spacing: -0.01em;
}

/* Section eyebrow labels: plain text, no dash/tick mark before them */
.text-saffron.uppercase {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}
.text-saffron.uppercase::before { content: none; }

/* Branded text selection + a slim gradient scrollbar (WebKit + Firefox) */
::selection { background: rgba(242, 107, 53, 0.22); color: #122E4D; }
html { scrollbar-color: #F26B35 #F1EAD9; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F1EAD9; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F26B35, #FFB012);
  border-radius: 6px;
  border: 2px solid #F1EAD9;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #D9531F, #F26B35); }

/* Animated stat numbers (data-count) get the brand gradient rather than flat navy */
[data-count] {
  background: linear-gradient(135deg, #1B4A73, #F26B35);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer contact-icon circles lift and glow on hover */
footer a.rounded-full {
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease, box-shadow .3s ease;
}
footer a.rounded-full:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px rgba(242, 107, 53, 0.35);
}

/* Testimonial cards: a soft oversized quotation mark, added purely via CSS
   (no markup changes needed) plus a gentle lift on hover */
.marquee-card {
  position: relative;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.marquee-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(18,46,77,0.16); }
.marquee-card::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem; right: 1.1rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(242, 107, 53, 0.14);
  pointer-events: none;
}

/* Links/buttons with a visible focus-visible ring for accessibility + polish */
a:focus-visible, button:focus-visible {
  outline: 2px solid #F26B35;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ======================================================================
   HEADER: brand logo + NABL badge, social icons, careers, mobile tuning
   ====================================================================== */
#header-row { height: 84px; }
#site-header.is-scrolled #header-row { height: 68px; }

.brand-link { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.brand-logo {
  display: block; height: 60px; width: auto; max-width: 100%;
  transition: height .35s cubic-bezier(.22,1,.36,1);
}
#site-header.is-scrolled .brand-logo { height: 50px; }

.nabl-badge { display: flex; align-items: center; flex-shrink: 0; }
.nabl-logo {
  display: block; height: 56px; width: auto;
  transition: height .35s cubic-bezier(.22,1,.36,1), transform .35s ease;
}
.nabl-badge:hover .nabl-logo { transform: scale(1.04); }
#site-header.is-scrolled .nabl-logo { height: 46px; }

@media (max-width: 1279px) {
  .brand-logo { height: 50px; }
  #site-header.is-scrolled .brand-logo { height: 44px; }
  .nabl-logo { height: 48px; }
  #site-header.is-scrolled .nabl-logo { height: 42px; }
  #main-nav .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .76rem; }
}
@media (max-width: 1023px) {
  #header-row { height: 74px; }
  #site-header.is-scrolled #header-row { height: 64px; }
  .brand-logo { height: 46px; }
  #site-header.is-scrolled .brand-logo { height: 40px; }
  .nabl-logo { height: 44px; }
  #site-header.is-scrolled .nabl-logo { height: 38px; }
}
@media (max-width: 639px) {
  #header-row { height: 66px; gap: .6rem; }
  #site-header.is-scrolled #header-row { height: 58px; }
  .brand-logo { height: 38px; }
  #site-header.is-scrolled .brand-logo { height: 34px; }
  .nabl-logo { height: 40px; }
  #site-header.is-scrolled .nabl-logo { height: 36px; }
}
@media (max-width: 379px) {
  #header-row { padding-left: .75rem; padding-right: .75rem; gap: .45rem; }
  .brand-logo { height: 30px; }
  .nabl-logo { height: 34px; }
}

/* Social icons - top utility strip */
.social-strip { display: flex; align-items: center; gap: .3rem; margin-left: .25rem; }
.social-strip-link {
  width: 24px; height: 24px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.88);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.social-strip-link:hover { background: #F26B35; color: #fff; transform: translateY(-1px); }

/* Social icons - mobile menu panel */
.mobile-social {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1rem .4rem; margin-top: .4rem;
  border-top: 1px solid rgba(18,46,77,.1);
}
.mobile-social span { font-size: .78rem; font-weight: 600; color: #4B5563; margin-right: .25rem; }
.mobile-social-link {
  width: 38px; height: 38px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #122E4D; color: #FFB012;
  transition: background-color .25s ease, color .25s ease;
}
.mobile-social-link:hover { background: #F26B35; color: #fff; }

/* ======================================================================
   FLOATING ENQUIRY / CALL / WHATSAPP / SOCIAL BAR
   ====================================================================== */
.fab {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fab-label {
  background: #122E4D; color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .28rem .7rem; border-radius: .6rem; box-shadow: 0 6px 16px rgba(10,20,45,.25);
}
.fab-pill {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 9px 7px; border-radius: 9999px;
  background: linear-gradient(180deg, #FBF6EA, #EADFC5);
  box-shadow: 0 14px 34px rgba(10,20,45,.32), inset 0 0 0 1px rgba(255,255,255,.6);
}
.fab-btn {
  width: 44px; height: 44px; border-radius: 9999px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #0E2440; color: #FFB012; border: 2px solid #FFB012;
  transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.fab-btn:hover, .fab-btn:focus-visible { background: #FFB012; color: #0E2440; transform: scale(1.1); outline: none; }
.fab-wa { position: relative; }
.fab-wa::after {
  content: ""; position: absolute; inset: -5px; border-radius: 9999px;
  border: 2px solid rgba(255,176,18,.55); animation: fabPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes fabPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.fab-sep { width: 28px; height: 1px; background: rgba(18,46,77,.28); }
.fab-more { display: none; }

@media (max-height: 640px) {
  .fab-btn { width: 36px; height: 36px; }
  .fab-btn svg { width: 17px; height: 17px; }
  .fab-pill { gap: 6px; padding: 7px 6px; }
  .fab-label { display: none; }
}
/* Below 1024px the vertical pill sat on top of page text, so it is replaced by
   the bottom-right WhatsApp + Call stack below. (Enquiry = Contact in the menu,
   social links = "Follow us" in the mobile menu.) */
@media (max-width: 1023px) {
  .fab { display: none; }
}
@media print { .fab, .wa-float { display: none; } }

/* ======================================================================
   WHATSAPP FLOATING BUTTON (bottom-right, every page)
   ====================================================================== */
.wa-float {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 46; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.wa-call {
  display: none; width: 48px; height: 48px; border-radius: 9999px;
  align-items: center; justify-content: center;
  background: #0E2440; color: #FFB012; border: 2px solid #FFB012;
  box-shadow: 0 10px 24px rgba(10,20,45,.35);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease, color .25s ease;
}
.wa-call:hover, .wa-call:focus-visible { background: #FFB012; color: #0E2440; transform: scale(1.08); outline: none; }
.wa-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  height: 58px; min-width: 58px; padding: 0; border-radius: 9999px;
  background: #25D366; color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  box-shadow: 0 12px 28px rgba(18,140,70,.42), 0 0 0 3px rgba(255,255,255,.9);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease, padding .3s ease, gap .3s ease;
}
.wa-btn:hover, .wa-btn:focus-visible { background: #1EBE5A; transform: translateY(-2px); outline: none; }
.wa-btn svg { flex-shrink: 0; }
.wa-btn::after {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid rgba(37,211,102,.6); animation: waPulse 2.4s ease-out infinite; pointer-events: none;
}
@keyframes waPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.wa-label {
  display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .3s ease, opacity .25s ease;
}
@media (min-width: 1024px) {
  .wa-btn:hover, .wa-btn:focus-visible { padding: 0 1.15rem 0 .9rem; gap: .55rem; }
  .wa-btn:hover .wa-label, .wa-btn:focus-visible .wa-label { max-width: 170px; opacity: 1; }
}
@media (max-width: 1023px) {
  .wa-call { display: inline-flex; }
}
@media (max-width: 639px) {
  .wa-float { right: 12px; gap: 10px; }
  .wa-btn { height: 54px; min-width: 54px; }
  .wa-btn svg { width: 28px; height: 28px; }
  .wa-call { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .wa-btn::after { animation: none; } }

/* ======================================================================
   EQUIPMENT - department wise
   ====================================================================== */
.eq-wrap { display: flex; flex-direction: column; gap: 3rem; }
.eq-split { display: grid; grid-template-columns: minmax(0,1fr); gap: 3rem; }
.eq-dept { min-width: 0; }
.eq-dept-head {
  display: flex; align-items: flex-start; gap: .85rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding-bottom: .95rem;
  border-bottom: 1px solid rgba(18,46,77,.13);
}
.eq-dept-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #122E4D; color: #FFB012;
}
.eq-dept-text { flex: 1 1 160px; min-width: 0; }
.eq-dept-title { font-family: inherit; font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: #122E4D; }
.eq-dept-sub { font-size: .82rem; color: #4B5563; margin-top: .1rem; }
.eq-report-badge {
  margin-top: .55rem; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: #B8480F;
  background: rgba(242,107,53,.1); border: 1px solid rgba(242,107,53,.28);
  padding: .32rem .75rem; border-radius: 9999px;
}
.eq-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.eq-grid-1 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) {
  .eq-grid-5, .eq-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .eq-grid-1 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .eq-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .eq-split { grid-template-columns: minmax(0,1fr) minmax(0,3fr); gap: 2rem; }
  .eq-grid-1 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 420px) {
  .eq-grid { gap: .8rem; }
  .eq-dept-title { font-size: 1.1rem; }
}

/* ======================================================================
   CERTIFICATION - NABL logo left, achievements list right (no cards)
   ====================================================================== */
.cert-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.6rem; }
.cert-doc-frame {
  position: relative; width: 100%; padding: .7rem; border-radius: 1.1rem;
  background: linear-gradient(135deg, #d4a94a, #b8862f);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.cert-doc-img {
  display: block; width: 100%; height: auto; border-radius: .7rem;
  border: 3px solid #fff;
}
.cert-copy { flex: none; width: 100%; min-width: 0; }
.cert-heading { font-weight: 700; font-size: 1.35rem; color: #fff; margin-bottom: .35rem; }
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem .6rem; margin: 0 -.6rem; border-radius: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background .2s ease, transform .2s ease;
}
.cert-item:last-child { border-bottom: 0; }
.cert-item:hover { background: rgba(255,255,255,.05); transform: translateX(4px); }
.cert-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFB012; border: 1.5px solid rgba(255,176,18,.6); background: rgba(255,176,18,.08);
  transition: background .2s ease, transform .2s ease;
}
.cert-item:hover .cert-icon { background: rgba(255,176,18,.18); transform: scale(1.08); }
.cert-title { font-weight: 700; font-size: 1.02rem; color: #fff; margin-bottom: .2rem; }
.cert-text { font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.72); }

/* ---- Stay Connected QR frames ---- */
.qr-frame {
  display: block; padding: 12px; background: #fff;
  border: 1px solid rgba(26,35,64,.12); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(26,35,64,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.qr-frame:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26,35,64,.14); }
.qr-frame img { display: block; width: 150px; height: 150px; }
@media (max-width: 640px) {
  .qr-frame img { width: 120px; height: 120px; }
}
@media (max-width: 639px) {
  .cert-item { gap: .8rem; }
}

/* ======================================================================
   CAREERS PAGE
   ====================================================================== */
.career-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 700px) { .career-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .career-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .career-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.career-why, .career-job {
  background: #fff; border: 1px solid rgba(18,46,77,.07); border-radius: 1rem; padding: 1.6rem;
}
.career-why-icon {
  width: 46px; height: 46px; border-radius: .85rem; margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center; background: #122E4D; color: #FFB012;
}
.career-why h3, .career-job h3 { font-weight: 700; font-size: 1.08rem; color: #122E4D; margin-bottom: .4rem; line-height: 1.3; }
.career-why p, .career-job p { font-size: .9rem; line-height: 1.65; color: #4B5563; }
.career-job { display: flex; flex-direction: column; background: #FAF6EF; }
.career-job-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.career-tag { font-size: .72rem; font-weight: 600; color: #fff; background: #F26B35; border-radius: 9999px; padding: .22rem .7rem; }
.career-type { font-size: .72rem; color: #4B5563; }
.career-meta { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1rem 0; font-size: .8rem; color: #4B5563; }
.career-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.career-apply { margin-top: auto; font-weight: 600; font-size: .9rem; color: #122E4D; }
.career-apply:hover { color: #F26B35; }
.career-note { margin-top: 2rem; font-size: .95rem; color: #4B5563; text-align: center; }

.hosp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.hosp-grid > .hosp-tile { flex: 0 0 calc((100% - 1.25rem) / 2); box-sizing: border-box; }
@media (min-width: 900px) { .hosp-grid > .hosp-tile { flex: 0 0 calc((100% - 3.75rem) / 4); } }
.hosp-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
  background: #fff; border: 1px solid rgba(18,46,77,.07); border-radius: 1rem; padding: 1.4rem 1rem;
}
.hosp-tile strong { font-size: .95rem; color: #122E4D; line-height: 1.3; }
.hosp-tile > span { font-size: .78rem; color: #4B5563; }
.hosp-logo-ph {
  width: 100%; max-width: 170px; height: 90px; margin-bottom: .9rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  border: 2px dashed rgba(18,46,77,.22); border-radius: .8rem; color: rgba(18,46,77,.45);
  background: #FAF6EF; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hosp-tile img { display: block; max-width: 170px; max-height: 90px; width: auto; height: auto; object-fit: contain; margin-bottom: .9rem; }

/* Page-wide safety: never let anything push the page sideways on phones */
body { overflow-x: clip; }
img { max-width: 100%; }

/* Highlighted key words (About hero: accuracy / transparency / reliability) */
.hl-word {
  color: #FFB012; font-weight: 700;
  background-image: linear-gradient(#FFB012, #FFB012);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
  padding-bottom: 1px;
}

/* ======================================================================
   EQUIPMENT CARDS - uniform photo frame, clean cut-outs, soft hover
   ====================================================================== */
.eq-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid rgba(18,46,77,.07); border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(18,46,77,.09);
  transition: opacity .7s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.eq-card::after { /* saffron accent that grows in on hover */
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #F26B35, #FFB012); transition: width .4s ease;
}
.eq-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(18,46,77,.16); }
.eq-card:hover::after { width: 100%; }
.eq-media {
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1rem; overflow: hidden;
  grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr);
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #F7F1E4 100%);
}
.eq-img { display: block; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.eq-cutout { mix-blend-mode: multiply; }            /* white-background product shots blend into the card */
.eq-photo { border-radius: .8rem; box-shadow: 0 8px 22px rgba(18,46,77,.18); } /* photos with their own background sit as framed prints */
.eq-card:hover .eq-img { transform: scale(1.05); }
.eq-body { padding: .95rem 1.1rem 1.15rem; border-top: 1px solid rgba(18,46,77,.06); }
.eq-name { display: block; font-weight: 700; font-size: .98rem; line-height: 1.3; color: #122E4D; }
.eq-type { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: #4B5563; }
@media (max-width: 420px) {
  .eq-media { padding: .7rem; }
  .eq-body { padding: .75rem .8rem .9rem; }
  .eq-name { font-size: .88rem; }
  .eq-type { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-card, .eq-img, .eq-card::after { transition: none; }
  .eq-card:hover, .eq-card:hover .eq-img { transform: none; }
}

/* NABL badge now leads the navbar (before Home) */
.nabl-badge { position: relative; }
@media (min-width: 1024px) {
  .nabl-badge { padding-right: 1rem; margin-right: .1rem; }
  .nabl-badge::after { content: ""; position: absolute; right: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(18,46,77,.14); }
}

/* Never allow sideways page scroll (off-screen reveal animations, decorative blobs) */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } body { overflow-x: clip; } }

/* Narrow desktops (1024-1179px): keep all eight links visible next to the two logos */
@media (min-width: 1024px) and (max-width: 1179px) {
  #header-row { gap: .6rem; }
  .brand-logo, #site-header.is-scrolled .brand-logo { height: 40px; }
  .nabl-logo, #site-header.is-scrolled .nabl-logo { height: 40px; }
  .nabl-badge { padding-right: .6rem; }
  #main-nav { gap: 0; }
  #main-nav .nav-link { padding-left: .42rem; padding-right: .42rem; font-size: .74rem; }
}
.eq-grid .eq-media { aspect-ratio: 4 / 3; }   /* every equipment photo is 1000x750 (4:3) - same frame everywhere, nothing cropped */
/* Phones: a lone last card spans the full row instead of leaving a gap */
@media (max-width: 639px) {
  .eq-grid > .eq-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .eq-grid > .eq-card:last-child:nth-child(odd) .eq-media { aspect-ratio: 4 / 3; }
}

/* About hero: the three principles as bold gold highlights */
.hl-row { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
/* (margin-bottom used to be reset to 0 here, which glued the pills to the phone button below them) */
.hl-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem .55rem .9rem; border-radius: 9999px;
  background: linear-gradient(135deg, #FFC43D, #FFB012); color: #122E4D;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(255,176,18,.28);
}
.hl-pill svg { flex-shrink: 0; }
@media (max-width: 479px) {
  .hl-row { gap: .5rem; }
  .hl-pill { font-size: .84rem; gap: .38rem; padding: .48rem .8rem .48rem .65rem; }
  .hl-pill svg { width: 16px; height: 16px; }
}

/* Hero phone / call button */
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.hero-call {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.hero-call svg { color: #FFB012; flex-shrink: 0; transition: transform .3s ease; }
.hero-call:hover, .hero-call:focus-visible { background: #FFB012; border-color: #FFB012; color: #122E4D; outline: none; transform: translateY(-2px); }
.hero-call:hover svg, .hero-call:focus-visible svg { color: #122E4D; transform: rotate(-12deg); }


/* ======================================================================
   HEADER MARQUEE: replaces the old static tagline-strip. Scrolls NABL
   certification + lab hours + branch locations continuously, on every
   breakpoint (desktop utility strip no longer shows them statically).
   ====================================================================== */
/* Top strip: contact (left, fixed) | scrolling ticker (middle) | social (right, fixed) */
.top-strip {
  position: relative; z-index: 12; width: 100%;
  background: #0E2440; color: rgba(255,255,255,.9); font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-strip-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 1rem; min-height: 36px;
}
.top-strip-contact { display: none; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.top-strip-social  { display: none; align-items: center; flex-shrink: 0; }
.top-strip-social .social-strip { margin-left: 0; }
@media (min-width: 640px) {
  .top-strip-contact, .top-strip-social { display: flex; }
  .top-strip-contact { padding-right: 1rem; border-right: 1px solid rgba(255,255,255,.14); }
  .top-strip-social  { padding-left: 1rem;  border-left: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 639px) { .top-strip-inner { padding: 0; min-height: 34px; } } /* phones: just the ticker, full width */
.header-marquee-mask {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.header-marquee-track {
  display: flex; width: max-content; white-space: nowrap;
  padding: .35rem 0;
  animation: headerMarqueeLoop 40s linear infinite; will-change: transform;
}
.header-marquee-half { display: flex; align-items: center; flex-shrink: 0; }
.header-marquee-item {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.88); padding: 0 .5rem;
}
.header-marquee-item .hm-link { display: inline-flex; align-items: center; gap: .4rem; color: inherit; transition: color .2s ease; }
.header-marquee-item .hm-link:hover, .header-marquee-item .hm-link:focus-visible { color: #FFB012; outline: none; }
.header-marquee-item .social-strip { margin-left: 0; gap: .35rem; }
.header-marquee-item strong { color: #FFB012; font-weight: 700; }
.header-marquee-item svg { color: #FFB012; flex-shrink: 0; }
.header-marquee-gap { display: inline-block; width: 3.5rem; }
.header-marquee-sep { color: rgba(255,255,255,.32); }
.header-marquee-mask:hover .header-marquee-track,
.header-marquee-mask:focus-within .header-marquee-track { animation-play-state: paused; }
@keyframes headerMarqueeLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .header-marquee-track { animation: none; } }
@media (max-width: 639px) { .header-marquee-item { font-size: .74rem; } .header-marquee-track { padding-top: .42rem; padding-bottom: .42rem; } }

/* Eyebrow labels that opt out of the little orange tick mark (e.g. the
   small category labels on the homepage service cards) */
.no-tick.text-saffron.uppercase { padding-left: 0; }
.no-tick.text-saffron.uppercase::before { content: none; }

/* ======================================================================
   EQUIPMENT SUMMARY CARDS (homepage) - 3 clickable department cards that
   link through to the full equipment.html listing.
   ====================================================================== */
.eq-summary-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem;
  overflow: hidden; border: 1px solid rgba(18,46,77,.05);
  box-shadow: 0 10px 30px rgba(18,46,77,.06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.eq-summary-card:hover { box-shadow: 0 20px 45px rgba(18,46,77,.16); transform: translateY(-4px); }
.eq-summary-media { position: relative; height: 12rem; overflow: hidden; }
.eq-summary-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.eq-summary-card:hover .eq-summary-media img { transform: scale(1.06); }
.eq-summary-count {
  position: absolute; bottom: .75rem; left: .75rem; background: rgba(18,46,77,.85);
  color: #FFB012; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .7rem; border-radius: 9999px; backdrop-filter: blur(2px);
}
.eq-summary-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.eq-summary-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; font-weight: 600; color: #122E4D;
}
.eq-summary-card:hover .eq-summary-link { color: #F26B35; }
.eq-summary-link svg { transition: transform .25s ease; }
.eq-summary-card:hover .eq-summary-link svg { transform: translateX(3px); }

/* Equipment page: when a homepage card links to just one department
   (equipment.html#pathology / #ecg / #xray), equipment-filter.js hides the
   other departments; this lets a lone eq-split child use the full row
   instead of sitting in a half-empty two-column grid. */
@media (min-width: 1024px) {
  .eq-split.single-active { grid-template-columns: minmax(0,1fr) !important; }
}


/* Equipment: when a department card links to e.g. equipment.html#ecg, land below the sticky header */

/* Header: the navbar stays fixed at the top; the scrolling top strip scrolls away (top offset is set in js/main.js) */
#site-header { top: -37px; } /* fallback until JS measures the real strip height */
.eq-dept[id] { scroll-margin-top: 110px; }


/* Homepage trust strip: NABL certificate logo + icons above each stat */
.trust-icon { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
.trust-nabl-logo { height: 60px; width: auto; display: block; }
.trust-icon-badge {
  width: 52px; height: 52px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #122E4D; color: #FFB012;
  box-shadow: 0 8px 18px rgba(18,46,77,.22), inset 0 0 0 3px rgba(255,176,18,.18);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease, color .3s ease;
}
.trust-cell:hover .trust-icon-badge { transform: translateY(-3px) scale(1.06); background: #FFB012; color: #122E4D; }
.trust-nabl-logo { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.trust-cell:hover .trust-nabl-logo { transform: translateY(-3px) scale(1.05); }
@media (max-width: 639px) {
  .trust-icon { height: 52px; margin-bottom: .5rem; }
  .trust-nabl-logo { height: 52px; }
  .trust-icon-badge { width: 46px; height: 46px; }
  .trust-icon-badge svg { width: 21px; height: 21px; }
}


/* CTA banner contact lines (phone numbers) - real icons instead of emoji */
.cta-contact { display: inline-flex; align-items: center; gap: .65rem; color: rgba(255,255,255,.88); font-weight: 500; transition: color .2s ease; }
.cta-contact-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFB012; background: rgba(255,176,18,.12); border: 1.5px solid rgba(255,176,18,.55);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.cta-contact:hover, .cta-contact:focus-visible { color: #FFB012; outline: none; }
.cta-contact:hover .cta-contact-icon, .cta-contact:focus-visible .cta-contact-icon { background: #FFB012; color: #122E4D; transform: scale(1.08); }

/* ======================================================================
   HOSPITAL MARQUEE CARDS (index.html "Referred by Pune's Medical Community")
   Own CSS on purpose - the tailwind.css build only contains the utility
   classes already used on the site, so spacing utilities can't be relied on.
   ====================================================================== */
.hosp-card {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  margin: 0 12px; padding: 14px 30px 14px 14px; min-width: 290px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
  border: 1px solid rgba(18,46,77,.09); border-radius: 20px;
  box-shadow: 0 10px 28px rgba(18,46,77,.08), 0 2px 6px rgba(18,46,77,.05);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.hosp-card::after { /* soft saffron accent line along the bottom */
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #F26B35, #FFB012); opacity: 0; transition: opacity .3s ease;
}
.hosp-card:hover { transform: translateY(-5px); border-color: rgba(255,176,18,.6); box-shadow: 0 22px 46px rgba(18,46,77,.16); }
.hosp-card:hover::after { opacity: 1; }

.hosp-logo {
  position: relative; width: 64px; height: 64px; flex-shrink: 0; overflow: hidden; display: block;
  border-radius: 16px; background: #fff; border: 1px solid rgba(18,46,77,.1);
  box-shadow: 0 6px 14px rgba(18,46,77,.14);
}
.hosp-logo-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #1B4A73 0%, #122E4D 100%); color: #FFB012;
  font-weight: 800; font-size: 1.2rem; letter-spacing: .04em;
  box-shadow: inset 0 0 0 3px rgba(255,176,18,.22);
}
.hosp-logo img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.hosp-card:hover .hosp-logo { transform: scale(1.05); }
.hosp-logo { transition: transform .3s cubic-bezier(.22,1,.36,1); }

.hosp-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hosp-name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: #122E4D; white-space: nowrap; }
.hosp-loc { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: #5B6673; white-space: nowrap; }
.hosp-loc svg { color: #F26B35; flex-shrink: 0; }

@media (max-width: 639px) {
  .hosp-card { min-width: 250px; gap: 13px; padding: 12px 24px 12px 12px; margin: 0 8px; border-radius: 18px; }
  .hosp-logo { width: 54px; height: 54px; border-radius: 14px; }
  .hosp-logo-mono { font-size: 1.05rem; }
  .hosp-name { font-size: .95rem; }
  .hosp-loc { font-size: .78rem; }
}

/* Desktop navbar: keep the links at their normal, compact spacing and push the whole group to the
   right edge, so "Contact" ends at the edge of the page content (no empty gap after it and no
   over-stretched spacing between links). */
@media (min-width: 1024px) {
  #main-nav { justify-content: flex-end; margin-right: -.5rem; }
}
@media (min-width: 1280px) {
  #main-nav { margin-right: -.75rem; } /* cancels the last link's own side padding so the text lines up with the page edge */
}

/* ===================================================================
   BLOOD TESTS PAGE - hero search, category tiles, test cards
   =================================================================== */
.bt-search { display: flex; align-items: center; gap: .5rem; max-width: 640px; margin-top: 1.75rem; background: #fff; border-radius: 999px; padding: .45rem .45rem .45rem 1.25rem; box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.bt-search svg { color: #64748b; flex: none; }
.bt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; padding: .7rem .25rem; color: #1c2430; }
.bt-search input::placeholder { color: #94a3b8; }
.bt-search button { flex: none; background: #F26B35; color: #fff; font-weight: 700; font-size: .92rem; padding: .8rem 1.5rem; border-radius: 999px; transition: background .2s; }
.bt-search button:hover { background: #d9531f; }
@media (max-width: 480px) { .bt-search button { padding: .8rem 1rem; } .bt-search input { font-size: .92rem; } }
.bt-badges { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.bt-badges li { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: .35rem .85rem; border-radius: 999px; }
.bt-badges li::before { content: "✓"; color: #FFB012; margin-right: .4rem; font-weight: 800; }

.tc-section { background: var(--paper, #FAF6EF); padding: 4rem 0 4.5rem; }
.tc-cats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; max-width: 1100px; margin: 0 auto 2.75rem; }
@media (min-width: 640px) { .tc-cats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 960px) { .tc-cats { grid-template-columns: repeat(5, minmax(0,1fr)); gap: .9rem; } }
.tc-cat { display: flex; align-items: center; gap: .75rem; text-align: left; background: #fff; border: 1.5px solid rgba(18,46,77,.1); border-radius: 1rem; padding: .85rem .9rem;
  box-shadow: 0 6px 18px rgba(18,46,77,.05); transition: transform .25s, border-color .25s, box-shadow .25s, background .25s; }
.tc-cat:hover { transform: translateY(-3px); border-color: #F26B35; box-shadow: 0 12px 26px rgba(18,46,77,.12); }
.tc-cat-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; background: rgba(242,107,53,.1); color: #F26B35; transition: all .25s; }
.tc-cat-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tc-cat-txt b { font-size: .86rem; font-weight: 700; color: #122e4d; }
.tc-cat-txt small { font-size: .74rem; color: #64748b; margin-top: .1rem; }
.tc-cat[aria-pressed="true"] { background: #122e4d; border-color: #122e4d; box-shadow: 0 14px 30px rgba(18,46,77,.3); }
.tc-cat[aria-pressed="true"] .tc-cat-ico { background: #FFB012; color: #122e4d; }
.tc-cat[aria-pressed="true"] b { color: #fff; } .tc-cat[aria-pressed="true"] small { color: rgba(255,255,255,.7); }

.tc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; max-width: 1100px; margin: 0 auto 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid rgba(18,46,77,.1); }
.tc-bar h3 { font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.5rem; color: #122e4d; line-height: 1.2; }
.tc-bar p { font-size: .84rem; color: #64748b; margin-top: .15rem; }
.tc-callbar { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 700; color: #d9531f; background: #fff; border: 1.5px solid rgba(242,107,53,.35); padding: .55rem 1.1rem; border-radius: 999px; transition: all .2s; }
.tc-callbar:hover { background: #F26B35; color: #fff; }

.tc-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 620px) { .tc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tc-grid { grid-template-columns: repeat(3, 1fr); } }
.tc-card { display: flex; flex-direction: column; gap: .75rem; background: #fff; border: 1px solid rgba(18,46,77,.09); border-radius: 1rem; padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 6px 18px rgba(18,46,77,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.tc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,46,77,.12); border-color: rgba(242,107,53,.4); }
.tc-name { font-family: Poppins, sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.35; color: #122e4d; min-height: 2.7rem; }
.tc-meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.tc-sample, .tc-time { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
.tc-sample { background: #f4f6f9; color: #475569; }
.tc-sample i { width: .65rem; height: .65rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tc-time { background: #f4f6f9; color: #475569; } .tc-time svg { color: #F26B35; }
.tc-time.is-fast { background: rgba(15,122,61,.1); color: #0f7a3d; } .tc-time.is-fast svg { color: #0f7a3d; }
.tc-book { margin-top: auto; padding-top: .7rem; border-top: 1px dashed rgba(18,46,77,.15); font-size: .84rem; font-weight: 700; color: #F26B35; transition: color .2s, letter-spacing .2s; }
.tc-book:hover { color: #d9531f; letter-spacing: .01em; }
.tc-more { display: block; margin: 2rem auto 0; padding: .85rem 2.2rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: #122e4d; color: #fff; transition: background .2s, transform .2s; }
.tc-more:hover { background: #F26B35; transform: translateY(-2px); }
.tc-empty { text-align: center; background: #fff; border-radius: 1rem; padding: 2.5rem 1rem; max-width: 1100px; margin: 0 auto; color: #4b5563; }
.tc-empty button { font-weight: 700; color: #F26B35; text-decoration: underline; }
.tc-note { text-align: center; margin-top: 1.75rem; font-size: .82rem; color: #64748b; }
.tc-note a { color: #d9531f; font-weight: 700; }
.tc-more[hidden], .tc-empty[hidden], .tc-grid[hidden] { display: none; }
.tc-section .reveal p { margin-top: .9rem; }


/* ===================================================================
   MOTION + POLISH PASS (blood-tests page)
   =================================================================== */
/* --- hero: floating drops, ECG line, wave --- */
.bt-drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bt-drops span { position: absolute; bottom: -40px; width: var(--s,16px); height: var(--s,16px); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, rgba(255,120,80,.75), rgba(255,176,18,.55)); opacity: 0; animation: btRise var(--t,9s) linear infinite; animation-delay: var(--d,0s); left: var(--l,10%); }
.bt-drops span:nth-child(1) { --l: 8%;  --s: 14px; --t: 9s;  --d: 0s; }
.bt-drops span:nth-child(2) { --l: 22%; --s: 22px; --t: 12s; --d: 2s; }
.bt-drops span:nth-child(3) { --l: 46%; --s: 12px; --t: 8s;  --d: 4s; }
.bt-drops span:nth-child(4) { --l: 64%; --s: 26px; --t: 13s; --d: 1s; }
.bt-drops span:nth-child(5) { --l: 80%; --s: 16px; --t: 10s; --d: 5s; }
.bt-drops span:nth-child(6) { --l: 92%; --s: 20px; --t: 11s; --d: 3s; }
@keyframes btRise { 0% { transform: translateY(0) rotate(-45deg); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-620px) rotate(-45deg); opacity: 0; } }
.bt-ecg { position: absolute; left: 0; right: 0; bottom: 34px; width: 100%; height: 70px; pointer-events: none; opacity: .55; }
.bt-ecg path { fill: none; stroke: #FFB012; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .28 1; stroke-dashoffset: 1.28; filter: drop-shadow(0 0 6px rgba(255,176,18,.9)); animation: btEcg 4.2s linear infinite; }
@keyframes btEcg { to { stroke-dashoffset: -.28; } }
.bt-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 46px; display: block; }
.bt-badges li { animation: btBadge .6s cubic-bezier(.22,1,.36,1) both; }
.bt-badges li:nth-child(1) { animation-delay: .7s; } .bt-badges li:nth-child(2) { animation-delay: .82s; } .bt-badges li:nth-child(3) { animation-delay: .94s; } .bt-badges li:nth-child(4) { animation-delay: 1.06s; }
@keyframes btBadge { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
.bt-search:focus-within { box-shadow: 0 0 0 5px rgba(255,176,18,.35), 0 18px 44px rgba(0,0,0,.3); }

/* --- packages section backdrop --- */
.pk-section { position: relative; background: radial-gradient(circle at 10% 18%, rgba(255,176,18,.14), transparent 38%), radial-gradient(circle at 92% 72%, rgba(31,122,48,.09), transparent 40%), #fff; }
.pk-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(18,46,77,.13) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.pk-section > div { position: relative; }

/* --- package cards: slot (reveal) + tilt card --- */
.pk-basic .pk-banner::after { animation-delay: 1.2s; } .pk-extended .pk-banner::after { animation-delay: 2.4s; }

/* --- stats band --- */
.bt-stats { position: relative; overflow: hidden; background: linear-gradient(135deg, #122e4d, #1b4a73); padding: 3rem 0; }
.bt-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.75rem 1rem; text-align: center; }
@media (min-width: 800px) { .bt-stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bt-stat-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 auto .7rem; border-radius: 1rem; background: rgba(255,176,18,.15); color: #FFB012; border: 1px solid rgba(255,176,18,.35); animation: btFloat 4s ease-in-out infinite; }
.bt-stat:nth-child(2) .bt-stat-ico { animation-delay: -1s; } .bt-stat:nth-child(3) .bt-stat-ico { animation-delay: -2s; } .bt-stat:nth-child(4) .bt-stat-ico { animation-delay: -3s; }
@keyframes btFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bt-stat-num { font-family: Poppins, sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1; color: #fff; }
.bt-stat-lbl { margin-top: .4rem; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.72); letter-spacing: .02em; }

/* --- category tiles + test cards --- */
.tc-cats .tc-cat { opacity: 0; transform: translateY(18px) scale(.95); }
.tc-cats.is-in .tc-cat { animation: tcPop .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i,0) * 45ms); }
@keyframes tcPop { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
.tc-cats.is-in .tc-cat:hover { transform: translateY(-3px); }
.tc-cat:hover .tc-cat-ico { transform: rotate(-10deg) scale(1.12); background: #F26B35; color: #fff; }
.tc-cat[aria-pressed="true"]:hover .tc-cat-ico { background: #FFB012; color: #122e4d; }
.tc-card { animation: tcIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i,0) * 40ms); position: relative; overflow: hidden; }
@keyframes tcIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#F26B35, #FFB012); transform: scaleY(0); transform-origin: top; transition: transform .35s; }
.tc-card:hover::before { transform: scaleY(1); }
.tc-book span { display: inline-block; transition: transform .25s; } .tc-book:hover span { transform: translateX(5px); }
.tc-time.is-fast svg { animation: tcTick 2.4s ease-in-out infinite; transform-origin: center; } @keyframes tcTick { 0%,80%,100% { transform: rotate(0); } 90% { transform: rotate(25deg); } }

@media (prefers-reduced-motion: reduce) {
  .bt-drops span, .bt-ecg path, .bt-badges li, .pk-banner::after, .pk-featured, .pk-featured .pk-btn, .pk-badge, .pk-badge b, .pk-spark,
  .bt-stat-ico, .tc-card, .tc-time.is-fast svg, .reveal.is-visible .pk-list li, .reveal.is-visible .pk-list .pk-ico, .tc-cats.is-in .tc-cat { animation: none !important; }
  .tc-cats .tc-cat { opacity: 1; transform: none; } .bt-ecg path { stroke-dasharray: none; stroke-dashoffset: 0; } .pk-spark { display: none; }
}
.bt-stat-num [data-count] { background: linear-gradient(135deg, #ffffff, #FFB012); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 640px) { .bt-ecg { bottom: 4px; height: 40px; opacity: .4; } .bt-wave { height: 32px; } }


/* ===================================================================
   TEST CARDS v2 - category colour, tube icon, WhatsApp booking
   =================================================================== */
.tc-grid { gap: 1.1rem; }
.tc-card { --cc: #F26B35; gap: .8rem; padding: 1.15rem 1.2rem 1.15rem; border-radius: 1.15rem; border: 1px solid rgba(18,46,77,.08);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 7%, #fff) 0%, #fff 55%); box-shadow: 0 8px 22px rgba(18,46,77,.06); }
.tc-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px; background: linear-gradient(90deg, var(--cc), color-mix(in srgb, var(--cc) 40%, #FFB012));
  transform: scaleX(.22); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.tc-card:hover::before { transform: scaleX(1); }
.tc-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cc) 45%, transparent); box-shadow: 0 18px 38px color-mix(in srgb, var(--cc) 22%, transparent); }
.tc-mark { position: absolute; right: -14px; bottom: 44px; color: var(--cc); opacity: .07; pointer-events: none; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s; }
.tc-mark svg { display: block; }
.tc-card:hover .tc-mark { transform: rotate(-10deg) scale(1.12); opacity: .12; }
.tc-top { display: flex; align-items: center; gap: .55rem; position: relative; }
.tc-ico { flex: none; width: 2.15rem; height: 2.15rem; border-radius: .7rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 70%, #000));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cc) 40%, transparent); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.tc-card:hover .tc-ico { transform: rotate(-8deg) scale(1.12); }
.tc-catlabel { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 80%, #1c2430); }
.tc-star { margin-left: auto; font-size: .68rem; font-weight: 800; color: #8a5a00; background: linear-gradient(90deg, #FFE08A, #FFB012); padding: .2rem .55rem; border-radius: 999px; }
.tc-name { position: relative; font-size: 1.06rem; min-height: 2.9rem; }
.tc-meta { position: relative; }
.tc-sample { background: #fff; border: 1px solid rgba(18,46,77,.12); padding: .22rem .7rem .22rem .5rem; }
.tc-tube { flex: none; }
.tc-card:hover .tc-tube { animation: tcWobble .6s ease; } @keyframes tcWobble { 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } }
.tc-wa { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1rem; border-radius: 999px; overflow: hidden;
  font-size: .9rem; font-weight: 700; color: #128c4a; background: rgba(37,211,102,.12); border: 1.5px solid rgba(37,211,102,.45); transition: color .25s, background .25s, box-shadow .25s, border-color .25s; }
.tc-wa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1fb457, #25D366); transform: translateX(-101%); transition: transform .4s cubic-bezier(.22,1,.36,1); z-index: 0; }
.tc-wa > * { position: relative; z-index: 1; }
.tc-wa em { font-style: normal; display: inline-block; transition: transform .25s; }
.tc-wa:hover { color: #fff; border-color: #1fb457; box-shadow: 0 10px 22px rgba(37,211,102,.4); }
.tc-wa:hover::after { transform: translateX(0); } .tc-wa:hover em { transform: translateX(5px); }
.tc-wa:focus-visible { outline: 3px solid rgba(37,211,102,.5); outline-offset: 2px; }
.tc-callbar { color: #128c4a; border-color: rgba(37,211,102,.55); } .tc-callbar:hover { background: #25D366; color: #fff; border-color: #25D366; }
.pk-extra .pk-extra-wa { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.45); color: #128c4a; } .pk-extra .pk-extra-wa svg { color: #25D366; }
.pk-extra .pk-extra-wa a { color: #128c4a; }


/* ===================================================================
   PACKAGES v3 - comparison board (Basic / Essential / Extended)
   =================================================================== */
.pk-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.1rem; margin-top: 2.2rem; font-size: .88rem; font-weight: 600; color: #122e4d; }
.pk-extra span { display: inline-flex; align-items: center; gap: .45rem; background: var(--paper, #FAF6EF); border: 1px solid rgba(18,46,77,.1); border-radius: 999px; padding: .5rem 1rem; }
.pk-extra svg { color: #F26B35; }
.pk-board { max-width: 1020px; margin: 0 auto; background: #fff; border: 1px solid rgba(18,46,77,.08); border-radius: 1.6rem; padding: 2.6rem 1.4rem 1.6rem; box-shadow: 0 24px 60px rgba(18,46,77,.12); }
.pk-tabs { display: none; }
.pk-table { position: relative; display: grid; grid-template-columns: minmax(230px, 1.75fr) minmax(112px, 1fr) minmax(128px, 1.12fr) minmax(112px, 1fr); }
.pk-row { display: contents; }
.pk-cell { position: relative; z-index: 1; grid-row: var(--gr); }
.pk-cell[data-col="label"] { grid-column: 1; } .pk-cell[data-col="basic"] { grid-column: 2; } .pk-cell[data-col="essential"] { grid-column: 3; } .pk-cell[data-col="extended"] { grid-column: 4; }
.pk-hl { grid-column: 3; grid-row: 1 / span 13; z-index: 0; margin: -2.6rem -3px -1.6rem; border-radius: 1.5rem; border: 3px solid #FFB012; animation: tbGlow 3.2s ease-in-out infinite;
  background: linear-gradient(180deg, rgba(31,122,48,.09), rgba(31,122,48,.03) 60%, rgba(255,176,18,.1)); box-shadow: 0 0 0 7px rgba(255,176,18,.2), 0 26px 56px rgba(18,46,77,.22); }
@keyframes tbGlow { 0%,100% { box-shadow: 0 0 0 7px rgba(255,176,18,.2), 0 26px 56px rgba(18,46,77,.22); } 50% { box-shadow: 0 0 0 13px rgba(255,176,18,.08), 0 26px 56px rgba(18,46,77,.22); } }

/* header */
.pk-labhead { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 .9rem 1rem .4rem; }
.pk-labhead b { font-family: Poppins, sans-serif; font-size: 1.25rem; font-weight: 800; color: #122e4d; line-height: 1.2; }
.pk-labhead small { font-size: .82rem; color: #64748b; margin-top: .2rem; }
.pk-th { align-self: end; text-align: center; margin: 0 .35rem; padding: 1rem .5rem 1.05rem; color: #fff; border-radius: 1rem 1rem 0 0; overflow: visible;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 68%, #000)); }
.pk-th.feat { margin: 0 .2rem; padding: 2.1rem .5rem 1.4rem; border-radius: 1.1rem 1.1rem 0 0; overflow: hidden; }
.pk-th.feat::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: tbShine 3.6s ease-in-out infinite; }
@keyframes tbShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.pk-eyebrow { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.pk-th-name { display: block; font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.45rem; line-height: 1.15; margin-top: .15rem; }
.pk-th.feat .pk-th-name { font-size: 1.75rem; }
.pk-th-count { display: inline-block; margin-top: .5rem; font-size: .72rem; font-weight: 700; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); padding: .18rem .7rem; border-radius: 999px; }
.pk-badge { position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 4; display: inline-flex; gap: .4rem; align-items: center;
  background: linear-gradient(90deg, #FFB012, #ffd45f); color: #122e4d; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: .45rem 1.1rem; border-radius: 999px; box-shadow: 0 8px 18px rgba(255,176,18,.5); animation: tbBob 2.6s ease-in-out infinite; }
.pk-th.feat { overflow: visible; } .pk-th.feat::after { display: none; }
.pk-badge b { display: inline-block; animation: tbSpin 3.2s linear infinite; }
@keyframes tbBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes tbSpin { 0%, 70% { transform: rotate(0) scale(1); } 85% { transform: rotate(180deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
.pk-spark { position: absolute; left: var(--x); top: var(--y); color: #FFE08A; font-size: .95rem; pointer-events: none; opacity: 0; animation: tbTwinkle 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tbTwinkle { 0%,100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }

/* body */
.pk-lab { display: flex; align-items: center; gap: .8rem; padding: .78rem .9rem .78rem .4rem; }
.pk-rico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .75rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 68%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--rc) 35%, transparent); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pk-rtxt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pk-rtxt b { font-size: .92rem; font-weight: 700; color: #122e4d; }
.pk-rtxt small { font-size: .74rem; color: #64748b; margin-top: .1rem; }
.pk-td { display: grid; place-items: center; padding: .6rem; }
.pk-yes { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 40%, transparent); }
.pk-no { color: #cbd5e1; font-weight: 700; font-size: 1.1rem; }
.pk-body .pk-cell { border-bottom: 1px solid rgba(18,46,77,.07); transition: background .2s; }
.pk-body:nth-child(even) .pk-cell:not(.feat) { background: #f8fafc; }
.pk-body:hover .pk-cell { background: rgba(255,176,18,.13); }
.pk-body:hover .pk-rico { transform: rotate(-8deg) scale(1.1); }
.pk-body:hover .pk-yes { transform: scale(1.12); }
.pk-yes { transition: transform .25s; }
.pk-body:last-of-type .pk-cell { border-bottom: 0; }

/* footer */
.pk-labfoot { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; }
.pk-labfoot span { font-size: .88rem; font-weight: 700; color: #128c4a; } .pk-labfoot small { font-size: .74rem; color: #64748b; }
.pk-fd { padding: 1.1rem .35rem .2rem; align-self: end; }
.pk-fd.feat { padding-bottom: .3rem; }
.pk-btn { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .75rem .5rem; border-radius: 999px; font-weight: 700; font-size: .84rem; white-space: nowrap;
  color: var(--c); background: #fff; border: 2px solid var(--c); transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.pk-btn:hover { background: var(--c); color: #fff; transform: translateY(-2px); }
.pk-fd.feat .pk-btn { background: #F26B35; border-color: #F26B35; color: #fff; padding: .9rem .5rem; font-size: .92rem; box-shadow: 0 10px 22px rgba(242,107,53,.4); animation: tbPulse 2.4s ease-out infinite; }
.pk-fd.feat .pk-btn:hover { background: #d9531f; border-color: #d9531f; }
@keyframes tbPulse { 0% { box-shadow: 0 10px 22px rgba(242,107,53,.4), 0 0 0 0 rgba(242,107,53,.5); } 70%, 100% { box-shadow: 0 10px 22px rgba(242,107,53,.4), 0 0 0 14px rgba(242,107,53,0); } }

/* entrance */
.reveal.is-visible .pk-body .pk-rtxt, .reveal.is-visible .pk-body .pk-rico { animation: tbIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--r,0) * 60ms + 200ms); }
.reveal.is-visible .pk-body .pk-yes { animation: tbPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--r,0) * 60ms + 420ms); }
@keyframes tbIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes tbPop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }

/* mobile: one plan at a time via tabs */
@media (max-width: 819px) {
  .pk-board { padding: 1.1rem .9rem 1.2rem; border-radius: 1.3rem; }
  .pk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; background: #f1f5f9; padding: .3rem; border-radius: 999px; margin-bottom: 1.3rem; }
  .pk-tab { padding: .6rem .3rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #475569; transition: all .25s; }
  .pk-tab[aria-selected="true"] { background: var(--c); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 40%, transparent); }
  .pk-table { grid-template-columns: minmax(0, 1fr) 72px; }
  .pk-hl, .pk-labhead, .pk-labfoot { display: none; }
  .pk-cell[data-col="basic"], .pk-cell[data-col="essential"], .pk-cell[data-col="extended"] { grid-column: 2; }
  .pk-table[data-active="basic"] [data-col="essential"], .pk-table[data-active="basic"] [data-col="extended"],
  .pk-table[data-active="essential"] [data-col="basic"], .pk-table[data-active="essential"] [data-col="extended"],
  .pk-table[data-active="extended"] [data-col="basic"], .pk-table[data-active="extended"] [data-col="essential"] { display: none; }
  .pk-cell.pk-th, .pk-cell.pk-fd { grid-column: 1 / -1; }
  .pk-th { margin: 0 0 .6rem; border-radius: 1.1rem; padding: 1.2rem .5rem; }
  .pk-th.feat { margin: 1.1rem 0 .6rem; padding: 1.6rem .5rem 1.2rem; }
  .pk-fd { padding: 1.1rem 0 0; } .pk-fd.feat { padding-bottom: 0; }
  .pk-btn, .pk-fd.feat .pk-btn { padding: .95rem; font-size: .95rem; }
  .pk-body .pk-cell { border-bottom: 1px solid rgba(18,46,77,.07); } .pk-body:nth-child(even) .pk-cell:not(.feat) { background: transparent; }
  .pk-td.feat { background: transparent; }
}
.bt-stat-num [data-count] { background: linear-gradient(135deg, #ffffff, #FFB012); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .pk-hl, .pk-badge, .pk-badge b, .pk-spark, .pk-fd.feat .pk-btn, .pk-th.feat::after,
  .reveal.is-visible .pk-body .pk-rtxt, .reveal.is-visible .pk-body .pk-rico, .reveal.is-visible .pk-body .pk-yes { animation: none !important; } .pk-spark { display: none; }
}

/* ---- Equipment photos: full-bleed & highlighted (no cream frame) ---- */
.eq-media:has(.eq-photo) { padding: 0; }
.eq-media .eq-photo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }
/* ---- Footer logo (same as navbar, on white panel) ---- */
.footer-brand-logo { height: 52px; width: auto; display: block; }
@media (max-width: 640px) { .footer-brand-logo { height: 40px; } }
/* ---- Payment page ---- */
.pay-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-card { background: #fff; border-radius: 1.25rem; padding: 1.75rem; border: 1px solid rgba(18,46,77,.08); box-shadow: 0 10px 30px rgba(18,46,77,.08); }
.pay-num { display: inline-flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background: #F26B35; color: #fff; font-weight: 700; font-size: .9rem; margin-right: .6rem; }
.pay-qr { display: block; width: 100%; max-width: 300px; height: auto; margin: 1rem auto 0; object-fit: contain; border-radius: .75rem; border: 1px solid rgba(18,46,77,.12); background: #fff; }
.pay-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.pay-btns .pay-copy { flex: 1 1 auto; }
.pay-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(18,46,77,.07); font-size: .92rem; }
.pay-row span:first-child { color: #4B5563; } .pay-row span:last-child { font-weight: 600; color: #122E4D; text-align: right; word-break: break-word; }
.pay-copy { margin-top: 1rem; border-radius: 9999px; background: #122E4D; color: #fff; font-weight: 600; padding: .55rem 1.2rem; font-size: .88rem; }
.pay-copy:hover { background: #F26B35; }
/* ---- small utilities not in the precompiled tailwind.css ---- */
.max-w-\[1100px\] { max-width: 1100px; }
.mt-8 { margin-top: 2rem; }
@media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.eq-media .eq-photo { object-position: 50% 50%; filter: contrast(1.08) saturate(1.12) brightness(1.03); }

@media (min-width: 900px) { .pay-grid { grid-template-columns: repeat(3, 1fr); } }
/* ---- Career apply modal ---- */
.apply-modal[hidden] { display: none; }
.apply-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.apply-backdrop { position: absolute; inset: 0; background: rgba(10,25,45,.6); }
.apply-box { position: relative; background: #fff; border-radius: 1.25rem; padding: 1.75rem; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.apply-box label { display: block; font-size: .82rem; font-weight: 600; color: #122E4D; margin-bottom: .8rem; }
.apply-box input, .apply-box textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem .8rem; border: 1px solid rgba(18,46,77,.2); border-radius: .6rem; font-size: .95rem; font-weight: 400; }
.apply-box input:focus, .apply-box textarea:focus { outline: 2px solid #F26B35; border-color: transparent; }
.apply-x { position: absolute; top: .6rem; right: 1rem; font-size: 1.8rem; line-height: 1; color: #4B5563; }
.apply-submit { width: 100%; border-radius: 9999px; background: #F26B35; color: #fff; font-weight: 700; padding: .8rem; }
.apply-submit:hover { background: #d95a26; }
.apply-err { color: #b91c1c; font-size: .85rem; margin-bottom: .6rem; }

/* ---- About page layout ---- */
.about-top { display: grid; gap: 2.5rem; align-items: stretch; }
@media (min-width: 1024px) { .about-top { grid-template-columns: 5fr 6fr; gap: 3.5rem; } }
.about-photo { border-radius: 1.25rem; overflow: hidden; box-shadow: 0 24px 50px rgba(18,46,77,.18); min-height: 280px; }
.about-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.about-quote { margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; border-left: 5px solid #F26B35; background: #F7F1E4; border-radius: 0 1rem 1rem 0; color: #122E4D; font-size: 1.08rem; line-height: 1.7; font-weight: 500; }
.about-more { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 768px) { .about-more { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.about-commit { margin-top: 2.5rem; background: #122E4D; border-radius: 1.5rem; padding: 2.25rem 1.5rem; text-align: center; }
.about-commit-title { color: #F5B841; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: 1rem; }
.about-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.about-chip { border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 9999px; padding: .45rem 1.1rem; font-size: .9rem; font-weight: 500; }
.about-tag { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: .25rem; color: #fff; }
.about-tag strong { font-size: 1.15rem; } .about-tag span { color: rgba(255,255,255,.75); font-style: italic; }

/* ---- Helpline numbers grid (Contact page) ---- */
.helpline-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid rgba(18,46,77,.08); border-right:1px solid rgba(18,46,77,.08); transition:background .2s; }
.helpline-row:nth-child(odd) { border-right:1px solid rgba(18,46,77,.08); }
@media (max-width: 639px) { .helpline-row:nth-child(odd) { border-right:none; } }
.helpline-row:hover { background:#F7F1E4; }
.helpline-name { font-weight:600; color:#122E4D; font-size:.92rem; }
.helpline-num { font-weight:700; color:#F26B35; font-size:.92rem; white-space:nowrap; }

/* ---- Importance of regular checkups (About page) ---- */
.checkup-box { background:#122E4D; border-radius:1.5rem; padding:2.5rem; color:#fff; }
.checkup-list { display:grid; gap:1.1rem; margin-top:1.5rem; }
.checkup-item { display:flex; gap:.9rem; align-items:flex-start; }
.checkup-item-icon { flex-shrink:0; width:34px; height:34px; border-radius:9999px; background:rgba(245,184,65,.15); display:flex; align-items:center; justify-content:center; margin-top:.1rem; }
.checkup-item p { color:rgba(255,255,255,.85); font-size:.96rem; line-height:1.6; }

/* ---- Patient Charter (About page) ---- */
.charter-card { background:#fff; border-radius:1.5rem; padding:2rem; box-shadow:0 12px 32px rgba(18,46,77,.08); border:1px solid rgba(18,46,77,.06); height:100%; }
.charter-card-alt { background:#122E4D; }
.charter-card-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.charter-card-icon { flex-shrink:0; width:42px; height:42px; border-radius:.85rem; background:#F26B35; display:flex; align-items:center; justify-content:center; }
.charter-card h3 { font-family:Poppins,sans-serif; font-weight:700; font-size:1.25rem; color:#122E4D; }
.charter-card-alt h3 { color:#fff; }
.charter-list { display:grid; gap:.85rem; padding-left:1.4rem; list-style:decimal; }
.charter-list li { color:#4B5563; font-size:.92rem; line-height:1.6; padding-left:.3rem; }
.charter-card-alt .charter-list li { color:rgba(255,255,255,.82); }
.charter-list li::marker { color:#F26B35; font-weight:700; }
.charter-card-alt .charter-list li::marker { color:#F5B841; }

/* ---- Test Preparation Instructions (Blood Tests page) - BASE (overridden by v2 block appended below) ---- */
.prep-accordion { display:grid; gap:.9rem; }
.prep-item { background:#fff; border-radius:1rem; border:1px solid rgba(18,46,77,.08); overflow:hidden; box-shadow:0 6px 18px rgba(18,46,77,.05); }
.prep-item summary { cursor:pointer; list-style:none; padding:1.1rem 1.4rem; font-weight:700; color:#122E4D; font-size:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.prep-item summary::-webkit-details-marker { display:none; }
.prep-item summary::after { content:"+"; font-size:1.4rem; font-weight:400; color:#F26B35; flex-shrink:0; transition:transform .2s; }
.prep-item[open] summary::after { transform:rotate(45deg); }
.prep-item summary:hover { background:#F7F1E4; }
.prep-body { padding:0 1.4rem 1.4rem; color:#4B5563; font-size:.92rem; line-height:1.75; }
.prep-body p { margin-bottom:.5rem; }
.prep-body strong { color:#122E4D; }

/* ---- NABL logo beside "Achievements & Certifications" heading ---- */
.cert-right { display:flex; flex-direction:column; height:100%; }
.cert-heading-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.cert-heading-logo { width:64px; height:64px; object-fit:contain; background:#fff; border-radius:1rem; padding:.6rem; flex-shrink:0; box-shadow:0 10px 24px rgba(0,0,0,.28); transition:transform .25s ease, box-shadow .25s ease; }
.cert-heading-logo:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.cert-heading-row .cert-heading { margin-bottom:0; font-size:1.5rem; }
@media (max-width:639px) {
  .cert-heading-logo { width:52px; height:52px; padding:.5rem; }
  .cert-heading-row .cert-heading { font-size:1.25rem; }
}
.nabl-lockup { margin-top:auto; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:.75rem; }
.nabl-lockup-code { background:rgba(245,184,65,.15); color:#F5B841; font-weight:700; font-size:.78rem; letter-spacing:.03em; padding:.5rem 1rem; border-radius:9999px; border:1px solid rgba(245,184,65,.3); }

/* ======================================================================
   TEST PREPARATION - v2 (icons, numbered badges, colour accents, glow)
   Overrides the earlier plain .prep-* rules above; loaded later so it wins.
   ====================================================================== */
.prep-open-badge {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  max-width: fit-content; margin: 0 auto 2.2rem; text-align: center;
  background: linear-gradient(90deg, rgba(242,107,53,.1), rgba(255,176,18,.12));
  border: 1px solid rgba(242,107,53,.28); color: #122E4D;
  font-size: .88rem; font-weight: 600; padding: .65rem 1.3rem; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(242,107,53,.1);
}
.prep-open-badge svg { flex-shrink: 0; color: #F26B35; animation: prepTick 2.6s ease-in-out infinite; }
.prep-open-badge strong { color: #d9531f; }
@keyframes prepTick { 0%, 80%, 100% { transform: rotate(0); } 90% { transform: rotate(20deg); } }
@media (max-width: 479px) { .prep-open-badge { font-size: .78rem; padding: .55rem 1rem; text-align: left; } }

.prep-accordion { display: grid; gap: 1rem; }
.prep-item {
  --pc: #F26B35;
  position: relative; background: #fff; border-radius: 1.1rem;
  border: 1px solid rgba(18,46,77,.08); overflow: hidden;
  box-shadow: 0 8px 22px rgba(18,46,77,.06);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.prep-item[data-c="2"] { --pc: #1F7A30; }
.prep-item[data-c="3"] { --pc: #1B4A73; }
.prep-item[data-c="4"] { --pc: #B8480F; }
.prep-item[data-c="5"] { --pc: #7A4FBF; }
.prep-item[data-c="6"] { --pc: #C0902E; }
.prep-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #FFB012));
  transform: scaleY(0); transform-origin: top; transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.prep-item:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--pc) 18%, rgba(18,46,77,.1)); border-color: color-mix(in srgb, var(--pc) 35%, transparent); }
.prep-item:hover::before, .prep-item[open]::before { transform: scaleY(1); }

.prep-item summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 1.35rem 1.05rem 1.15rem;
  display: flex; align-items: center; gap: .9rem;
}
.prep-item summary::-webkit-details-marker { display: none; }

.prep-num {
  flex: none; font-family: Poppins, sans-serif; font-weight: 800; font-size: .78rem;
  color: color-mix(in srgb, var(--pc) 70%, #1c2430); opacity: .55; letter-spacing: .04em;
  min-width: 1.6rem;
}
.prep-ico {
  flex: none; width: 2.35rem; height: 2.35rem; border-radius: .8rem;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 68%, #000));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--pc) 40%, transparent);
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.prep-item:hover .prep-ico, .prep-item[open] .prep-ico { transform: rotate(-8deg) scale(1.08); }

.prep-title { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #122E4D; font-size: 1rem; line-height: 1.4; }

.prep-plus {
  flex: none; position: relative; width: 1.6rem; height: 1.6rem; border-radius: 9999px;
  background: color-mix(in srgb, var(--pc) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--pc) 40%, transparent);
  transition: background .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.prep-plus::before, .prep-plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--pc);
  transform: translate(-50%,-50%); transition: transform .25s ease;
}
.prep-plus::before { width: .68rem; height: 2px; }
.prep-plus::after { width: 2px; height: .68rem; }
.prep-item[open] .prep-plus { transform: rotate(180deg); background: var(--pc); }
.prep-item[open] .prep-plus::before, .prep-item[open] .prep-plus::after { background: #fff; }
.prep-item[open] .prep-plus::after { transform: translate(-50%,-50%) scaleY(0); }

.prep-item summary:hover .prep-title { color: color-mix(in srgb, var(--pc) 55%, #122E4D); }

.prep-body {
  padding: 0 1.35rem 1.3rem 3.3rem; color: #4B5563; font-size: .92rem; line-height: 1.75;
  border-top: 1px dashed rgba(18,46,77,.1); margin-top: -.15rem; padding-top: .9rem;
}
.prep-body p { margin-bottom: .5rem; }
.prep-body p:last-child { margin-bottom: 0; }
.prep-body strong { color: #122E4D; }

@media (max-width: 479px) {
  .prep-item summary { padding: .9rem 1rem 1.35rem; gap: .6rem; flex-wrap: wrap; }
  .prep-num { display: none; }
  .prep-ico { width: 2.05rem; height: 2.05rem; }
  .prep-title { font-size: .92rem; flex-basis: calc(100% - 3.2rem); }
  .prep-body { padding: 0 1rem 1.1rem 1rem; padding-top: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .prep-open-badge svg { animation: none; }
  .prep-item, .prep-item::before, .prep-ico, .prep-plus, .prep-plus::before, .prep-plus::after { transition: none; }
}
/* Test card images - every image identical 1:1 size */
.tc-img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;border-radius:.75rem;overflow:hidden;background:#f3f4f6;margin-bottom:.15rem}
.tc-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Services cards: every image the exact same 16:10 box */
.svc-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eef2f6}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Form status messages (contact / career / enquiry) */
.form-msg { font-size: .88rem; font-weight: 600; border-radius: .6rem; padding: .6rem .8rem; margin: 0 0 .9rem; }
.form-msg[hidden] { display: none; }
.form-msg-ok { background: #e7f7ee; color: #166534; }
.form-msg-err { background: #fdecec; color: #b42318; }
.apply-submit:disabled, #contact-form button:disabled { opacity: .7; cursor: wait; }
.apply-box select { display: block; width: 100%; margin-top: .3rem; padding: .6rem .8rem; border: 1px solid rgba(18,46,77,.2); border-radius: .6rem; font-size: .95rem; font-weight: 400; background: #fff; }

.apply-box input[type=file] { padding: .5rem .6rem; font-size: .85rem; background: #f8fafc; cursor: pointer; }

/* ===== Services page: "Understanding Our Services" (scoped .svl-*) ===== */
.svl { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .svl { grid-template-columns: 5fr 6fr; gap: 4rem; } }
.svl-media-wrap { display: none; position: sticky; top: 7.5rem; }
@media (min-width: 1024px) { .svl-media-wrap { display: block; } }
.svl-media-wrap::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 2px solid #FFB012; border-radius: 1.75rem; opacity: .65; }
.svl-media { position: relative; aspect-ratio: 5 / 4.4; border-radius: 1.75rem; overflow: hidden; background: #122E4D; box-shadow: 0 32px 60px -28px rgba(18,46,77,.55); }
.svl-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s ease; }
.svl-slide.is-on { opacity: 1; }
.svl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 1s ease; }
.svl-slide.is-on img { transform: scale(1); }
.svl-slide::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(10,28,50,.82), transparent); }
.svl-slide figcaption { position: absolute; z-index: 1; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: flex; align-items: center; gap: .85rem; color: #fff; }
.svl-slide figcaption strong { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.svl-slide figcaption small { display: block; font-size: .82rem; color: rgba(255,255,255,.78); margin-top: .1rem; }
.svl-cap-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: #F26B35; color: #fff; }

.svl-list { display: grid; gap: .85rem; }
.svl-item { background: #fff; border: 1px solid rgba(18,46,77,.09); border-radius: 1.1rem; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.svl-item:hover { border-color: rgba(242,107,53,.3); }
.svl-item[open] { border-color: rgba(242,107,53,.4); box-shadow: 0 20px 40px -20px rgba(18,46,77,.3); }
.svl-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
.svl-item summary::-webkit-details-marker { display: none; }
.svl-item summary:focus-visible { outline: 3px solid #F26B35; outline-offset: -3px; border-radius: 1.1rem; }
.svl-ico { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; background: #122E4D; color: #FFB012; transition: background .25s, color .25s, transform .25s; }
.svl-item[open] .svl-ico { background: #F26B35; color: #fff; transform: rotate(-6deg); }
.svl-head { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.svl-title { font-weight: 700; color: #122E4D; font-size: 1.05rem; line-height: 1.3; }
.svl-tag { font-size: .82rem; color: #6B7280; line-height: 1.35; }
.svl-chev { flex: none; color: #F26B35; transition: transform .3s; }
.svl-item[open] .svl-chev { transform: rotate(180deg); }
.svl-body { padding: 0 1.15rem 1.3rem; animation: svlIn .35s ease both; }
@media (min-width: 640px) { .svl-body { padding-left: 5.05rem; } }
.svl-body p { color: #4B5563; font-size: .95rem; line-height: 1.75; margin: 0 0 1rem; max-width: 62ch; }
.svl-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .9rem; margin-bottom: 1rem; }
@media (min-width: 1024px) { .svl-thumb { display: none; } }
.svl-chips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.svl-chips li { font-size: .8rem; font-weight: 600; color: #9A3F12; background: #FFF1E6; border-radius: 999px; padding: .32rem .8rem; line-height: 1.3; }
.svl-link { display: inline-flex; align-items: center; font-weight: 600; font-size: .9rem; color: #122E4D; border-bottom: 2px solid #FFB012; padding-bottom: 1px; transition: color .2s, border-color .2s; }
.svl-link:hover { color: #F26B35; border-color: #F26B35; }
@keyframes svlIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svl-slide, .svl-slide img, .svl-body, .svl-chev, .svl-ico { transition: none; animation: none; } }

.svl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }


/* ---- Equipment: 8 pathology machines, 4 X-ray machines - every card the same compact size ---- */
@media (min-width: 768px) { .eq-grid-8 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .eq-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .eq-split { grid-template-columns: minmax(0,1fr) minmax(0,4fr); gap: 1.25rem; }
  /* a department opened on its own (equipment.html#ecg / #xray) keeps card size, no giant tiles */
  .eq-split.single-active .eq-grid-1 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Blood tests page: "Instructions for Patients" (scoped .pi-*) ===== */
.pi-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.pi { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 1024px) { .pi { grid-template-columns: 4fr 7fr; gap: 3rem; } }

.pi-glance { position: relative; overflow: hidden; color: #fff; border-radius: 1.5rem; padding: 1.8rem 1.6rem 1.5rem;
  background: linear-gradient(155deg, #122E4D 0%, #1B4A73 100%); box-shadow: 0 30px 55px -28px rgba(18,46,77,.6); }
.pi-glance::before { content: ""; position: absolute; width: 15rem; height: 15rem; right: -6rem; top: -6rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,18,.28), transparent 68%); pointer-events: none; }
@media (min-width: 1024px) { .pi-glance { position: sticky; top: 7.5rem; } }
.pi-glance h3 { position: relative; font-weight: 800; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .3rem; }
.pi-glance > p { position: relative; margin: 0 0 1.2rem; font-size: .88rem; color: rgba(255,255,255,.72); }
.pi-glance ul { position: relative; list-style: none; margin: 0; padding: 0; }
.pi-glance li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; }
.pi-glance li span { color: rgba(255,255,255,.85); }
.pi-glance li b { color: #FFB012; font-weight: 700; text-align: right; }
.pi-call { position: relative; display: flex; align-items: center; gap: .85rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 1rem;
  background: rgba(255,255,255,.1); color: #fff; transition: background .25s; }
.pi-call:hover { background: rgba(255,255,255,.18); }
.pi-call svg { flex: none; width: 2.4rem; height: 2.4rem; padding: .65rem; border-radius: .8rem; background: #F26B35; }
.pi-call small { display: block; font-size: .74rem; color: rgba(255,255,255,.7); }
.pi-call strong { display: block; font-size: 1.05rem; letter-spacing: .01em; }

.pi-list { display: grid; gap: .85rem; }
.pi-item { --pc: #F26B35; position: relative; background: #fff; border: 1px solid rgba(18,46,77,.09); border-radius: 1.1rem; overflow: hidden;
  transition: box-shadow .25s, border-color .25s; }
.pi-item[data-c="2"] { --pc: #1F7A30; } .pi-item[data-c="3"] { --pc: #1B4A73; } .pi-item[data-c="4"] { --pc: #B8480F; }
.pi-item[data-c="5"] { --pc: #7A4FBF; } .pi-item[data-c="6"] { --pc: #A87A16; }
.pi-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.pi-item:hover { border-color: color-mix(in srgb, var(--pc) 35%, transparent); }
.pi-item[open] { border-color: color-mix(in srgb, var(--pc) 40%, transparent); box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--pc) 45%, rgba(18,46,77,.4)); }
.pi-item[open]::before { transform: scaleY(1); }
.pi-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; }
.pi-item summary::-webkit-details-marker { display: none; }
.pi-item summary:focus-visible { outline: 3px solid var(--pc); outline-offset: -3px; border-radius: 1.1rem; }
.pi-ico { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 68%, #000)); box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--pc) 60%, transparent);
  transition: transform .3s; }
.pi-item[open] .pi-ico { transform: rotate(-6deg) scale(1.05); }
.pi-head { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pi-title { font-weight: 700; color: #122E4D; font-size: 1.02rem; line-height: 1.35; }
.pi-tag { font-size: .82rem; color: #6B7280; line-height: 1.35; }
.pi-chev { flex: none; color: var(--pc); transition: transform .3s; }
.pi-item[open] .pi-chev { transform: rotate(180deg); }
.pi-body { padding: 0 1.15rem 1.3rem; animation: piIn .35s ease both; }
@media (min-width: 640px) { .pi-body { padding-left: 5.05rem; } }

.pi-kv { display: grid; }
.pi-row { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px dashed rgba(18,46,77,.14); font-size: .93rem; line-height: 1.6; color: #4B5563; }
.pi-row:first-child { border-top: 0; padding-top: .2rem; }
.pi-row strong { color: #122E4D; }
@media (min-width: 720px) { .pi-row { grid-template-columns: 11rem 1fr; gap: 1.1rem; } }

.pi-steps { list-style: none; counter-reset: pi; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pi-steps li { counter-increment: pi; position: relative; padding-left: 2.5rem; font-size: .94rem; line-height: 1.65; color: #4B5563; max-width: 64ch; }
.pi-steps li::before { content: counter(pi); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-size: .78rem; font-weight: 700; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, #fff); border: 1.5px solid color-mix(in srgb, var(--pc) 35%, transparent); }
.pi-steps li:not(:last-child)::after { content: ""; position: absolute; left: .84rem; top: 1.85rem; bottom: -.75rem; width: 2px; background: color-mix(in srgb, var(--pc) 22%, transparent); }
@keyframes piIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pi-item, .pi-item::before, .pi-ico, .pi-chev, .pi-body { transition: none; animation: none; } }

/* Home summary cards: equipment photos are 4:3, show them uncropped-ish */
.eq-summary-media { height: auto; aspect-ratio: 4 / 3; }

/* ---- Technology page hero background ---- */
.tech-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; }
.tech-hero-ov { position:absolute; inset:0; background:rgba(18,46,77,.62); }   /* phones: photo sits behind the text, so keep it dim */
@media (min-width: 900px) { .tech-hero-ov { background:linear-gradient(90deg, rgba(18,46,77,.55) 0%, rgba(18,46,77,0) 55%); } }

/* orange Sanskrit motto */
.about-quote span[lang="mr"] { color: #FF7A2F; font-weight: 700; }
/* helpline highlight in CTA band */
.cta-helpline { display:inline-flex; align-items:center; gap:.9rem; margin-top:.25rem; padding:.8rem 1.5rem; border-radius:999px; background:#FFB012; color:#122E4D !important; font-weight:800; font-size:1.5rem; line-height:1; box-shadow:0 10px 28px rgba(255,176,18,.35); transition:transform .2s ease; }
.cta-helpline:hover { transform:translateY(-2px); color:#122E4D; }
.cta-helpline small { display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-bottom:.2rem; }
.cta-helpline svg { flex-shrink:0; }
@media (max-width:639px) { .cta-helpline { font-size:1.25rem; padding:.7rem 1.2rem; } }
/* seamless partner marquee (shared) */
.marquee-mask { padding:20px 0 26px; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%); overflow:hidden; }
.marquee-mask .marquee-track { display:flex; align-items:center; width:max-content; animation: marquee-scroll var(--marquee-dur,28s) linear infinite; }
.marquee-mask:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* about hero photo */
.about-hero-bg { position:absolute; inset:0; background:url('../assets/photos/technology-hero.jpg') right center/cover no-repeat; }
.about-hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,46,77,.92) 0%,rgba(18,46,77,.7) 45%,rgba(18,46,77,.15) 100%); }
@media (max-width:767px) { .about-hero-bg::after { background:linear-gradient(180deg,rgba(18,46,77,.85),rgba(18,46,77,.55)); } }


/* ===== Services hero image + checkup programmes + one-line heading ===== */
.svc-hero-bg { position:absolute; inset:0; background: linear-gradient(90deg, rgba(18,46,77,.94) 0%, rgba(18,46,77,.82) 45%, rgba(18,46,77,.55) 100%), url("../assets/services/pathology-lab-banner.jpg") center/cover no-repeat; }
.one-line-heading { white-space: nowrap !important; font-size: clamp(.85rem, 4.3vw, 2rem) !important; }
.camp-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:1024px){ .camp-grid { grid-template-columns:repeat(3,1fr); } }
.camp-card { display:flex; background:linear-gradient(160deg,#122e4d 0%,#1b4a73 100%); color:#fff; border-radius:1.25rem; overflow:hidden; box-shadow:0 12px 32px rgba(18,46,77,.18); border-bottom:5px solid #F26B35; }
.camp-body { padding:1.9rem 1.7rem; display:flex; flex-direction:column; width:100%; }
.camp-title { font-family:Poppins,sans-serif; font-weight:800; font-size:1.35rem; line-height:1.25; margin-bottom:.8rem; }
.camp-lead { font-weight:600; color:#fff; margin-bottom:.6rem; line-height:1.5; }
.camp-strong { font-weight:700; color:#FFB012; margin-bottom:.6rem; font-size:1.05rem; }
.camp-text { color:rgba(255,255,255,.78); font-size:.93rem; line-height:1.65; margin-bottom:.6rem; }
.camp-list { margin:1rem 0 1.4rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.2); display:grid; grid-template-columns:1fr 1fr; gap:.55rem .8rem; margin-top:auto; }
.camp-list li { display:flex; align-items:center; gap:.45rem; font-size:.86rem; color:rgba(255,255,255,.92); }
.camp-list svg { flex:none; color:#25D366; }
.camp-wa { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; background:#25D366; color:#fff; font-weight:600; font-size:.92rem; padding:.8rem 1.3rem; border-radius:999px; transition:background .2s, transform .2s, box-shadow .2s; }
.camp-wa:hover { background:#1fb457; box-shadow:0 10px 22px rgba(37,211,102,.4); }


/* ===== Blood Tests: hero background + full body checkup strip ===== */
.bt-hero-bg { position:absolute; inset:0; background: linear-gradient(90deg, rgba(18,46,77,.95) 0%, rgba(18,46,77,.85) 50%, rgba(18,46,77,.6) 100%), url("../assets/services/pathology-lab-16x10.jpg") center 35%/cover no-repeat; }
.fbc-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; max-width:900px; margin:0 auto 2.4rem; }
.fbc-strip figure { position:relative; margin:0; border-radius:1rem; overflow:hidden; aspect-ratio:16/10; box-shadow:0 12px 32px rgba(18,46,77,.16); }
.fbc-strip img { width:100%; height:100%; object-fit:cover; }
.fbc-strip figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem; color:#fff; font-weight:600; font-size:.92rem; background:linear-gradient(0deg, rgba(18,46,77,.92), rgba(18,46,77,0)); }
@media (max-width:640px){ .fbc-strip { gap:.5rem; } .fbc-strip figure { aspect-ratio:3/4; border-radius:.75rem; } .fbc-strip figcaption { font-size:.72rem; padding:1.2rem .5rem .5rem; } }


/* ===== Shared inner-page hero image + full body checkup feature ===== */
.fbc-feature { display:grid; grid-template-columns:1fr; max-width:1000px; margin:0 auto 2.6rem; background:#fff; border-radius:1.5rem; overflow:hidden; box-shadow:0 16px 40px rgba(18,46,77,.14); border:1px solid rgba(18,46,77,.06); }
@media (min-width:820px){ .fbc-feature { grid-template-columns:1.05fr .95fr; } }
.fbc-photo { position:relative; min-height:240px; }
.fbc-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fbc-tag { position:absolute; left:1rem; bottom:1rem; background:#F26B35; color:#fff; font-weight:700; font-size:.85rem; padding:.45rem .9rem; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.fbc-info { padding:1.8rem 1.6rem; display:flex; flex-direction:column; justify-content:center; text-align:left; }
.fbc-info h3 { font-family:Poppins,sans-serif; font-weight:800; font-size:1.4rem; color:#122e4d; line-height:1.25; margin-bottom:.6rem; }
.fbc-info p { color:#4b5563; font-size:.95rem; line-height:1.65; margin-bottom:1rem; }
.fbc-info ul { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .8rem; margin-bottom:1.3rem; }
.fbc-info li { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:500; color:#122e4d; }
.fbc-info li svg { color:#1fa855; flex:none; }
.fbc-info .camp-wa { align-self:flex-start; }


/* ===== YouTube button (Instructions for Patients) ===== */
.prep-yt { display:flex; justify-content:center; margin:-.4rem 0 2rem; }
.yt-btn { display:inline-flex; align-items:center; gap:.65rem; background:#FF0000; color:#fff; font-weight:600; font-size:.95rem; padding:.75rem 1.4rem; border-radius:999px; box-shadow:0 8px 20px rgba(255,0,0,.28); transition:background .2s, transform .2s, box-shadow .2s; }
.yt-btn:hover { background:#d90000; transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,0,0,.38); }


/* ===== Unified, brighter hero photos (all pages) ===== */
.svc-hero-bg, .bt-hero-bg, .hero-img, .about-hero-bg { position:absolute; inset:0; background-size:cover; background-position:right center; background-repeat:no-repeat; }
.svc-hero-bg { background-image:url('../assets/photos/services-hero-card.jpg'); background-position:right 55%; }
.bt-hero-bg  { background-image:url('../assets/photos/blood-tests-hero-card.jpg'); background-position:center 45%; }
.svc-hero-bg::after, .bt-hero-bg::after, .hero-img::after, .about-hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 8% 100%, rgba(242,107,53,.22), transparent 70%),
    linear-gradient(90deg, rgba(14,38,66,.96) 0%, rgba(18,46,77,.86) 34%, rgba(18,46,77,.38) 64%, rgba(18,46,77,.08) 100%);
}
.svc-hero-bg::before, .bt-hero-bg::before, .hero-img::before, .about-hero-bg::before, .tech-hero-ov::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:linear-gradient(90deg,#F26B35,#FFB012 45%,rgba(255,176,18,0) 100%);
}
@media (min-width:900px){ .tech-hero-ov { background:linear-gradient(90deg, rgba(14,38,66,.9) 0%, rgba(18,46,77,.5) 40%, rgba(18,46,77,0) 70%); } }
@media (max-width:767px){
  .svc-hero-bg::after, .bt-hero-bg::after, .hero-img::after, .about-hero-bg::after { background:linear-gradient(180deg, rgba(14,38,66,.88), rgba(18,46,77,.62)); }
}
h1.reveal, .svc-hero-bg ~ div h1 { text-shadow:0 2px 14px rgba(0,0,0,.25); }

/* Stats band: number and suffix share the same gradient */
.bt-stat-num { background:linear-gradient(135deg,#ffffff,#FFB012); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bt-stat-num [data-count] { background:none; -webkit-text-fill-color:transparent; }

/* ---- Health checkup programme cards: photo on top, one colour per card ---- */
.camp-card { flex-direction:column; }
.camp-photo { aspect-ratio:4/3; height:auto; overflow:hidden; flex:none; }
.camp-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.camp-prev { background:linear-gradient(160deg,#0b5d57 0%,#12968b 100%); border-bottom-color:#7be0c3; box-shadow:0 12px 32px rgba(15,118,110,.28); }
.camp-emp  { background:linear-gradient(160deg,#122e4d 0%,#1b4a73 100%); border-bottom-color:#F26B35; }
.camp-stu  { background:linear-gradient(160deg,#4a2478 0%,#7a3fb5 100%); border-bottom-color:#FFB012; box-shadow:0 12px 32px rgba(106,54,160,.28); }
.camp-prev .camp-strong { color:#c9fbe9; }
.camp-stu .camp-strong { color:#FFD36B; }

/* About page: wide lab banner */
.about-banner { margin:2.5rem 0; border-radius:1.25rem; overflow:hidden; box-shadow:0 24px 50px rgba(18,46,77,.18); }
.about-banner img { width:100%; height:auto; display:block; }

/* Certificates slider (About + Home) */
.cert-slider { aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: .7rem solid #c8993c; background: #fff; }
.cert-track { display: flex; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.65,.05,.25,1); will-change: transform; }
.cert-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; transition: transform .8s ease, opacity .8s ease; opacity: .55; transform: scale(.94); }
.cert-slide.is-on { opacity: 1; transform: scale(1); }
.cert-slider .cert-doc-img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cert-slide figcaption { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; padding: .45rem .8rem; background: rgba(18,46,77,.88); color: #fff; font-size: .85rem; font-weight: 600; text-align: center; border-radius: .6rem; }
.cert-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(18,46,77,.85); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; padding-bottom: .2rem; transition: background .2s, transform .2s; }
.cert-nav:hover { background: #F26B35; transform: translateY(-50%) scale(1.08); }
.cert-prev { left: 1rem; } .cert-next { right: 1rem; }
.cert-count { position: absolute; top: 1rem; right: 1rem; z-index: 3; background: rgba(18,46,77,.88); color: #fff; font-size: .78rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; }
.cert-dots { position: absolute; top: 1.2rem; left: 0; right: 0; display: flex; justify-content: center; gap: .45rem; z-index: 3; pointer-events: none; }
.cert-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 0; padding: 0; background: rgba(18,46,77,.35); cursor: pointer; pointer-events: auto; transition: background .3s, transform .3s; }
.cert-dot.is-on { background: #F26B35; transform: scale(1.3); }

/* About hero: text + image */
.about-hero .about-hero-grid { display:grid; gap:2rem; align-items:center; grid-template-columns:1fr; }
@media (min-width:1024px){ .about-hero .about-hero-grid { grid-template-columns:1.1fr .9fr; gap:3.5rem; } }
.about-hero-img { border-radius:1.5rem; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); border:4px solid rgba(255,255,255,.9); max-width:560px; width:100%; justify-self:center; }
.about-hero-img img { display:block; width:100%; height:auto; }
/* Full body feature photo: keep the whole picture, centred */
.fbc-photo img { object-position:center; }
.fbc-photo { min-height:300px; }
.fbc-tag { left:auto; right:1rem; }

/* About hero: photo as full background */
.about-hero .about-hero-grid { display:block; }
.about-hero .about-hero-bg { background:url('../assets/photos/about-hero-card.jpg') right center/cover no-repeat; }
.about-hero { min-height:380px; display:flex; align-items:center; }
.about-hero .about-hero-grid { width:100%; }
.about-hero .about-hero-bg::after { background:linear-gradient(90deg,rgba(14,38,66,.94) 0%,rgba(18,46,77,.8) 38%,rgba(18,46,77,.25) 70%,rgba(18,46,77,.05) 100%); }
@media (max-width:767px){ .about-hero .about-hero-bg::after { background:linear-gradient(180deg,rgba(14,38,66,.88),rgba(18,46,77,.6)); } }
.about-hero { min-height:460px; }
.about-hero .about-hero-bg { background-position:right center; }


/* ===== Page hero: consistent height so background photos are never over-cropped ===== */
section:has(> .hero-img), section:has(> .svc-hero-bg), section:has(> .bt-hero-bg) { min-height:clamp(320px, 26vw, 460px); display:grid; align-content:center; }
section:has(> .hero-img) > .max-w-\[1320px\], section:has(> .svc-hero-bg) > .max-w-\[1320px\], section:has(> .bt-hero-bg) > .max-w-\[1320px\] { width:100%; }
.hero-img, .svc-hero-bg, .bt-hero-bg { background-size:cover; background-repeat:no-repeat; }


/* ===== Final CTA photo background ===== */
#contact-cta .cta-bg { position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,38,66,.96) 0%, rgba(18,46,77,.84) 45%, rgba(18,46,77,.55) 100%), url('../assets/photos/cta-hands.jpg') center/cover no-repeat; }
#contact-cta > .max-w-\[1320px\] { position:relative; z-index:1; }

.camp-stu .camp-photo img { object-position:80% 40% !important; }
.camp-prev .camp-photo img, .camp-emp .camp-photo img { object-position:50% 25% !important; }

/* ===== Hero photos: pre-composed 4:1 banners, subject anchored right, never cropped top/bottom ===== */
.hero-img, .svc-hero-bg, .bt-hero-bg, .about-hero-bg, .about-hero .about-hero-bg { background-size:cover !important; background-position:right center !important; background-repeat:no-repeat !important; }
.about-hero { min-height:clamp(340px, 26vw, 460px) !important; }
@media (max-width:767px){ .hero-img, .svc-hero-bg, .bt-hero-bg, .about-hero-bg, .about-hero .about-hero-bg { background-position:92% center !important; } }


/* ===== FINAL hero: real full-bleed background photo =====
   Each hero uses a pre-composed 3:1 banner (subject on the right, text side softly tinted inside the picture).
   Hero height follows the width (about 3:1) so the photo is never cropped top or bottom.
   Phones/small tablets: text on top, the complete photo as the background underneath. */
.hero-sec { position:relative; isolation:isolate; overflow:hidden; background:#0b1f3a !important; display:grid; align-content:center; min-height:clamp(420px, 33.3vw, 620px); }
.hero-sec > .hero-img, .hero-sec > .svc-hero-bg, .hero-sec > .bt-hero-bg, .hero-sec > .about-hero-bg {
  position:absolute !important; inset:0 !important; width:auto !important; height:auto !important; z-index:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; aspect-ratio:auto !important; display:block !important;
  background-image:var(--hero-d) !important; background-size:cover !important; background-position:right center !important; background-repeat:no-repeat !important; background-origin:padding-box !important; filter:none !important;
}
.hero-sec > .hero-img::before, .hero-sec > .svc-hero-bg::before, .hero-sec > .bt-hero-bg::before, .hero-sec > .about-hero-bg::before,
.hero-sec > .hero-img::after, .hero-sec > .svc-hero-bg::after, .hero-sec > .bt-hero-bg::after, .hero-sec > .about-hero-bg::after { content:none !important; display:none !important; }
.hero-sec::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3; background:linear-gradient(90deg,#F26B35,#FFB012 45%,rgba(255,176,18,0) 100%); }
.hero-sec h1, .hero-sec p { text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-sec > .max-w-\[1320px\], .hero-sec .about-hero-grid { position:relative; z-index:2; width:100%; }
.hero-sec > .max-w-\[1320px\] > *, .hero-sec .about-hero-text { max-width:min(40rem, 46%); }
.hero-sec > .max-w-\[1320px\] > .reveal.hl-row, .hero-sec .hl-row { max-width:none; }
@media (max-width:999px){
  .hero-sec { display:block; min-height:0; padding-bottom:76vw; }
  .hero-sec > .hero-img, .hero-sec > .svc-hero-bg, .hero-sec > .bt-hero-bg, .hero-sec > .about-hero-bg {
    background-image:var(--hero-m) !important; background-size:100% auto !important; background-position:center bottom !important;
  }
  .hero-sec::before { content:""; position:absolute; left:0; right:0; bottom:calc(76vw - 36px); height:56px; z-index:1; background:linear-gradient(180deg,#0b1f3a,rgba(11,31,58,0)); pointer-events:none; }
  .hero-sec > .max-w-\[1320px\] > *, .hero-sec .about-hero-text { max-width:none; }
}

/* per-page hero photos (paths resolve from this stylesheet) */
.hs-about > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/about-hero-bg.jpg'); --hero-m:url('../assets/photos/about-hero-card.jpg'); }
.hs-services > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/services-hero-bg.jpg'); --hero-m:url('../assets/photos/services-hero-card.jpg'); }
.hs-blood-tests > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/blood-tests-hero-bg.jpg'); --hero-m:url('../assets/photos/blood-tests-hero-card.jpg'); }
.hs-technology > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/technology-hero-bg.jpg'); --hero-m:url('../assets/photos/technology-hero-card.jpg'); }
.hs-careers > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/careers-hero-bg.jpg'); --hero-m:url('../assets/photos/careers-hero-card.jpg'); }
.hs-equipment > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/equipment-hero-bg.jpg'); --hero-m:url('../assets/photos/equipment-hero-card.jpg'); }
.hs-payment > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/payment-hero-bg.jpg'); --hero-m:url('../assets/photos/payment-hero-card.jpg'); }
.hs-gallery > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/gallery-hero-bg.jpg'); --hero-m:url('../assets/photos/gallery-hero-card.jpg'); }
.hs-contact > div[aria-hidden]:first-of-type { --hero-d:url('../assets/photos/contact-hero-support.jpg'); --hero-m:url('../assets/photos/contact-hero-support.jpg'); }

/* hero height must follow width (~3:1) so the banner is not cropped; beats older min-height rules */
section.hero-sec { min-height:clamp(420px, 33.3vw, 620px) !important; }
@media (max-width:999px){ section.hero-sec { min-height:0 !important; } }

/* ===== Hero v2: NO blur. Real photo visible across the whole hero (desktop) =====
   The old *-hero-bg.jpg banners had a blurred left half baked in. Desktop now uses the full
   un-blurred photo (*-hero-card.jpg) edge to edge, with only a soft navy gradient behind the text. */
@media (min-width:1000px){
  .hero-sec > div[aria-hidden]:first-of-type {
    background-image:var(--hero-m) !important; background-size:cover !important;
    background-position:center var(--hero-y,40%) !important; background-repeat:no-repeat !important;
  }
  section.hero-sec { min-height:clamp(440px, 38vw, 700px) !important; }
  .hero-sec::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none; bottom:0; height:auto;
    background:linear-gradient(90deg, rgba(11,31,58,.84) 0%, rgba(11,31,58,.66) 30%, rgba(11,31,58,.22) 55%, rgba(11,31,58,0) 72%);
  }
  .hs-services { --hero-y:30%; }
  .hs-about { --hero-y:40%; }
  .hs-blood-tests { --hero-y:40%; }
  .hs-technology { --hero-y:55%; }
  .hs-careers { --hero-y:40%; }
  .hs-equipment { --hero-y:55%; }
  .hs-payment { --hero-y:40%; }
  .hs-gallery { --hero-y:40%; }
  .hs-contact { --hero-y:35%; }
}

/* X-Ray summary card: icon panel instead of photo */
.eq-summary-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#122E4D 0%,#1d4a7a 100%);}

/* ===== HERO FINAL (v4): full photo edge to edge, no colour fill, minimal tint ===== */
.hs-about{--ar:1.9;--hero-y:50%} .hs-services{--ar:1.9;--hero-y:40%} .hs-blood-tests{--ar:1.8;--hero-y:40%}
.hs-technology{--ar:2;--hero-y:55%} .hs-careers{--ar:2.35;--hero-y:40%} .hs-equipment{--ar:1.9;--hero-y:45%}
.hs-payment{--ar:1.9;--hero-y:50%} .hs-gallery{--ar:2;--hero-y:45%} .hs-contact{--ar:2;--hero-y:35%}
@media (min-width:1000px){
  .hero-sec > div[aria-hidden]:first-of-type {
    background-image:var(--hero-d) !important; background-size:cover !important;
    background-position:center var(--hero-y,50%) !important; background-repeat:no-repeat !important;
  }
  /* only a light shade behind the text so it stays readable; photo stays bright and fully visible */
  .hero-sec::before { content:"" !important; display:block !important; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(8,24,45,.58) 0%, rgba(8,24,45,.32) 32%, rgba(8,24,45,0) 58%); }
  section.hero-sec { min-height:clamp(420px, calc(100vw / var(--ar, 2)), 640px) !important; }
  .hero-sec > .max-w-\[1320px\] > *, .hero-sec .about-hero-text { max-width:min(38rem, 44%); }
}

/* ===== Hero v5: Services / Gallery / Payment / Careers — full photo, no cut, moderate height ===== */
.hs-services,.hs-gallery,.hs-payment,.hs-careers{--ar:2.6;--hero-y:50%}
@media (min-width:1000px){
  .hs-services > div[aria-hidden]:first-of-type,.hs-gallery > div[aria-hidden]:first-of-type,
  .hs-payment > div[aria-hidden]:first-of-type,.hs-careers > div[aria-hidden]:first-of-type { background-position:center center !important; }
  section.hs-services,section.hs-gallery,section.hs-payment,section.hs-careers { min-height:clamp(440px, 38.46vw, 620px) !important; }
}

/* ===== Hero v6: Services / Payment / Blood Tests — original photo edge to edge, no blur, minimal crop ===== */
.hs-services{--ar:2.2;--hero-y:45%;--mr:2} .hs-payment{--ar:2.2;--hero-y:50%;--mr:1.7778} .hs-blood-tests{--ar:2.2;--hero-y:30%;--mr:1.7778}
@media (min-width:1000px){
  section.hs-services,section.hs-payment,section.hs-blood-tests { min-height:clamp(440px, 45.45vw, 720px) !important; }
  .hs-services > div[aria-hidden]:first-of-type,.hs-payment > div[aria-hidden]:first-of-type,.hs-blood-tests > div[aria-hidden]:first-of-type {
    background-size:cover !important; background-position:center var(--hero-y) !important; }
}
@media (max-width:999px){
  section.hs-services.hero-sec,section.hs-payment.hero-sec,section.hs-blood-tests.hero-sec { padding-bottom:calc(100vw / var(--mr)) !important; }
  .hs-services.hero-sec::before,.hs-payment.hero-sec::before,.hs-blood-tests.hero-sec::before { bottom:calc(100vw / var(--mr) - 36px) !important; }
}

/* ===== Hero v7: SAME height on every page (matches Gallery) ===== */
.hs-about{--hero-y:50%} .hs-services{--hero-y:45%} .hs-blood-tests{--hero-y:20%} .hs-payment{--hero-y:30%}
.hs-technology{--hero-y:55%} .hs-equipment{--hero-y:40%} .hs-contact{--hero-y:10%} .hs-careers{--hero-y:50%} .hs-gallery{--hero-y:50%}
@media (min-width:1000px){
  section.hero-sec[class*="hs-"] { min-height:clamp(440px, 38.46vw, 620px) !important; }
}

/* CTA contact line: helpline pill + suggestion sentence + contact, with proper spacing */
.cta-line { display:flex; flex-wrap:wrap; align-items:center; column-gap:2.25rem; row-gap:1rem; }
.cta-line .cta-helpline { margin-top:0; }
.cta-note { display:flex; flex-wrap:wrap; align-items:center; column-gap:1.25rem; row-gap:.6rem; margin-left:.25rem; }
.cta-note p { margin:0; }
@media (max-width:639px) { .cta-line { row-gap:1.1rem; } .cta-note { margin-left:0; } }


/* Equipment page: department switcher inside each department header */
.eq-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-left: auto; align-self: center; }
.eq-switch::before { content: "Also explore"; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #F26B35; margin-right: .2rem; }
.eq-switch a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1.2;
  color: #122E4D; background: linear-gradient(180deg,#fff,#FBF6EE); border: 1.5px solid rgba(18,46,77,.14);
  box-shadow: 0 3px 10px rgba(18,46,77,.07);
  transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.eq-switch a::after { content: "\2192"; font-size: .95rem; transition: transform .25s; }
.eq-switch a:hover { background: #122E4D; color: #fff; border-color: #122E4D; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18,46,77,.22); }
.eq-switch a:hover::after { transform: translateX(3px); color: #FFB012; }
@media (max-width: 899px) { .eq-switch { flex: 1 1 100%; margin-left: 0; margin-top: .45rem; } .eq-switch::before { flex: 1 1 100%; } }

/* Contact hero: 16:9 support photo */
.hs-contact{--ar:1.78 !important;--hero-y:50% !important}
@media (min-width:1000px){ .hs-contact::before{ background:linear-gradient(90deg, rgba(8,24,45,.78) 0%, rgba(8,24,45,.55) 30%, rgba(8,24,45,.12) 52%, rgba(8,24,45,0) 66%) !important; } }


/* Blood tests: Health Profiles */
.hp-section { background: #fff; padding: 4rem 0 4.5rem; }
.hp-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 640px) { .hp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hp-grid { grid-template-columns: repeat(3, 1fr); } }
.hp-card { display: flex; flex-direction: column; gap: .7rem; background: linear-gradient(180deg,#fff,#FBF6EE); border: 1px solid rgba(18,46,77,.09); border-top: 4px solid #F26B35; border-radius: 1.1rem; padding: 1.2rem 1.25rem 1.1rem; box-shadow: 0 6px 18px rgba(18,46,77,.06); transition: transform .25s, box-shadow .25s, border-color .25s; }
.hp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(18,46,77,.13); border-top-color: #FFB012; }
.hp-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hp-num { font-family: Poppins, sans-serif; font-weight: 800; font-size: .85rem; color: #F26B35; background: rgba(242,107,53,.1); padding: .25rem .65rem; border-radius: 999px; }
.hp-time { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; background: #f4f6f9; color: #475569; }
.hp-time svg { color: #F26B35; }
.hp-name { font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1.3; color: #122e4d; }
.hp-inc { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.hp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hp-chips li { font-size: .78rem; font-weight: 600; color: #122e4d; background: #fff; border: 1px solid rgba(18,46,77,.14); border-radius: 999px; padding: .28rem .65rem; }
.hp-card .tc-wa { margin-top: auto; }


/* Full body checkup poster: show the whole image (it carries its own text) */
.fbc-photo { min-height:0 !important; background:#EAF4FB; }
.fbc-photo img { position:static !important; display:block; width:100%; height:auto !important; object-fit:contain; }

/* Health Profile card images - every image identical 16:9 box */
.hp-img{width:100%;aspect-ratio:4/3;border-radius:.75rem;overflow:hidden;background:#f3f4f6}
.hp-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Contact: 4 branch cards in one row on wide screens */
@media (min-width:1100px){.loc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}