/* ============================================================================
   03-SECTIONS — Per-section layout (desktop-first, matches the 1600px frame).
   Responsive adaptations live in 04-responsive.css.
   Order mirrors the page: header → hero → … → footer → modal.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SITE HEADER / NAV
   --------------------------------------------------------------------------- */
.site-header {
  position: fixed;                 /* sticky: stays pinned to the top while scrolling */
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: 24px;
  transition: padding-block var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
/* Scrolled state — frosted cream bar with dark text/logo (set by JS once past the hero) */
.site-header.is-scrolled {
  padding-block: 14px;
  background: rgba(246, 245, 241, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}
.site-header.is-scrolled .site-header__inner::after { opacity: 0; }
.site-header.is-scrolled .site-header__logo,
.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .site-header__toggle { color: var(--color-ink); }
.site-header.is-scrolled .site-header__logo img { filter: brightness(0); }   /* cream SVG → near-black */
.site-header.is-scrolled .site-header__cta { background: var(--color-rust); color: var(--color-cream); }
.site-header.is-scrolled .site-header__cta:hover { background: #82390f; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}
/* thin rule beneath the nav (Figma Line 8) */
.site-header__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -24px;
  height: 1px;
  background: rgba(246, 245, 241, .3);
}
.site-header__logo { color: var(--color-cream); }
.site-header__logo img { height: 43px; width: auto; }

.site-nav__list { display: flex; gap: 60px; }
.site-nav a {
  color: var(--color-cream);
  font-weight: 500;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-nav a:hover { opacity: .7; }

.site-header__toggle { display: none; color: var(--color-cream); }

/* ---------------------------------------------------------------------------
   1 · HERO
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(620px, 53.125vw, 850px);   /* 850/1600 ratio */
  display: flex;
  align-items: flex-end;
  padding-block: 110px 110px;
  /* background-image is set inline (resolves against the document) */
  background-color: #8f8a80;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(44,44,44,.35) 0%, rgba(44,44,44,.15) 40%, rgba(44,44,44,.45) 100%);
}
.hero__content { max-width: 644px; }
.hero__title { margin-bottom: 24px; }
.hero__title-line,
.hero__title-italic {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
}
.hero__title-line   { color: var(--color-tan); }
.hero__title-italic { color: var(--color-cream); font-style: italic; }
.hero__body {
  max-width: 430px;
  color: var(--color-cream-warm);
  margin-bottom: 28px;
}

/* floating question bubbles */
.hero__tags { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__tags .bubble:nth-child(1) { animation-delay: 0s; }
.hero__tags .bubble:nth-child(2) { animation-delay: 2.2s; }
.hero__tags .bubble:nth-child(3) { animation-delay: 4.4s; }
.hero__tags .bubble:nth-child(4) { animation-delay: 6.6s; }
.hero__tags .bubble:nth-child(5) { animation-delay: 8.8s; }

/* ---------------------------------------------------------------------------
   2 · WHY BIONURTURE EXISTS
   --------------------------------------------------------------------------- */
.why { background: var(--color-cream-warm); }
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.why__headline {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  max-width: 420px;
  margin-bottom: 56px;
}
.why__copy { display: flex; flex-direction: column; gap: 24px; max-width: 290px; }
.why__copy p { color: var(--ink-80); }

.journey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(80px, 12vw, 170px);
}
.journey__step {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  white-space: nowrap;
  color: var(--color-rust);
}
/* Resting/no-JS opacities (the designed "journey fades forward" look).
   With JS, these are driven by scroll position — see initJourneyScrub(). */
.journey__step--1 { opacity: 1; }
.journey__step--2 { opacity: .5; }
.journey__step--3 { opacity: .3; }
.journey__step--4 { opacity: .15; }
.journey__arrow { color: var(--color-rust); flex-shrink: 0; opacity: .6; }

/* ---------------------------------------------------------------------------
   3 · HUMAN + SCIENCE  (split: rust text | image with glass pills)
   --------------------------------------------------------------------------- */
.science {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-rust);
  color: var(--color-cream-warm);
}
.science__text {
  display: flex;
  flex-direction: column;
  padding: 60px var(--gutter);
}
.science__text-inner { display: flex; flex-direction: column; flex: 1; }
.science__headline {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--color-cream-warm);
  margin: 48px 0;
}
.science__italic { display: block; font-style: italic; padding-left: 2.5em; }
.science__copy { margin-top: auto; display: flex; flex-direction: column; gap: 24px; max-width: 350px; }
.science__copy strong { text-decoration: underline; text-underline-offset: 3px; }

.science__media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.science__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.science__img-tint { position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.1); }
.science__corner {
  position: absolute;
  font-size: var(--fs-body);
  color: var(--color-cream-warm);
}
.science__corner--tl { top: 60px; left: 40px; }
.science__corner--tr { top: 60px; right: 40px; }
.science__corner--br { bottom: 40px; right: 40px; }

.science__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 58%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(246, 245, 241, .25);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,245,241,.06) 0%, transparent 70%);
}
.science__pills { position: absolute; inset: 0; }
.science__pills .pill {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  animation: pill-float 7s ease-in-out infinite;
}
.science__pills .pill:nth-child(odd)  { animation-delay: -2s; }
.science__pills .pill:nth-child(3n)   { animation-delay: -4s; }
@keyframes pill-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 8px)); }
}

/* ---------------------------------------------------------------------------
   4 · PERSONALIZED PATHWAYS
   --------------------------------------------------------------------------- */
.pathways { background: var(--color-cream-warm); }
.pathways__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.pathways__intro { position: sticky; top: 120px; max-width: 426px; }
.pathways__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 24px 0; }
.pathways__body { color: var(--ink-80); }

.pathways__list { display: flex; flex-direction: column; }
.pathway { padding-block: 40px; border-bottom: 1px solid rgba(0,0,0,.15); }
.pathway:first-child { padding-top: 64px; }
.pathway__title { font-size: var(--fs-h3); color: var(--color-rust); margin-bottom: 16px; }
.pathway__desc { color: var(--ink-80); max-width: 520px; }

/* ---------------------------------------------------------------------------
   5 · WHAT SETS US APART (feature cards)
   --------------------------------------------------------------------------- */
.features { background: var(--color-offwhite); }
.features__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 56px;
}
.features__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-top: 12px; }
.features__intro { color: var(--ink-80); max-width: 355px; justify-self: end; }

.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  position: relative;
  aspect-ratio: 355 / 440;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--color-cream);
  /* flow layout so the body is always BELOW the title (no overlap, any title length) */
  display: flex;
  flex-direction: column;
  padding: 32px;
}
.feature-card__media {
  position: absolute; inset: 0; z-index: -2;
  /* background-image is set inline on this element (resolves against the document) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--dur) var(--ease);
}
.feature-card::before {   /* blur + dark glass layer over the photo */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(29, 29, 29, .28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color var(--dur) var(--ease);
}
.feature-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.feature-card:hover .feature-card__media { transform: scale(1.04); }
.feature-card:hover::before { background: rgba(29, 29, 29, .34); }

.feature-card__title {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  text-wrap: normal;   /* compact greedy wrap; don't balance card titles */
}
/* body sits at the bottom by default, then moves directly under the title on hover */
.feature-card__body {
  margin: auto 0 0;   /* margin-top:auto pushes it to the bottom */
  font-size: var(--fs-body);
}
.feature-card:hover .feature-card__body { margin-top: 1rem; }   /* directly under the title — never overlaps */

/* hover-revealed diagram, collapses to 0 height by default and expands at the bottom */
.feature-card__reveal {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.feature-card:hover .feature-card__reveal { margin-top: auto; opacity: 1; }   /* pushed to the bottom */
.feature-card:hover .feature-card__reveal--chart,
.feature-card:hover .feature-card__reveal--journey { height: 150px; }
.feature-card:hover .feature-card__reveal--nodes,
.feature-card:hover .feature-card__reveal--team   { height: 88px; }

/* shared label styling for the reveal diagrams */
.fc-node, .fc-step {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--color-cream);
  white-space: nowrap;
}
.fc-node--mid { transform: translateX(-50%); }
.fc-links, .fc-fan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fc-links line, .fc-fan line { stroke: rgba(246, 245, 241, .5); stroke-width: 1; }
.fc-uparrow { position: absolute; color: var(--color-cream); transform: rotate(-42deg); opacity: .9; }
.fc-logo { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); width: 105px; height: auto; }

/* trend chart */
.fc-chart { width: 100%; height: auto; overflow: visible; }
.fc-axis, .fc-tick { stroke: rgba(243, 240, 235, .4); stroke-width: 1; }
.fc-line { stroke: var(--color-cream); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fc-dot { fill: var(--color-cream); }
.fc-dot--hi { fill: var(--color-rust); stroke: var(--color-cream); stroke-width: 1.5; }
.fc-axislabel { fill: var(--color-cream-warm); font-family: var(--font-sans); font-size: 12px; font-weight: 500; }

/* ---------------------------------------------------------------------------
   6 · FOUNDER TESTIMONIAL (split: portrait | quote)
   --------------------------------------------------------------------------- */
.founder { display: grid; grid-template-columns: 1fr 1fr; align-items: start; background: var(--color-cream-warm); }
/* Image sticks (full viewport height) while the long bio scrolls past it. */
.founder__media {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.founder__media::after {   /* gradient so the name tag reads */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%);
}
.founder__name { position: absolute; top: 32px; left: 32px; z-index: 1; }

.founder__content {
  padding: clamp(64px, 7vw, 120px) clamp(40px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.founder__quote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  color: var(--color-rust);
  max-width: 16ch;
  padding-top: 36px;
  margin-bottom: 8px;
}
.founder__mark {
  position: absolute;
  top: -.3em; left: -.06em;
  font-size: 2.4em;
  line-height: 1;
  color: var(--color-rust);
}
.founder__copy { display: flex; flex-direction: column; gap: 22px; max-width: 56ch; }
.founder__copy p { color: var(--color-ink-soft); }
.founder__copy p:first-child {   /* lead paragraph stands out a little */
  font-size: 1.0625rem;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
   7 · PROCESS / TIMELINE
   --------------------------------------------------------------------------- */
.process { background: var(--color-offwhite); }
.process__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 24px 0 clamp(56px, 8vw, 110px); max-width: 430px; }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 50px;
}
.timeline::before,            /* base line */
.timeline::after {            /* rust progress line */
  content: "";
  position: absolute;
  top: 7px; left: 0;
  height: 2px;
}
.timeline::before { right: 0; background: rgba(0,0,0,.12); }
.timeline::after  { width: 0; background: var(--color-rust); transition: width 1.4s var(--ease); }
.timeline.is-active::after { width: 100%; }

.timeline__step { position: relative; }
.timeline__dot {
  position: absolute;
  top: -50px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  transition: background-color var(--dur) var(--ease);
}
.timeline.is-active .timeline__step:nth-child(1) .timeline__dot { background: var(--color-rust); transition-delay: .1s; }
.timeline.is-active .timeline__step:nth-child(2) .timeline__dot { background: var(--color-rust); transition-delay: .6s; }
.timeline.is-active .timeline__step:nth-child(3) .timeline__dot { background: var(--color-rust); transition-delay: 1.1s; }
.timeline__label { display: block; color: var(--color-rust); font-weight: 500; margin-bottom: 16px; }
.timeline__title { font-size: var(--fs-h4); margin-bottom: 16px; }
.timeline__desc  { color: var(--ink-80); max-width: 340px; }
/* steps fade in with the line */
.timeline__step { opacity: .25; transition: opacity var(--dur) var(--ease); }
.timeline.is-active .timeline__step { opacity: 1; }
.timeline.is-active .timeline__step:nth-child(2) { transition-delay: .4s; }
.timeline.is-active .timeline__step:nth-child(3) { transition-delay: .8s; }

/* ---------------------------------------------------------------------------
   8 · PRICING / PLANS
   --------------------------------------------------------------------------- */
.plans { background: var(--color-cream-warm); }
.plans__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 64px;
}
.plans__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); max-width: 430px; }
.plans__intro { color: var(--ink-80); max-width: 326px; justify-self: end; align-self: end; }

.plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan { position: relative; padding-top: 29px; }
.plan__tag {
  position: absolute;
  top: 0; right: 0;
  padding: 10px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-weight: 500;
  background: var(--color-white);
  color: var(--color-rust);
}
.plan__card {
  height: 100%;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
.plan__name { font-size: var(--fs-h3); margin-bottom: 24px; }
.plan__desc { color: var(--ink-80); max-width: 280px; margin-bottom: 64px; }
.plan__included { color: var(--color-rust); margin-bottom: 16px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,.12); }
.plan__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 32px;
}
.plan__features li { display: flex; align-items: center; gap: 12px; color: var(--color-ink-soft); }
.plan__icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-rust); opacity: .6; }
.plan .btn { margin-top: auto; }

/* featured (rust) variant */
.plan--featured .plan__tag  { background: var(--color-rust); color: var(--color-cream-warm); }
.plan--featured .plan__card { background: var(--color-rust); color: var(--color-cream-warm); }
.plan--featured .plan__desc,
.plan--featured .plan__features li { color: var(--color-cream-warm); }
.plan--featured .plan__included { color: var(--color-cream-warm); border-color: rgba(246,245,241,.25); }
.plan--featured .plan__icon { color: var(--color-cream-warm); }

/* ---------------------------------------------------------------------------
   9 · FAQ
   --------------------------------------------------------------------------- */
.faq { background: var(--color-cream-warm); }
.faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 96px; align-items: start; }
.faq__grid > * { min-width: 0; }   /* prevent the accordion grid item from blowing out its column */
.faq__intro { position: sticky; top: 120px; }
.faq__headline { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 28px; }
.faq__sub { color: var(--color-ink-soft); max-width: 360px; }

.accordion { border-top: 1px solid rgba(0,0,0,.14); }
.accordion__item { border-bottom: 1px solid rgba(0,0,0,.14); transition: background-color var(--dur-fast) var(--ease); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  text-align: left;
  font-size: 1.0625rem;          /* 17px — a touch larger for the real questions */
  letter-spacing: var(--tracking-body);
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--color-rust); }
.accordion__trigger > span:not(.accordion__icon) { flex: 1 1 auto; min-width: 0; }   /* let the QUESTION shrink (not the icon) so the icon keeps its width */
/* Plus icon drawn in CSS (two bars) — bulletproof across browsers; rotates to × when open */
.accordion__icon {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  transition: transform var(--dur) var(--ease);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-rust);
  border-radius: 1px;
}
.accordion__icon::before { width: 16px; height: 1.6px; transform: translate(-50%, -50%); }
.accordion__icon::after  { width: 1.6px; height: 16px; transform: translate(-50%, -50%); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.accordion__panel p { color: var(--ink-80); padding-bottom: 28px; max-width: 60ch; overflow-wrap: break-word; }
.accordion__item.is-open .accordion__panel { max-height: 320px; opacity: 1; }

/* ---------------------------------------------------------------------------
   10 · CLOSING CTA BANNER
   --------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  min-height: clamp(620px, 53.125vw, 850px);
  display: flex;
  align-items: flex-end;
  padding-block: 110px;
  /* background-image is set inline (resolves against the document) */
  background-color: var(--color-olive);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-banner__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,0) 100%);
}
.cta-banner__headline {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--color-tan);
  max-width: 623px;
  margin-bottom: clamp(48px, 8vw, 140px);
}
.cta-banner__italic { display: block; font-style: italic; color: var(--color-white); }
.cta-banner__foot { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.cta-banner__body { color: var(--color-cream-warm); max-width: 262px; }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-rust);
  color: var(--color-tan);
  padding-block: 60px 40px;
  position: relative;
  overflow: hidden;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 40px;
}
.footer-col__head { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; color: var(--color-tan); margin-bottom: 24px; }
.footer-col__head--serif { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; line-height: var(--lh-tight); }
.footer-col ul { display: flex; flex-direction: column; gap: 18px; }
.footer-col a, .footer-col__address { color: var(--tan-80); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--color-cream); }

.newsletter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-rust-light);
  border-radius: var(--radius);
  padding-left: 24px;
  margin: 24px 0 16px;
  max-width: 356px;
}
.newsletter__input { flex: 1; background: transparent; border: 0; color: var(--color-cream-warm); padding-block: 12px; }
.newsletter__input::placeholder { color: var(--color-tan); }
.newsletter__input:focus { outline: none; }
.newsletter__btn { color: var(--color-rust); }
.newsletter__note { font-size: var(--fs-small); color: var(--color-tan); }

.site-footer__rule { border: 0; border-top: 1px solid rgba(246,245,241,.25); margin: 56px 0 0; }
.site-footer__wordmark { margin: 30px 0; }
.site-footer__wordmark img { width: 100%; height: auto; color: var(--color-rust-light); }

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-footer__tagline { color: var(--tan-80); max-width: 460px; }
.site-footer__copy { color: var(--tan-80); white-space: nowrap; }
.site-footer__legal { display: flex; gap: 32px; justify-self: end; }
.site-footer__legal a { color: var(--tan-80); transition: color var(--dur-fast) var(--ease); }
.site-footer__legal a:hover { color: var(--color-cream); }

/* ---------------------------------------------------------------------------
   MODAL — Request Early Access
   --------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(29, 29, 29, .4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal__dialog {
  position: relative;
  width: min(1200px, 100%);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-offwhite);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: modal-in var(--dur) var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close { position: absolute; top: 24px; right: 24px; z-index: 2; color: var(--color-ink); }
.modal__media { position: relative; }
.modal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.modal__form { padding: 40px; overflow-y: auto; }
.modal__title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 24px; }
.modal__lead { color: var(--ink-80); margin-bottom: 32px; max-width: 461px; }
.modal__fields { display: flex; flex-direction: column; gap: 16px; }
.modal__interests { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 16px; }
.modal__interests-label { color: var(--color-rust); font-weight: 500; flex-basis: 100%; margin-bottom: 4px; }
.modal__fields .btn { margin-top: 16px; }

/* ---------------------------------------------------------------------------
   MOBILE MENU OVERLAY
   --------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column;
  padding-block: 24px 32px;
  background: rgba(44, 44, 44, .55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: menu-in var(--dur-fast) var(--ease);
}
.mobile-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__bar img { height: 31px; width: auto; }
.mobile-menu__close { color: var(--color-cream); }
.mobile-menu__nav { display: flex; flex-direction: column; margin-top: 48px; }
.mobile-menu__nav a {
  color: var(--color-cream);
  font-size: var(--fs-lead);
  font-weight: 500;
  padding: 24px 0;
  border-bottom: 1px solid rgba(246,245,241,.25);
}
.mobile-menu__foot { margin-top: auto; }