/* ============================================================
   BIOMETALLIX — design system layer
   Overrides / additions on top of Nova template
   ============================================================ */

:root {
  /* Brand palette — replaces Nova defaults */
  --bm-ink:        #0A1F2E;   /* deep navy-black */
  --bm-ink-2:      #12293B;
  --bm-slate:      #4A5B6B;
  --bm-muted:      #7A8B99;
  --bm-line:       #E4E9EE;
  --bm-surface:    #FFFFFF;
  --bm-bg:         #F7F9FB;
  --bm-bg-dark:    #0A1F2E;
  --bm-accent:     #0E7C5A;   /* bio green — deeper, more premium */
  --bm-accent-2:   #2E9E5B;
  --bm-copper:     #B87333;   /* metals accent */

  --bm-font-body:    "Inter", system-ui, sans-serif;
  --bm-font-display: "Montserrat", system-ui, sans-serif;

  --bm-radius:   10px;
  --bm-radius-lg: 16px;

  --bm-shadow-sm: 0 1px 2px rgba(10,31,46,.06), 0 1px 3px rgba(10,31,46,.04);
  --bm-shadow:    0 4px 16px rgba(10,31,46,.06), 0 2px 6px rgba(10,31,46,.04);
  --bm-shadow-lg: 0 20px 50px rgba(10,31,46,.10), 0 8px 20px rgba(10,31,46,.06);
}

/* ---- Re-point Nova tokens at BioMetallix palette ---- */
:root {
  --background-color: var(--bm-bg);
  --default-color:    var(--bm-slate);
  --heading-color:    var(--bm-ink);
  --accent-color:     var(--bm-accent);
  --surface-color:    var(--bm-surface);
  --contrast-color:   #ffffff;

  --nav-color:        rgba(255,255,255,.78);
  --nav-hover-color:  #ffffff;
  --nav-dropdown-color: var(--bm-ink);
  --nav-dropdown-hover-color: var(--bm-accent);
}

body {
  font-family: var(--bm-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bm-slate);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6,
.section-title,
.hero-title {
  font-family: var(--bm-font-display);
  color: var(--bm-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

p { color: var(--bm-slate); }

a { color: var(--bm-accent); }
a:hover { color: var(--bm-accent-2); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bm-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  letter-spacing: .01em;
}
.announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce-bar a:hover { color: var(--bm-accent-2); }
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bm-accent-2);
  box-shadow: 0 0 0 0 rgba(46,158,91,.7);
  animation: pulse 2s infinite;
}
.pulse-dot--green { background: var(--bm-accent-2); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,158,91,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(46,158,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); }
}

/* Shift header below announce bar */
.header.fixed-top { top: 33px; }
.scrolled .header { top: 0; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bm-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin-bottom: 20px;
}
.eyebrow-num {
  font-family: var(--bm-font-display);
  font-weight: 700;
  color: var(--bm-muted);
}
.eyebrow--light { color: #fff; }
.eyebrow--light .eyebrow-num { color: rgba(255,255,255,.5); }

.text-accent { color: var(--bm-accent-2); }

.section-title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  margin-bottom: 16px;
}
.section-subtitle {
  font-size: 17px;
  color: var(--bm-slate);
  max-width: 640px;
  margin: 0 auto;
}
.section-kicker {
  font-weight: 600;
  color: var(--bm-accent);
  margin-bottom: 20px;
}

.section { padding: 110px 0; }
.section--light { background: var(--bm-bg); }
.section--dark  { background: var(--bm-ink); color: #fff; }
.section--dark .section-title { color: #fff; }
.section--dark .section-subtitle { color: rgba(255,255,255,.7); }

.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }

.footnote {
  font-size: 13px;
  color: var(--bm-muted);
  margin-top: 24px;
}
.footnote a { color: var(--bm-muted); text-decoration: underline; }
.footnote a:hover { color: var(--bm-accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bm-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .25s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--bm-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--bm-accent-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--bm-shadow);
}
.btn-primary i { transition: transform .25s ease; }
.btn-primary:hover i { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--bm-ink);
  border-color: var(--bm-line);
}
.btn-ghost:hover {
  border-color: var(--bm-ink);
  color: var(--bm-ink);
  background: rgba(10,31,46,.03);
}
.btn-ghost--light {
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.btn-ghost--light:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255,255,255,.06);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--bm-accent);
  margin-top: 8px;
}
.link-arrow i { transition: transform .25s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 200px 0 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bm-ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,31,46,.92) 0%, rgba(10,31,46,.78) 45%, rgba(10,31,46,.35) 100%),
    linear-gradient(180deg, rgba(10,31,46,.4) 0%, rgba(10,31,46,.6) 100%);
}
.hero-container { position: relative; z-index: 2; }

.hero-title {
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 28px;
  line-height: 1.05;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  padding: 24px 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.trust-bar li { display: flex; align-items: center; gap: 8px; }
.trust-bar i { color: var(--bm-accent-2); font-size: 16px; }

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  z-index: 3;
}
.scroll-cue i { animation: bob 1.8s ease-in-out infinite; }
.scroll-cue:hover { color: #fff; }
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(5px); }
}

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logo-strip {
  background: #fff;
  border-bottom: 1px solid var(--bm-line);
  padding: 40px 0;
}
.logo-strip-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 22px;
}
.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px;
}
.logo-slot {
  font-family: var(--bm-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--bm-muted);
  opacity: .65;
  transition: opacity .25s ease;
}
.logo-slot:hover { opacity: 1; }

/* ============================================================
   WHY-US SWIPER
   ============================================================ */
.why-us { padding: 100px 0 80px; }
.why-us .slides { background: transparent; }
.why-us .swiper { margin: 0 120px; overflow: visible; }
.why-us .swiper-slide {
  width: 520px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 44px 40px;
  box-shadow: var(--bm-shadow-sm);
  opacity: .55;
  transform: scale(.96);
  transition: all .35s ease;
}
.why-us .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--bm-shadow-lg);
}
.why-us .item h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.25;
}
.why-us .item p { color: var(--bm-slate); font-size: 15.5px; }
.why-us .swiper-pagination { margin-top: 40px; position: relative; }
.why-us .swiper-pagination-bullet {
  background: var(--bm-muted);
  opacity: .35;
  width: 8px; height: 8px;
}
.why-us .swiper-pagination-bullet-active {
  background: var(--bm-accent);
  opacity: 1;
  width: 24px;
  border-radius: 4px;
}
.why-us .swiper-button-prev,
.why-us .swiper-button-next {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--bm-line);
  box-shadow: var(--bm-shadow-sm);
  color: var(--bm-ink);
}
.why-us .swiper-button-prev:after,
.why-us .swiper-button-next:after { font-size: 14px; font-weight: 700; }
.why-us .swiper-button-prev { left: 40px; }
.why-us .swiper-button-next { right: 40px; }

/* ============================================================
   RESULTS / STAT GRID
   ============================================================ */
.results-visual {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 24px;
  box-shadow: var(--bm-shadow-sm);
}
.results-visual img { width: 100%; height: auto; border-radius: 8px; display: block; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bm-line);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
}
.stat {
  background: #fff;
  padding: 32px 28px;
}
.stat-value {
  font-family: var(--bm-font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--bm-ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 24px;
  color: var(--bm-accent);
  font-weight: 700;
}
.stat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin: 14px 0 8px;
}
.stat p { font-size: 14px; margin: 0; color: var(--bm-slate); }

/* ============================================================
   CAPABILITY CARDS (Services)
   ============================================================ */
.capability-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .3s ease;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.capability-card--featured {
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 4px rgba(14,124,90,.06);
}
.capability-num {
  font-family: var(--bm-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--bm-muted);
  letter-spacing: .1em;
  margin-bottom: 22px;
}
.capability-icon {
  font-size: 30px;
  color: var(--bm-accent);
  margin-bottom: 22px;
  display: block;
}
.capability-card h4 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.capability-focus {
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.capability-card p:not(.capability-focus) {
  font-size: 15px;
  flex-grow: 1;
  margin-bottom: 20px;
}
.badge-soft {
  position: absolute;
  top: 24px; right: 24px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}

/* ============================================================
   TECH VISUAL
   ============================================================ */
.tech-visual {
  position: relative;
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  box-shadow: var(--bm-shadow-lg);
}
.tech-visual img { width: 100%; display: block; }
.tech-visual-tag {
  position: absolute;
  bottom: 18px; left: 18px;
  background: rgba(10,31,46,.9);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tech-visual-tag i { color: var(--bm-accent-2); }

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--bm-ink);
  font-weight: 500;
}
.feature-list i {
  color: var(--bm-accent);
  font-size: 18px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(14,124,90,.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.process-step {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 32px;
  position: relative;
  transition: all .3s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
}
.process-step-num {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--bm-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--bm-muted);
  letter-spacing: .1em;
}
.process-step-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}
.process-step h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.process-step p { font-size: 15px; margin: 0; }

/* ============================================================
   DARK CARDS (Analytics)
   ============================================================ */
.dark-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bm-radius-lg);
  padding: 36px 32px;
  height: 100%;
  transition: all .3s ease;
}
.dark-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
}
.dark-card i {
  font-size: 30px;
  color: var(--bm-accent-2);
  margin-bottom: 20px;
  display: block;
}
.dark-card h5 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.dark-card p { color: rgba(255,255,255,.68); font-size: 15px; margin: 0; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial-wrap { max-width: 860px; margin: 0 auto; text-align: center; }
.testimonial-quote {
  margin: 0;
  padding: 0;
  border: 0;
}
.testimonial-quote p {
  font-family: var(--bm-font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--bm-ink);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.testimonial-quote footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testimonial-quote footer strong {
  font-family: var(--bm-font-display);
  color: var(--bm-ink);
  font-size: 15px;
}
.testimonial-quote footer span {
  font-size: 14px;
  color: var(--bm-muted);
}

/* ============================================================
   CTA
   ============================================================ */
.section--cta {
  background: var(--bm-bg);
  padding: 0;
}
.cta-inner {
  background: linear-gradient(135deg, var(--bm-ink) 0%, #123A54 100%);
  border-radius: var(--bm-radius-lg);
  padding: 80px 60px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: -80px;
  box-shadow: var(--bm-shadow-lg);
}
.cta-inner::after {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,158,91,.25) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
}
.cta-inner p {
  color: rgba(255,255,255,.78);
  font-size: 17px;
  max-width: 600px;
  margin: 0 auto 36px;
  position: relative;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.cta-actions .btn-primary { background: var(--bm-accent-2); }
.cta-actions .btn-primary:hover { background: #35b56b; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-info { display: flex; flex-direction: column; gap: 28px; margin-top: 20px; }
.info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.info-item > i {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.info-item h6 {
  font-family: var(--bm-font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bm-muted);
  margin: 0 0 6px;
}
.info-item p { margin: 0; font-size: 15px; color: var(--bm-ink); }
.info-item a { color: var(--bm-ink); }
.info-item a:hover { color: var(--bm-accent); }

.contact-form {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px;
  box-shadow: var(--bm-shadow-sm);
}
.contact-form .form-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bm-muted);
  margin-bottom: 8px;
}
.contact-form .form-control {
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--bm-ink);
  background: #fff;
  transition: all .2s ease;
}
.contact-form .form-control:focus {
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 4px rgba(14,124,90,.1);
  outline: none;
}
.contact-form .form-control::placeholder { color: var(--bm-muted); }
.contact-form button[type=submit] { margin-top: 12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bm-ink);
  color: rgba(255,255,255,.7);
  padding: 0;
}
.footer-top { padding: 80px 0 60px; }
.footer h4 {
  color: #fff;
  font-family: var(--bm-font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 22px;
  padding-bottom: 0;
}
.footer h4::before { display: none; }
.footer-about p { color: rgba(255,255,255,.65); font-size: 14.5px; line-height: 1.7; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links ul li { padding: 7px 0; }
.footer-links ul a {
  color: rgba(255,255,255,.65);
  font-size: 14.5px;
  transition: color .2s ease;
}
.footer-links ul a:hover { color: #fff; }
.footer-contact p { color: rgba(255,255,255,.65); font-size: 14.5px; margin-bottom: 6px; }
.footer-contact a { color: rgba(255,255,255,.65); }
.footer-contact a:hover { color: var(--bm-accent-2); }

.footer .social-links a {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  width: 38px; height: 38px;
  border-radius: 10px;
  margin-right: 8px;
  font-size: 15px;
  transition: all .25s ease;
}
.footer .social-links a:hover {
  background: var(--bm-accent);
  color: #fff;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.footer-bottom strong { color: rgba(255,255,255,.8); font-weight: 600; }
.footer-legal {
  list-style: none;
  display: flex;
  gap: 24px;
  padding: 0;
  margin: 0;
}
.footer-legal a {
  color: rgba(255,255,255,.5);
  font-size: 13px;
}
.footer-legal a:hover { color: #fff; }

/* ============================================================
   NAV CTA
   ============================================================ */
.navmenu .nav-cta {
  background: var(--bm-accent);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 18px !important;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px !important;
  transition: all .25s ease;
}
.navmenu .nav-cta:hover {
  background: var(--bm-accent-2);
  transform: translateY(-1px);
}
.navmenu .nav-cta i { font-size: 13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .header.fixed-top { top: 30px; }
  .scrolled .header { top: 0; }
  .why-us .swiper { margin: 0 40px; }
  .why-us .swiper-button-prev, .why-us .swiper-button-next { display: none; }
  .why-us .swiper-slide { width: 460px; }
}

@media (max-width: 991px) {
  .section { padding: 80px 0; }
  .hero { padding: 160px 0 100px; }
  .cta-inner { padding: 60px 32px; margin-bottom: -60px; }
  .stat-grid { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: 1fr; }
  .why-us .swiper { margin: 0 20px; }
  .why-us .swiper-slide { width: 88vw; padding: 36px 28px; }
}

@media (max-width: 575px) {
  .announce-bar { font-size: 11.5px; padding: 6px 12px; }
  .hero-title { font-size: 34px; }
  .hero-lead { font-size: 16px; }
  .trust-bar { gap: 16px; font-size: 12px; }
  .cta-inner { padding: 48px 24px; }
  .contact-form { padding: 28px 22px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
  .navmenu .nav-cta { display: none; }
}
/* ============================================================
   BIOMETALLIX — Technologies page components
   ============================================================ */

/* ---- Page Hero (reusable across inner pages) ---- */
.page-hero {
  position: relative;
  padding: 200px 0 110px;
  background:
    linear-gradient(90deg, rgba(10,31,46,.96) 0%, rgba(10,31,46,.82) 50%, rgba(10,31,46,.55) 100%),
    radial-gradient(circle at 80% 30%, rgba(46,158,91,.18) 0%, transparent 55%),
    var(--bm-ink);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 30% 50%, black 20%, transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 32px;
}
.page-breadcrumb a { color: rgba(255,255,255,.55); }
.page-breadcrumb a:hover { color: #fff; }
.page-breadcrumb i { font-size: 10px; opacity: .5; }
.page-breadcrumb span { color: rgba(255,255,255,.9); }

.page-hero-title {
  font-size: clamp(34px, 4.8vw, 68px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.page-hero-lead {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  max-width: 620px;
  margin-bottom: 40px;
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================================
   PILLARS (3-layer overview)
   ============================================================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar-block {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 44px 36px;
  position: relative;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.pillar-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.pillar-block-num {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
.pillar-block-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 26px;
}
.pillar-block h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.pillar-block-kicker {
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.pillar-block > p:not(.pillar-block-kicker) {
  font-size: 15px;
  color: var(--bm-slate);
  flex-grow: 1;
  margin-bottom: 22px;
}
.pillar-list {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  border-top: 1px solid var(--bm-line);
}
.pillar-list li {
  font-size: 13.5px;
  color: var(--bm-ink);
  font-weight: 500;
  padding: 6px 0 6px 22px;
  position: relative;
}
.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px; height: 2px;
  background: var(--bm-accent);
}

/* ============================================================
   SPEC TABLE
   ============================================================ */
.spec-table-wrap {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 8px 32px;
  box-shadow: var(--bm-shadow-sm);
}
.spec-caption {
  caption-side: top;
  text-align: left;
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  padding: 24px 0 12px;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table tr { border-bottom: 1px solid var(--bm-line); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th,
.spec-table td {
  padding: 14px 0;
  font-size: 14.5px;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  font-weight: 500;
  color: var(--bm-slate);
}
.spec-table td {
  text-align: right;
  color: var(--bm-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   HARDWARE CARDS
   ============================================================ */
.hardware-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 32px 26px;
  height: 100%;
  transition: all .3s ease;
}
.hardware-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow);
  border-color: var(--bm-accent);
}
.hardware-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.hardware-card h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.hardware-card p {
  font-size: 14px;
  margin: 0;
  color: var(--bm-slate);
}

/* ============================================================
   SPEC GRID (8-cell grid)
   ============================================================ */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bm-line);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
}
.spec-cell {
  background: #fff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
.spec-value {
  font-family: var(--bm-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--bm-ink);
  line-height: 1.35;
}

/* ============================================================
   ANALYTICS FEATURE LIST (dark section)
   ============================================================ */
.analytics-feature {
  display: flex;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.analytics-feature:last-child { border-bottom: 0; }
.analytics-feature > i {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(46,158,91,.14);
  color: var(--bm-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.analytics-feature h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.analytics-feature p {
  color: rgba(255,255,255,.65);
  font-size: 14.5px;
  margin: 0;
}

/* ============================================================
   PROCESS FLOW (4 stages, horizontal with connector)
  ============================================================ */
.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.process-stage {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 28px;
  position: relative;
  transition: all .3s ease;
}
.process-stage:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
}
.process-stage-num {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  display: block;
  margin-bottom: 20px;
}
.process-stage-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
}
.process-stage h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.process-stage p {
  font-size: 14px;
  margin: 0;
  color: var(--bm-slate);
}

/* ============================================================
   COMPARISON TABLE
  ============================================================ */
.compare-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.compare-table thead th {
  background: var(--bm-ink);
  color: #fff;
  font-family: var(--bm-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 20px 24px;
  text-align: left;
}
.compare-table thead .compare-col-primary {
  background: var(--bm-accent);
}
.compare-table tbody td {
  padding: 18px 24px;
  font-size: 14.5px;
  color: var(--bm-slate);
  border-bottom: 1px solid var(--bm-line);
  vertical-align: middle;
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody td:first-child {
  font-weight: 500;
  color: var(--bm-ink);
}
.compare-table tbody .compare-col-primary {
  background: rgba(14,124,90,.05);
  color: var(--bm-ink);
}
.compare-table tbody .compare-col-primary strong {
  color: var(--bm-accent);
  font-weight: 700;
}

/* ============================================================
   IP CARDS
  ============================================================ */
.ip-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 36px 32px;
  height: 100%;
  transition: all .3s ease;
}
.ip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
}
.ip-card-num {
  font-family: var(--bm-font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--bm-accent);
  line-height: 1;
  display: block;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}
.ip-card h5 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.ip-card p {
  font-size: 14.5px;
  margin: 0;
  color: var(--bm-slate);
}

/* ============================================================
   ROADMAP (vertical timeline)
  ============================================================ */
.roadmap {
  margin-top: 64px;
  padding-left: 12px;
  position: relative;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--bm-line);
}
.roadmap-item {
  display: flex;
  gap: 28px;
  padding: 22px 0;
  position: relative;
}
.roadmap-dot {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bm-line);
  position: relative;
  z-index: 1;
  margin-top: 6px;
  margin-left: 12px;
}
.roadmap-item--done .roadmap-dot {
  background: var(--bm-accent);
  border-color: var(--bm-accent);
}
.roadmap-item--active .roadmap-dot {
  background: #fff;
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 4px rgba(14,124,90,.15);
}
.roadmap-date {
  font-family: var(--bm-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 6px;
}
.roadmap-item h6 {
  font-family: var(--bm-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 6px;
}
.roadmap-item p {
  font-size: 14.5px;
  color: var(--bm-slate);
  margin: 0;
  max-width: 560px;
}

/* ============================================================
   DOWNLOADS
   ============================================================ */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.download-card {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 28px 30px;
  transition: all .3s ease;
  text-decoration: none;
  color: inherit;
}
.download-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.download-icon {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.download-card > div:nth-child(2) { flex-grow: 1; }
.download-card h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--bm-ink);
  transition: color .25s ease;
}
.download-card:hover h5 { color: var(--bm-accent); }
.download-card p {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--bm-slate);
}
.download-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
.download-arrow {
  font-size: 26px;
  color: var(--bm-muted);
  transition: all .25s ease;
}
.download-card:hover .download-arrow {
  color: var(--bm-accent);
  transform: translateX(4px);
}

/* ============================================================
   RESPONSIVE
  ============================================================ */
@media (max-width: 1199px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .page-hero { padding: 150px 0 80px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: repeat(2, 1fr); }
  .downloads-grid { grid-template-columns: 1fr; }
  .spec-table-wrap { padding: 8px 22px; }
}

@media (max-width: 640px) {
  .spec-grid { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: 1fr; }
  .spec-table td { text-align: left; display: block; padding-top: 0; }
  .spec-table th { padding-bottom: 4px; }
  .spec-table tr { padding: 12px 0; display: block; }
  .compare-table thead th,
  .compare-table tbody td { padding: 14px 16px; font-size: 13.5px; }
  .roadmap-item { gap: 20px; }
}
/* ============================================================
   BIOMETALLIX — Services page components
   ============================================================ */

/* ============================================================
   SERVICE TIERS (three-card model)
   ============================================================ */
.service-tier {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 44px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .3s ease;
}
.service-tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.service-tier--featured {
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 4px rgba(14,124,90,.06);
}
.service-tier-label {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  display: block;
  margin-bottom: 14px;
}
.service-tier h3 {
  font-size: 32px;
  font-weight: 800;
  color: var(--bm-ink);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.service-tier-kicker {
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 22px;
}
.service-tier-desc {
  font-size: 15px;
  color: var(--bm-slate);
  margin-bottom: 26px;
  flex-grow: 0;
}
.service-tier-list {
  list-style: none;
  padding: 24px 0;
  margin: 0 0 24px 0;
  border-top: 1px solid var(--bm-line);
  border-bottom: 1px solid var(--bm-line);
  flex-grow: 1;
}
.service-tier-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--bm-slate);
}
.service-tier-list li::before {
  content: "✓";
  color: var(--bm-accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.55;
}
.service-tier-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
}
.service-tier-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bm-muted);
  font-weight: 500;
}
.service-tier-meta-item i { color: var(--bm-accent); }
.service-tier-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bm-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bm-accent);
  margin-top: auto;
}
.service-tier-cta i { transition: transform .25s ease; }
.service-tier-cta:hover i { transform: translateX(4px); }

.badge-soft--featured {
  background: var(--bm-accent);
  color: #fff;
}

/* ============================================================
   DELIVERABLES CARD (side panel on Service 01)
   ============================================================ */
.deliverables-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 36px;
  box-shadow: var(--bm-shadow-sm);
}
.deliverables-label {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  display: block;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bm-line);
}
.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deliverables-list li {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bm-line);
}
.deliverables-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.deliverables-list li:first-child { padding-top: 0; }
.deliverables-list > li > i {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.deliverables-list strong {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 4px;
}
.deliverables-list p {
  font-size: 13.5px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   CONSULTING PILLARS
   ============================================================ */
.consulting-pillars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
}
.consulting-pillar {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--bm-line);
}
.consulting-pillar:last-child { border-bottom: 0; }
.consulting-pillar > i {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.consulting-pillar h6 {
  font-family: var(--bm-font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 6px;
}
.consulting-pillar p {
  font-size: 14px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   CONSULTING VISUAL
   ============================================================ */
.consulting-visual {
  position: relative;
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  box-shadow: var(--bm-shadow-lg);
}
.consulting-visual img {
  width: 100%;
  display: block;
}
.consulting-visual-badge {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  background: rgba(10,31,46,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  padding: 18px 22px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.consulting-visual-badge i {
  font-size: 22px;
  color: var(--bm-accent-2);
}
.consulting-visual-badge strong {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.consulting-visual-badge span {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}

/* ============================================================
   PRICING TABLE
   ============================================================ */
.pricing-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.pricing-table thead th {
  background: var(--bm-ink);
  color: #fff;
  font-family: var(--bm-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 20px 24px;
  text-align: left;
}
.pricing-table tbody td {
  padding: 22px 24px;
  font-size: 14.5px;
  color: var(--bm-slate);
  border-bottom: 1px solid var(--bm-line);
  vertical-align: top;
}
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody td strong {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 4px;
}
.pricing-sub {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-accent);
}

/* ============================================================
   DELIVERY TIMELINE (horizontal)
   ============================================================ */
.delivery-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  position: relative;
  padding-top: 30px;
}
.delivery-timeline::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 37px;
  height: 2px;
  background: var(--bm-line);
  z-index: 0;
}
.delivery-step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.delivery-step-num {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin-bottom: 16px;
  min-height: 32px;
}
.delivery-step-marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bm-line);
  margin: 0 auto 22px;
  position: relative;
}
.delivery-step--final .delivery-step-marker {
  background: var(--bm-accent);
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 6px rgba(14,124,90,.15);
}
.delivery-step h5 {
  font-family: var(--bm-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 10px;
  line-height: 1.3;
}
.delivery-step p {
  font-size: 12.5px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   FAQ — native <details> accordion
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--bm-line);
}
.faq-item:first-child { border-top: 1px solid var(--bm-line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--bm-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--bm-ink);
  list-style: none;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--bm-accent); }
.faq-item summary i {
  font-size: 18px;
  color: var(--bm-muted);
  transition: transform .3s ease, color .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary {
  color: var(--bm-accent);
}
.faq-item[open] summary i {
  transform: rotate(45deg);
  color: var(--bm-accent);
}
.faq-body {
  padding: 0 0 28px 0;
  max-width: 92%;
}
.faq-body p {
  font-size: 15px;
  color: var(--bm-slate);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .delivery-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 44px;
  }
  .delivery-timeline::before { display: none; }
  .delivery-step-num { min-height: auto; }
}

@media (max-width: 991px) {
  .service-tier { padding: 36px 28px; }
  .service-tier h3 { font-size: 26px; }
  .deliverables-card { padding: 32px 26px; }
  .consulting-visual { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .delivery-timeline { grid-template-columns: 1fr; }
  .pricing-table thead th,
  .pricing-table tbody td { padding: 16px 18px; font-size: 13.5px; }
  .faq-item summary { font-size: 15px; padding: 20px 0; }
}
/* ============================================================
   BIOMETALLIX — Impact page components
   ============================================================ */

/* ============================================================
   IMPACT PILLARS (3-axis thesis)
   ============================================================ */
.impact-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.impact-pillar {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 44px 36px;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.impact-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.impact-pillar-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 26px;
}
.impact-pillar-label {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-muted);
  display: block;
  margin-bottom: 10px;
}
.impact-pillar h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.impact-pillar p {
  font-size: 15px;
  color: var(--bm-slate);
  flex-grow: 1;
  margin-bottom: 20px;
}

/* ============================================================
   IMPACT STAT BLOCK (carbon section)
   ============================================================ */
.impact-stat-block {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 12px 40px 32px;
  box-shadow: var(--bm-shadow-sm);
}
.impact-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.impact-stat-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--bm-line);
}
.impact-stat-item:nth-child(-n+2) { padding-top: 40px; }
.impact-stat-item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.impact-stat-item:nth-child(odd) { padding-right: 24px; }
.impact-stat-item:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--bm-line); }

.impact-stat-value {
  font-family: var(--bm-font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--bm-ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.impact-stat-unit {
  font-size: 22px;
  color: var(--bm-accent);
  margin-left: 2px;
  font-weight: 700;
}
.impact-stat-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-muted);
  line-height: 1.5;
}

/* ============================================================
   CARBON COMPARE (bar chart)
   ============================================================ */
.carbon-compare {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 36px;
  box-shadow: var(--bm-shadow-sm);
}
.carbon-compare-row {
  margin-bottom: 24px;
}
.carbon-compare-row:last-of-type { margin-bottom: 32px; }
.carbon-compare-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-ink);
  margin-bottom: 10px;
}
.carbon-bar-wrap {
  background: rgba(10,31,46,.05);
  border-radius: 8px;
  height: 44px;
  position: relative;
  overflow: hidden;
}
.carbon-bar {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  transition: width .8s ease;
}
.carbon-bar span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.carbon-bar--bm {
  background: linear-gradient(90deg, var(--bm-accent), var(--bm-accent-2));
}
.carbon-bar--chem {
  background: linear-gradient(90deg, #B87333, #D49555);
}
.carbon-bar--pyro {
  background: linear-gradient(90deg, #7A3B2E, #A55545);
}
.carbon-compare-note {
  font-size: 12.5px;
  color: var(--bm-muted);
  margin: 0;
  line-height: 1.6;
  padding-top: 20px;
  border-top: 1px solid var(--bm-line);
}

/* ============================================================
   CIRCULAR GRID (4-step)
   ============================================================ */
.circular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.circular-grid::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 68px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--bm-line) 15%,
    var(--bm-line) 85%,
    transparent 100%);
  z-index: 0;
}
.circular-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.circular-num {
  display: inline-block;
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bm-muted);
  margin-bottom: 14px;
}
.circular-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bm-accent);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 24px;
  position: relative;
}
.circular-step h5 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.circular-step p {
  font-size: 13.5px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   IMPACT STRIP (4-stat band)
   ============================================================ */
.impact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bm-line);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  margin-top: 56px;
}
.impact-strip-item {
  background: #fff;
  padding: 32px 26px;
  text-align: center;
}
.impact-strip-value {
  font-family: var(--bm-font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--bm-ink);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.impact-strip-unit {
  color: var(--bm-accent);
  font-size: 20px;
  margin-left: 2px;
}
.impact-strip-label {
  display: block;
  font-size: 13px;
  color: var(--bm-muted);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   WATER GRID
   ============================================================ */
.water-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.water-cell {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 32px 28px;
  transition: all .3s ease;
}
.water-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow);
}
.water-cell > i {
  font-size: 24px;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 20px;
}
.water-value {
  font-family: var(--bm-font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--bm-ink);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.water-unit {
  color: var(--bm-accent);
  font-size: 20px;
  margin-left: 2px;
}
.water-label {
  display: block;
  font-size: 13px;
  color: var(--bm-muted);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   SDG GRID
   ============================================================ */
.sdg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sdg-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 32px 28px;
  transition: all .3s ease;
}
.sdg-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.sdg-badge {
  width: 52px; height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.sdg-badge--7  { background: #FCC30B; color: #2b1800; }
.sdg-badge--8  { background: #A21942; color: #fff; }
.sdg-badge--9  { background: #FD6925; color: #fff; }
.sdg-badge--11 { background: #FD9D24; color: #fff; }
.sdg-badge--12 { background: #BF8B2E; color: #fff; }
.sdg-badge--13 { background: #3F7E44; color: #fff; }
.sdg-num {
  font-family: var(--bm-font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sdg-card h5 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.35;
}
.sdg-card p {
  font-size: 13.5px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   VERIFICATION FEATURES (dark section)
   ============================================================ */
.verification-feature {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.verification-feature:last-child { border-bottom: 0; }
.verification-feature > i {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(46,158,91,.14);
  color: var(--bm-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.verification-feature h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.verification-feature p {
  color: rgba(255,255,255,.65);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   STAKEHOLDER GRID
   ============================================================ */
.stakeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stakeholder-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 34px 28px;
  transition: all .3s ease;
}
.stakeholder-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.stakeholder-card > i {
  font-size: 26px;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 22px;
}
.stakeholder-card h5 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.stakeholder-card p {
  font-size: 14px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   COMMITMENTS (vertical list with year labels)
   ============================================================ */
.commitments {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--bm-line);
}
.commitment {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--bm-line);
  align-items: start;
}
.commitment-year {
  font-family: var(--bm-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-accent);
  padding-top: 4px;
}
.commitment h5 {
  font-family: var(--bm-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 8px;
  line-height: 1.35;
}
.commitment p {
  font-size: 15px;
  color: var(--bm-slate);
  margin: 0;
}

/* ============================================================
   RESPONSIVE
  ============================================================ */
@media (max-width: 1199px) {
  .impact-pillars { grid-template-columns: 1fr; }
  .circular-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .circular-grid::before { display: none; }
  .impact-strip { grid-template-columns: repeat(2, 1fr); }
  .sdg-grid { grid-template-columns: repeat(2, 1fr); }
  .stakeholder-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .impact-stat-row { grid-template-columns: 1fr; }
  .impact-stat-item {
    padding: 24px 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--bm-line) !important;
  }
  .impact-stat-item:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
  .impact-stat-item:first-child { padding-top: 40px !important; }
  .commitment {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
}

@media (max-width: 640px) {
  .circular-grid { grid-template-columns: 1fr; }
  .impact-strip { grid-template-columns: 1fr; }
  .sdg-grid { grid-template-columns: 1fr; }
  .stakeholder-grid { grid-template-columns: 1fr; }
  .water-grid { grid-template-columns: 1fr; }
  .impact-stat-value { font-size: 36px; }
  .impact-strip-value,
  .water-value { font-size: 32px; }
  .carbon-compare { padding: 28px 22px; }
  .carbon-bar { padding: 0 12px; }
  .carbon-bar span { font-size: 12px; }
}
/* ============================================================
   BIOMETALLIX — Company page components
   ============================================================ */

/* ============================================================
   MISSION STATEMENT
   ============================================================ */
.mission-statement {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 48px 44px;
  box-shadow: var(--bm-shadow-sm);
  position: relative;
}
.mission-statement::before {
  content: "";
  position: absolute;
  left: 0; top: 40px;
  width: 3px;
  height: 60px;
  background: var(--bm-accent);
  border-radius: 2px;
}
.mission-quote {
  font-family: var(--bm-font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--bm-ink);
  margin: 0 0 32px;
}
.mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--bm-line);
}
.mission-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--bm-slate);
  font-weight: 500;
}
.mission-meta-item i {
  color: var(--bm-accent);
  font-size: 16px;
}

/* ============================================================
   MILESTONE TIMELINE (vertical)
   ============================================================ */
.milestone-timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 8px;
}
.milestone-timeline::before {
  content: "";
  position: absolute;
  left: 140px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--bm-line);
}
.milestone {
  display: grid;
  grid-template-columns: 120px 24px 1fr;
  gap: 24px;
  padding: 22px 0;
  align-items: flex-start;
  position: relative;
}
.milestone-year {
  font-family: var(--bm-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-ink);
  text-align: right;
  padding-top: 4px;
}
.milestone-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bm-line);
  margin-top: 6px;
  position: relative;
  z-index: 1;
  justify-self: center;
}
.milestone-dot--accent {
  background: var(--bm-accent);
  border-color: var(--bm-accent);
}
.milestone-dot--active {
  background: #fff;
  border-color: var(--bm-accent);
  box-shadow: 0 0 0 5px rgba(14,124,90,.15);
}
.milestone-dot--future {
  background: #fff;
  border-style: dashed;
  border-color: var(--bm-muted);
}
.milestone-body h5 {
  font-family: var(--bm-font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--bm-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.milestone-body p {
  font-size: 15px;
  color: var(--bm-slate);
  margin: 0;
  line-height: 1.65;
  max-width: 620px;
}
.milestone--future .milestone-body h5 { color: var(--bm-muted); }
.milestone--future .milestone-body p { color: var(--bm-muted); }
.milestone-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bm-accent);
  background: rgba(14,124,90,.08);
  padding: 3px 8px;
  border-radius: 4px;
}

/* ============================================================
   TEAM GRID
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-member {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.team-member:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.team-member-image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--bm-bg) 0%, #E8EDF2 100%);
  overflow: hidden;
  position: relative;
}
.team-member-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(10,31,46,.05) 100%),
    repeating-linear-gradient(45deg,
      rgba(10,31,46,.015) 0 20px,
      transparent 20px 40px);
}
.team-member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-member-body {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.team-member h4 {
  font-family: var(--bm-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 4px;
}
.team-member-role {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bm-accent);
  margin-bottom: 16px;
}
.team-member p {
  font-size: 13.5px;
  color: var(--bm-slate);
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}
.team-member-links {
  display: flex;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--bm-line);
}
.team-member-links a {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bm-bg);
  color: var(--bm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .25s ease;
}
.team-member-links a:hover {
  background: var(--bm-accent);
  color: #fff;
}

/* ============================================================
   ADVISOR CARDS
   ============================================================ */
.advisors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.advisor-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: all .3s ease;
}
.advisor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.advisor-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(14,124,90,.12) 0%, rgba(46,158,91,.06) 100%);
  border: 1px solid rgba(14,124,90,.15);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.advisor-initials {
  font-family: var(--bm-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.advisor-card h5 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--bm-ink);
}
.advisor-role {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--bm-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}
.advisor-card p {
  font-size: 13px;
  color: var(--bm-slate);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   INVESTOR GRID
   ============================================================ */
.investor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--bm-line);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
}
.investor-slot {
  background: #fff;
  padding: 40px 20px;
  text-align: center;
  font-family: var(--bm-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-muted);
  opacity: .7;
  transition: all .25s ease;
}
.investor-slot:hover {
  opacity: 1;
  color: var(--bm-ink);
}

/* ============================================================
   CAREERS VALUES (dark section)
   ============================================================ */
.careers-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.careers-value {
  display: flex;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.careers-value:last-child { border-bottom: 0; }
.careers-value > i {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(46,158,91,.14);
  color: var(--bm-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.careers-value h6 {
  font-family: var(--bm-font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}
.careers-value p {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   OPEN ROLES (dark section)
   ============================================================ */
.open-roles {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
}
.open-roles-head {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.open-roles-head h4 {
  font-family: var(--bm-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: .02em;
}
.open-roles-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
  padding: 4px 12px;
  border-radius: 999px;
}
.role-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease;
  text-decoration: none;
}
.role-row:last-child { border-bottom: 0; }
.role-row:hover { background: rgba(255,255,255,.04); }
.role-row h5 {
  font-family: var(--bm-font-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  transition: color .25s ease;
}
.role-row:hover h5 { color: var(--bm-accent-2); }
.role-meta {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.role-row > i {
  color: rgba(255,255,255,.4);
  font-size: 20px;
  transition: all .25s ease;
  flex-shrink: 0;
}
.role-row:hover > i {
  color: var(--bm-accent-2);
  transform: translateX(4px);
}

/* ============================================================
   PRESS KIT
   ============================================================ */
.press-kit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.press-kit-item {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 24px 28px;
  transition: all .3s ease;
  text-decoration: none;
  color: inherit;
}
.press-kit-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.press-kit-icon {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.press-kit-item > div:nth-child(2) { flex-grow: 1; }
.press-kit-item h5 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--bm-ink);
  transition: color .25s ease;
}
.press-kit-item:hover h5 { color: var(--bm-accent); }
.press-kit-item p {
  font-size: 13.5px;
  margin: 0 0 6px;
  color: var(--bm-slate);
}
.press-kit-meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bm-muted);
}
.press-kit-arrow {
  font-size: 22px;
  color: var(--bm-muted);
  transition: all .25s ease;
  flex-shrink: 0;
}
.press-kit-item:hover .press-kit-arrow {
  color: var(--bm-accent);
  transform: translateX(3px);
}

/* ============================================================
   OFFICE CARDS
   ============================================================ */
.office-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .3s ease;
}
.office-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
}
.office-card-map {
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(135deg, var(--bm-ink) 0%, #123A54 100%),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,.02) 40px 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-accent-2);
  font-size: 42px;
  position: relative;
}
.office-card-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}
.office-card--alt .office-card-map {
  background: linear-gradient(135deg, #E8EDF2 0%, #F7F9FB 100%);
  color: var(--bm-accent);
}
.office-card-body {
  padding: 32px 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.office-card-label {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 12px;
}
.office-card h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--bm-ink);
}
.office-card p {
  font-size: 14.5px;
  color: var(--bm-slate);
  line-height: 1.7;
  margin-bottom: 22px;
  flex-grow: 1;
}
.office-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--bm-accent);
}
.office-card-link i { transition: transform .25s ease; }
.office-card-link:hover i { transform: translateX(3px); }
.office-card-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bm-muted);
  font-weight: 500;
}
.office-card-note i { color: var(--bm-muted); }

/* ============================================================
   COMPANY CTA STRIP
   ============================================================ */
.company-cta-strip {
  margin-top: 64px;
  padding: 40px 48px;
  background: var(--bm-ink);
  border-radius: var(--bm-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.company-cta-strip::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(46,158,91,.18) 0%, transparent 65%);
  pointer-events: none;
}
.company-cta-content { position: relative; }
.company-cta-content h4 {
  font-family: var(--bm-font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.company-cta-content p {
  font-size: 14.5px;
  color: rgba(255,255,255,.65);
  margin: 0;
  max-width: 480px;
}
.company-cta-actions {
  position: relative;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .advisors-grid { grid-template-columns: repeat(2, 1fr); }
  .investor-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .mission-statement { padding: 36px 28px; }
  .milestone-timeline::before { left: 100px; }
  .milestone { grid-template-columns: 80px 20px 1fr; gap: 18px; }
  .milestone-year { font-size: 13px; }
  .company-cta-strip {
    padding: 32px 28px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .advisors-grid { grid-template-columns: 1fr; }
  .investor-grid { grid-template-columns: 1fr; }
  .milestone-timeline { padding-left: 0; }
  .milestone-timeline::before { left: 12px; }
  .milestone {
    grid-template-columns: 24px 1fr;
    gap: 16px;
  }
  .milestone-year {
    grid-column: 2;
    text-align: left;
    padding: 0 0 6px;
    margin-bottom: -4px;
  }
  .milestone-dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 2px;
  }
  .milestone-body { grid-column: 2; }
  .press-kit-item { padding: 20px 22px; gap: 16px; }
  .press-kit-icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; }
  .role-row { padding: 22px 22px; gap: 16px; }
  .role-row h5 { font-size: 15px; }
  .company-cta-strip { padding: 28px 24px; }
  .company-cta-content h4 { font-size: 19px; }
}
/* ============================================================
   BIOMETALLIX — Contact page components
   ============================================================ */

/* ---- Hero variant: slightly taller to accommodate quick nav ---- */
.contact-hero { padding-bottom: 130px; }

/* ============================================================
   QUICK NAV (hero anchors)
   ============================================================ */
.contact-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.contact-quick-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 500;
  transition: all .25s ease;
  text-decoration: none;
}
.contact-quick-nav-item i {
  font-size: 15px;
  color: var(--bm-accent-2);
}
.contact-quick-nav-item:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
   ROUTE SELECTOR (4 cards)
   ============================================================ */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.route-card {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.route-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
  border-color: transparent;
}
.route-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: all .3s ease;
}
.route-card:hover .route-icon {
  background: var(--bm-accent);
  color: #fff;
}
.route-label {
  font-family: var(--bm-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 10px;
}
.route-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.route-card p {
  font-size: 14.5px;
  color: var(--bm-slate);
  line-height: 1.65;
  margin: 0 0 24px;
  flex-grow: 1;
}
.route-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bm-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--bm-accent);
  padding-top: 20px;
  border-top: 1px solid var(--bm-line);
}
.route-cta i { transition: transform .25s ease; }
.route-card:hover .route-cta i { transform: translateX(4px); }

/* ============================================================
   RESPONSE PROMISE (sidebar of form)
   ============================================================ */
.response-promise {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 36px;
}
.response-promise-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bm-line);
}
.response-promise-item:last-child { border-bottom: 0; }
.response-promise-item > i {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(14,124,90,.08);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.response-promise-item strong {
  display: block;
  font-family: var(--bm-font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 4px;
}
.response-promise-item span {
  font-size: 13px;
  color: var(--bm-muted);
}

/* ============================================================
   LARGE FORM VARIANT
   ============================================================ */
.contact-form--large {
  padding: 48px 44px;
}
.contact-form select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237A8B99' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10L8 11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--bm-slate);
  line-height: 1.55;
  cursor: pointer;
  padding: 6px 0 4px;
}
.form-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--bm-accent);
  cursor: pointer;
}

/* ============================================================
   DIRECT LINES (department emails)
   ============================================================ */
.direct-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.direct-line {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 32px 28px;
  transition: all .3s ease;
}
.direct-line:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow);
  border-color: var(--bm-accent);
}
.direct-line > i {
  font-size: 24px;
  color: var(--bm-accent);
  display: block;
  margin-bottom: 20px;
}
.direct-line h5 {
  font-family: var(--bm-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 8px;
}
.direct-line p {
  font-size: 13.5px;
  color: var(--bm-slate);
  margin: 0 0 16px;
  line-height: 1.55;
}
.direct-line a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-accent);
  padding-top: 14px;
  border-top: 1px solid var(--bm-line);
  width: 100%;
}
.direct-line a:hover { color: var(--bm-accent-2); }

/* ============================================================
   OFFICE CARD — extended details
   ============================================================ */
.office-card-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--bm-slate);
  border-top: 1px solid var(--bm-line);
}
.office-card-detail:first-of-type { border-top: 0; padding-top: 0; }
.office-card-detail i {
  color: var(--bm-accent);
  font-size: 15px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.office-card-detail a {
  color: var(--bm-ink);
  font-weight: 500;
}
.office-card-detail a:hover { color: var(--bm-accent); }

/* ============================================================
   RESPONSE COMMITMENT FLOW (3 steps)
  ============================================================ */
.commitment-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.commitment-flow::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 44px;
  height: 2px;
  background: var(--bm-line);
  z-index: 0;
}
.commitment-flow-step {
  background: #fff;
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}
.commitment-flow-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--bm-shadow-lg);
}
.commitment-flow-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bm-accent);
  color: var(--bm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bm-font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 auto 24px;
}
.commitment-flow-step h5 {
  font-family: var(--bm-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: 10px;
}
.commitment-flow-step p {
  font-size: 14px;
  color: var(--bm-slate);
  margin: 0 0 20px;
  line-height: 1.6;
}
.commitment-flow-time {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bm-accent);
  background: rgba(14,124,90,.08);
  padding: 5px 12px;
  border-radius: 999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .route-grid { grid-template-columns: 1fr; }
  .direct-lines { grid-template-columns: repeat(2, 1fr); }
  .commitment-flow { grid-template-columns: 1fr; }
  .commitment-flow::before { display: none; }
  .contact-form--large { padding: 36px 28px; }
  .contact-quick-nav { gap: 8px; }
  .contact-quick-nav-item { padding: 8px 14px; font-size: 12.5px; }
}

@media (max-width: 640px) {
  .direct-lines { grid-template-columns: 1fr; }
  .contact-hero { padding-bottom: 90px; }
  .route-card { padding: 32px 26px; }
  .route-card h3 { font-size: 19px; }
  .contact-form--large { padding: 28px 22px; }
  .response-promise { margin-top: 24px; }
  .office-card-detail { font-size: 13.5px; }
  .commitment-flow-step { padding: 32px 24px; }
}