/* Fourwall holding page */

/* Fonts are self-hosted (assets/fonts): Inter Tight as one variable file covering weights 300-700,
   and Archivo Expanded Bold for the wordmark. Latin character set only, which covers £, – and ™. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/inter-tight-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-expanded-700-latin.woff2) format('woff2');
}

:root {
  --lime: #C8FF2E;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --hairline: rgba(255, 255, 255, 0.14);
  --muted: #8C8C8C;
  --body-dim: #BDBDBD;
  --ios-grey: #8E8E93;
  --ios-blue: #0A84FF;
  --ios-green: #30D158;
  --ios-orange: #FF9F0A;
  --ios-purple: #BF5AF2;
  --ios-pink: #FF375F;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: #000000;
  color: #FFFFFF;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

a { color: #FFFFFF; }
a:hover { color: #CFCFCF; }

.wrap { max-width: 1520px; margin: 0 auto; }

.wordmark {
  font-family: Archivo, sans-serif;
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section { padding: 160px 40px 0; }

.h2 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Shared motion */
@keyframes fwUp { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fwChar { 0% { opacity: 0; filter: blur(14px); transform: translateY(0.28em) rotateX(-70deg) scale(0.94); } 55% { filter: blur(0); } 100% { opacity: 1; filter: blur(0); transform: none; } }

.fw-in { animation: fwUp 1.1s var(--ease-out) backwards; }

.fw-glass {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000000;
}
.hero-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hero-par { z-index: 0; will-change: transform; }
/* Hero photos: matched photos revealed by a feathered sweep. Each slide is a frame (the sweep)
   holding an image (a slow drift in). The first photo is the background until the script runs. */
.hero-montage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07131D url(assets/hero/court-corridor.webp) center / cover;
}
/* The mask is three frames wide and three tall, graded corner to corner: opaque, a soft
   diagonal edge, then clear. At 0% 0% the frame sees only the opaque top-left corner of it
   (fully visible); at 100% 100% only the clear bottom-right, so the edge sweeps diagonally. */
.montage-frame {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom right, #000 44%, transparent 56%);
  mask-image: linear-gradient(to bottom right, #000 44%, transparent 56%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.montage-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hero-scrim {
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.6) 52%, rgba(0,0,0,0.25) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 35%);
}
.hero-fade { z-index: 1; background: #000000; opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .hero-scrim { background-image: linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.74)); }
}

/* Sticky header: full-width bar at the top, collapses into a pill once scrolled */
/* The bar never changes layout. When it collapses, only transforms and the
   width of an empty glass layer animate, all on one duration and easing, so the
   CTA's right edge stays locked to the pill's edge the whole way. */
.site-header {
  --pill-pad-l: 23px;
  --pill-pad-r: 6px;
  --pill-pad-y: 6px;
  --pill-gap: 20px;
  --pill-dur: .95s;
  --pill-ease: cubic-bezier(.7, 0, .2, 1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
  animation-delay: 0.05s;
}
.header-bg {
  position: absolute;
  left: var(--bg-x, 16px);
  top: var(--bg-y, 16px);
  height: var(--bg-h, 60px);
  width: var(--bg-w-full, calc(100% - 32px));
  border-radius: 999px;
  background: rgba(18,18,18,0.62);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  opacity: 0;
  will-change: width, opacity;
  /* Expanding: the glass stays while it widens, then fades once it is nearly full width */
  transition: width var(--pill-dur) var(--pill-ease), opacity .4s ease calc(var(--pill-dur) * .55);
}
.site-header.is-pill .header-bg {
  width: var(--bg-w-pill, auto);
  opacity: 1;
  /* Collapsing: the glass appears first, then narrows */
  transition: width var(--pill-dur) var(--pill-ease), opacity .45s ease;
}
.header-bar {
  position: relative;
  pointer-events: none;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand, .header-actions {
  pointer-events: auto;
  will-change: transform;
  transition: transform var(--pill-dur) var(--pill-ease);
}
.site-header.is-pill .brand { transform: translate3d(var(--brand-dx, 0px), 0, 0); }
.site-header.is-pill .header-actions { transform: translate3d(var(--actions-dx, 0px), 0, 0); }
/* Email drops out of the pill: fades before the slide starts, returns once the bar is nearly full width */
.header-actions .fw-link {
  transition: background-size .4s var(--ease-out), opacity .4s ease calc(var(--pill-dur) * .6), filter .4s ease calc(var(--pill-dur) * .6);
}
.site-header.is-pill .header-actions .fw-link {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transition: background-size .4s var(--ease-out), opacity .25s ease, filter .25s ease;
}
.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; color: #FFFFFF; text-decoration: none; }
.brand .wordmark { font-size: 22px; letter-spacing: 0.01em; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.header-ctas { display: flex; align-items: center; gap: 8px; }
.hero { padding-top: var(--header-h, 94px); }
@media (max-width: 1080px) {
  .header-actions .fw-link { display: none; }
}
/* Mobile: only the logo stays at the top (full-width pill); the CTAs move to the dock */
@media (max-width: 760px) {
  .header-bar { padding: 22px 24px; }
  .header-actions { display: none; }
}
@media (max-width: 480px) {
  .brand { gap: 10px; }
  .brand svg { width: 30px; height: 26px; }
  .brand .wordmark { font-size: 17px; }
}

/* CTA buttons: light for people planning a court, dark for builders. No movement on hover. */
.cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s, border-color .35s, color .35s;
}
.cta-light { background: #FFFFFF; color: #000000; border: 1px solid #FFFFFF; }
.cta-light:hover { background: #E6E6E6; border-color: #E6E6E6; color: #000000; }
.cta-dark {
  background: rgba(0,0,0,0.45);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.24);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.cta-dark:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.cta-lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.cta svg { flex: 0 0 auto; }

.fw-link {
  font-size: 16px;
  color: #E6E6E6;
  text-decoration: none;
  padding: 12px 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease-out);
}
.fw-link:hover { background-size: 100% 1px; color: #FFFFFF; }

.hero-main {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 48px 40px 64px;
}
.hero-main .wrap { width: 100%; display: flex; flex-direction: column; gap: 36px; }
.hero-kicker {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 14px;
  margin-bottom: -18px;
  animation-delay: 0.2s;
}
.hero-kicker-rule { width: 18px; height: 1px; background: rgba(255,255,255,0.5); }
.hero-kicker-dim { color: rgba(255,255,255,0.7); }

.hero-title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(52px, 7.4vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}
/* Phones: scale the headline with the screen so "The smarter way to" stays on one line */
@media (max-width: 600px) { .hero-title { font-size: clamp(38px, 11.2vw, 52px); } }
.fw-hl { display: block; perspective: 900px; }
.fw-word { display: inline-block; white-space: nowrap; }
.fw-ch { display: inline-block; transform-origin: 50% 100%; animation: fwChar 1.1s var(--ease-out) backwards; }

.hero-lede {
  margin: 4px 0 0;
  max-width: 32em;
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  animation-delay: 1.25s;
}
.hero-lede strong { font-weight: 600; color: #FFFFFF; }
.hero-lede sup { font-size: 0.5em; font-weight: 400; vertical-align: super; line-height: 0; margin-left: 1px; }

.fw-notify {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 0 0 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 24px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #000000;
  background: #FFFFFF;
  transition: color .45s var(--ease-io), box-shadow .45s;
}
.fw-notify::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--ease-io);
  z-index: -1;
}
.fw-notify:hover, .fw-notify:focus-visible {
  color: #FFFFFF;
  background-color: #000000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: color .45s var(--ease-io), box-shadow .45s, background-color 0s linear .55s;
}
.fw-notify:hover::before, .fw-notify:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.fw-arr { display: inline-flex; width: 18px; overflow: hidden; }
.fw-arr svg { flex: 0 0 18px; transform: translateX(-18px); transition: transform .6s var(--ease-io); }
.fw-notify:hover .fw-arr svg, .fw-notify:focus-visible .fw-arr svg { transform: translateX(0); }

/* How it works */
.how .wrap { display: flex; flex-direction: column; gap: 64px; }
.how .h2 { max-width: 14ch; }

.fw-steps { display: flex; gap: 20px; align-items: stretch; }
.fw-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  outline: none;
  transition: flex-grow .75s var(--ease-ios);
}
.fw-steps:hover .fw-step, .fw-steps:focus-within .fw-step { flex-grow: 0.8; }
.fw-steps .fw-step:hover, .fw-steps .fw-step:focus-visible { flex-grow: 2.1; }

.fw-step-vis {
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #141415 0%, #0B0B0C 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: box-shadow .7s var(--ease-ios);
}
.fw-step:hover .fw-step-vis {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 40px 80px rgba(0,0,0,0.6);
}
.fw-step:focus-visible .fw-step-vis {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 40px 80px rgba(0,0,0,0.6), 0 0 0 2px #FFFFFF;
}

.fw-step-cap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  min-height: 240px;
  padding: 4px 16px 0 4px;
}
.fw-step-cap > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fw-step-num { font-size: 14px; font-weight: 500; color: var(--ios-grey); }
.fw-step-cap h3 { margin: 0; font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; }
.fw-step-cap p { margin: 0; color: var(--body-dim); font-size: 16px; line-height: 1.6; max-width: 30em; }

@media (max-width: 900px) {
  .fw-steps { flex-direction: column; }
  .fw-step, .fw-steps:hover .fw-step, .fw-steps .fw-step:hover { flex-grow: 1; }
  .fw-step-vis { height: 380px; }
  .fw-step-cap { width: auto; min-height: 0; }
}

/* Step 1: project brief */
.fw-c1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fw-b-panel {
  width: 100%;
  max-width: 340px;
  background: #1C1C1E;
  border-radius: 22px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  transition: transform .75s var(--ease-ios), max-width .75s var(--ease-ios);
}
.fw-step:hover .fw-b-panel { transform: scale(1.04); max-width: 380px; }
.fw-b-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  padding-bottom: 10px;
  margin-bottom: 2px;
}
.fw-b-pill {
  font-size: 11px;
  font-weight: 500;
  color: #409CFF;
  background: rgba(10,132,255,0.18);
  border-radius: 999px;
  padding: 4px 10px;
}
.fw-b-row {
  --a: var(--ios-blue);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 0.5px solid #38383A;
  font-size: 15px;
  animation: fwRowIn 7s var(--ease-out) infinite;
}
.fw-b-k { color: var(--ios-grey); }
.fw-b-v { color: #FFFFFF; display: inline-flex; }
.fw-b-type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  border-right: 1px solid var(--a);
  padding-right: 2px;
  animation: fwType 7s steps(14, end) infinite;
}
@keyframes fwRowIn { 0% { opacity: .25; } 6%, 86% { opacity: 1; } 96%, 100% { opacity: .25; } }
@keyframes fwType {
  0% { max-width: 0; border-right-color: var(--a); }
  12% { max-width: 10em; border-right-color: var(--a); }
  16%, 86% { max-width: 10em; border-right-color: transparent; }
  96%, 100% { max-width: 0; border-right-color: transparent; }
}
.fw-b-send {
  margin-top: 14px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--ios-blue);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  animation: fwSend 7s ease infinite;
}
@keyframes fwSend { 0%, 40% { opacity: .25; } 50%, 86% { opacity: 1; } 96%, 100% { opacity: .25; } }
.fw-b-toast {
  position: absolute;
  left: 50%;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 12px;
  border-radius: 20px;
  background: rgba(58,58,60,0.82);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -160%);
  transition: opacity .45s, transform .75s var(--ease-ios);
}
.fw-step:hover .fw-b-toast { opacity: 1; transform: translate(-50%, 0); }
.fw-b-toast svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--ios-blue); color: #FFFFFF; }

/* Step 2: builder list */
.fw-c2 { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 22px 0; }
.fw-c-head, .fw-c-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0fr 0fr auto;
  align-items: center;
  gap: 0;
  transition: grid-template-columns .8s var(--ease-out), gap .8s;
}
.fw-step:hover .fw-c-head, .fw-step:hover .fw-c-row { grid-template-columns: minmax(0, 1fr) 90px 80px auto; gap: 12px; }
.fw-c-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ios-grey);
  padding: 0 12px 8px;
}
.fw-c-col { overflow: hidden; white-space: nowrap; font-size: 13px; color: #D1D1D6; opacity: 0; transition: opacity .4s; }
.fw-c-head .fw-c-col { font-size: 12px; color: var(--ios-grey); }
.fw-step:hover .fw-c-col { opacity: 1; transition: opacity .5s .25s; }
.fw-c-win {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
}
.fw-c-list { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; animation: fwList 16s linear infinite; }
.fw-step:hover .fw-c-list { animation-duration: 26s; }
.fw-step.is-offscreen *, .fw-step.is-offscreen *::before, .fw-step.is-offscreen *::after { animation-play-state: paused !important; }
@keyframes fwList { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
.fw-c-row { background: #1C1C1E; border-radius: 18px; padding: 12px 14px; }
.fw-c-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fw-c-id > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fw-c-av {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}
.fw-c-row:nth-child(5n+1) .fw-c-av { background: var(--ios-blue); }
.fw-c-row:nth-child(5n+2) .fw-c-av { background: var(--ios-green); }
.fw-c-row:nth-child(5n+3) .fw-c-av { background: var(--ios-orange); }
.fw-c-row:nth-child(5n+4) .fw-c-av { background: var(--ios-purple); }
.fw-c-row:nth-child(5n) .fw-c-av { background: var(--ios-pink); }
.fw-c-name { font-size: 15px; color: #FFFFFF; }
.fw-c-meta { font-size: 12px; color: var(--ios-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-c-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ios-green); margin-left: 10px; }

/* Step 3: matched quotes */
.fw-c3 { position: absolute; inset: 0; overflow: hidden; }
.fw-q-rings { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.fw-q-rings > span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 1s var(--ease-out);
}
.fw-step:hover .fw-q-rings > span { transform: translate(-50%, -50%) scale(1.12); }
.fw-q-rings > span:nth-child(1) { animation: fwRing 3.2s ease-out infinite; }
@keyframes fwRing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.14); } 100% { box-shadow: 0 0 0 46px rgba(255,255,255,0); } }
.fw-q-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  border-radius: 26px;
  background: #000000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 18px 40px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .8s var(--ease-out);
}
.fw-step:hover .fw-q-core { transform: scale(1.15); }
.fw-q-orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: fwSpin 22s linear infinite; }
.fw-step:hover .fw-q-orbit { animation-duration: 12s; }
.fw-q-arm { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.fw-q-chip { position: absolute; top: -115px; left: 0; width: 0; height: 0; }
.fw-q-chip-in {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(58,58,60,0.92);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  animation: fwSpinRev 22s linear infinite;
}
.fw-step:hover .fw-q-chip-in { animation-duration: 12s; }
.fw-q-arm:nth-child(1) .fw-q-chip-in svg { color: var(--ios-blue); }
.fw-q-arm:nth-child(2) .fw-q-chip-in svg { color: var(--ios-green); }
.fw-q-arm:nth-child(3) .fw-q-chip-in svg { color: var(--ios-orange); }
@keyframes fwSpin { to { transform: rotate(360deg); } }
@keyframes fwSpinRev { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.fw-q-lab {
  position: absolute;
  font-size: 12px;
  color: var(--ios-grey);
  background: #0B0B0C;
  border: 1px solid #2C2C2E;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  animation: fwFloat 6s ease-in-out infinite;
}
.fw-q-lab:nth-of-type(2n) { animation-delay: -3s; }
@keyframes fwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fw-q-sum {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(28,28,30,0.9);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s, transform .8s var(--ease-out);
}
.fw-step:hover .fw-q-sum { opacity: 1; transform: none; }
.fw-q-sum span:first-child { font-size: 13px; color: var(--ios-grey); }
.fw-q-sum span:last-child { font-size: 17px; color: #FFFFFF; }

/* Cost guide */
.costs .wrap { display: flex; flex-direction: column; gap: 56px; }
.costs-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; }
.costs-head > div { display: flex; flex-direction: column; gap: 18px; }
.costs-head .eyebrow { color: var(--muted); }
.costs-head .h2 { max-width: 13ch; }
.costs-head p { margin: 0; max-width: 30em; color: var(--body-dim); }
.costs-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }

.calc {
  flex: 1 1 560px;
  min-width: 0;
  border-radius: 28px;
  background: #F5F5F7;
  color: #1D1D1F;
  padding: clamp(28px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.calc-group { display: flex; flex-direction: column; gap: 14px; }
.calc-label { font-size: 14px; color: #6E6E73; }
.calc-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #E8E8ED;
  align-self: flex-start;
}
.calc-seg button {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: #6E6E73;
  border: 1px solid transparent;
  transition: background-color .4s, color .4s;
}
.calc-seg button[aria-pressed="true"] {
  background: #FFFFFF;
  color: #1D1D1F;
  border-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.calc-courts { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.calc-stepper { display: inline-flex; align-items: center; gap: 6px; background: #E8E8ED; border-radius: 999px; padding: 6px; }
.calc-stepper button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #FFFFFF;
  color: #1D1D1F;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.calc-count { min-width: 44px; text-align: center; font-weight: 300; font-size: 26px; letter-spacing: -0.02em; }
.calc-icons { display: flex; flex-wrap: wrap; }
.fw-court-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  color: #C7C7CC;
  transition: color .4s, transform .5s var(--ease-out);
}
.fw-court-ic.is-on { color: #1D1D1F; transform: translateY(-2px); }
.fw-court-ic:hover { transform: translateY(-3px) scale(1.08); }
.fw-court-ic:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 2px; }
.calc-rule { height: 1px; background: #D2D2D7; }
.calc-result { display: flex; flex-direction: column; gap: 18px; }
.calc-range { font-weight: 300; font-size: clamp(48px, 6vw, 96px); line-height: 0.95; letter-spacing: -0.05em; color: #1D1D1F; }
.calc-scale { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.calc-track { position: relative; height: 8px; border-radius: 999px; background: #E5E5EA; overflow: hidden; }
.calc-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: #1D1D1F;
  transition: left .7s var(--ease-out), width .7s var(--ease-out);
}
.calc-ticks { display: flex; justify-content: space-between; font-size: 13px; color: #86868B; }
.calc-note { font-size: 15px; color: #6E6E73; max-width: 34em; }

.cost-photo {
  position: relative;
  isolation: isolate;
  flex: 1 1 420px;
  min-width: 0;
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background-color: #0A0A0A;
}
.cost-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: 52% 55% / cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}
.cost-photo.is-near::before { background-image: url(assets/photos/player-courtside-1600.webp); }
.cost-photo:hover::before { transform: scale(1.06); }
.cost-tag { align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 13px; }
.cost-res {
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0,0,0,0.58);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
}
.cost-res span:first-child { font-size: 13px; color: rgba(255,255,255,0.65); }
.cost-res span:last-child { font-size: 20px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; }

/* Stats */
.stats { margin-top: 160px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stats .wrap { padding: 72px 40px 56px; display: flex; flex-direction: column; gap: 40px; }
.stats-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 24px; }
.stat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--hairline); padding-left: clamp(24px, 3vw, 56px); }
.stat-num {
  display: inline-flex;
  align-items: flex-end;
  font-size: clamp(52px, 5.4vw, 92px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-label { font-size: 16px; color: rgba(255,255,255,0.7); }

.fw-odo { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.fw-odo-col { display: flex; flex-direction: column; transform: translateY(var(--to)); animation: fwOdo 2.4s var(--ease-out) both; }
.fw-odo-col > span { display: block; height: 1em; line-height: 1; }
@keyframes fwOdo {
  0% { transform: translateY(0); filter: blur(0); }
  25% { filter: blur(2.5px); }
  70% { filter: blur(0); }
  100% { transform: translateY(var(--to)); filter: blur(0); }
}
.fw-odo-sym { display: inline-block; animation: fwUp 0.9s var(--ease-out) both; }
.stats .fw-odo-col, .stats .fw-odo-sym { animation-play-state: paused; }
.stats.is-in .fw-odo-col, .stats.is-in .fw-odo-sym { animation-play-state: running; }

/* Audiences: the whole card opens its sign-up modal */
.audiences .wrap { display: flex; flex-wrap: wrap; gap: 24px; }
.aud {
  position: relative;
  flex: 1 1 460px;
  min-width: 0;
  min-height: 440px;
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: background-color .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .8s var(--ease-out);
}
.aud-dark { background: #161616; border: 1px solid #262626; }
.aud-light { background: #FFFFFF; color: #000000; }
.aud-dark:hover { background: #1A1A1A; border-color: #3A3A3A; box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.aud-light:hover { box-shadow: 0 0 0 6px rgba(255,255,255,0.12), 0 40px 90px rgba(255,255,255,0.08); }
.aud-media {
  height: 320px;
  border-radius: 18px;
  margin: -24px -24px 12px;
  overflow: hidden;
  background-color: #1A1A1A;
}
.aud-img {
  height: 100%;
  background-size: cover;
  transform: scale(1.01);
  transition: transform 1.4s var(--ease-out);
}
.aud:hover .aud-img { transform: scale(1.07); }
.aud-img-clubs.is-near { background-image: url(assets/photos/audience-clubs-1600.webp); background-position: 55% 50%; }
.aud-img-builders.is-near { background-image: url(assets/photos/court-corridor-1600.webp); background-position: 50% 55%; }
.aud-kicker { font-size: 15px; font-weight: 600; }
.aud-dark .aud-kicker { color: var(--muted); }
.aud-light .aud-kicker { color: #555555; }
.aud h2 { margin: 0; font-weight: 300; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.04em; }
.aud p { margin: 0; flex-grow: 1; max-width: 28em; }
.aud-dark p { color: var(--body-dim); }
.aud-light p { color: #444444; }
.aud-cta {
  align-self: flex-start;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 0 28px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  transition: background-color .4s, color .4s;
}
/* Stretch the button's hit area over the whole card */
.aud-cta::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.aud-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.aud-dark .aud-cta { background: #FFFFFF; color: #000000; }
.aud-dark .aud-cta:focus-visible { outline-color: #FFFFFF; }
.aud-light .aud-cta { background: #000000; color: #FFFFFF; }
.aud-light .aud-cta:focus-visible { outline-color: #000000; }
.aud:hover .fw-arr svg, .aud-cta:focus-visible .fw-arr svg { transform: translateX(0); }

/* Promise */
.promise { padding-bottom: 160px; }
.promise .wrap { display: flex; flex-direction: column; gap: 32px; }
.promise-line { margin: 0; font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.04em; max-width: 18ch; }
.promise-sub { margin: 0; font-size: 20px; color: var(--muted); max-width: 32em; }

/* Photo gallery: an endless right-to-left drift. The set is repeated once and the track slides
   exactly half its width, so the loop never shows a seam. */
.gallery {
  --g-h: clamp(260px, 30vw, 480px);
  --g-gap: clamp(12px, 1.4vw, 20px);
  padding-bottom: 140px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gallery-track { display: flex; width: max-content; animation: galleryDrift 80s linear infinite; }
.gallery-set { display: flex; gap: var(--g-gap); margin: 0; padding: 0 var(--g-gap) 0 0; list-style: none; }
.gallery-item {
  height: var(--g-h);
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  overflow: hidden;
  background: #111111;
}
.gallery-item.is-tall { aspect-ratio: 4 / 5; }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.07); }
@keyframes galleryDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .gallery { padding-bottom: 96px; }
  .gallery-track { animation-duration: 55s; }
  .gallery-item { border-radius: 18px; }
}
.fw-fill {
  color: transparent;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 44%, #4A4A4A 56%, #4A4A4A 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: fwFill 9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.fw-fill:nth-child(2) { animation-delay: 3s; }
.fw-fill:nth-child(3) { animation-delay: 6s; }
@keyframes fwFill { 0% { background-position: 100% 0; } 9% { background-position: 0% 0; } 31% { background-position: 0% 0; } 38%, 100% { background-position: 100% 0; } }

/* Footer */
.site-footer { border-top: 1px solid #262626; }
.site-footer .wrap {
  max-width: none;
  padding: 40px 100px 40px 40px; /* right side clears the back-to-top button */
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .wordmark { font-size: 16px; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--muted); }

/* Hero CTAs */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; animation-delay: 1.45s; }
/* Phones get the same two CTAs in the dock */
@media (max-width: 760px) { .hero-ctas { display: none; } }

/* Section headings that reveal letter by letter, like the hero title, once scrolled into view */
[data-reveal] .fw-reveal-inner { display: block; perspective: 900px; }
[data-reveal] .fw-ch { animation-play-state: paused; }
[data-reveal].is-in .fw-ch { animation-play-state: running; }

/* FAQ */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.faq-head { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.faq-head .eyebrow { color: var(--muted); }
.faq-head .h2 { max-width: 12ch; }
.faq-list { border-top: 1px solid #262626; }
.faq-item { border-bottom: 1px solid #262626; box-sizing: border-box; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .8s var(--ease-out), background-color .5s ease, border-color .5s ease, color .5s ease;
}
.faq-item summary:hover .faq-icon { border-color: #666666; }
.faq-item[open]:not(.is-closing) .faq-icon { transform: rotate(135deg); background: #FFFFFF; border-color: #FFFFFF; color: #000000; }
.faq-item p { margin: 0; padding: 0 64px 32px 0; color: var(--body-dim); font-size: 17px; line-height: 1.65; max-width: 44em; }
@media (max-width: 900px) {
  .faq .wrap { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .faq-item p { padding-right: 0; }
}

/* Modals: native <dialog>, centred card on desktop, bottom sheet on phones */
html.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  color: #FFFFFF;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  overscroll-behavior: contain;
}
.modal[open] { display: flex; align-items: center; justify-content: center; animation: modalFade .4s ease both; }
.modal::backdrop { background: transparent; }
.modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(780px, calc(100dvh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  /* One row capped at the card's height, so a long form scrolls inside the body */
  grid-template-rows: minmax(0, 1fr);
  border-radius: 32px;
  overflow: hidden;
  background: #0E0E10;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 50px 120px rgba(0,0,0,0.7);
}
.modal[open] .modal-card { animation: modalIn .7s var(--ease-out) both; }
.modal-card:focus { outline: none; }
.modal.is-closing { animation: modalFade .32s ease reverse both; }
.modal.is-closing .modal-card { animation: modalOut .32s ease both; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(32px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .3s, transform .5s var(--ease-out);
}
.modal-close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* On desktop the close button sits over the light form panel */
@media (min-width: 761px) {
  .modal-close { background: #F5F5F7; border-color: #E5E5EA; color: #1D1D1F; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-close:hover { background: #E8E8ED; }
  .modal-close:focus-visible { outline-color: #1D1D1F; }
}

.modal-media {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  background-color: #1A1A1A;
  background-size: cover;
}
.modal-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.88) 100%);
}
.modal-media-join { background-image: url(assets/photos/audience-clubs-1600.webp); background-position: 55% 50%; }
.modal-media-claim { background-image: url(assets/photos/court-corridor-1600.webp); background-position: 50% 55%; }
.modal-media .eyebrow { color: rgba(255,255,255,0.75); }
/* "As listed on Fourwall" badges (assets/badges/), the PNGs builders can put on their own
   sites. Pinned to the top of the photo panel; margin-bottom: auto pushes the copy to the foot. */
.listed-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: auto; padding-bottom: 32px; }
.listed-badges img { display: block; width: 188px; height: auto; }
.listed-badges-note { margin: 4px 0 0; max-width: 22em; font-size: 13px; line-height: 1.45; color: #FFFFFF; }
.modal-media h2 { margin: 10px 0 0; font-weight: 300; font-size: clamp(34px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.04em; }
.modal-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.modal-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.88); }
.modal-points svg { flex: 0 0 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--lime); color: #000000; box-sizing: border-box; }

/* Form panel: light mode, against the dark photo panel */
.modal-body { overflow-y: auto; padding: 40px; overscroll-behavior: contain; background: #FFFFFF; color: #1D1D1F; color-scheme: light; }
.modal-form { display: flex; flex-direction: column; gap: 22px; }
.modal-intro { margin: 0; padding-right: 48px; font-size: 17px; line-height: 1.5; color: #6E6E73; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-size: 14px; font-weight: 500; color: #1D1D1F; }
/* A legend isn't a flex item, so the field's gap doesn't reach it */
.field > legend { margin-bottom: 14px; }
.field .opt { color: #86868B; font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"] {
  min-height: 52px;
  width: 100%;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid #D2D2D7;
  background: #F5F5F7;
  color: #1D1D1F;
  font: inherit;
  font-size: 16px;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.field input::placeholder { color: #8E8E93; }
.field input:not([type="checkbox"]):hover { border-color: #AEAEB2; }
.field input:not([type="checkbox"]):focus { outline: none; border-color: #1D1D1F; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(0,0,0,0.07); }
/* Errors: a deep, muted crimson rather than alarm red, with a soft rose tint on the field */
.field.has-error input:not([type="checkbox"]) { border-color: #DDB3BA; background: #FDF7F8; box-shadow: 0 0 0 4px rgba(158, 35, 56, 0.06); }
.field.has-error input:not([type="checkbox"]):focus { border-color: #9E2338; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(158, 35, 56, 0.09); }
.field-error, .form-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #9E2338;
  animation: errIn .45s var(--ease-out) both;
}
.field-error::before, .form-error::before {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 0 1 1.25 1.25v4.5a1.25 1.25 0 0 1-2.5 0v-4.5A1.25 1.25 0 0 1 12 7Zm0 9.25a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 0 1 1.25 1.25v4.5a1.25 1.25 0 0 1-2.5 0v-4.5A1.25 1.25 0 0 1 12 7Zm0 9.25a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.field-error:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #D2D2D7;
  background: #FFFFFF;
  font-size: 15px;
  color: #1D1D1F;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.chip span:hover { border-color: #86868B; }
.chip input:checked + span { background: #1D1D1F; border-color: #1D1D1F; color: #FFFFFF; }
.chip input:focus-visible + span { outline: 2px solid #1D1D1F; outline-offset: 2px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #424245; cursor: pointer; }
.consent input {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 7px;
  border: 1.5px solid #AEAEB2;
  background: #FFFFFF center / 14px 14px no-repeat;
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.consent input:hover { border-color: #6E6E73; }
.consent input:checked {
  background-color: var(--lime);
  border-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7.5'/%3E%3C/svg%3E");
}
.consent input:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 2px; }
.field.has-error .consent input { border-color: #9E2338; }
.modal-submit { width: 100%; justify-content: center; min-height: 56px; font-size: 16px; }
.modal-submit[disabled] { opacity: .6; cursor: progress; }
/* The submit is the page's white "Notify me" button inverted: black, filling to dark grey on hover */
.modal-body .fw-notify { color: #FFFFFF; background: #1D1D1F; }
.modal-body .fw-notify::before { background: #3A3A3C; }
.modal-body .fw-notify:hover, .modal-body .fw-notify:focus-visible { color: #FFFFFF; background-color: #3A3A3C; box-shadow: none; }
.modal-body .fw-notify:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 3px; }
.form-error { margin: 0; padding: 12px 14px; border-radius: 14px; background: #FDF7F8; border: 1px solid #F0D5DA; font-size: 14px; }
.form-error:empty { display: none; }

.modal-done { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px 0; }
.modal-done:focus { outline: none; }
.modal-done-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--lime); color: #000000; display: inline-flex; align-items: center; justify-content: center; animation: modalIn .7s var(--ease-out) both; }
.modal-done h3 { margin: 8px 0 0; font-weight: 300; font-size: 36px; letter-spacing: -0.03em; line-height: 1.05; color: #1D1D1F; }
.modal-done p { margin: 0; color: #6E6E73; max-width: 26em; }
.modal-done .cta { align-self: flex-start; margin-top: 8px; background: #1D1D1F; border-color: #1D1D1F; color: #FFFFFF; }
.modal-done .cta:hover { background: #3A3A3C; border-color: #3A3A3C; }
.modal-done .cta:focus-visible { outline-color: #1D1D1F; }

@media (max-width: 760px) {
  .modal { padding: 0; }
  .modal[open] { align-items: flex-end; }
  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 28px 28px 0 0;
  }
  .modal[open] .modal-card { animation: sheetIn .6s var(--ease-ios) backwards; }
  .modal.is-closing .modal-card { animation: sheetOut .32s ease-in both; }
  .modal-media { min-height: 168px; padding: 24px 20px 20px; }
  .modal-media::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: rgba(255,255,255,0.5); }
  .modal-media h2 { font-size: 34px; }
  /* Badges are desktop-only; on phones the photo header stays short */
  .listed-badges { display: none; }
  .listed-badges img { width: 138px; }
  .modal-points { display: none; }
  .modal-body { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .modal-intro { padding-right: 0; font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetOut { to { transform: translateY(100%); } }

/* Mobile dock: the two CTAs fixed to the bottom of the screen */
.dock { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(18,18,18,0.7);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    animation: fwUp 1s var(--ease-out) 1.6s backwards;
  }
  .dock .cta { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 12px; font-size: 15px; }
  .dock .cta-dark { background: #000000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(18,18,18,0.7);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s, background-color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s, background-color .3s; }
.to-top:hover { background: rgba(255,255,255,0.14); }
.to-top:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.to-top svg { transition: transform .5s var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }
@media (max-width: 760px) {
  .to-top { right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
}

/* Footer links */
.consent a { color: inherit; text-underline-offset: 2px; }
.modal-form .hp { display: none !important; }
.form-error-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Legal pages (privacy policy): a quiet header, one readable column, the site footer */
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 40px; }
.legal-back { font-size: 15px; color: var(--muted); text-underline-offset: 3px; }
.legal { max-width: 1520px; margin: 0 auto; padding: 96px 40px 160px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.legal-head { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 48px; }
.legal-head .eyebrow { color: var(--muted); }
.legal-updated { margin: 0; font-size: 15px; color: var(--muted); }
.legal-body { max-width: 44em; color: var(--body-dim); font-size: 17px; line-height: 1.7; }
.legal-body > :first-child { margin-top: 0; }
.legal-lede { font-size: 21px; line-height: 1.55; color: #FFFFFF; }
.legal-body h2 { margin: 56px 0 16px; padding-top: 32px; border-top: 1px solid #262626; font-size: clamp(22px, 2vw, 28px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; color: #FFFFFF; }
.legal-body h3 { margin: 28px 0 6px; font-size: 17px; font-weight: 600; color: #FFFFFF; }
.legal-body p, .legal-body ul { margin: 0 0 16px; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { font-weight: 500; color: #FFFFFF; }
.legal-body a { text-underline-offset: 3px; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 96px; }
  .legal-head { position: static; }
}
@media (max-width: 600px) {
  .legal-header { padding: 20px 16px; }
  .legal { padding-left: 16px; padding-right: 16px; }
}

/* 404 page: the message fills the space between header and footer */
.page-404 { display: flex; flex-direction: column; }
.notfound { flex-grow: 1; width: 100%; max-width: 1520px; margin: 0 auto; padding: 96px 40px 160px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; }
.notfound .eyebrow { color: var(--muted); }
.notfound-title { margin: 0; max-width: 11em; font-weight: 300; font-size: clamp(52px, 7.4vw, 132px); line-height: 0.96; letter-spacing: -0.05em; }
.notfound-lede { margin: 0; max-width: 32em; font-size: clamp(18px, 1.45vw, 21px); font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.86); }
.notfound-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.notfound-help { margin: 0; font-size: 15px; color: var(--muted); }
.notfound-help a { text-underline-offset: 3px; }
@media (max-width: 600px) {
  .notfound { padding: 48px 16px 96px; }
  .notfound-title { font-size: clamp(38px, 11.2vw, 52px); }
}

.footer-meta button.footer-link { padding: 0; border: 0; background: none; font: inherit; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 600px) {
  .section, .hero-main { padding-left: 16px; padding-right: 16px; }
  .stats .wrap, .site-footer .wrap { padding-left: 16px; padding-right: 16px; }
  .aud { padding: 32px; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .calc { padding: 28px 20px; }
  .calc-seg { flex-wrap: nowrap; align-self: stretch; }
  .calc-seg button { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 15px; white-space: nowrap; }
  .calc-icons { flex-wrap: nowrap; width: 100%; }
  .fw-court-ic { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-in, .fw-ch, .fw-odo-col, .fw-odo-sym,
  .fw-b-row, .fw-b-type, .fw-b-send, .fw-c-list, .fw-q-orbit, .fw-q-chip-in, .fw-q-lab, .fw-q-rings > span {
    animation: none !important;
  }
  .fw-in, .fw-ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .fw-b-type { max-width: none; border-right: 0; }
  .header-bg, .brand, .header-actions { transition: none !important; }
  .modal[open], .modal[open] .modal-card, .modal.is-closing, .modal.is-closing .modal-card, .dock, .modal-done-icon { animation: none !important; }
  .aud-img, .to-top, .faq-icon { transition: none !important; }
  .gallery { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .gallery-track { animation: none; padding: 0 16px; }
  .gallery-set[aria-hidden] { display: none; }
  .gallery-item { scroll-snap-align: center; }
  .gallery-item img { transition: none; }
  .field-error, .form-error { animation: none !important; }
  .fw-fill { animation: none; background-position: 0% 0; }
}