/* ===========================================================================
   Norvia Clinical Center

   Art direction is the Evenza theme, home-version-3, measured off the live
   demo rather than guessed at. The numbers below are the ones the demo
   actually computes, not approximations of them:

     font      Onest, 400-800, normal tracking on body, -0.02em on headings
     body      16px / 1.6, #737681
     h1        76px / 1.1 / 800      h2  48px / 1.1 / 600      h3  20px / 700
     navy      #161A2D    mist #F6F6F7
     lime      #D2E761    lime wash #F8FBEF
     button    pill, radius 100px, padding 17px 24px, 16px / 700

   ONE THING IS NOT THE DEMO'S: the accent. Evenza's is violet #734BDF, and
   MigraSens in this same folder already uses it. Taking it exactly was tried
   first, on the operator's instruction; seeing the two side by side settled
   it, and the accent moved to a jade green on 2026-10-01.

     green     #0A7A54    hover #086544    wash #E8F4EF
     hero      linear-gradient(#161A2D 0%, #0A7A54 50%, #FFFFFF 100%)

   The green was not picked by eye. #734BDF carries white text at 5.52:1, and
   #0A7A54 carries it at 5.35 — the closest match available in that hue — so
   every button, badge and icon tile keeps the legibility it was designed
   with. A brighter emerald (#17A673) looks better in isolation and drops the
   button label to 3.12:1, which fails AA at 16px.

   Everything else is still the demo's, lime accent included: the lime is far
   enough from the green in value that the two read as highlight and fill
   rather than as two greens.
   =========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root{
  --navy:        #161A2D;
  --navy-2:      #1E2338;   /* a card on the navy */
  --green:       #0A7A54;
  --green-2:     #086544;   /* hover */
  --green-wash:  #E8F4EF;
  --lime:        #D2E761;
  --lime-2:      #C4DC46;
  --lime-wash:   #F8FBEF;
  --mist:        #F6F6F7;
  --white:       #FFFFFF;
  --body:        #737681;
  --body-dim:    #9A9CA6;
  --line:        #E6E6EA;
  --line-dark:   rgba(255, 255, 255, .12);

  --wrap: 1296px;
  --gutter: clamp(18px, 4vw, 40px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 24px 60px -32px rgba(22, 26, 45, .45);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{ margin: 0 0 .55em; color: var(--navy); letter-spacing: -.02em; }
h1{ font-size: clamp(2.6rem, 5.4vw, 4.75rem); font-weight: 800; line-height: 1.1; }
h2{ font-size: clamp(1.9rem, 3.4vw, 3rem);    font-weight: 600; line-height: 1.1; }
h3{ font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: normal; }
h4{ font-size: 1rem;    font-weight: 700; line-height: 1.4; letter-spacing: normal; }

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

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

img, svg{ max-width: 100%; }
img{ height: auto; display: block; }

strong{ color: var(--navy); font-weight: 700; }

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.lede{ font-size: 1.0625rem; max-width: 62ch; }
.fine{ font-size: .9rem; line-height: 1.7; }
.tint{ color: var(--green); font-style: normal; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* --- 2. Sections and grids ------------------------------------------------ */

.section{ padding: clamp(56px, 7vw, 110px) 0; }
.section--tight{ padding-top: 0; }
.section--mist{ background: var(--mist); }

/* A dark band. The demo lights it from the top centre with a single radial
   in the accent colour, which is what stops it reading as a flat black box. */
.section--dark{
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, .72);
  overflow: hidden;
}
.section--dark::before{
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 120%;
  background: radial-gradient(60% 55% at 50% 22%, rgba(10, 122, 84, .62), transparent 72%);
  pointer-events: none;
}
.section--dark > *{ position: relative; z-index: 1; }
.section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong{ color: #fff; }
.section--dark a{ color: #fff; }

.grid{ display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Every track is minmax(0, 1fr), never a bare 1fr: a bare 1fr floors at
   min-content and lets a long word steal width from the column beside it. */

/* --- 3. Section heads ----------------------------------------------------- */

.eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .875rem; font-weight: 500; color: var(--green);
}
.eyebrow i{ width: 7px; height: 7px; background: currentColor; flex: none; }  /* a SQUARE */
.section--dark .eyebrow{ color: var(--lime); }

.sec-head{ margin-bottom: clamp(32px, 4vw, 54px); }
.sec-head h2{ margin: 14px 0 0; }
.sec-head .lede{ margin-top: 16px; }
.sec-head--center{ text-align: center; }
.sec-head--center h2{ max-width: 20ch; margin-inline: auto; }
.sec-head--center .lede{ margin-inline: auto; }
.sec-head--left h2{ max-width: 18ch; }

/* --- 4. Buttons ----------------------------------------------------------- */

/* Measured: pill, 100px radius, 17px 24px, 16px / 700. The demo's hover
   brings a lighter wash across from the left under the label. It is a
   pseudo-element scaling on the X axis rather than a background-color
   transition, because a colour crossfade puts the label on a mid-tone for the
   middle of its travel and a transform never touches the label at all. */
.btn{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 26px; border: 0; border-radius: var(--r-pill);
  background: var(--green); color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.1;
  cursor: pointer; white-space: nowrap;
}
.btn::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--green-2);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease);
}
.btn > span{ position: relative; z-index: 1; }
.btn:hover::before, .btn:focus-visible::before{ transform: scaleX(1); }
.btn:hover, .btn:focus-visible{ color: #fff; }

.btn--lime{ background: var(--lime); color: var(--navy); }
.btn--lime::before{ background: var(--lime-2); }
.btn--lime:hover, .btn--lime:focus-visible{ color: var(--navy); }

.btn--ghost{ background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost::before{ background: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible{ color: #fff; }

.section--dark .btn--ghost{ color: #fff; box-shadow: inset 0 0 0 1px var(--line-dark); }
.section--dark .btn--ghost::before{ background: #fff; }
.section--dark .btn--ghost:hover{ color: var(--navy); }

.btn--wide{ width: 100%; }

.btn-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (prefers-reduced-motion: reduce){ .btn::before{ transition: none; } }

/* A text link that carries an arrow and slides it on hover. */
.arrow-link{
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .9375rem; color: var(--green);
}
.arrow-link svg{ width: 17px; height: 17px; transition: transform .35s var(--ease); }
.arrow-link:hover svg{ transform: translateX(5px); }
.section--dark .arrow-link{ color: var(--lime); }

/* --- 5. Announcement bar, header ------------------------------------------ */

.topbar{ background: var(--lime-wash); color: var(--navy); font-size: .9rem; }
.topbar .wrap{ display: flex; justify-content: center; padding-block: 11px; }
.topbar p{ margin: 0; text-align: center; }
.topbar a{ color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.site-header{ position: sticky; top: 0; z-index: 900; background: var(--navy); }
.site-header .wrap{ display: flex; align-items: center; gap: 20px; min-height: 84px; }
.site-header.is-stuck{ box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .8); }

/* The theme's wordmark is one word and a full stop — Evenza. — which is fine
   for a one-word brand and loses two thirds of this one. So it is a lockup:
   the wordmark the theme draws, with the rest of the name set small under it.
   The full name was in the footer disclaimers and the legal pages from the
   start, but nowhere a visitor actually looks. */
.brand{ display: flex; align-items: center; gap: 11px; margin-right: auto; color: #fff; }
.brand svg{ width: 46px; height: 46px; flex: 0 0 46px; }
/* The wordmark is set LARGER to span the sub-line's width — not tracked out.
   Letter-spacing on a seven-letter wordmark reads as a different, airier
   brand; size reads as the same brand, bigger. It still has to come out the
   WIDER of the two lines, because the sub-line is justified to meet it and
   justification can only stretch, never shrink. */
.brand b{ display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
          line-height: 1.02; }
.brand b i{ font-style: normal; color: var(--green); }   /* the theme's full stop */
.brand b span{
  display: block; margin-top: 2px;
  width: 100%;
  margin-top: 4px;
  font-size: .7rem; font-weight: 600; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: justify; text-align-last: justify;
  color: rgba(255, 255, 255, .5);
}

/* The nav sits in a translucent pill, as the demo's does. */
.site-nav > ul{
  display: flex; align-items: center; gap: 4px; margin: 0;
  padding: 6px; list-style: none;
  background: rgba(255, 255, 255, .06); border-radius: var(--r-pill);
}
.site-nav a{
  display: block; padding: 9px 17px; border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .78); font-size: .95rem; font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.site-nav a:hover{ background: rgba(255, 255, 255, .1); color: #fff; }
.site-nav a[aria-current="page"]{ background: var(--green); color: #fff; }

.header-cta{ padding: 14px 22px; font-size: .9375rem; }

.nav-toggle{
  display: none; width: 44px; height: 44px; flex: none;
  background: rgba(255, 255, 255, .08); border: 0; border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
}
.nav-toggle span{
  display: block; width: 19px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* --- 6. Hero -------------------------------------------------------------- */

/* The signature of version 3: navy at the top, the accent through the
   middle, white at the foot, so the section dissolves into the page under
   it. */
.hero{
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--green) 50%, var(--white) 100%);
  padding: clamp(54px, 7vw, 104px) 0 0;
  text-align: center;
  color: rgba(255, 255, 255, .82);
}
.hero h1{ color: #fff; max-width: 17ch; margin-inline: auto; }
.hero .lede{ color: rgba(255, 255, 255, .82); margin: 22px auto 0; max-width: 56ch; }
.hero .btn-row{ justify-content: center; margin-top: 30px; }
.hero .eyebrow{ color: var(--lime); }

.hero-media{
  margin-top: clamp(34px, 5vw, 64px);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-media img{ width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* The band of facts, in the accent, that overlaps the foot of the hero image. */
.hero-facts{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin: -1px 0 0; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
  background: var(--green); border-radius: 0 0 var(--r-lg) var(--r-lg);
  text-align: left;
}
.hero-facts > div{ display: flex; gap: 14px; align-items: flex-start; }
.hero-facts .ic{
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border-radius: 12px; color: #fff;
}
.hero-facts .ic svg{ width: 21px; height: 21px; }
.hero-facts h3{ color: #fff; font-size: 1.0625rem; margin: 0 0 4px; }
.hero-facts p{ color: rgba(255, 255, 255, .78); font-size: .9rem; margin: 0; line-height: 1.55; }

/* --- 7. The outlined marquee --------------------------------------------- */

.marquee{ padding: clamp(26px, 3vw, 46px) 0; overflow: hidden; }
.marquee__track{
  display: flex; width: max-content; gap: 0;
  animation: marquee 44s linear infinite;
}
.marquee__set{ display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.marquee__set span{
  font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1px var(--line);
}
.marquee__set i{ flex: none; width: 20px; height: 20px; color: var(--line); }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .marquee{ overflow-x: auto; }
}

/* --- 8. Cards ------------------------------------------------------------- */

.card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 34px);
}
.card h3{ margin-bottom: 10px; }

/* On the dark band the demo uses a translucent card, not a solid one. */
.card--glass{
  background: rgba(255, 255, 255, .05); border-color: var(--line-dark);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.card--glass:hover{ background: rgba(255, 255, 255, .09); border-color: rgba(255,255,255,.22); transform: translateY(-4px); }
.card--glass p{ color: rgba(255, 255, 255, .7); }

/* The rounded-square icon tile, in the accent, at the top of a card. */
.ic-tile{
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--green); border-radius: 14px; color: #fff; margin-bottom: 22px;
}
.ic-tile svg{ width: 24px; height: 24px; }
.ic-tile--soft{ background: var(--green-wash); color: var(--green); }
.ic-tile--lime{ background: var(--lime); color: var(--navy); }

/* --- 9. Split with an image and an overlay card --------------------------- */

.split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
.split--reverse .split__media{ order: 2; }

.split__media{ position: relative; border-radius: var(--r-lg); overflow: hidden; }
.split__media img{ width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

/* The glass panel the demo floats over the bottom of that image. */
.overlay-card{
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  padding: 22px 24px; border-radius: var(--r-md);
  background: rgba(22, 26, 45, .55); color: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
}
.overlay-card h3{ color: #fff; margin-bottom: 8px; font-size: 1.125rem; }
.overlay-card p{ font-size: .9rem; margin: 0; }
.overlay-card__foot{
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .875rem;
}
.overlay-card__pill{
  flex: none; display: grid; place-items: center; min-width: 46px; height: 32px; padding: 0 12px;
  background: var(--green); color: #fff; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 700;
}

/* Ticks, two across, under a lede. */
.ticks{ list-style: none; margin: 26px 0 0; padding: 0;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.ticks li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; }
.ticks svg{ flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%;
            background: var(--green); color: #fff; margin-top: 1px; }

/* Three mini-columns divided by hairlines, as under the demo's tick list. */
.trio{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line);
  text-align: center;
}
.trio > div{ padding-inline: 16px; }
.trio > div + div{ border-left: 1px solid var(--line); }
.trio .ic-tile{ margin-inline: auto; margin-bottom: 14px; }
.trio h4{ margin-bottom: 6px; }
.trio p{ font-size: .875rem; margin: 0; }
.section--dark .trio{ border-color: var(--line-dark); }
.section--dark .trio > div + div{ border-color: var(--line-dark); }

/* --- 10. The listing rows (the demo's schedule) --------------------------- */

.listing{
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(26px, 4vw, 60px); align-items: start;
}
.listing__intro{ position: sticky; top: 110px; }
.listing__rows{ display: grid; gap: 18px; }

.row-study{
  display: grid; grid-template-columns: 184px minmax(0, 1fr);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark);
  border-radius: var(--r-md); overflow: hidden;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.row-study:hover{ background: rgba(255, 255, 255, .09); border-color: rgba(255,255,255,.22); }
.row-study__key{
  display: grid; place-content: center; text-align: center; gap: 2px;
  padding: 30px 18px; border-right: 1px solid var(--line-dark);
}
.row-study__key b{ display: block; font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.row-study__key span{ font-size: .85rem; color: rgba(255, 255, 255, .62); }
.row-study__body{ padding: 26px 28px; }
.row-study__body h3{ margin-bottom: 8px; }
.row-study__body p{ color: rgba(255, 255, 255, .7); font-size: .9375rem; }
.row-study__meta{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none;
}
.row-study__meta li{
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .82);
}

/* --- 11. Stat card -------------------------------------------------------- */

.stat-card{
  display: flex; align-items: center; gap: 20px; margin-top: 30px;
  padding: 24px 26px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark);
}
.stat-card .ic-tile{ margin: 0; }
.stat-card b{ display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.stat-card span{ font-size: .9rem; color: rgba(255, 255, 255, .7); }

/* --- 12. Accordion -------------------------------------------------------- */

.faq{ display: grid; gap: 12px; }
.faq details{
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark);
  border-radius: var(--r-md); overflow: hidden;
}
.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px; cursor: pointer; list-style: none;
  color: #fff; font-weight: 700; font-size: 1rem;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 1.1rem; font-weight: 400; line-height: 1;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq details[open] summary::after{ content: "\2212"; background: var(--green); }
.faq .faq__a{ padding: 0 22px 20px; color: rgba(255, 255, 255, .72); font-size: .9375rem; }
.faq .faq__a p:last-child{ margin-bottom: 0; }

/* On a light section the same component inverts. */
.section:not(.section--dark) .faq details{ background: var(--mist); border-color: var(--line); }
.section:not(.section--dark) .faq summary{ color: var(--navy); }
.section:not(.section--dark) .faq summary::after{ background: var(--white); color: var(--navy); }
.section:not(.section--dark) .faq details[open] summary::after{ background: var(--green); color: #fff; }
.section:not(.section--dark) .faq .faq__a{ color: var(--body); }

/* --- 13. Quote panel ------------------------------------------------------ */

.quote{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.quote__media{ position: relative; border-radius: var(--r-lg); overflow: hidden; }
.quote__media img{ width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.quote__badge{
  position: absolute; left: 20px; bottom: 20px; padding: 20px 24px;
  background: var(--green); color: #fff; border-radius: var(--r-md);
}
.quote__badge b{ display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.quote__badge span{ font-size: .875rem; color: rgba(255, 255, 255, .84); }
.quote__mark{ width: 44px; height: 44px; color: var(--green); margin-bottom: 18px; }
.quote blockquote{ margin: 0; font-size: clamp(1.125rem, 1.9vw, 1.5rem); font-weight: 500;
                   line-height: 1.45; color: var(--navy); letter-spacing: -.01em; }
.quote figcaption{ margin-top: 22px; font-size: .9375rem; }
.quote figcaption b{ display: block; color: var(--navy); }

/* --- 14. Callouts --------------------------------------------------------- */

.callout{
  border-left: 3px solid var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--green-wash); padding: 20px 24px; font-size: .9375rem;
}
.callout--warn{ border-left-color: #C0392B; background: #FDF0EE; }
.callout--lime{ border-left-color: var(--lime-2); background: var(--lime-wash); }
.section--dark .callout{ background: rgba(255, 255, 255, .06); color: rgba(255,255,255,.76); }

/* --- 15. Forms ------------------------------------------------------------ */

.panel{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
}
.panel-head{ margin-bottom: 24px; }
.panel-head h3{ margin-bottom: 6px; }

.field{ margin-bottom: 16px; }
.field label, .field .label{
  display: block; margin-bottom: 7px; color: var(--navy); font-size: .9rem; font-weight: 600;
}
.field input, .field select, .field textarea{
  width: 100%; padding: 13px 15px;
  background: var(--mist); color: var(--navy);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: .9375rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  background: var(--white); border-color: var(--green); outline: none;
}
.field textarea{ resize: vertical; min-height: 110px; }
.field-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.picks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picks .pick{
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 11px 13px; font-size: .92rem; font-weight: 500; color: var(--navy);
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.picks .pick:hover{ border-color: var(--green); }
.picks .pick input{ flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.picks .pick:has(input:checked){ border-color: var(--green); background: var(--green-wash); }

.check{
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; padding: 16px 18px;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: .875rem; line-height: 1.65; cursor: pointer;
}
.check input{ flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.check b{ display: block; color: var(--navy); margin-bottom: 3px; }
.check.is-invalid, .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select{
  border-color: #C0392B;
}

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error{
  display: none; margin-bottom: 16px; padding: 13px 16px; border-radius: var(--r-sm);
  background: #FDF0EE; color: #8E2A1F; font-size: .9rem; font-weight: 500;
}
.form-error.is-shown{ display: block; }

.form-done{ display: none; text-align: center; padding: 10px 0 4px; }
.form-done.is-shown{ display: block; }
.form-done .ic{
  width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center;
  background: var(--green-wash); color: var(--green); border-radius: 50%;
}
.form-done .ic svg{ width: 30px; height: 30px; }

/* A short column beside a tall form. Without this the explanatory cards run
   out and leave a metre of empty page; three sibling sites hit it one at a
   time before it was written down. */
.sticky-col{ position: sticky; top: 110px; align-self: start; }
@media (max-width: 980px){ .sticky-col{ position: static; } }

/* --- 16. Footer ----------------------------------------------------------- */

.site-footer{
  position: relative; overflow: hidden;
  background: var(--navy); color: rgba(255, 255, 255, .66);
  padding-top: clamp(50px, 6vw, 88px);
}
.site-footer::before{
  content: ""; position: absolute; inset: -30% 0 auto 0; height: 110%;
  background: radial-gradient(52% 48% at 32% 14%, rgba(10, 122, 84, .55), transparent 70%);
  pointer-events: none;
}
.site-footer > *{ position: relative; z-index: 1; }
.foot-grid{
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 48px);
}
.foot-brand .brand{ margin-bottom: 18px; }
.foot-brand p{ font-size: .9375rem; max-width: 40ch; }
.foot-contact{ margin-top: 18px; font-size: .9375rem; line-height: 1.9; }
.foot-contact span{ color: rgba(255, 255, 255, .5); }
.site-footer h4{ color: #fff; margin-bottom: 16px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; }
.site-footer li{ margin-bottom: 9px; }
.site-footer li a{ color: rgba(255, 255, 255, .68); font-size: .9375rem; }
.site-footer li a:hover{ color: #fff; }

.disclaimer{
  margin-top: clamp(32px, 4vw, 52px); padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: .8125rem; line-height: 1.75; color: rgba(255, 255, 255, .52);
}
.disclaimer + .disclaimer{ border-top: 0; padding-top: 0; margin-top: 16px; }
.disclaimer strong{ color: rgba(255, 255, 255, .82); }

.foot-legal{ margin-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--line-dark); }
.foot-legal .wrap{
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding-block: 22px; font-size: .8125rem; color: rgba(255, 255, 255, .5);
}
.foot-legal p{ margin: 0; }
.foot-legal a{ color: rgba(255, 255, 255, .68); }

/* --- 17. Reveal ----------------------------------------------------------- */

.fade-up{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fade-up.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity: 1; transform: none; transition: none; }
}

/* --- 18. Responsive ------------------------------------------------------- */

@media (max-width: 1180px){
  .site-nav a{ padding: 9px 12px; font-size: .9rem; }
  .brand b{ font-size: 1.8rem; }
  .brand b span{ font-size: .62rem; letter-spacing: .04em; }
  .brand svg{ width: 42px; height: 42px; flex: 0 0 42px; }
}

@media (max-width: 1020px){
  .site-nav{
    position: absolute; inset: 100% 0 auto 0; display: block;
    background: var(--navy); border-bottom: 1px solid var(--line-dark);
    padding: 12px var(--gutter) 22px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > ul{ flex-direction: column; align-items: stretch; gap: 0;
                  background: none; border-radius: 0; padding: 0; }
  .site-nav > ul > li{ border-bottom: 1px solid var(--line-dark); }
  .site-nav a{ padding: 14px 2px; border-radius: 0; }
  .site-nav a[aria-current="page"]{ background: none; color: var(--lime); }
  .nav-toggle{ display: block; order: 3; }
  .header-cta{ order: 2; }
  .brand{ order: 1; }
  .site-header .wrap{ position: relative; }

  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .quote, .listing{ grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media{ order: 0; }
  .listing__intro{ position: static; }
  .foot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .hero-facts{ grid-template-columns: minmax(0, 1fr); }
  .grid--3{ grid-template-columns: minmax(0, 1fr); }
  .trio{ grid-template-columns: minmax(0, 1fr); }
  .trio > div + div{ border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
  .section--dark .trio > div + div{ border-color: var(--line-dark); }
}

@media (max-width: 680px){
  .grid--2, .grid--4{ grid-template-columns: minmax(0, 1fr); }
  .field-2, .picks, .ticks{ grid-template-columns: minmax(0, 1fr); }
  .foot-grid{ grid-template-columns: minmax(0, 1fr); }
  .row-study{ grid-template-columns: minmax(0, 1fr); }
  .row-study__key{ border-right: 0; border-bottom: 1px solid var(--line-dark); padding: 20px; }
  .row-study__key b{ font-size: 1.9rem; }
  .site-header .wrap{ min-height: 72px; gap: 10px; }
  .site-nav{ inset: 72px 0 auto 0; }
  .header-cta{ padding: 11px 16px; font-size: .85rem; }
  .brand svg{ width: 36px; height: 36px; flex: 0 0 36px; }
  .brand b{ font-size: 1.5rem; }
  .brand b span{ font-size: .54rem; letter-spacing: .02em; }
  .topbar{ font-size: .82rem; }
}

/* --- 19. The bento grid of therapeutic areas ------------------------------ */

/* Cards of three different widths, one of them dark and two rows tall, each
   carrying a small diagram beside its text. The shape is the reference the
   operator sent; what goes in the diagram panel is the constraint.
   
   NOTHING IN THESE DIAGRAMS IS DATA. There is no enrolment curve and no
   success rate, because this service has neither and a credible-looking fake
   one is what gets published. Every panel draws the SHAPE OF THE CRITERIA the
   card's own text describes — a visit cadence, a recruiting window, an
   eligibility band. They are illustrations of a sentence that is already
   there, which is why they can be drawn at all. */

.bento{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}
/* The card is a GRID, not a stack, because the two layouts put the same four
   parts in different places: narrow runs icon / text / diagram / button down
   a column, wide puts the diagram in its own full-height column beside the
   other three. Named areas say that once; with flexbox it took an `order`
   on a nested child and the button ended up above the diagram. */
.bento-card{
  display: grid;
  grid-template-areas: "ic" "text" "viz" "btn";
  grid-template-rows: auto auto auto 1fr;
  gap: 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 34px);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.bento-card:hover{ border-color: #D5DAE2; transform: translateY(-3px); box-shadow: var(--shadow); }

.bento-card__ic{ grid-area: ic; color: var(--navy); }
.bento-card__ic svg{ width: 42px; height: 42px; stroke-width: 1.3; }
.bento-card__text{ grid-area: text; }
.bento-card > .panel-viz{ grid-area: viz; align-self: start; }
.bento-card > .btn{ grid-area: btn; align-self: end; justify-self: start; }

.bento-card h3{ font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 600;
                letter-spacing: -.02em; margin: 0 0 10px; }
.bento-card p{ font-size: .9375rem; margin: 0; }

/* The ghost pill, thin-bordered, that the reference puts under the text. */
.bento-card > .btn{
  padding: 13px 24px; font-size: .9375rem; font-weight: 600;
  background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line);
}
.bento-card > .btn::before{ background: var(--navy); }
.bento-card > .btn:hover, .bento-card > .btn:focus-visible{ color: #fff; }

/* Wide: the diagram takes its own column, full height, beside the rest. */
.bento-card--wide{
  grid-column: span 2;
  grid-template-areas: "ic viz" "text viz" "btn viz";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(20px, 2.4vw, 34px);
}
.bento-card--wide > .panel-viz{ align-self: stretch; }

/* The featured card: dark, two columns across and two rows tall. */
.bento-card--feature{
  grid-column: span 2; grid-row: span 2;
  background: var(--navy); border-color: var(--navy); color: rgba(255, 255, 255, .72);
  position: relative; overflow: hidden;
}
.bento-card--feature::before{
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 120%;
  background: radial-gradient(52% 50% at 50% 16%, rgba(10, 122, 84, .55), transparent 72%);
  pointer-events: none;
}
.bento-card--feature > *{ position: relative; z-index: 1; }
.bento-card--feature h3{ color: #fff; }
.bento-card--feature p{ color: rgba(255, 255, 255, .72); }
.bento-card--feature .bento-card__ic{ color: #fff; }
.bento-card--feature:hover{ border-color: var(--navy); }
/* Two grid rows tall with one card's worth of text in it. The slack has to
   go to the DIAGRAM row, not the button row, or the panel keeps its natural
   height and leaves a void under it — which is what `align-self: stretch`
   alone did, because the row it sits in was still `auto`. */
.bento-card--feature{ grid-template-rows: auto auto 1fr auto; }
.bento-card--feature > .panel-viz{ align-self: stretch; justify-content: space-between; }
.bento-card--feature > .btn{ align-self: start; }
.bento-card--feature > .btn{ background: #fff; color: var(--navy); box-shadow: none; }
.bento-card--feature > .btn::before{ background: var(--lime); }
.bento-card--feature > .btn:hover, .bento-card--feature > .btn:focus-visible{ color: var(--navy); }

/* --- the diagram panels --------------------------------------------------- */

.panel-viz{
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: var(--r-md);
  background: var(--green-wash);
}
.panel-viz--lime{ background: var(--lime-wash); }
.panel-viz--dark{ background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); }
.panel-viz__cap{
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--navy);
}
.panel-viz--dark .panel-viz__cap{ color: #fff; }
.panel-viz__note{ font-size: .78rem; color: var(--body); margin: 0; }
.panel-viz--dark .panel-viz__note{ color: rgba(255, 255, 255, .62); }
.panel-viz svg{ width: 100%; height: auto; display: block; }
.panel-viz--dark svg{ margin-block: auto; }
/* The feature panel is tall; keep the diagram a readable size inside it
   rather than letting a 300-wide viewBox float in the middle of it. */
.bento-card--feature .panel-viz{ padding: 24px; }

@media (max-width: 1020px){
  .bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card--wide, .bento-card--feature{ grid-column: span 2; }
  .bento-card--feature{ grid-row: auto; }
}
@media (max-width: 680px){
  .bento{ grid-template-columns: minmax(0, 1fr); }
  .bento-card--wide, .bento-card--feature{ grid-column: span 1; }
  /* One column: every card is the narrow layout, diagram under the text. */
  .bento-card--wide{
    grid-template-areas: "ic" "text" "viz" "btn";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }
  .bento-card--wide > .panel-viz{ align-self: start; }
}