/* Redwood North landing — static CSS built from Figma (Landing/Desktop/1200, Landing/Mobile/375).
   Mobile-first. Breakpoints: 768px (tablet), 1024px (desktop). Content is capped at 1400px. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque_opsz_wdth_wght__1.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk_wght__1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono_wght__1.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #050706;
  --bg-raised: #0b0e0d;
  --surface: #101412;
  --card: rgba(16, 20, 18, 0.6);
  --text: #ece4d2;
  --muted: #a7b0ac;
  --muted-60: rgba(167, 176, 172, 0.6);
  --muted-70: rgba(167, 176, 172, 0.7);
  --green: #46d68a;
  --line: rgba(232, 223, 200, 0.1);
  --line-strong: rgba(232, 223, 200, 0.14);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad-x: 24px;
  --section-y: 72px;
  --max: 1400px;
}

@media (min-width: 1024px) {
  :root {
    --pad-x: 40px;
    --section-y: 112px;
  }
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  color: var(--text);
}

.accent {
  color: var(--green);
}

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

/* ---------- Eyebrow label ---------- */
.eyebrow-row {
  height: 24.8px;
}
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 3.08px;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin-top: 6.5px;
  border-radius: 50%;
  background: var(--green);
}
.eyebrow--center {
  justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  transition: filter 0.2s, border-color 0.2s;
}
.btn__arrow {
  font-size: 16px;
  width: 18px;
}
.btn--primary {
  background: var(--green);
  color: var(--bg);
}
.btn--primary:hover {
  filter: brightness(1.08);
}
.btn--secondary {
  height: 50px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--secondary .btn__arrow {
  color: var(--green);
}
.btn--secondary:hover {
  border-color: rgba(70, 214, 138, 0.5);
}

/* ---------- Navigation ---------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 74px;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  width: 18px;
  height: 24px;
}
.brand span {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  font-size: 15px;
  line-height: 23.25px;
  letter-spacing: -0.375px;
  color: var(--text);
  white-space: nowrap;
}
.nav__links,
.nav__cta {
  display: none;
}
.nav__links a {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  transition: color 0.2s;
}
.nav__links a:hover {
  color: var(--text);
}
.nav__burger {
  display: block;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger img {
  width: 38.5px;
  height: 7.5px;
}
.menu {
  position: absolute;
  z-index: 19;
  top: 74px;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 24px var(--pad-x) 32px;
  background: rgba(5, 7, 6, 0.96);
  border-bottom: 1px solid var(--line);
}
.menu.is-open {
  display: flex;
}
.menu a:not(.btn) {
  font-size: 16px;
  color: var(--muted);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  min-height: max(min(100svh, 1000px), 812px);
  padding-top: 110px;
  --k: 1;
  padding-bottom: 35px;
}
.hero__glow,
.fx {
  position: absolute;
  pointer-events: none;
}
.hero__glow {
  inset: 0;
  overflow: hidden;
}
.hero__lines {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 668px;
  opacity: 0.35;
  background-image: linear-gradient(180deg, rgba(232, 223, 200, 0.043) 0.15%, transparent 0.15%),
    linear-gradient(90deg, rgba(232, 223, 200, 0.043) 0, transparent 0);
}
.blob {
  position: absolute;
  border-radius: 50%;
}
.blob--green {
  width: 560px;
  height: 560px;
  top: -160px;
  right: -185px;
  background: rgba(70, 214, 138, 0.2);
  filter: blur(140px);
}
.blob--sand {
  width: 460px;
  height: 460px;
  top: 160px;
  left: -208px;
  background: rgba(216, 202, 166, 0.06);
  filter: blur(130px);
}

/* Star glows: .star positions an unrotated box, .star__rot rotates the artwork. */
.fx {
  inset: 0;
  overflow: hidden;
}
.star {
  opacity: 0.8;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: plus-lighter;
}
.star__rot {
  flex: none;
  position: relative;
  transform: rotate(var(--rot));
  width: var(--iw);
  height: var(--ih);
}
.star__ins {
  position: absolute;
  inset: var(--ins);
}
.star__ins img {
  width: 100%;
  height: 100%;
}
.star--a {
  --iw: 639.668px;
  --ih: 639.668px;
  --ins: -23.45%;
}
.star--b {
  --iw: 445.256px;
  --ih: 445.256px;
  --ins: -24.7%;
}
.star--c {
  --iw: 210.794px;
  --ih: 282.309px;
  --ins: -31.88% -42.7%;
}

/* Hero star placement — offsets from the container's right edge (mobile Figma frame) */
.hero .fx {
  top: 0;
  bottom: 0;
}
.hero .fx--stars {
  top: 14.04px;
  transform-origin: 100% 0;
  transform: scale(var(--k));
}
.hero .s1 { left: calc(100% - 901.99px); top: -115.02px; width: 840.406px; height: 840.406px; --rot: -23.28deg; }
.hero .s2 { left: calc(100% - 764.97px); top: 22.02px; width: 566.335px; height: 566.335px; --rot: -19.08deg; }
.hero .s3 { left: calc(100% - 596.35px); top: 162.39px; width: 270.281px; height: 323.351px; --rot: -13.35deg; }
.hero .s4 { left: calc(100% - 317.43px); top: 294.56px; width: 846.926px; height: 846.926px; --rot: 65.57deg; }
.hero .s5 { left: calc(100% - 179.83px); top: 432.14px; width: 571.721px; height: 571.721px; --rot: 69.78deg; }
.hero .s6 { left: calc(100% - 75.48px); top: 601.6px; width: 326.082px; height: 274.743px; --rot: 75.51deg; }

/* Frosted vertical bands over the glows + the pine silhouette */
.bands {
  position: absolute;
  display: flex;
}
.bands i {
  flex: 1 1 0;
  min-width: 0;
  backdrop-filter: url(#glass) blur(1px);
  -webkit-backdrop-filter: url(#glass) blur(1px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 14%, rgba(5, 7, 6, 0.12) 60%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07), inset 10px 0 16px -12px rgba(255, 255, 255, 0.1);
}
.hero .bands {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tree {
  position: absolute;
  filter: brightness(0.1);
  opacity: 0.4;
}
.hero .tree {
  left: 76px;
  top: 153.96px;
  width: 180px;
  height: 240px;
}
.hero__rule-unused {
  position: absolute;
  left: 0;
  right: 0;
  top: 667px;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 223, 200, 0), rgba(232, 223, 200, 0.1) 50%, rgba(232, 223, 200, 0));
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 667px;
}
.hero__copy {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}
.hero__eyebrow {
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
}
.hero h1 {
  padding-top: 24px;
  font-size: 54px;
  line-height: 61px;
  letter-spacing: -1.5px;
}
.hero h1 span {
  display: block;
}
.hero__lead {
  padding-top: 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
  max-width: 448px;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 40px;
}
.link-muted {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  transition: color 0.2s;
}
.link-muted:hover {
  color: var(--text);
}

/* ---------- Section headings ---------- */
.section {
  padding-block: var(--section-y);
}
.section__head {
  max-width: 768px;
}
.h2 {
  padding-top: 24px;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.8px;
}
.lead {
  padding-top: 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
  max-width: 576px;
}

/* ---------- Pillars ---------- */
.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 40px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card__icon img {
  width: 24px;
  height: 24px;
}
.card__icon .is-flipped {
  transform: scaleX(-1);
}
.card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.4px;
  color: var(--muted-60);
}
.card h3 {
  padding-top: 20px;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
}
.card p {
  padding-top: 12px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
}
.card p.is-bold {
  font-weight: 700;
}
.card--cta {
  justify-content: center;
  background-image: linear-gradient(157deg, rgba(70, 214, 138, 0.12), rgba(70, 214, 138, 0));
  background-color: transparent;
  border-color: rgba(70, 214, 138, 0.25);
  backdrop-filter: none;
}
.card--cta img {
  width: 20px;
  height: 20px;
}
.card--cta p {
  padding-top: 24px;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.6px;
  color: var(--text);
}

/* ---------- Stack / infrastructure ---------- */
.stack {
  position: relative;
  overflow: hidden;
}
.figure {
  margin-top: 40px;
  background-image: linear-gradient(90deg, rgba(16, 20, 18, 0.6), rgba(16, 20, 18, 0.6)), linear-gradient(90deg, #050706, #050706);
  border: 1px solid rgba(232, 223, 200, 0.12);
  border-radius: 5px;
  overflow: hidden;
}
.figure__img {
  position: relative;
  height: 192px;
  overflow: hidden;
}
.figure__img img {
  position: absolute;
  left: 0;
  top: -116.96%;
  width: 100%;
  height: 289.75%;
}
.figure__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 18, 0.6);
}
.figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border-top: 1px solid #171614;
}
.figure figcaption strong {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.4px;
}
.figure figcaption span {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 2.64px;
  color: var(--green);
}
.specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 16px;
}
.spec {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.spec__art {
  position: relative;
  height: 303.44px;
  padding: 16px;
  overflow: hidden;
  background: radial-gradient(ellipse 33% 18.2% at 50% 45%, rgba(70, 214, 138, 0.16), rgba(70, 214, 138, 0) 100%);
}
.spec__art img {
  width: 100%;
  height: 271px;
}
.spec__art--contain img {
  object-fit: contain;
}
.spec__art--cover img {
  object-fit: cover;
}
.spec__body {
  padding: 20px;
  border-top: 1px solid var(--line);
}
.spec__body .spec__tag {
  height: 24.8px;
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 2.64px;
  color: var(--green);
}
.spec__body p {
  padding-top: 12px;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
  max-width: 440px;
}

/* ---------- Leadership ---------- */
.leadership {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
  padding-block: 80px 81px;
}
.leadership__glow {
  position: absolute;
  left: -160px;
  top: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(70, 214, 138, 0.06);
  filter: blur(130px);
  pointer-events: none;
}
.leadership .wrap {
  position: relative;
}
.leadership__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-top: 32px;
}
.person {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.person__photo {
  position: relative;
  height: 365.16px;
  background: linear-gradient(180deg, #101412 0%, #0e110f 20%, #0b0f0d 40%, #090c0a 60%, #070908 80%, #050706 100%);
}
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 6, 0.7), rgba(5, 7, 6, 0) 50%);
}
.person__info {
  padding: 20px;
  border-top: 1px solid var(--line);
}
.person__info h3 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
.person__role {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.64px;
  color: var(--green);
  white-space: nowrap;
}
.quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 100;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--text);
}
.bio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 20px;
}
.bio p {
  font-size: 14px;
  line-height: 22.75px;
  color: var(--muted);
}
.chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 24px;
}
.chip {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.chip img {
  width: 20px;
  height: 20px;
}
.chip strong {
  display: block;
  padding-top: 12px;
  font-weight: 500;
  font-size: 14px;
  line-height: 19.25px;
  color: var(--text);
}
.chip span {
  display: block;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 15.5px;
  letter-spacing: 1.6px;
  color: var(--muted-70);
}

/* ---------- Contact ---------- */
.contact {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 548px;
  padding: 72px var(--pad-x);
}
.contact .fx {
  inset: 0;
}
.contact .s1 { left: calc(100% - 360px); top: -409.06px; width: 840.406px; height: 840.406px; --rot: -23.28deg; }
.contact .s2 { left: calc(100% - 222.98px); top: -272.02px; width: 566.335px; height: 566.335px; --rot: -19.08deg; }
.contact .s3 { left: calc(100% - 54.36px); top: -131.65px; width: 270.281px; height: 323.351px; --rot: -13.35deg; }
.contact .s4 { left: -334px; top: 192.55px; width: 846.926px; height: 846.926px; --rot: 65.57deg; }
.contact .s5 { left: -196.41px; top: 330.13px; width: 571.721px; height: 571.721px; --rot: 69.78deg; }
.contact .s6 { left: -92.05px; top: 499.6px; width: 326.082px; height: 274.743px; --rot: 75.51deg; }
.contact .bands {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.contact__haze {
  position: absolute;
  left: 50%;
  top: 68px;
  width: 900px;
  height: 500px;
  margin-left: -450px;
  border-radius: 50%;
  background: rgba(70, 214, 138, 0.09);
  filter: blur(160px);
  pointer-events: none;
}
.contact__lines {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(232, 223, 200, 0.04) 0.16%, transparent 0.16%),
    linear-gradient(90deg, rgba(232, 223, 200, 0.04) 0, transparent 0);
}
.contact__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 688px;
  text-align: center;
}
.contact h2 {
  padding-top: 24px;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -1.2px;
}
.contact__lead {
  padding-top: 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
}
.contact__cta {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.contact__cta .btn {
  width: 100%;
  max-width: 326px;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 32px;
}
.footer__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--muted-70);
}
.footer__meta {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.footer__copy {
  width: 234px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted-60);
  white-space: nowrap;
}
.social {
  display: flex;
  gap: 8px;
}
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 5px;
  transition: border-color 0.2s;
}
.social a:hover {
  border-color: rgba(70, 214, 138, 0.5);
}

/* ================= Tablet ================= */
@media (min-width: 768px) {
  .pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .bio p:last-child {
    grid-column: 1 / -1;
  }
  .leadership__grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .hero__actions .btn {
    width: 201px;
  }
  .hero__lead {
    max-width: none;
  }
  .contact__cta .btn {
    width: 201px;
  }
  .figure figcaption {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
  }
  .figure figcaption strong {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }
  .spec__body {
    padding: 24px;
  }
  .footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .footer__meta {
    flex-direction: row-reverse;
  }
  .footer__copy {
    width: auto;
  }
}

/* ================= Desktop ================= */
@media (min-width: 1024px) {
  .nav {
    padding-inline: 40px;
  }
  .nav__burger,
  .menu {
    display: none !important;
  }
  .nav__links {
    display: flex;
    gap: 32px;
  }
  .nav__cta {
    display: flex;
    width: 203px;
  }

  .hero {
    min-height: max(min(100svh, 1000px), 590px);
    padding-top: 146px;
    padding-bottom: 36px;
  }
  .hero__glow {
    height: 668px;
  }
  .hero__lines {
    height: 668px;
  }
  .blob--green {
    right: auto;
    left: calc(50% + 71px);
  }
  .hero__inner {
    min-height: 408px;
    justify-content: center;
  }
  .hero__eyebrow {
    position: static;
  }
  .hero__copy {
    margin-top: 0;
  }
  .hero h1 {
    font-size: 74.97px;
    line-height: 73.47px;
    letter-spacing: -2.249px;
    max-width: 645px;
  }
  .hero h1 span {
    white-space: nowrap;
  }
  .hero__lead {
    font-size: 18px;
    line-height: 29.25px;
    max-width: 448px;
    white-space: nowrap;
  }
  .hero__actions {
    padding-top: 36px;
  }

  /* hero stars: positions measured on the 1200px frame, anchored to the right edge */
  .hero .s1 { left: calc(100% - 557px); }
  .hero .s2 { left: calc(100% - 419.97px); }
  .hero .s3 { left: calc(100% - 251.35px); }
  .hero .s4 { left: calc(100% - 1132.43px); top: 264.56px; }
  .hero .s5 { left: calc(100% - 994.84px); top: 402.14px; }
  .hero .s6 { left: calc(100% - 890.48px); top: 571.6px; }
  .hero .tree {
    left: 62.5%;
    top: calc(89.96px * var(--k));
    width: calc(294px * var(--k));
    height: calc(390px * var(--k));
  }

  .h2 {
    font-size: 42.84px;
    line-height: 44.98px;
    letter-spacing: -1.071px;
  }
  .lead {
    font-size: 18px;
    line-height: 29.25px;
  }

  .pillars__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(289px, auto) minmax(334.5px, auto);
    padding-top: 56px;
  }
  .card {
    padding: 28px;
  }
  .card h3 {
    max-width: 258px;
  }
  .card p {
    max-width: 258px;
  }
  .card h3 {
    padding-top: 24px;
    min-height: 52px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }
  .card--cta p {
    font-size: 24px;
    line-height: 30px;
  }

  .section.stack {
    padding-top: 50px;
  }
  .figure {
    margin-top: 56px;
  }
  .specs .spec__art {
    padding: 16px;
  }

  .leadership {
    padding-block: 80.5px 81px;
  }
  .leadership__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 56px;
  }
  .person {
    grid-column: 1 / span 4;
  }
  .leadership__text {
    grid-column: 5 / span 8;
  }
  .person__info {
    padding: 24px;
  }
  .person__info h3 {
    font-size: 24px;
    line-height: 32px;
  }
  .quote {
    font-size: 24.633px;
    line-height: 29.56px;
    letter-spacing: -0.4927px;
    max-width: 642px;
  }
  .chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 46px;
  }
  .chip strong,
  .chip span {
    padding-right: 8px;
  }
  .bio {
    row-gap: 39px;
  }

  .contact {
    min-height: 636px;
    padding-block: 144px 143px;
  }
  .contact .s1 { left: calc(100% - 557.01px); top: -115.52px; }
  .contact .s2 { left: calc(100% - 419.99px); top: 21.53px; }
  .contact .s3 { left: calc(100% - 251.37px); top: 161.9px; }
  .contact .s4 { top: 192.49px; }
  .contact .s5 { top: 330.07px; }
  .contact .s6 { top: 499.53px; }
  .contact__inner {
    max-width: 688px;
  }
  .contact h2 {
    font-size: 64.26px;
    line-height: 99.6px;
    letter-spacing: -1.928px;
    height: 124px;
  }
  .contact__lead {
    font-size: 18px;
    line-height: 29.25px;
    max-width: 576px;
    margin-inline: auto;
  }

  .footer__inner {
    padding-block: 32px;
  }
  .footer__meta {
    flex-direction: row;
    gap: 16px;
  }
}

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

/* ---------- Motion + interactions ---------- */
@keyframes star-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--dy, 28px); }
}
.star {
  animation: star-float var(--dur, 9s) ease-in-out infinite;
}
.s1 { --dy: 30px; --dur: 9s; }
.s2 { --dy: -26px; --dur: 11s; animation-delay: -3s; }
.s3 { --dy: 22px; --dur: 8s; animation-delay: -5s; }
.s4 { --dy: -32px; --dur: 12s; animation-delay: -2s; }
.s5 { --dy: 26px; --dur: 10s; animation-delay: -7s; }
.s6 { --dy: -22px; --dur: 9.5s; animation-delay: -4s; }
@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
}

.card {
  position: relative;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.card > * {
  position: relative;
}
.card:not(.card--cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(157deg, rgba(70, 214, 138, 0.12), rgba(70, 214, 138, 0));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:not(.card--cta):hover {
  border-color: rgba(70, 214, 138, 0.25);
  background-color: transparent;
}
.card:not(.card--cta):hover::before {
  opacity: 1;
}

@media (min-width: 1024px) {
  .leadership__grid {
    align-items: stretch;
  }
  .leadership__text {
    display: flex;
    flex-direction: column;
  }
  .chips {
    flex: 1;
    grid-template-rows: 1fr;
  }
}