/* ============================================================
   MEDVEX INSURANCE TPA LTD — shared stylesheet
   ============================================================ */

:root {
  --navy: #0B2A4A;
  --navy-deep: #061A30;
  --teal: #1A7A6E;
  --teal-light: #E4F0EE;
  --gold: #C9A227;
  --gold-light: #F6EDD2;
  --grey-bg: #F4F6F7;
  --grey-line: #E1E5E8;
  --text: #333333;
  --text-soft: #5C6770;
  --white: #FFFFFF;

  --font-body: 'Inter', Arial, sans-serif;

  --h1: clamp(2rem, 4vw, 2.625rem);
  --h2: clamp(1.5rem, 3vw, 1.875rem);
  --h3: clamp(1.15rem, 2vw, 1.375rem);

  --container: 1160px;
  --radius: 6px;
  --radius-card: 12px;
  --shadow-rest: 0 2px 12px rgba(11,42,74,0.05);
  --shadow-hover: 0 12px 28px rgba(11,42,74,0.09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
}
h1 { font-size: var(--h1); letter-spacing: -0.01em; }
h2 { font-size: var(--h2); letter-spacing: -0.005em; }
h3 { font-size: var(--h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Eyebrow / ledger-tag motif ----------
   Small uppercase tags styled like a file/audit stamp,
   used as section markers throughout the site. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.tag::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
}
.tag.on-dark { color: var(--gold-light); }
.tag.on-dark::before { background: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: #b78f1d; text-decoration: none; box-shadow: 0 6px 16px rgba(201,162,39,0.28); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--white);
  text-decoration: none;
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
}
.btn-navy:hover { background: var(--navy-deep); text-decoration: none; box-shadow: 0 6px 16px rgba(11,42,74,0.22); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.18);
  transition: box-shadow 0.25s ease, transform 0.3s ease;
  will-change: transform;
}
.site-header.header-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: box-shadow 0.25s ease; }
  .site-header.header-hidden { transform: none; }
}
.site-header.scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 8px 22px rgba(0,0,0,0.24);
}
.site-header.scrolled .header-inner { padding: 10px 24px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  transition: padding 0.25s ease;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.logo-img {
  height: 27px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}
@media (min-width: 768px) {
  .logo-img { height: 33px; }
}
.site-header.scrolled .logo-img { height: 27px; }
.footer-logo-img { height: 66px; }

.primary-nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.primary-nav a {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.primary-nav a:hover { color: var(--gold); }
.primary-nav a.active { color: var(--gold); }

/* ---------- Nav dropdown (Services) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle.active { color: var(--gold); }
.nav-caret { transition: transform 0.2s ease; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: var(--navy-deep);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  list-style: none;
  margin: 0;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 110;
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 4px;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active { background: rgba(255,255,255,0.08); color: var(--gold); }

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Hamburger toggle ---------- */
.header-cta {
  padding: 10px 20px;
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .header-cta { display: none; }
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Side menu (slides in from the right) ---------- */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(520px, 94vw);
  background: var(--navy-deep);
  color: var(--white);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.32s ease;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  overflow-y: auto;
  box-shadow: -16px 0 48px rgba(0,0,0,0.35);
}
.side-menu.open { transform: translateX(0); }

.side-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.side-menu-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.side-menu-close:hover { color: var(--gold); }

.side-menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.side-menu > ul > li > a,
.side-menu > ul > li > span {
  display: block;
  padding: 16px 4px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.side-menu > ul > li > a:hover,
.side-menu > ul > li > a.active {
  color: var(--gold);
}
.side-menu-group > span {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: none;
  padding-bottom: 4px;
  font-weight: 700;
}
.side-menu-group ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.side-menu-group ul li a {
  display: block;
  padding: 12px 4px 12px 14px;
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.side-menu-group ul li:last-child a { border-bottom: 1px solid rgba(255,255,255,0.14); }
.side-menu-group ul li a:hover,
.side-menu-group ul li a.active { color: var(--gold); }

.side-menu-cta {
  display: block;
  text-align: center;
  margin-top: 24px;
}

.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,42,74,0.25);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, backdrop-filter 0.32s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
.side-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .primary-nav { display: none; }
}

/* ---------- Hero sections ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, #103a5e 100%);
  color: var(--white);
  padding: 96px 0 88px;
  overflow: hidden;
}
/* Homepage hero has no eyebrow tag or tagline above/below the H1 (removed
   per client request); pad top/bottom to keep the section's overall height
   matching the other pages' hero sections. */
.hero-home {
  padding-top: 168px;
  padding-bottom: 110px;
}

/* Hero photo overlay — sits behind content, low opacity so navy stays dominant.
   Each page carries its own photo, relevant to that page's audience/topic
   (see imagery direction). Desktop and mobile crops are passed in as CSS
   custom properties set inline per page (in HTML), so this single rule
   works for every page while still letting mobile load a much smaller file
   than desktop — the --hero-img-mobile fallback below only fires if a page
   forgets to set it. */
.hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-img-desktop);
  background-size: cover;
  background-position: center;
  opacity: var(--hero-img-opacity, 0.27);
  pointer-events: none;
}
@media (max-width: 700px) {
  .hero-bg-img {
    background-image: var(--hero-img-mobile, var(--hero-img-desktop));
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(201,162,39,0.16), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(26,122,110,0.25), transparent 50%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.hero h1 { color: var(--white); margin-bottom: 18px; }
.hero-tagline {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
  margin: 0 0 22px;
}
.hero p.lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 620px;
  margin-bottom: 32px;
}
.hero.page-hero { padding: 72px 0 64px; }
.hero.page-hero .subhead {
  font-size: 1.2rem;
  color: var(--gold-light);
  font-weight: 600;
  margin-top: 10px;
}

/* ---------- Generic section spacing ---------- */
.section { padding: 80px 0; }
.section.tight { padding: 64px 0; }
.section.alt { background: var(--grey-bg); }
/* ---------- Trust strip (homepage, under hero) ---------- */
.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
  padding: 18px 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
}
.trust-item svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }

/* ---------- Client type tabs (homepage) ---------- */
.client-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}
.client-tab {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--grey-line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.client-tab:hover { border-color: var(--teal); color: var(--teal); }
.client-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.client-tab-panel {
  display: none;
  border: 1px solid var(--grey-line);
  border-radius: 8px;
  padding: 40px;
  animation: fadeIn 0.25s ease;
}
.client-tab-panel.active { display: block; }
.client-tab-panel h3 { margin-bottom: 12px; }
.client-tab-panel p { color: var(--text-soft); font-size: 1.02rem; max-width: 640px; margin-bottom: 22px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .client-tab-panel { animation: none; }
}
@media (max-width: 700px) {
  .client-tab-panel { padding: 24px; }
}

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.editorial {
  max-width: 640px;
  padding-left: 20px;
  border-left: 3px solid var(--teal);
}
.section-head.editorial .tag::before { content: none; }

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-rest);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body .card:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.025);
  border-color: rgba(26,122,110,0.25);
  z-index: 2;
}
/* Global icon size — applied to all SVG icons sitewide.
   Specific contexts (feature-list .ico) override this as needed. */
.icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.card .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--navy);
  transition: color 0.2s ease, transform 0.2s ease;
}
.card:hover .icon { color: var(--teal); transform: scale(1.08); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: 0.97rem; }

.card-flat {
  background: var(--white);
  padding: 0;
}

/* Service panels (What We Do / Insurers etc.) */
.panel {
  position: relative;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-rest);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.panel:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.025);
  z-index: 2;
}
.panel-head {
  background: var(--navy);
  color: var(--white);
  padding: 22px 28px;
}
.panel-head h3 { color: var(--white); }
.panel-body { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; }
.panel-body p { color: var(--text-soft); flex: 1; }
.panel-body .btn { margin-top: 18px; align-self: flex-start; }

/* ---------- Quote / why-us split (homepage "Why Medvex") ---------- */
.why-medvex .section-head { margin-bottom: 40px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
}

/* Pull-quote card: elevated panel with a teal accent bar and a gold quote mark,
   so it reads as a distinct credential rather than plain text. */
.quote-block {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 36px 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quote-block .quote-mark {
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 14px;
}
.quote-block p {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  margin: 0;
}

/* Differentiator list: check-style icons in a rounded teal chip, on its own
   card so the two columns read as a matched pair. */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  justify-content: center;
}
.bullet-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.bullet-list li .check-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-light);
  border-radius: 50%;
  color: var(--teal);
}
.bullet-list li .check-icon svg {
  width: 14px;
  height: 14px;
}

/* values list (About page — label column + description column, vertically aligned) */
.values-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.values-list li {
  display: grid;
  grid-template-columns: 14px 200px 1fr;
  column-gap: 16px;
  align-items: start;
}
.values-list .value-bullet {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  background: var(--gold);
  border-radius: 2px;
}
.values-list .value-label {
  font-weight: 700;
  color: var(--navy);
}
.values-list .value-desc {
  font-weight: 400;
  color: var(--text-soft);
}
@media (max-width: 560px) {
  .values-list li {
    grid-template-columns: 14px 1fr;
    row-gap: 4px;
  }
  .values-list .value-desc {
    grid-column: 2;
  }
}

/* feature list (icon + text rows, used on service pages) */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
@media (max-width: 700px) {
  .feature-list { grid-template-columns: 1fr; }
}
.feature-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-line);
}
.feature-list li .ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--teal);
}

/* ---------- Footer CTA banner ----------
   One consistent treatment sitewide: brand navy (not navy-deep, so it never
   visually fuses with the footer directly below it), a thin gold divider
   marking the top edge, and the same gold CTA button used in the header
   and hero. Body copy is optional — some pages pair the heading with a
   short line of context, others go straight to the button. */
.cta-banner {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  text-align: center;
  padding: 76px 0;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.cta-banner h2 {
  color: var(--white);
  max-width: 620px;
  margin: 0 auto 16px;
}
.cta-banner p {
  max-width: 540px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.6;
}
.cta-banner .btn { margin-top: 4px; }
@media (max-width: 640px) {
  .cta-banner { padding: 56px 0; }
}

/* ---------- Site footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.75);
  padding: 48px 0 28px;
  font-size: 0.92rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .site-footer { padding: 36px 0 20px; }
  .footer-inner { gap: 24px; margin-bottom: 24px; }
  .footer-col ul { gap: 10px; }
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: default;
}
.social-icon svg { width: 16px; height: 16px; }
.footer-col h4 {
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: rgba(255,255,255,0.75); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.5); }

/* ---------- Founder / About ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) {
  .founder-grid { grid-template-columns: 1fr; }
  /* Cap the photo width so it reads as a portrait next to the bio text
     instead of stretching full-width to ~500px tall on a phone. */
  .founder-photo { max-width: 260px; margin: 0 auto 8px; }
}
.founder-photo {
  border-top: 4px solid var(--gold);
  background: var(--grey-bg);
  border-radius: 8px;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-name { color: var(--navy); margin-bottom: 2px; }
.founder-title { color: var(--teal); font-weight: 600; margin-bottom: 18px; }
.credential-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--teal-light);
  color: var(--teal);
}
.pill.navy { background: var(--navy); color: var(--white); }

/* ---------- Board of Directors (circular avatar-ring cards) ---------- */
.board-divider {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid rgba(0,51,102,0.1);
}
.board-intro { max-width: 640px; color: var(--text-soft); margin-bottom: 36px; }
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 270px));
  justify-content: center;
  column-gap: 32px;
  row-gap: 48px;
}
@media (max-width: 800px) {
  .board-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; row-gap: 56px; }
}
.board-card {
  text-align: center;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(11,42,74,0.06);
  border: 1px solid rgba(0,51,102,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.board-card:hover { box-shadow: 0 10px 24px rgba(11,42,74,0.12); transform: translateY(-3px); }
.board-photo-frame {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--grey-bg);
  border-top: 4px solid var(--gold);
  overflow: hidden;
}
.board-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.board-card-body { padding: 14px 18px 18px; }
.board-name { color: var(--navy); font-weight: 700; font-size: 0.96rem; margin-bottom: 2px; }
.board-title { color: var(--teal); font-weight: 600; font-size: 0.8rem; margin-bottom: 10px; letter-spacing: 0.01em; }
.board-bio { font-size: 0.8rem; line-height: 1.45; color: var(--text-soft); text-align: left; margin-bottom: 12px; }
.board-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.board-pills .pill { font-size: 0.68rem; padding: 5px 10px; }

/* ---------- Regulatory badge section ---------- */
.reg-block {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  align-items: flex-start;
  background: var(--grey-bg);
  border-radius: 8px;
  padding: 36px;
}
@media (max-width: 600px) {
  .reg-block { grid-template-columns: 1fr; }
}
.badge-icon {
  width: 40px; height: 40px;
  color: var(--teal);
}

/* ---------- Timeline (How It Works) ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.timeline-step { position: relative; }
.step-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.step-icon-circle {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.step-icon-circle:hover {
  transform: scale(1.025);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
}
.step-icon-circle .icon {
  width: 32px;
  height: 32px;
  color: var(--navy);
  transition: color 0.2s ease, transform 0.2s ease;
}
.step-icon-circle:hover .icon {
  color: var(--teal);
  transform: scale(1.08);
}
.step-arrow {
  width: 26px;
  height: 26px;
  color: var(--teal);
  opacity: 0.6;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .step-arrow { transform: rotate(90deg); margin: 4px 0 4px 29px; }
}

/* ---------- NHIS two-col ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.two-col .card { border-top: 3px solid var(--teal); }

/* ---------- Tech module cards ---------- */
.module-card {
  position: relative;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  padding: 26px;
  box-shadow: var(--shadow-rest);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.module-card:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.025);
  border-color: rgba(26,122,110,0.25);
  z-index: 2;
}
.module-card .icon { color: var(--teal); width: 40px; height: 40px; margin-bottom: 16px; }

/* ---------- Contact ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card { border-top: 3px solid var(--gold); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 6px;
}
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--text);
  background: var(--white);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
textarea { min-height: 130px; resize: vertical; }

/* Prevent iOS Safari from auto-zooming the page when a form field is
   focused — it does this for any input with font-size under 16px.
   Scoped to mobile/tablet widths only so desktop sizing is untouched. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
}

.office-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 64px;
}
@media (max-width: 800px) { .office-block { grid-template-columns: 1fr; } }
.map-placeholder {
  background: var(--grey-bg);
  border: 1px dashed var(--grey-line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--text-soft);
  text-align: center;
  font-size: 0.92rem;
  padding: 24px;
}

/* ---------- Stat highlight (used on insurer page) ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 800px) { .stat-row { grid-template-columns: 1fr; } }
.stat {
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  padding: 26px;
}
.stat .figure {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.stat .label { font-size: 0.92rem; color: rgba(255,255,255,0.8); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

@media (max-width: 700px) {
  .section { padding: 56px 0; }
  .section.tight { padding: 44px 0; }
  .hero { padding: 64px 0 56px; }
  .hero.page-hero { padding: 48px 0 40px; }
  .hero-home { padding-top: 118px; padding-bottom: 68px; }
  .grid-2 { gap: 20px; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
.grid > [data-reveal]:nth-child(1), .timeline > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.grid > [data-reveal]:nth-child(2), .timeline > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.grid > [data-reveal]:nth-child(3), .timeline > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.grid > [data-reveal]:nth-child(4), .timeline > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}

/* ---------- Floating WhatsApp button (sitewide, all breakpoints) ---------- */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(11,42,74,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.2s ease;
}
.whatsapp-fab:hover { transform: scale(1.06); box-shadow: 0 10px 24px rgba(11,42,74,0.32); }
.whatsapp-fab svg { width: 30px; height: 30px; display: block; }
body.cookie-banner-visible .whatsapp-fab { bottom: 104px; }
@media (max-width: 480px) {
  .whatsapp-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 27px; height: 27px; }
  body.cookie-banner-visible .whatsapp-fab { bottom: 128px; }
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 4px 26px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-hover); border-color: rgba(26,122,110,0.2); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  font-weight: 700;
  color: var(--navy);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--teal);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--text-soft); padding-bottom: 20px; margin: 0; max-width: none; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--navy-deep);
  color: rgba(255,255,255,0.88);
  padding: 18px 24px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-banner-inner p { margin: 0; font-size: 0.88rem; max-width: 640px; }
.cookie-banner-inner a { color: var(--teal); }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner-actions .btn { padding: 10px 22px; font-size: 0.85rem; }
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
}