/* ============================================================
   ALPRIA LABS — one-page site
   Palette and imagery per design/README.txt (developer asset pack)
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --navy:        #09244F;
  --navy-deep:   #061733;
  --cobalt:      #1155E6;
  --cobalt-dark: #0D44BC;
  --ivory:       #F7F2EA;
  --ivory-lift:  #FBF7F1;
  --white:       #FFFFFF;

  --ink:          var(--navy);
  --ink-soft:     rgba(9, 36, 79, .80);
  --ink-invert:   rgba(255, 255, 255, .82);
  --line:         rgba(9, 36, 79, .16);
  --line-invert:  rgba(255, 255, 255, .22);

  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;

  --maxw:   1240px;
  --gutter: clamp(20px, 5vw, 44px);
  /* Left inset that reproduces .wrap's content edge, for full-bleed split
     sections. The 100% resolves against the section's containing block — the
     real content width — so it stays in step with .wrap even with a scrollbar
     on screen (100vw would not). Use only on a full-width child of <main>. */
  --edge-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --split-pad: clamp(28px, 3vw, 56px);

  --header-h: 68px;
  --section-y: clamp(56px, 8vw, 104px);
  --radius: 6px;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cobalt);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── Type ───────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: var(--cobalt);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow--on-navy { color: #6E9BFF; }

.hero__title,
.section__title {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.005em;
}
/* the hero wraps to the approved four lines on its own; balancing would
   re-break it, so it is only applied to the shorter section headings */
.section__title { text-wrap: balance; }

/* sized so "consumer health," clears the text column at every desktop width —
   that is what holds the headline to the approved four lines */
.hero__title   { font-size: clamp(2.5rem, 4.8vw, 4rem); }
.section__title{ font-size: clamp(2.05rem, 4vw, 3.25rem); }
.section__title--invert { color: var(--white); }

.hero__lede,
.section__body {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.section__body--invert { color: var(--ink-invert); }

/* keeps a hyphenated phrase from breaking at its hyphen */
.nobr { white-space: nowrap; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.btn--cobalt { background: var(--cobalt); color: var(--white); }
.btn--cobalt:hover { background: var(--cobalt-dark); }
.btn--cobalt:active { transform: translateY(1px); }
.btn--lg { padding: 15px 28px; font-size: 1rem; }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand { display: block; flex: none; }
.brand img { width: clamp(132px, 14vw, 186px); }

.nav__list { display: none; }
.site-header__cta { display: none; }

/* burger */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars i {
  display: block;
  height: 1.6px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* mobile drop panel */
.nav {
  position: absolute;
  inset: 100% 0 auto;
  display: none;
  padding: 8px var(--gutter) 24px;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.nav.is-open { display: block; }
.nav.is-open .nav__list { display: block; }

.nav__list a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
  text-decoration: none;
}
.nav__cta { display: block; margin-top: 20px; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { display: grid; }

.hero__text {
  padding: clamp(36px, 7vw, 64px) var(--gutter) clamp(32px, 6vw, 56px);
}
.hero__lede { margin-top: clamp(18px, 2.4vw, 26px); }
.hero__text .btn { margin-top: clamp(26px, 3.4vw, 36px); }

.hero__media picture { height: 100%; }
.hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* the four packs sit right of centre in the source frame */
  object-position: 88% 50%;
}

/* ── Credibility ────────────────────────────────────────── */
.credibility {
  background: var(--ivory-lift);
  border-block: 1px solid var(--line);
  padding-block: clamp(28px, 4.5vw, 56px);
}
.credibility__grid { display: grid; }

.fact { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding-block: 18px; }
.credibility__grid > .fact + .fact { border-top: 1px solid var(--line); }

.fact__icon { grid-row: span 2; color: var(--cobalt); }
.fact__icon svg { width: 30px; height: 30px; }

.fact__title {
  align-self: end;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
}
.fact__sub { color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }

/* ── Sections ───────────────────────────────────────────── */
.section { padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) + 8px); }

.about__grid { display: grid; gap: clamp(30px, 5vw, 64px); }
.about__text .section__body { margin-top: clamp(16px, 2vw, 22px); }
.about__media img { width: 100%; }

/* ── What we do ─────────────────────────────────────────── */
.what { padding-top: 0; }
.what__grid { display: grid; }

.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
}
.pillar__icon { grid-row: span 2; color: var(--cobalt); }
.pillar__icon svg { width: 32px; height: 32px; }

.pillar__title {
  align-self: center;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
}
.pillar__body { color: var(--ink-soft); font-size: .9375rem; }

/* ── Partnerships ───────────────────────────────────────── */
.partnerships {
  display: grid;
  background: var(--navy);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.partnerships__panel { padding: clamp(40px, 7vw, 76px) var(--gutter); }
.partnerships__text .section__body { margin-top: clamp(16px, 2vw, 22px); }
.partnerships__text .btn { margin-top: clamp(26px, 3.4vw, 34px); }

.partnerships__media picture { height: 100%; }
.partnerships__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 88% 50%;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  padding-block: clamp(26px, 3.4vw, 34px);
}
.site-footer__inner { display: grid; gap: 18px; }

.site-footer__brand { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.site-footer__logo { width: clamp(130px, 13vw, 168px); }
.site-footer__rule { width: 1px; align-self: stretch; margin-block: 6px; background: var(--line-invert); }
.site-footer__tagline { color: var(--ink-invert); font-size: .9375rem; }

.site-footer__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.site-footer__mail { font-size: .9375rem; text-decoration: none; border-bottom: 1px solid var(--line-invert); }
.site-footer__mail:hover { border-bottom-color: currentColor; }
.site-footer__copy { color: rgba(255, 255, 255, .55); font-size: .8125rem; }

/* ============================================================
   Small phones
   ============================================================ */
@media (max-width: 480px) {
  /* keeps the hero eyebrow on a single line at 360–390px */
  .eyebrow { font-size: .75rem; letter-spacing: .08em; }

  .site-footer__brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__rule { display: none; }
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 900px) {
  :root { --header-h: 80px; }

  /* header: inline nav, no burger */
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav__list {
    display: flex;
    gap: clamp(26px, 3.4vw, 46px);
  }
  .nav__list a {
    padding: 0;
    border: 0;
    font-size: .9375rem;
    position: relative;
  }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .2s ease;
  }
  .nav__list a:hover::after { transform: scaleX(1); }
  .nav__cta { display: none; }
  .site-header__cta { display: inline-block; }

  .hero__lede { font-size: 1.125rem; }

  /* credibility: two columns split by a hairline centred in the gap */
  .credibility__grid {
    --gap: clamp(40px, 6vw, 80px);
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    max-width: 1060px;
    margin-inline: auto;
  }
  .fact {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 6px;
  }
  .fact__icon { grid-row: auto; }
  .credibility__grid > .fact + .fact {
    border-top: 0;
    /* pull the box half a gap left so its border lands on the gap's midline,
       then pad the content back onto the column edge */
    margin-left: calc(var(--gap) / -2);
    padding-left: calc(var(--gap) / 2);
    border-left: 1px solid var(--line);
  }
  .fact__title { align-self: auto; }

  /* about */
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: center; }

  /* what we do: three columns split by hairlines centred in the gaps */
  .what__grid {
    --gap: clamp(36px, 5vw, 74px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* icon / title / body share rows across the three columns, so the bodies
       line up even when a title runs to a different number of lines */
    grid-template-rows: auto auto auto;
    column-gap: var(--gap);
  }
  .pillar {
    grid-row: span 3;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    row-gap: clamp(14px, 1.8vw, 22px);
    padding-block: 0;
    border-top: 0;
  }
  .pillar__icon { grid-row: auto; }
  .pillar + .pillar {
    margin-left: calc(var(--gap) / -2);
    padding-left: calc(var(--gap) / 2);
    border-left: 1px solid var(--line);
  }
  .pillar__title { align-self: start; max-width: 9ch; }

  /* partnerships: navy panel left, photo bleeding right */
  .partnerships {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    padding-left: var(--edge-pad);
  }
  .partnerships__panel {
    display: grid;
    align-content: center;
    max-width: calc(520px + var(--split-pad));
    padding: clamp(64px, 7vw, 96px) var(--split-pad) clamp(64px, 7vw, 96px) 0;
  }
  .partnerships__media { min-height: clamp(360px, 30vw, 480px); }
  .partnerships__media img { height: 100%; aspect-ratio: auto; }

  /* footer */
  .site-footer__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }
  .site-footer__meta { justify-content: flex-end; }
}

/* ============================================================
   Split hero
   Held back to 1160px on purpose. In the split, the photo is cropped to the
   height of the text column; below this width that crop gets tall enough to
   clip the outer packs, and the asset pack asks for all four to stay in frame.
   Under 1160 the stacked layout shows the full uncropped 16:9 frame instead.
   ============================================================ */
@media (min-width: 1160px) {
  .hero {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: stretch;
    padding-left: var(--edge-pad);
  }
  .hero__text {
    align-self: center;
    max-width: calc(560px + var(--split-pad));
    padding: clamp(44px, 4.5vw, 72px) var(--split-pad) clamp(44px, 4.5vw, 72px) 0;
  }
  .hero__media { min-height: clamp(440px, 34vw, 560px); }
  .hero__media img { height: 100%; aspect-ratio: auto; }
}

/* ── Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .site-header, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; }
}