:root {
  --ink: #0b1613;
  --ink-deep: #050807;
  --forest: #1e4937;
  --forest-bright: #25624c;
  --orange: #ed6703;
  --orange-bright: #ff7512;
  --warm: #f3f2ed;
  --paper: #faf9f5;
  --graphite: #242927;
  --muted: #666b68;
  --mist: #dde2dc;
  --line: rgba(11, 22, 19, 0.14);
  --line-light: rgba(255, 255, 255, 0.18);
  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  /* Type scale. --text-label is a hard floor: no text anywhere on the site is
     set smaller — not in the catalogue, the styleguide, or print. It is the
     minimum of the hero lede, the reference for the smallest copy in the
     design. tests/type-floor.test.js enforces this.

     Two steps only. This replaced 21 hand-picked values between 0.60rem and
     0.90rem that were all doing one of three jobs; a third step would have sat
     0.6px from --text-base and added noise, not hierarchy. Below the headings,
     rank is carried by weight, colour and space — not by size. That is also
     why fine print (legal notes, footnotes) sits at --text-base and is muted
     in colour rather than shrunk.
       --text-label  uppercase micro-labels, counts, captions, table headers,
                     small buttons
       --text-base   everything else: body copy, controls, links, table data

     Tracking is in em, so it grows with the type. These labels used to be set
     at 0.62-0.72rem with 0.09-0.16em of track; carried straight over they read
     as gappy, so each step takes less track than the sizes it replaced.
     --track-label-wide is for the italic display-font accents (eyebrows,
     section labels, scroll cues), which are set wider by design. */
  --text-label: 0.92rem;
  --text-base: 1rem;
  --track-label: 0.08em;
  --track-label-wide: 0.1em;
  --track-base: 0.05em;
  --container: 1240px;
  --header-height: 78px;
  --section-angle: 42px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 24px 70px rgba(11, 22, 19, 0.12);
  --shadow-dark: 0 28px 80px rgba(0, 0, 0, 0.32);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  background: var(--warm);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

/* The browser sets these to `smaller` (~0.8em), which is the one way text can
   land under the floor without any font-size in this file to catch it. Pin
   them to --text-label so the floor holds by default, not by vigilance. */
small,
sub,
sup {
  font-size: var(--text-label);
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button {
  border: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--orange);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--orange-bright);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(88px, 9vw, 144px);
}

/* Alternating section transitions. Later sections overlap the previous one,
   so the clipped area reveals the real background beneath without seams. */
.home-page main > section:not(.hero) {
  position: relative;
  margin-top: calc(-1 * var(--section-angle));
}

.welcome,
.goals-section,
.social-section {
  clip-path: polygon(
    0 var(--section-angle),
    100% 0,
    100% 100%,
    0 100%
  );
}

.products-section,
.story,
.quote-section {
  clip-path: polygon(
    0 0,
    100% var(--section-angle),
    100% 100%,
    0 100%
  );
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--orange);
  font-size: var(--text-label);
  font-style: italic;
  font-weight: 800;
  letter-spacing: var(--track-label-wide);
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 5px;
  transform: skewX(-28deg);
  background: currentColor;
}

.eyebrow--light {
  color: var(--orange-bright);
}

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

h1,
h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
}

h2 {
  margin-bottom: 26px;
  font-size: clamp(3.5rem, 7vw, 6.8rem);
}

h3 {
  line-height: 1.15;
}

.section-copy {
  max-width: 520px;
  color: var(--muted);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms var(--ease),
    box-shadow 220ms ease;
}

.button span {
  font-size: 1.1em;
  transition: transform 220ms var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button:hover span {
  transform: translate(2px, -2px);
}

.button--small {
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 8px;
  font-size: var(--text-label);
}

.button--primary {
  background: var(--orange);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 14px 35px rgba(237, 103, 3, 0.24);
}

.button--primary > span[aria-hidden="true"] {
  display: none;
}

.button--primary:hover {
  background: var(--orange-bright);
  box-shadow: 0 18px 40px rgba(237, 103, 3, 0.34);
}

.button--dark {
  background: var(--ink);
  color: white;
}

.button--dark:hover {
  background: var(--forest);
}

.button--outline,
.button--outline-light {
  border-color: var(--line);
  background: transparent;
}

.button--outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.button--outline-light {
  border-color: rgba(255, 255, 255, 0.52);
  color: white;
}

.button--outline-light:hover {
  border-color: white;
  background: white;
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 5px;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--graphite);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
  transition: color 180ms ease, gap 220ms var(--ease);
}

.text-link:hover {
  gap: 17px;
  color: var(--orange);
}

.badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 12px;
  /* Badge text is always white. That needs a solid fill behind it — the old
     12% orange tint was carrying orange text on light surfaces, and white on
     that tint is invisible. */
  border: 1px solid var(--orange);
  border-radius: 999px;
  background: var(--orange);
  color: white;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}

.badge--dark {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 720ms var(--ease) var(--delay, 0ms),
    transform 720ms var(--ease) var(--delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll-led section motion */

[data-motion-section] {
  --section-progress: 0;
  --section-shift: 0px;
  --section-parallax-y: 0px;
  isolation: isolate;
}

[data-motion-section] > .container,
[data-motion-section] > .story__image,
[data-motion-section] > .story__content {
  position: relative;
  z-index: 2;
}

.section-motion {
  --motion-ink: rgba(11, 22, 19, 0.14);
  --motion-line: rgba(11, 22, 19, 0.17);
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.products-section .section-motion,
.story .section-motion,
.quote-section .section-motion {
  --motion-ink: rgba(255, 255, 255, 0.09);
  --motion-line: rgba(255, 255, 255, 0.16);
}

.section-motion__track {
  position: absolute;
  top: calc(var(--section-angle) + 22px);
  right: -8vw;
  left: -8vw;
  height: 1px;
  transform: rotate(-1.5deg) scaleX(0.08);
  transform-origin: left;
  background: linear-gradient(90deg, transparent 3%, var(--motion-line) 18% 72%, transparent 96%);
  opacity: 0;
  transition: transform 1100ms var(--ease) 120ms, opacity 500ms ease;
}

.motion-section--reverse .section-motion__track {
  transform: rotate(1.5deg) scaleX(0.08);
  transform-origin: right;
}

.is-section-visible .section-motion__track {
  transform: rotate(-1.5deg) scaleX(1);
  opacity: 1;
}

.motion-section--reverse.is-section-visible .section-motion__track {
  transform: rotate(1.5deg) scaleX(1);
}

.section-motion__track::after {
  position: absolute;
  top: -2px;
  left: 15%;
  width: clamp(54px, 8vw, 120px);
  height: 5px;
  transform: skewX(-28deg);
  background: var(--orange);
  box-shadow: 0 0 28px rgba(237, 103, 3, 0.34);
  content: "";
}

.motion-section--reverse .section-motion__track::after {
  right: 15%;
  left: auto;
}

.welcome .section-motion__track::after {
  display: none;
}

.section-motion__index {
  position: absolute;
  top: clamp(70px, 8vw, 126px);
  right: -0.04em;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(10rem, 23vw, 23rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.72;
  opacity: 0;
  transform: translate3d(var(--section-shift), 34px, 0);
  -webkit-text-stroke: 1px var(--motion-ink);
  transition: opacity 900ms ease 180ms;
  will-change: transform;
}

.motion-section--reverse .section-motion__index {
  right: auto;
  left: -0.06em;
}

.is-section-visible .section-motion__index {
  opacity: 1;
}

.section-motion__label {
  position: absolute;
  top: calc(var(--section-angle) + 35px);
  right: max(24px, calc((100vw - var(--container)) / 2));
  color: var(--motion-line);
  font-size: var(--text-label);
  font-style: italic;
  font-weight: 800;
  letter-spacing: var(--track-label-wide);
  opacity: 0;
  text-transform: uppercase;
  transform: translateX(18px);
  transition: opacity 500ms ease 440ms, transform 700ms var(--ease) 440ms;
}

.motion-section--reverse .section-motion__label {
  right: auto;
  left: max(24px, calc((100vw - var(--container)) / 2));
  transform: translateX(-18px);
}

.is-section-visible .section-motion__label {
  opacity: 1;
  transform: translateX(0);
}

.section-motion__flare {
  position: absolute;
  top: 18%;
  right: -12rem;
  width: clamp(260px, 36vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 103, 3, 0.12), transparent 68%);
  opacity: 0;
  transform: translate3d(var(--section-shift), 0, 0);
  transition: opacity 1000ms ease 280ms;
  will-change: transform;
}

.motion-section--reverse .section-motion__flare {
  right: auto;
  left: -12rem;
  background: radial-gradient(circle, rgba(30, 73, 55, 0.16), transparent 68%);
}

.is-section-visible .section-motion__flare {
  opacity: 1;
  animation: section-flare-breathe 7s ease-in-out 1s infinite alternate;
}

@keyframes section-flare-breathe {
  from { scale: 0.92; filter: blur(0); }
  to { scale: 1.08; filter: blur(5px); }
}

.section-heading.reveal > *,
.welcome__inner.reveal > *,
.story__content.reveal > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(7px);
  transition: opacity 650ms var(--ease), transform 800ms var(--ease), filter 800ms ease;
}

.section-heading.reveal.is-visible > *,
.welcome__inner.reveal.is-visible > *,
.story__content.reveal.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.section-heading.reveal > :nth-child(2),
.welcome__inner.reveal > :nth-child(2),
.story__content.reveal > :nth-child(2) { transition-delay: 90ms; }

.section-heading.reveal > :nth-child(3),
.welcome__inner.reveal > :nth-child(3),
.story__content.reveal > :nth-child(3) { transition-delay: 180ms; }

.section-heading.reveal > :nth-child(4),
.welcome__inner.reveal > :nth-child(4),
.story__content.reveal > :nth-child(4) { transition-delay: 270ms; }

/* Navigation */

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 0;
  width: 100%;
  pointer-events: none;
  transition: top 250ms ease;
}

.site-header.is-scrolled {
  top: 10px;
}

.nav-shell {
  display: flex;
  width: min(calc(100% - 48px), var(--container));
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  padding: 9px 13px 9px 24px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 21px;
  background: rgba(248, 247, 242, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.19);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transition:
    min-height 240ms ease,
    border-radius 240ms ease,
    box-shadow 240ms ease;
}

.is-scrolled .nav-shell {
  min-height: 68px;
  border-radius: 18px;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.brand img {
  width: 220px;
  height: auto;
}

.nav-panel,
.nav-links {
  display: flex;
  align-items: center;
}

.nav-panel {
  gap: 34px;
}

.nav-links {
  gap: clamp(20px, 2.4vw, 37px);
}

.nav-links a {
  position: relative;
  padding-block: 12px;
  color: #111714;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nav-links a::after {
  position: absolute;
  right: 50%;
  bottom: 5px;
  left: 50%;
  height: 2px;
  background: var(--orange);
  content: "";
  transition: right 220ms var(--ease), left 220ms var(--ease);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  right: 0;
  left: 0;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 12px;
  border-radius: 10px;
  background: var(--ink);
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin-block: 5px;
  background: white;
  transition: transform 220ms ease, opacity 220ms ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  min-height: min(920px, 100svh);
  align-items: center;
  overflow: hidden;
  background: #06100d;
  color: white;
}

.hero__media,
.hero__grain {
  position: absolute;
  inset: 0;
}

.hero__media {
  background-image:
    linear-gradient(90deg, rgba(1, 8, 6, 0.97) 0%, rgba(1, 10, 7, 0.84) 29%, rgba(3, 12, 9, 0.18) 63%, rgba(4, 7, 5, 0.09) 100%),
    linear-gradient(0deg, rgba(2, 7, 5, 0.68) 0%, transparent 42%),
    url("../assets/images/hero-bg.png");
  background-position: center, center, center;
  background-size: cover;
  transform: scale(1.01);
}

.hero__media::before {
  position: absolute;
  inset: auto 0 0;
  height: 11px;
  background: linear-gradient(90deg, var(--forest) 0 33%, #111 33% 72%, var(--orange) 72% 100%);
  content: "";
}

.hero__grain {
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: 148px;
  padding-bottom: 72px;
  transform: translateY(clamp(120px, 15vh, 150px));
}

.hero__copy {
  max-width: 650px;
}

.hero h1 {
  max-width: 650px;
  margin-bottom: 28px;
  font-size: clamp(5.4rem, 7.8vw, 8.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.9;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.hero__lede {
  max-width: 500px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(0.92rem, 1.3vw, 1.04rem);
  line-height: 1.55;
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(transparent, var(--orange));
}

/* Welcome */

.welcome {
  overflow: hidden;
  background: var(--warm);
}

.welcome__slash {
  display: none;
  position: absolute;
  top: -15%;
  left: -90px;
  width: 250px;
  height: 130%;
  transform: skewX(-28deg);
  border-right: 24px solid rgba(11, 22, 19, 0.035);
  background: rgba(11, 22, 19, 0.02);
}

.welcome__inner {
  position: relative;
  max-width: 980px;
  text-align: center;
}

.welcome .eyebrow {
  justify-content: center;
}

.welcome h2 {
  margin-bottom: 26px;
  font-size: clamp(4.2rem, 7vw, 6.5rem);
}

.welcome h2::after {
  display: block;
  width: 42px;
  height: 4px;
  margin: 20px auto 0;
  transform: skewX(-28deg) scaleX(0);
  transform-origin: center;
  background: var(--orange);
  content: "";
  transition: transform 700ms var(--ease) 260ms;
}

.welcome__inner.is-visible h2::after {
  transform: skewX(-28deg) scaleX(1);
}

/* The block stays centred on the page, the reading edge does not. Centring
   suited the single two-line statement this replaced; four paragraphs of it
   leaves every line ragged on both sides and strands the short ones in the
   middle. 760px rather than the inner's 980px for the same reason — it is a
   measure now, not a caption, and 980px runs to roughly 95 characters. */
.welcome__copy {
  max-width: 760px;
  margin: 0 auto;
  color: var(--graphite);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.75;
  text-align: left;
}

.welcome__copy p {
  margin: 0 0 22px;
}

.welcome__copy p:last-child {
  margin-bottom: 0;
}

/* Emphasis carries weight and no colour of its own. On the homepage the whole
   block animates from near-white over the film to graphite on the warm
   surface (--welcome-copy-color), and a fixed colour here would strand the
   bold phrases unreadable over the video for the first half of that. */
.welcome__copy strong {
  font-weight: 700;
}

/* Centred again, under the left-aligned block: it closes the statement rather
   than continuing it, and it lines up with the heading above. */
.welcome__signoff {
  margin-top: 34px;
  text-align: center;
}

.benefit-card {
  min-height: 310px;
  padding: 35px 26px 26px;
  border: 1px solid rgba(11, 22, 19, 0.07);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 14px 40px rgba(11, 22, 19, 0.07);
  text-align: center;
  transition: transform 260ms var(--ease), box-shadow 260ms ease, background-color 260ms ease;
}

.benefit-card:hover {
  transform: translateY(-7px);
  background: white;
  box-shadow: var(--shadow-soft);
}

.benefit-card__icon {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(237, 103, 3, 0.08);
}

.benefit-card__icon svg {
  width: 38px;
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.benefit-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
}

.benefit-card p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.mini-rule {
  display: block;
  width: 28px;
  height: 3px;
  margin: auto auto 0;
  transform: skewX(-24deg);
  background: var(--orange);
}

/* Section headings */

.section-heading {
  margin-bottom: clamp(42px, 6vw, 72px);
}

.section-heading h2 {
  margin-bottom: 14px;
}

.section-heading > p:not(.eyebrow),
.section-heading__aside p {
  max-width: 520px;
  color: var(--muted);
}

.section-heading--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.section-heading__aside {
  display: flex;
  max-width: 480px;
  align-items: flex-end;
  flex-direction: column;
  gap: 16px;
  text-align: right;
}

.section-heading__aside p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-base);
}

.section-heading--center {
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

/* Products */

.products-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 10%, rgba(37, 98, 76, 0.32), transparent 28%),
    linear-gradient(135deg, #08100e, #111815 62%, #07100d);
  color: white;
}

.products-section::before {
  position: absolute;
  top: 0;
  right: -10%;
  width: 44%;
  height: 100%;
  transform: translate3d(var(--section-shift), 0, 0) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.025));
  content: "";
}

.product-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
  transition: transform 300ms var(--ease), border-color 300ms ease, box-shadow 300ms ease;
}

.product-card:hover {
  transform: translateY(-9px);
  border-color: color-mix(in srgb, var(--card-accent) 60%, white 10%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

.product-card__visual {
  position: relative;
  display: grid;
  height: 300px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 46%),
    radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--card-accent) 36%, transparent), transparent 48%);
}

.product-card__visual::after {
  position: absolute;
  right: 20px;
  bottom: 12px;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  content: "";
  opacity: 0.8;
}

.product-card__glow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 190px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--card-accent);
  filter: blur(38px);
  opacity: 0.32;
}

.product-card__visual img {
  position: relative;
  z-index: 2;
  width: 124%;
  max-width: none;
  height: 124%;
  object-fit: contain;
  transition: transform 420ms var(--ease);
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.28));
}

.product-card:hover .product-card__visual img {
  transform: scale(1.055) rotate(-1.2deg);
}

.product-card .badge {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  border-color: transparent;
  background: var(--badge-bg);
  color: white;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--badge-bg) 30%, transparent);
}

.product-card__body {
  padding: 24px;
}

.product-card__meta,
.product-card__variant {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.47);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.product-card__body h3 {
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
}

.product-card__variant {
  color: color-mix(in srgb, var(--card-accent) 70%, white);
}

.product-card__price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-card__price span {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.product-card__price strong {
  color: white;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 0.9;
}

.empty-state,
.noscript-note {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.65);
}

/* Banner carousel — a scroll-snap rail, so touch swipe, momentum and the
   no-JS fallback all come from the browser. Nothing here animates transform
   on a slide, which is what keeps it clear of the .motion-card system. */

.banner-carousel {
  position: relative;
}

.banner-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.banner-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* Snapping and smooth scrolling both fight a rail being dragged by hand:
   they have to be off for the length of the gesture, whatever the device. */
.banner-carousel__track.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

/* Touch already has the gesture; a mouse gets it from setupBannerCarousel,
   and this is the affordance that says so. */
@media (hover: hover) and (pointer: fine) {
  .banner-carousel__track {
    cursor: grab;
  }

  .banner-carousel__track.is-dragging {
    cursor: grabbing;
  }
}

.banner-carousel__track::-webkit-scrollbar {
  display: none;
}

.banner-slide {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(520px, 44vw, 600px);
  flex: 0 0 100%;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  gap: 26px 40px;
  grid-template-areas:
    "headline headline"
    "photo aside";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  /* Flat black, no alpha: the photography is shot on black, so the athlete
     reads as standing on the banner rather than inside a lighter panel. */
  background: #000;
  scroll-snap-align: start;
}

.banner-slide__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  font-style: italic;
  font-weight: 600;
  grid-area: headline;
  line-height: 0.96;
  text-transform: uppercase;
}

.banner-slide__photo {
  position: relative;
  overflow: hidden;
  grid-area: photo;
}

/* Not every frame is shot on true black — b1 has a lit blue backdrop, b5 a
   near-black one — so a cropped photo would sit on the card as a visible
   rectangle. Same edge-fade device as .story__image, here resolving into
   the slide's own black. */
.banner-slide__photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, #000, transparent 12%, transparent 88%, #000),
    linear-gradient(0deg, #000, transparent 10%, transparent 90%, #000);
  content: "";
  pointer-events: none;
}

/* Taken out of flow so the frame's 3:4 intrinsic height cannot stretch the
   grid row — the banner is sized by its copy, and the photograph fills
   whatever that leaves. The photography is shot on black, so a contained
   image sits inside the card without a visible edge; slides whose subject
   spans the full frame opt into contain, the standing figures crop with a
   tuned focal point. */
.banner-slide__photo img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: var(--photo-fit, cover);
  object-position: var(--photo-position, 50% 30%);
  transform: scale(var(--photo-scale, 1));
}

.banner-slide__athlete {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  margin: 0;
  padding: 54px 22px 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.62) 44%, transparent);
}

.banner-slide__athlete strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.1vw, 2.5rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.banner-slide__athlete span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* The copy is far narrower than half a banner, so left-aligning it against
   the full column left a void on the right. Instead it gets a column of its
   own width, centred in the half it was given: the render, the name, the
   list all share one left edge, with even air either side. */
.banner-slide__aside {
  display: flex;
  width: min(100%, 400px);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin-inline: auto;
  grid-area: aside;
}

.banner-slide__product {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(210px, 20vw, 290px);
  place-items: center;
}

.banner-slide__glow {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 190px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--card-accent);
  filter: blur(38px);
  opacity: 0.32;
}

/* Absolute for the same reason as the photograph: a percentage height on a
   grid item in an auto row is indefinite, and the render falls back to its
   600 px intrinsic size and spills over the copy beneath it. */
.banner-slide__product img {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  transform: scale(var(--product-scale, 1.368));
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.28));
}

.banner-slide__meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.47);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.banner-slide__product-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}

/* The tick is CSS content, so a screen reader reads the ingredient list
   as five list items rather than five check marks. */
.banner-slide__facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 8px 20px;
  list-style: none;
}

.banner-slide__facts li {
  position: relative;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--text-base);
  font-weight: 500;
}

.banner-slide__facts li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--card-accent);
  content: "✓";
  font-weight: 700;
}

.banner-slide__link {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  cursor: pointer;
}

.banner-slide__link:focus-visible {
  outline: 3px solid var(--orange-bright);
  outline-offset: -7px;
}

.banner-carousel__track.is-dragging .banner-slide__link {
  cursor: grabbing;
}

.banner-slide.banner-slide--brand {
  min-height: clamp(560px, 44vw, 620px);
  overflow: hidden;
  grid-template-areas:
    "headline"
    "aside";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  isolation: isolate;
}

/* The opening slide is a photographic campaign banner, not the two-column
   athlete/product template used by the other slides. The portrait fills the
   entire card while the headline and sole CTA sit above it. */
.banner-slide--brand .banner-slide__photo {
  position: absolute;
  z-index: 0;
  height: auto;
  inset: 0;
  grid-area: auto;
}

.banner-slide--brand .banner-slide__photo::after {
  /* No top wash on the campaign artwork; only the right-side copy needs a
     local scrim. The shared photo rule keeps the image full-bleed. */
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.34) 34%, transparent 62%);
}

.banner-slide--brand .banner-slide__headline,
.banner-slide--brand .banner-slide__aside {
  position: relative;
  z-index: 2;
}

.banner-slide--brand .banner-slide__headline {
  max-width: 24ch;
  justify-self: end;
  text-align: right;
}

.banner-slide--brand .banner-slide__aside {
  width: auto;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
}

.banner-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 12px;
}

.banner-dot {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
}

.banner-dot::before {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  content: "";
  transition: width 260ms var(--ease), background 260ms ease;
}

.banner-dot[aria-current="true"]::before {
  width: 28px;
  background: var(--orange);
}

/* Goals */

.goals-section {
  overflow: hidden;
  background: var(--paper);
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.goal-card {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  border: 1px solid rgba(11, 22, 19, 0.08);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), transparent 52%),
    color-mix(in srgb, var(--goal-accent) 9%, var(--warm));
  transition: transform 300ms var(--ease), box-shadow 300ms ease;
}

.goal-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  transform: scaleX(0.26);
  transform-origin: left;
  background: var(--goal-accent);
  content: "";
  transition: transform 320ms var(--ease);
}

.goal-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}

.goal-card:hover::after {
  transform: scaleX(1);
}

/* Stretched link: the whole goal card opens its category on the listing page.
   Kept as a separate <a> rather than wrapping the heading so the card markup
   the style contract pins stays byte-identical. */
.goal-card__link {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
}

.goal-card__link:focus-visible {
  outline: 3px solid var(--orange-bright);
  outline-offset: -5px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.goal-card__number {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 18px;
  color: color-mix(in srgb, var(--goal-accent) 80%, var(--graphite));
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-style: italic;
  font-weight: 800;
}

.goal-card img {
  position: absolute;
  top: 146px;
  left: 50%;
  width: 142%;
  max-width: none;
  height: calc(100% - 138px);
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(11, 22, 19, 0.16));
  transition: transform 360ms var(--ease);
}

.goal-card:hover img {
  transform: translateX(-50%) scale(1.06) rotate(-1deg);
}

.goal-card__content {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 46px;
  left: 22px;
}

.goal-card__content span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.35;
  text-transform: uppercase;
}

.goal-card__content h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 2.6vw, 2.55rem);
  font-style: italic;
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* Story */

.story {
  display: grid;
  min-height: 720px;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--ink);
  color: white;
}

.story__image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, transparent 70%, var(--ink) 100%),
    linear-gradient(0deg, rgba(7, 14, 12, 0.55), transparent 50%),
    url("../assets/video-frames/story/frame-000.webp");
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.story.story-scroll[data-motion-section] > .story__image,
.story.story-scroll[data-motion-section] > .story__content {
  position: relative;
  top: auto;
  height: auto;
}

.story__image::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(125deg, transparent 65%, rgba(237, 103, 3, 0.18));
  content: "";
  pointer-events: none;
}

.story-scroll__video,
.story-scroll__canvas,
.story-scroll__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-scroll__video,
.story-scroll__canvas {
  object-fit: cover;
}

.story-scroll__video {
  z-index: 0;
  background: #090b0a;
}

.story-scroll__canvas {
  z-index: 1;
  background: #090b0a url("../assets/video-frames/story/frame-000.webp") center / cover no-repeat;
}

.story-scroll__shade {
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 68%, var(--ink) 100%),
    linear-gradient(0deg, rgba(5, 8, 7, 0.45), transparent 48%);
  pointer-events: none;
}

.story-scroll__cue {
  position: absolute;
  z-index: 4;
  bottom: clamp(28px, 5vw, 64px);
  left: clamp(24px, 5vw, 70px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-label);
  font-style: italic;
  font-weight: 800;
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
}

.story-scroll__cue i {
  position: relative;
  display: block;
  width: clamp(80px, 9vw, 140px);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}

.story-scroll__cue b {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--story-progress, 0));
  transform-origin: left;
  background: var(--orange-bright);
  box-shadow: 0 0 18px rgba(237, 103, 3, 0.55);
}

.story__content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(60px, 8vw, 120px) max(48px, calc((100vw - var(--container)) / 2));
  padding-left: clamp(50px, 6vw, 96px);
}

/* The section's entire right pane belongs to the enquiry card. The motion
   image is the only content on the left, keeping the conversation focused.
   The card is what #contact resolves to, so the scroll margin lives here
   rather than on the section. */
.story__form {
  width: 100%;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  scroll-margin-top: calc(var(--header-height) + 38px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: none;
}

.story__form .form-card__heading {
  margin-bottom: 26px;
}

/* Half a viewport is not two form columns. .contact-fields splits name/email
   from the message above 1200px, which is a container-width decision made on
   viewport width — right for the full-width card, wrong inside this pane at
   any window size. */
.story__form .contact-fields {
  grid-template-columns: minmax(0, 1fr);
}

.story__form .contact-fields .field--message {
  position: static;
  grid-column: 1;
  grid-row: auto;
}

.story__form .contact-fields .field--message textarea {
  position: static;
  resize: vertical;
}

.form-card__intro {
  max-width: 520px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-base);
  line-height: 1.55;
}

/* Social */

.social-section {
  background: var(--warm);
}

.social-handle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-style: italic;
  font-weight: 700;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.social-tile {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 340 / 370;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink);
  box-shadow: 0 14px 45px rgba(11, 22, 19, 0.12);
  transition: box-shadow 300ms ease, transform 300ms var(--ease);
}

.social-tile::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.social-tile__artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}

.social-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 54px rgba(11, 22, 19, 0.18);
}

.social-tile:hover .social-tile__artwork {
  transform: scale(1.035);
}

.social-tile:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

/* Layered card entrance, light tracking and pointer depth */

.motion-card.reveal {
  --reveal-y: 26px;
  --card-lift: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --media-x: 0px;
  --media-y: 0px;
  opacity: 0;
  transform: perspective(1000px) translate3d(0, calc(var(--reveal-y) + var(--card-lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition:
    opacity 700ms var(--ease) var(--delay, 0ms),
    transform 520ms var(--ease) var(--delay, 0ms),
    border-color 300ms ease,
    box-shadow 300ms ease;
  will-change: transform;
}

.motion-card.reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
}

.motion-card.product-card:hover,
.motion-card.goal-card:hover,
.motion-card.social-tile:hover {
  --card-lift: -8px;
  transform: perspective(1000px) translate3d(0, calc(var(--reveal-y) + var(--card-lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.motion-card::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.22), transparent 34%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.motion-card.is-pointer-active::before {
  opacity: 0.68;
}

.motion-card.product-card .product-card__visual img {
  transform: translate3d(var(--media-x), var(--media-y), 0);
}

.motion-card.product-card:hover .product-card__visual img {
  transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.055) rotate(-1.2deg);
}

.motion-card.goal-card img {
  transform: translateX(-50%) translate3d(var(--media-x), var(--media-y), 0);
}

.motion-card.goal-card:hover img {
  transform: translateX(-50%) translate3d(var(--media-x), var(--media-y), 0) scale(1.06) rotate(-1deg);
}

.motion-card.social-tile .social-tile__artwork {
  transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.01);
}

.motion-card.social-tile:hover .social-tile__artwork {
  transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.055);
}

/* Name and email stack down the left, the message fills the right across both
   of their rows. Spanning rather than a fixed height is what keeps the
   textarea's bottom edge level with the email field's. */
.contact-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 22px;
}

.contact-fields .field--message {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Absolute, so the textarea contributes nothing to sizing the two rows it
   spans — the name and email column decides their height and the textarea
   fills whatever is left. In flow it did the opposite: a spanning grid item
   contributes its min-content height to the tracks it covers, and rows="5"
   survives both min-height: 0 and a zero flex base, so the textarea pushed
   both rows taller than the inputs beside it and they stretched to match.
   resize is off because the layout owns the height here. */
.contact-fields .field--message textarea {
  position: absolute;
  inset: 0;
  resize: none;
}

/* The side-by-side arrangement is for the widest layout only. Anything
   narrower goes back to a single stack, where rows="5" sizes the textarea
   again. Kept next to the rules it overrides rather than in the shared
   breakpoint block further down, since the two only make sense together. */
@media (max-width: 1200px) {
  .contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-fields .field--message {
    position: static;
    grid-column: 1;
    grid-row: auto;
  }

  .contact-fields .field--message textarea {
    position: static;
    resize: vertical;
  }
}

.contact-card {
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow-dark);
  backdrop-filter: blur(18px);
}

.contact-card.reveal .form-card__heading,
.contact-card.reveal .field,
.contact-card.reveal .form-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 650ms var(--ease);
}

.contact-card.reveal.is-visible .form-card__heading,
.contact-card.reveal.is-visible .field,
.contact-card.reveal.is-visible .form-actions {
  opacity: 1;
  transform: translateY(0);
}

.contact-card.reveal.is-visible .form-card__heading { transition-delay: calc(var(--delay, 0ms) + 80ms); }
.contact-card.reveal.is-visible .field:nth-of-type(1) { transition-delay: calc(var(--delay, 0ms) + 150ms); }
.contact-card.reveal.is-visible .field:nth-of-type(2) { transition-delay: calc(var(--delay, 0ms) + 210ms); }
.contact-card.reveal.is-visible .form-actions { transition-delay: calc(var(--delay, 0ms) + 280ms); }

.form-card__heading {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 34px;
}

.form-card__heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(237, 103, 3, 0.5);
  border-radius: 50%;
  color: var(--orange-bright);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
}

.form-card__heading .eyebrow {
  margin-bottom: 7px;
}

.form-card__heading h2,
.form-card__heading h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  margin-bottom: 17px;
}

.field label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.field label span {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.075);
  color: white;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

/* display: block, not the default inline-block: as an inline box each control
   sits on a line box that reserves descender space under it, adding ~4px of
   phantom height to the field. That is invisible in a single column, but it
   made the message column's textarea overshoot the email field beside it. */
.field input,
.field select {
  display: block;
  min-height: 50px;
  padding: 0 15px;
}

.field textarea {
  min-height: 105px;
  padding: 14px 15px;
  resize: vertical;
}

.field select {
  color-scheme: dark;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.27);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--orange-bright);
  background: rgba(255, 255, 255, 0.105);
  box-shadow: 0 0 0 3px rgba(237, 103, 3, 0.19);
}

/* Native select popup fallback. The popup itself cannot be styled beyond
   this, and Safari ignores it entirely — which is why js/select.js replaces
   the whole control. These rules only matter when that script has not run. */
.field select option,
.field select optgroup {
  background: #101815;
  color: white;
}

/* Custom select
   ----------------------------------------------------------------
   js/select.js enhances every [data-select] <select> into this. The native
   element stays in the DOM at full size but transparent, so form submission,
   .value reads and the browser's own validation bubble all keep working and
   stay correctly positioned. */

.select {
  position: relative;
  width: 100%;
}

.select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.select__trigger {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.075);
  color: white;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.27);
}

.select__trigger:focus-visible,
.select__trigger[aria-expanded="true"] {
  outline: 0;
  border-color: var(--orange-bright);
  background: rgba(255, 255, 255, 0.105);
  box-shadow: 0 0 0 3px rgba(237, 103, 3, 0.19);
}

/* The value and a hidden copy of the longest label share one grid cell, so
   the control keeps a stable width instead of resizing on every choice. */
.select__text {
  display: grid;
  min-width: 0;
}

.select__value,
.select__sizer {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select__sizer {
  height: 0;
  visibility: hidden;
}

/* Icon-only trigger. The label text stays in the DOM, clipped rather than
   removed, so the button's accessible name is still "Sort products,
   Featured" — only the glyph is visible. */
.select--icon {
  width: auto;
}

.select__trigger--icon {
  width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

.select__trigger--icon:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: white;
}

.select__trigger--icon .select__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.select__chevron {
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  margin-top: -4px;
  transform: rotate(45deg);
  opacity: 0.62;
  transition: transform 220ms var(--ease), opacity 180ms ease;
}

.select__trigger[aria-expanded="true"] .select__chevron {
  margin-top: 3px;
  transform: rotate(-135deg);
  opacity: 1;
}

/* position: fixed, because .catalogue-section clips its overflow and would
   cut the panel off. */
.select__panel {
  position: fixed;
  z-index: 200;
  max-height: 322px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(12, 20, 17, 0.98);
  box-shadow: var(--shadow-dark);
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
  scrollbar-width: thin;
  backdrop-filter: blur(18px);
}

.select__panel::-webkit-scrollbar {
  width: 10px;
}

.select__panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  background-clip: content-box;
}

.select__group-label {
  padding: 14px 12px 7px;
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.select__option {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.35;
  transition: background-color 140ms ease, color 140ms ease;
}

/* The same skewX(-28deg) orange bar as .eyebrow > span and .chip. */
.select__option::before {
  width: 0;
  height: 3px;
  flex: none;
  transform: skewX(-28deg);
  background: var(--orange);
  content: "";
  transition: width 200ms var(--ease);
}

.select__option:hover,
.select__option.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: white;
}

.select__option[aria-selected="true"] {
  color: white;
  font-weight: 600;
}

.select__option[aria-selected="true"]::before {
  width: 14px;
}

.select__option.is-active {
  outline: 1px solid rgba(237, 103, 3, 0.5);
  outline-offset: -1px;
}

/* Sits in a .field-row beside a labelled input, so it aligns to the bottom of
   the row rather than the top — the label above the input is what makes the
   two cells different heights. */
.field--action {
  display: flex;
  align-items: flex-end;
}

.field--action .button {
  width: 100%;
  min-height: 50px;
}

/* ---- Quote request lines --------------------------------------------- */

.quote-lines {
  margin-bottom: 17px;
}

.quote-lines__heading {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.quote-lines__heading span {
  color: var(--orange-bright);
}

.quote-lines__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* minmax(0, 1fr) on the name: product names are long, and an auto track would
   push the quantity and the remove control out of the card. */
.quote-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.quote-line__name {
  min-width: 0;
  color: white;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
}

.quote-line__qty {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* 42px matches .button--small, the site's floor for a control you have to hit
   with a thumb. */
.quote-line__remove {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.quote-line__remove:hover {
  border-color: var(--orange);
  background: rgba(237, 103, 3, 0.18);
  color: white;
}

/* ---- Quote request section ------------------------------------------ */

.quote-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 24%, rgba(37, 98, 76, 0.28), transparent 34%),
    linear-gradient(135deg, #08100e, #111815 62%, #07100d);
  color: white;
  scroll-margin-top: var(--header-height);
}

.quote-section__layout {
  display: grid;
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.quote-section__intro h2 {
  max-width: 8ch;
  margin-bottom: 22px;
  font-size: clamp(4rem, 7.2vw, 7rem);
  text-transform: uppercase;
}

.quote-section__intro > p:not(.eyebrow) {
  max-width: 36ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--text-base);
  line-height: 1.65;
}

.quote-section__card {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--ink-deep);
  backdrop-filter: none;
}

/* row-reverse rather than reordering the markup: the submit stays first in the
   DOM, so the ≤680px column below still puts the button above its status line.
   With the axis flipped, space-between sends the button to the right edge and
   the status to the left. */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
  flex-direction: row-reverse;
}

/* The status line wraps, the button does not. Both are flex items with an
   auto min-width, so a long status — the product prefill's confirmation is
   two clauses — otherwise squeezed the button until its own label wrapped. */
.form-actions .button {
  flex: none;
}

.form-status {
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--text-base);
}

.form-status[data-state="success"] {
  color: #b8d99d;
}

/* Point-of-collection privacy information stays visually secondary without
   being hidden behind a tooltip or a legal-page-only link. */
.form-privacy {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-label);
  line-height: 1.55;
}

.form-privacy a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-decoration-color: rgba(236, 140, 21, 0.75);
  text-underline-offset: 3px;
}

.form-privacy a:hover {
  color: white;
}

/* A recovery line, not a panel: it appears under a form that already has
   its own frame, so a second box around it only adds weight. A hairline
   above is enough to part it from the actions row — same rule the featured
   card uses over its price. */
.form-fallback {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-base);
  text-align: center;
}

/* The block margin is for the narrow case: in the quote dialog the button
   drops onto its own line, where a left margin buys it nothing. */
.copy-button {
  margin-block: 5px;
  margin-left: 16px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--orange);
  color: white;
  font-size: var(--text-label);
  font-weight: 800;
}

/* Footer */

/* The footer closes the page rhythm instead of butting flat against the last
   section: it overlaps by one --section-angle and clips its own top edge, so
   the join reads as one more angled seam and the clipped triangle reveals the
   section behind it. The direction alternates with whatever ends the page —
   .social-section and .catalogue-cta both rise, so the footer falls; on a
   detail page .product-related already falls, so there the footer rises. */
.site-footer {
  margin-top: calc(-1 * var(--section-angle));
  padding: 78px 0 22px;
  background: #030504;
  color: white;
  clip-path: polygon(0 0, 100% var(--section-angle), 100% 100%, 0 100%);
}

.product-page .site-footer {
  clip-path: polygon(0 var(--section-angle), 100% 0, 100% 100%, 0 100%);
}

.home-page .site-footer {
  clip-path: polygon(0 var(--section-angle), 100% 0, 100% 100%, 0 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.62fr 1.1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* The horizontal wordmark needs more width than the stacked lockup did to
   carry the same cap height; 220px matches the header exactly. */
.footer-brand img {
  width: 220px;
  height: auto;
  margin-bottom: 24px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand strong {
  color: white;
}

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

.footer-column h2 {
  margin-bottom: 10px;
  color: var(--orange-bright);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-column a,
.footer-column address,
.footer-column p {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-base);
  font-style: normal;
}

/* Annotates the phone number above it, so it is pulled off the column's 8px
   rhythm to read as part of that line rather than another entry. Needs
   .footer-column in the selector to outrank the block above. */
.footer-column .footer-note {
  margin: -5px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.footer-column > a:not(.button):hover {
  color: white;
}

.footer-column--cta p {
  margin-bottom: 16px;
}

.footer-column--cta .button {
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.34);
  font-size: var(--text-label);
}

/* Styleguide */

.styleguide-page {
  background: var(--paper);
}

.styleguide-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px clamp(24px, 5vw, 70px);
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(16px);
}

.styleguide-header .brand img {
  width: 210px;
}

.styleguide-header > span {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.styleguide-hero {
  position: relative;
  display: flex;
  min-height: 590px;
  align-items: flex-end;
  overflow: hidden;
  padding-block: 90px;
  background:
    linear-gradient(90deg, rgba(5, 8, 7, 0.96), rgba(5, 8, 7, 0.48)),
    url("../assets/images/hero-bg.png") center / cover;
  color: white;
}

.styleguide-hero::after {
  position: absolute;
  right: 7%;
  bottom: -30%;
  width: 210px;
  height: 130%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(237, 103, 3, 0.17), transparent);
  content: "";
}

.styleguide-hero .container {
  position: relative;
  z-index: 2;
}

.styleguide-hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(5.5rem, 12vw, 10rem);
}

.styleguide-hero p:last-child {
  max-width: 520px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
}

.styleguide-nav {
  border-bottom: 1px solid var(--line);
  background: var(--warm);
}

.styleguide-nav .container {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  padding-block: 16px;
  scrollbar-width: none;
}

.styleguide-nav .container::-webkit-scrollbar {
  display: none;
}

.styleguide-nav a {
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: var(--track-base);
  text-transform: uppercase;
  white-space: nowrap;
}

.styleguide-nav a:hover {
  color: var(--orange);
}

.styleguide-section {
  padding-block: clamp(80px, 9vw, 130px);
}

.styleguide-section--dark {
  background: var(--ink);
  color: white;
}

.styleguide-section--mist {
  background: var(--mist);
}

.styleguide-heading {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.styleguide-heading > span {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 800;
}

.styleguide-heading p {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.styleguide-heading h2 {
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 5.7rem);
}

.styleguide-heading--light {
  border-color: var(--line-light);
}

.styleguide-heading--light p {
  color: rgba(255, 255, 255, 0.5);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.swatch {
  display: flex;
  min-height: 185px;
  justify-content: space-between;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: var(--text-base);
  font-weight: 800;
  text-transform: uppercase;
}

.swatch code {
  font-size: var(--text-label);
  font-weight: 700;
}

.swatch--ink { background: var(--ink); color: white; }
.swatch--forest { background: var(--forest); color: white; }
.swatch--orange { background: var(--orange); color: var(--ink); }
.swatch--warm { background: var(--warm); }
.swatch--graphite { background: var(--graphite); color: white; }
.swatch--mist { background: var(--mist); }

.token-note {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  margin-top: 28px;
  padding: 24px;
  border-left: 5px solid var(--orange);
  background: white;
}

.token-note p {
  margin-bottom: 0;
  color: var(--muted);
}

.type-specimens {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
}

.type-display > span,
.type-scale span,
.component-label {
  display: block;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.46);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.type-display p {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.9;
}

.type-scale > div {
  padding-block: 19px;
  border-bottom: 1px solid var(--line-light);
}

.type-scale span {
  margin-bottom: 8px;
}

.type-scale h2 {
  margin-bottom: 0;
  font-size: clamp(2.7rem, 4vw, 4.3rem);
}

.type-scale h3,
.type-scale p {
  margin-bottom: 0;
}

/* The label row demonstrates the floor rather than describing it. */
.type-scale strong {
  display: block;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.component-stage {
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow-soft);
}

.component-stage--split {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 48px;
}

.component-stage .component-label {
  color: var(--muted);
}

.styleguide-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.styleguide-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.styleguide-product-card,
.styleguide-goal-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.styleguide-product-card {
  padding: 22px;
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--card-accent) 28%, transparent), transparent 45%),
    var(--ink);
  color: white;
}

.styleguide-product-card .badge {
  position: absolute;
  z-index: 3;
  border-color: transparent;
  background: var(--badge-bg);
  color: white;
}

.styleguide-product-card img {
  width: 100%;
  height: 245px;
  object-fit: contain;
}

.styleguide-product-card p {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
}

.styleguide-product-card h3,
.styleguide-goal-card h3 {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-style: italic;
  text-transform: uppercase;
}

.styleguide-product-variant {
  color: var(--card-accent);
  font-size: var(--text-base);
  font-weight: 700;
}

.styleguide-price {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 700;
}

.styleguide-goal-card {
  background: color-mix(in srgb, var(--goal-accent) 14%, white);
}

.styleguide-goal-card h3 {
  font-size: 2.35rem;
  line-height: 0.88;
}

.styleguide-goal-card > span {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 18px;
  color: var(--goal-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
}

.styleguide-goal-card img {
  position: absolute;
  top: 140px;
  width: 100%;
  height: calc(100% - 130px);
  object-fit: contain;
}

.styleguide-goal-card div {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 22px;
  left: 22px;
}

.styleguide-goal-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.component-stage--dark {
  max-width: 850px;
  border-color: var(--line-light);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow-dark);
}

.focus-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-base);
}

.styleguide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 38px clamp(24px, 5vw, 70px);
  background: #030504;
  color: white;
}

.styleguide-footer img {
  width: 170px;
  height: auto;
}

.styleguide-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
}

.styleguide-footer a {
  color: var(--orange-bright);
  font-size: var(--text-base);
  font-weight: 800;
}

.styleguide-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
}

/* Responsive */

@media (max-width: 1120px) {
  .banner-slide {
    padding: 28px;
    gap: 22px 28px;
  }

  .goal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .goal-card:nth-child(4),
  .goal-card:nth-child(5) {
    min-height: 390px;
  }

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

  .footer-column--cta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    align-items: center;
  }

  .footer-column--cta h2,
  .footer-column--cta p {
    margin: 0;
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 66px;
  }

  .banner-slide {
    min-height: 0;
    grid-template-areas:
      "headline"
      "photo"
      "aside";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .banner-slide__photo {
    height: clamp(280px, 42vw, 400px);
  }

  /* Stacked, the product would push the banner past a screen height, so the
     render moves alongside its own copy instead of above it. */
  .banner-slide__aside {
    width: auto;
    margin-inline: 0;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__aside {
    display: grid;
    align-content: start;
    align-items: center;
    gap: 6px 22px;
    grid-template-areas:
      "product meta"
      "product name"
      "facts facts";
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__product {
    height: 200px;
    grid-area: product;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__glow {
    width: 130px;
    height: 38px;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__meta {
    align-self: end;
    grid-area: meta;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__product-name {
    align-self: start;
    grid-area: name;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__facts {
    margin-top: 12px;
    grid-area: facts;
  }

  .quote-section__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .container,
  .nav-shell {
    width: min(calc(100% - 30px), var(--container));
  }

  .site-header {
    top: 10px;
  }

  .nav-shell {
    min-height: var(--header-height);
    padding: 8px 9px 8px 18px;
    border-radius: 17px;
  }

  .brand img {
    width: 155px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-panel {
    position: fixed;
    top: 87px;
    right: 15px;
    left: 15px;
    display: flex;
    max-height: calc(100svh - 104px);
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
    padding: 22px;
    overflow-y: auto;
    visibility: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    background: rgba(248, 247, 242, 0.98);
    box-shadow: var(--shadow-dark);
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top;
    transition: opacity 220ms ease, transform 220ms var(--ease), visibility 220ms;
  }

  .nav-panel[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .nav-links {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .nav-links a {
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-cta {
    width: 100%;
  }

  .hero {
    min-height: 850px;
  }

  .hero__media {
    background-image:
      linear-gradient(90deg, rgba(1, 8, 6, 0.92) 0%, rgba(1, 8, 6, 0.48) 58%, rgba(1, 8, 6, 0.12) 100%),
      linear-gradient(0deg, rgba(2, 7, 5, 0.84) 0%, transparent 54%),
      url("../assets/images/hero-bg.png");
    background-position: center, center, 64% center;
  }

  .hero__content {
    padding-top: 130px;
    padding-bottom: 54px;
    transform: translateY(110px);
  }

  .scroll-cue {
    display: none;
  }

  .section-heading--split {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading__aside {
    align-items: flex-start;
    text-align: left;
  }

  .story {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .story.story-scroll[data-motion-section] > .story__image,
  .story.story-scroll[data-motion-section] > .story__content {
    position: relative;
    top: auto;
    height: auto;
  }

  .story__image {
    min-height: 500px;
    background-image:
      linear-gradient(0deg, var(--ink), transparent 50%),
      url("../assets/video-frames/story/frame-000.webp");
    background-position: center;
  }

  .story-scroll__shade {
    background: linear-gradient(0deg, var(--ink), transparent 45%);
  }

  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story__content {
    padding: 25px 24px 80px;
  }

  .type-specimens,
  .component-stage--split,
  .styleguide-card-grid {
    grid-template-columns: 1fr;
  }

  .styleguide-card-grid .benefit-card {
    min-height: 280px;
  }
}

@media (max-width: 680px) {
  :root {
    --section-angle: 22px;
  }

  .products-section {
    background:
      linear-gradient(180deg, #242725 0, #171a19 380px, rgba(17, 23, 20, 0.72) 560px, rgba(8, 16, 14, 0) 760px),
      radial-gradient(circle at 85% 10%, rgba(88, 96, 92, 0.16), transparent 30%),
      linear-gradient(135deg, #08100e, #111815 62%, #07100d);
  }

  .banner-slide {
    padding: 20px;
    border-radius: var(--radius-md);
    gap: 18px;
  }

  .banner-slide.banner-slide--brand {
    min-height: clamp(440px, 130vw, 560px);
  }

  .banner-slide--brand .banner-slide__headline {
    max-width: 15ch;
  }

  .banner-slide__headline {
    font-size: clamp(2.1rem, 8.6vw, 2.6rem);
  }

  .banner-slide__photo {
    height: clamp(260px, 76vw, 360px);
  }

  .banner-slide__athlete {
    padding: 46px 18px 16px;
  }

  /* The credential line is long enough that the desktop step costs it a
     third row on a phone. */
  .banner-slide__athlete span {
    font-size: var(--text-label);
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__aside {
    gap: 6px 18px;
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__product {
    height: 176px;
  }

  /* The narrow product column scales the transparent 600 px canvas down far
     enough to undo the desktop product enlargement. Preserve each slide's
     tuned scale, then add the missing mobile boost. */
  .banner-slide:not(.banner-slide--brand) .banner-slide__product img {
    transform: scale(var(--product-scale, 1.368)) scale(1.25);
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__glow {
    width: 110px;
    height: 34px;
  }

  .product-card__body h3 {
    margin-bottom: 8px;
    font-size: clamp(1.95rem, 8.4vw, 2.2rem);
    line-height: 0.94;
  }

  .container {
    width: min(calc(100% - 30px), var(--container));
  }

  .section {
    padding-block: 78px;
  }

  h2 {
    font-size: clamp(3.25rem, 17vw, 5rem);
  }

  .hero {
    min-height: 810px;
    align-items: center;
  }

  .hero__media {
    background-image:
      linear-gradient(0deg, rgba(2, 7, 5, 0.96) 5%, rgba(2, 7, 5, 0.5) 62%, rgba(2, 7, 5, 0.06) 100%),
      url("../assets/images/hero-bg.png");
    background-position: center, 65% center;
  }

  .hero__content {
    padding-top: 118px;
    padding-bottom: 48px;
    transform: translateY(100px);
  }

  .section-motion__label {
    display: none;
  }

  .hero h1 {
    font-size: clamp(4.1rem, 20vw, 5.2rem);
  }

  .hero__lede {
    max-width: 410px;
  }

  .goal-grid,
  .social-grid,
  .swatch-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card {
    min-height: 280px;
  }

  .product-card__visual {
    height: 310px;
  }

  .goal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .goal-card,
  .goal-card:nth-child(4),
  .goal-card:nth-child(5) {
    display: flex;
    min-width: 0;
    min-height: 116px;
    align-items: center;
    padding: 20px 62px 20px 20px;
    border-radius: 14px;
    background:
      linear-gradient(105deg, rgba(255, 255, 255, 0.72), transparent 74%),
      color-mix(in srgb, var(--goal-accent) 11%, var(--warm));
    scroll-snap-align: none;
  }

  .goal-card img {
    display: none;
  }

  .goal-card__content {
    position: static;
  }

  .goal-card__content h3 {
    font-size: clamp(2rem, 10vw, 2.6rem);
    line-height: 0.9;
  }

  .goal-card__content span {
    margin-top: 7px;
  }

  .goal-card__number {
    top: 50%;
    right: 20px;
    font-size: 1rem;
    transform: translateY(-50%);
  }

  .story__image {
    min-height: 430px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-actions .button {
    width: 100%;
  }

  .footer-grid,
  .footer-column--cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 9px;
  }

  .styleguide-header > span {
    display: none;
  }

  .styleguide-header .brand img {
    width: 150px;
  }

  .styleguide-header .button {
    min-height: 38px;
    padding: 9px 12px;
  }

  .styleguide-hero {
    min-height: 520px;
  }

  .styleguide-hero h1 {
    font-size: clamp(4.8rem, 23vw, 7rem);
  }

  .token-note {
    grid-template-columns: 1fr;
  }

  .type-display p {
    font-size: clamp(4.7rem, 22vw, 7rem);
  }

  .styleguide-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  /* Beside the product render the category line has to wrap; given the full
     width it does not, and the name keeps the render for company. */
  .banner-slide:not(.banner-slide--brand) .banner-slide__aside {
    grid-template-areas:
      "product name"
      "meta meta"
      "facts facts";
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__product {
    height: 154px;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__product-name {
    align-self: center;
    font-size: 1.7rem;
  }

  .banner-slide:not(.banner-slide--brand) .banner-slide__meta {
    align-self: start;
    margin-top: 4px;
  }

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

  .button-row .button {
    width: 100%;
  }

  .product-card__visual {
    height: 290px;
  }

  .contact-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .form-card__heading {
    gap: 12px;
  }

  .form-card__heading > span {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .section-motion__flare {
    animation: none !important;
  }

  .story-scroll__cue {
    display: none;
  }

  .story-scroll__canvas,
  .story-scroll__video {
    transform: none;
  }

  .section-motion__index,
  .section-motion__flare {
    transform: none;
  }

  .motion-card.reveal,
  .motion-card.reveal.is-visible,
  .motion-card.product-card:hover,
  .motion-card.goal-card:hover,
  .motion-card.social-tile:hover {
    transform: none;
  }

  .section-heading.reveal > *,
  .welcome__inner.reveal > *,
  .story__content.reveal > *,
  .contact-card.reveal .form-card__heading,
  .contact-card.reveal .field,
  .contact-card.reveal .form-actions {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* The angled clip cuts into the footer's first row on paper, and the overlap
   pulls it up over the last section's closing line. */
@media print {
  .site-footer {
    margin-top: 0;
    clip-path: none;
  }
}