/* Benchmark Sports — shared styles
   Sections: 1 fonts · 2 tokens & base · 3 header · 4 buttons & forms · 5 home sections
   6 footer · 7 floating button · 8 modal · 9 cookie banner · 10 legal pages · 11 motion */

/* 1. Fonts (self-hosted, Latin subset) */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-400-800-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-600-800-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens & base */
:root {
  --paper: #f5f4ef;
  --ink: #151513;
  --green: #4f6b4a;
  --green-dark: #3e5539;
  --deep: #1f2c1d;
  --body: #4a4a44;
  --muted: #6a6a62;
  --line: #e2e0d8;
  --mist: #e7ebe4;
  --error: #9a2e1f;
  --error-bg: #f7e4de;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --nav-h: 68px;
  /* Full-screen frame used by the split, orbit and final sections */
  --frame: max(640px, min(100vh, 62.5vw));
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ink);
}
a:hover {
  color: var(--green);
}

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

/* Keep the HTML hidden attribute working on elements that set their own display */
[hidden] {
  display: none !important;
}

section[id] {
  scroll-margin-top: var(--nav-h);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
  color: #fff;
}

.dots {
  background-image: radial-gradient(rgba(21, 21, 19, 0.13) 1px, transparent 1px);
  background-size: 22px 22px;
}

.arrow {
  width: 16px;
  height: 16px;
  flex: none;
}

/* 3. Header
   On the home page the header floats over the hero (transparent, white logo and
   links) and turns into the cream bar once the hero has scrolled away. Other
   pages use the solid bar from the start (class "is-solid" in the HTML). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  background: rgba(245, 244, 239, 0);
  border-bottom: 1px solid rgba(21, 21, 19, 0);
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-solid {
  background: rgba(245, 244, 239, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(21, 21, 19, 0.06);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__logo {
  display: block;
  flex: none;
}
.site-header__logo img {
  height: 40px;
  width: auto;
  transition: filter 0.3s ease;
}
/* The logo file is white; recolour it black on the cream bar */
.site-header.is-solid .site-header__logo img {
  filter: brightness(0);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav a:hover {
  color: var(--mist);
}
.site-header.is-solid .site-nav a {
  color: var(--ink);
}
.site-header.is-solid .site-nav a:hover {
  color: var(--green);
}

/* Pages without a full-bleed hero need room under the fixed header */
.has-solid-header main {
  padding-top: var(--nav-h);
}

/* 4. Buttons & forms */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--green {
  background: var(--green);
  color: #fff;
}
.btn--green:hover {
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(79, 107, 74, 0.55);
}
.btn--white {
  background: #fff;
  color: var(--ink);
}
.btn--white:hover {
  color: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.btn--dark {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover {
  color: #fff;
}
.btn[disabled] {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

/* Email pill used in the hero (light) and the final frame (glass) */
.email-pill {
  width: 100%;
  max-width: 520px;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -22px rgba(21, 21, 19, 0.35);
}
.email-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 0 16px;
  border-radius: 999px;
}
.email-pill input:focus {
  outline: none;
}
.email-pill:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.email-pill .btn {
  padding: 14px 22px;
  font-size: 15px;
}
.email-pill--glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  margin-top: 6px;
}
.email-pill--glass input {
  color: #fff;
  padding: 0 18px;
}
.email-pill--glass input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.email-pill--glass:focus-within {
  outline-color: #fff;
}
.email-pill--glass .btn {
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 700;
}

/* 5. Home sections */

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(640px, min(100vh, 62.5vw));
  padding: calc(var(--nav-h) + 36px) 24px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deep);
  color: #fff;
  text-align: center;
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: 50% 40%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 44, 29, 0.62), rgba(31, 44, 29, 0.85));
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.hero h1 {
  font-weight: 700;
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero__lead {
  max-width: 620px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--mist);
  text-wrap: pretty;
}

/* Dotted strip between the hero and the split section */
.dot-strip {
  height: 120px;
}

/* Split: photo + checklist */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  height: var(--frame);
  overflow: hidden;
  font-family: var(--display);
}
.split__media {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}
.split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  max-width: 640px;
  padding: clamp(40px, 6vw, 104px) clamp(24px, 6vw, 96px);
}
.split h2 {
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.checklist li:last-child {
  border-bottom: 1px solid var(--line);
}
.checklist__tick {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
}

/* Coach orbit */
.orbit-section {
  min-height: var(--frame);
  padding: 48px 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-section__inner {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.section-title {
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.stage {
  --stage: min(560px, 86vw, calc(var(--frame) - 300px));
  --r: calc(var(--stage) * 0.42);
  --av: clamp(70px, 18vw, 124px);
  position: relative;
  width: var(--stage);
  height: var(--stage);
  margin-top: 32px;
}
.stage__ring,
.stage__glow,
.stage__outer {
  position: absolute;
  border-radius: 50%;
}
.stage__ring {
  inset: 8%;
  border: 1.5px dashed #c9c7be;
}
.stage__glow {
  inset: 27%;
  background: radial-gradient(circle, rgba(79, 107, 74, 0.14), rgba(79, 107, 74, 0) 70%);
}
.stage__outer {
  inset: -6%;
  border: 1px solid var(--line);
}
.stage__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.5;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1.28));
}
.orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orbit__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.orbit__head {
  position: relative;
}
.orbit__head img {
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--paper);
  box-shadow: 0 0 0 2px var(--green), 0 24px 40px -18px rgba(21, 21, 19, 0.55);
}
.orbit__pulse {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--paper);
}
.stage__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--stage) * 0.4);
  height: calc(var(--stage) * 0.4);
  border-radius: 50%;
  border: 0;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font: inherit;
  box-shadow: 0 0 0 0 rgba(79, 107, 74, 0.45), 0 30px 60px -20px rgba(79, 107, 74, 0.7);
  transition: transform 0.2s ease;
}
.stage__core:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.stage__core:focus-visible {
  outline-offset: 6px;
}
.stage__core span {
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stage__core svg {
  width: 22px;
  height: 22px;
}

/* Final full-bleed waitlist frame */
.final {
  position: relative;
  overflow: hidden;
  min-height: max(640px, min(100vh, 62.5vw));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #13200f;
  color: #fff;
}
.final__media,
.final__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.final__media img {
  object-fit: cover;
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(10, 22, 8, 0.62) 0%, rgba(10, 22, 8, 0.38) 70%, rgba(10, 22, 8, 0.25) 100%);
}
.final__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.final__logo {
  height: clamp(96px, 11vw, 168px);
  width: auto;
  opacity: 0.95;
  margin-bottom: 28px;
}
.final h2 {
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.final p {
  max-width: 460px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--mist);
}

/* 6. Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px 120px;
  font-size: 13px;
  color: var(--body);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
}
.site-footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer__links a,
.link-button {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.site-footer__links a:hover,
.link-button:hover {
  color: var(--green);
}

/* 7. Floating waitlist button (home page) */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 30;
  padding: 15px 28px;
  font-size: 15px;
  box-shadow: 0 18px 36px -14px rgba(79, 107, 74, 0.7);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.floating-cta.is-visible:hover {
  transform: translateX(-50%) translateY(-1px);
}
.cookie-open .floating-cta {
  opacity: 0;
  pointer-events: none;
}

/* 8. Waitlist modal (built by js/site.js) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(21, 21, 19, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal[hidden] {
  display: none;
}
.modal__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #e9e7e0;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal__close:hover {
  background: #dedcd4;
}
.modal__form,
.modal__done {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 40px;
}
.modal h2 {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
}
.field__optional {
  font-weight: 400;
  color: var(--muted);
}
.field input,
.field select {
  width: 100%;
  border: 1px solid #dad8d0;
  background: #fff;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.field input:focus,
.field select:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-color: var(--green);
}
.field__select {
  position: relative;
}
.field__select select {
  padding-right: 40px;
  cursor: pointer;
}
.field__select select.is-placeholder {
  color: #8a8a82;
}
.field__select option {
  color: var(--ink);
}
.field__select svg {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--body);
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
}
.form-error {
  font-size: 13px;
  color: var(--error);
  background: var(--error-bg);
  border-radius: 10px;
  padding: 10px 12px;
}
.form-error[hidden] {
  display: none;
}
.modal__form .btn {
  padding: 15px;
  font-size: 16px;
}
.modal__done {
  align-items: flex-start;
  padding-top: 8px;
}
.modal__done-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
}
.modal__done p {
  color: var(--body);
  line-height: 1.55;
}

/* 9. Cookie banner (built by js/consent.js) */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 50;
  width: min(380px, calc(100vw - 24px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 30px 60px -30px rgba(21, 21, 19, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cookie-banner p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.cookie-banner__actions .btn {
  font-size: 14px;
  padding: 11px 16px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.cookie-banner__actions .btn:hover {
  background: var(--ink);
  color: #fff;
}

/* 10. Legal pages */
.legal {
  padding: 96px 24px;
}
.legal__inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.legal__updated {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 36px;
}
.legal h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 36px 0 12px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
}
.legal p + p {
  margin-top: 14px;
}
.legal ul {
  margin: 12px 0 0;
  padding-left: 20px;
}
.legal li + li {
  margin-top: 6px;
}
.legal strong {
  color: var(--ink);
  font-weight: 600;
}
.table-wrap {
  overflow-x: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--body);
}
.legal th,
.legal td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal th {
  color: var(--ink);
  font-weight: 600;
  background: #fbfaf7;
}
.legal tr:last-child td {
  border-bottom: 0;
}

/* Responsive */
@media (max-width: 959px) {
  .split {
    height: auto;
    grid-template-columns: 1fr;
  }
  .split__media {
    min-height: 460px;
  }
  .split__media img {
    object-position: 70% 28%;
  }
  .split__copy {
    max-width: none;
    width: 100%;
    padding: 56px 40px 72px;
    align-items: center;
  }
  .split__copy > * {
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 809px) {
  :root {
    --nav-h: 64px;
  }
  .site-header__inner {
    padding: 12px 16px;
  }
  .site-nav {
    gap: 12px;
  }
  .site-nav__link {
    display: none;
  }
  .hero {
    min-height: max(600px, 100svh);
    padding: calc(var(--nav-h) + 24px) 16px 48px;
  }
  .hero__lead {
    font-size: 17px;
  }
  .email-pill input {
    padding: 0 12px;
  }
  .dot-strip {
    height: 64px;
  }
  .split__media {
    min-height: 380px;
  }
  .split__copy {
    padding: 40px 20px 56px;
  }
  .checklist li {
    font-size: 18px;
  }
  .orbit-section {
    min-height: 0;
    padding: 72px 16px 88px;
  }
  .final {
    min-height: max(600px, 100svh);
  }
  .final__content {
    padding: 48px 16px;
  }
  .final__logo {
    margin-bottom: 16px;
  }
  .site-footer {
    padding: 24px 16px 110px;
  }
  .site-footer__inner {
    flex-direction: column;
    gap: 12px;
  }
  .legal {
    padding: 56px 20px 72px;
  }
  .cookie-banner {
    left: 12px;
    bottom: 12px;
  }
}

@media (max-width: 360px) {
  .email-pill .btn {
    padding: 14px 16px;
  }
  .email-pill--glass .btn {
    padding: 14px 18px;
  }
}

/* 11. Motion — only for visitors who haven't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .orbit {
    animation: spin 60s linear infinite;
  }
  .orbit__head {
    animation: spin 60s linear infinite reverse;
  }
  .stage:hover .orbit,
  .stage:hover .orbit__head,
  .stage:focus-within .orbit,
  .stage:focus-within .orbit__head {
    animation-play-state: paused;
  }
  .orbit__head img {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .orbit__head:hover img {
    transform: translateY(-6px) scale(1.1);
  }
  .orbit__pulse {
    animation: pulse 1.8s ease-in-out infinite;
  }
  .stage__core {
    animation: halo 2.6s ease-out infinite;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .pop {
      animation: pop linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 107, 74, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(79, 107, 74, 0);
  }
}
@keyframes halo {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 107, 74, 0.45), 0 30px 60px -20px rgba(79, 107, 74, 0.7);
  }
  100% {
    box-shadow: 0 0 0 34px rgba(79, 107, 74, 0), 0 30px 60px -20px rgba(79, 107, 74, 0.7);
  }
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(64px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(120px) scale(0.8);
    border-radius: 40px;
  }
  to {
    opacity: 1;
    transform: none;
    border-radius: 0;
  }
}