/* ============================================================
   Boulder Biologics — homepage (2026-10 redesign)
   ============================================================
   Layout and visuals from the "Homepage Final" design handoff
   (light bands, navy header/hero, gradient contact panel).
   The homepage is intentionally NOT on _theme-dark.css. Header,
   footer, buttons and tokens live in site-chrome.css (load that
   first); this file is the homepage sections only.
   ============================================================ */

:root {
  /* tokens (--hp-*) live in site-chrome.css */
  /* _nav.css reads these for the hamburger panel */
  --ink: var(--hp-on-dark);
  --rule: var(--hp-rule-dk);
  --paper-2: var(--hp-navy);
  --brand-accent: var(--hp-sky);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.hp {
  margin: 0;
  background: var(--hp-bone);
  color: var(--hp-navy);
  font-family: var(--hp-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hp img { max-width: 100%; height: auto; display: block; }
.hp a { color: inherit; text-decoration: none; }
.hp h1, .hp h2, .hp h3, .hp h4, .hp p { margin: 0; }
.hp :focus-visible { outline: 2px solid var(--hp-sky); outline-offset: 3px; border-radius: 6px; }

.hp-wrap { max-width: calc(var(--hp-max) + 2 * var(--hp-gutter)); margin: 0 auto; padding-inline: var(--hp-gutter); }
.hp-band { padding-block: 96px; }
.hp-band--stone { background: var(--hp-stone); }

.hp-eyebrow { font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hp-blue); }
.hp-eyebrow--dark { color: var(--hp-sky-lt); }
.hp-h2 { font-family: var(--hp-serif); font-weight: 600; font-size: 42px; line-height: 1.15; letter-spacing: -0.01em; color: var(--hp-navy); text-wrap: balance; }
.hp-lede { font-size: 18px; line-height: 1.6; color: var(--hp-text-2); }
.hp-lede a { color: var(--hp-blue); font-weight: 600; }
.hp-more { font-weight: 600; font-size: 16px; color: var(--hp-blue); transition: color 220ms var(--hp-ease); }
.hp-more:hover { color: var(--hp-blue-dk); }
.hp-head { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   Hero
   ============================================================ */
.hp-hero {
  background: radial-gradient(ellipse 60% 80% at 30% 0%, rgba(21,99,135,0.40), transparent 70%), var(--hp-navy);
  color: var(--hp-on-dark);
}
.hp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 64px; align-items: center;
  padding-top: 88px; padding-bottom: 112px;
}
.hp-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hp-hero h1 {
  font-family: var(--hp-serif); font-weight: 600; font-size: 58px; line-height: 1.08;
  letter-spacing: -0.015em; color: var(--hp-on-dark); text-wrap: balance;
}
.hp-hero__lede { font-size: 20px; line-height: 1.6; color: var(--hp-on-dark-2); max-width: 54ch; }
.hp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hp-hero__media { position: relative; }
.hp-hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 24px; }
.hp-hero__chip {
  position: absolute; bottom: 24px;
  /* Right edge sits ~10px past the needle (50.5% across the photo). Where the
     box is too wide for that (phones, ~900-1000px), it stays 14px in from the
     photo's left edge instead, so it covers more of the needle there. */
  right: min(calc(49.5% - 10px), calc(100% - 14px - 220px));
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(18,40,64,0.62); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 12px 16px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff; max-width: calc(100% - 28px); width: max-content;
}
.hp-hero__chip strong { font-weight: 600; font-size: 15px; color: var(--hp-on-dark); }

/* ---------- Jump bar + trust row ---------- */
.hp-jump-wrap { position: relative; z-index: 2; margin-top: -30px; }
.hp-jump {
  display: flex; align-items: center; gap: 28px;
  background: #fff; border: 1px solid var(--hp-rule); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(7,23,42,0.12);
  padding: 18px 28px; font-size: 16px; font-weight: 600;
  overflow-x: auto; scrollbar-width: none;
}
.hp-jump::-webkit-scrollbar { display: none; }
/* centred; auto margins (not justify-content) so a scrolling bar on phones doesn't clip its first item */
.hp-jump > :first-child { margin-left: auto; }
.hp-jump > :last-child { margin-right: auto; }
.hp-jump span {
  color: var(--hp-blue); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; padding-right: 22px; border-right: 1px solid rgba(7,23,42,0.18);
}
.hp-jump a { color: var(--hp-navy); white-space: nowrap; transition: color 220ms var(--hp-ease); }
.hp-jump a:hover { color: var(--hp-blue); }

.hp-trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 36px; padding: 0 28px;
}
.hp-trust__item { display: flex; align-items: center; gap: 14px; }
.hp-trust__ic {
  width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(21,69,122,0.08); color: var(--hp-blue);
}
.hp-trust__item strong { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; }
.hp-trust__item > div > span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--hp-meta); }

/* ============================================================
   Therapies + conditions
   ============================================================ */
.hp-therapies { padding-top: 72px; }
.hp-therapies .hp-wrap { display: flex; flex-direction: column; gap: 40px; }
/* Split headers (heading left, paragraph right): the heading column hugs the heading and the
   paragraph sits beside it at a reading width, so short headings don't leave a gulf. Shared by
   .hp-intro, .hp-cond__head and .hp-reviews__head so all three match. */
.hp-intro, .hp-cond__head, .hp-reviews__head {
  display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 58ch); justify-content: start;
  column-gap: 56px; align-items: end;
}

.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hp-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--hp-rule); border-radius: 16px; box-shadow: var(--hp-shadow);
  padding: 20px 22px; color: var(--hp-navy);
  transition: border-color 220ms var(--hp-ease), box-shadow 220ms var(--hp-ease), transform 220ms var(--hp-ease);
}
.hp-card:hover { border-color: rgba(21,69,122,0.45); box-shadow: 0 2px 4px rgba(7,23,42,0.06), 0 12px 28px rgba(7,23,42,0.08); transform: translateY(-1px); }
.hp-card__top { display: flex; align-items: center; gap: 14px; }
.hp-card__img {
  width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--hp-rule);
  background: #060f1c no-repeat 50% 50% / cover;
}
.hp-card__cat { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-blue); line-height: 1.3; }
.hp-card__title { font-family: var(--hp-serif); font-weight: 600; font-size: 20px; line-height: 1.3; margin-top: 2px; }
.hp-card__desc { flex: 1; font-size: 15px; line-height: 1.5; color: var(--hp-text-2); }
.hp-card__go { font-size: 15px; font-weight: 600; color: var(--hp-blue); }

.hp-card--wide {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px;
  padding: 24px 28px;
}
.hp-card--wide .hp-card__img { width: 64px; height: 64px; border-radius: 14px; }
.hp-card--wide .hp-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hp-card--wide .hp-card__title { font-size: 22px; margin: 0; }

.hp-cond {
  margin-top: 8px; background: #fff; border: 1px solid var(--hp-rule); border-radius: 20px;
  box-shadow: var(--hp-shadow); padding: 32px; display: flex; flex-direction: column; gap: 22px;
}
.hp-cond__head h3 { font-family: var(--hp-serif); font-weight: 600; font-size: 28px; line-height: 1.2; margin-top: 6px; }
.hp-cond__head p { font-size: 16px; line-height: 1.55; color: var(--hp-text-2); }
.hp-cond__group { display: flex; flex-direction: column; gap: 10px; }
.hp-cond__label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-meta); }
.hp-cond__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hp-tile {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  background: #f3f0e9; border: 1px solid rgba(7,23,42,0.16); border-radius: 14px;  /* clearly set off from the white card */
  padding: 16px 18px; color: var(--hp-navy);
  transition: border-color 220ms var(--hp-ease);
}
.hp-tile:hover { border-color: var(--hp-blue); }
.hp-tile--wide { grid-column: 1 / -1; justify-content: center; position: relative; padding-inline: 64px; }
.hp-tile--wide .hp-tile__txt { align-items: center; text-align: center; }
.hp-tile--wide .hp-tile__meta { max-width: 90ch; }
/* arrow pinned right so the text block stays truly centred */
.hp-tile--wide .hp-tile__arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.hp-tile__txt { display: flex; flex-direction: column; gap: 4px; }
.hp-tile__name { font-weight: 600; font-size: 17px; line-height: 1.3; }
.hp-tile__meta { font-size: 14px; line-height: 1.45; color: var(--hp-meta); }
.hp-tile__note { font-size: 13.5px; line-height: 1.45; color: var(--hp-text-2); font-style: italic; }
.hp-tile__arrow {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(21,69,122,0.10); color: var(--hp-blue); font-weight: 600;
  transition: background-color 220ms var(--hp-ease), color 220ms var(--hp-ease);
}
.hp-tile:hover .hp-tile__arrow { background: var(--hp-blue); color: #fff; }

/* ============================================================
   Team
   ============================================================ */
.hp-team .hp-wrap { display: flex; flex-direction: column; gap: 40px; }
.hp-team__head { max-width: 760px; }
.hp-team__head .hp-lede { font-size: 19px; }
.hp-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.hp-person { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 20px 28px; align-items: start; }
.hp-person picture img, .hp-person > img { width: 200px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.hp-person__body { display: flex; flex-direction: column; gap: 8px; }
.hp-person__role { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-blue); }
.hp-person__name { font-family: var(--hp-serif); font-weight: 600; font-size: 26px; line-height: 1.2; }
.hp-person__bio { font-size: 16.5px; line-height: 1.55; color: var(--hp-text-2); }
/* Button and bio link side by side on a row spanning the whole card (photo + text),
   on the card's last grid row so the pairs line up across both cards */
.hp-person__actions { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }

.hp-research {
  display: flex; justify-content: space-between; align-items: center; gap: 48px;
  width: fit-content; max-width: 100%; margin-inline: auto;  /* box hugs its content, centred under the team cards */
  background: #fff; border: 1px solid var(--hp-rule); border-radius: 20px; box-shadow: var(--hp-shadow);
  padding: 26px 32px;
}
.hp-research__txt { display: flex; flex-direction: column; gap: 6px; max-width: 78ch; }
.hp-research__txt h3 { font-family: var(--hp-serif); font-weight: 600; font-size: 22px; line-height: 1.3; }
.hp-research__txt p { font-size: 16.5px; line-height: 1.55; color: var(--hp-text-2); }
.hp-research__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }

/* ============================================================
   Reviews
   ============================================================ */
.hp-reviews .hp-wrap { display: flex; flex-direction: column; gap: 36px; }
.hp-reviews__head p { font-size: 17px; line-height: 1.6; color: var(--hp-text-2); }
.hp-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-review {
  display: flex; flex-direction: column; gap: 14px; margin: 0;
  background: #fff; border: 1px solid var(--hp-rule); border-radius: 20px; box-shadow: var(--hp-shadow);
  padding: 28px;
}
.hp-review__stars { color: var(--hp-blue); letter-spacing: 3px; font-size: 13px; }
.hp-review blockquote { margin: 0; flex: 1; font-family: var(--hp-serif); font-size: 19px; line-height: 1.5; color: var(--hp-navy); }
.hp-review figcaption { font-size: 15px; color: var(--hp-meta); }

/* ============================================================
   FAQ
   ============================================================ */
.hp-faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.hp-faq__head p { font-size: 16.5px; line-height: 1.55; color: var(--hp-text-2); margin-top: 6px; }
.hp-faq__head .hp-more { margin-top: 8px; }
.hp-faq details { border-bottom: 1px solid var(--hp-rule); padding: 20px 0; }
.hp-faq details:first-child { padding-top: 4px; }
.hp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--hp-serif); font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--hp-navy);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary .plus { color: var(--hp-blue); font-family: var(--hp-sans); font-weight: 400; font-size: 24px; line-height: 1.1; transition: transform 220ms var(--hp-ease); }
.hp-faq details[open] summary .plus { transform: rotate(45deg); }
.hp-faq details p { font-size: 17px; line-height: 1.6; color: var(--hp-text-2); margin-top: 14px; max-width: 70ch; }

/* ============================================================
   Contact panel (#schedule)
   ============================================================ */
.hp-contact { padding-bottom: 80px; }
.hp-contact__panel {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); gap: 48px; align-items: start;
  padding: 56px; border-radius: 24px; color: #fff;
  background: linear-gradient(170deg, #0f6387 0%, #15457a 60%, #0c2a4d 100%);
}
.hp-contact__copy { display: flex; flex-direction: column; gap: 18px; }
.hp-contact__copy h2 { font-family: var(--hp-serif); font-weight: 600; font-size: 40px; line-height: 1.15; color: #fff; text-wrap: balance; }
.hp-contact__copy > p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.88); }
.hp-contact__call { align-self: flex-start; font-size: 22px; padding: 18px 34px; margin-top: 4px; }
.hp-contact__info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.88);
}
.hp-contact__info strong { display: block; font-weight: 600; color: #fff; margin-bottom: 4px; }

.hp .intake-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start;
  background: rgba(6,15,28,0.45); border: 1px solid rgba(255,255,255,0.16); border-radius: 20px;
  padding: 28px; color: #fff;
}
.hp .intake-form__intro { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.hp .intake-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
/* two-column field grid: fields pair up; everything else (intro, name row,
   call note, the day checkboxes, submit, disclaimer, errors) spans both columns.
   contact-form.js / provider-booking.js inject fields, so this keys off structure. */
.hp .intake-form > :not(.intake-field),
.hp .intake-form > .intake-field:has(input[type="checkbox"]) { grid-column: 1 / -1; }
.hp .intake-form button[type="submit"] { justify-self: start; min-width: 240px; }
.hp .intake-form .disclaimer { text-align: left !important; margin-top: -4px; }
.hp .intake-field { display: flex; flex-direction: column; gap: 6px; }
.hp .intake-form label { font-size: 14px; font-weight: 600; color: rgba(221,232,241,0.92); }
.hp .intake-form input:not([type="checkbox"]):not([type="radio"]),
.hp .intake-form select,
.hp .intake-form textarea {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
  padding: 12px 14px; color: #fff; font-family: var(--hp-sans); font-size: 16px; line-height: 1.3;
  transition: border-color 220ms var(--hp-ease), background-color 220ms var(--hp-ease);
}
.hp .intake-form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cfe6f5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.hp .intake-form select option { color: var(--hp-navy); background: #fff; }
.hp .intake-form textarea { resize: vertical; }
.hp .intake-form input::placeholder, .hp .intake-form textarea::placeholder { color: rgba(255,255,255,0.45); }
.hp .intake-form input:focus, .hp .intake-form select:focus, .hp .intake-form textarea:focus {
  outline: none; border-color: var(--hp-sky-lt); background-color: rgba(255,255,255,0.09);
}
.hp .intake-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--hp-sky); }
.hp .intake-form .form-error { color: #ffd1c7; font-size: 14px; }
.hp .intake-form button[type="submit"] {
  font-family: var(--hp-sans); font-weight: 600; font-size: 16px; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.5); border-radius: 999px;
  padding: 13px 22px; cursor: pointer; margin-top: 4px;
  transition: background-color 220ms var(--hp-ease), border-color 220ms var(--hp-ease);
}
.hp .intake-form button[type="submit"]:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.75); }
.hp .intake-form .disclaimer { font-size: 13px; color: rgba(255,255,255,0.7); text-align: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .hp-hero h1 { font-size: 50px; }
  .hp-person { grid-template-columns: 160px minmax(0, 1fr); gap: 22px; }
  .hp-person picture img { width: 160px; }
}
@media (max-width: 960px) {
  .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-cond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-team__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .hp-band { padding-block: 72px; }
  .hp-hero__grid { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 88px; }
  .hp-intro, .hp-cond__head, .hp-reviews__head, .hp-faq__grid, .hp-contact__panel { grid-template-columns: 1fr; gap: 20px; }
  .hp-faq__grid { gap: 32px; }
  .hp-contact__panel { padding: 36px 28px; gap: 36px; }
  .hp-reviews__grid { grid-template-columns: 1fr; }
  .hp-research { flex-direction: column; align-items: flex-start; }
  .hp-research__actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .hp-trust { grid-template-columns: 1fr; gap: 14px; padding: 0 8px; }
  .hp-h2 { font-size: 36px; }
}
@media (max-width: 640px) {
  .hp-hero h1 { font-size: 38px; }
  .hp-hero__lede { font-size: 18px; }
  .hp-hero__ctas .hp-btn { flex: 1 1 100%; }
  .hp-hero__chip { bottom: 14px; padding: 10px 14px; }
  .hp-jump { padding: 14px 20px; gap: 20px; font-size: 15px; }
  .hp-h2 { font-size: 31px; }
  .hp-cards, .hp-cond__grid { grid-template-columns: 1fr; }
  .hp-card--wide { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hp-cond { padding: 22px 18px; }
  .hp-person { grid-template-columns: 1fr; }
  .hp-person__actions { flex-direction: column; align-items: center; }  /* too narrow for side by side: stack both cards the same way */
  .hp-person picture img { width: 180px; }
  .hp-faq summary { font-size: 19px; }
  .hp-contact__panel { padding: 28px 18px; border-radius: 20px; }
  .hp-contact__copy h2 { font-size: 32px; }
  .hp-contact__call { font-size: 19px; padding: 15px 26px; }
  .hp .intake-form { padding: 20px 16px; }
  .hp .intake-form, .hp .intake-form .row { grid-template-columns: 1fr; }
  .hp .intake-form button[type="submit"] { justify-self: stretch; }
  .hp-contact__info { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { transition: none !important; }
}
.hp-nowrap { white-space: nowrap; }