@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap');

/* ─────────────────────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:clip;scroll-padding-top:88px;scroll-behavior:smooth;}
body{overflow-x:clip;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#0F1923;background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}
* { min-width: 0; }

/* ─────────────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --sky:      #0EA5E9;
  --sky-d:    #0284C7;
  --sky-l:    #38BDF8;
  --sky-pale: #F0F9FF;
  --sky-ring: #BAE6FD;

  --lime:     #65A30D;
  --lime-l:   #84CC16;
  --lime-pale:#F7FEE7;

  /* Neutral scale — warm slate, not cold gray */
  --n0: #FFFFFF;
  --n50: #F8F9FA;
  --n100: #F1F3F5;
  --n200: #E9ECEF;
  --n300: #DEE2E6;
  --n400: #ADB5BD;
  --n500: #6C757D;
  --n600: #495057;
  --n700: #343A40;
  --n800: #212529;
  --n900: #0F1923;

  /* Dark sections */
  --ink:    #0B1120;
  --ink-2:  #131E30;
  --ink-3:  #1C2B40;

  /* Typography */
  --f-head: 'Fraunces', Georgia, serif;
  --f-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-serif: 'Fraunces', Georgia, serif;

  /* Spacing */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(15,25,35,.08), 0 1px 2px rgba(15,25,35,.06);
  --sh-md:  0 4px 16px rgba(15,25,35,.08), 0 2px 6px rgba(15,25,35,.05);
  --sh-lg:  0 12px 40px rgba(15,25,35,.1),  0 4px 12px rgba(15,25,35,.06);
  --sh-xl:  0 24px 64px rgba(15,25,35,.12), 0 8px 20px rgba(15,25,35,.06);

  /* Transitions */
  --t:  .18s ease;
  --t2: .28s ease;
}

/* ─────────────────────────────────────────────────────────────────
   CONTAINER
───────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* ─────────────────────────────────────────────────────────────────
   TYPOGRAPHY SCALE
───────────────────────────────────────────────────────────────── */
.f-head { font-family: var(--f-head); }
h1,h2,h3 { font-family: var(--f-head); line-height: 1.14; letter-spacing: -.02em; }
h1 em, h2 em, h3 em, h4 em {
  font-style: normal;
  font-family: 'Fraunces', Georgia, serif;
}
h4,h5,h6 { font-family: var(--f-body); font-weight: 700; }

.display-xl { font-size: clamp(52px,6.5vw,88px); font-weight: 700; line-height: .96; letter-spacing: -.04em; }
.display-lg { font-size: clamp(38px,4.5vw,60px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.display-md { font-size: clamp(28px,3.2vw,42px); font-weight: 600; line-height: 1.1;  letter-spacing: -.025em; }
.display-sm { font-size: clamp(20px,2.2vw,28px); font-weight: 600; line-height: 1.2;  letter-spacing: -.02em; }

.label-up {
  font-family: var(--f-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   LATROGLO MEDICS — TWO-TIER HEADER SYSTEM
   ┌─ Tier 1: Top Bar  (brand · search trigger · portals · socials)
   └─ Tier 2: Main Nav (dept mega-dropdowns · company · CTA)
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES ─────────────────────────────────────── */
:root {
  --tb-h:      66px;               /* topbar height */
  --nav-h:     52px;               /* mainnav height */
  --nav-bg:    rgba(255,255,255,.97);
  --nav-blur:  blur(20px) saturate(200%);
  --mega-w:    720px;              /* mega dropdown max width */
  --drop-ring: 0 0 0 1px rgba(15,25,35,.06),
               0 8px 24px rgba(15,25,35,.08),
               0 24px 64px rgba(15,25,35,.1);
}

/* ═══════════════════════════════
   TIER 1: TOP BAR
   ═══════════════════════════════ */
.topbar {
  /* Original palette, lifted ~15% lighter for better readability */
  background: linear-gradient(
    150deg,
    #1A3F6F 0%,       /* lighter sky-blue (was #0C2340) */
    #152E52 30%,      /* lighter navy bridge (was #071B30) */
    #101D38 58%,      /* lighter midpoint (was #060F1E) */
    #102B20 100%      /* lighter mint-green (was #061A12) */
  );
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 210;
  animation: tbEntry .5s cubic-bezier(.4,0,.2,1) both;
  overflow: hidden;
}

/* Soft radial glow echoing the hero's radial gradients */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 120% at 20% 50%, rgba(14,165,233,.10) 0%, transparent 70%),
    radial-gradient(ellipse 45% 120% at 80% 50%, rgba(16,185,129,.07) 0%, transparent 70%);
}

/* Animated accent line — matches the hero's sky/lime palette */
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #0EA5E9 0%,
    #38BDF8 20%,
    #06B6D4 35%,
    #10B981 55%,
    #84CC16 70%,
    #38BDF8 85%,
    #0EA5E9 100%
  );
  background-size: 200% 100%;
  animation: tbAccentSlide 7s linear infinite;
  opacity: 0.75;
}

@keyframes tbAccentSlide {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}
@keyframes tbEntry {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.topbar-inner {
  display: flex;
  align-items: center;
  height: var(--tb-h);
  gap: 0;
}

/* ── Brand ── */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(255,255,255,.08);
  min-width: 0;
}
/* ── Real transparent logo image ─────────────────────
   Topbar height = 66px. Logo display height = 36px.
─────────────────────────────────────────────────────── */
.topbar-logo-img {
  width:  36px;
  height: 36px;
  object-fit: contain;
  object-position: center center;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(14,165,233,.35));
  transition: filter .2s;
}
.topbar-brand:hover .topbar-logo-img {
  filter: drop-shadow(0 0 8px rgba(14,165,233,.6));
}
.topbar-logo-img--mob {
  width: 34px;
  height: 34px;
}

/* Vertical separator — tight, equal spacing either side */
.topbar-brand-divider {
  width: 2px;
  height: 38px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0 8px; /* equal 8px on both sides — tight professional spacing */
}

/* Fallback mark (shown only if image fails) */
.topbar-brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(14,165,233,.4);
}
.topbar-brand-name {
  display: block;
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  white-space: nowrap;
}
.topbar-brand-name em {
  font-style: normal;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--sky-l);
}
.topbar-brand-tag {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.28);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}

/* ── Search trigger (centre) ── */
.topbar-search-wrap {
  flex: 2;
  padding: 0 24px;
  min-width: 0;
}
.topbar-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 0 16px;
  height: 40px;
  color: rgba(255,255,255,.38);
  font-family: var(--f-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  text-align: left;
}
.topbar-search-trigger:hover,
.topbar-search-trigger:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: rgba(14,165,233,.5);
  color: rgba(255,255,255,.6);
  outline: none;
}
.topbar-search-trigger span { flex: 1; }
.topbar-search-kbd {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--f-body);
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* ── Right: portals + socials ── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 20px;
  flex-shrink: 0;
}
.topbar-portal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.topbar-portal:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.topbar-portal--admin {
  background: rgba(14,165,233,.12);
  color: var(--sky-l);
  border: 1px solid rgba(14,165,233,.2);
}
.topbar-portal--admin:hover {
  background: rgba(14,165,233,.22);
  color: #fff;
}
.topbar-sep {
  width: 1px; height: 26px;
  background: rgba(255,255,255,.08);
  margin: 0 8px;
  flex-shrink: 0;
}

/* ── Social icons ── */
.topbar-socials {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Shared social button */
.tb-social {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,.38);
  text-decoration: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s;
  /* Staggered entrance animation */
  animation: socialPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.tb-social:nth-child(1) { animation-delay: .35s; }
.tb-social:nth-child(2) { animation-delay: .40s; }
.tb-social:nth-child(3) { animation-delay: .45s; }
.tb-social:nth-child(4) { animation-delay: .50s; }
.tb-social:nth-child(5) { animation-delay: .55s; }

@keyframes socialPop {
  from { opacity: 0; transform: translateY(-6px) scale(.7); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* Individual brand hover colours */
.tb-social--fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; box-shadow: 0 4px 14px rgba(24,119,242,.45); transform: translateY(-3px) scale(1.08); }
.tb-social--li:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; box-shadow: 0 4px 14px rgba(10,102,194,.45); transform: translateY(-3px) scale(1.08); }
.tb-social--x:hover  { background: #000;    color: #fff; border-color: #333;    box-shadow: 0 4px 14px rgba(0,0,0,.5);       transform: translateY(-3px) scale(1.08); }
.tb-social--ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(214,36,159,.4); transform: translateY(-3px) scale(1.08); }
.tb-social--wa:hover { background: #25D366; color: #fff; border-color: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,.45); transform: translateY(-3px) scale(1.08); }

/* ═══════════════════════════════
   TIER 2: MAIN NAV
   ═══════════════════════════════ */
.mainnav {
  position: sticky;
  top: var(--tb-h);
  z-index: 200;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid rgba(15,25,35,.08);
  display: flex;
  align-items: stretch;
  /* Smooth scroll state */
  transition: border-color .2s, box-shadow .2s;
  /* Entry animation — delayed after topbar */
  animation: navEntry .45s .08s cubic-bezier(.4,0,.2,1) both;
}
@keyframes navEntry {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.mainnav.is-scrolled {
  box-shadow: 0 2px 24px rgba(15,25,35,.1);
  border-bottom-color: transparent;
}

.mainnav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Nav list */
.mainnav-list {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.mn-item {
  position: relative;
  display: flex;
}

/* Nav trigger (link or button) */
.mn-trigger {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  padding: 7px 14px;
  margin: 0 2px;
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n500);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  border-radius: 8px;
  transition: color .2s, background .2s, transform .2s, box-shadow .2s;
}
.mn-trigger:hover,
.mn-item:hover > .mn-trigger,
.mn-item:focus-within > .mn-trigger {
  color: var(--n900);
  background: rgba(14,165,233,.07);
  transform: translateY(-1px);
}
/* Active tab — filled pill with dept colour */
.mn-trigger.is-active {
  color: #fff;
  background: var(--dept-color, var(--sky));
  font-weight: 700;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--dept-color, var(--sky)) 45%, transparent);
  transform: translateY(-1px);
}
.mn-trigger.is-active .mn-trigger-icon { opacity: 1; }
.mn-trigger.is-active .mn-caret { color: rgba(255,255,255,.7); }
/* Dept colour accent on hover when --dept-color is set */
.mn-item:hover > .mn-trigger[style*="--dept-color"] {
  color: var(--dept-color, var(--sky));
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 8%, transparent);
}

.mn-trigger-icon {
  font-size: 12px;
  opacity: .7;
  transition: opacity .16s;
}
.mn-item:hover > .mn-trigger .mn-trigger-icon { opacity: 1; }

.mn-caret {
  flex-shrink: 0;
  color: var(--n300);
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .16s;
  margin-top: 1px;
}
.mn-item:hover > .mn-trigger .mn-caret,
.mn-item:focus-within > .mn-trigger .mn-caret { transform: rotate(180deg); color: var(--n500); }

/* Nav right side */
.mainnav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow: visible;
}
.mn-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sky);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(14,165,233,.35);
  transition: background .18s, transform .15s, box-shadow .18s;
  overflow: visible;
  flex-shrink: 0;
}
.mn-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  overflow: visible;
}
.mn-cta:hover { background: var(--sky-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,.45); }

/* ─── MEGA DROPDOWN ─────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   MEGA DROPDOWN — enterprise redesign
═══════════════════════════════════════════════════════════════ */
.mega {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 600px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 0 16px 16px 16px;
  box-shadow:
    0 0 0 1px rgba(15,25,35,.07),
    0 8px 24px rgba(15,25,35,.10),
    0 24px 48px rgba(15,25,35,.07);
  border-top: 3px solid var(--dept-color, var(--sky));
  display: flex;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition:
    opacity .2s cubic-bezier(.4,0,.2,1),
    transform .2s cubic-bezier(.4,0,.2,1),
    visibility .2s;
  z-index: 500;
}
.mn-item:hover .mega,
.mn-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.mn-item:nth-last-child(-n+2) .mega {
  left: auto;
  right: 0;
  transform-origin: top right;
  border-radius: 16px 0 16px 16px;
}
.mn-item:nth-last-child(-n+2) .mega-panel {
  border-radius: 13px 0 0 13px;
}

/* ── Left identity panel ── */
.mega-panel {
  width: 210px;
  flex-shrink: 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--dept-color, var(--sky)) 10%, #fff) 0%,
    color-mix(in srgb, var(--dept-color, var(--sky)) 4%, #f9fafb) 100%
  );
  border-right: 1px solid color-mix(in srgb, var(--dept-color, var(--sky)) 15%, #e8ecf0);
  border-radius: 0 0 0 13px;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.mega-panel::before {
  content: '';
  position: absolute;
  top: -28px; right: -28px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 10%, transparent);
  pointer-events: none;
}
.mega-panel-icon {
  font-size: 40px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
  animation: megaIconPop .32s .08s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes megaIconPop {
  from { transform: scale(.5) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1)  rotate(0);      opacity: 1; }
}
.mega-panel-name {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--dept-color, var(--sky));
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.mega-panel-tag {
  font-size: 12px;
  color: var(--n500);
  line-height: 1.6;
  margin-bottom: 22px;
  flex: 1;
}
.mega-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--dept-color, var(--sky));
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--dept-color, var(--sky)) 40%, transparent);
  transition: filter .18s, transform .15s, box-shadow .18s;
  width: fit-content;
}
.mega-panel-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--dept-color, var(--sky)) 50%, transparent);
}
.mega-panel-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dept-color, var(--sky)), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .35s .06s cubic-bezier(.4,0,.2,1);
}
.mn-item:hover .mega-panel-line { transform: scaleX(1); }

/* ── Right: category cards ── */
.mega-cats {
  flex: 1;
  padding: 20px 16px 20px 18px;
  min-width: 0;
  overflow: hidden;
}
.mega-cats-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n300);
  margin-bottom: 10px;
  padding-left: 4px;
}
.mega-cats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

/* Category row */
.mega-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .14s, border-color .14s;
  animation: catItemIn .22s calc(var(--i, 0) * 0.035s + 0.04s) cubic-bezier(.4,0,.2,1) both;
}
@keyframes catItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega-cat-item:hover {
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 7%, transparent);
  border-color: color-mix(in srgb, var(--dept-color, var(--sky)) 22%, transparent);
}
.mega-cat-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 10%, #f4f6f8);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 17px;
  transition: transform .2s, background .14s;
}
.mega-cat-item:hover .mega-cat-icon {
  transform: scale(1.1);
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 18%, transparent);
}
.mega-cat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.mega-cat-text b {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--n800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .14s;
}
.mega-cat-text s {
  font-size: 10.5px;
  color: var(--n400);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-cat-item:hover .mega-cat-text b { color: var(--dept-color, var(--sky)); }

/* Parent item with sub-flyout */
.mega-cat-group {
  position: relative;
  animation: catItemIn .22s calc(var(--i, 0) * 0.035s + 0.04s) cubic-bezier(.4,0,.2,1) both;
}
.mega-cat-parent { animation: none; width: 100%; }
.mega-cat-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--n300);
  transition: transform .18s, color .14s;
}
.mega-cat-group:hover .mega-cat-chevron,
.mega-cat-group:focus-within .mega-cat-chevron {
  transform: rotate(-90deg);
  color: var(--dept-color, var(--sky));
}
.mega-cat-sub-panel {
  position: absolute;
  top: -4px;
  left: calc(100% + 6px);
  width: 240px;
  background: #fff;
  border: 1px solid rgba(15,25,35,.08);
  border-top: 2.5px solid var(--dept-color, var(--sky));
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(15,25,35,.05),
    0 8px 24px rgba(15,25,35,.11),
    0 20px 40px rgba(15,25,35,.07);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px) scale(.97);
  transform-origin: left top;
  transition: opacity .16s, transform .16s;
  z-index: 600;
}
.mega-cat-group:hover .mega-cat-sub-panel,
.mega-cat-group:focus-within .mega-cat-sub-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0) scale(1);
}
.mega-sub-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n300);
  padding: 4px 10px 8px;
  border-bottom: 1px solid var(--n100);
  margin-bottom: 4px;
}
.mega-sub-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .13s, border-color .13s;
}
.mega-sub-item:hover {
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 8%, transparent);
  border-color: color-mix(in srgb, var(--dept-color, var(--sky)) 18%, transparent);
}
.mega-sub-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--dept-color, var(--sky)) 10%, #f4f6f8);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform .18s;
}
.mega-sub-item:hover .mega-sub-icon { transform: scale(1.1); }
.mega-sub-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mega-sub-text b {
  font-size: 12px; font-weight: 600; color: var(--n700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .13s;
}
.mega-sub-text s {
  font-size: 10.5px; color: var(--n400);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mega-sub-item:hover .mega-sub-text b { color: var(--dept-color, var(--sky)); }

@media (hover: none) {
  .mega-cat-sub-panel {
    position: static; transform: none;
    opacity: 1; pointer-events: all;
    border-radius: 10px;
    margin: 4px 0 4px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPANY DROPDOWN
═══════════════════════════════════════════════════════════════ */
.company-drop {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(15,25,35,.07);
  border-top: 3px solid var(--sky);
  border-radius: 16px 0 16px 16px;
  box-shadow:
    0 0 0 1px rgba(15,25,35,.06),
    0 8px 24px rgba(15,25,35,.10),
    0 24px 48px rgba(15,25,35,.07);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition:
    opacity .2s cubic-bezier(.4,0,.2,1),
    transform .2s cubic-bezier(.4,0,.2,1),
    visibility .2s;
  z-index: 500;
}
.mn-has-company:hover .company-drop,
.mn-has-company:focus-within .company-drop {
  opacity: 1; visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.company-drop-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--n100);
  margin-bottom: 6px;
}
.company-drop-title {
  font-family: var(--f-head);
  font-size: 14px; font-weight: 800;
  color: var(--n900); letter-spacing: -.01em;
}
.company-drop-sub { font-size: 11px; color: var(--n400); margin-top: 2px; }
.company-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .14s, border-color .14s;
  margin-bottom: 2px;
  animation: companyItemIn .22s calc(var(--i, 0) * 0.04s + 0.05s) cubic-bezier(.4,0,.2,1) both;
}
@keyframes companyItemIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.company-item:hover { background: var(--sky-pale); border-color: color-mix(in srgb, var(--sky) 25%, transparent); }
.company-item.is-active { background: var(--sky-pale); border-color: color-mix(in srgb, var(--sky) 35%, transparent); }
.company-item-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--sky) 10%, #f4f6f8);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  transition: transform .18s, background .14s;
}
.company-item:hover .company-item-icon { transform: scale(1.1); background: color-mix(in srgb, var(--sky) 18%, transparent); }
.company-item.is-active .company-item-icon { background: color-mix(in srgb, var(--sky) 15%, transparent); }
.company-item-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.company-item-body b { font-size: 13px; font-weight: 650; color: var(--n800); transition: color .14s; }
.company-item-body s { font-size: 11px; color: var(--n400); text-decoration: none; }
.company-item:hover .company-item-body b { color: var(--sky-d); }
.company-item.is-active .company-item-body b { color: var(--sky-d); }
.company-item-arrow {
  flex-shrink: 0; color: var(--n300);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s, color .15s;
}
.company-item:hover .company-item-arrow { opacity: 1; transform: translateX(0); color: var(--sky); }

/* ─── TOPBAR MOBILE HAMBURGER ────────────────────────────────────── */
.topbar-hide-mob { /* shown on desktop, hidden on mobile */ }
.topbar-mob-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.topbar-mob-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.topbar-mob-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar-mob-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.topbar-mob-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── FULL-SCREEN RIGHT SLIDE-IN MOBILE MENU ─────────────────────── */
/* Backdrop overlay */
.mob-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 188;
  background: rgba(11,17,32,.55);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.mob-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mob-dropdown {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 190;
  background: var(--n0);
  box-shadow: -8px 0 40px rgba(11,17,32,.22);
  border-left: 2px solid var(--sky);
  overflow: hidden;
  transform: translateX(100%);
  opacity: 1;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.mob-dropdown.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.mob-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 64px;
  border-bottom: 1px solid var(--n100);
  background: var(--n0);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.mob-dd-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mob-dd-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--n200);
  border-radius: 10px;
  background: var(--n50);
  color: var(--n500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, color .18s, border-color .18s;
}
.mob-dd-close:hover {
  background: var(--n100);
  color: var(--n800);
  border-color: var(--n300);
}
.mob-dd-search {
  padding: 12px 20px;
  border-bottom: 1px solid var(--n100);
  background: var(--n0);
}
.mob-search-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 44px;
  background: var(--n0); border: 1.5px solid var(--n200);
  border-radius: 9px; padding: 0 16px;
  font-family: var(--f-body); font-size: 14px;
  color: var(--n400); cursor: pointer;
  transition: border-color .18s;
  text-align: left;
}
.mob-search-btn:hover { border-color: var(--sky); }
.mob-dd-body {
  flex: 1;
  min-height: 0;          /* critical: lets flex child shrink below content height */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* stops background page scrolling without body-freeze */
  display: flex;
  flex-direction: column;
}
.mob-dd-nav { border-bottom: 1px solid var(--n100); }
.mob-section { border-bottom: 1px solid var(--n100); }
.mob-section-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: none; border: none;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  color: var(--n700); cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.mob-section-btn:hover { background: var(--n50); }
.mob-section-btn.is-open { color: var(--sky); background: var(--sky-pale); }
.mob-caret {
  color: var(--n300); flex-shrink: 0;
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .15s;
}
.mob-section-btn.is-open .mob-caret { transform: rotate(180deg); color: var(--sky); }
.mob-sub {
  display: none;
  background: var(--n50);
  border-top: 1px solid var(--n100);
  animation: mobSubIn .22s cubic-bezier(.4,0,.2,1) both;
}
.mob-sub.is-open { display: block; }
@keyframes mobSubIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mob-sub-all {
  display: block; padding: 10px 20px 8px;
  font-size: 12px; font-weight: 700; color: var(--sky);
  text-decoration: none; letter-spacing: .02em;
}
.mob-sub-all:hover { color: var(--sky-d); }
.mob-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 24px;
  font-size: 13px; color: var(--n500);
  text-decoration: none; border-top: 1px solid var(--n100);
  transition: color .15s, background .15s;
}
.mob-sub-link:hover { color: var(--sky); background: color-mix(in srgb, var(--sky) 6%, transparent); }
.mob-sub-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.mob-dd-foot {
  padding: 16px 20px 28px;
  background: linear-gradient(
    150deg,
    #1A3F6F 0%,
    #152E52 30%,
    #101D38 58%,
    #102B20 100%
  );
  border-top: 2px solid var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-top: auto;
}
.mob-dd-foot-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mob-dd-portals { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.mob-dd-portal-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  text-decoration: none;
  transition: background .18s, color .18s;
}
.mob-dd-portal-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.mob-dd-portal-admin { background: rgba(14,165,233,.18); color: var(--sky-l); border-color: rgba(14,165,233,.3); }
.mob-dd-portal-admin:hover { background: rgba(14,165,233,.28); color: #fff; }
.mob-dd-socials { display: flex; gap: 8px; justify-content: center; }
.mob-dd-socials .tb-social {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.55);
  animation: none;
}
.mob-dd-socials .tb-social:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.25); }
.mob-cta {
  display: block; width: 100%;
  background: var(--sky); color: #fff;
  padding: 13px 18px; border-radius: 9px;
  font-size: 14px; font-weight: 700;
  text-align: center; text-decoration: none;
  box-shadow: 0 4px 16px rgba(14,165,233,.4);
  transition: background .18s, transform .15s;
}
.mob-cta:hover { background: var(--sky-d); transform: translateY(-1px); }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
html { scroll-padding-top: calc(var(--tb-h) + var(--nav-h) + 8px); }

@media (max-width: 1200px) {
  .topbar-search-wrap { padding: 0 16px; }
}
@media (max-width: 1060px) {
  .mn-trigger { padding: 0 10px; font-size: 13px; }
  .topbar-search-wrap { padding: 0 12px; }
}
@media (max-width: 900px) {
  :root { --nav-h: 0px; } /* mainnav hidden, remove its offset from sticky calc */
  .mainnav { display: none; }
  .mob-dropdown { display: flex; }
  .mob-backdrop { display: block; }
  .topbar-mob-toggle { display: flex; }
}
@media (max-width: 780px) {
  .topbar-hide-mob { display: none !important; }
  .topbar-brand { border-right: none; }
}
/* Mobile topbar search icon button */
.topbar-mob-search {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  margin-right: 6px;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.topbar-mob-search:hover { background: rgba(255,255,255,.13); border-color: rgba(14,165,233,.5); }
@media (max-width: 780px) {
  .topbar-mob-search { display: flex; }
}
/* Hide the topbar search icon while the mobile menu is open; topbar itself stays sticky/visible */
.topbar.menu-open .topbar-mob-search { display: none; }
@media (max-width: 600px) {
  :root { --tb-h: 58px; }
  .topbar-brand-tag { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   SEARCH OVERLAY
───────────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(8,16,34,.92);
  backdrop-filter: blur(12px);
  z-index: 1000; display: flex; align-items: flex-start;
  justify-content: center; padding: 80px 20px 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-overlay-inner { width: 100%; max-width: 680px; padding: 0; position: relative; }
.search-close {
  position: fixed; top: 24px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); font-size: 16px; display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t);
}
.search-close:hover { background: rgba(255,255,255,.2); }
.search-box-wrap {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg); padding: 16px 22px;
  margin-bottom: 10px; transition: border-color var(--t);
}
.search-box-wrap:focus-within { border-color: var(--sky); }
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 18px; color: #fff; font-family: var(--f-body);
}
.search-input::placeholder { color: rgba(255,255,255,.28); }
.search-hint {
  font-size: 12px; color: rgba(255,255,255,.28);
  margin-bottom: 20px; padding: 0 4px; letter-spacing: .03em;
}
.search-hint kbd {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 11px;
}
.search-results { max-height: 56vh; overflow-y: auto; }
.search-loading, .search-empty {
  color: rgba(255,255,255,.36); padding: 24px; text-align: center; font-size: 14px;
}
.search-result-count {
  font-size: 11px; color: rgba(255,255,255,.35);
  padding: 0 4px 12px; border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px; letter-spacing: .04em;
}
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 10px;
  text-decoration: none; transition: background var(--t); margin-bottom: 2px;
}
.search-result-item:hover { background: rgba(255,255,255,.07); }
.search-result-icon { font-size: 22px; flex-shrink: 0; width: 36px; text-align: center; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 1px; }
.search-result-meta { display: block; font-size: 12px; color: rgba(255,255,255,.38); }
.search-result-badge { font-size: 11px; padding: 3px 9px; border-radius: 100px; font-weight: 600; flex-shrink: 0; }
.search-see-all {
  display: block; text-align: center; padding: 13px;
  font-size: 13px; font-weight: 700; color: var(--sky-l);
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 6px; transition: color var(--t);
}
.search-see-all:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; border: none;
  transition: background var(--t2), transform .15s, box-shadow var(--t2);
  cursor: pointer; letter-spacing: .01em; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--sky); color: #fff; }
.btn-primary:hover { background: var(--sky-d); box-shadow: 0 8px 24px rgba(14,165,233,.3); }
.btn-outline { background: transparent; color: var(--sky); border: 2px solid var(--sky); }
.btn-outline:hover { background: var(--sky); color: #fff; }
.btn-ghost { background: transparent; color: var(--n600); border: 1.5px solid var(--n200); }
.btn-ghost:hover { background: var(--n100); color: var(--n900); }
.btn-white { background: #fff; color: var(--sky-d); }
.btn-white:hover { background: var(--sky-pale); }
.btn-dark { background: var(--n900); color: #fff; }
.btn-dark:hover { background: var(--n700); }
.btn-lg { padding: 15px 32px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }
.btn-full { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────
   BADGES
───────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; letter-spacing: .02em; }
.badge-green  { background: #D1FAE5; color: #065F46; }
.badge-amber  { background: #FEF3C7; color: #92400E; }
.badge-red    { background: #FEE2E2; color: #991B1B; }
.badge-blue   { background: var(--sky-pale); color: var(--sky-d); }
.badge-gray   { background: var(--n100); color: var(--n600); }

/* ─────────────────────────────────────────────────────────────────
   SECTION HELPERS
───────────────────────────────────────────────────────────────── */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
.section-alt { background: var(--n50); }
.section-dark { background: var(--ink); }

.section-header { text-align: center; margin-bottom: 64px; }
.section-header.left { text-align: left; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sky); background: var(--sky-pale); border: 1px solid var(--sky-ring);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.section-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.section-eyebrow-lime { color: var(--lime); background: var(--lime-pale); border-color: #BBF7D0; }

.section-title { color: var(--n900); margin-bottom: 14px; }
.section-title-light { color: #fff; margin-bottom: 14px; }
.section-sub { color: var(--n500); font-size: 16px; max-width: 560px; margin: 0 auto; line-height: 1.78; }
.section-sub.left { margin: 0; }

/* Horizontal rule */
.hr { height: 1px; background: var(--n200); border: none; margin: 0; }
.hr-dark { background: rgba(255,255,255,.08); }

/* ─────────────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────────────── */
.card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); padding: 32px;
  transition: box-shadow var(--t2), transform var(--t2);
}
.card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px;
}
.ci-blue   { background: var(--sky-pale); }
.ci-lime   { background: var(--lime-pale); }
.ci-amber  { background: #FFF7ED; }
.ci-purple { background: #F3F0FF; }
.ci-deep   { background: var(--n100); }
.card h3   { font-size: 17px; font-weight: 700; color: var(--n900); margin-bottom: 8px; }
.card p    { font-size: 14px; color: var(--n500); line-height: 1.72; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--sky); transition: gap var(--t), color var(--t); }
.card-link:hover { gap: 10px; color: var(--sky-d); }
.card-link svg { flex-shrink: 0; transition: transform var(--t); }
.card-link:hover svg { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────────────
   GRID HELPERS
───────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ─────────────────────────────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────────────────────────────── */
.page-hero { background: var(--ink); padding: 72px 0 60px; }
.page-hero-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--sky-l); background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.2); padding: 5px 14px;
  border-radius: 100px; margin-bottom: 16px;
}
.page-hero h1 { font-size: 44px; font-weight: 700; color: #fff; margin-bottom: 14px; line-height: 1.1; }
.page-hero p  { color: rgba(255,255,255,.55); font-size: 17px; max-width: 560px; line-height: 1.75; }

/* ─────────────────────────────────────────────────────────────────
   PRODUCT CARDS
───────────────────────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; }
.product-card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); overflow: hidden;
  transition: box-shadow var(--t2), transform var(--t2);
}
.product-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.product-img {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; padding: 32px; background: var(--n50);
  border-bottom: 1px solid var(--n100);
}
.pi-sky    { background: var(--sky-pale); }
.pi-gold   { background: #FFFBEB; }
.pi-deep   { background: var(--n100); }
.pi-lime   { background: var(--lime-pale); }
.pi-purple { background: #F3F0FF; }
.product-body { padding: 20px; }
.product-cat  { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sky); margin-bottom: 6px; }
.product-name { font-size: 15px; font-weight: 700; color: var(--n900); margin-bottom: 6px; line-height: 1.3; }
.product-desc { font-size: 13px; color: var(--n500); line-height: 1.65; }

/* ─────────────────────────────────────────────────────────────────
   FORMS
───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--n700); margin-bottom: 7px; }
.form-control {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--n200); border-radius: var(--r-sm);
  background: var(--n0); font-size: 14px; color: var(--n900);
  transition: border-color var(--t2), box-shadow var(--t2);
}
.form-control:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
textarea.form-control { resize: vertical; min-height: 120px; }

/* ─────────────────────────────────────────────────────────────────
   FEATURE ROW (dark sections)
───────────────────────────────────────────────────────────────── */
.feature-row {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.feature-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(132,204,22,.18); color: var(--lime-l);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; margin-top: 1px;
}
.feature-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.feature-desc  { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.55; }

/* ─────────────────────────────────────────────────────────────────
   PRODUCTS FILTER BAR
───────────────────────────────────────────────────────────────── */
.products-filter-bar {
  background: var(--n0);
  border-top: 3px solid var(--dept-accent, var(--sky));
  border-bottom: 1px solid var(--n200);
  padding: 14px 0; position: sticky; top: calc(var(--tb-h) + var(--nav-h)); z-index: 150;
  box-shadow: 0 2px 8px rgba(15,25,35,.05);
}

/* ─────────────────────────────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────────────────────────────── */
.trust-bar { background: var(--n50); border-bottom: 1px solid var(--n200); padding: 14px 0; }
.trust-bar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trust-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n400); margin-right: 4px; white-space: nowrap; }
.trust-logo { font-size: 12px; font-weight: 600; color: var(--n600); padding: 5px 12px; border: 1px solid var(--n200); border-radius: 6px; background: var(--n0); }
.cert { font-size: 11px; font-weight: 600; color: var(--n500); padding: 4px 9px; border: 1px solid var(--n200); border-radius: 5px; }

/* ─────────────────────────────────────────────────────────────────
   BLOG / NEWS CARDS
───────────────────────────────────────────────────────────────── */
.blog-card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); overflow: hidden;
  transition: box-shadow var(--t2), transform var(--t2);
}
.blog-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.blog-thumb { display: flex; align-items: center; justify-content: center; font-size: 44px; padding: 28px; background: var(--n50); }
.bt-sky { background: var(--sky-pale); }
.blog-body { padding: 22px; }
.blog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blog-cat  { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); background: var(--sky-pale); padding: 3px 9px; border-radius: 100px; }
.blog-date { font-size: 12px; color: var(--n400); }
.blog-title   { font-size: 16px; font-weight: 700; color: var(--n900); line-height: 1.35; margin-bottom: 8px; }
.blog-excerpt { font-size: 13px; color: var(--n500); line-height: 1.7; }
.blog-footer  { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.blog-author  { font-size: 12px; color: var(--n400); font-weight: 500; }
.blog-read    { font-size: 12px; font-weight: 700; color: var(--sky); }
.blog-featured { display: grid; grid-template-columns: 1fr 1.4fr; background: var(--n0); border: 1px solid var(--n200); border-radius: var(--r-xl); overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────
   TEAM CARDS
───────────────────────────────────────────────────────────────── */
.team-card { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--r-xl); overflow: hidden; transition: box-shadow var(--t2); }
.team-card:hover { box-shadow: var(--sh-lg); }
.team-avatar { width: 100%; padding: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-size: 32px; font-weight: 700; color: #fff; }
.team-body { padding: 22px; }
.team-name  { font-size: 17px; font-weight: 700; color: var(--n900); margin-bottom: 4px; }
.team-role  { font-size: 13px; color: var(--sky); font-weight: 600; margin-bottom: 10px; }
.team-bio   { font-size: 13px; color: var(--n500); line-height: 1.65; }
.ta-blue  { background: var(--sky); }
.ta-deep  { background: var(--ink); }
.ta-mid   { background: var(--ink-3); }

/* ─────────────────────────────────────────────────────────────────
   FAQ
───────────────────────────────────────────────────────────────── */
.faq-item { border: 1px solid var(--n200); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; transition: box-shadow var(--t); }
.faq-item:hover { box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%; background: var(--n0); border: none; text-align: left;
  padding: 18px 22px; display: flex; align-items: center;
  justify-content: space-between; font-size: 15px; font-weight: 600;
  color: var(--n900); cursor: pointer; gap: 16px; font-family: var(--f-body);
}
.faq-q .faq-arrow { font-size: 18px; color: var(--sky); transition: transform var(--t); flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 22px 18px; font-size: 14px; color: var(--n600); line-height: 1.75; }
.faq-item.open .faq-a { display: block; }
.faq-sidebar { position: sticky; top: calc(var(--tb-h) + var(--nav-h) + 16px); }

/* ─────────────────────────────────────────────────────────────────
   PORTAL
───────────────────────────────────────────────────────────────── */
.portal-login { background: var(--sky-pale); border: 1.5px solid var(--sky-ring); border-radius: var(--r-xl); padding: 32px; }

/* ─────────────────────────────────────────────────────────────────
   SERVICES DETAIL
───────────────────────────────────────────────────────────────── */
.service-detail-card { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; }
.sd-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.sd-title { font-size: 20px; font-weight: 700; color: var(--n900); margin-bottom: 10px; }
.sd-desc  { font-size: 14px; color: var(--n500); line-height: 1.75; margin-bottom: 18px; }
.sd-features { display: flex; flex-direction: column; gap: 8px; }
.sd-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--n600); }
.sd-feat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); margin-top: 6px; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────
   STATS (dark)
───────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-xl); padding: 28px; text-align: center; }
.stat-num   { font-family: var(--f-head); font-size: 36px; font-weight: 700; color: #fff; }
.stat-label { font-size: 13px; color: rgba(255,255,255,.45); margin-top: 6px; }

/* ─────────────────────────────────────────────────────────────────
   TIMELINE (careers)
───────────────────────────────────────────────────────────────── */
.timeline { max-width: 720px; margin: 0 auto; position: relative; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--n200); }
.timeline-item  { display: flex; gap: 28px; margin-bottom: 32px; position: relative; }
.timeline-dot   { width: 40px; height: 40px; border-radius: 50%; background: var(--sky); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; position: relative; z-index: 1; }
.timeline-body  { background: var(--n50); border: 1px solid var(--n200); border-radius: var(--r-md); padding: 18px 22px; flex: 1; }
.timeline-title { font-size: 14px; font-weight: 700; color: var(--n900); margin-bottom: 5px; }
.timeline-text  { font-size: 13px; color: var(--n500); line-height: 1.65; }

/* ─────────────────────────────────────────────────────────────────
   JOB CARDS
───────────────────────────────────────────────────────────────── */
.job-card { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--r-xl); padding: 24px; display: flex; gap: 20px; align-items: flex-start; transition: box-shadow var(--t2); }
.job-card:hover { box-shadow: var(--sh-md); }
.job-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--sky-pale); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.job-title { font-size: 16px; font-weight: 700; color: var(--n900); margin-bottom: 4px; }
.job-meta  { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.job-tag   { font-size: 12px; color: var(--n500); background: var(--n100); padding: 3px 9px; border-radius: 100px; }
.btn-red   { background: var(--sky); color: #fff; }

/* ─────────────────────────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────────────────────────── */
.contact-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--sky-pale); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C757D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ─────────────────────────────────────────────────────────────────
   CTA STRIP
───────────────────────────────────────────────────────────────── */
.cta-strip { background: linear-gradient(135deg, var(--sky) 0%, var(--ink) 100%); padding: 80px 0; text-align: center; }
.cta-strip h2 { font-size: clamp(28px,3.5vw,42px); font-weight: 700; color: #fff; margin-bottom: 14px; }
.cta-strip p  { color: rgba(255,255,255,.6); font-size: 16px; max-width: 500px; margin: 0 auto 32px; line-height: 1.75; }
.cta-buttons  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); padding: 64px 0 28px; }
.footer-brand { display: flex; flex-direction: column; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.07); }

/* ── Footer brand logo row ── */
.footer-brand-logo {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 0 4px rgba(14,165,233,.3)) brightness(1.1);
  flex-shrink: 0;
}
.footer-brand-divider {
  width: 1.5px;
  height: 26px;
  background: rgba(255,255,255,.22);
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0 8px;
}
.footer-brand-name {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.footer-brand-name em {
  font-style: normal;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--sky-l);
}
.footer-tagline { color: rgba(255,255,255,.4); font-size: 14px; line-height: 1.8; max-width: 560px; margin-top: 4px; }
.footer-social { display: flex; gap: 16px; margin-top: 14px; }
.footer-social a { color: rgba(255,255,255,.35); font-size: 13px; transition: color var(--t); }
.footer-social a:hover { color: #fff; }
.footer-cols { display: flex; flex-direction: row; gap: 48px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-col { flex: 1; min-width: 140px; }
.footer-col h4 { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { color: rgba(255,255,255,.48); font-size: 13px; transition: color var(--t); }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-bottom p { color: rgba(255,255,255,.25); font-size: 13px; }
.footer-certs { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────────────────── */
.reveal       { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal-left  { opacity: 0; transform: translateX(-24px); transition: opacity .65s ease, transform .65s ease; }
.reveal-right { opacity: 0; transform: translateX(24px);  transition: opacity .65s ease, transform .65s ease; }
.revealed { opacity: 1; transform: none; }
.stagger-1 { transition-delay: .05s !important; }
.stagger-2 { transition-delay: .12s !important; }
.stagger-3 { transition-delay: .19s !important; }
.stagger-4 { transition-delay: .26s !important; }
.stagger-5 { transition-delay: .33s !important; }
.stagger-6 { transition-delay: .40s !important; }

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes floatY   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes spinSlow { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes pulse    { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes shimmer  { 0% { background-position: -200% center } 100% { background-position: 200% center } }

.anim-1 { animation: fadeUp .7s .05s ease both; }
.anim-2 { animation: fadeUp .7s .15s ease both; }
.anim-3 { animation: fadeUp .7s .25s ease both; }
.hero-anim-1 { animation: fadeUp .8s .1s  ease both; }
.hero-anim-2 { animation: fadeUp .8s .25s ease both; }
.hero-anim-3 { animation: fadeUp .8s .4s  ease both; }
.hero-anim-4 { animation: fadeUp .8s .55s ease both; }
.hero-anim-5 { animation: fadeUp .8s .7s  ease both; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .cta-strip { padding: 60px 0; }
  .footer-cols { gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .page-hero h1 { font-size: 32px; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .footer-cols { flex-direction: column; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MISSING / EXTENDED STYLES — Latroglo Medics v2 Complete
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variable aliases (pages reference --dark, --gray-*, etc.) ── */
:root {
  --dark:          #0B1120;
  --dark-2:        #131E30;
  --white:         #FFFFFF;
  --text:          #0F1923;
  --deep-blue:     #0B1E40;
  --gray-50:       #F8F9FA;
  --gray-100:      #F1F3F5;
  --gray-200:      #E9ECEF;
  --gray-300:      #DEE2E6;
  --gray-400:      #ADB5BD;
  --gray-500:      #6C757D;
  --gray-600:      #495057;
  --gray-700:      #343A40;
  --gray-800:      #212529;
  --gray-900:      #0F1923;
  --font-body:     'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display:  'Fraunces', Georgia, serif;
  --radius:        12px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
}

/* ── Utility text classes ── */
.text-brand  { color: var(--sky); }
.text-muted  { color: var(--n500); }
.text-dark   { color: var(--n900); }
.font-display { font-family: var(--f-head); }
.font-body    { font-family: var(--f-body); }

/* ── Section tag (eyebrow label) ── */
.section-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-d); background: var(--sky-pale);
  border: 1px solid var(--sky-ring);
  padding: 5px 13px; border-radius: 100px;
}
.section-tag-dark {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(56,189,248,.9); background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.2);
  padding: 5px 13px; border-radius: 100px;
}

/* ── Button extras ── */
.btn-ghost-white {
  background: transparent;
  color: rgba(255,255,255,.82);
  border: 1.5px solid rgba(255,255,255,.28);
  padding: 13px 28px;
  font-size: 14px; font-weight: 700;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

/* ── Blog grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.bt-gold   { background: #FFFBEB; }
.bt-deep   { background: var(--n100); }
.bt-lime   { background: var(--lime-pale); }
.bt-purple { background: #F3F0FF; }

/* ── Newsletter box ── */
.newsletter-box {
  background: linear-gradient(135deg, var(--sky-pale) 0%, #F0FDF4 100%);
  border: 1px solid var(--sky-ring);
  border-radius: var(--r-xl);
  padding: 48px;
  text-align: center;
  margin-top: 56px;
}
.newsletter-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--n0);
  border: 1px solid var(--sky-ring);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
}
.newsletter-success {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime-pale, #F0FDF4);
  border: 1px solid rgba(101,163,13,.25);
  color: #166534; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 100px;
  margin: 0 auto 18px;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form .form-control {
  flex: 1;
  min-width: 200px;
}

/* ── Grid 2 about layout ── */
.grid-2-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ── Value cards (About page) ── */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.value-card {
  background: var(--n50);
  border: 1px solid var(--n200);
  border-radius: var(--r-md);
  padding: 22px;
  transition: box-shadow var(--t2), transform var(--t2);
}
.value-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.value-icon  { font-size: 26px; margin-bottom: 12px; }
.value-title { font-size: 15px; font-weight: 700; color: var(--n900); margin-bottom: 6px; }
.value-desc  { font-size: 13px; color: var(--n500); line-height: 1.65; }

/* ── Cert grid (Services page) ── */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--r-xl);
  padding: 30px 22px 26px;
  transition: box-shadow var(--t2), transform var(--t2), border-color var(--t2);
}
.cert-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-4px);
  border-color: var(--sky-ring);
}
.cert-icon-wrap {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--sky-pale);
  border: 1px solid var(--sky-ring);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.cert-icon-wrap::after {
  content: '✓';
  position: absolute; bottom: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sky); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--n0);
}
.cert-icon  { font-size: 24px; line-height: 1; }
.cert-title { font-size: 14.5px; font-weight: 700; color: var(--n900); margin-bottom: 7px; letter-spacing: .01em; }
.cert-desc  { font-size: 12.5px; color: var(--n500); line-height: 1.62; max-width: 208px; }

/* ── Service detail grid (Services page) ── */
.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Contact grid ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: start;
}
.contact-info { margin-bottom: 28px; }
.contact-info h3 {
  font-family: var(--f-head);
  font-size: 22px; font-weight: 700; color: var(--n900); margin-bottom: 10px;
}
.contact-info p { font-size: 15px; color: var(--n500); line-height: 1.8; }
.contact-detail {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--n100);
}
.contact-detail:last-of-type { border-bottom: none; }
.contact-detail-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n400); margin-bottom: 4px; }
.contact-detail-value { font-size: 15px; font-weight: 600; color: var(--n800); }

/* ── Form card (Contact, Portal) ── */
.form-card {
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--sh-sm);
}
.form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--n100);
}
.form-note { font-size: 12px; color: var(--n400); line-height: 1.6; max-width: 280px; }

/* ── Success / Error / Info / Warn boxes ── */
.success-box {
  background: #ECFDF5; border: 1.5px solid #6EE7B7;
  border-radius: var(--r-lg); padding: 36px;
  text-align: center;
}
.error-box {
  background: #FEF2F2; border: 1.5px solid #FCA5A5;
  border-radius: var(--r-md); padding: 14px 18px;
  margin-bottom: 20px;
}
.info-box {
  background: var(--sky-pale); border: 1.5px solid var(--sky-ring);
  border-radius: var(--r-md); padding: 18px 20px;
}
.warn-box {
  background: #FEF3C7; border: 1.5px solid #FCD34D;
  border-radius: var(--r-md); padding: 14px 18px;
  margin-bottom: 20px; font-size: 13px; color: #92400E;
}

/* ── Benefit grid (Careers) ── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.benefit-card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); padding: 28px;
  text-align: center;
  transition: box-shadow var(--t2), transform var(--t2);
}
.benefit-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

/* ── FAQ layout ── */
.faq-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}
.faq-sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--n400);
  margin-bottom: 12px;
}
.faq-sidebar-links {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 24px;
}
.faq-sidebar-link {
  display: block; padding: 8px 12px;
  font-size: 13px; font-weight: 500; color: var(--n600);
  border-radius: var(--r-sm);
  transition: background var(--t), color var(--t);
  border-left: 2px solid transparent;
}
.faq-sidebar-link:hover {
  background: var(--sky-pale); color: var(--sky-d);
  border-left-color: var(--sky);
}
.faq-sidebar-cta {
  background: var(--n50); border: 1px solid var(--n200);
  border-radius: var(--r-md); padding: 16px;
}
.faq-cat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--n100);
}
.faq-cat-title {
  font-family: var(--f-head);
  font-size: 20px; font-weight: 700; color: var(--n900);
}

/* ── Portal grid ── */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.portal-card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); padding: 28px;
  transition: box-shadow var(--t2), transform var(--t2);
}
.portal-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.portal-icon  { font-size: 28px; margin-bottom: 14px; }
.portal-title {
  font-size: 16px; font-weight: 700; color: var(--n900); margin-bottom: 8px;
}
.portal-desc  { font-size: 13px; color: var(--n500); line-height: 1.72; margin-bottom: 14px; }

.portal-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── App card (Portal mobile app) ── */
.app-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--n50); border: 1px solid var(--n200);
  border-radius: var(--r-md); padding: 18px 20px;
  margin-bottom: 12px;
  transition: box-shadow var(--t);
}
.app-card:hover { box-shadow: var(--sh-sm); }

/* ── Support grid (Portal) ── */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Product footer (inside product card) ── */
.product-footer {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin-top: 14px;
}

/* ── Team grid ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Stat num/label light variant ── */
.stat-num-light   { font-family: var(--f-head); font-size: 36px; font-weight: 700; color: var(--n900); }
.stat-label-light { font-size: 13px; color: var(--n500); margin-top: 6px; }

/* ── Section title, sub light variants ── */
.section-sub-light {
  color: rgba(255,255,255,.55);
  font-size: 16px; max-width: 560px; margin: 0 auto; line-height: 1.78;
}
.section-title-light {
  color: #fff; margin-bottom: 14px;
  font-family: var(--f-head);
  font-size: clamp(28px,3.2vw,42px); font-weight: 600;
  line-height: 1.1; letter-spacing: -.025em;
}

/* ── Split text (About) ── */
.split-text { max-width: 480px; }

/* ── Cards utility ── */
.card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-xl); padding: 28px;
  transition: box-shadow var(--t2), transform var(--t2);
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

/* ── ci-gold (services icon) ── */
.ci-gold { background: #FFFBEB; }

/* ── Dept feature icon (used in dept feature grids) ── */
.dept-feature-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  background: var(--sky-pale); color: var(--sky);
}

/* ── Timeline description alias ── */
.timeline-desc { font-size: 13px; color: var(--n500); line-height: 1.65; }

/* ── Nav mobile submenu ── */
.nav-mobile-submenu {
  display: flex; flex-direction: column;
  padding: 0 0 8px 16px; gap: 2px;
}
.nav-mobile-sublink {
  display: block; padding: 7px 12px;
  font-size: 13px; color: var(--n500);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav-mobile-sublink:hover { color: var(--sky); background: var(--sky-pale); }

/* ── Pharm card (dept-coloured card) ── */
.pharm-card { border-top: 3px solid var(--sky); }

/* ── CTA strip buttons ── */
.cta-buttons .btn-white {
  background: #fff; color: var(--ink); font-weight: 700;
}
.cta-buttons .btn-white:hover { background: var(--sky-pale); }

/* ── Search hint + loading ── */
.search-hint { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 10px; }
.search-hint kbd {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: 11px;
}
.search-loading { padding: 20px; text-align: center; color: rgba(255,255,255,.4); font-size: 14px; }
.search-empty   { padding: 20px; text-align: center; color: rgba(255,255,255,.4); font-size: 14px; }
.search-result-count { font-size: 12px; color: rgba(255,255,255,.35); padding: 8px 12px; margin-bottom: 4px; }
.search-see-all { display: block; padding: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--sky-l); border-top: 1px solid rgba(255,255,255,.07); margin-top: 4px; transition: background var(--t); }
.search-see-all:hover { background: rgba(255,255,255,.06); }

/* ── Modal overlay for job apply (careers) ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--t2), visibility var(--t2);
  padding: 20px;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--n0); border-radius: var(--r-xl);
  width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--sh-xl);
  transform: scale(.97) translateY(12px);
  transition: transform var(--t2);
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }
.modal-header {
  padding: 24px 28px 0; display: flex; align-items: flex-start; justify-content: space-between;
}
.modal-body { padding: 20px 28px 28px; }
.modal-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--n200);
  background: none; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--n500); cursor: pointer; flex-shrink: 0;
  transition: background var(--t), color var(--t);
}
.modal-close:hover { background: var(--n100); color: var(--n900); }

/* ── Badge extra variants ── */
.badge-green  { background: #D1FAE5; color: #065F46; }
.badge-amber  { background: #FEF3C7; color: #92400E; }
.badge-red    { background: #FEE2E2; color: #991B1B; }
.badge-blue   { background: var(--sky-pale); color: var(--sky-d); }
.badge-purple { background: #F3F0FF; color: #6D28D9; }
.badge-lime   { background: var(--lime-pale); color: #3A5C0A; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .grid-2-about   { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid      { grid-template-columns: repeat(2, 1fr); }
  .contact-grid   { grid-template-columns: 1fr; gap: 40px; }
  .portal-2col    { grid-template-columns: 1fr; gap: 40px; }
  .faq-layout     { grid-template-columns: 1fr; gap: 32px; }
  .faq-sidebar    { position: static; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .faq-sidebar-links { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
  .faq-sidebar-label { width: 100%; }
  .faq-sidebar-cta   { width: 100%; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .value-grid     { grid-template-columns: 1fr 1fr; }
  .cert-grid      { grid-template-columns: 1fr 1fr; }
  .portal-grid    { grid-template-columns: 1fr 1fr; }
  .support-grid   { grid-template-columns: 1fr; }
  .blog-grid      { grid-template-columns: 1fr; }
  .team-grid      { grid-template-columns: 1fr; }
  .benefit-grid   { grid-template-columns: 1fr 1fr; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .form-card      { padding: 24px; }
  .newsletter-box { padding: 32px 20px; }
}
@media (max-width: 480px) {
  .value-grid     { grid-template-columns: 1fr; }
  .cert-grid      { grid-template-columns: 1fr; }
  .portal-grid    { grid-template-columns: 1fr; }
  .benefit-grid   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CAREERS — Job list styles
   ═══════════════════════════════════════════════════════════════ */
.job-list { display: flex; flex-direction: column; gap: 16px; }
.job-info  { flex: 1; }
.job-dept  { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); margin-bottom: 6px; }
.job-desc  { font-size: 13px; color: var(--n500); line-height: 1.65; margin-top: 8px; max-width: 600px; }
.job-apply { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   FAQ — additional
   ═══════════════════════════════════════════════════════════════ */
.faq-q-text { flex: 1; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════
   CONTACT — additional detail row
   ═══════════════════════════════════════════════════════════════ */
.contact-detail-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--n100);
}
.contact-detail-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN — extra missing helpers
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE — Location grid
═══════════════════════════════════════════════════════════════ */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.location-card {
  background: var(--n0); border: 1px solid var(--n200);
  border-radius: var(--r-lg); padding: 24px;
  text-align: center;
  transition: box-shadow var(--t2), transform var(--t2);
}
.location-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.location-icon { font-size: 28px; margin-bottom: 10px; }
.location-city { font-size: 15px; font-weight: 700; color: var(--n900); margin-bottom: 4px; }
.location-type { font-size: 12px; color: var(--sky); font-weight: 600; margin-bottom: 6px; }
.location-phone{ font-size: 13px; color: var(--n500); }

/* ═══════════════════════════════════════════════════════════════
   BLOG — Featured thumb & filter button
═══════════════════════════════════════════════════════════════ */
.blog-thumb-featured {
  display: flex; align-items: center; justify-content: center;
  font-size: 80px; min-height: 220px;
  background: var(--sky-pale);
}
.filter-btn {
  padding: 7px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--n200);
  background: var(--n0); color: var(--n600);
  cursor: pointer; transition: all .2s;
  font-family: var(--f-body);
}
.filter-btn:hover { border-color: var(--sky); color: var(--sky-d); }
.filter-btn.filter-btn-active,
.filter-btn.active {
  background: var(--sky); border-color: var(--sky); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCTS PAGE — Can't find box
═══════════════════════════════════════════════════════════════ */
.cant-find-box {
  text-align: center; margin-top: 56px; padding: 40px;
  background: var(--n50); border: 1px solid var(--n200);
  border-radius: var(--r-xl);
}
.cant-find-box h3 { font-family: var(--f-head); font-size: 24px; color: var(--n900); margin-bottom: 12px; }
.cant-find-box p  { color: var(--n500); font-size: 15px; margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════
   PORTAL — Login box polish
═══════════════════════════════════════════════════════════════ */
.portal-login { background: var(--sky-pale); border: 1.5px solid var(--sky-ring); border-radius: var(--r-xl); padding: 32px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .locations-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .locations-grid { grid-template-columns: 1fr; }
}

/* ══ ENTERPRISE PUBLIC CSS ADDITIONS ══════════════════════════ */

/* display-md for large headlines */
.display-md {
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* section-alt background */
.section-alt { background: var(--n50, #F8FAFF); }

/* ci-* icon classes for department cards */
.ci-blue   { background: rgba(14,165,233,.1); color: #0EA5E9; }
.ci-lime   { background: rgba(101,163,13,.1); color: #65A30D; }
.ci-amber  { background: rgba(245,158,11,.1); color: #F59E0B; }
.ci-purple { background: rgba(139,92,246,.1); color: #8B5CF6; }
.ci-green  { background: rgba(52,211,153,.1); color: #10B981; }
.ci-red    { background: rgba(244,63,94,.1);  color: #F43F5E; }
.ci-teal   { background: rgba(6,182,212,.1);  color: #06B6D4; }

/* Product icon bg classes */
.pi-blue   { background: rgba(14,165,233,.1); }
.pi-lime   { background: rgba(101,163,13,.1); }
.pi-amber  { background: rgba(245,158,11,.1); }
.pi-purple { background: rgba(139,92,246,.1); }
.pi-sky    { background: rgba(56,189,248,.1); }

/* Stock badges */
.badge-green  { background:rgba(52,211,153,.12); color:#059669; border:1px solid rgba(52,211,153,.3); padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; }
.badge-amber  { background:rgba(251,191,36,.12); color:#d97706; border:1px solid rgba(251,191,36,.3); padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; }
.badge-blue   { background:rgba(14,165,233,.12); color:#0284C7; border:1px solid rgba(14,165,233,.3); padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; }
.badge-red    { background:rgba(244,63,94,.12);  color:#e11d48; border:1px solid rgba(244,63,94,.3);  padding:2px 9px; border-radius:100px; font-size:11px; font-weight:700; }

/* Responsive grid-3 */
@media(max-width:1024px){ .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px) { .grid-3 { grid-template-columns: 1fr; } }

/* Responsive locations grid */
@media(max-width:1024px){ .locations-grid { grid-template-columns: repeat(3,1fr)!important; } }
@media(max-width:768px) { .locations-grid { grid-template-columns: repeat(2,1fr)!important; } }
@media(max-width:480px) { .locations-grid { grid-template-columns: 1fr!important; } }

/* Nav responsive fix */
@media(max-width:768px){
  .topbar { padding: 0 16px; height:60px; }
  .nav-links { display:none; }
  .nav-mobile-toggle { display:flex; }
  .topbar-logo-img { height:32px; }
}

/* Search overlay fix */
.search-overlay {
  position:fixed;inset:0;z-index:1000;
  background:rgba(8,16,34,.92);
  backdrop-filter:blur(12px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:80px 20px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.search-overlay.open { opacity:1; pointer-events:all; }
.search-overlay-inner { width:100%; max-width:680px; position:relative; }
.search-box-wrap {
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);
  border-radius:14px;padding:14px 20px;
  transition:border-color .2s;
}
.search-box-wrap:focus-within { border-color:rgba(56,189,248,.5); }
.search-input {
  flex:1;background:none;border:none;outline:none;
  font-size:17px;color:#fff;
  font-family:inherit;
}
.search-input::placeholder { color:rgba(255,255,255,.35); }
.search-hint {
  margin-top:12px;font-size:12px;
  color:rgba(255,255,255,.35);text-align:center;
}
.search-hint kbd {
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;padding:2px 6px;font-size:11px;font-family:monospace;
}
.search-results { margin-top:20px; max-height:55vh; overflow-y:auto; }
.search-close {
  position:absolute;top:-52px;right:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:50%;width:36px;height:36px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .2s;
}
.search-close:hover { background:rgba(255,255,255,.18); }
/* Mobile: compact overlay */
@media (max-width: 600px) {
  .search-overlay { padding: 16px 12px 12px; align-items: flex-start; }
  .search-overlay-inner { max-width: 100%; }
  .search-box-wrap { padding: 12px 14px; border-radius: 10px; }
  .search-input { font-size: 15px; }
  .search-close { top: unset; right: unset; position: fixed; top: 20px; right: 16px; }
  .search-hint { font-size: 11px; margin-top: 8px; }
  .search-results { max-height: calc(100dvh - 180px); }
}

/* Hero animation helpers */
.hero-anim-1 { animation:heroFadeUp .7s .1s both; }
.hero-anim-2 { animation:heroFadeUp .7s .25s both; }
.hero-anim-3 { animation:heroFadeUp .7s .4s both; }
.hero-anim-4 { animation:heroFadeUp .7s .55s both; }
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Utility */
.font-display { font-family: var(--f-head, 'Plus Jakarta Sans', system-ui, sans-serif); }
.text-brand   { color: var(--sky, #0EA5E9); }

/* Page hero responsive */
@media(max-width:768px){
  .page-hero { padding:56px 0 40px; }
  .page-hero h1 { font-size:28px; }
}
/* Container max-width safety — removed duplicate, handled in GLOBAL RESPONSIVE HARDENING below */


/* ═══════════════════════════════════════════════════════════════════
   HEALTH & WELLNESS NESTED SUB-DROPDOWN  (mega menu)
═══════════════════════════════════════════════════════════════════ */

/* Group wrapper — positions the parent item + sub-panel together */


/* ─── Products filter bar — nested Health & Wellness dropdown ───── */
.hw-filter-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hw-filter-parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  white-space: nowrap;
  user-select: none;
}
.hw-filter-parent.active,
.hw-filter-parent:hover {
  border-color: var(--vet-accent, #F59E0B);
  color: var(--vet-accent, #F59E0B);
  background: rgba(245,158,11,.09);
}
.hw-filter-parent .hw-caret {
  transition: transform .18s;
  flex-shrink: 0;
  opacity: .55;
}
.hw-filter-group:hover .hw-caret,
.hw-filter-group.hw-open .hw-caret {
  transform: rotate(180deg);
  opacity: 1;
}
/* Sub-panel below the parent button */
.hw-sub-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid rgba(15,25,35,.07);
  border-top: 2.5px solid var(--vet-accent, #F59E0B);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  padding: 8px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition: opacity .18s, transform .18s;
}
.hw-filter-group:hover .hw-sub-panel,
.hw-filter-group.hw-open .hw-sub-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}
.hw-sub-all-link {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--vet-accent, #F59E0B);
  padding: 5px 10px 8px;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}
.hw-sub-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  text-align: left;
  transition: background .14s;
  white-space: nowrap;
}
.hw-sub-btn:hover,
.hw-sub-btn.active {
  background: rgba(245,158,11,.09);
  color: var(--vet-accent, #F59E0B);
}
.hw-sub-btn .hw-sub-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — Nested sub-accordion (Health & Wellness)
═══════════════════════════════════════════════════════════════════ */
.mob-sub-group {
  margin: 2px 0;
}
.mob-sub-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: rgba(245,158,11,.06);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: background .15s;
}
.mob-sub-group-btn:hover { background: rgba(245,158,11,.12); }
.mob-sub-group-all {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vet-accent, #F59E0B);
  padding: 5px 16px 4px 46px;
  text-decoration: none;
  letter-spacing: .03em;
}
.mob-sub-group-all:hover { text-decoration: underline; }
.mob-sub-nested {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.mob-sub-nested.is-open { max-height: 300px; }
.mob-sub-nested-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 46px;
  font-size: 13.5px;
  color: #374151;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background .13s;
}
.mob-sub-nested-link:last-child { border-bottom: none; }
.mob-sub-nested-link:hover { background: rgba(245,158,11,.06); color: #92400e; }
.mob-sub-caret {
  transition: transform .2s;
}
.mob-sub-group-btn[aria-expanded="true"] .mob-sub-caret { transform: rotate(180deg); }

/* ── Filter bar responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .hw-filter-group { width: 100%; }
  .hw-filter-parent { width: 100%; justify-content: space-between; border-radius: 8px; }
  .hw-sub-panel { position: static; transform: none !important; opacity: 1 !important; pointer-events: all !important; border-radius: 8px; margin-top: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); width: 100%; }
}
@media (max-width: 480px) {
  .mega-cat-sub-panel { left: 0; top: 100%; transform: translateY(-6px) scale(.97); }
  .mega-cat-group:hover .mega-cat-sub-panel,
  .mega-cat-group:focus-within .mega-cat-sub-panel { transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE HARDENING — applies last, fixes cascade conflicts
   and covers the full range of screen sizes (320px → 4K).
═══════════════════════════════════════════════════════════════════ */

/* Base: never allow horizontal scrollbars from overflow content */
html, body { max-width: 100%; }
table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
pre, code { max-width: 100%; overflow-x: auto; }
iframe { max-width: 100%; }

/* Fluid container padding — single source of truth (overrides earlier
   duplicate/unconditional .container rule that broke tablet padding) */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Fluid hero / section headline sizing so big screens don't look tiny
   and small screens don't overflow */
.page-hero h1, .hero-title { font-size: clamp(28px, 5vw, 52px); line-height: 1.12; }
.section-title { font-size: clamp(24px, 3.4vw, 38px); }

@media (min-width: 1600px) {
  .container { max-width: 1440px; padding: 0 32px; }
}

@media (max-width: 1024px) {
  .container { padding: 0 32px; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .page-hero { padding: 56px 0 40px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .btn-lg { width: 100%; justify-content: center; text-align: center; }
  .cta-buttons, .page-hero [style*="display:flex"][style*="gap"] { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; text-align: center; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

@media (max-width: 480px) {
  .grid-4, .grid-3, .grid-2, .product-grid { grid-template-columns: 1fr; }
  .page-hero h1, .hero-title { font-size: clamp(24px, 7vw, 30px); }
  .section { padding: 48px 0; }
}

@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .pf-btn { padding: 6px 10px; font-size: 12px; }
}

/* Form fields: always full-width and never overflow on narrow screens */
input, select, textarea, button { max-width: 100%; }
.form-row { display: grid; gap: 16px; }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr !important; } }

/* Generic safety: any inline flex row with wrapping should never force
   a horizontal scrollbar on very small phones */
@media (max-width: 420px) {
  .topbar-brand-tag, .pf-count { display: none; }
}