/* ==========================================================================
   Coreo — layout.css
   Containers, site header, hero, section scaffolding, and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Containers + section scaffolding
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight   { padding-block: calc(var(--section-y) * 0.62); }
.section--alt     { background: var(--surface-alt); }
.section--teal    { background: var(--teal-wash); }
.section--plum    { background: var(--plum-wash); }

/* Deep plum band used for the closing segmented CTA */
.section--plum-solid {
  background: linear-gradient(150deg, #8C236E 0%, #6d1b56 100%);
  color: rgba(255, 255, 255, 0.86);
}
.section--plum-solid h2,
.section--plum-solid h3 { color: #fff; }
.section--plum-solid .eyebrow { color: rgba(255, 255, 255, 0.75); }

/* Section intro block — eyebrow, heading, lead */
.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 18px; }

/* Full-bleed intro — heading and lead span the whole container, so they line
   up with a full-width image beneath rather than stopping halfway across. */
.section-head--full { max-width: none; }
.section-head--full .lead { max-width: none; }

/* Headings written as one sentence per line */
.line { display: block; }

/* --------------------------------------------------------------------------
   Phrase stack — a heading built from parallel phrases, set one per line with
   a stepped teal rule that lengthens down the list. The repeated opening words
   drop back in weight and tone so the differing nouns carry the emphasis.
   -------------------------------------------------------------------------- */
.phrase-stack {
  display: flex;
  flex-direction: column;
  gap: 0.30em;
}

.phrase {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* The rule steps longer on each successive line. A real element rather than a
   pseudo-element, so it renders reliably everywhere. The heading already fades
   in via [data-reveal], so the bars need no animation of their own. */
.phrase__bar {
  flex: none;
  width: 30px;
  height: 5px;
  border-radius: 3px;
  background: var(--teal);
}
.phrase:nth-child(2) .phrase__bar { width: 52px; }
.phrase:nth-child(3) .phrase__bar { width: 74px; }

.phrase__lead { color: var(--ink-soft); font-weight: 500; }
.phrase__key  { color: var(--ink);      font-weight: 750; }

@media (max-width: 640px) {
  .phrase__bar { width: 18px; height: 4px; }
  .phrase:nth-child(2) .phrase__bar { width: 30px; }
  .phrase:nth-child(3) .phrase__bar { width: 42px; }
}

/* Long headings that should hold a single line on desktop. Each is sized so the
   text fits the container at full width; all still wrap gracefully on narrower
   screens, where one line would be too small to read. */
.h2--single-line { font-size: clamp(1.55rem, 1.05rem + 1.75vw, 2.25rem); }
.h1--fit-md      { font-size: clamp(1.75rem, 1.15rem + 2.10vw, 2.70rem); }
.h1--fit-sm      { font-size: clamp(1.60rem, 1.05rem + 1.90vw, 2.25rem); }
.h3--single-line { font-size: clamp(1.10rem, 0.95rem + 0.55vw, 1.35rem); }

/* Short teal rule used beneath centered headings */
.section-head--center h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 2px;
  background: var(--teal);
}

/* --------------------------------------------------------------------------
   2. Site header
   Transparent while over the hero, then solid once the page scrolls.
   -------------------------------------------------------------------------- */
/* Sticky rather than fixed: the header occupies real layout space, so the hero
   video begins beneath it instead of running underneath the logo and nav. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  transition: min-height 0.35s var(--ease);
}

.site-header__logo { flex: none; display: block; }
.site-header__logo img {
  width: auto;
  height: 42px;
  transition: height 0.35s var(--ease);
}

/* Scrolled state — condenses slightly and lifts off the page */
.site-header.is-stuck {
  box-shadow: 0 1px 24px rgba(18, 38, 46, 0.09);
}
.site-header.is-stuck .site-header__inner { min-height: 70px; }
.site-header.is-stuck .site-header__logo img { height: 36px; }

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: 34px; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: block;
  padding: 6px 0;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--teal); }

/* Mobile menu button */
.nav__toggle {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.3s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. Hero — full-bleed background video with an overlaying teal message card
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-bottom: clamp(52px, 6vw, 88px);
}

/* The video sits in normal flow directly beneath the header, at its own 16:9
   ratio so the entire frame is visible — nothing cropped, nothing behind the
   nav. Its bottom edge is shaped by the SVG curve below, not by border-radius. */
.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Curved bottom edge: a white wedge rising toward the centre, matching the
   separator used on coreo.health. preserveAspectRatio="none" lets the single
   path stretch to any width while keeping a constant depth. */
.hero__curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* overlaps the video edge by a pixel to avoid a seam */
  width: 100%;
  /* Kept shallower than the card's overlap below, so the wedge's peak at the
     centre always sits behind the card and no white shows through the middle.
     If you deepen this, deepen .hero__card's negative margin-top to match. */
  height: clamp(22px, 3.2vw, 50px);
  display: block;
  pointer-events: none;
}
.hero__curve path { fill: var(--surface); }

/* A soft vignette at the base so the card meets the footage cleanly */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(18, 38, 46, 0.10) 0%,
      rgba(18, 38, 46, 0.00) 34%,
      rgba(18, 38, 46, 0.28) 100%);
}

/* The teal message card — centered, overlapping only the bottom of the video */
.hero__card {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  /* Overlaps only the very bottom of the video, leaving the frame visible */
  margin-top: calc(-1 * clamp(42px, 4.25vw, 66px));
  margin-inline: auto;
  padding: clamp(30px, 3.4vw, 50px) clamp(24px, 3.4vw, 52px);
  border-radius: var(--radius-lg);
  background: var(--teal);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
}

.hero__card h1 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.8rem);
}

.hero__card .btn-row { justify-content: center; }

.hero__sub {
  max-width: 62ch;
  margin: 0 auto 16px;
  font-size: clamp(1.03rem, 0.96rem + 0.35vw, 1.19rem);
  font-weight: 550;
  line-height: 1.55;
  color: #fff;
}

.hero__support {
  max-width: 76ch;
  margin: 0 auto 30px;
  font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.90);
}

/* --------------------------------------------------------------------------
   5. Page hero — the compact banner used on interior pages
   -------------------------------------------------------------------------- */
/* Interior page banner. Its bottom edge carries the same shallow arc as the
   hero video on the home page, so every page shares the curved language. */
.page-hero {
  position: relative;
  padding-top: clamp(52px, 5.5vw, 84px);
  padding-bottom: clamp(76px, 8vw, 116px);
  background:
    linear-gradient(163deg,
      rgba(19, 169, 158, 0.17) 0%,
      rgba(19, 169, 158, 0.06) 58%,
      rgba(19, 169, 158, 0.02) 100%);
  border-radius: 0 0 50% 50% / 0 0 clamp(26px, 4vw, 72px) clamp(26px, 4vw, 72px);
}
.page-hero .lead { max-width: 74ch; margin-top: 20px; }

/* --------------------------------------------------------------------------
   6. Generic layout helpers
   -------------------------------------------------------------------------- */
/* Two-column: copy beside a supporting image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split--wide-text { grid-template-columns: 1.15fr 1fr; }
.split--wide-media { grid-template-columns: 1fr 1.15fr; }

/* Alternating rows: puts the copy on the right, the media on the left.
   Reverts to copy-first when the columns stack. */
.split--flip > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split--flip > *:first-child { order: 0; }
}

/* Auto-fitting card grids */
.grid { display: grid; gap: 26px; }
.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)); }

.stack-lg > * + * { margin-top: 34px; }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
/* Navy footer with an arched top edge mirroring the curve under the hero.
   The extra top padding keeps content clear of the arc at the corners. */
.site-footer {
  padding-block: clamp(84px, 9vw, 126px) 34px;
  background: var(--navy);
  border-radius: 50% 50% 0 0 / clamp(26px, 4vw, 72px) clamp(26px, 4vw, 72px) 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__logo img {
  width: auto;
  height: 40px;
  margin-bottom: 20px;
  /* The logo is dark-on-transparent; lift it for the dark footer */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.site-footer__tag { max-width: 34ch; line-height: 1.6; }

.site-footer h4 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 11px; }

.site-footer a { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.42);
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --section-y: 92px; }
  .nav__list { gap: 22px; }
  .nav { gap: 24px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .site-footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Collapse the nav into a slide-down panel */
  .nav__toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    display: block;
    padding: 104px var(--gutter) 36px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(18, 38, 46, 0.14);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.42s var(--ease), visibility 0.42s;
  }

  .nav.is-open { transform: translateY(0); visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li { border-bottom: 1px solid var(--line); }

  .nav__link,
  .site-header:not(.is-stuck):not(.site-header--solid) .nav__link {
    padding: 17px 2px;
    color: var(--ink);
    font-size: 1.0625rem;
    text-shadow: none;
  }
  .nav__link::after,
  .site-header:not(.is-stuck):not(.site-header--solid) .nav__link::after { display: none; }
  .nav__link[aria-current="page"],
  .site-header:not(.is-stuck):not(.site-header--solid) .nav__link[aria-current="page"] { color: var(--teal); }

  .nav .btn { width: 100%; margin-top: 26px; }

  /* The toggle must stay above the panel it opens */
  .nav__toggle { position: relative; z-index: 2; }

  /* Keep the header opaque while the menu is open */
  .site-header.is-menu-open {
    background: #fff;
    border-bottom-color: var(--line);
  }
  .site-header.is-menu-open .nav__toggle span { background: var(--ink); }

  .split,
  .split--wide-text,
  .split--wide-media { grid-template-columns: 1fr; gap: 34px; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-hero { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 640px) {
  :root { --section-y: 72px; --gutter: 20px; }

  body { font-size: 16px; }

  .site-header__inner { min-height: 68px; }
  .site-header__logo img,
  .site-header.is-stuck .site-header__logo img { height: 32px; }

  .hero { padding-bottom: 34px; }

  .hero__card {
    border-radius: var(--radius);
    padding: 26px 22px 28px;
    /* A shallower overlap on phones, where the card is tall and the video short.
       Still clears the 22px curve with room to spare, so no white shows through. */
    margin-top: -34px;
  }
  .hero__card h1 { margin-bottom: 14px; }
  .hero__sub {
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero__support {
    margin-bottom: 24px;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .hero .btn-row { gap: 10px; }
  .hero .btn { width: 100%; padding: 14px 24px; }

  .section-head { margin-bottom: 38px; }

  .grid { gap: 18px; }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Very small phones — keep the hero card from crowding the viewport */
@media (max-width: 380px) {
  .hero__card { padding: 24px 20px; }
}