:root {
  /* Typography bump (printed "points": 1pt = 1/72in; use literal pt in calc) */
  --font-bump-2pt: 2pt;
  --font-bump-4pt: 4pt;
  --bg: #000000;
  --text: #f4f4f2;
  --text-muted: rgba(244, 244, 242, 0.72);
  --accent: #5a8f32;
  --accent-soft: rgba(90, 143, 50, 0.35);
  --accent-rule: #3a5f22;
  --accent-rule: color-mix(in srgb, var(--accent) 58%, #070a05 42%);
  --content-max: min(92vw, 72rem);
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    165deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.12) 38%,
    rgba(0, 0, 0, 0.34) 72%,
    rgba(0, 0, 0, 0.46) 100%
  );
}

.hero__photo {
  position: absolute;
  inset: -8% -4%;
  z-index: 1;
  background-color: var(--bg);
  background-image: url("images/mine-background.jpg");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.66;
  filter: brightness(1.22) contrast(1.02);
  transform: scale(1.02);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 85% 70% at 50% 45%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 62%,
    rgba(0, 0, 0, 0.72) 100%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: min(100%, min(96vw, 88rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__tabs {
  position: absolute;
  left: clamp(1rem, 3.5vw, 2.25rem);
  bottom: calc(clamp(1rem, 3vh, 2.25rem) + 0.5in);
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.65rem;
}

.hero__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.35em;
  border: 1px solid rgba(244, 244, 242, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(244, 244, 242, 0.93);
  font-family: inherit;
  font-size: clamp(0.95rem, 0.82rem + 0.45vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}

.hero__tab:hover {
  border-color: rgba(90, 143, 50, 0.65);
  color: #fafaf8;
  background: rgba(0, 0, 0, 0.52);
}

.hero__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hero__bg-caption {
  position: absolute;
  right: clamp(1rem, 3.5vw, 2.25rem);
  bottom: clamp(1rem, 3vh, 2.25rem);
  z-index: 3;
  margin: 0;
  max-width: min(36rem, calc(100vw - 2.5rem));
  text-align: right;
  font-size: clamp(0.58rem, 0.48rem + 0.55vw, 0.88rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: rgba(244, 244, 242, 0.62);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.62);
  pointer-events: none;
}

.hero__logo {
  position: absolute;
  top: clamp(1.25rem, 3.5vw, 2.25rem);
  left: clamp(1.25rem, 4vw, 2.75rem);
  z-index: 4;
  width: min(220px, 44vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.65)) brightness(1.06);
}

.hero__copy {
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero__title {
  margin: 0;
  width: 100%;
  font-size: clamp(3.3rem, 2.2rem + 4.4vw, 4.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: color-mix(in srgb, var(--text) 94%, #ffffff 6%);
}

.hero__lead {
  margin: 0;
  font-size: calc(
    clamp(1.55rem, 1.38rem + 0.55vw, 1.82rem) + var(--font-bump-2pt)
  );
  font-weight: 600;
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 94%, #ffffff 6%);
}

/* Next layer: Problem section */
main {
  display: block;
}

/* --------------------------------------------------------------------------
   Layer stack scroll — hero + each main section sticks; the next slides over
   -------------------------------------------------------------------------- */
body.layer-stack .hero.layer-stack__hero {
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: visible;
}

body.layer-stack .hero.layer-stack__hero .hero__layers {
  overflow: hidden;
}

body.layer-stack main > section {
  position: sticky;
  top: 0;
  min-height: 100svh;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.42);
}

body.layer-stack main > section:nth-child(1) {
  z-index: 2;
}

body.layer-stack main > section:nth-child(2) {
  z-index: 3;
}

body.layer-stack main > section:nth-child(3) {
  z-index: 4;
}

/*
 * Team — sticky layer (4). Partner with us + footer ribbon — separate sticky layer (5).
 */
body.layer-stack main > section:nth-child(4) {
  z-index: 5;
  overflow: visible;
}

body.layer-stack main > section:nth-child(5) {
  z-index: 7;
  box-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.45),
    0 28px 72px rgba(0, 0, 0, 0.38);
  isolation: isolate;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 0;
}

body.layer-stack .partner-contact > .contact,
body.layer-stack .partner-contact > .site-footer {
  position: relative;
  z-index: 1;
}

body.layer-stack .partner-contact > .contact {
  isolation: isolate;
  flex: 1 0 auto;
}

/* overflow:hidden on sticky breaks position:sticky — keep bleed inside layers */
body.layer-stack .problem,
body.layer-stack .why-now,
body.layer-stack .solution {
  overflow: visible;
}

body.layer-stack .problem::before {
  inset: 0;
}

body.layer-stack .why-now__layers {
  inset: 0;
}

body.layer-stack .solution__bg {
  inset: 0;
  filter: brightness(1.18) contrast(1.04) saturate(1.05);
}

/* Hide previous sticky layer showing through (blend + transparent wash) */
body.layer-stack .why-now {
  background-color: #060806;
}

body.layer-stack .why-now__layers {
  mix-blend-mode: normal;
  opacity: 0.62;
  filter: brightness(1.1) saturate(1.08) contrast(1.06);
}

body.layer-stack .solution {
  background-color: #071a1c;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}

body.layer-stack .solution__inner {
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

body.layer-stack .solution__points {
  gap: clamp(0.85rem, 1.75vw, 1.35rem);
}

body.layer-stack .solution-point {
  padding: clamp(0.85rem, 1.5vw, 1.15rem) clamp(1rem, 1.75vw, 1.35rem);
}

body.layer-stack .solution__wash {
  background: linear-gradient(
    105deg,
    rgba(4, 18, 22, 0.82) 0%,
    rgba(4, 22, 26, 0.62) 28%,
    rgba(6, 32, 36, 0.38) 52%,
    rgba(8, 42, 46, 0.22) 76%,
    rgba(10, 52, 56, 0.12) 100%
  );
}

body.layer-stack .solution__vignette {
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.42),
    inset 0 -55px 70px rgba(0, 0, 0, 0.34);
}

body.layer-stack .site-footer {
  position: relative;
  z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
  body.layer-stack .hero.layer-stack__hero,
  body.layer-stack main > section {
    position: relative;
    top: auto;
    min-height: unset;
    box-shadow: none;
  }

  body.layer-stack .hero.layer-stack__hero {
    overflow: hidden;
  }

  body.layer-stack .problem,
  body.layer-stack .why-now,
  body.layer-stack .solution {
    overflow: hidden;
  }

  body.layer-stack .problem::before {
    inset: -25% -10%;
  }

  body.layer-stack .why-now__layers {
    inset: -10% -8%;
  }

  body.layer-stack .solution__bg {
    inset: -5% -8%;
    filter: none;
  }

  body.layer-stack .solution__vignette {
    box-shadow:
      inset 0 0 120px rgba(0, 0, 0, 0.65),
      inset 0 -80px 100px rgba(0, 0, 0, 0.55);
  }

  body.layer-stack .why-now {
    background-color: transparent;
  }

  body.layer-stack .why-now__layers {
    mix-blend-mode: screen;
    opacity: 0.52;
    filter: brightness(1.18) saturate(1.12) contrast(1.08);
  }

  body.layer-stack .solution {
    background-color: transparent;
  }

  body.layer-stack .solution__wash {
    background: linear-gradient(
      105deg,
      rgba(2, 8, 12, 0.97) 0%,
      rgba(2, 8, 12, 0.88) 28%,
      rgba(2, 8, 12, 0.35) 52%,
      rgba(2, 8, 12, 0.08) 72%,
      transparent 100%
    );
  }

}

.problem {
  position: relative;
  background: #050505;
  padding: clamp(2.35rem, 4.5vw, 4.25rem) 1rem clamp(3.25rem, 6vw, 5.5rem);
  overflow: hidden;
}

.problem::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background: linear-gradient(
    165deg,
    rgba(90, 143, 50, 0.18) 0%,
    rgba(0, 0, 0, 0) 48%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.section__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 74rem);
  margin: 0 auto;
}

.section__head {
  text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}

.section__title {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section__lead {
  margin: 0.9rem auto 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-weight: 300;
  font-size: calc(
    clamp(1rem, 0.85rem + 0.35vw, 1.18rem) + var(--font-bump-2pt)
  );
  line-height: 1.7;
}

.problem .carousel-block {
  max-width: min(64rem, 100%);
  margin-inline: auto;
}

/* Vertically center arrows with the viewport; overflow rules keep body copy visible */
.problem .problem-carousel.team-carousel {
  align-items: center;
}

.problem .problem-carousel .team-carousel__viewport {
  /* clip (not hidden) so overflow-y can stay visible — hidden+visible forces y→auto and clips captions */
  overflow-x: clip;
  overflow-y: visible;
}

/* Larger, clearer arrows (problem carousel only — Team unchanged) */
.problem .problem-carousel .team-carousel__arrow {
  width: clamp(3.1rem, 5.5vw, 3.65rem);
  height: clamp(3.1rem, 5.5vw, 3.65rem);
  border-color: rgba(244, 244, 242, 0.28);
  background: rgba(6, 8, 6, 0.78);
  color: rgba(244, 244, 242, 0.98);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.55);
}

.problem .problem-carousel .team-carousel__arrow:hover {
  border-color: rgba(130, 170, 95, 0.65);
  background: rgba(90, 143, 50, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 16px 40px rgba(0, 0, 0, 0.58);
}

.problem .problem-carousel .team-carousel__arrow svg {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
}

.problem .problem-carousel .team-carousel__arrow svg path {
  stroke-width: 2.35;
}

.problem-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(244, 244, 242, 0.12);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.problem-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
  display: block;
  background-color: #000000;
  opacity: 0.98;
  filter: brightness(1.06) contrast(1.02);
}

.problem-card__body {
  padding: 1.25rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.problem-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* "Uneven global supply" — slightly larger headline */
.problem .problem-carousel .team-slide:first-child .problem-card__title {
  font-size: calc(1.05rem * 1.1);
}

.problem-card__text {
  margin: 0;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.7;
  font-size: calc(1em + var(--font-bump-2pt));
}

.problem-card__reference {
  margin: 0;
  padding: 0.45rem 1.25rem 0.65rem;
  font-size: calc(0.88rem + var(--font-bump-2pt));
  font-weight: 400;
  line-height: 1.45;
  color: rgba(244, 244, 242, 0.58);
  border-bottom: 1px solid rgba(244, 244, 242, 0.08);
}

.problem-card__ref-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.15em;
}

.problem-card__ref-link:hover {
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  text-decoration-color: var(--accent);
}

.problem-card__ref-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Next layer: Why now / pivotal moment */
.why-now {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.75rem) 1rem clamp(3.25rem, 5.5vw, 5.25rem);
  color: var(--text);
  overflow: hidden;
}

.why-now__layers {
  position: absolute;
  inset: -10% -8%;
  background-color: #000000;
  background-image: url("images/why-now-background.jpg");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: 0.52;
  filter: brightness(1.18) saturate(1.12) contrast(1.08);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.why-now .section__inner {
  position: relative;
  z-index: 1;
}

.section__head--left {
  text-align: left;
  max-width: 40rem;
}

/* Readable over bright gold mine photography */
.why-now .section__title,
.why-now .section__lead,
.why-card__title,
.why-card__text {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

.why-now__grid {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: stretch;
}

.why-card {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Vertical separators between columns (desktop) */
@media (min-width: 961px) {
  .why-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 12%;
    right: calc(-0.5 * clamp(1.25rem, 3vw, 2.25rem));
    width: 1px;
    height: 76%;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(244, 244, 242, 0.28) 15%,
      rgba(244, 244, 242, 0.28) 85%,
      transparent
    );
    pointer-events: none;
  }
}

.why-card__frame {
  height: 100%;
  padding: clamp(1.35rem, 2.5vw, 1.85rem) clamp(1.1rem, 2vw, 1.5rem);
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(244, 244, 242, 0.22);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.why-card__title {
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.why-card__rule {
  width: 2.75rem;
  height: 3px;
  margin: 1rem auto 1rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  opacity: 0.95;
}

.why-card__text {
  margin: 0;
  color: rgba(244, 244, 242, 0.82);
  font-weight: 300;
  line-height: 1.65;
  font-size: calc(0.95rem + var(--font-bump-2pt));
  text-wrap: pretty;
}

@media (max-width: 960px) {
  .why-now__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Solution — flagship section (microbial / biotech visual)
   Place artwork at: images/solution-background.png
   -------------------------------------------------------------------------- */
.solution {
  --solution-cyan: #5eead4;
  --solution-lime: #a3e635;
  position: relative;
  min-height: min(100svh, 1100px);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
  color: var(--text);
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.solution__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.solution__bg {
  position: absolute;
  inset: -5% -8%;
  background-color: #030708;
  background-image: url("images/solution-background.png");
  background-size: cover;
  background-position: 72% center;
  transform: scale(1.02);
}

.solution__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(2, 8, 12, 0.97) 0%,
    rgba(2, 8, 12, 0.88) 28%,
    rgba(2, 8, 12, 0.35) 52%,
    rgba(2, 8, 12, 0.08) 72%,
    transparent 100%
  );
}

.solution__grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.35) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, black 0%, black 55%, transparent 85%);
}

.solution__vignette {
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.65),
    inset 0 -80px 100px rgba(0, 0, 0, 0.55);
}

.solution__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 74rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.solution__head {
  max-width: min(38rem, 92vw);
}

.solution__eyebrow {
  margin: 0 0 0.65rem;
  font-size: calc(0.72rem + var(--font-bump-2pt));
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--solution-cyan);
  text-shadow:
    0 0 24px rgba(94, 234, 212, 0.35),
    0 0 2px rgba(0, 0, 0, 0.9);
}

.solution__title {
  margin: 0;
  font-size: clamp(2rem, 1.35rem + 2.4vw, 3.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
  background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #e2f9f4 45%,
    rgba(163, 230, 53, 0.95) 120%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, 0.85));
}

@supports not (background-clip: text) {
  .solution__title {
    color: #f8fafc;
    background: none;
    filter: none;
  }
}

.solution__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1.35rem, 2.5vw, 2rem);
  max-width: min(42rem, 94vw);
}

.solution-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: start;
  padding: clamp(1.15rem, 2vw, 1.45rem) clamp(1.15rem, 2vw, 1.65rem);
  border-radius: 16px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  background: linear-gradient(
    125deg,
    rgba(4, 18, 22, 0.82) 0%,
    rgba(4, 14, 18, 0.42) 55%,
    rgba(4, 14, 18, 0.15) 100%
  );
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.solution-point__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.35rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--solution-lime);
  border: 1px solid rgba(163, 230, 53, 0.45);
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(94, 234, 212, 0.22),
    rgba(4, 20, 24, 0.92)
  );
  box-shadow:
    0 0 28px rgba(94, 234, 212, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.solution-point__body {
  min-width: 0;
}

.solution-point__headline {
  margin: 0 0 0.45rem;
  font-size: calc(clamp(1rem, 0.92rem + 0.3vw, 1.15rem) + var(--font-bump-2pt));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #ecfeff;
  text-shadow:
    0 0 20px rgba(94, 234, 212, 0.2),
    0 2px 16px rgba(0, 0, 0, 0.75);
}

.solution-point__body p {
  margin: 0;
  font-size: calc(clamp(0.95rem, 0.88rem + 0.25vw, 1.06rem) + var(--font-bump-2pt));
  font-weight: 300;
  line-height: 1.72;
  color: rgba(241, 250, 248, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

@media (max-width: 640px) {
  .solution__bg {
    background-position: 34% center;
  }

  .solution__wash {
    background: linear-gradient(
      180deg,
      rgba(2, 8, 12, 0.94) 0%,
      rgba(2, 8, 12, 0.82) 42%,
      rgba(2, 8, 12, 0.55) 100%
    );
  }

  .solution-point {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .solution-point__marker {
    margin-bottom: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
   Team carousel — dark spectrum (warm moss charcoal vs cool teal Solution)
   -------------------------------------------------------------------------- */
.team {
  --team-surface: rgba(14, 18, 14, 0.82);
  --team-edge: rgba(110, 150, 75, 0.28);
  --team-edge-soft: rgba(244, 244, 242, 0.1);
  position: relative;
  scroll-margin-top: 1rem;
  isolation: isolate;
  padding: clamp(2.35rem, 4.5vw, 3.75rem) 1rem clamp(1.1rem, 2.5vw, 1.85rem);
  color: var(--text);
  background: radial-gradient(
      ellipse 120% 90% at 18% 20%,
      rgba(42, 58, 32, 0.35) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 80% 70% at 92% 88%,
      rgba(22, 36, 18, 0.55) 0%,
      transparent 45%
    ),
    linear-gradient(168deg, #0f1210 0%, #0a0d09 46%, #060806 100%);
  border-top: 1px solid rgba(90, 143, 50, 0.14);
}

.team::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 143, 50, 0.35) 12%,
    var(--accent) 42%,
    #b8d96f 50%,
    var(--accent) 58%,
    rgba(90, 143, 50, 0.35) 88%,
    transparent 100%
  );
  opacity: 0.95;
}

.team__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 52rem);
  margin: 0 auto;
}

.team .section__head {
  margin-bottom: clamp(0.85rem, 1.75vw, 1.25rem);
}

.team .section__title {
  margin: 0;
  font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem);
  line-height: 1.18;
  color: var(--text);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

/* Team + advisors: static side-by-side cards (no carousel) */
.team-static-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: 100%;
  max-width: min(100%, 56rem);
  margin-inline: auto;
}

.team .team-static-grid .team-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-template-columns: unset;
  gap: clamp(0.65rem, 1.5vw, 0.95rem);
  flex: unset;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: clamp(0.85rem, 1.5vw, 1.1rem) clamp(0.65rem, 1.25vw, 0.85rem);
  background: var(--team-surface);
  border: 1px solid var(--team-edge-soft);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 22px 56px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(130, 170, 95, 0.12);
  backdrop-filter: blur(14px);
}

.team .team-static-grid .team-slide__photo {
  display: flex;
  justify-content: center;
  width: 100%;
}

.team .team-static-grid .team-slide__bio {
  text-align: center;
  max-width: min(38rem, 100%);
  width: 100%;
}

.advisors-static-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.75vw, 1.25rem);
  width: 100%;
}

.advisors .advisors-static-grid .team-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-template-columns: unset;
  gap: clamp(0.55rem, 1.25vw, 0.85rem);
  flex: unset;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: clamp(0.75rem, 1.35vw, 1rem) clamp(0.45rem, 1vw, 0.65rem);
  background: var(--team-surface);
  border: 1px solid var(--team-edge-soft);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 18px 44px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(130, 170, 95, 0.1);
  backdrop-filter: blur(14px);
}

.advisors .advisors-static-grid .team-slide__photo {
  display: flex;
  justify-content: center;
  width: 100%;
}

.advisors .advisors-static-grid .team-slide__bio {
  text-align: center;
  width: 100%;
}

.advisors .advisors-static-grid .team-slide__text {
  margin-top: 0.45rem;
  text-align: center;
}

@media (max-width: 900px) {
  .team-static-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .advisors-static-grid {
    grid-template-columns: 1fr;
  }
}

.team-carousel {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.25vw, 0.65rem);
}

.team-carousel__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  outline: none;
  background: var(--team-surface);
  border: 1px solid var(--team-edge-soft);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 22px 56px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(130, 170, 95, 0.12);
  backdrop-filter: blur(14px);
}

.team-carousel__viewport:focus-visible {
  box-shadow:
    0 0 0 2px var(--accent),
    0 32px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(130, 170, 95, 0.14);
}

.team-carousel__track {
  display: flex;
  transition: transform 0.48s cubic-bezier(0.33, 1, 0.68, 1);
}

.team-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(130px, 200px) 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: center;
  padding: clamp(0.65rem, 1.35vw, 1rem) clamp(0.2rem, 0.85vw, 0.45rem);
  box-sizing: border-box;
}

/* Problem carousel: one full-width "window" per slide (not team's two-column slide) */
.problem .problem-carousel .team-slide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  text-align: left;
  grid-template-columns: unset;
}

.problem .problem-carousel .problem-card__body {
  flex-shrink: 0;
}

/* problem-2: nudge "Domestic resources…" block slightly up under the reference line */
.problem .problem-carousel .team-slide:nth-child(2) .problem-card__reference {
  padding-bottom: 0.35rem;
}

.problem .problem-carousel .team-slide:nth-child(2) .problem-card__body {
  padding-top: 0.75rem;
}

.problem .problem-carousel .problem-card__img {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-height: min(38vh, 300px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* problem-1: allow a larger figure; captions still layout below (viewport overflow-y: visible) */
.problem .problem-carousel .problem-card__img.problem-card__img--slide1-large {
  max-height: min(48vh, 400px);
}

/* problem-3: title-only caption — use vertical space for a larger figure */
.problem .problem-carousel .team-slide:nth-child(3) .problem-card__img {
  max-height: min(60.48vh, 548px);
}

.problem .problem-carousel .team-slide:nth-child(3) .problem-card__body {
  padding: 0.65rem 1.25rem 0.85rem;
  gap: 0;
  text-align: center;
}

/* problem-2: two images side by side in one frame */
.problem .problem-carousel .problem-card__figure--dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, 1.2vw, 0.65rem);
  align-items: stretch;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(52vh, 460px);
  flex-shrink: 0;
  background-color: #000000;
  overflow: hidden;
}

.problem .problem-carousel .problem-card__figure--dual .problem-card__img--dual-half {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-height: none;
  aspect-ratio: unset;
  object-fit: contain;
  object-position: center;
  display: block;
}

.team-slide__photo {
  justify-self: center;
  background-color: transparent;
}

.team-slide__photo img {
  display: block;
  width: min(200px, 58vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(244, 244, 242, 0.28);
  background-color: transparent;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  filter: grayscale(1) contrast(1.06);
}

.team-slide__name {
  margin: 0;
  font-size: clamp(1.12rem, 0.98rem + 0.65vw, 1.48rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}

.team-slide__degree {
  font-weight: 500;
  color: var(--text-muted);
}

.team-slide__role {
  margin: 0.22rem 0 0.55rem;
  font-size: calc(0.88rem + var(--font-bump-2pt));
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.team-slide__text {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem) + var(--font-bump-2pt));
  font-weight: 300;
  line-height: 1.6;
}

.team-slide__list {
  margin: 0;
  padding-left: 1rem;
  color: var(--text-muted);
  font-size: calc(clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem) + var(--font-bump-2pt));
  font-weight: 300;
  line-height: 1.55;
}

.team-slide__list li {
  margin-bottom: 0.22rem;
}

.team-slide__list li:last-child {
  margin-bottom: 0;
}

.team-carousel__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid rgba(244, 244, 242, 0.16);
  border-radius: 50%;
  background: rgba(6, 8, 6, 0.65);
  color: rgba(244, 244, 242, 0.92);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.team-carousel__arrow:hover {
  border-color: rgba(90, 143, 50, 0.55);
  background: rgba(90, 143, 50, 0.18);
  color: var(--text);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

.team-carousel__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.team-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.team-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(244, 244, 242, 0.2);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.team-carousel__dot.is-active {
  background: var(--accent);
  transform: scale(1.15);
}

.team-carousel__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .team-carousel {
    flex-wrap: wrap;
    justify-content: center;
  }

  .team-carousel__arrow {
    order: 2;
    margin-top: 0.25rem;
  }

  .team-carousel__arrow--prev {
    order: 2;
  }

  .team-carousel__viewport {
    order: 1;
    flex-basis: 100%;
    width: 100%;
  }

  .team-carousel__arrow--next {
    order: 3;
  }

  .team-slide {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .team-slide__bio {
    text-align: left;
    max-width: 28rem;
    margin: 0 auto;
  }

  .team-slide__list {
    padding-left: 1.25rem;
  }

  .problem .problem-carousel .team-slide {
    text-align: left;
  }

  .problem .problem-carousel .team-slide:nth-child(3) .problem-card__body {
    text-align: center;
  }
}

.team-slide--advisor .team-slide__role {
  margin-bottom: 0;
}

/* Advisors (below team, same dark band) */
.advisors {
  scroll-margin-top: 1rem;
  margin-top: clamp(0.15rem, 0.55vw, 0.4rem);
  padding-top: clamp(0.35rem, 1vw, 0.65rem);
  border-top: 1px solid rgba(90, 143, 50, 0.14);
}

.advisors__inner {
  width: min(100%, 58rem);
  margin: 0 auto;
}

.advisors__title {
  margin: 0 0 clamp(0.65rem, 1.35vw, 1rem);
  font-size: clamp(1.2rem, 0.95rem + 1.2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Contact / Partner form */
.contact {
  scroll-margin-top: 1rem;
  padding: clamp(3.25rem, 6vw, 5.25rem) 1rem;
  background: #050505;
  border-top: 1px solid rgba(90, 143, 50, 0.14);
}

.contact__inner {
  width: min(100%, 40rem);
  margin: 0 auto;
}

.contact__head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.contact .section__title {
  color: var(--text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.contact__lead {
  margin: 0.85rem auto 0;
  max-width: 42ch;
  font-size: calc(clamp(0.98rem, 0.88rem + 0.35vw, 1.12rem) + var(--font-bump-2pt));
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
}

.contact-form {
  scroll-margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-form__row {
  display: grid;
  gap: 1.1rem;
}

.contact-form__row--half {
  grid-template-columns: 1fr 1fr;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.contact-form__label {
  font-size: calc(0.82rem + var(--font-bump-2pt));
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.55);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(244, 244, 242, 0.14);
  background: rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: inherit;
  font-size: calc(0.98rem + var(--font-bump-2pt));
  line-height: 1.45;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(244, 244, 242, 0.32);
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(90, 143, 50, 0.35);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: rgba(90, 143, 50, 0.75);
  box-shadow: 0 0 0 3px rgba(90, 143, 50, 0.22);
  background: rgba(0, 0, 0, 0.62);
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.85rem 1.75rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #0b0f09;
  font-family: inherit;
  font-size: calc(0.95rem + var(--font-bump-2pt));
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    transform 0.12s ease;
}

.contact-form__submit:hover {
  filter: brightness(1.08);
}

.contact-form__submit:active {
  transform: translateY(1px);
}

.contact-form__submit:focus-visible {
  outline: 2px solid rgba(244, 244, 242, 0.85);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .contact-form__row--half {
    grid-template-columns: 1fr;
  }
}

/* Site footer — ribbon band with industry background image */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 2vw, 1rem);
  min-height: clamp(9.5rem, 22vmin, 14rem);
  padding: clamp(1.15rem, 3vw, 1.85rem) clamp(1.25rem, 6vw, 3.5rem)
    clamp(1.25rem, 3.75vw, 2rem);
  background-color: #0a1208;
  border-top: 1px solid rgba(90, 143, 50, 0.38);
  box-shadow:
    0 -14px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(180, 220, 150, 0.08);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("images/ribbon-industry-background.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(4, 10, 6, 0.94) 0%,
      rgba(4, 10, 6, 0.8) 34%,
      rgba(4, 10, 6, 0.32) 58%,
      rgba(4, 10, 6, 0.1) 78%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 10, 6, 0.52) 0%,
      rgba(4, 10, 6, 0.18) 48%,
      rgba(4, 10, 6, 0.38) 100%
    );
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.55rem, 1.35vw, 0.85rem);
  width: min(100%, min(68vw, 22rem));
  margin: 0 auto 0 0;
  padding-top: 0;
}

.site-footer__address {
  margin: 0;
  font-style: normal;
  font-size: calc(0.84rem + var(--font-bump-2pt) + var(--font-bump-4pt));
  font-weight: 300;
  line-height: 1.55;
  color: rgba(244, 244, 242, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

.site-footer__label {
  font-weight: 600;
  color: rgba(244, 244, 242, 0.92);
  letter-spacing: 0.02em;
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.55rem;
}

.site-footer__link {
  font-size: calc(0.84rem + var(--font-bump-2pt) + var(--font-bump-4pt));
  font-weight: 400;
  color: rgba(244, 244, 242, 0.82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.site-footer__link:hover:not(.site-footer__link--linkedin) {
  color: var(--accent);
  border-bottom-color: rgba(90, 143, 50, 0.55);
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.site-footer__link--linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 1px solid rgba(210, 240, 175, 0.45);
  background: linear-gradient(
    158deg,
    rgba(200, 232, 168, 0.92) 0%,
    color-mix(in srgb, var(--accent) 72%, #6a9a48 28%) 100%
  );
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  border-bottom: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(14, 36, 12, 0.92);
}

.site-footer__linkedin-mark {
  display: block;
  transform: translateY(0.04em);
}

.site-footer__link--linkedin:hover {
  color: rgba(8, 22, 8, 1);
  background: linear-gradient(
    158deg,
    rgba(220, 245, 198, 0.98) 0%,
    color-mix(in srgb, var(--accent) 58%, #3d6628 42%) 100%
  );
  border-color: rgba(232, 252, 210, 0.6);
  border-bottom: none;
}

.site-footer__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(100%, min(94vw, 96rem));
  margin: clamp(0.5rem, 2vw, 1rem) auto 0;
  padding-top: 0;
}

.site-footer__copyright {
  margin: 0;
  align-self: flex-end;
  text-align: right;
  font-size: calc(0.8rem + var(--font-bump-2pt) + var(--font-bump-4pt));
  font-weight: 300;
  line-height: 1.45;
  color: rgba(244, 244, 242, 0.68);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

@media (min-width: 769px) {
  .site-footer::before {
    background-position: 68% bottom;
  }
}

/* Thank you page (after contact form submit) */
.thank-you {
  min-height: calc(100svh - clamp(9.5rem, 22vmin, 14rem));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  background: #050505;
}

.thank-you__inner {
  width: min(100%, 40rem);
  margin: 0 auto;
  text-align: center;
}

.thank-you__logo-link {
  display: inline-block;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.thank-you__logo {
  width: min(220px, 52vw);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.65)) brightness(1.06);
}

.thank-you__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.thank-you__lead {
  margin: 1rem auto 0;
  max-width: 42ch;
  font-size: calc(clamp(0.98rem, 0.88rem + 0.35vw, 1.12rem) + var(--font-bump-2pt));
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
}

.thank-you__back {
  display: inline-flex;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  text-decoration: none;
}

/* Mobile-only: fix hero overlap (desktop unchanged) */
@media (max-width: 768px) {
  .hero {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "logo"
      "copy"
      "tabs"
      "caption";
    gap: clamp(0.75rem, 2.5vw, 1.1rem);
    padding: clamp(1rem, 3vw, 1.25rem);
    min-height: 100svh;
    min-height: 100dvh;
    align-items: stretch;
    justify-items: stretch;
  }

  .hero__logo {
    position: relative;
    top: auto;
    left: auto;
    grid-area: logo;
    justify-self: start;
    width: min(156px, 42vw);
  }

  .hero__inner {
    grid-area: copy;
    align-self: center;
    justify-self: center;
    width: 100%;
  }

  .hero__title {
    font-size: clamp(1.75rem, 1.15rem + 4.2vw, 2.45rem);
  }

  .hero__lead {
    font-size: calc(
      clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem) + var(--font-bump-2pt)
    );
  }

  .hero__tabs {
    position: relative;
    left: auto;
    bottom: auto;
    grid-area: tabs;
    justify-self: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .hero__tab {
    white-space: normal;
    text-align: center;
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 8rem;
    padding: 0.72em 0.9em;
    font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem);
  }

  .hero__bg-caption {
    position: relative;
    right: auto;
    bottom: auto;
    grid-area: caption;
    justify-self: center;
    text-align: center;
    max-width: 100%;
  }

  .solution__bg {
    background-position: 34% center;
  }

  .site-footer::before {
    background-position: 58% bottom;
  }

  .site-footer__inner {
    width: min(100%, 15.5rem);
  }
}