body.start-page {
  --start-hero-image: url("start-hero-light.png");
  --start-intake-image: url("start-intake-light.png");
  --start-art-blend: multiply;
  --start-hero-opacity: 0.64;
  --start-section-opacity: 0.2;
  --start-form-opacity: 0.14;
  --start-trace-line: rgba(169, 78, 44, 0.28);
  --start-trace-soft: rgba(95, 122, 79, 0.18);
}

:root[data-theme="dark"] body.start-page {
  --start-hero-image: url("start-hero-dark.png");
  --start-intake-image: url("start-intake-dark.png");
  --start-art-blend: screen;
  --start-hero-opacity: 0.72;
  --start-section-opacity: 0.26;
  --start-form-opacity: 0.18;
  --start-trace-line: rgba(126, 227, 245, 0.24);
  --start-trace-soft: rgba(255, 181, 71, 0.2);
}

body.start-page main {
  overflow: clip;
}

body.start-page .start-hero {
  min-height: clamp(560px, 76vh, 780px);
  padding-bottom: clamp(70px, 8vh, 112px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 28%, color-mix(in oklab, var(--amber) 10%, transparent), transparent 34%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink) 74%, color-mix(in oklab, var(--ink) 88%, var(--ink-2)) 100%);
}

body.start-page .start-hero::before,
body.start-page .start-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.start-page .start-hero::before {
  z-index: 1;
  inset: 54px -8vw -84px 28vw;
  background-image: var(--start-hero-image);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.94) contrast(0.98);
  mix-blend-mode: var(--start-art-blend);
  opacity: var(--start-hero-opacity);
  transform: translate3d(0, 0, 0) scale(1.01);
  animation: start-hero-drift 22s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, #000 38%, rgba(0, 0, 0, 0.58) 58%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, #000 38%, rgba(0, 0, 0, 0.58) 58%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
}

body.start-page .start-hero::after {
  z-index: 2;
  top: 20%;
  right: max(22px, 4vw);
  width: min(54vw, 740px);
  height: min(42vh, 380px);
  background:
    linear-gradient(112deg, transparent 0 42%, var(--start-trace-line) 43%, transparent 45% 100%),
    linear-gradient(152deg, transparent 0 56%, var(--start-trace-soft) 57%, transparent 59% 100%),
    radial-gradient(circle at 72% 48%, color-mix(in oklab, var(--amber) 34%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 62%, color-mix(in oklab, var(--paper) 22%, transparent) 0 2px, transparent 3px);
  background-size: 180% 100%, 160% 100%, 100% 100%, 100% 100%;
  opacity: 0.42;
  mix-blend-mode: var(--start-art-blend);
  transform: translate3d(0, 0, 0);
  animation: start-trace-sweep 16s ease-in-out infinite alternate;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
}

body.start-page .start-hero .grid-bg {
  z-index: 0;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse at 46% 42%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 46% 42%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 78%);
}

body.start-page .start-hero .hero-inner {
  z-index: 3;
}

body.start-page .start-hero .display {
  max-width: 9.5ch;
  text-shadow: 0 18px 48px color-mix(in oklab, var(--ink) 72%, transparent);
}

body.start-page .start-hero .lead {
  max-width: min(58ch, 62vw);
}

body.start-page .start-hero .hero-meta {
  max-width: min(860px, 100%);
}

body.start-page .start-hero .hero-meta .mono {
  flex: 1 1 20rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.start-page .start-intake-section {
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(82px, 9vw, 132px);
}

body.start-page .start-intake-section::before,
body.start-page .start-intake-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.start-page .start-intake-section::before {
  z-index: 0;
  inset: 20px -10vw auto 46%;
  height: min(690px, 58vw);
  background-image: var(--start-intake-image);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.92) contrast(0.98);
  mix-blend-mode: var(--start-art-blend);
  opacity: var(--start-section-opacity);
  transform: translate3d(0, 0, 0) scale(1.01);
  animation: start-section-drift 24s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 72% 34%, #000 0%, rgba(0, 0, 0, 0.54) 44%, rgba(0, 0, 0, 0.16) 68%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 72% 34%, #000 0%, rgba(0, 0, 0, 0.54) 44%, rgba(0, 0, 0, 0.16) 68%, transparent 86%);
}

body.start-page .start-intake-section::after {
  z-index: 1;
  top: clamp(46px, 6vw, 82px);
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--start-trace-line), var(--start-trace-soft), transparent);
  opacity: 0.62;
}

body.start-page .start-intake-section .wrap {
  position: relative;
  z-index: 2;
}

body.start-page .intake {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in oklab, var(--line) 72%, var(--start-trace-line));
  box-shadow:
    0 32px 90px -76px color-mix(in oklab, var(--paper) 44%, transparent),
    inset 0 1px 0 color-mix(in oklab, var(--paper) 8%, transparent);
}

body.start-page .intake::before,
body.start-page .intake::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.start-page .intake::before {
  z-index: 0;
  inset: -18% -16% auto 42%;
  height: min(620px, 58vw);
  background-image: var(--start-intake-image);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.92) contrast(0.98);
  mix-blend-mode: var(--start-art-blend);
  opacity: var(--start-form-opacity);
  transform: translate3d(16px, 0, 0) scale(1.02);
  transition: opacity 0.5s ease, transform 0.7s ease;
  mask-image: radial-gradient(ellipse at 70% 42%, #000 0%, rgba(0, 0, 0, 0.56) 46%, rgba(0, 0, 0, 0.16) 70%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 42%, #000 0%, rgba(0, 0, 0, 0.56) 46%, rgba(0, 0, 0, 0.16) 70%, transparent 88%);
}

body.start-page .intake::after {
  z-index: 1;
  top: 0;
  right: 0;
  width: min(620px, 54vw);
  height: 100%;
  background:
    linear-gradient(112deg, transparent 0 42%, var(--start-trace-line) 43%, transparent 45% 100%),
    linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--paper) 10%, transparent) 48%, transparent 49% 100%);
  background-size: 170% 100%, 100% 96px;
  opacity: 0.18;
  mix-blend-mode: var(--start-art-blend);
  transform: translateX(8%);
  animation: start-trace-sweep 18s ease-in-out infinite alternate;
}

body.start-page .intake:focus-within::before {
  opacity: calc(var(--start-form-opacity) + 0.08);
  transform: translate3d(0, 0, 0) scale(1.03);
}

body.start-page .form-body,
body.start-page .sent {
  position: relative;
  z-index: 2;
}

body.start-page .choice,
body.start-page .fld input,
body.start-page .fld textarea {
  transition: border-color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
}

body.start-page footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.start-page footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -10vw -18% 48%;
  height: min(560px, 48vw);
  background-image: var(--start-intake-image);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.92) contrast(0.98);
  mix-blend-mode: var(--start-art-blend);
  opacity: 0.14;
  pointer-events: none;
  animation: start-section-drift 26s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 72% 60%, #000 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.12) 66%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 72% 60%, #000 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0.12) 66%, transparent 86%);
}

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

@keyframes start-hero-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.01);
  }

  to {
    transform: translate3d(18px, -8px, 0) scale(1.035);
  }
}

@keyframes start-section-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.01);
  }

  to {
    transform: translate3d(-14px, 10px, 0) scale(1.03);
  }
}

@keyframes start-trace-sweep {
  from {
    background-position: 0% 0%, 18% 0%, 0 0, 0 0;
  }

  to {
    background-position: 18% 0%, 0% 0%, 0 0, 0 0;
  }
}

@media (max-width: 900px) {
  body.start-page .start-hero {
    min-height: 620px;
    padding-top: 124px;
    padding-bottom: 72px;
  }

  body.start-page .start-hero::before {
    inset: 86px -72vw auto 4vw;
    height: 440px;
    opacity: 0.48;
    mask-image: radial-gradient(ellipse at 70% 48%, #000 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.14) 64%, transparent 84%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 48%, #000 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.14) 64%, transparent 84%);
  }

  :root[data-theme="dark"] body.start-page .start-hero::before {
    opacity: 0.58;
  }

  body.start-page .start-hero::after {
    top: 17%;
    right: -12vw;
    width: 92vw;
    height: 280px;
    opacity: 0.22;
  }

  body.start-page .start-hero .lead {
    max-width: 100%;
  }

  body.start-page .start-intake-section {
    padding-top: 76px;
  }

  body.start-page .start-intake-section::before {
    inset: auto -46vw 22px 20%;
    height: 380px;
    opacity: 0.12;
  }

  body.start-page .intake::before {
    inset: auto -38vw -36px 14%;
    height: 360px;
    opacity: 0.1;
    background-position: right bottom;
  }

  body.start-page .intake::after {
    width: 92vw;
    opacity: 0.12;
  }

  body.start-page footer::before {
    inset: auto -48vw -14% 18%;
    height: 380px;
    opacity: 0.1;
  }
}

@media (max-width: 560px) {
  body.start-page .start-hero {
    min-height: 590px;
    padding-top: 112px;
  }

  body.start-page .start-hero::before {
    inset: 104px -102vw auto -2vw;
    height: 390px;
    opacity: 0.4;
  }

  :root[data-theme="dark"] body.start-page .start-hero::before {
    opacity: 0.5;
  }

  body.start-page .start-hero::after {
    right: -34vw;
    width: 128vw;
    opacity: 0.16;
  }

  body.start-page .start-hero .hero-meta {
    display: block;
  }

  body.start-page .start-hero .hero-meta .mono {
    display: block;
    max-width: 30ch;
    margin-top: 14px;
    line-height: 1.45;
    white-space: normal;
  }

  body.start-page .start-hero .lead {
    margin-top: 28px !important;
  }

  body.start-page .start-intake-section::before {
    right: -84vw;
    left: 4%;
    height: 300px;
    opacity: 0.08;
  }

  body.start-page .intake::before {
    right: -88vw;
    left: 0;
    height: 280px;
    opacity: 0.08;
  }

  body.start-page .intake::after {
    display: none;
  }

  body.start-page footer::before {
    right: -86vw;
    left: 4%;
    height: 300px;
    opacity: 0.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.start-page .start-hero::before,
  body.start-page .start-hero::after,
  body.start-page .start-intake-section::before,
  body.start-page .intake::after,
  body.start-page footer::before {
    animation: none;
  }

  body.start-page .intake::before,
  body.start-page .choice,
  body.start-page .fld input,
  body.start-page .fld textarea {
    transition: none;
  }
}