:root {
  --white: #ffffff;
  /* Deck palette: paper, ink, navy, vermilion. */
  --bg: #f3e9dc;
  --bg-2: #eee2d1;
  --bg-3: #e4d6c2;
  --card: #fbf5ec;
  --ink: #0d0d0d;
  --navy: #00142e;
  --text: #4a4a4a;
  --text-strong: #0d0d0d;
  --accent: #e23a01;
  --accent-2: #ea7302;
  --grad: linear-gradient(94deg, var(--accent) 0%, var(--accent-2) 100%);
  --line: #00142e2e;
  --error: #b3261e;
  --font: "Didact Gothic", "Trebuchet MS", sans-serif;
  --display: "Jost", "Arial Narrow", sans-serif;
  --headline: "Anton", "Jost", "Arial Narrow", sans-serif;
  --header-h: 110px;
  --wrap: min(1240px, calc(100% - 2.4rem));
  --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-h) + 20px);
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
}

body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 50% 1200px, rgba(226, 58, 1, 0.07), transparent 42%),
    radial-gradient(circle at 80% 2200px, rgba(0, 20, 46, 0.06), transparent 36%);
  background-repeat: no-repeat;
}

::selection {
  color: var(--bg);
  background: var(--accent);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

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

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -48px;
  background: var(--accent);
  color: var(--white);
  padding: 0.55rem 0.9rem;
  z-index: 200;
}

.skip-link:focus {
  top: 1rem;
}

.section-wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.section-label {
  display: inline-block;
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title {
  margin-bottom: 0;
}

.section-title h2 {
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  font-weight: 700;
  max-width: 16ch;
}

.section-title h2 span,
.hero h1 span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-title p:not(.section-label) {
  margin-top: 1.1rem;
  max-width: 40rem;
  color: var(--text);
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.65;
}

.section-title-center {
  text-align: center;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.section-title-center h2 {
  max-width: 18ch;
  margin-inline: auto;
}

.section-title-center p:not(.section-label) {
  margin-inline: auto;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 16px 30px 16px 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.35s var(--ease);
}

/* The label sits beside the pill until hover, so it takes the page's ink colour. */
.btn:hover,
.btn:focus-visible {
  color: var(--white);
}

/* Buttons that sit on a photo or a dark panel keep light text at rest. */
.final-cta .btn,
.site-header .btn {
  color: var(--white);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  z-index: -1;
  transition: width 0.4s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
  width: 100%;
}

.btn-hot::before {
  background: var(--accent-2);
}

/* Always filled: the header button crosses both the photo and the cream bar. */
.site-header .btn-nav::before {
  width: 100%;
}

.btn-pay.is-loading,
.btn[disabled] {
  pointer-events: none;
  opacity: 0.8;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-scrolled {
  position: fixed;
  background: rgba(243, 233, 220, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 20, 46, 0.14);
}

.header-inner {
  width: var(--wrap);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo {
  display: block;
  line-height: 0;
}

.logo picture {
  display: block;
}

.logo img {
  width: auto;
  height: 82px;
  display: block;
}

.nav-desktop {
  margin-left: auto;
}

.nav-desktop ul {
  display: flex;
  gap: 1.75rem;
}

.nav-desktop a {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  text-transform: capitalize;
}

.nav-desktop a:hover {
  color: var(--accent);
}

/* Over the hero photo the bar is transparent; once it turns cream, the links go dark. */
.site-header.is-scrolled .nav-desktop a {
  color: var(--ink);
}

.site-header.is-scrolled .menu-toggle span {
  background: var(--ink);
}

.btn-nav {
  min-height: 46px;
  padding: 12px 24px 12px 32px;
  font-size: 15px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 auto;
  width: min(360px, 88vw);
  background: var(--card);
  z-index: 45;
  padding: 2rem;
  border-left: 1px solid var(--line);
}

.mobile-nav ul {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.mobile-nav a {
  font-family: var(--display);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 46, 0.55);
  z-index: 35;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 1.5rem) 0 2.5rem;
  overflow: clip;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 16%;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 20, 46, 0.9) 0%, rgba(0, 20, 46, 0.66) 48%, rgba(0, 20, 46, 0.92) 100%),
    linear-gradient(180deg, rgba(0, 20, 46, 0.4) 0%, transparent 38%, rgba(0, 20, 46, 0.75) 100%);
}

.hero-grid {
  width: var(--wrap);
  margin-inline: auto;
  display: grid;
  --form-pad: 1.6rem;
  grid-template-columns: minmax(0, 1fr) minmax(380px, min(580px, 48%));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.hero-content {
  width: 100%;
  text-align: left;
  align-self: stretch;
}

/* Centred in the visible screen, but never taller than the form beside it. */
.hero-content-inner {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  height: min(calc(100svh - var(--header-h) - 3rem), 100%);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.hero-label {
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}

.hero-brand {
  width: min(150px, 42vw);
  margin-bottom: 1rem;
}

.hero-brand img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  font-weight: 800;
  line-height: 0.92;
  margin-bottom: 1rem;
}

.hero h1 span {
  display: block;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  font-weight: 800;
}

.hero-lead {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
}

.hero-form-panel {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.hero-form {
  background: rgba(251, 245, 236, 0.96);
  border: 1px solid var(--line);
  padding: var(--form-pad);
  backdrop-filter: blur(16px);
}

.hero-form-head {
  margin-bottom: 0.85rem;
}

.hero-form-head h2 {
  font-size: 1.45rem;
  margin-bottom: 0.25rem;
}

.hero-form-head p:not(.section-label) {
  color: var(--text);
  font-size: 0.92rem;
}

.hero-form-head .section-label {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}

.hero-form-grid {
  gap: 0.55rem 0.85rem;
}

.hero-form .field label {
  font-size: 0.8rem;
}

.hero-form .field input,
.hero-form .field select {
  padding: 0.55rem 0;
}

.hero-form .check-field label {
  font-size: 0.78rem;
  line-height: 1.4;
}

.hero-form .form-actions {
  margin-top: 0.9rem;
  gap: 0.45rem;
}

.hero-form .btn-pay {
  min-height: 48px;
}

.hero-form .pay-note {
  font-size: 0.78rem;
}

.hero-form .form-status:empty {
  display: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid var(--white);
  border-radius: 100px;
  display: grid;
  place-items: center;
  z-index: 2;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-down span {
  width: 6px;
  height: 10px;
  border-radius: 100px;
  background: var(--white);
}

.scroll-down:hover {
  border-color: var(--accent);
}

@keyframes scrollBounce {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 14px; }
}

.image-anime {
  position: relative;
  overflow: hidden;
}

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

.image-anime:hover img {
  transform: scale(1.08);
}

.image-anime::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0;
  left: 50%;
  top: 50%;
  background: var(--grad);
  opacity: 0.45;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

.image-anime:hover::after {
  height: 250%;
  transition: all 600ms linear;
  opacity: 0;
}

.about,
.benefits,
.offering,
.process,
.about-fmd,
.final-cta {
  position: relative;
  padding: 72px 0;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.process {
  padding-top: 48px;
  background: var(--bg-2);
}

.about-top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.about-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.about-copy p + p {
  margin-top: 1.1rem;
}

.about-banner {
  margin: 0;
  min-height: 420px;
}

.about-banner img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.movement {
  margin-top: 3rem;
}

.movement-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.7;
  color: var(--text);
}

.movement-lead span,
.movement-steps p span {
  color: var(--accent);
  font-weight: 600;
}

/* Centred label with a hairline rule on each side. */
.rule-title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 3rem 0 2rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.rule-title::before,
.rule-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.movement-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  counter-reset: movement;
}

.movement-steps li {
  position: relative;
  text-align: center;
}

/* The arrow between steps, as in the design. */
.movement-steps li + li::before {
  content: "";
  position: absolute;
  top: calc(clamp(120px, 12vw, 168px) / 2);
  left: -1.2rem;
  width: 20px;
  height: 20px;
  border-top: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.movement-media {
  margin: 0 auto 1.1rem;
  width: clamp(120px, 12vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.movement-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.movement-steps h3 {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.55rem;
}

.movement-steps h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0.55rem auto 0;
  background: var(--grad);
}

.movement-steps p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.gap-box {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.gap-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--white);
  border: 1px solid var(--navy);
  background: var(--navy);
}

.gap-icon svg {
  width: 32px;
  height: 32px;
}

.gap-strong {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.gap-line {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.entitlements {
  position: relative;
  padding: 72px 0;
  scroll-margin-top: calc(var(--header-h) + 12px);
  background: var(--bg);
}

.entitlements-tagline {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 1rem;
}

.entitlements .section-title-center p:not(.section-label) + p {
  margin-top: 0.6rem;
}

.prize-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.prize-card {
  display: flex;
  flex-direction: column;
  padding: 1.8rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.prize-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.prize-tag {
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
}

.prize-kicker {
  margin-top: 1.4rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.prize-value {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.35rem 0 0.9rem;
}

.prize-value::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 0.9rem;
  background: var(--grad);
}

.prize-card p:last-child {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.prize-footnote {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
}

.benefits {
  background: var(--bg-2);
}

.benefit-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.benefit-card {
  grid-column: span 2;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
}

.benefit-card:nth-child(n + 4) {
  grid-column: span 3;
}

.benefit-index {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.85rem;
}

.benefit-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}

.benefit-card p {
  color: var(--text);
}

.offering-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.offering-lead {
  color: var(--text);
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.skill-grid li {
  background: var(--card);
  padding: 1.35rem 1.1rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-align: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.skill-grid li:hover {
  background: var(--grad);
  color: var(--white);
}

.gallery {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: 220px 280px;
  gap: 1rem;
}

.gallery figure {
  margin: 0;
  position: relative;
  min-height: 0;
}

.gallery-tall {
  grid-row: 1 / span 2;
}

.gallery-wide {
  grid-column: 2 / span 2;
}

.gallery figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}

.gallery figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 20, 46, 0.72) 100%);
  z-index: 1;
  pointer-events: none;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.process-list li {
  padding-top: 0.4rem;
}

.process-index {
  display: block;
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}

.process-list h3 {
  font-size: 1.55rem;
  margin-bottom: 0.75rem;
}

.process-list p {
  color: var(--text);
}

.about-fmd {
  background: var(--bg);
  padding-bottom: 48px;
}

.about-fmd-wrap {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 4rem;
  align-items: center;
}

.founder-card {
  margin: 0;
}

.founder-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-3);
}

.founder-card figcaption {
  padding: 1.15rem 0 0;
}

.founder-card strong,
.founder-card span {
  display: block;
  font-family: var(--display);
}

.founder-card strong {
  color: var(--ink);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.founder-card span {
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.95rem;
}

.about-fmd-copy .section-title {
  margin-bottom: 1.5rem;
}

.about-fmd-copy .section-title h2 {
  max-width: 16ch;
}

.about-fmd-copy p + p {
  margin-top: 1.1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.2rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.92rem;
  color: var(--text);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.85rem 0;
  transition: border-color 0.25s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(13, 13, 13, 0.45);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e23a01' d='M1.2 1.4 6 6.2l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.6rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-bottom-color: var(--error);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field option {
  background: var(--card);
  color: var(--ink);
}

.check-field {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}

.check-field input {
  /* Big enough to hit with a thumb; the label is a second, larger target. */
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  flex: none;
  cursor: pointer;
  accent-color: var(--accent);
}

.check-field label {
  cursor: pointer;
}

/* ---------------------------------------------------------------
   The rap video upload
   --------------------------------------------------------------- */

.video-field input[type="file"] {
  padding: 0.55rem 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.video-field input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.video-field input[type="file"]::file-selector-button:hover {
  background: var(--accent);
  color: #fff;
}

.upload {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.45rem;
  justify-items: start;
}

.upload-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.12);
  overflow: hidden;
}

.upload-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease-out;
}

.upload[data-state="done"] .upload-fill {
  background: #1f7a3d;
}

.upload[data-state="failed"] .upload-fill {
  background: var(--error);
}

.upload-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(13, 13, 13, 0.7);
}

.upload[data-state="done"] .upload-text {
  color: #1f7a3d;
}

.upload[data-state="failed"] .upload-text {
  color: var(--error);
}

.upload-retry {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A checkbox shows nothing for the usual invalid underline, so the box itself
   is ringed when someone submits without agreeing. */
.check-field.is-invalid input {
  outline: 2px solid var(--error);
  outline-offset: 3px;
}

.form-actions {
  margin-top: 1.8rem;
  display: grid;
  justify-items: start;
  gap: 0.85rem;
}

.form-status {
  color: var(--accent);
  min-height: 1.2em;
}

.form-status.is-success {
  color: #1b7f4b;
}

.form-status.is-error {
  color: var(--error);
}

.pay-note {
  color: var(--text);
  font-size: 0.9rem;
  max-width: 36rem;
}

.field select:disabled {
  opacity: 0.5;
}

.field-hint {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(13, 13, 13, 0.62);
}

.field-hint strong {
  color: var(--ink);
  font-weight: 400;
}

.form-note {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: rgba(226, 58, 1, 0.08);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink);
}

.choice-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.choice-field legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
}

.choice-row {
  display: flex;
  gap: 1.5rem;
}

.choice-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}

.choice-row input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

.field.is-invalid .choice-row label {
  color: var(--error);
}

.field input[readonly] {
  color: var(--accent);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom-style: dashed;
  cursor: default;
}

.check-field a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.final-cta {
  isolation: isolate;
  overflow: clip;
  text-align: center;
}

.section-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 46, 0.82);
}

.final-cta-wrap {
  max-width: 820px;
}

.final-cta .section-title h2 {
  max-width: 14ch;
  color: var(--white);
}

.final-cta .section-title p:not(.section-label) {
  color: rgba(255, 255, 255, 0.84);
}

.final-cta .hero-actions {
  margin-top: 2.2rem;
}

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 80px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1.1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer-brand .logo {
  margin-bottom: 1.2rem;
}

.footer-brand .logo img {
  height: 90px;
}

.footer-grid h3 {
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  color: var(--white);
}

.footer-grid a {
  color: rgba(255, 255, 255, 0.78);
}

.footer-grid ul {
  display: grid;
  gap: 0.7rem;
}

.footer-grid a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.social-links a {
  font-family: var(--display);
  font-size: 0.92rem;
  color: var(--white);
}

.social-links a:hover {
  color: var(--accent);
}

.pay-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 46, 0.78);
  display: grid;
  place-items: center;
  z-index: 80;
  padding: 1.5rem;
}

.pay-modal[hidden] {
  display: none;
}

.pay-modal-card {
  width: min(460px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 2rem 1.6rem 1.6rem;
}

.pay-modal-copy {
  margin: 0.5rem 0 1.5rem;
  color: var(--text);
}

.is-error {
  color: var(--error);
}

@media (max-height: 980px) and (min-width: 1024px) {
  .hero {
    min-height: 0;
    align-items: center;
    padding: calc(var(--header-h) + 0.75rem) 0 1.1rem;
  }

  .hero-grid {
    --form-pad: 1.25rem;
    align-items: start;
  }

  .hero-brand {
    width: 112px;
    margin-bottom: 0.5rem;
  }

  .hero-label {
    margin-bottom: 0.5rem;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    margin-bottom: 0.55rem;
  }

  .hero h1 span {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  }

  .hero-lead {
    font-size: 1rem;
  }

  .hero-form-head {
    margin-bottom: 0.5rem;
  }

  .hero-form-head h2 {
    font-size: 1.28rem;
  }
}

@media (max-width: 1100px) {
  .movement-steps,
  .prize-grid {
    grid-template-columns: 1fr 1fr;
  }

  .movement-steps li:nth-child(3)::before {
    display: none;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 220px 220px;
  }

  .gallery-tall {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 280px;
  }

  .gallery-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1023px) {
  .about-top,
  .offering-head,
  .about-fmd-wrap,
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .about-banner img {
    height: 320px;
  }

  .hero {
    min-height: 0;
    align-items: stretch;
    padding: calc(var(--header-h) + 1.4rem) 0 2.2rem;
  }

  .hero-content {
    text-align: left;
  }

  .hero-content-inner {
    position: static;
    height: auto;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 8vw, 3.2rem);
  }

  .hero h1 span {
    font-size: clamp(2.4rem, 10vw, 3.9rem);
  }

  .nav-desktop,
  .btn-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .benefit-list,
  .process-list,
  .footer-grid,
  .skill-grid {
    grid-template-columns: 1fr 1fr;
  }

  .benefit-card,
  .benefit-card:nth-child(n + 4) {
    grid-column: span 1;
  }

  .hero-bg img {
    object-position: 62% 12%;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 92px;
  }

  body {
    font-size: 16px;
  }

  .about,
  .benefits,
  .offering,
  .process,
  .entitlements,
  .about-fmd,
  .final-cta {
    padding: 48px 0;
  }

  .process {
    padding-top: 32px;
  }

  .about-fmd {
    padding-bottom: 32px;
  }

  .logo img {
    height: 68px;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 12vw, 2.8rem);
  }

  .hero h1 span {
    font-size: clamp(2.6rem, 15vw, 3.6rem);
  }

  .hero-grid {
    --form-pad: 1.1rem;
  }

  .hero-form-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .form-grid,
  .benefit-list,
  .process-list,
  .footer-grid,
  .skill-grid,
  .prize-grid {
    grid-template-columns: 1fr;
  }

  .movement-steps {
    gap: 2.2rem;
  }

  .movement-steps li + li::before {
    display: none;
  }

  .gap-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .gallery figure,
  .gallery-tall,
  .gallery-wide {
    min-height: 220px;
    grid-column: auto;
  }

  .section-title-center {
    margin-bottom: 2.2rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------
   Deck texture: printed paper grain, torn photo edges, brush marks
   and the skyline band that runs along the foot of the slides.
   --------------------------------------------------------------- */

/* Grain over the whole page, the way the deck sits on paper stock. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Photos are torn out of the page rather than cropped to a clean box. */
.about-banner,
.gallery figure,
.founder-card img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M8 8 L45.8 6.2 L83.7 4.5 L121.5 9.5 L159.4 3.7 L197.2 8.4 L235.1 6.7 L272.9 3.6 L310.8 8.1 L348.6 3.4 L386.5 7.3 L424.3 3.7 L462.2 3.9 L500.0 7.2 L537.8 11.3 L575.7 4.2 L613.5 5.2 L651.4 9.3 L689.2 12.5 L727.1 8.8 L764.9 7.0 L802.8 12.8 L840.6 3.5 L878.5 11.6 L916.3 5.9 L954.2 4.4 L992 8 L988.2 44.5 L990.1 81.0 L995.2 117.5 L988.8 154.0 L992.8 190.5 L993.4 227.0 L990.7 263.5 L992.5 300.0 L987.6 336.5 L987.6 373.0 L989.1 409.5 L993.8 446.0 L991.3 482.5 L990.1 519.0 L992.9 555.5 L992 592 L954.2 591.5 L916.3 590.0 L878.5 594.9 L840.6 594.0 L802.8 589.4 L764.9 592.7 L727.1 592.3 L689.2 595.8 L651.4 594.3 L613.5 589.9 L575.7 596.8 L537.8 588.2 L500.0 591.2 L462.2 594.6 L424.3 588.5 L386.5 591.9 L348.6 587.4 L310.8 593.7 L272.9 594.6 L235.1 592.7 L197.2 595.8 L159.4 590.1 L121.5 594.0 L83.7 592.9 L45.8 592.8 L8 592 L7.6 555.5 L11.4 519.0 L12.4 482.5 L7.7 446.0 L9.6 409.5 L3.6 373.0 L10.0 336.5 L9.5 300.0 L12.9 263.5 L11.2 227.0 L5.8 190.5 L6.9 154.0 L9.7 117.5 L3.2 81.0 L7.6 44.5 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath d='M8 8 L45.8 6.2 L83.7 4.5 L121.5 9.5 L159.4 3.7 L197.2 8.4 L235.1 6.7 L272.9 3.6 L310.8 8.1 L348.6 3.4 L386.5 7.3 L424.3 3.7 L462.2 3.9 L500.0 7.2 L537.8 11.3 L575.7 4.2 L613.5 5.2 L651.4 9.3 L689.2 12.5 L727.1 8.8 L764.9 7.0 L802.8 12.8 L840.6 3.5 L878.5 11.6 L916.3 5.9 L954.2 4.4 L992 8 L988.2 44.5 L990.1 81.0 L995.2 117.5 L988.8 154.0 L992.8 190.5 L993.4 227.0 L990.7 263.5 L992.5 300.0 L987.6 336.5 L987.6 373.0 L989.1 409.5 L993.8 446.0 L991.3 482.5 L990.1 519.0 L992.9 555.5 L992 592 L954.2 591.5 L916.3 590.0 L878.5 594.9 L840.6 594.0 L802.8 589.4 L764.9 592.7 L727.1 592.3 L689.2 595.8 L651.4 594.3 L613.5 589.9 L575.7 596.8 L537.8 588.2 L500.0 591.2 L462.2 594.6 L424.3 588.5 L386.5 591.9 L348.6 587.4 L310.8 593.7 L272.9 594.6 L235.1 592.7 L197.2 595.8 L159.4 590.1 L121.5 594.0 L83.7 592.9 L45.8 592.8 L8 592 L7.6 555.5 L11.4 519.0 L12.4 482.5 L7.7 446.0 L9.6 409.5 L3.6 373.0 L10.0 336.5 L9.5 300.0 L12.9 263.5 L11.2 227.0 L5.8 190.5 L6.9 154.0 L9.7 117.5 L3.2 81.0 L7.6 44.5 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.movement-media {
  border-width: 2px;
  border-color: #00142e33;
}

/* Brush swash under the centred headings. */
.section-title-center h2::after {
  content: "";
  display: block;
  width: min(220px, 60%);
  height: 13px;
  margin: 0.9rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C38 3 74 12 112 6 C142 1 168 9 197 4 L196 11 C168 15 142 8 112 12 C74 17 38 9 4 14 Z' fill='%23e23a01'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Skyline along the bottom edge, as on the deck slides. */
.about,
.entitlements,
.about-fmd {
  padding-bottom: 150px;
}

.about::after,
.entitlements::after,
.about-fmd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 170' width='1600' height='170'%3E%3Cpath d='M0 170 L0 77 L26 77 L26 170 Z M36 170 L36 83 L62 83 L62 170 Z M68 170 L68 83 L85 83 L85 170 Z M97 170 L97 125 L134 125 L134 170 Z M113 125 L113 109 L117 109 L117 125 Z M141 170 L141 137 L157 137 L157 170 Z M160 170 L160 98 L191 98 L191 170 Z M203 170 L203 128 L235 128 L235 170 Z M246 170 L246 141 L260 141 L260 170 Z M251 141 L251 125 L255 125 L255 141 Z M266 170 L266 145 L297 145 L297 170 Z M305 170 L305 73 L331 73 L331 170 Z M342 170 L342 67 L361 67 L361 170 Z M364 170 L364 138 L397 138 L397 170 Z M404 170 L404 78 L429 78 L429 170 Z M433 170 L433 116 L467 116 L467 170 Z M473 170 L473 112 L501 112 L501 170 Z M485 112 L485 96 L489 96 L489 112 Z M513 170 L513 135 L549 135 L549 170 Z M556 170 L556 140 L580 140 L580 170 Z M583 170 L583 122 L601 122 L601 170 Z M604 170 L604 100 L631 100 L631 170 Z M640 170 L640 139 L665 139 L665 170 Z M671 170 L671 62 L707 62 L707 170 Z M711 170 L711 106 L732 106 L732 170 Z M719 106 L719 90 L723 90 L723 106 Z M741 170 L741 133 L777 133 L777 170 Z M757 133 L757 117 L761 117 L761 133 Z M781 170 L781 141 L793 141 L793 170 Z M803 170 L803 61 L820 61 L820 170 Z M830 170 L830 124 L858 124 L858 170 Z M863 170 L863 66 L888 66 L888 170 Z M897 170 L897 121 L922 121 L922 170 Z M907 121 L907 105 L911 105 L911 121 Z M934 170 L934 146 L955 146 L955 170 Z M942 146 L942 130 L946 130 L946 146 Z M964 170 L964 71 L1003 71 L1003 170 Z M1007 170 L1007 130 L1020 130 L1020 170 Z M1011 130 L1011 114 L1015 114 L1015 130 Z M1027 170 L1027 70 L1039 70 L1039 170 Z M1046 170 L1046 139 L1070 139 L1070 170 Z M1056 139 L1056 123 L1060 123 L1060 139 Z M1076 170 L1076 67 L1106 67 L1106 170 Z M1118 170 L1118 101 L1141 101 L1141 170 Z M1146 170 L1146 87 L1176 87 L1176 170 Z M1181 170 L1181 99 L1220 99 L1220 170 Z M1198 99 L1198 83 L1202 83 L1202 99 Z M1225 170 L1225 119 L1246 119 L1246 170 Z M1252 170 L1252 124 L1287 124 L1287 170 Z M1267 124 L1267 108 L1271 108 L1271 124 Z M1298 170 L1298 61 L1316 61 L1316 170 Z M1326 170 L1326 138 L1357 138 L1357 170 Z M1361 170 L1361 144 L1376 144 L1376 170 Z M1383 170 L1383 98 L1402 98 L1402 170 Z M1414 170 L1414 111 L1441 111 L1441 170 Z M1445 170 L1445 119 L1461 119 L1461 170 Z M1473 170 L1473 139 L1504 139 L1504 170 Z M1510 170 L1510 146 L1545 146 L1545 170 Z M1525 146 L1525 130 L1529 130 L1529 146 Z M1554 170 L1554 117 L1580 117 L1580 170 Z M1565 117 L1565 101 L1569 101 L1569 117 Z M1585 170 L1585 101 L1606 101 L1606 170 Z' fill='%2300142e'/%3E%3C/svg%3E") repeat-x bottom / auto 130px;
}

.about .section-wrap,
.entitlements .section-wrap,
.about-fmd .section-wrap {
  position: relative;
  z-index: 1;
}

/* Deck headline face: heavy condensed caps. */
h1,
h2,
h3,
.hero h1,
.hero h1 span,
.section-title h2,
.hero-form-head h2,
.benefit-card h3,
.process-list h3,
.movement-steps h3,
.footer-grid h3,
.gap-strong,
.prize-value,
.process-index,
.benefit-index {
  font-family: var(--headline);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Footer: the deck's navy bar, with the skyline rising off the bottom edge. */
.site-footer {
  position: relative;
  overflow: hidden;
  /* Room under the bottom row so the skyline reads below the text. */
  padding-bottom: 56px;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 170' width='1600' height='170'%3E%3Cpath d='M0 170 L0 77 L26 77 L26 170 Z M36 170 L36 83 L62 83 L62 170 Z M68 170 L68 83 L85 83 L85 170 Z M97 170 L97 125 L134 125 L134 170 Z M113 125 L113 109 L117 109 L117 125 Z M141 170 L141 137 L157 137 L157 170 Z M160 170 L160 98 L191 98 L191 170 Z M203 170 L203 128 L235 128 L235 170 Z M246 170 L246 141 L260 141 L260 170 Z M251 141 L251 125 L255 125 L255 141 Z M266 170 L266 145 L297 145 L297 170 Z M305 170 L305 73 L331 73 L331 170 Z M342 170 L342 67 L361 67 L361 170 Z M364 170 L364 138 L397 138 L397 170 Z M404 170 L404 78 L429 78 L429 170 Z M433 170 L433 116 L467 116 L467 170 Z M473 170 L473 112 L501 112 L501 170 Z M485 112 L485 96 L489 96 L489 112 Z M513 170 L513 135 L549 135 L549 170 Z M556 170 L556 140 L580 140 L580 170 Z M583 170 L583 122 L601 122 L601 170 Z M604 170 L604 100 L631 100 L631 170 Z M640 170 L640 139 L665 139 L665 170 Z M671 170 L671 62 L707 62 L707 170 Z M711 170 L711 106 L732 106 L732 170 Z M719 106 L719 90 L723 90 L723 106 Z M741 170 L741 133 L777 133 L777 170 Z M757 133 L757 117 L761 117 L761 133 Z M781 170 L781 141 L793 141 L793 170 Z M803 170 L803 61 L820 61 L820 170 Z M830 170 L830 124 L858 124 L858 170 Z M863 170 L863 66 L888 66 L888 170 Z M897 170 L897 121 L922 121 L922 170 Z M907 121 L907 105 L911 105 L911 121 Z M934 170 L934 146 L955 146 L955 170 Z M942 146 L942 130 L946 130 L946 146 Z M964 170 L964 71 L1003 71 L1003 170 Z M1007 170 L1007 130 L1020 130 L1020 170 Z M1011 130 L1011 114 L1015 114 L1015 130 Z M1027 170 L1027 70 L1039 70 L1039 170 Z M1046 170 L1046 139 L1070 139 L1070 170 Z M1056 139 L1056 123 L1060 123 L1060 139 Z M1076 170 L1076 67 L1106 67 L1106 170 Z M1118 170 L1118 101 L1141 101 L1141 170 Z M1146 170 L1146 87 L1176 87 L1176 170 Z M1181 170 L1181 99 L1220 99 L1220 170 Z M1198 99 L1198 83 L1202 83 L1202 99 Z M1225 170 L1225 119 L1246 119 L1246 170 Z M1252 170 L1252 124 L1287 124 L1287 170 Z M1267 124 L1267 108 L1271 108 L1271 124 Z M1298 170 L1298 61 L1316 61 L1316 170 Z M1326 170 L1326 138 L1357 138 L1357 170 Z M1361 170 L1361 144 L1376 144 L1376 170 Z M1383 170 L1383 98 L1402 98 L1402 170 Z M1414 170 L1414 111 L1441 111 L1441 170 Z M1445 170 L1445 119 L1461 119 L1461 170 Z M1473 170 L1473 139 L1504 139 L1504 170 Z M1510 170 L1510 146 L1545 146 L1545 170 Z M1525 146 L1525 130 L1529 130 L1529 146 Z M1554 170 L1554 117 L1580 117 L1580 170 Z M1565 117 L1565 101 L1569 101 L1569 117 Z M1585 170 L1585 101 L1606 101 L1606 170 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x bottom / auto 130px;
}

.footer-wrap {
  position: relative;
  z-index: 1;
}

/* Orange rule under the column headings, as the deck sets its sub-heads. */
.footer-grid h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 0.6rem;
  background: var(--accent);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.72);
}

/* The white logo artwork needs no extra treatment on navy; the tagline carries the strapline. */
.footer-bottom {
  align-items: center;
}

/* Thank-you page after a registration goes through. */
.thanks {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 64px 0 170px;
  overflow: hidden;
}

.thanks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 170' width='1600' height='170'%3E%3Cpath d='M0 170 L0 77 L26 77 L26 170 Z M36 170 L36 83 L62 83 L62 170 Z M68 170 L68 83 L85 83 L85 170 Z M97 170 L97 125 L134 125 L134 170 Z M113 125 L113 109 L117 109 L117 125 Z M141 170 L141 137 L157 137 L157 170 Z M160 170 L160 98 L191 98 L191 170 Z M203 170 L203 128 L235 128 L235 170 Z M246 170 L246 141 L260 141 L260 170 Z M251 141 L251 125 L255 125 L255 141 Z M266 170 L266 145 L297 145 L297 170 Z M305 170 L305 73 L331 73 L331 170 Z M342 170 L342 67 L361 67 L361 170 Z M364 170 L364 138 L397 138 L397 170 Z M404 170 L404 78 L429 78 L429 170 Z M433 170 L433 116 L467 116 L467 170 Z M473 170 L473 112 L501 112 L501 170 Z M485 112 L485 96 L489 96 L489 112 Z M513 170 L513 135 L549 135 L549 170 Z M556 170 L556 140 L580 140 L580 170 Z M583 170 L583 122 L601 122 L601 170 Z M604 170 L604 100 L631 100 L631 170 Z M640 170 L640 139 L665 139 L665 170 Z M671 170 L671 62 L707 62 L707 170 Z M711 170 L711 106 L732 106 L732 170 Z M719 106 L719 90 L723 90 L723 106 Z M741 170 L741 133 L777 133 L777 170 Z M757 133 L757 117 L761 117 L761 133 Z M781 170 L781 141 L793 141 L793 170 Z M803 170 L803 61 L820 61 L820 170 Z M830 170 L830 124 L858 124 L858 170 Z M863 170 L863 66 L888 66 L888 170 Z M897 170 L897 121 L922 121 L922 170 Z M907 121 L907 105 L911 105 L911 121 Z M934 170 L934 146 L955 146 L955 170 Z M942 146 L942 130 L946 130 L946 146 Z M964 170 L964 71 L1003 71 L1003 170 Z M1007 170 L1007 130 L1020 130 L1020 170 Z M1011 130 L1011 114 L1015 114 L1015 130 Z M1027 170 L1027 70 L1039 70 L1039 170 Z M1046 170 L1046 139 L1070 139 L1070 170 Z M1056 139 L1056 123 L1060 123 L1060 139 Z M1076 170 L1076 67 L1106 67 L1106 170 Z M1118 170 L1118 101 L1141 101 L1141 170 Z M1146 170 L1146 87 L1176 87 L1176 170 Z M1181 170 L1181 99 L1220 99 L1220 170 Z M1198 99 L1198 83 L1202 83 L1202 99 Z M1225 170 L1225 119 L1246 119 L1246 170 Z M1252 170 L1252 124 L1287 124 L1287 170 Z M1267 124 L1267 108 L1271 108 L1271 124 Z M1298 170 L1298 61 L1316 61 L1316 170 Z M1326 170 L1326 138 L1357 138 L1357 170 Z M1361 170 L1361 144 L1376 144 L1376 170 Z M1383 170 L1383 98 L1402 98 L1402 170 Z M1414 170 L1414 111 L1441 111 L1441 170 Z M1445 170 L1445 119 L1461 119 L1461 170 Z M1473 170 L1473 139 L1504 139 L1504 170 Z M1510 170 L1510 146 L1545 146 L1545 170 Z M1525 146 L1525 130 L1529 130 L1529 146 Z M1554 170 L1554 117 L1580 117 L1580 170 Z M1565 117 L1565 101 L1569 101 L1569 117 Z M1585 170 L1585 101 L1606 101 L1606 170 Z' fill='%2300142e'/%3E%3C/svg%3E") repeat-x bottom / auto 130px;
}

.thanks-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}

.thanks-logo {
  display: inline-block;
  width: min(190px, 46vw);
  margin-bottom: 1.6rem;
}

.thanks h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  max-width: 16ch;
  margin-inline: auto;
}

.thanks h1 span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.thanks .section-title-center h1::after {
  content: "";
  display: block;
  width: min(220px, 60%);
  height: 13px;
  margin: 0.9rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C38 3 74 12 112 6 C142 1 168 9 197 4 L196 11 C168 15 142 8 112 12 C74 17 38 9 4 14 Z' fill='%23e23a01'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.thanks .section-title-center p:not(.section-label) {
  max-width: 46ch;
}

.thanks-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3rem 0 2.6rem;
  text-align: left;
}

.thanks-steps h2 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.thanks-steps p {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
}

.thanks-note {
  margin-top: 1.8rem;
  color: var(--text);
  font-size: 0.95rem;
}

.thanks-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .thanks {
    padding: 40px 0 150px;
  }

  .thanks-steps {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin: 2.2rem 0 2rem;
  }
}

/* ---------------------------------------------------------------
   Terms & Conditions
   --------------------------------------------------------------- */

.legal {
  position: relative;
  padding: 56px 0 120px;
  overflow: hidden;
}

.legal-wrap {
  max-width: 860px;
  position: relative;
  z-index: 1;
}

.legal-logo {
  display: inline-block;
  width: min(150px, 38vw);
  margin-bottom: 2rem;
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: none;
}

.legal h1 span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.legal-section {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  font-family: var(--headline);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  letter-spacing: 0.01em;
  color: var(--navy);
  margin-bottom: 1rem;
}

.legal-section ul {
  display: grid;
  gap: 1rem;
}

.legal-section li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text);
  line-height: 1.7;
}

/* A small vermilion marker instead of a bullet. */
.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

.legal-section li strong {
  color: var(--ink);
  font-weight: 400;
  font-family: var(--display);
  font-weight: 600;
}

.legal-actions {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.legal-contact {
  color: var(--text);
  font-size: 0.95rem;
}

.legal-contact a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .legal {
    padding: 36px 0 90px;
  }

  .legal-section {
    margin-top: 2rem;
  }
}

/* ---------------------------------------------------------------
   Registration help video, in the hero
   --------------------------------------------------------------- */

.hero-video {
  margin: 1.5rem 0 0;
  width: min(420px, 100%);
}

.hero-video[hidden] {
  display: none;
}

.hero-video-preview,
.hero-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(243, 233, 220, 0.22);
  border-radius: 14px;
  background: #05070d;
  box-shadow: 0 18px 40px rgba(6, 10, 20, 0.45);
}

.hero-video-preview {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.hero-video-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(6, 10, 20, 0.5);
  transition: transform 0.2s ease;
}

.hero-video-preview:hover .hero-video-play,
.hero-video-preview:focus-visible .hero-video-play {
  transform: scale(1.08);
}

.hero-video figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   Promo code: a plain text field, revealed only when a fee is set
   --------------------------------------------------------------- */

.promo-field[hidden] {
  display: none;
}

.field-optional {
  opacity: 0.6;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.promo-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.promo-row input {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.promo-apply {
  flex: none;
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
}

.promo-apply[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.promo-result {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  min-height: 1.1em;
}

.promo-result[data-state="ok"] {
  color: #1f7a3d;
  font-weight: 600;
}

.promo-result[data-state="error"] {
  color: var(--error);
}

/* ---------------------------------------------------------------
   Terms & Conditions popup, opened from the registration checkbox
   --------------------------------------------------------------- */

.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 16, 32, 0.72);
  backdrop-filter: blur(3px);
}

.terms-modal[hidden] {
  display: none;
}

.terms-modal-card {
  width: min(720px, 100%);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--card, #f3e9dc);
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 16, 32, 0.35);
  overflow: hidden;
}

.terms-modal-head {
  position: relative;
  padding: 1.3rem 1.6rem 1rem;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}

.terms-modal-head h2 {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.terms-modal-head h2 span {
  color: var(--accent);
}

.terms-modal-intro {
  margin: 0.6rem 2.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(13, 13, 13, 0.75);
}

.terms-modal-intro strong {
  color: var(--accent);
}

.terms-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.06);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.terms-modal-close:hover {
  background: var(--accent);
  color: #fff;
}

/* The scroller: reaching its end is what unlocks the agree button. */
.terms-modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1.6rem;
}

.terms-modal-body .legal-section {
  margin-bottom: 1.4rem;
}

.terms-modal-body h2 {
  margin: 0 0 0.5rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.terms-modal-body ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
}

.terms-modal-body li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(13, 13, 13, 0.8);
}

.terms-modal-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem 1.2rem;
  border-top: 1px solid rgba(13, 13, 13, 0.12);
}

.terms-modal-progress {
  flex: 1;
  display: grid;
  gap: 0.35rem;
  min-width: 8rem;
}

.terms-progress-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.12);
  overflow: hidden;
}

.terms-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.15s linear;
}

.terms-modal-hint {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(13, 13, 13, 0.6);
}

.terms-modal-card.is-read .terms-progress-fill {
  background: #1f7a3d;
}

.terms-modal-card.is-read .terms-modal-hint {
  color: #1f7a3d;
}

/* Floats just above the footer while there is still text below. */
.terms-jump {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6rem);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(10, 16, 32, 0.28);
  cursor: pointer;
}

.terms-jump[hidden] {
  display: none;
}

.terms-jump:hover {
  background: var(--accent);
}

.terms-modal-actions {
  display: flex;
  gap: 0.7rem;
}

.terms-modal-actions .btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 560px) {
  .terms-modal {
    padding: 0;
    align-items: stretch;
  }

  .terms-modal-card {
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .terms-modal-head,
  .terms-modal-body,
  .terms-modal-foot {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .terms-modal-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .terms-modal-actions {
    justify-content: space-between;
  }
}

/* The reCAPTCHA box keeps Google's fixed width; on narrow phones it is scaled
   rather than left to spill out of the form card. */
.recaptcha-field {
  min-height: 78px;
}

@media (max-width: 380px) {
  .recaptcha-field > div {
    transform: scale(0.88);
    transform-origin: left top;
  }
}