/* ==========================================================================
   SLADE WELLNESS: coming soon website

   Contents
   1. Fonts and design tokens
   2. Base
   3. Header
   4. Hero
   5. Philosophy
   6. Our World
   7. Launch status
   8. Footer
   9. Legal dialogs
   10. Responsive adjustments
   11. Reduced motion
   ========================================================================== */

/* 1. FONTS AND DESIGN TOKENS
   ========================================================================== */

/* Fonts are hosted with the site, so it makes no third-party requests */
@font-face {
  /* An extended cut of Work Sans Bold, made to match the Slade logo */
  font-family: "Slade Display";
  src: url("assets/fonts/slade-display.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand palette */
  --forest: #071c15;
  --black: #050807;
  --emerald: #00a86b;
  --sage: #91a99a;
  --off-white: #e9f0e9;

  /* Tints of the palette */
  --line: rgba(145, 169, 154, 0.24);
  --glass: rgba(233, 240, 233, 0.055);
  --glass-line: rgba(233, 240, 233, 0.14);
  --glow: rgba(0, 168, 107, 0.34);

  /* Type */
  --font-display: "Slade Display", "Arial Black", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 4.5vw, 72px);
  --section-space: clamp(88px, 13vw, 200px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. BASE
   ========================================================================== */

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

html {
  background: var(--black);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-synthesis: none;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

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

a {
  color: inherit;
}

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

::selection {
  background: var(--emerald);
  color: var(--black);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--off-white);
  color: var(--black);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Section headlines */
.display {
  font-family: var(--font-display);
  margin-left: -0.035em; /* Lines the first letter up with the text below */
  font-size: clamp(1.625rem, 4.9vw, 5rem);
  font-weight: 400;
  line-height: 1.04;
}

.display span {
  display: block;
}

.display .apostrophe {
  display: inline;
}

/* Small pulsing light used by every "coming soon" indicator */
.status-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 0 var(--glow);
  animation: dot-pulse 2.8s ease-out infinite;
}

@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 168, 107, 0.6); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(0, 168, 107, 0); }
}

/* 3. HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(5, 8, 7, 0.68);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* The Slade leaf-drop mark */
.mark {
  flex: none;
  width: 24px;
  height: 32px;
  fill: none;
  stroke: var(--emerald);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-nav a {
  padding: 6px 18px;
  border-radius: 999px;
  color: var(--off-white);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-nav a:hover {
  background: rgba(233, 240, 233, 0.1);
}

.site-nav a.is-current {
  background: var(--off-white);
  color: var(--black);
}

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--off-white);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 4. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 104px var(--gutter) clamp(32px, 5vh, 56px);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

/* The plant is set slightly oversized so parallax never exposes an edge */
.hero-media {
  position: absolute;
  inset: -3%;
  z-index: -3;
  will-change: transform;
}

.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: 70% 40%;
  animation: hero-open 2.4s var(--ease) both;
}

@keyframes hero-open {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Soft emerald light drifting across the plant */
.hero-light {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.hero-light--one {
  top: -18%;
  right: 4%;
  width: 62vmax;
  height: 62vmax;
  background: radial-gradient(closest-side, rgba(0, 168, 107, 0.2), rgba(0, 168, 107, 0));
  animation: light-drift-one 22s ease-in-out infinite alternate;
}

.hero-light--two {
  right: -14%;
  bottom: -10%;
  width: 44vmax;
  height: 44vmax;
  background: radial-gradient(closest-side, rgba(145, 169, 154, 0.12), rgba(145, 169, 154, 0));
  animation: light-drift-two 28s ease-in-out infinite alternate;
}

@keyframes light-drift-one {
  to { transform: translate3d(-12vw, 8vh, 0) scale(1.12); }
}

@keyframes light-drift-two {
  to { transform: translate3d(-10vw, -10vh, 0) scale(0.9); }
}

/* Keeps the copy readable over the image */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--black) 0%, rgba(5, 8, 7, 0.86) 24%, rgba(5, 8, 7, 0) 62%),
    linear-gradient(to right, rgba(5, 8, 7, 0.82) 0%, rgba(5, 8, 7, 0.28) 44%, rgba(5, 8, 7, 0) 66%);
}

.hero-title {
  font-family: var(--font-display);
  margin-left: -0.035em; /* Lines the first letter up with the text below */
  font-size: clamp(1.75rem, min(7.6vw, 13.5vh), 8.5rem);
  font-weight: 400;
  line-height: 1.04;
}

/* Each headline line rises from behind a mask once, when the page opens */
.hero-title .line {
  display: block;
  overflow: hidden;
}

.hero-title .line > span {
  display: block;
  animation: line-rise 1.3s var(--ease) both;
}

.hero-title .line:nth-child(1) > span { animation-delay: 0.25s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.42s; }

@keyframes line-rise {
  from { transform: translateY(104%); }
  to { transform: none; }
}

.hero-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: stretch;
  margin-top: clamp(20px, 3.5vh, 40px);
  animation: details-in 1.1s 0.85s ease both;
}

@keyframes details-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The announcement sits at the top of its column and the status at the bottom,
   so both columns line up at the top and the bottom */
.hero-announce {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 2.6vh, 28px);
}

.hero-primary {
  max-width: 26ch;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.status-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 1px solid rgba(0, 168, 107, 0.6);
  border-radius: 999px;
  background: rgba(0, 168, 107, 0.12);
  box-shadow: 0 0 36px rgba(0, 168, 107, 0.2), inset 0 1px 0 rgba(233, 240, 233, 0.14);
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.status-note {
  flex: 1 1 200px;
  max-width: 30ch;
  color: var(--sage);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.hero-copy {
  max-width: 60ch;
  padding-right: clamp(0px, 4vw, 56px);
  color: var(--sage);
}

.hero-evidence {
  margin-bottom: 0.75em;
  font-weight: 700;
  color: var(--off-white);
  font-size: 1.125em;
  line-height: 1.4;
}

/* A dot travels down a thin track */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(32px, 5vh, 56px);
  display: block;
  padding: 8px;
  margin: -8px;
}

.scroll-cue-track {
  position: relative;
  display: block;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: var(--line);
}

.scroll-cue-track::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 22px;
  background: var(--off-white);
  animation: scroll-cue 2.4s var(--ease) infinite;
}

@keyframes scroll-cue {
  from { transform: translateY(-24px); }
  to { transform: translateY(68px); }
}

/* 5. PHILOSOPHY
   ========================================================================== */

.philosophy {
  position: relative;
  padding: var(--section-space) var(--gutter);
  overflow: clip;
  isolation: isolate;
}

/* Light source behind the glass panel */
.philosophy::before {
  content: "";
  position: absolute;
  top: 26%;
  left: -8%;
  z-index: -1;
  width: 62vw;
  height: 34vw;
  min-height: 320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 168, 107, 0.3), rgba(0, 168, 107, 0));
}

.philosophy-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 96px);
}

.philosophy-intro .display {
  grid-column: 1 / -1;
}

.philosophy-text {
  grid-column: 2;
  max-width: 46ch;
  margin-top: clamp(24px, 3vw, 48px);
  color: var(--sage);
  font-size: 1.1875em;
  line-height: 1.5;
}

/* One glass panel holding all three ideas */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 104px);
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(233, 240, 233, 0.1);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.pillar {
  position: relative;
  padding: clamp(28px, 3.4vw, 52px);
}

.pillar + .pillar {
  border-left: 1px solid var(--glass-line);
}

/* An emerald hairline grows across the top of a block on hover */
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(28px, 3.4vw, 52px);
  right: clamp(28px, 3.4vw, 52px);
  height: 1px;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.pillar:hover::before {
  transform: scaleX(1);
}

.pillar h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.pillar p {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--sage);
}

/* The product range, from plant protein to mental wellbeing */
.range {
  margin-top: clamp(88px, 11vw, 168px);
}

.range-statement {
  font-size: clamp(1.75rem, 3.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Keeps "Plant-based" and the other phrases from breaking at their hyphens */
.range-statement span {
  display: inline-block;
}

.range-stem {
  --stem-height: clamp(72px, 10vw, 132px);
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: calc(var(--stem-height) + 8px);
}

.range-stem svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--stem-height);
  overflow: visible;
}

.range-path {
  fill: none;
  stroke: url(#stem-gradient);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* JavaScript adds .will-grow, so the stem is always visible without it */
.range.will-grow .range-path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--ease);
}

.range.will-grow.is-grown .range-path {
  stroke-dashoffset: 0;
}

.range-end {
  font-size: 1.0625em;
  line-height: 1.3;
}

.range-end--finish {
  text-align: right;
}

/* Sit on the two ends of the stem, 90% of the way down its drawing */
.range-node {
  position: absolute;
  top: calc(var(--stem-height) * 0.9 - 3.5px);
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}

.range-node--bright {
  right: -2px;
  left: auto;
  background: var(--emerald);
  box-shadow: 0 0 16px 3px var(--glow);
}

/* 6. OUR WORLD
   ========================================================================== */

.world {
  padding: 0 var(--gutter) var(--section-space);
}

.world-head p {
  margin-top: clamp(12px, 1.4vw, 20px);
  color: var(--sage);
  font-size: 1.1875em;
}

/* Three equal columns: images and captions all start on the same lines */
.world-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

.world-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--forest);
}

.world-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.world-item:hover .world-image img {
  transform: scale(1.04);
}

.world-item figcaption {
  padding-top: 20px;
}

.world-item h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.world-item p {
  max-width: 38ch;
  margin-top: 8px;
  color: var(--sage);
}

/* 7. LAUNCH STATUS
   ========================================================================== */

.status {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  padding: var(--section-space) var(--gutter);
  background: linear-gradient(to bottom, var(--black), var(--forest) 34%, var(--forest) 72%, var(--black));
}

.status-visual {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

.status-visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 168, 107, 0.26), rgba(0, 168, 107, 0));
}

.status-visual canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.status-text > p {
  max-width: 480px;
  margin-top: clamp(20px, 2.4vw, 32px);
  color: var(--sage);
  font-size: 1.1875em;
  line-height: 1.5;
}

.status-list {
  max-width: 480px;
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.status-list dt {
  color: var(--sage);
}

.status-list dd {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

/* 8. FOOTER
   ========================================================================== */

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 4vw, 56px) 48px;
  padding: clamp(64px, 8vw, 120px) var(--gutter) 32px;
  background: var(--black);
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 5rem);
  line-height: 1.04;
}

.footer-tagline {
  margin-top: 12px;
  color: var(--sage);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 12px;
}

.footer-links a,
.footer-legal a {
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.footer-links a:hover,
.footer-legal a:hover {
  color: var(--emerald);
  text-decoration-color: currentColor;
}

.footer-disclaimer {
  grid-column: 1 / -1;
  padding-top: 24px;
  padding-right: max(0px, calc(100% - 76ch));
  border-top: 1px solid var(--line);
  color: var(--sage);
  font-size: 0.875rem;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 8px 32px;
  color: var(--sage);
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

/* 9. LEGAL DIALOGS
   ========================================================================== */

.legal-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: clamp(24px, 4vw, 44px);
  overflow-y: auto;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--forest);
  color: var(--off-white);
}

.legal-dialog[open] {
  animation: dialog-in 0.35s var(--ease);
}

.legal-dialog::backdrop {
  background: rgba(5, 8, 7, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.legal-dialog h2 {
  margin-bottom: 18px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.legal-dialog p {
  margin-bottom: 14px;
  color: var(--off-white);
  opacity: 0.86;
}

.legal-close {
  min-height: 44px;
  margin-top: 10px;
  padding: 0 22px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: transparent;
  color: var(--off-white);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.legal-close:hover {
  background: var(--off-white);
  color: var(--black);
}

/* 10. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Tablets */
@media (max-width: 1024px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar + .pillar {
    border-top: 1px solid var(--glass-line);
    border-left: 0;
  }

  .pillar p {
    max-width: 52ch;
  }

  .status {
    grid-template-columns: 1fr;
  }

  .status-visual {
    max-width: 520px;
  }
}

/* Phones and small tablets */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 72px;
  }

  .wordmark {
    gap: 9px;
    font-size: 0.75rem;
  }

  .mark {
    width: 20px;
    height: 27px;
  }

  .site-header {
    padding-block: 12px;
  }

  .menu-toggle {
    display: block;
  }

  /* The menu collapses behind the button */
  .site-nav {
    position: absolute;
    top: calc(100% + 4px);
    right: var(--gutter);
    flex-direction: column;
    min-width: 200px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(7, 28, 21, 0.92);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav a {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 1rem;
  }

  .hero {
    padding-top: 40vh;
    padding-top: 36svh;
    padding-bottom: 28px;
  }

  .hero-media img {
    object-position: 50% 0;
  }

  .hero-scrim {
    background: linear-gradient(to top, var(--black) 0%, var(--black) 40%, rgba(5, 8, 7, 0.72) 62%, rgba(5, 8, 7, 0) 84%);
  }

  .hero-title {
    font-size: clamp(1.75rem, 9.6vw, 4.5rem);
  }

  .hero-details {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .status-note {
    flex-basis: 100%;
    max-width: none;
  }

  .scroll-cue {
    display: none;
  }

  .philosophy-intro {
    grid-template-columns: 1fr;
  }

  .philosophy-text {
    grid-column: 1;
  }

  .hero-copy {
    padding-right: 0;
  }

  .world-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .world-image {
    aspect-ratio: 5 / 4;
  }

  .range-end {
    font-size: 0.9375rem;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }
}

/* CENTRED LAYOUT
   Every section sits on one centre line. Delete this block for left alignment.
   ========================================================================== */

/* Hero */
.hero {
  align-items: center;
  justify-content: center;
  padding-bottom: 96px;
  text-align: center;
}

.hero-content {
  width: 100%;
}

.hero-title,
.display {
  margin-left: 0;
}

.hero-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
}

.hero-announce {
  display: contents;
}

.hero-primary {
  order: 1;
  max-width: none;
}

.hero-copy {
  order: 2;
  max-width: 62ch;
  padding-right: 0;
}

.status-row {
  order: 3;
  flex-direction: column;
  justify-content: center;
}

.status-note {
  flex: none;
  max-width: none;
}

.hero-media img {
  object-position: 62% 40%;
}

.hero-scrim {
  background:
    linear-gradient(to top, var(--black) 0%, rgba(5, 8, 7, 0.82) 45%, rgba(5, 8, 7, 0.3) 78%, rgba(5, 8, 7, 0.1) 100%);
}

.scroll-cue {
  right: auto;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-cue-track {
  height: 56px;
}

/* Philosophy */
.philosophy::before {
  left: 19%;
}

.philosophy-intro {
  display: block;
  text-align: center;
}

.philosophy-text {
  margin-inline: auto;
}

.pillar {
  text-align: center;
}

.pillar p {
  margin-inline: auto;
}

.range-statement {
  text-align: center;
}

/* Our World */
.world-head,
.world-item figcaption {
  text-align: center;
}

.world-item p {
  margin-inline: auto;
}

/* Launch status */
.status {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.status-visual {
  max-width: 520px;
}

.status-text > p,
.status-list {
  margin-inline: auto;
}

.status-list {
  text-align: left;
}

/* Footer */
.site-footer {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.footer-links {
  align-items: center;
  padding-top: 0;
}

.footer-disclaimer {
  width: 100%;
  padding-right: 0;
}

.footer-base {
  flex-direction: column;
  align-items: center;
}

@media (max-width: 760px) {
  .hero {
    justify-content: flex-end;
    padding-bottom: 28px;
  }

  .hero-scrim {
    background: linear-gradient(to top, var(--black) 0%, var(--black) 40%, rgba(5, 8, 7, 0.72) 62%, rgba(5, 8, 7, 0) 84%);
  }

  .hero-media img {
    object-position: 50% 0;
  }

  .status-note {
    flex-basis: auto;
  }

  .world-head p {
    margin-inline: auto;
  }
}

/* 11. REDUCED MOTION
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}