/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · macrostructure: Split Studio · genre: editorial/sport · theme: Sport · enrichment: proof-photo curation · nav: N9 Edge-aligned minimal · footer: Ft5 Statement
 * H2 Split Diptych knobs: ratio=7/5 · right side=photo+caption · divider=negative-space
 * C2 Inline form knobs: field count=2 · submit=separate-line · helper=below
 */
:root {
  --font-display: "Oswald", Impact, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --color-paper: oklch(96% 0.015 83);
  --color-paper-2: oklch(91% 0.025 83);
  --color-paper-3: oklch(99% 0.004 83);
  --color-ink: oklch(17% 0.035 248);
  --color-muted: oklch(45% 0.025 248);
  --color-accent: oklch(55% 0.19 252);
  --color-accent-2: oklch(66% 0.19 78);
  --color-rule: oklch(80% 0.025 83);
  --color-dark: oklch(18% 0.055 250);
  --color-dark-2: oklch(25% 0.07 252);
  --color-focus: oklch(68% 0.18 78);
  --page-gutter: clamp(1rem, 4vw, 4.5rem);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: clamp(2.5rem, 6vw, 5rem);
  --space-3xl: clamp(4rem, 10vw, 9rem);
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: clamp(1.08rem, 1vw + 0.85rem, 1.35rem);
  --text-xl: clamp(1.35rem, 2vw + 0.9rem, 2rem);
  --text-display-s: clamp(2.5rem, 6vw, 5rem);
  --text-display: clamp(3rem, 7vw, 6.55rem);
  --leading-tight: 0.88;
  --leading-body: 1.6;
  --radius-sm: 0.7rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --shadow-lift: 0 1.5rem 4rem oklch(20% 0.08 252 / 18%);
  --rule-hair: 1px;
}

* { box-sizing: border-box; }
html,
body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button,
input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

.nav-edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--page-gutter);
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark span { color: var(--color-accent); }
.nav-cta,
.cta-form button {
  white-space: nowrap;
  min-height: 48px;
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: 999px;
  color: var(--color-paper-3);
  background: var(--color-ink);
  padding: 0.85rem 1.25rem;
  font-weight: 800;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .cta-form button:hover { transform: translateY(-2px); background: var(--color-accent); border-color: var(--color-accent); }
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
  min-height: calc(100svh - 5rem);
  padding: var(--space-md) var(--page-gutter) var(--space-2xl);
}
.availability {
  margin: 0 0 var(--space-md);
  color: var(--color-accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-sm);
}
h1,
h2,
h3,
blockquote,
.foot-stmt__line {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 {
  max-width: 13ch;
  margin: 0;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.hero-lede {
  max-width: 39rem;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-lg);
}
.proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
}
.proof-line span {
  white-space: nowrap;
  border-left: 3px solid var(--color-accent-2);
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}
.hero-proof {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--color-dark);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}
.hero-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 40%, var(--color-accent) 130%);
  mix-blend-mode: screen;
  opacity: 0.5;
  z-index: 1;
}
.hero-proof img {
  width: 100%;
  min-height: 32rem;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(1.05) contrast(1.06);
}
.hero-proof figcaption {
  position: absolute;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 2;
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-paper-3);
}
.hero-proof figcaption span {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-paper-2);
}
.hero-proof figcaption strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.cta-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: end;
  max-width: 52rem;
}
.cta-form label { display: grid; gap: var(--space-xs); min-width: 0; }
.cta-form label span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.cta-form input {
  width: 100%;
  min-height: 52px;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background: var(--color-paper-3);
  color: var(--color-ink);
  padding: 0.9rem 1rem;
}
.form-note {
  max-width: 42rem;
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rule-hair);
  padding: 0 var(--page-gutter) var(--space-3xl);
}
.stat-strip div {
  min-width: 0;
  background: var(--color-dark);
  color: var(--color-paper-3);
  padding: var(--space-lg);
}
.stat-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: 0.9;
}
.stat-strip span { display: block; margin-top: var(--space-sm); color: var(--color-paper-2); }

.split-block,
.steps-section,
.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) var(--page-gutter);
}
.split-block--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.section-copy { min-width: 0; }
.section-copy h2,
.results-head h2,
.final-cta h2 {
  margin: 0;
  max-width: 12ch;
  font-size: var(--text-display-s);
  line-height: 0.95;
  text-transform: uppercase;
}
.section-copy p,
.results-head p {
  max-width: 38rem;
  margin: var(--space-lg) 0 0;
  color: var(--color-muted);
  font-size: var(--text-lg);
}
.proof-card {
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  color: var(--color-paper-3);
  padding: var(--space-xl);
  min-height: 24rem;
  display: grid;
  align-content: end;
}
.proof-card--text p:last-child {
  max-width: 28rem;
  margin: var(--space-md) 0 0;
  color: var(--color-paper-2);
  font-size: var(--text-lg);
}
.card-kicker {
  margin: 0;
  color: var(--color-accent-2);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.steps-section { align-items: start; background: var(--color-paper-2); }
.steps-copy { position: sticky; top: var(--space-xl); }
.steps {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
}
.stage {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}
.steps h3 { margin: 0; font-size: var(--text-xl); line-height: 1; text-transform: uppercase; }
.steps p { grid-column: 2; margin: 0; color: var(--color-muted); }

.results { padding: var(--space-3xl) var(--page-gutter); }
.results-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-2xl);
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(12rem, 18vw);
  gap: var(--space-md);
}
.result-card {
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: clip;
  background: var(--color-dark);
}
.result-card--large { grid-column: span 2; grid-row: span 2; }
.result-card--wide { grid-column: span 2; }
.result-card img { width: 100%; height: 100%; object-fit: cover; }

.quote-room {
  padding: var(--space-3xl) var(--page-gutter);
  background: var(--color-dark);
  color: var(--color-paper-3);
  text-align: center;
}
.quote-room blockquote {
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.quote-room p { max-width: 38rem; margin: var(--space-xl) auto 0; color: var(--color-paper-2); }

.final-cta { background: var(--color-accent); color: var(--color-paper-3); }
.final-cta .availability { color: var(--color-paper-2); }
.final-cta h2 { color: var(--color-paper-3); }
.final-form input { border-color: var(--color-paper-2); }
.final-form button { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-paper-3); }

.foot-stmt {
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}
.foot-stmt__line {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.foot-stmt__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.muted { color: var(--color-muted); }

@media (max-width: 70rem) {
  .hero-split,
  .split-block,
  .split-block--reverse,
  .steps-section,
  .final-cta,
  .results-head { grid-template-columns: 1fr; }
  .hero-split { min-height: auto; align-items: start; }
  .hero-proof img { min-height: 26rem; }
  h1 { max-width: 12ch; }
  .steps-copy { position: static; }
}
@media (max-width: 54rem) {
  .cta-form { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 16rem; }
  .result-card--large,
  .result-card--wide { grid-column: span 2; }
}
@media (max-width: 30rem) {
  .nav-edge { padding-block: var(--space-md); }
  .wordmark { font-size: 1.35rem; }
  .nav-cta { padding-inline: var(--space-md); }
  .hero-proof img { min-height: 20rem; }
  .stat-strip { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; }
  .steps p { grid-column: 1; }
  .foot-stmt__meta { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}