@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000;
  --surface: #050708;
  --white: #f3f2ec;
  --text: #c6cdd1;
  --muted: #929ea4;
  --blue: #67b4d4;
  --line: #222a2f;
  background: var(--black);
  color: var(--white);
  font-family: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--black); }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 24px;
  background: var(--black);
}

.page {
  width: min(100%, 1120px);
  min-height: calc(100vh - 48px);
  min-height: calc(100svh - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px solid #171d21;
  background: var(--black);
}

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

.overview,
.contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5.2vw, 66px);
}

/* Shared backing for the optional Flower and Halo studies. */
.lava-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.lava-canvas.lava-study { opacity: .52; }

.lava-overview::before,
.flower-overview::before {
  position: absolute;
  z-index: 0;
  inset: -10%;
  content: "";
  pointer-events: none;
  transition: opacity 500ms ease;
}

.lava-overview::before {
  background:
    radial-gradient(ellipse at 27% 34%, rgb(45 126 143 / 30%) 0 7%, transparent 36%),
    radial-gradient(ellipse at 69% 57%, rgb(103 75 130 / 25%) 0 8%, transparent 38%),
    radial-gradient(ellipse at 41% 82%, rgb(34 101 112 / 20%) 0 7%, transparent 33%);
  filter: blur(15px);
  opacity: .42;
  animation: lava-fallback-drift 24s ease-in-out infinite alternate;
}

.flower-overview::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 12%, rgb(113 192 197 / 18%) 12.5% 14%, transparent 15% 25%, rgb(153 127 182 / 20%) 25.5% 27%, transparent 28%),
    conic-gradient(from 0deg at 50% 50%, transparent 0 17deg, rgb(107 179 189 / 15%) 20deg 31deg, transparent 34deg 67deg, rgb(147 114 172 / 16%) 70deg 81deg, transparent 84deg 120deg, rgb(107 179 189 / 15%) 123deg 134deg, transparent 137deg 180deg, rgb(147 114 172 / 16%) 183deg 194deg, transparent 197deg 240deg, rgb(107 179 189 / 15%) 243deg 254deg, transparent 257deg 300deg, rgb(147 114 172 / 16%) 303deg 314deg, transparent 317deg);
  opacity: .3;
  animation: flower-fallback-turn 36s linear infinite;
}

.lava-overview.effect-ready::before,
.flower-overview.effect-ready::before { opacity: 0; }

@keyframes lava-fallback-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(.98); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@keyframes flower-fallback-turn {
  from { transform: rotate(-9deg) scale(.96); }
  to { transform: rotate(9deg) scale(1.03); }
}

.logo { display: block; width: min(100%, 205px); height: auto; }

.overview .logo,
.overview .description { position: relative; z-index: 2; }

.description {
  max-width: 410px;
  margin: 22px 0 0;
  color: var(--text);
  background-image: linear-gradient(110deg, #c6cdd1 0%, #c6cdd1 27%, #c9c5d8 44%, #bfd3d9 58%, #c6cdd1 77%, #c6cdd1 100%);
  background-size: 240% 100%;
  background-position: 8% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.66;
  animation: text-current 38s ease-in-out infinite alternate;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .description { color: transparent; -webkit-text-fill-color: transparent; }
}

@keyframes text-current {
  from { background-position: 8% 50%; transform: translate3d(0, 0, 0); }
  to { background-position: 92% 50%; transform: translate3d(.8px, -.8px, 0); }
}

.contact {
  padding: clamp(32px, 5.2vw, 64px);
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.contact h2 {
  margin: 0 0 17px;
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

form { width: 100%; max-width: 470px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0; }

.field {
  position: relative;
  min-width: 0;
  margin: 0 0 12px;
}

.field label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
  transition: top 140ms ease, transform 140ms ease, font-size 140ms ease, color 140ms ease;
}

.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  padding: 20px 15px 7px;
  background: rgb(255 255 255 / 4%);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.field input { height: 52px; }
.field textarea { min-height: 96px; padding-top: 27px; resize: vertical; }

.field textarea + label { top: 17px; transform: none; }

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 8px;
  transform: none;
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .025em;
}

.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label { top: 8px; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  background: rgb(255 255 255 / 6%);
  box-shadow: inset 0 -1px var(--blue);
}

.form-action { display: flex; align-items: center; gap: 15px; }

button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0 19px;
  background: linear-gradient(110deg, #83d0df 0%, #83b9e2 52%, #b09bdf 100%);
  color: #061015;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 5px 20px rgb(91 152 183 / 16%), inset 0 1px rgb(255 255 255 / 32%);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

button span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: rgb(0 0 0 / 12%);
  color: #0b2330;
  font-size: 15px;
}

button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px rgb(91 152 183 / 23%), inset 0 1px rgb(255 255 255 / 36%); }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.form-action p,
.status {
  max-width: 240px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.status { margin-top: 10px; color: #b7d9e8; }

.contact-note {
  width: 100%;
  max-width: 470px;
  margin-top: 15px;
  color: #737d82;
  font-size: 11px;
  line-height: 1.45;
}

.contact-note p { margin: 0; }
.contact-note p + p { margin-top: 4px; }
.contact-note span { color: #a2adb2; }

.site-footer {
  grid-column: 1 / -1;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 0 23px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .015em;
}

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.study-nav { display: flex; align-items: center; gap: 10px; }
.study-nav a[aria-current="page"] { color: var(--white); }

@media (max-width: 720px) {
  body { padding: 0; }
  .page {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    border: 0;
  }
  .overview { padding: 34px 28px 24px; }
  .logo { width: 182px; }
  .description { max-width: 560px; margin-top: 16px; font-size: 14px; line-height: 1.55; }
  .contact { padding: 20px 28px 26px; border-top: 1px solid var(--line); border-left: 0; }
  .contact h2 { margin-bottom: 13px; font-size: 16px; }
  form { max-width: 560px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .field { margin-bottom: 10px; }
  .field input { height: 48px; }
  .field textarea { min-height: 78px; }
  .site-footer { min-height: 42px; padding: 0 28px; }
}

@media (max-width: 370px) {
  .overview { padding: 27px 20px 19px; }
  .contact { padding: 17px 20px 22px; }
  .description { margin-top: 13px; font-size: 13px; line-height: 1.48; }
  .field { margin-bottom: 8px; }
  .field input { height: 44px; }
  .field textarea { min-height: 64px; }
  .form-action { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-height: 680px) {
  body { padding-top: 10px; padding-bottom: 10px; }
  .page { min-height: calc(100vh - 20px); min-height: calc(100svh - 20px); }
  .overview, .contact { padding-top: 22px; padding-bottom: 22px; }
  .logo { width: min(100%, 170px); }
  .description { margin-top: 13px; font-size: 13px; line-height: 1.45; }
  .contact h2 { margin-bottom: 10px; font-size: 15px; }
  .field { margin-bottom: 7px; }
  .field input { height: 42px; }
  .field textarea { min-height: 60px; }
  button { min-height: 40px; }
}

@media (max-width: 720px) and (max-height: 680px) {
  body { padding: 0; }
  .page { min-height: 100vh; min-height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .description { animation: none; background-position: 50% 50%; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* These visual studies are deliberately animated even when the OS asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .description { animation: text-current 38s ease-in-out infinite alternate; }
}