/* ==========================================================================
   Bajaj Clinical Laboratory - global stylesheet
   1. Design tokens
   2. Base + typography
   3. Buttons + helpers
   4. Topbar
   5. Header / navigation
   6. Mobile drawer
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root{
  /* Clinical palette: a deep medical blue leads, teal supports.
     The logo red is kept for the wordmark and a few brand accents only. */
  --brand:          #0f5f7a;
  --brand-dark:     #0b4759;
  --brand-soft:     #e7f2f6;
  --accent:         #16a394;
  --accent-dark:    #0f8377;
  --accent-soft:    #e4f6f3;

  --charcoal:       #223038;
  --charcoal-deep:  #14232b;

  /* Logo red - wordmark and small brand marks */
  --red:            #ce1417;
  --red-dark:       #a90f12;
  --red-soft:       #fdeced;

  /* Neutrals */
  --ink:            #1b2830;
  --muted:          #63757f;
  --line:           #dde7eb;
  --ice:            #f2f7f9;
  --white:          #ffffff;

  /* Shape + motion */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(28,31,33,.06), 0 2px 8px rgba(28,31,33,.05);
  --shadow:    0 10px 30px rgba(28,31,33,.09);
  --ease:      cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --topbar-h: 40px;
  --header-h: 78px;
  --container: 1240px;
}

/* 2. Base + typography --------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }

body{
  margin:0;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--charcoal);
  line-height:1.15;
}

a{ color:var(--brand); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--brand-dark); }

img{ max-width:100%; height:auto; }

.container-x{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}

/* Small uppercase label used above section headings */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand); margin:0 0 14px;
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--brand); border-radius:2px;
}

/* 3. Buttons + helpers --------------------------------------------------- */
.btn-x{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:15px; font-weight:700; line-height:1;
  padding:14px 24px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-x:active{ transform:translateY(1px); }
/* Inline icons inside buttons need an explicit size or the SVG fills the button. */
.btn-x svg{ width:17px; height:17px; flex:none; }
.btn-sm svg{ width:15px; height:15px; }

.btn-primary{ background:var(--brand); color:var(--white); box-shadow:0 6px 18px rgba(15,95,122,.24); }
.btn-primary:hover{ background:var(--brand-dark); color:var(--white); box-shadow:0 10px 24px rgba(15,95,122,.3); }

.btn-accent{ background:var(--accent); color:var(--white); box-shadow:0 6px 18px rgba(22,163,148,.24); }
.btn-accent:hover{ background:var(--accent-dark); color:var(--white); }

.btn-ghost{ background:transparent; color:var(--charcoal); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ice); color:var(--charcoal); border-color:#cfd7db; }

.btn-sm{ padding:10px 18px; font-size:14px; }

/* Draft ribbon, shown only on draft.php ---------------------------------- */
.draftbar{
  position:sticky; top:0; z-index:1100;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  padding:9px 20px; background:#f5c518; color:#3a2c00;
  font-size:13px; font-weight:600;
}
.draftbar b{
  padding:3px 10px; border-radius:999px; background:#3a2c00; color:#f5c518;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.draftbar a{ margin-left:auto; color:#3a2c00; font-weight:700; text-decoration:underline; }
.draftbar a:hover{ color:#000; }
/* The ribbon takes the sticky slot, so the header sits below it. */
.is-draft .site-header{ top:38px; }

/* 4. Topbar -------------------------------------------------------------- */
.topbar{
  background:var(--charcoal-deep);
  color:rgba(255,255,255,.78);
  font-size:13px;
  min-height:var(--topbar-h);
  display:flex; align-items:center;
}
.topbar .container-x{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.topbar__list{ display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none; }
.topbar__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar__item svg{ width:14px; height:14px; flex:none; opacity:.75; }
.topbar a{ color:rgba(255,255,255,.78); }
.topbar a:hover{ color:var(--white); }
.topbar__phone{ font-weight:700; color:var(--white) !important; }
.topbar__phone svg{ opacity:1; color:var(--accent); }

/* 5. Header / navigation ------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:1030;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(28,31,33,.08); border-color:transparent; }

.site-header .container-x{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:12px; flex:none; }
.brand__logo{ height:54px; width:auto; display:block; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--charcoal);
}
.brand__name span{ color:var(--red); }
.brand__sub{
  font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-top:3px;
}

/* Desktop nav */
.mainnav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.mainnav__link{
  position:relative;
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:14.5px; font-weight:600; color:var(--charcoal); white-space:nowrap;
  padding:10px 13px; border-radius:var(--radius-sm);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.mainnav__link::after{
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.mainnav__link:hover{ color:var(--brand); }
.mainnav__link:hover::after{ transform:scaleX(1); }
.mainnav__link.is-active{ color:var(--brand); }
.mainnav__link.is-active::after{ transform:scaleX(1); }

/* Header actions */
.header__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.header__call{
  display:inline-flex; align-items:center; gap:11px;
  padding:8px 8px 8px 14px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header__call:hover{ border-color:#cfd7db; box-shadow:var(--shadow-sm); }
.header__call-icon{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:var(--brand-soft); color:var(--brand);
}
.header__call-icon svg{ width:16px; height:16px; }
.header__call-text{ display:flex; flex-direction:column; line-height:1.15; }
.header__call-label{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.header__call-num{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:15px; font-weight:800; color:var(--charcoal); letter-spacing:-.01em;
}

/* Hamburger */
.navtoggle{
  display:none; width:46px; height:46px; flex:none;
  align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:12px;
  background:var(--white); color:var(--charcoal); cursor:pointer;
}
.navtoggle svg{ width:20px; height:20px; }

/* 6. Mobile drawer ------------------------------------------------------- */
.navdrawer{
  position:fixed; inset:0 0 0 auto; z-index:1050;
  width:min(340px,86vw); background:var(--white);
  transform:translateX(100%);
  /* visibility flips instantly on open and only after the slide-out on close,
     so a stalled transition can never leave the panel unreachable. */
  transition:transform .35s var(--ease), visibility 0s linear .35s;
  display:flex; flex-direction:column;
  box-shadow:-18px 0 40px rgba(28,31,33,.14);
  /* Fully inert while closed so it can never be reached by touch,
     keyboard or an overscroll gesture. */
  visibility:hidden; pointer-events:none;
}
.navdrawer.is-open{
  transform:translateX(0); visibility:visible; pointer-events:auto;
  transition:transform .35s var(--ease), visibility 0s;
}
.navdrawer__head{
  display:flex; align-items:center; gap:11px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.navdrawer__head .brand__logo{ height:44px; }
.navdrawer__head .brand__text{ margin-right:auto; }
.navdrawer__close{
  width:40px; height:40px; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:11px;
  background:var(--white); color:var(--charcoal); cursor:pointer;
}
.navdrawer__close svg{ width:18px; height:18px; }
.navdrawer__list{ list-style:none; margin:0; padding:10px 12px; overflow-y:auto; flex:1; }
.navdrawer__list a{
  display:block; padding:13px 14px; border-radius:10px;
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:15.5px; font-weight:600; color:var(--charcoal);
}
.navdrawer__list a:hover{ background:var(--ice); }
.navdrawer__list a.is-active{ background:var(--brand-soft); color:var(--brand); }
.navdrawer__foot{ padding:16px 20px 22px; border-top:1px solid var(--line); display:grid; gap:12px; }
.navdrawer__meta{ font-size:13px; color:var(--muted); display:flex; gap:8px; line-height:1.5; }
.navdrawer__meta svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--brand); }

.navscrim{
  position:fixed; inset:0; z-index:1040;
  background:rgba(28,31,33,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.navscrim.is-open{ opacity:1; visibility:visible; }

body.nav-locked{ overflow:hidden; }

/* Responsive ------------------------------------------------------------- */
@media (max-width:1379.98px){
  .mainnav__link{ padding:10px 9px; font-size:13.8px; }
  .header__call-label{ display:none; }
}
@media (max-width:1199.98px){
  .mainnav{ display:none; }
  .navtoggle{ display:inline-flex; }
}
@media (max-width:991.98px){
  .topbar__list--left .topbar__item:not(:first-child){ display:none; }
}
@media (max-width:767.98px){
  :root{ --header-h:70px; }
  /* The bar only repeated the phone number, which the header already shows. */
  .topbar{ display:none; }
  .brand__logo{ height:44px; }
  .brand__name{ font-size:16.5px; }
  .brand__sub{ font-size:9px; letter-spacing:.1em; }
  .header__call{ padding:6px; border:none; }
  .header__call-text{ display:none; }
  .header__call-icon{ width:42px; height:42px; background:var(--brand); color:var(--white); }
}
@media (max-width:359.98px){
  .brand__text{ display:none; }
}



/* ==========================================================================
   7. Hero - "Arch"
   Editorial light layout. The photograph sits in a tall arch; a report-time
   badge and a home-collection card break its edges.
   ========================================================================== */
.hero{ position:relative; background:var(--white); padding:52px 0 58px; overflow:hidden; }
.hero::before{
  content:''; position:absolute; top:-170px; right:-130px; width:660px; height:660px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(15,95,122,.07),transparent 68%);
}
.hero__inner{
  position:relative;
  display:grid; grid-template-columns:1.04fr .96fr; gap:64px;
}

/* Copy ------------------------------------------------------------------- */
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 22px;
  padding:7px 15px 7px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--brand);
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.hero__eyebrow i{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(22,163,148,.6); animation:beat 2.4s infinite;
}
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(22,163,148,.55); }
  70%{ box-shadow:0 0 0 10px rgba(22,163,148,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,163,148,0); }
}

.hero__title{
  margin:0 0 20px;
  font-size:clamp(38px,4.1vw,58px);
  line-height:1.03; letter-spacing:-.038em; color:var(--charcoal);
}
.hero__title em{ font-style:normal; color:var(--brand); }

/* Rotating tail of the headline */
.rotator{ position:relative; display:inline-block; vertical-align:top; }
.rotator__sizer{ visibility:hidden; }
.rotator__word{
  position:absolute; left:0; top:0; white-space:nowrap; color:var(--brand);
  opacity:0; transform:translateY(.36em);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.rotator__word.is-in{ opacity:1; transform:none; }
.rotator__word.is-out{ opacity:0; transform:translateY(-.4em); }

.hero__lead{
  max-width:460px; margin:0 0 30px;
  font-size:17px; line-height:1.65; color:var(--muted);
}

/* Test finder ------------------------------------------------------------- */
.finder{ max-width:500px; }
.finder__row{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:7px 7px 7px 20px; border-radius:999px;
  background:var(--white); border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.finder__row:focus-within{ border-color:#c6d0d5; box-shadow:var(--shadow); }
.finder__icon{ display:grid; place-items:center; color:var(--muted); flex:none; }
.finder__icon svg{ width:18px; height:18px; }
.finder__input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:15.5px; color:var(--ink); padding:11px 0;
}
.finder__input::placeholder{ color:#9aa4ab; }
.finder__btn{ flex:none; padding:12px 20px; font-size:14.5px; }

.finder__list{
  position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:20;
  margin:0; padding:6px; list-style:none;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(28,31,33,.16);
  max-height:288px; overflow-y:auto;
}
.finder__list li a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px; color:var(--ink);
}
.finder__list li a:hover,
.finder__list li a.is-focus{ background:var(--ice); color:var(--ink); }
.finder__code{
  flex:none; min-width:46px; padding:4px 8px; border-radius:6px;
  background:var(--brand-soft); color:var(--brand);
  font-size:11px; font-weight:800; letter-spacing:.04em; text-align:center;
}
.finder__name{ font-size:14.5px; font-weight:600; }
.finder__cat{ margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
.finder__empty{ padding:14px 12px; font-size:14px; color:var(--muted); }

.finder__chips{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.finder__chips-label{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-right:2px;
}
.finder__chips a{
  padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  font-size:13px; font-weight:600; color:var(--charcoal);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.finder__chips a:hover{ border-color:var(--brand); color:var(--brand); }

/* Actions + reassurance --------------------------------------------------- */
.hero__cta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:24px; }
.hero__walink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--charcoal);
}
.hero__walink svg{ width:17px; height:17px; color:var(--accent); }
.hero__walink:hover{ color:var(--brand); }

/* Artwork ----------------------------------------------------------------- */
.hero__art{ position:relative; width:467px; max-width:100%; margin-inline:auto; }
.hero__arch{
  position:relative; aspect-ratio:5 / 5.4; overflow:hidden;
  border-radius:280px 280px 26px 26px;
  box-shadow:0 30px 70px rgba(28,31,33,.22);
}
.hero__arch::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,31,33,0) 55%,rgba(28,31,33,.35));
}
.hero__shot{ display:block; width:100%; height:100%; object-fit:cover; }

/* Landscape footage cropped into the portrait arch. object-position sits a
   little left of centre so the gloved hand and rack stay in frame. */
.hero__video{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:46% center;
  background:var(--brand-soft);
}

.hero__badge{
  position:absolute; top:26px; right:-18px; z-index:2;
  width:104px; height:104px; border-radius:50%;
  display:grid; place-content:center; text-align:center;
  background:var(--brand); color:var(--white);
  box-shadow:0 16px 34px rgba(15,95,122,.34);
}
.hero__badge b{
  display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:20px; line-height:1;
}
.hero__badge small{
  display:block; margin-top:5px; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; opacity:.85;
}

.hero__card{
  position:absolute; left:-34px; bottom:38px; z-index:2;
  display:flex; align-items:center; gap:13px;
  padding:15px 20px 15px 16px; border-radius:18px;
  background:var(--white); box-shadow:0 20px 44px rgba(28,31,33,.2);
}
.hero__card i{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:var(--accent-soft); color:var(--accent-dark);
}
.hero__card i svg{ width:20px; height:20px; }
.hero__card b{
  display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:15px; color:var(--charcoal);
}
.hero__card small{ display:block; font-size:12.5px; color:var(--muted); }

/* Stats band --------------------------------------------------------------- */
.statband{ background:var(--ice); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statband__grid{ display:grid; grid-template-columns:repeat(4,1fr); padding-block:32px; }
.stat{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px;
  padding-inline:26px; border-left:1px solid var(--line);
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num,.stat__plus{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:34px; font-weight:800; letter-spacing:-.03em; color:var(--charcoal); line-height:1;
}
.stat__plus{ color:var(--brand); }
.stat__num--word{ color:var(--brand); }
.stat__label{ flex:0 0 100%; margin-top:8px; font-size:13px; color:var(--muted); }

/* Responsive ---------------------------------------------------------------- */
@media (max-width:1199.98px){
  .hero__inner{ gap:44px; }
  .hero__badge{ right:-8px; }
}
@media (max-width:991.98px){
  .hero__inner{ grid-template-columns:1fr; gap:40px; }
  /* Stacked layout leads with the video, then the copy. */
  .hero__art{ order:1; }
  .hero__copy{ order:2; }
  .hero__lead,.finder{ max-width:none; }
  .hero__art{ width:520px; max-width:100%; }
  .hero__arch{ aspect-ratio:5 / 4; border-radius:220px 220px 24px 24px; }
  .hero__card{ left:50%; right:auto; bottom:18px; transform:translateX(-50%); }
  .statband__grid{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .stat:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:767.98px){
  .hero{ padding:36px 0 46px; }
  .hero__art{ width:100%; }
  .hero__arch{ aspect-ratio:5 / 4.6; border-radius:170px 170px 22px 22px; }
  .finder__row{ flex-wrap:wrap; border-radius:var(--radius); padding:10px; }
  .finder__icon{ display:none; }
  .finder__input{ flex:1 0 100%; padding:8px 6px 12px; }
  .finder__btn{ width:100%; }
  .hero__cta .btn-x{ width:100%; }
  .hero__walink{ width:100%; }
  .hero__badge{ width:88px; height:88px; top:16px; right:6px; }
  .hero__card{
    left:50%; right:auto; bottom:14px; transform:translateX(-50%);
    width:calc(100% - 24px); max-width:330px;
  }
  .stat{ padding-inline:16px; }
  .stat__num,.stat__plus{ font-size:28px; }
}

/* ==========================================================================
   8. Section shell
   ========================================================================== */
.sec{ padding:78px 0; }
.sec--ice{ background:var(--ice); }
/* Dark sections carry a photograph behind a brand-tinted wash. The image is
   passed per section with --sec-img so each one can use a different shot. */
.sec--dark{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--charcoal-deep); color:rgba(255,255,255,.78);
}
/* Image lives on its own element so the URL resolves against the page,
   not against this stylesheet. */
.sec__bg{
  position:absolute; inset:0; z-index:-2; display:block;
  background-size:cover; background-position:center;
  opacity:.2; filter:grayscale(.4);
}
.sec--dark::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(72% 62% at 10% 0%,rgba(15,95,122,.3),transparent 62%),
    radial-gradient(62% 60% at 92% 100%,rgba(22,163,148,.2),transparent 60%),
    linear-gradient(180deg,rgba(20,23,25,.9),rgba(20,23,25,.95));
}
.sec--dark h2,.sec--dark h3{ color:var(--white); }

.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:38px; }
.sec__headings{ max-width:640px; }
.sec__title{ font-size:clamp(28px,2.9vw,40px); margin:0; letter-spacing:-.032em; }
.sec__lead{ margin:14px 0 0; font-size:16px; color:var(--muted); max-width:560px; }
.sec--dark .sec__lead{ color:rgba(255,255,255,.62); }
.sec__aside{ display:flex; align-items:center; gap:12px; flex:none; }

/* Filter tabs -------------------------------------------------------------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tab{
  padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--white);
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:13.5px; font-weight:600; color:var(--charcoal);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.tab:hover{ border-color:#cbd4d8; }
.tab.is-on{ background:var(--charcoal); border-color:var(--charcoal); color:var(--white); }

/* Horizontal rail ---------------------------------------------------------- */
.rail{ position:relative; }
.rail__track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 4px 18px; margin:-4px -4px 0;
  scrollbar-width:none;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track > *{ scroll-snap-align:start; flex:0 0 300px; }
.rail__nav{ display:flex; align-items:center; gap:8px; }
.rail__btn{
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  border:1.5px solid var(--line); border-radius:50%; background:var(--white); color:var(--charcoal);
  transition:border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.rail__btn:hover{ border-color:var(--brand); color:var(--brand); }
.rail__btn[disabled]{ opacity:.35; cursor:default; border-color:var(--line); color:var(--muted); }
.rail__btn svg{ width:17px; height:17px; }
.rail__count{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  min-width:56px; text-align:right;
}

/* ==========================================================================
   9. Test cards
   ========================================================================== */
.testcard{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.testcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.testcard__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.testcard__ico{
  width:48px; height:48px; flex:none; display:grid; place-items:center;
  border-radius:14px; background:var(--brand-soft); color:var(--brand);
}
.testcard__ico svg{ width:22px; height:22px; }

/* Tint the icon by category so the rail reads at a glance. */
.testcard[data-cat="Vitamins"] .testcard__ico,
.testcard[data-cat="Pathology"] .testcard__ico{
  background:var(--accent-soft); color:var(--accent-dark);
}
.testcard__cat{
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.testcard__name{ font-size:17px; margin:0; line-height:1.25; }
.testcard__desc{ margin:8px 0 16px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.testcard__meta{
  display:grid; gap:8px; margin:0 0 18px; padding:14px 0 0;
  border-top:1px dashed var(--line); list-style:none;
}
.testcard__meta li{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); }
.testcard__meta svg{ width:14px; height:14px; color:var(--accent-dark); flex:none; }
.testcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
}
.testcard__price{ display:flex; flex-direction:column; line-height:1.2; }
.testcard__price span{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.testcard__price b{ font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:15px; color:var(--charcoal); }
.testcard__ask{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color:var(--brand);
}
.testcard__ask svg{ width:15px; height:15px; }

/* ==========================================================================
   10. Package cards
   ========================================================================== */
.pkgstats{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.pkgstat{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:16px; background:var(--white); border:1px solid var(--line);
}
.pkgstat b{ font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:22px; color:var(--charcoal); line-height:1; }
.pkgstat small{ display:block; font-size:12.5px; color:var(--muted); }

.pkgcard{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pkgcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.pkgcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.pkgcard__mark{
  width:50px; height:50px; display:grid; place-items:center; border-radius:14px;
  background:var(--charcoal); color:var(--white);
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:13px; font-weight:800;
}
.pkgcard__tag{
  padding:5px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark);
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.pkgcard__name{ font-size:19px; margin:0; }
.pkgcard__sub{ display:block; margin-top:5px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.pkgcard__desc{ margin:12px 0 16px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.pkgcard__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:var(--ice);
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--charcoal);
}
.pkgcard__toggle svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.pkgcard__toggle[aria-expanded="true"] svg{ transform:rotate(45deg); }
.pkgcard__list{
  display:none; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none;
}
.pkgcard__list.is-open{ display:flex; }
.pkgcard__list li{
  padding:5px 11px; border-radius:999px; background:var(--ice);
  font-size:12px; color:var(--muted);
}
.pkgcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
}

/* ==========================================================================
   11. Health-need cards
   ========================================================================== */
.needgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.needcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.needcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.needcard__ico{
  width:52px; height:52px; display:grid; place-items:center;
  margin:0 auto 18px; border-radius:16px;
  background:var(--brand-soft); color:var(--brand);
}
.needcard:nth-child(even) .needcard__ico{ background:var(--accent-soft); color:var(--accent-dark); }
.needcard__ico svg{ width:23px; height:23px; }
.needcard h3{ font-size:17px; margin:0 0 7px; }
.needcard p{ margin:0 0 14px; font-size:13.5px; color:var(--muted); }
.needcard span{
  display:block; padding-top:13px; border-top:1px dashed var(--line);
  font-size:12px; color:var(--muted); line-height:1.7;
}

/* ==========================================================================
   12. Workflow + turnaround
   ========================================================================== */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; }
.flowstep{
  position:relative; padding:26px 22px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.flowstep:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }
.flowstep__n{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--accent);
}
.flowstep__ico{
  width:44px; height:44px; display:grid; place-items:center; margin:14px 0 16px;
  border-radius:13px; background:rgba(255,255,255,.08); color:var(--white);
}
.flowstep__ico svg{ width:20px; height:20px; }
.flowstep h3{ font-size:17px; margin:0 0 6px; }
.flowstep p{ margin:0; font-size:13.5px; color:rgba(255,255,255,.6); }

.tatrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tatbox{
  display:flex; align-items:baseline; gap:14px;
  padding:20px 24px; border-radius:16px;
  background:rgba(255,255,255,.07); backdrop-filter:blur(6px);
  border-left:3px solid var(--brand);
}
.tatbox b{ font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:20px; color:var(--white); white-space:nowrap; }
.tatbox span{ font-size:13.5px; color:rgba(255,255,255,.6); }
.tatnote{ margin:22px 0 0; font-size:13px; color:rgba(255,255,255,.45); }

/* ==========================================================================
   13. Home collection
   ========================================================================== */
.collect{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.collect__art{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4 / 3.2; box-shadow:var(--shadow); }
.collect__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.collect__badge{
  position:absolute; left:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px; background:var(--white);
  box-shadow:0 14px 30px rgba(28,31,33,.22);
}
.collect__badge i{
  width:36px; height:36px; display:grid; place-items:center; flex:none;
  border-radius:10px; background:var(--accent-soft); color:var(--accent-dark);
}
.collect__badge i svg{ width:18px; height:18px; }
.collect__badge b{ display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:14.5px; color:var(--charcoal); }
.collect__badge small{ display:block; font-size:12px; color:var(--muted); }

.steps{ display:grid; gap:14px; margin:28px 0 30px; padding:0; list-style:none; counter-reset:s; }
.steps li{ display:flex; gap:16px; }
.steps__n{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--brand); color:var(--white);
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:13.5px; font-weight:800;
}
.steps b{ display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:15.5px; color:var(--charcoal); }
.steps small{ display:block; margin-top:3px; font-size:13.5px; color:var(--muted); }

/* ==========================================================================
   14. For organisations
   ========================================================================== */
.orgwrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.orglist{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:0; padding:0; list-style:none; }
.orglist li{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  font-size:14.5px; color:rgba(255,255,255,.86);
  transition:background-color .25s var(--ease);
}
.orglist li:hover{ background:rgba(255,255,255,.08); }
.orglist span{
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--accent); flex:none;
}

/* ==========================================================================
   15. About
   ========================================================================== */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about__art{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4 / 3; box-shadow:var(--shadow); }
.about__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.about__stat{ padding:18px 20px; border-radius:16px; background:var(--ice); border:1px solid var(--line); }
.about__stat b{ display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:24px; color:var(--charcoal); line-height:1; }
.about__stat small{ display:block; margin-top:6px; font-size:12.5px; color:var(--muted); }

/* ==========================================================================
   16. Contact
   ========================================================================== */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
.contactlist{ display:grid; gap:14px; margin:26px 0 0; padding:0; list-style:none; }
.contactlist li{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px; border-radius:16px; background:var(--white); border:1px solid var(--line);
}
.contactlist i{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:var(--brand-soft); color:var(--brand);
}
.contactlist i svg{ width:19px; height:19px; }
/* Only the small label above each detail is uppercase. Targeting every span
   here also caught the wrapper, which pushed the phone number, email and
   address into capitals. */
.contactlist li > span{ min-width:0; }
.contactlist li > span > span{
  display:block; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}
.contactlist b{ display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif; font-size:15.5px; color:var(--charcoal); }
.contactlist p{ margin:2px 0 0; font-size:13.5px; color:var(--muted); }

.enquiry{
  background:var(--white); border:1px solid var(--line); border-radius:26px; padding:30px;
  box-shadow:var(--shadow-sm);
}
.enquiry__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:14.5px; color:var(--ink); background:var(--white);
  transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--brand); }
.field textarea{ min-height:96px; resize:vertical; }
.enquiry__note{ margin:16px 0 0; font-size:12.5px; color:var(--muted); }

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq{ max-width:840px; margin-inline:auto; }
.faqitem{ border-bottom:1px solid var(--line); }
.faqitem__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;
  padding:22px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:16.5px; font-weight:700; color:var(--charcoal);
}
.faqitem__q svg{ width:20px; height:20px; flex:none; color:var(--brand); transition:transform .25s var(--ease); }
.faqitem__q[aria-expanded="true"] svg{ transform:rotate(45deg); }
.faqitem__a{ display:none; padding:0 0 22px; font-size:14.5px; color:var(--muted); line-height:1.75; max-width:70ch; }
.faqitem__a.is-open{ display:block; }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.site-footer{ background:var(--charcoal-deep); color:rgba(255,255,255,.62); padding:60px 0 0; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px; }
.footer__brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer__brand img{ height:52px; width:auto; }
.footer__brand b{
  display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:18px; color:var(--white); letter-spacing:-.02em;
}
.footer__brand span{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.footer__about{ font-size:14px; line-height:1.75; max-width:330px; margin:0 0 20px; }
.footer h4{
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin:0 0 18px;
}
.footer__links{ display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.footer__links a{ font-size:14px; color:rgba(255,255,255,.68); }
.footer__links a:hover{ color:var(--white); }
.footer__contact{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.footer__contact li{ display:flex; gap:11px; font-size:14px; line-height:1.6; }
.footer__contact svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--accent); }
.footer__contact a{ color:rgba(255,255,255,.68); }
.footer__contact a:hover{ color:var(--white); }
.footer__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 0; border-top:1px solid rgba(255,255,255,.1); font-size:13px;
}
.footer__bar p{ margin:0; }
.footer__by{ color:rgba(255,255,255,.45); }
.footer__by a{
  color:rgba(255,255,255,.8); font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.footer__by a:hover{ color:var(--white); border-color:var(--white); }

/* ==========================================================================
   19. Section responsive
   ========================================================================== */
@media (max-width:1099.98px){
  .needgrid{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:991.98px){
  .sec{ padding:60px 0; }
  .sec__head{ flex-direction:column; align-items:flex-start; gap:20px; }
  .collect,.orgwrap,.about,.contact{ grid-template-columns:1fr; gap:36px; }
  .tatrow{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767.98px){
  .sec{ padding:48px 0; }
  /* Package stat pills repeat the badges and cards below them. */
  .pkgstats{ display:none; }
  .needgrid,.flow{ grid-template-columns:1fr; }
  .orglist{ grid-template-columns:1fr; }
  .enquiry{ padding:22px; border-radius:20px; }
  .enquiry__grid{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; }
  .rail__track > *{ flex-basis:270px; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Motion preferences -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Hero info panel - fills the column under the call to action ------------- */
.heroinfo{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-top:34px; padding-top:28px;
  border-top:1px solid var(--line);
}
.heroinfo__item{ display:flex; align-items:flex-start; gap:13px; }
.heroinfo__item i{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:var(--brand-soft); color:var(--brand);
}
.heroinfo__item i svg{ width:19px; height:19px; }
.heroinfo__item b{
  display:block; font-family:'Plus Jakarta Sans','Inter',Arial,sans-serif;
  font-size:14.5px; color:var(--charcoal); line-height:1.3;
}
.heroinfo__item small{
  display:block; margin:3px 0 7px;
  font-size:12.5px; line-height:1.55; color:var(--muted);
}
.heroinfo__item a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--brand);
}
.heroinfo__item a svg{ width:13px; height:13px; flex:none; }
.heroinfo__item a:hover{ color:var(--brand-dark); }

@media (max-width:991.98px){
  .heroinfo{ margin-top:28px; padding-top:24px; }
}
@media (max-width:767.98px){
  /* Address and hours already appear in the contact section and the footer,
     so the hero drops them on phones to shorten the first screen. */
  .heroinfo{ display:none; }
}

@media (max-width:479.98px){
  /* Two figures per row rather than one long column. */
  .statband__grid{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .stat{ padding-inline:14px; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat__num,.stat__plus{ font-size:25px; }
  .stat__label{ margin-top:6px; font-size:12.5px; }
}

/* Back to top ------------------------------------------------------------- */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:1020;
  width:48px; height:48px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--brand); color:var(--white);
  box-shadow:0 10px 26px rgba(15,95,122,.35);
  opacity:0; transform:translateY(12px) scale(.9);
  transition:opacity .25s var(--ease), transform .25s var(--ease), background-color .2s var(--ease);
}
.totop svg{ width:19px; height:19px; }
.totop.is-on{ opacity:1; transform:none; }
.totop:hover{ background:var(--brand-dark); }
.totop:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

@media (max-width:767.98px){
  .totop{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ==========================================================================
   20. Small-screen hardening
   ========================================================================== */

/* Long addresses and email addresses must break rather than push the page
   sideways on narrow phones. */
.contactlist a,.contactlist p,.footer__contact a,.footer__contact span,
.heroinfo__item small,.navdrawer__meta span{ overflow-wrap:anywhere; }

@media (max-width:820px){
  /* Comfortable touch targets for links that sit inline in text. */
  .hero__walink,.testcard__ask,.topbar__phone,.topbar a,
  .heroinfo__item a,.footer__links a{ min-height:34px; align-items:center; }
  .hero__walink,.testcard__ask,.heroinfo__item a{ display:inline-flex; }
  .footer__links a{ display:inline-flex; }
}

@media (max-width:420px){
  /* Two long strings will not sit side by side at this width; the phone
     number is the one that matters. */
  .topbar__list--right .topbar__item:first-child{ display:none; }
  .topbar .container-x{ padding-inline:16px; }
  .container-x{ padding-inline:16px; }

  .hero__title{ font-size:clamp(28px,8.4vw,34px); }
  .hero__eyebrow{ font-size:10.5px; letter-spacing:.09em; padding:6px 12px 6px 10px; }

  /* Section headings and card text ease down a step. */
  .sec__title{ font-size:clamp(24px,6.6vw,30px); }
  .sec{ padding:40px 0; }

  .testcard,.pkgcard,.needcard{ padding:20px; }
  .rail__track > *{ flex-basis:calc(100vw - 52px); }

  .btn-x{ padding:13px 18px; font-size:14.5px; }
  .header__call-icon{ width:38px; height:38px; }
  .navtoggle{ width:42px; height:42px; }

  .faqitem__q{ font-size:15px; gap:14px; }
  .enquiry{ padding:18px; }
  /* Long email addresses need a smaller step to stay on two lines. */
  .contactlist b{ font-size:14.5px; }
  .contactlist li{ padding:16px; gap:12px; }
}