/*!
Theme Name: Free Agent
Theme URI: http://underscores.me/
Author: Appomate
Author URI: https://www.appomate.com.au/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: free-agent
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Free Agent is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* =========================================================
   APPEND everything below to your theme's existing style.css —
   AFTER the required WordPress theme header comment block.
   This is the ONLY stylesheet for the whole site: tokens, reset,
   header, footer, and the homepage hero/ticker all live here.
   ========================================================= */

:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-off-white: #F9F9F9;
  --color-grey-mid: #9B9B9B;
  --color-grey-soft: #A3A3A3;
  --color-orange: #FF3D1A;
  --color-orange-2: #F16001;
  --color-red: #C10801;
  --color-black: #0A0A0A;
  --color-hairline: rgba(255, 255, 255, 0.07);
  --color-hairline-strong: rgba(255, 255, 255, 0.11);
  --color-fill-soft: rgba(255, 255, 255, 0.05);

  --gradient-logo: linear-gradient(30.8deg, #FFFFFF 0%, #F16001 33.7%, #C10801 66.3%, #000000 100%);
  --gradient-cta: linear-gradient(60deg, #F16001 0%, #C10801 100%);

  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "DM Sans", sans-serif;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 7px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 13px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 26px;
  --space-12: 28px;
  --space-13: 36px;
  --space-14: 40px;

  --radius-sm: 6px;
  --radius-md: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms ease;
  --transition-smooth: 420ms var(--ease);

  --nav-height: 64px;
  --content-max: 1440px;
}

@media (min-width: 1024px) {
  :root { --nav-height: 70px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-off-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
* { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-off-white);
  color: var(--color-black);
  padding: var(--space-5) var(--space-7);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: left var(--transition-fast);
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* ---------- Shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 44px;
  padding: var(--space-5) var(--space-10);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--gradient {
  background: var(--gradient-cta);
  color: var(--color-off-white);
}
.btn--gradient:hover {
  box-shadow: 0 8px 24px -8px rgba(241, 96, 1, 0.6);
  transform: translateY(-1px);
}

.btn--outline {
  width: 100%;
  border: 1.5px solid var(--color-off-white);
  background: transparent;
  color: var(--color-off-white);
  font-size: 14px;
  letter-spacing: 1px;
  padding: var(--space-9) var(--space-7);
  justify-content: space-between;
}
.btn--outline:hover {
  background: var(--color-off-white);
  color: var(--color-black);
}
.btn__icon-unlock {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.btn__icon-unlock svg { width: 100%; height: 100%; display: block; }
.btn__icon-unlock svg path { transition: stroke var(--transition-fast); }
.btn--outline:hover .btn__icon-unlock svg path { stroke: var(--color-black); }

.btn--split {
  width: 100%;
  min-height: 52px;
  background: var(--color-fill-soft);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-off-white);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 0 var(--space-2) 0 var(--space-8);
  justify-content: space-between;
}
.btn--split:hover { background: rgba(255, 255, 255, 0.09); }
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--color-orange);
  color: var(--color-black);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 800;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.btn--split:hover .btn__icon {
  transform: translateX(3px);
  background: var(--color-orange-2);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--color-black);
  height: var(--nav-height);
}
.site-header__divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-hairline-strong);
}
.site-header__inner {
  position: relative;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-10);
}

.site-logo { display: flex; align-items: center; }
.site-logo img { height: 32px; width: auto; }

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-12);
}
.site-nav a {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  transition: color var(--transition-fast);
  padding: var(--space-2) 0;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-off-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-smooth);
}
.site-nav a:hover { color: var(--color-off-white); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.site-header__cta { display: none; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--color-off-white);
  border-radius: 1px;
  transition: transform var(--transition-smooth), opacity var(--transition-fast);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  z-index: 90;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  padding: var(--space-13) var(--space-10);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.mobile-menu__links a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-off-white);
}
.mobile-menu__cta { width: 100%; }

@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-black);
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-13) 0;
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}
.site-footer__links a {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  transition: color var(--transition-fast);
}
.site-footer__links a:hover { color: var(--color-off-white); }
.site-footer__copyright {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-grey-soft);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Hero (homepage only, front-page.php) ---------- */
.hero {
  position: relative;
  width: 100%;
  background: var(--color-black);
  overflow: hidden;
}

.hero .hero__glow {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.hero .hero__glow svg { width: 100%; height: 100%; display: block; }

.hero .hero__glow--one {
  width: clamp(220px, 45vw, 654px);
  aspect-ratio: 654 / 615;
  top: auto;
  bottom: -4%;
  right: -50%;
}
.hero .hero__glow--two {
  width: clamp(180px, 38vw, 377px);
  aspect-ratio: 377 / 361;
  top: auto;
  bottom: -10%;
  right: -34%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);
  padding: var(--space-13) var(--space-10) var(--space-14);
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hero.is-visible .hero__copy {
  opacity: 1;
  transform: translateY(0);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2.58px;
  text-transform: uppercase;
  color: var(--color-off-white);
}

.hero__heading {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(44px, 12vw, 94.52px);
  line-height: 0.93;
  letter-spacing: -0.03em;
}
.line--white { color: var(--color-off-white); }
.line--orange { color: var(--color-orange); }

.hero__sub {
  margin: 0;
  max-width: 400px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-off-white);
}

.hero__form {
  width: 100%;
  max-width: 342px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 1rem;
}

.cta-row { width: 100%; }
.cta-row--desktop { display: none; }
.cta-row--mobile { display: block; }

.hero__count {
  margin: 0;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-grey-soft);
}

.hero__art {
  width: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.hero.is-visible .hero__art { opacity: 1; }
.hero__art picture,
.hero__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 293;
  object-fit: contain;
  transition: transform 600ms var(--ease);
}
/* .hero__art:hover img { transform: scale(1.02); } */

.hero__copyright { display: none; }

.hero__divider {
  position: relative;
  z-index: 1;
  height: 1px;
  width: 100%;
  background: var(--color-hairline);
}

@media (min-width: 1024px) {
  .hero .hero__glow--one { top: -18%; bottom: auto; right: -8%; }
  .hero .hero__glow--two { top: -30%; bottom: auto; right: -2%; }

  .hero__inner {
    flex-direction: row;
    align-items: stretch;
    min-height: clamp(560px, 56vw, 819px);
  }
  .hero__copy {
    width: 44%;
    min-width: 420px;
    justify-content: center;
    padding: var(--space-13) 0 var(--space-13) var(--space-10);
  }
  .hero__sub { max-width: 361px; }
  .cta-row--desktop { display: block; }
  .cta-row--mobile { display: none; }
  .hero__art { width: 66%; }
  .hero__art picture,
  .hero__art img {
    height: 100%;
    aspect-ratio: auto;
    min-height: clamp(500px, 51vw, 836px);
    transform: scale(1.2);
  }
  .hero__copyright {
    display: block;
    position: absolute;
    right: var(--space-10);
    bottom: var(--space-10);
    z-index: 2;
    margin: 0;
    font-size: 10px;
    letter-spacing: 1.6px;
    color: var(--color-grey-soft);
    text-align: right;
  }
}

/* @media (min-width: 1280px) {
  .hero__copy {
    padding-left: max(var(--space-10), calc((100vw - var(--content-max)) / 2 + 40px));
  }
} */

/* ---------- Ticker ---------- */
.ticker {
  width: 100%;
  overflow: hidden;
  background: var(--color-orange);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--color-hairline);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: hero-scroll-left 32s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}
@keyframes hero-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: var(--space-11);
  padding-right: var(--space-11);
  flex-shrink: 0;
}
.ticker__item {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.5px;
  color: var(--color-white);
  white-space: nowrap;
}
.ticker__dot {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 9px;
  color: var(--color-white-70);
}
@media (min-width: 1024px) {
  .ticker { padding: var(--space-10) 0; }
  .ticker__group { gap: var(--space-13); padding-right: var(--space-13); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy,
  .hero__art {
    opacity: 1;
    transform: none;
  }
}

/* ---------- About (homepage only, front-page.php) ---------- */
.about {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.about__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-13) var(--space-10) var(--space-14);
}
.about__divider {
  height: 1px;
  width: 100%;
  background: var(--color-hairline-strong);
}

.about__eyebrow {
  margin: 0 0 var(--space-9);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #5A5A5A;
}

.about__lede {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 135%;
}

.about__mark {
  color: var(--color-orange);
  font-weight: 600;
}

/* Word reveal: every word starts dimmed; JS toggles .is-revealed on
   each <span class="word"> as the user scrolls, tracking scroll
   position rather than firing once. */
.word {
  color: #5E5E5E;
  transition: color 320ms ease;
}
.word.is-revealed { color: #E8E8E8; }
/* First two words ("FREE AGENT") target orange only on mobile —
   overridden back to the normal body color at the desktop breakpoint
   below, since the two screenshots show these words plain white on
   desktop but orange on mobile. */
.word--accent-mobile.is-revealed { color: var(--color-orange); }

.about__stat {
  margin: 0;
  text-align: left;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(40px, 14vw, 58px);
  line-height: 0.92;
  color: #5E5E5E;
}

.about__stat-wrap {
  position: relative;
  display: inline-block;
}
.about__stat-decoration {
  display: none;
}

.about__captions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.about__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  line-height: 120%;
  letter-spacing: 0.5px;
  color: #D0D0D0;
}

@media (min-width: 1024px) {
  :root { --about-label-col: 216px; }

  .about__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-13);
    padding: 112px var(--space-10) 96px;
  }

  /* .about__eyebrow and .about__lede are nested inside .about__intro,
     not direct children of .about__inner — grid-column would silently
     do nothing here, since CSS Grid item placement only applies to a
     grid container's direct children. Flexbox on .about__intro itself
     handles the nested case correctly. */
  .about__intro {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .about__eyebrow { margin: 0; flex: 0 0 var(--about-label-col); }

  .about__lede {
    flex: 1 1 auto;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: -0.3px;
    max-width: 989px;
  }
  .word.is-revealed { color: var(--color-white); }
  .word--accent-mobile.is-revealed { color: var(--color-white); }

  .about__stat {
    text-align: left;
    font-size: clamp(96px, 12.5vw, 180px);
    letter-spacing: -3px;
    line-height: normal;
  }
  .about__stat-wrap {
    /* Was stretching full-width by default (flex column children
       stretch across the cross axis unless told otherwise) — that's
       what made the decoration scale to the whole row instead of the
       number's own footprint, and why it looked stretched/flattened.
       flex-start + shrink-wrap sizes it to the text itself. */
    align-self: flex-start;
    margin-left: var(--about-label-col);
  }
  .about__stat-decoration {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 110%;
    aspect-ratio: 1001 / 146;
    pointer-events: none;
    z-index: 0;
  }
  .about__stat-decoration svg { width: 100%; height: 100%; display: block; }
  .about__stat { position: relative; z-index: 1; }

  /* Caption row gets the same left offset as the paragraph column
     above it, so the left caption lines up with the paragraph's start
     instead of the outer container edge (matching the eyebrow column
     being its own, separate, narrower indent). */
  .about__captions {
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-left: var(--about-label-col);
    padding-right: var(--about-label-col);
    margin-top: -2rem;
  }
  .about__caption { font-size: 12px; letter-spacing: 1.2px; line-height: normal; }
  .about__caption--right { text-align: right; }
}

/* ---------- How It Works (homepage only, front-page.php) ---------- */
.how-it-works {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.how-it-works__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-13) var(--space-10) var(--space-14);
}
.how-it-works__divider {
  height: 1px;
  width: 100%;
  background: var(--color-hairline-strong);
}

.how-it-works__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.how-it-works__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.how-it-works__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}

.how-it-works__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(30px, 9vw, 36px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--color-white);
}
/* The desktop-only forced line break — hidden on mobile so the
   heading just wraps naturally there instead. */
.how-it-works__break { display: none; }

.how-it-works__subtext {
  margin: 0;
  max-width: 342px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 145%;
  color: #C4C4C4;
}

.how-it-works__steps-divider {
  display: none;
}

.steps {
  display: flex;
  flex-direction: column;
}

.step {
  width: 100%;
  padding: 34px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background 200ms ease, padding 200ms ease;
}
.step__number {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-orange);
  transition: color 200ms ease;
}
.step__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
}
.step__description {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 145%;
  color: #9B9B9B;
  transition: color 200ms ease;
  margin-top: 2.625rem;
}

/* Only step 3 gets a bottom hairline on mobile — matches the spec's
   own asymmetric divider placement exactly (not a mistake to "fix"). */
.step:nth-child(3) {
  border-bottom: 1px solid var(--color-hairline);
}

.step:hover {
  background: var(--color-orange);
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}
.step:hover .step__number { color: rgba(255, 255, 255, 0.85); }
.step:hover .step__description { color: rgba(255, 255, 255, 0.92); }

@media (min-width: 1024px) {
  .how-it-works__inner {
    padding: 112px var(--space-10) 96px;
  }

  .how-it-works__intro {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
  }
  .how-it-works__heading {
    font-size: 56px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }
  .how-it-works__break { display: inline; }
  .how-it-works__subtext {
    max-width: 290px;
    text-align: right;
    font-size: 16px;
    line-height: 22px;
  }

  .how-it-works__steps-divider {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--color-hairline-strong);
    margin-top: 4rem;
  }

  .steps {
    flex-direction: row;
    align-items: stretch;
  }

  .step {
    flex: 1 1 0;
    min-width: 0;
    min-height: 250px;
    justify-content: center;
    padding: 0 var(--space-9);
    border-left: 1px solid var(--color-hairline-strong);
    border-bottom: none;
  }
  .step:first-child { border-left: none; }
  .step__title { font-size: 29px; line-height: 28px; letter-spacing: -0.4px; margin-top:12px; }
  /* Reset the mobile-only hover padding bump back to the standard
     column padding — desktop's orange fill just recolors the existing
     ~20px column gutter rather than adding extra breathing room. */
  .step:hover {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  /* The mobile-only asymmetric bottom hairline (step 3 only) must NOT
     carry over here — desktop uses vertical dividers between columns
     instead, and this rule was leaking through, creating a stray box
     outline around step 3 that shouldn't exist. */
  .step:nth-child(3) {
    border-bottom: none;
  }
}

/* =========================================================
   Who It's For — append this block to the bottom of style.css
   (after the How It Works section's CSS). Uses the same tokens
   (--color-*, --space-*, --content-max, etc.) already declared
   at the top of the file.
   ========================================================= */

.who-it-for {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.who-it-for__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-13) var(--space-10) var(--space-14);
}
.who-it-for__divider {
  height: 1px;
  width: 100%;
  background: var(--color-hairline-strong);
}

.who-it-for__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-13);
}
.who-it-for__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.who-it-for__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #A3A3A3;
}
.who-it-for__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(30px, 9vw, 36px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--color-white);
}
.who-it-for__break { display: none; }
.who-it-for__subtext {
  margin: 0;
  max-width: 343px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 145%;
  color: #C4C4C4;
}

/* ---------- Cards ---------- */
.who-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.who-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #151515;
  border: 1px solid var(--color-hairline-strong);
  overflow: hidden;
  border-radius: 14px;
}

.who-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 401 / 250;
  overflow: hidden;
}
.who-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.who-card__veil {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(21, 21, 21, 0) 22%, #151515 85%);
}
.who-card__number {
  position: absolute;
  top: var(--space-5);
  left: var(--space-7);
  z-index: 1;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #A3A3A3;
}
.who-card__tag {
  position: absolute;
  top: var(--space-5);
  right: var(--space-7);
  z-index: 1;
  padding: var(--space-1) var(--space-5);
  background: var(--color-orange);
  /* border-radius: var(--radius-sm); */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.who-card__body {
  position: relative;
  z-index: 1;
  /* Pulls the heading up to sit inside the image's dark fade instead
     of starting fresh below it — the veil is already fully opaque
     (#151515, same as the card's own background) by this point, so
     the overlap is seamless rather than needing pixel-exact matching
     to the image height. */
  margin-top: -20px;
  padding: 0 var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
}

.who-card__heading {
  margin: 0 0 var(--space-9);
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 8vw, 44px);
  line-height: 0.93;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 2rem;
}
.who-card__heading .line{
	font-size: clamp(32px, 8vw, 44px);
}

.who-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.who-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-hairline);
}
.who-card__item:first-child {
  border-top: 1px solid var(--color-hairline);
}
.who-card__arrow {
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 10px;
  color: var(--color-orange);
}
.who-card__item-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #BDBDBD;
}

@media (min-width: 1024px) {
  .who-it-for__inner {
    padding: 112px var(--space-10) 96px;
  }
  .who-it-for__intro {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    margin-bottom: var(--space-14);
  }
  .who-it-for__heading {
    font-size: 56px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }
  .who-it-for__break { display: inline; }
  .who-it-for__subtext {
    text-align: right;
    font-size: 16px;
    line-height: 22px;
  }

  .who-cards {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-9);
  }
  .who-card {
    flex: 1 1 0;
    min-width: 0;
	border-radius: 0px;
  }
}

/* =========================================================
   Who It's For — MOBILE OVERRIDES ONLY.
   Append this block AFTER your existing Who It's For CSS
   (including your desktop edits) — nothing above needs to
   change. Everything here is scoped to max-width: 1023.98px,
   so it cannot affect the desktop layout you already approved.

   The mobile spec has several genuine design differences from
   desktop, not just smaller versions of the same values — the
   tag badge is a translucent black pill here vs. solid orange
   on desktop, the card background is #0E0E0E vs #151515, the
   image veil uses a different gradient recipe, and the number
   badge is white/11px vs gray/10px. All of that is captured
   below, sourced directly from the mobile spec.
   ========================================================= */

@media (max-width: 1023.98px) {

  .who-it-for__inner {
    padding: 52px 24px;
  }
  .who-it-for__intro {
    gap: var(--space-7); /* 16px */
    margin-bottom: var(--space-7);
  }
  .who-it-for__title-group {
    gap: var(--space-7);
  }
  .who-cards {
    gap: 20px;
    padding-top: var(--space-7);
  }

  .who-card {
    background: #0E0E0E;
    border-color: rgba(255, 255, 255, 0.08);
    /* border-radius: 14px is already set at the base (unscoped)
       rule you added, and only reset to 0 inside the desktop
       media query — so it already applies correctly here. */
  }

  .who-card__media {
    aspect-ratio: auto;
    height: 210px;
  }
  .who-card__veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
  }
  .who-card__number {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--color-white);
  }
  .who-card__tag {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .who-card__body {
    padding: 0 22px 22px;
	margin-top: -5rem;
  }
  .who-card__heading,
  .who-card__heading .line {
    font-size: 42px;
    line-height: 88%;
    letter-spacing: 0;
  }

  .who-card__item {
    gap: 12px;
    padding: 15px 0;
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .who-card__arrow {
    font-size: 11px;
  }
  .who-card__item-text {
    font-size: 13px;
    line-height: 135%;
  }
}

/* =========================================================
   App Showcase — append this block to the bottom of style.css
   (after the Who It's For section's CSS, including your mobile
   overrides). Uses the same tokens already declared at the top
   of the file.
   ========================================================= */

.app-showcase {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(101.3deg, #F16001 0%, #C10801 100%);
}

/* Decorative giant text — desktop only. Sits behind everything
   else in the section (z-index left at auto/0, .inner is raised
   above it). Purely decorative, hence aria-hidden + no semantic
   weight; the real heading is .app-showcase__mobile-heading /
   .app-showcase__heading. */
.app-showcase__bg-text {
  display: none;
}

.app-showcase__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 44px var(--space-10) 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.app-showcase__mobile-heading {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 12vw, 52px);
  line-height: 0.9;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.app-showcase__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}
.app-showcase__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(255 255 255 / 55%);
}
.app-showcase__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 32px);
  line-height: 0.94;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}
.app-showcase__break { display: none; }
.app-showcase__subtext {
  margin: 0;
  max-width: 400px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 145%;
  color: rgba(255, 255, 255, 0.9);
}

.app-showcase__phone-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-5) 0;
}
.app-showcase__phone {
  position: relative;
  width: clamp(212px, 55vw, 290px);
  aspect-ratio: 212 / 430;
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  padding: 7px; /* + 1px border = 8px total inset, matching the spec's screen offset exactly */
  box-sizing: border-box;
}
.app-showcase__screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.app-showcase__meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
.app-showcase__meta-text {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-white);
}
.app-showcase__meta-sep {
  display: inline;
}
.app-showcase__meta-break {
  display: none;
}
.app-showcase__cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px var(--space-10) 12px;
  background: var(--color-white);
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-black);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.app-showcase__cta:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
  .app-showcase {
    background: linear-gradient(180deg, #FF6A25 0%, #FF3D1A 34%, #C4200C 62%, #1A0A05 100%);
  }

  .app-showcase__bg-text {
    display: block;
    position: absolute;
    top: 34px;
    left: 0;
    right: 0;
    z-index: 0;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(80px, 10.5vw, 150px);
    line-height: normal;
    letter-spacing: -4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
  }
  .app-showcase__mobile-heading { display: none; }

  .app-showcase__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 96px var(--space-10);
    gap: var(--space-10);
  }

  .app-showcase__content {
    width: auto;
    max-width: 369px;
    justify-self: start;
  }
  .app-showcase__heading {
    font-size: 56px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }
  .app-showcase__break { display: inline; }

  .app-showcase__phone-wrap {
    width: auto;
    padding: 0;
    justify-self: center;
  }
  .app-showcase__phone {
    width: clamp(240px, 20vw, 290px);
    aspect-ratio: 290 / 580;
    border-width: 9px;
    border-radius: 38px;
    padding: 0;
  }
  .app-showcase__screen {
    border-radius: 30px;
  }

  .app-showcase__meta {
    width: auto;
    max-width: 220px;
    justify-self: end;
    align-items: flex-end;
  }
  .app-showcase__meta-text {
    text-align: right;
  }
  .app-showcase__meta-sep {
    display: none;
  }
  .app-showcase__meta-break {
    display: inline;
  }
  .app-showcase__cta {
    width: auto;
  }
}

/* =========================================================
   Stories — append this block to the bottom of style.css.
   Uses the same tokens already declared at the top of the file.
   ========================================================= */

.stories {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.stories__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 52px var(--space-10) 52px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Top divider: mobile-only. Spec places this at the very top of the
   section (before the eyebrow), inset to content width — a different
   role from the bottom full-bleed divider below, which follows the
   same "boundary to the next section" pattern used by every other
   section on this page. */
.stories__top-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.stories__divider {
  display: none;
}

.stories__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.stories__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}
.stories__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--color-white);
}
.stories__break { display: none; }

/* ---------- Cards ---------- */
.story-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.story-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: 26px var(--space-10);
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.story-card__label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--color-orange);
}

.story-card__quote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}
.story-card__quote-highlight,
.story-card__quote-rest {
  color: #E2E2E2;
}

.story-card__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.story-card__who {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.story-card__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.11);
}
.story-card__who-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-white);
}
.story-card__role {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #9B9B9B;
}

@media (min-width: 1024px) {
  .stories__inner {
    padding: 112px var(--space-10) 96px;
    gap: var(--space-13);
  }

  .stories__top-divider {
    display: none;
  }
  .stories__divider {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.11);
  }

  .stories__heading {
    font-size: 56px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }
  .stories__break { display: inline; }

  .story-cards {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-9);
  }
  .story-card {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.11);
    padding: 30px;
    gap: var(--space-10);
  }
  .story-card__label {
    font-size: 11px;
    letter-spacing: 2px;
  }
  .story-card__quote {
    line-height: 26px;
  }
  /* This is the desktop-only two-tone treatment: the first sentence
     stays bright, the rest dims. Mobile has no equivalent dim color
     in its spec at all, so both spans share one color there instead
     (see the base rule above). */
  .story-card__quote-rest {
    color: #6A6A6A;
  }
  .story-card__divider {
    background: rgba(255, 255, 255, 0.07);
  }
  .story-card__role {
    letter-spacing: 1.6px;
  }
}

/* =========================================================
   Gallery — append this block to the bottom of style.css.
   Uses the same tokens already declared at the top of the file.
   ========================================================= */

.gallery {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.gallery__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 52px var(--space-10) 52px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.gallery__divider {
  height: 1px;
  width: 100%;
  background: var(--color-hairline-strong);
}

.gallery__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.gallery__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.gallery__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}
.gallery__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--color-white);
}
.gallery__break { display: none; }
.gallery__subtext {
  margin: 0;
  max-width: 400px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 145%;
  color: #C4C4C4;
}

/* ---------- Grid ---------- */
.gallery-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.g-pair {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}
.g-pair .g-tile {
  flex: 1 1 0;
  min-width: 0;
}

.g-tile {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 166 / 150;
}
.g-tile--tall {
  aspect-ratio: 342 / 220;
}
.g-tile--wide {
  aspect-ratio: 342 / 180;
}
.g-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.g-tile__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
  .gallery__inner {
    padding: 112px var(--space-10) 96px;
    gap: var(--space-13);
  }
  .gallery__intro {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
  }
  .gallery__heading {
    font-size: 56px;
    line-height: 52px;
    letter-spacing: -0.5px;
  }
  .gallery__break { display: inline; }
  .gallery__subtext {
    text-align: right;
    font-size: 16px;
    line-height: 22px;
  }

  /* Bespoke 2-column masonry. DOM order stays mobile's natural
     01→07 reading order; grid-column/grid-row below repositions
     each block to match the desktop design exactly, since the
     desktop grouping (which tiles pair together, which column they
     land in) is genuinely different from a simple linear split of
     that same order. */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  /* Generic tile sizing/appearance FIRST, so the more specific
     --tall/--wide aspect-ratio overrides below always win — same
     selector specificity, so cascade ORDER decides, and this must
     come first. */
  .g-tile {
    aspect-ratio: 293 / 180;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }
  .g-tile__caption {
    left: 12px;
    bottom: 13px;
    font-size: 10px;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: none;
  }

  .g-tile--tall {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 595 / 370;
  }
  .g-pair--a {
    grid-column: 2;
    grid-row: 1;
  }
  .g-tile--wide {
    aspect-ratio: 595 / 180;
  }
  .g-tile--wide-a {
    grid-column: 2;
    grid-row: 2;
  }
  .g-pair--b {
    grid-column: 1;
    grid-row: 3;
  }
  .g-tile--wide-b {
    grid-column: 2;
    grid-row: 3;
  }
}

/* =========================================================
   Featured Athlete — append this block to the bottom of style.css.
   Uses the same tokens already declared at the top of the file.
   ========================================================= */

.athlete {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.athlete__top-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.athlete__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 52px var(--space-10) 52px;
}

.athlete-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.athlete__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}
.athlete__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--color-white);
}
.athlete__break { display: none; }

/* ---------- Portrait ---------- */
.athlete__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 342 / 450;
  overflow: hidden;
  border-radius: 12px;
}
.athlete__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.athlete__number {
  position: absolute;
  top: 0;
  left: 16px;
  margin: 0;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}
.athlete__caption-grad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
}
.athlete__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.athlete__role-tag {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
}
.athlete__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 44px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--color-white);
}
.athlete__name-break { display: none; }
.athlete__meta {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #C9C9C9;
}

/* ---------- Stats ---------- */
.athlete__stats {
  display: flex;
  flex-direction: column;
}
.athlete__stats-divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
}
.athlete__stats-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* gap: 4rem; */
  padding: 16px 0;
}
.athlete__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.athlete__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--color-white);
}
.athlete__stat-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9B9B9B;
}

/* ---------- Bio ---------- */
.athlete__bio {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}
.athlete__bio--bright { color: #C4C4C4; }
.athlete__bio--dim { color: #6A6A6A; }

/* ---------- Blockquote ---------- */
.athlete__quote {
  margin: 0;
  padding: 6px 0 6px 20px;
  border-left: 2px solid var(--color-orange);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.athlete__quote-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 145%;
  color: #EAEAEA;
}
.athlete__quote-by {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9B9B9B;
}

@media (min-width: 1024px) {
  .athlete__top-divider {
    display: none;
  }
  .athlete__inner {
    padding: 112px var(--space-10) 96px;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.11); */
  }

  .athlete__stats-row{
    justify-content: flex-start;
    gap: 4rem;
  }

  /* Bespoke 2-column layout. DOM order stays mobile's natural
     reading order (eyebrow, heading, portrait, stats, bio, bio,
     quote) — grid-column/grid-row below moves the portrait into its
     own full-height left column while everything else lands in the
     right column, in the same relative order, regardless of where
     the portrait actually sits in the markup. */
  .athlete-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 0;
    align-items: center;
  }

  .athlete__portrait {
    grid-column: 1;
    grid-row: 1 / 7;
    aspect-ratio: 570 / 700;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.11);
  }
  .athlete__eyebrow {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    letter-spacing: 2.4px;
    color: var(--color-orange);
  }
  .athlete__heading {
    grid-column: 2;
    grid-row: 2;
    font-size: 64px;
    line-height: 60px;
    letter-spacing: -1px;
    margin-bottom: var(--space-9);
    margin-top: -3rem;
  }
  .athlete__break { display: inline; }

  .athlete__stats {
    grid-column: 2;
    grid-row: 3;
    margin-top: -2rem;
  }

  .athlete__bio {
    grid-column: 2;
    font-size: 17px;
    line-height: 27px;
  }
  .athlete__bio--bright { grid-row: 4; margin-top: -3rem; }
  .athlete__bio--dim { grid-row: 5; margin-top: -3rem; }

  .athlete__quote {
    grid-column: 2;
    grid-row: 6;
    margin-top: -3rem;
    padding: 22px 28px;
    border-left: none;
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.11);
    position: relative;
  }
  .athlete__quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-orange);
  }
  .athlete__quote-text {
    font-size: 18px;
    line-height: 28px;
  }
  .athlete__quote-by {
    letter-spacing: 2px;
    color: #5A5A5A;
  }

  /* Portrait internals at desktop scale/position. */
  .athlete__number {
    left: 14px;
    font-size: 150px;
  }
  .athlete__caption-grad { height: 200px; }
  .athlete__caption { padding: 0 14px 27px; gap: 4px; }
  .athlete__role-tag { font-size: 10px; letter-spacing: 2.4px; }
  .athlete__name {
    font-size: 50px;
    line-height: 46px;
  }
  .athlete__name-break { display: inline; }
  .athlete__meta { letter-spacing: 2px; }

  .athlete__stats-divider { background: rgba(255, 255, 255, 0.11); }
  .athlete__stat-value { font-size: 40px; }
  .athlete__stat-label { letter-spacing: 1.8px; color: #5A5A5A; }
}

/* =========================================================
   Press (Our Partners) — append this block to the bottom of
   style.css. Uses the same tokens already declared at the top
   of the file.
   ========================================================= */

.press {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.press__top-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.press__bottom-divider {
  display: none;
}
.press__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 44px var(--space-10) 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}
.press__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: #5A5A5A;
}

.press-logos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.press-logo {
  width: 100%;
  aspect-ratio: 166 / 70;
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.press-logo__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 17px 28px;
}
.press-logo__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(0);
  transition: opacity var(--transition-fast);
}
.press-logo:has(.press-logo__link):hover .press-logo__image {
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .press__top-divider {
    display: none;
  }
  .press__bottom-divider {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
  }
  .press__inner {
    padding: 44px var(--space-10) 44px;
    gap: 44px;
  }
  .press__eyebrow {
    font-size: 10px;
    letter-spacing: 2.4px;
  }

  /* Plain single-row logos separated by vertical divider lines —
     no card backgrounds at all on desktop (confirmed: the desktop
     token list has no card-background color, only divider/text
     colors), a genuinely different treatment from the mobile cards
     above, not a scaled-down version of them. */
  .press-logos {
    grid-template-columns: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }
  .press-logo {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
    height: 74px;
    background: none;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
  }
  .press-logo__link {
    padding: 6px 16px;
  }
}

/* =========================================================
   Site Footer — REPLACES the earlier basic .site-footer rules
   from setup. Find and delete the old .site-footer* block in
   style.css, then append everything below in its place. Uses the
   same tokens already declared at the top of the file.
   ========================================================= */

.site-footer {
  position: relative;
  width: 100%;
  background: var(--color-black);
}
.site-footer__cta-divider { display: none; }
.site-footer__grid-divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.09);
}
/* The mobile-only divider above the copyright row. Hidden at desktop
   in the media query below. It is declared display:none here as the
   base and re-enabled for mobile explicitly, rather than the reverse,
   so that a stale .site-footer rule left over elsewhere in style.css
   cannot accidentally win and reintroduce the line on desktop. */
.site-footer__bottom-divider {
  /* display: none; */
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.09);
}
@media (max-width: 1023.98px) {
  .site-footer__bottom-divider {
    display: block;
  }
}

/* ---------- CTA + signup ---------- */
.footer-cta__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 52px var(--space-10) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.footer-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: 100%;
}
.footer-cta__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
}
.footer-cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 12vw, 52px);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--color-white);
}
.footer-cta__break { display: none; }
.footer-cta__subtext {
  margin: 0;
  max-width: 400px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #9B9B9B;
  margin-top: 1.75rem;
}

.signup-card {
  width: 100%;
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 22px;
}
/* Contact Form 7 wraps everything in .wpcf7 > form.wpcf7-form. The
   [text]/[email] tags render as real <input> elements that keep
   whatever class: you gave them in the CF7 template (class:signup-field__input
   below), so those rules apply directly with no extra targeting needed.

   Radio groups are different: CF7's class: option applies to the
   *outer* wrapping span, not each option, and each option renders as
   .wpcf7-list-item > label > (input + span.wpcf7-list-item-label) —
   the label WRAPS the input rather than sitting beside it. So instead
   of styling the <label> for the checked state (no parent selector in
   CSS), the visual "pill" is the .wpcf7-list-item-label SPAN itself,
   styled via the input:checked + span sibling selector, since that
   span is the input's next sibling inside the same label. */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* CF7 injects its own elements as children of the form: a response
   output div and a spinner span. Even when they have no visible
   content they still occupy a flex slot and collect the row gap on
   BOTH sides, which is what produces the oversized gaps above the
   email field and below the submit button. Taking them out of flex
   flow (position: absolute) removes those phantom slots; the response
   output is put back into flow only when CF7 actually populates it
   with a message. */
.wpcf7-form > .wpcf7-response-output,
.wpcf7-form .wpcf7-spinner {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* When CF7 adds a real status class, restore the message to normal
   flow so the user can actually read it. */
.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7-form.sent > .wpcf7-response-output,
.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7-form.aborted > .wpcf7-response-output,
.wpcf7-form.payment-required > .wpcf7-response-output {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-off-white);
}

.signup-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Full Name + Location are a paired row on desktop (spec: two equal
   212.5px-wide fields side by side), but stack full-width on mobile —
   this was missed in the first build entirely, not a redesign. */
.signup-field-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.signup-field-row .signup-field {
  width: 100%;
}
.signup-field__label {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}
/* CF7 wraps each control in a .wpcf7-form-control-wrap — strip its
   default block spacing so it doesn't add an extra gap on top of the
   .signup-field column gap above. */
.signup-field .wpcf7-form-control-wrap {
  display: block;
}
.signup-field__input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-off-white);
  transition: border-color var(--transition-fast);
}
.signup-field__input::placeholder { color: #6A6A6A; }
.signup-field__input:focus-visible {
  outline: none;
  border-color: var(--color-orange);
}
/* CF7 appends its own validation-error classes/borders — keep them
   visible rather than letting the base border rule silently win. */
.signup-field__input.wpcf7-not-valid {
  border-color: #C10801;
}
.wpcf7-not-valid-tip {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #FF3D1A;
}

.signup-segment__group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
/* main.js flattens the actual .wpcf7-list-item options to be direct
   children of this container on page load (see the
   flattenSegmentedControls function) — regardless of how many wrapper
   levels CF7 nests them under on your specific version/config, the
   DOM is rewritten flat before this CSS ever has to deal with it, so
   plain flexbox on direct children just works, no guessing about
   nesting depth required. */
.signup-segment__group .wpcf7-list-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.signup-segment__group label {
  display: flex;
  width: 100%;
  cursor: pointer;
}
.signup-segment__group input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.signup-segment__group .wpcf7-list-item-label {
  flex: 1 1 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #9B9B9B;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
/* Selected/focus states are driven by classes that main.js sets on the
   option element, NOT by an `input:checked + label` sibling selector.
   The sibling approach requires the input to be an immediate previous
   sibling of the label text, which does not hold reliably across CF7
   versions — that assumption is what broke this twice before. The
   :checked selectors are kept below purely as a progressive-enhancement
   fallback for the no-JS case. */
.signup-segment__group .wpcf7-list-item.is-selected .wpcf7-list-item-label,
.signup-segment__group .wpcf7-list-item.is-selected > label,
.signup-segment__group label.is-selected .wpcf7-list-item-label,
.signup-segment__group input[type="radio"]:checked + .wpcf7-list-item-label {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-black);
}
.signup-segment__group .wpcf7-list-item.has-focus .wpcf7-list-item-label,
.signup-segment__group label.has-focus .wpcf7-list-item-label,
.signup-segment__group input[type="radio"]:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.signup-form__submit {
  width: 100%;
  min-height: 52px;
  border: none;
  background: var(--color-orange);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-black);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.signup-form__submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.signup-form__fineprint {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5A5A5A;
}

/* ---------- Nav columns ---------- */
.footer-columns__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-9) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
}
.footer-brand__logo { display: flex; align-items: center; }
.footer-brand__logo-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
}
.footer-brand__logo-free { color: var(--color-off-white); }
.footer-brand__logo-agent { color: var(--color-orange); }
.footer-brand__logo-mark { display: none; width: 140px; height: 43px; }
.footer-brand__logo-mark svg { width: 100%; height: 100%; display: block; }

.footer-brand__desc {
  margin: 0;
  max-width: 400px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #9B9B9B;
}
.footer-brand__cta {
  display: none;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav-group {
  display: flex;
  /* flex-direction: column; */
  gap: 3rem;
  width: 100%;
}
.footer-nav__label {
  margin: 0;
  font-family: var(--font-mono, var(--font-body));
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5A5A5A;
}
.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav__list a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #C4C4C4;
  transition: color var(--transition-fast);
}
.footer-nav__list a:hover { color: var(--color-white); }

/* ---------- Bottom bar ---------- */
.footer-bottom__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-10);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--space-5);
  column-gap: var(--space-7);
}
.footer-bottom__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #5A5A5A;
  white-space: nowrap;
}
.footer-socials {
  display: flex;
  gap: 8px;
}
.footer-social {
  width: 38px;
  height: 38px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  /* Square, not round: the desktop spec defines these as plain 38×38
     rectangles with a border and no corner radius. */
  border-radius: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.footer-social:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
.footer-social svg { width: 16px; height: 16px; display: block; }

@media (min-width: 1024px) {
  .site-footer__cta-divider {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
  }
  .site-footer__grid-divider { background: rgba(255, 255, 255, 0.07); }

  .footer-cta__inner {
    padding: 112px var(--space-10) 96px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
  .footer-cta__text {
    max-width: 400px;
    flex: 0 0 auto;
  }
  .footer-cta__heading {
    font-size: 90px;
    line-height: 82px;
    letter-spacing: -2px;
  }
  .footer-cta__break { display: inline; }
  .footer-cta__subtext {
    font-size: 17px;
    line-height: 27px;
  }

  .signup-card {
    width: 600px;
    max-width: 45vw;
    flex-shrink: 0;
    padding: 32px;
    border-radius: 0;
  }

  .signup-segment__group .wpcf7-list-item-label { font-size: 15px; letter-spacing: 0; }

  .signup-field-row {
    flex-direction: row;
    gap: 12px;
  }
  .signup-field-row .signup-field {
    flex: 1 1 0;
    min-width: 0;
  }
  .wpcf7-form .signup-field p{
    margin: 0;
  }

  .signup-form__submit {
    background: linear-gradient(119.9deg, #FF7A2E 0%, #FF2418 100%);
    color: #F9F9F9;
    border-radius: 2px;
  }
  .signup-field__input,
  .signup-segment__group .wpcf7-list-item-label {
    border-radius: 2px;
  }

  .footer-columns__inner {
    padding: 44px var(--space-10);
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
  .footer-brand {
    max-width: 400px;
    flex: 0 0 auto;
  }
  .footer-brand__logo-text { display: none; }
  .footer-brand__logo-mark { display: block; }
  .footer-brand__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 13px var(--space-10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-off-white);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    margin-top: 1.875rem;
  }
  .footer-brand__cta:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .footer-nav-group {
    display: flex;
    flex-direction: row;
    width: auto;
    flex: 0 0 auto;
    gap: clamp(60px, 11.3vw, 163px);
    /* Pushed toward the right per the spec (Company starts at 852.8px
       of 1440px), but with margin-left:auto rather than a hardcoded
       733px offset — a fixed pixel margin would overflow the content
       box on narrower desktops (e.g. 1024px), whereas auto simply
       consumes whatever free space actually exists at any width. */
    margin-left: auto;
  }
  .footer-nav__label { letter-spacing: 2px; }
  .footer-nav__list a {
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .footer-bottom__inner {
    padding: var(--space-9) var(--space-10);
  }
  .footer-bottom__copyright { letter-spacing: 2px; }
}

.ticker__item {
  text-transform: uppercase;
}