/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --color-primary: #455A64;    /* slate blue gray */
  --color-accent: #0077C8;     /* corporate blue */
  --color-highlight: #39B86A;  /* pharma green: use dark text on it, never white */
  --color-surface: #D8E0E6;    /* soft blue gray */
  --color-bg: #FFFFFF;

  /* Derived for dark areas (hero, dark bands) */
  --color-dark: #263238;

  /* Text */
  --color-text: #1f2937;
  --color-muted: #4b5563;
  --color-hero-bg: var(--color-dark);
  --color-hero-text: #FFFFFF;

  /* Type */
  --font-stack: "Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --line-height: 1.5;

  /* Spacing (8px scale) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  --max-width: 1100px;
}

/* ---------- Reset and base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  font-family: var(--font-stack);
  line-height: var(--line-height);
  font-variant-numeric: lining-nums;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
}

.btn--highlight {
  background: var(--color-highlight);
  color: var(--color-dark);
}

.btn--highlight:hover {
  filter: brightness(1.1);
}

/* ---------- Header ---------- */
#header {
  background: var(--color-bg);
  border-bottom: 4px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-1);
}

.logo img {
  display: block;
  height: 56px;
  width: auto;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.nav a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 3px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.nav a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .logo img {
    height: 72px;
  }
}

/* ---------- Hero ---------- */
#hero {
  background: var(--color-hero-bg);
  color: var(--color-hero-text);
  padding-block: calc(var(--space-4) * 2);
  border-bottom: 6px solid var(--color-highlight);
}

.hero__inner h1 {
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 5vw, 3.5rem);
  max-width: 18ch;
}

.hero__sub {
  font-size: 1.25rem;
  margin-block: var(--space-3);
  max-width: 50ch;
}

#hero .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.section { padding-block: calc(var(--space-4) * 2); }
.section__label { color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); }
.problem__inner { display: grid; gap: var(--space-4); }
.problem__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--color-primary); }
.problem__body { border-left: 6px solid var(--color-highlight); padding-left: var(--space-3); max-width: 60ch; }
.problem__body p + p { margin-top: var(--space-2); }
@media (min-width: 900px) { .problem__inner { grid-template-columns: 1fr 1fr; align-items: start; } }
.section--surface { background: var(--color-surface); }
.section--surface .section__label { color: var(--color-primary); }
.solution__inner { display: grid; gap: var(--space-4); }
.solution__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--color-primary); max-width: 24ch; }
.solution__body { max-width: 65ch; }
.solution__body p + p { margin-top: var(--space-2); }
.solution__callout { background: var(--color-accent); color: #fff; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; line-height: 1.4; padding: var(--space-4); border-left: 8px solid var(--color-highlight); border-radius: 4px; }
.section__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--color-primary); }
.services__list { list-style: none; padding: 0; margin-block: var(--space-4); }
.service { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--color-surface); }
.service:last-child { border-bottom: 1px solid var(--color-surface); }
.service h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); border-left: 6px solid var(--color-highlight); padding-left: var(--space-2); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { filter: brightness(0.9); }
.btn--accent:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (min-width: 768px) { .service { grid-template-columns: 1fr 2fr; gap: var(--space-4); align-items: center; } }
.section { padding-block: calc(var(--space-4) * 2); }
.section__label { color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); }
.section--dark { background: var(--color-dark); color: #fff; }
.section--dark .section__label { color: var(--color-highlight); }
.section--dark .section__title { color: #fff; max-width: 24ch; }
.why__subtitle { margin-top: var(--space-4); font-size: 1.25rem; font-weight: 700; }
.why__intro { margin-top: var(--space-1); max-width: 65ch; }
.why__list { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.why__list li { border-top: 6px solid var(--color-highlight); padding-top: var(--space-2); }
.why__list h4 { font-size: 1.125rem; font-weight: 700; color: var(--color-highlight); }
.why__list p { margin-top: var(--space-1); }
@media (min-width: 768px) { .why__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why__list { grid-template-columns: repeat(4, 1fr); } }
.section--accent { background: var(--color-accent); color: #fff; border-top: 6px solid var(--color-highlight); }
.cta__inner h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; max-width: 24ch; }
.cta__inner p { margin-top: var(--space-2); max-width: 60ch; font-size: 1.125rem; }
.cta__inner .cta__lead { font-weight: 700; }
.cta__inner .btn { margin-top: var(--space-3); }
.btn--light { background: #fff; color: var(--color-dark); }
.btn--light:hover { background: var(--color-surface); }
.btn--light:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#footer { background: var(--color-primary); color: #fff; border-top: 6px solid var(--color-highlight); padding-top: calc(var(--space-4) * 1.5); }
.footer__inner { display: grid; gap: var(--space-4); }
.footer__name { font-size: 1.25rem; font-weight: 800; }
.footer__brand p + p { margin-top: var(--space-1); }
.footer__heading { font-weight: 700; margin-bottom: var(--space-1); }
.footer__links { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
#footer a { color: #fff; text-underline-offset: 3px; }
#footer a:hover { text-decoration-thickness: 3px; }
#footer a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.footer__legal { margin-top: var(--space-4); padding-block: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.3); display: grid; gap: var(--space-1); font-size: 0.875rem; }
@media (min-width: 768px) { .footer__inner { grid-template-columns: 2fr 1fr; } .footer__legal { grid-template-columns: 1fr auto; } }
.footer__social { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.footer__social .footer__heading { margin-bottom: 0; }
.social__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
#footer .social__link { display: inline-block; padding: var(--space-1) var(--space-3); border: 2px solid #fff; border-radius: 999px; font-weight: 600; text-decoration: none; }
#footer .social__link:hover { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--color-dark); }
.footer__social + .footer__legal { margin-top: var(--space-3); }
.footer__follow .footer__heading { margin-bottom: var(--space-1); }
.social__list { list-style: none; padding: 0; display: grid; gap: var(--space-1); justify-items: start; }
#footer .social__link { display: inline-block; padding: var(--space-1) var(--space-3); border: 2px solid #fff; border-radius: 999px; font-weight: 600; text-decoration: none; }
#footer .social__link:hover { background: var(--color-highlight); border-color: var(--color-highlight); color: var(--color-dark); }
@media (min-width: 768px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
.section { padding-block: calc(var(--space-4) * 2); }
.section__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--color-primary); }
.section--surface { background: var(--color-surface); }
.page-hero { background: var(--color-dark); color: #fff; padding-block: calc(var(--space-4) * 2); border-bottom: 6px solid var(--color-highlight); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; max-width: 22ch; }
.page-hero p { margin-top: var(--space-2); max-width: 60ch; font-size: 1.125rem; }
.form { display: grid; gap: var(--space-3); max-width: 720px; margin-top: var(--space-4); }
.form__field { display: grid; gap: var(--space-1); }
.form label { font-weight: 700; color: var(--color-primary); }
.form input, .form textarea { font: inherit; color: var(--color-text); background: #fff; border: 2px solid var(--color-primary); border-radius: 4px; padding: var(--space-1) var(--space-2); width: 100%; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.form__note { color: var(--color-muted); font-size: 0.875rem; }
.form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.form .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.form__status { padding: var(--space-2); border-radius: 4px; }
.form__status:empty { display: none; }
.form__status--success { background: var(--color-surface); color: var(--color-primary); border-left: 6px solid var(--color-highlight); font-weight: 600; }
.form__status--error { color: #B42318; border-left: 6px solid #B42318; font-weight: 600; }
.page-hero .section__label { color: var(--color-highlight); font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-1); }
.jump { padding-block: var(--space-3); border-bottom: 1px solid var(--color-surface); }
.jump__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.jump__list a { display: inline-block; padding: 0.25rem 0.875rem; border: 2px solid var(--color-accent); border-radius: 999px; color: var(--color-accent); font-weight: 600; text-decoration: none; }
.jump__list a:hover { background: var(--color-accent); color: #fff; }
.jump__list a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.svc { display: grid; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-surface); scroll-margin-top: 7rem; }
.svc:first-child { border-top: 0; }
.svc__num { display: inline-block; background: var(--color-highlight); color: var(--color-dark); font-weight: 700; padding: 2px var(--space-2); border-radius: 4px; }
.svc__title { margin-top: var(--space-1); font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--color-primary); }
.svc__tag { margin-top: var(--space-1); color: var(--color-muted); }
.svc__intro { font-weight: 600; }
.svc__list { margin-top: var(--space-1); padding-left: var(--space-3); }
.svc__list li + li { margin-top: 0.25rem; }
.svc__more { margin-top: var(--space-2); }
.svc__more summary { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; list-style: none; color: var(--color-accent); font-weight: 700; border-bottom: 2px solid var(--color-accent); }
.svc__more summary::-webkit-details-marker { display: none; }
.svc__more summary::before { content: "+"; font-size: 1.25rem; line-height: 1; }
.svc__more[open] summary::before { content: "−"; }
.svc__more summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.svc__panel { margin-top: var(--space-2); background: var(--color-surface); border-left: 6px solid var(--color-highlight); padding: var(--space-2) var(--space-3); color: var(--color-primary); }
.svc__panel ul { padding-left: var(--space-3); }
.svc__panel li + li { margin-top: 0.25rem; }
.svc__panel p { margin-top: var(--space-2); }
@media (min-width: 768px) { .svc { grid-template-columns: 1fr 2fr; gap: var(--space-4); } }

.section__label { color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); }
.section--surface .section__label { color: var(--color-primary); }
.steps { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-highlight); color: var(--color-dark); font-weight: 800; }
.step h3 { margin-top: var(--space-1); font-size: 1.125rem; font-weight: 700; color: var(--color-primary); }
.step p { margin-top: 0.25rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.svc__title { margin-top: 0; }
.svc__head { border-left: 6px solid var(--color-highlight); padding-left: var(--space-2); }
.page-hero .section__label { color: var(--color-highlight); font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-1); }
.page-hero--wide h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); max-width: 30ch; }
.about__intro { max-width: 65ch; }
.about__intro p + p { margin-top: var(--space-2); }
.about__gap { background: var(--color-accent); color: #fff; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700; line-height: 1.4; padding: var(--space-3) var(--space-4); border-left: 8px solid var(--color-highlight); border-radius: 4px; margin-top: var(--space-3); }
.split { display: grid; gap: var(--space-3); }
.split__text p + p { margin-top: var(--space-2); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.4fr; gap: var(--space-4); align-items: start; } }
.section__label { color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-1); }
.mv { display: grid; gap: var(--space-3); }
.mv__card { background: #fff; padding: var(--space-4); border-radius: 4px; border-top: 6px solid var(--color-accent); }
.mv__card--vision { border-top-color: var(--color-highlight); }
.mv__card h2 { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); }
.mv__card p { margin-top: var(--space-1); }
.pull { margin-top: var(--space-3); border-left: 6px solid var(--color-highlight); padding-left: var(--space-3); font-weight: 700; color: var(--color-primary); font-size: 1.125rem; }
@media (min-width: 768px) { .mv { grid-template-columns: 1fr 1fr; } }
.section--dark { background: var(--color-dark); color: #fff; }
.section--dark .section__label { color: var(--color-highlight); }
.section--dark .section__title { color: #fff; }
.pull--light { color: #fff; }
.serve p { margin-top: var(--space-2); max-width: 65ch; }
.footer__legal { font-size: 0.75rem; }
.policy { max-width: 75ch; }
.policy h2 { margin-top: var(--space-4); font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: var(--color-primary); scroll-margin-top: 7rem; }
.policy h3 { margin-top: var(--space-3); font-size: 1.125rem; font-weight: 700; color: var(--color-primary); }
.policy p, .policy ul { margin-top: var(--space-2); }
.policy ul { padding-left: var(--space-3); }
.policy li + li { margin-top: 0.375rem; }
.policy a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.policy__toc { background: var(--color-surface); border-left: 6px solid var(--color-highlight); padding: var(--space-3); }
.policy__toc p { margin-top: 0; font-weight: 700; color: var(--color-primary); }
.policy__toc ol { margin-top: var(--space-1); padding-left: var(--space-3); }
.policy__toc a { color: var(--color-primary); }
@media (min-width: 768px) { .policy__toc ol { columns: 2; column-gap: var(--space-4); } }
#get-in-touch { scroll-margin-top: 5rem; }
#hero.has-hero-image,
.page-hero.has-hero-image {
  --hero-overlay: 0.90;
  background-image:
    linear-gradient(rgba(38, 50, 56, var(--hero-overlay)), rgba(38, 50, 56, var(--hero-overlay))),
    var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
  background-repeat: no-repeat;
}
/* Footer swoosh edge */
#footer { --curve-h: 70px; position: relative; border-top: 0; padding-top: calc(var(--curve-h) + var(--space-2)); }
#footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: calc(var(--curve-h) + 1px); background: url("assets/footer-swoosh.svg") center top / 100% 100% no-repeat; pointer-events: none; }
@media (min-width: 900px) { #footer { --curve-h: 100px; } }
/* ADD NEW CSS ABOVE THIS LINE */

.faq__list { margin-top: var(--space-4); max-width: 820px; }
.faq__item { background: #fff; border-left: 6px solid var(--color-highlight); border-radius: 4px; }
.faq__item + .faq__item { margin-top: var(--space-1); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; padding: var(--space-2) var(--space-3); font-weight: 700; color: var(--color-primary); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--color-accent); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.faq__answer { padding: 0 var(--space-3) var(--space-2); max-width: 70ch; }
.faq__answer ul { padding-left: var(--space-3); margin-top: var(--space-1); }
.faq__answer li + li { margin-top: 0.25rem; }