/* ==========================================================================
   Westbridge Clinical Studies — "Curious" theme structure, clinical palette
   Typography + layout system ported from the Curious Ghost theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type — Curious uses a single family across the whole UI */
  --font-primary: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Clinical neutral ramp (replaces Curious' warm zinc ramp) */
  --slate-50:  #f6f9fb;
  --slate-100: #eef3f7;
  --slate-200: #dde6ed;
  --slate-300: #c3d1dc;
  --slate-400: #93a7b6;
  --slate-500: #6b8496;
  --slate-600: #4d6576;
  --slate-700: #35495a;
  --slate-800: #1f3244;
  --slate-900: #0f2233;

  /* Clinical accents */
  --accent:       #0e7c86;  /* primary — clinical teal */
  --accent-bright:#15a3a8;
  --accent-deep:  #0a5a63;
  --accent-soft:  #e2f1f2;
  --signal:       #1b6fb8;  /* secondary — diagnostic blue */
  --signal-soft:  #e6eff8;
  --alert:        #b3321f;  /* safety / adverse-event red */
  --alert-bright: #f0a79a;  /* the same signal on dark surfaces */

  /* Semantic */
  --color-bg: #fff;
  --color-bg-muted: var(--slate-50);
  --color-bg-inverse: var(--slate-900);
  --color-text: var(--slate-600);
  --color-text-muted: var(--slate-600);
  --color-text-highlight: var(--slate-900);
  --color-text-inverse: #dce7ee;
  --color-text-highlight-inverse: #fff;
  --color-border: var(--slate-200);
  --color-border-inverse: #24394b;
  --color-border-highlight: var(--slate-900);

  --container: 1176px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* No scroll-behavior: smooth. Over the distances on this page (the sign-up
   panel sits ~4000px down) an animated scroll is slow, and Chrome abandons it
   part-way when lazy images settle — the jump silently does nothing. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;                 /* 16 / 24 — Curious base */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* [hidden] has to beat every component `display` below it. */
[hidden] { display: none !important; }

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text-highlight);
  line-height: 1.125;
}

/* Curious scale: h1 is a small uppercase eyebrow-style heading, h2 is the
   display size, h3 is the card/section size. */
h1 { font-size: 24px; text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: 56px; letter-spacing: -.015em; }
h3 { font-size: 36px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }

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

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

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Buttons — Curious: 14px, uppercase, 0.075em tracking, square corners
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-highlight);
  background: transparent;
  border: 1px solid var(--color-border-highlight);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button:hover {
  color: #fff;
  background: var(--color-text-highlight);
  border-color: var(--color-text-highlight);
}

.button--accent {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.button--accent:hover {
  color: #fff;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.button--inverse {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.button--inverse:hover {
  color: var(--slate-900);
  background: #fff;
  border-color: #fff;
}

.button--sm { padding: 9px 18px; font-size: 12px; }

/* --------------------------------------------------------------------------
   4. Utility bar
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--slate-800);
  border-bottom: 1px solid var(--color-border-inverse);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 38px;
  flex-wrap: wrap;
}
.utility-bar a {
  color: var(--color-text-inverse);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.utility-bar a:hover { color: #fff; }
.utility-bar .is-alert { color: var(--alert-bright); }
.utility-bar .is-alert:hover { color: #fff; }
.utility-bar__pill {
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 4px 12px;
}

/* --------------------------------------------------------------------------
   5. Site header — slim dark bar, logo left, uppercase nav, actions right
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--slate-900);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 64px;
}

.site-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.site-logo:hover { color: var(--accent-bright); }

/* Lockup: the cross-and-heart mark, then the full name on two lines. The
   mark's colours are its own (teal and red), drawn as strokes with no fill,
   so it holds on the navy header and on white alike. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  line-height: 1;
}
.site-logo__mark { flex: none; display: block; }
.site-logo__name { display: flex; flex-direction: column; gap: 5px; }
.site-logo__name small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3em;
  color: #9fe3e3;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-nav { margin-right: auto; }
.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a,
.site-nav .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 21px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.site-nav a:hover,
.site-nav .nav-parent:hover,
.site-nav a.is-active { color: #fff; }
.site-nav a.is-active { box-shadow: inset 0 -2px 0 var(--accent-bright); }

.has-dropdown { position: relative; }
.nav-parent::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.dropdown {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 100%;
  width: max-content;
  max-width: 300px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px -18px rgba(15, 34, 51, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 10px 20px;
  white-space: nowrap;      /* labels sit on one line, never stacked */
  color: var(--slate-700);
  letter-spacing: .06em;
}
.dropdown a:hover { color: var(--accent); background: var(--slate-50); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-search {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, .22);
}
.header-search:hover { color: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   6. Hero — Curious' full-bleed feature card w/ accent rule + overlay
   -------------------------------------------------------------------------- */
.hero { padding: 40px 0 0; }

.hero__panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 72px 0;
  overflow: hidden;
  background: var(--slate-900);
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero__panel::before {
  /* flat legibility scrim, heavier on the type side */
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: rgba(10, 26, 38, .62);
}
.hero__inner { position: relative; z-index: 2; }
.hero__content {
  max-width: 660px;
  padding-left: 30px;
  border-left: 4px solid var(--accent-bright);
}
.hero__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #9fe3e3;
}
.hero__title {
  margin: 0 0 18px;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
}
.hero__title em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: #b9e6e6;
}
.hero__text {
  max-width: 470px;
  margin-bottom: 28px;
  color: var(--color-text-inverse);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   7. Trial finder — overlaps the hero panel
   -------------------------------------------------------------------------- */
.finder { position: relative; z-index: 5; margin-top: -56px; }
.finder__card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
  box-shadow: 0 30px 60px -34px rgba(15, 34, 51, .45);
  padding: 32px 36px;
}
.finder__title {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-highlight);
}
.finder__form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.field input {
  width: 100%;
  padding: 13px 14px;
  font: 400 15px/1.4 var(--font-primary);
  color: var(--slate-800);
  background: var(--slate-50);
  border: 1px solid var(--color-border);
  transition: border-color .2s ease, background-color .2s ease;
}
.field input::placeholder { color: var(--slate-400); }
.field input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.finder__form .button { padding: 14px 30px; }

/* --------------------------------------------------------------------------
   8. Section furniture — Curious' centred uppercase section head
   -------------------------------------------------------------------------- */
.section { padding: 86px 0; }
.section--muted { background: var(--color-bg-muted); }
.section--tight { padding: 56px 0; }

.section-head { margin-bottom: 44px; text-align: center; }
.section-head__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-head h2 {
  margin: 0 0 14px;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.section-head p { max-width: 620px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   9. Card grid — the theme's alternating 2-up / full-width feature rhythm
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.card-grid .card--wide { grid-column: 1 / -1; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 300px;
  padding: 34px;
  overflow: hidden;
  color: #fff;
  background: var(--slate-800);
  isolation: isolate;
}
.card--wide { min-height: 340px; }

.card__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card::before {
  /* flat scrim so the type stays legible over the photograph */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 26, 38, .68);
  transition: background-color .3s ease;
}
.card:hover .card__img { transform: scale(1.04); }
.card:hover::before { background: rgba(10, 26, 38, .76); }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.card__tags a,
.card__tags span {
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
}
.card__tags a:hover { background: var(--accent-deep); }
.card__tags .tag--signal { background: var(--signal); }

.card__title {
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.125;
  color: #fff;
}
.card--sm .card__title { font-size: 28px; }
.card__meta {
  margin: 0;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}
.card__meta strong {
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.card__excerpt {
  max-width: 44ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .82);
}
.card__cta { margin-top: auto; padding-top: 26px; }

/* --------------------------------------------------------------------------
   10. Feature block — image panel + copy, mirrors the theme's post layout
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--color-border);
  background: #fff;
}
.feature__media {
  position: relative;
  min-height: 380px;
  background: var(--slate-800);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feature__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.feature__media::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10, 26, 38, .46);
}
.feature__play { position: relative; z-index: 2; }
.feature__play {
  width: 88px; height: 88px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(10, 26, 38, .55);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  transition: background-color .25s ease, transform .25s ease;
}
.feature__play:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.feature__play svg { margin-left: 4px; }
.feature__body { padding: 56px 52px; align-self: center; }
.feature__body h3 { font-size: 30px; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   11. Resource pair
   -------------------------------------------------------------------------- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.resource {
  padding: 40px 38px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
}
.resource__num {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}
.resource h3 { font-size: 26px; margin-bottom: 12px; }
.resource p { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   12. Interleaved CTA rows
   Placed where the visitor has just understood something — after seeing what
   is recruiting, after the process, after the objections — not every second
   section. All three point at the sign-up panel (#sms).
   -------------------------------------------------------------------------- */
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 26px 32px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
}
.cta-row p {
  max-width: 62ch;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--slate-800);
}
.cta-row .button { flex: none; }

/* --------------------------------------------------------------------------
   13. Sign-up panel (#sms)
   Solid ink surface. Mobile number, terms checkbox, and the full SMS consent
   block — the disclosure a carrier expects to find without leaving the page.
   -------------------------------------------------------------------------- */
.band {
  padding: 72px 0;
  scroll-margin-top: 64px;   /* clears the sticky header on a #sms jump */
  color: #fff;
  background: var(--slate-900);
  border-top: 3px solid var(--accent);
}
.band__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.band h2 { font-size: 34px; margin: 0 0 14px; color: #fff; }
.band p { color: var(--color-text-inverse); }

.subscribe {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.subscribe__intro p { max-width: 46ch; margin: 0; }

.subscribe .field { margin-bottom: 18px; }
.subscribe .field label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.subscribe .field input {
  width: 100%;
  max-width: 340px;
  padding: 13px 14px;
  font: 400 15px/1.4 var(--font-primary);
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--color-border-inverse);
}
.subscribe .field input::placeholder { color: var(--slate-500); }
.subscribe .field input:focus {
  outline: none;
  background: rgba(255, 255, 255, .12);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(21, 163, 168, .28);
}
.req { color: var(--alert-bright); }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  margin-bottom: 16px;
}
.check input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent-bright);
  flex: none;
}
.check label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-400);
}
.check a { color: var(--accent-bright); text-decoration: underline; }
.check a:hover { color: #fff; }
.check--primary label { font-size: 13px; color: var(--color-text-inverse); }

.subscribe .actions { margin-top: 22px; }

/* Validation. Alert red is already reserved for safety and required markers,
   so an unmet requirement reads in the same language. */
.check.is-invalid label,
.check.is-invalid span,
.field.is-invalid label { color: var(--alert-bright); }
.check.is-invalid input[type="checkbox"] {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}
.field.is-invalid input { border-color: var(--alert-bright); }
.form-error {
  margin: 18px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  background: rgba(179, 50, 31, .38);
  border-left: 3px solid var(--alert-bright);
}

.subscribe__done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 28px;
  background: rgba(21, 163, 168, .12);
  border-left: 4px solid var(--accent-bright);
}
.subscribe__done svg { flex: none; margin-top: 2px; color: var(--accent-bright); }
.subscribe__done b { display: block; margin-bottom: 6px; color: #fff; font-size: 16px; }
.subscribe__done span span { font-size: 14px; color: var(--color-text-inverse); }

/* The sign-up form (home panel and study-texts). Same dark surface as the band. */
.signup-form .field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.subscribe .field input,
.subscribe .field select { max-width: none; }
.subscribe .field select {
  width: 100%;
  padding: 13px 14px;
  font: 400 15px/1.4 var(--font-primary);
  color: #fff;
  background: var(--slate-800);
  border: 1px solid var(--color-border-inverse);
  border-radius: 0;
}
.subscribe .field select:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(21, 163, 168, .28);
}
.field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--slate-400); }
.consents { margin-top: 8px; }
.consents .check span { font-size: 12px; line-height: 1.6; color: var(--slate-400); }
.consents .check--primary span { font-size: 13px; color: var(--color-text-inverse); }
.consents .check { cursor: pointer; }
.band .fine { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--slate-400); }
.band .fine a { color: var(--accent-bright); text-decoration: underline; }

/* A field a person never sees. Off-screen rather than display:none, which
   some bots read as "skip this one". */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error { display: none; }
.form-error.is-shown { display: block; margin: 0 0 18px; }
.form-done { display: none; }
.form-done.is-shown { display: flex; }
.form-done:focus { outline: none; }

/* --------------------------------------------------------------------------
   14. Contact panel
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
}
.contact__intro, .contact__details { padding: 44px 42px; }
.contact__intro { background: var(--slate-50); }
.contact__details { border-left: 1px solid var(--color-border); }
.contact h3 { font-size: 26px; }
.contact dl { margin: 0; }
.contact dt {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.contact dd {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-highlight);
}
.contact dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14b. Safety / adverse-event block
   The one destination the utility bar's alert link points at. Alert red is
   reserved for this and for required-field markers, nowhere else.
   -------------------------------------------------------------------------- */
.safety {
  margin-top: 20px;
  padding: 34px 38px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--alert);
  scroll-margin-top: 80px;
}
.safety h3 {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alert);
}
.safety__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.safety h4 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-highlight);
}
.safety p { margin: 0; font-size: 14px; line-height: 1.6; }
.safety__note {
  margin-top: 26px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--slate-600);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   15. Pagination rule (Curious' "PAGE 1 OF 1")
   -------------------------------------------------------------------------- */
.pagination {
  padding: 34px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   16. Footer — bordered widget box + bottom bar, straight from the theme
   -------------------------------------------------------------------------- */
.site-footer { padding: 80px 0 0; }

.footer-widgets { border: 1px solid var(--color-border); }
.footer-widgets__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.footer-widgets__row + .footer-widgets__row { border-top: 1px solid var(--color-border); }
.widget { padding: 38px 40px; }
.widget + .widget { border-left: 1px solid var(--color-border); }
.widget h4 {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-list { margin: 0; }
.contact-list dt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-600);
  margin-bottom: 3px;
}
.contact-list dd { margin: 0 0 16px; font-weight: 500; color: var(--slate-700); }
.contact-list dd:last-child { margin-bottom: 0; }

.resource-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.resource-list__item { display: flex; gap: 12px; }
.resource-list__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--slate-200);
}
.resource-list__item h5 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.resource-list__item h5 a { color: var(--color-text-highlight); }
.resource-list__item h5 a:hover { color: var(--accent); }
.resource-list__item time {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slate-700);
  border: 1px solid var(--color-border);
}
.tag-cloud a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 0 14px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-nav a,
.footer-social a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.footer-nav a:hover, .footer-social a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 16px; align-items: center; }

.footer-legal {
  padding: 0 0 56px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.footer-legal strong {
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-highlight);
}

/* --------------------------------------------------------------------------
   16b. Area-of-study pages
   Photo hero, headline figure, enrolling trials, then the subtype breakdown.
   -------------------------------------------------------------------------- */
.cond-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  padding: 64px 0;
  overflow: hidden;
  background: var(--slate-900);
}
.cond-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 26, 38, .7);
}
.cond-hero__inner { position: relative; z-index: 2; }
.cond-hero__content {
  max-width: 660px;
  padding-left: 30px;
  border-left: 4px solid var(--accent-bright);
}
.cond-hero__content h1 {
  margin: 4px 0 16px;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
  color: #fff;
}
.cond-hero__content > p { color: var(--color-text-inverse); }
.cond-hero .crumbs { color: var(--slate-400); }
.cond-hero .card__tags { margin-bottom: 14px; }

.statband {
  padding: 34px 0;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--color-border);
}
.statband__inner {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.statband__n {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-deep);
}
.statband__l { max-width: 58ch; margin: 0; color: var(--slate-700); }

.trials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.trial {
  position: relative;                /* anchors the stretched link below */
  padding: 30px 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* The whole card is the target, not just the title. ::before does the
   stretching so the chevron can keep ::after. */
.trial__title a::before { content: ""; position: absolute; inset: 0; }
.trial:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px -18px rgba(15, 34, 51, .45);
}
.trial:hover .trial__title a { color: var(--accent); }
.trial:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.trial__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.is-open { background: #1d8a4e; }
.dot.is-soon { background: var(--slate-400); }
.trial__title { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.trial__title a { color: var(--color-text-highlight); }
.trial__title a:hover { color: var(--accent); }
.trial__title a::after { content: " \203A"; color: var(--accent); font-weight: 700; }
.trial__desc { margin: 0; font-size: 14px; line-height: 1.6; }

.area {
  display: grid;
  grid-template-columns: 1fr;
  padding: 30px 34px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--accent);
}
.area + .area { margin-top: 16px; }
.area.is-flipped { border-left-color: var(--signal); }
.area__body h3 { margin: 0 0 14px; font-size: 24px; }
.area__body ul { margin: 0; padding: 0; list-style: none; }
.area__body li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  line-height: 1.6;
}
.area__body li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 7px; height: 1px;
  background: var(--accent);
}
.area.is-flipped .area__body li::before { background: var(--signal); }
.area__body li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Document pages (terms, privacy, SMS terms)
   A reading column, a numbered table of contents, and nothing else competing
   for attention. Same type scale as the rest of the site.
   -------------------------------------------------------------------------- */
.page-head {
  padding: 62px 0 58px;
  color: #fff;
  background: var(--slate-900);
  border-bottom: 3px solid var(--accent);
}
.page-head h1 {
  max-width: 20ch;
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
  color: #fff;
}
.page-head p { max-width: 58ch; margin: 0; color: var(--color-text-inverse); }

.crumbs {
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.crumbs a { color: var(--accent-bright); }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 8px; opacity: .5; }

.doc { max-width: 760px; }
.doc__meta {
  margin-bottom: 34px;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-600);
  background: var(--slate-50);
  border-left: 3px solid var(--accent);
}

.toc {
  margin-bottom: 48px;
  padding: 24px 28px;
  border: 1px solid var(--color-border);
}
.toc::before {
  content: "On this page";
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-highlight);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 32px;
}
.toc li { counter-increment: toc; margin-bottom: 8px; break-inside: avoid; }
.toc a { font-size: 14px; color: var(--slate-700); }
.toc a::before {
  content: counter(toc) ". ";
  font-weight: 600;
  color: var(--accent);
}
.toc a:hover { color: var(--accent); }

.doc > section { margin-bottom: 44px; scroll-margin-top: 80px; }
.doc > section:last-child { margin-bottom: 0; }
.doc h2 {
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-border);
}
.doc h2 span { margin-right: 10px; color: var(--accent); }
.doc h3 {
  margin: 26px 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.doc p { margin-bottom: 1.1em; }
.doc dl { margin: 0 0 1.1em; }
.doc dt {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.doc dd { margin: 4px 0 0; }
.doc address {
  margin-top: 6px;
  padding: 18px 22px;
  font-style: normal;
  line-height: 1.75;
  background: var(--slate-50);
  border-left: 3px solid var(--accent);
}
.doc .fine { font-size: 13px; color: var(--slate-600); }
.doc .upper { text-transform: uppercase; font-size: 13px; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .feature { grid-template-columns: 1fr; }
  .feature__media { min-height: 260px; }
  .feature__body { padding: 40px 32px; }
  .hero__title { font-size: 52px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-header .container { flex-wrap: wrap; gap: 16px; min-height: 58px; }
  .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    display: none;
    border-top: 1px solid var(--color-border-inverse);
  }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid var(--color-border-inverse); }
  .site-nav > ul > li:last-child { border-bottom: 0; }
  .site-nav a, .site-nav .nav-parent { padding: 14px 0; width: 100%; }
  .dropdown {
    position: static; width: auto; max-width: none;
    opacity: 1; visibility: visible; transform: none;
    border: 0; border-top: 1px solid var(--color-border-inverse);
    box-shadow: none; background: transparent; padding: 0 0 8px;
  }
  .dropdown a { color: var(--slate-400); padding: 8px 0 8px 16px; white-space: normal; }
  .dropdown a:hover { background: transparent; color: #fff; }
  .header-actions { order: 2; margin-left: 0; }
  .nav-toggle { order: 1; }

  .card-grid, .resource-grid, .contact,
  .footer-widgets__row, .resource-list { grid-template-columns: 1fr; }
  .widget + .widget { border-left: 0; border-top: 1px solid var(--color-border); }
  .contact__details { border-left: 0; border-top: 1px solid var(--color-border); }
  .safety__grid { grid-template-columns: 1fr; gap: 22px; }
  .trials { grid-template-columns: 1fr; }
  .cond-hero { min-height: 400px; padding: 48px 0; }
  .cond-hero__content h1 { font-size: 30px; }
  .cond-hero__content { padding-left: 18px; }
  .statband__n { font-size: 34px; }
  .area { padding: 24px 22px; }
  .safety { padding: 26px 22px; }

  .finder__form { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero__panel { min-height: 440px; padding: 56px 0; }
  .hero__title { font-size: 40px; }
  .page-head { padding: 46px 0 42px; }
  .page-head h1 { font-size: 30px; }
  .toc ol { columns: 1; }
  .card__title { font-size: 28px; }
  .card--sm .card__title { font-size: 24px; }
  .band h2 { font-size: 28px; }
  .subscribe { grid-template-columns: 1fr; gap: 32px; }
  .signup-form .field-2 { grid-template-columns: 1fr; }
  .cta-row { padding: 22px 24px; }
  .cta-row p { font-size: 16px; }
}

@media (max-width: 520px) {
  .utility-bar .container { justify-content: flex-start; gap: 14px; min-height: 0; padding-block: 8px; }
  .hero__title { font-size: 34px; }
  .hero__content { padding-left: 18px; }
  .finder__card { padding: 24px 20px; }
  .card { padding: 26px 22px; }
  .widget, .contact__intro, .contact__details { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}