:root {
  color-scheme: dark;
  --ink: #f4f1ea;
  --soft: rgba(244, 241, 234, 0.78);
  --muted: rgba(244, 241, 234, 0.58);
  --line: rgba(244, 241, 234, 0.2);
  --gold: #d4bd87;
  --bg: #050505;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --u: min(1vw, 1svh);
  --page-x: clamp(28px, 12vw, 210px);
  --title-size: clamp(2.7rem, calc(var(--u) * 7.4), 7.6rem);
  --title-track: clamp(0.13em, calc(var(--u) * 0.56), 0.44em);
  --circle-size: clamp(260px, calc(var(--u) * 44), 545px);
  --card-w: clamp(520px, 42vw, 795px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: "Geist", "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  color: var(--ink);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

.particle-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.38;
}

.site-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.background,
.background > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.background {
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.05), transparent 22%),
    linear-gradient(180deg, #030303 0%, #090908 48%, #030303 100%);
}

.background::before {
  display: none;
}

.background::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10svh;
  width: 112vw;
  height: clamp(210px, 34svh, 440px);
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.34), transparent 13%),
    repeating-radial-gradient(ellipse at 50% 12%, rgba(244, 241, 234, 0.105) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(244, 241, 234, 0.07), rgba(0, 0, 0, 0.56) 56%, rgba(0, 0, 0, 0.92));
  opacity: 0;
}

.background__image {
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) scale(1.02);
  background-image: url("assets/cinematic-softbeam.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.86;
  filter: contrast(1.08) brightness(0.68) saturate(0.82);
}

.background__grain {
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.34) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 76% 62%, rgba(255, 255, 255, 0.25) 0 0.55px, transparent 0.8px);
  background-size: 23px 19px, 31px 29px;
}

.background__fog {
  z-index: -1;
  opacity: 0.2;
  filter: blur(48px);
}

.background__fog--left {
  background: radial-gradient(ellipse at 20% 58%, rgba(220, 214, 196, 0.16), transparent 38%);
}

.background__fog--right {
  background: radial-gradient(ellipse at 76% 51%, rgba(212, 189, 135, 0.1), transparent 34%);
}

.background__beam {
  display: none;
}

.background__vignette {
  box-shadow: inset 0 0 15vw 7vw #020202;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94), transparent 19%, transparent 81%, rgba(0, 0, 0, 0.94)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 56%, rgba(0, 0, 0, 0.72));
}

.topbar {
  position: absolute;
  z-index: 3;
  top: clamp(22px, 5svh, 58px);
  left: var(--page-x);
  right: var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, calc(var(--u) * 2.2), 30px);
  font-size: clamp(0.58rem, calc(var(--u) * 1.05), 0.92rem);
  font-weight: 300;
  letter-spacing: clamp(0.22em, calc(var(--u) * 0.38), 0.42em);
  color: rgba(244, 241, 234, 0.72);
  animation: revealDown 900ms var(--ease) 120ms both;
}

.brand-mark i,
.section-kicker span,
.short-line,
.contact-card__line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 241, 234, 0.72), transparent);
}

.brand-mark i {
  width: clamp(22px, calc(var(--u) * 4.8), 44px);
}

.menu-mark {
  display: inline-flex;
  gap: clamp(8px, calc(var(--u) * 1.4), 13px);
  align-items: center;
  justify-content: center;
  width: clamp(42px, calc(var(--u) * 6.5), 58px);
  height: clamp(30px, calc(var(--u) * 4.8), 44px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  animation: revealDown 900ms var(--ease) 240ms both;
}

.menu-mark span {
  width: 1px;
  height: clamp(13px, calc(var(--u) * 2.1), 18px);
  background: rgba(244, 241, 234, 0.78);
  box-shadow: 0 0 12px rgba(244, 241, 234, 0.18);
  transition: transform 360ms var(--ease), opacity 360ms var(--ease);
}

.menu-mark:hover span:nth-child(1) {
  transform: translateY(-3px);
}

.menu-mark:hover span:nth-child(3) {
  transform: translateY(3px);
}

.hero {
  position: absolute;
  z-index: 2;
  top: clamp(116px, 20svh, 260px);
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(90vw, 1320px);
  margin: 0;
  padding: 0;
  text-align: center;
  transform: translateX(-50%);
}

.orbit {
  display: none;
}

.orbit::before,
.orbit::after,
.identity__spark,
.footer-spark {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 44px rgba(212, 189, 135, 0.24);
}

.orbit::before {
  top: -3px;
  width: clamp(5px, calc(var(--u) * 0.9), 7px);
  height: clamp(5px, calc(var(--u) * 0.9), 7px);
}

.orbit::after {
  bottom: 18%;
  width: 2px;
  height: 2px;
  opacity: 0.62;
}

.orbit__dot {
  position: absolute;
  display: block;
  width: clamp(4px, calc(var(--u) * 0.65), 5px);
  height: clamp(4px, calc(var(--u) * 0.65), 5px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.orbit__dot--top {
  left: 2.6%;
  top: 37.5%;
}

.orbit__dot--left {
  left: 28%;
  bottom: 33%;
  width: clamp(8px, calc(var(--u) * 1.45), 11px);
  height: clamp(8px, calc(var(--u) * 1.45), 11px);
  opacity: 0.78;
}

.display-title {
  position: relative;
  order: 1;
  margin: 0;
  max-width: 96vw;
  overflow: hidden;
  padding: 0.18em 0 0.26em;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: var(--title-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(249, 248, 244, 0.94);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.82),
    0 0 42px rgba(255, 255, 255, 0.15);
  animation:
    titleReveal 1100ms var(--ease) 280ms both,
    titleGlow 4600ms ease-in-out 1800ms infinite;
}

.display-title::after {
  content: "";
  position: absolute;
  inset: 0 -14%;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.18) 44%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(212, 189, 135, 0.22) 55%,
      transparent 62%,
      transparent 100%
    );
  mix-blend-mode: screen;
  transform: translateX(-120%) skewX(-12deg);
  animation: titleSweep 2200ms var(--ease) 850ms both;
  pointer-events: none;
}

.microcopy {
  position: relative;
  display: inline-block;
  order: 2;
  margin: clamp(10px, 2.1svh, 30px) 0 0;
  font-family: "Be Vietnam Pro", "Inter", sans-serif;
  font-size: clamp(0.74rem, calc(var(--u) * 1.38), 1.42rem);
  font-weight: 300;
  letter-spacing: clamp(0.28em, calc(var(--u) * 0.7), 0.68em);
  color: rgba(244, 241, 234, 0.8);
  text-transform: lowercase;
  min-height: 1.45em;
  min-width: 17ch;
  animation: revealUp 900ms var(--ease) 720ms both;
}

.microcopy::after {
  display: none;
}

.short-line {
  order: 3;
  width: clamp(32px, calc(var(--u) * 4.6), 44px);
  margin-top: clamp(10px, 2.2svh, 42px);
  opacity: 0.68;
  animation: lineReveal 900ms var(--ease) 980ms both;
}

.identity {
  order: 4;
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: clamp(22px, 6.4svh, 106px);
}

.identity__name {
  margin: 0;
  font-size: clamp(0.86rem, calc(var(--u) * 1.78), 1.88rem);
  font-weight: 300;
  letter-spacing: clamp(0.22em, calc(var(--u) * 0.58), 0.58em);
  color: rgba(244, 241, 234, 0.88);
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.13);
  animation: revealUp 900ms var(--ease) 1180ms both;
}

.identity__spark {
  display: none;
}

.identity__spark::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: clamp(58px, calc(var(--u) * 12), 118px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(244, 241, 234, 0.44), transparent);
}

.identity__tagline {
  display: grid;
  gap: clamp(6px, 1.25svh, 20px);
  margin: clamp(16px, 3.2svh, 44px) 0 0;
  font-family: "Be Vietnam Pro", "Inter", sans-serif;
  font-size: clamp(0.76rem, calc(var(--u) * 1.42), 1.48rem);
  font-weight: 300;
  letter-spacing: clamp(0.2em, calc(var(--u) * 0.52), 0.52em);
  line-height: 1.35;
  color: rgba(244, 241, 234, 0.83);
}

.identity__tagline span {
  display: block;
  animation: revealUp 860ms var(--ease) both;
}

.identity__tagline span:nth-child(1) {
  animation-delay: 1380ms;
}

.identity__tagline span:nth-child(2) {
  animation-delay: 1540ms;
}

.contact-section {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(48px, 7.5svh, 128px);
  width: min(84vw, var(--card-w));
  text-align: center;
  transform: translateX(-50%);
}

.section-kicker {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2svh, 28px);
  animation: revealUp 900ms var(--ease) 1740ms both;
}

.section-kicker h2 {
  margin: 0;
  font-size: clamp(0.66rem, calc(var(--u) * 1.18), 1.16rem);
  font-weight: 300;
  letter-spacing: clamp(0.22em, calc(var(--u) * 0.5), 0.52em);
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.86);
}

.section-kicker span {
  width: clamp(32px, calc(var(--u) * 4.4), 42px);
  opacity: 0.66;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, calc(var(--u) * 3.7), 38px);
  margin-top: clamp(10px, 2.5svh, 34px);
}

.contact-card {
  position: relative;
  display: grid;
  min-height: clamp(84px, 14.5svh, 210px);
  place-items: center;
  align-content: center;
  padding: clamp(11px, 2.6svh, 38px) clamp(14px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(244, 241, 234, 0.045);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 241, 234, 0.018), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.004));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018),
    0 14px 38px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(7px);
  transition:
    transform 560ms var(--ease),
    border-color 560ms var(--ease),
    box-shadow 560ms var(--ease),
    background 560ms var(--ease);
  animation: cardReveal 1150ms var(--ease) both;
  will-change: opacity, transform;
}

.contact-card:nth-child(1) {
  animation-delay: 1940ms;
}

.contact-card:nth-child(2) {
  animation-delay: 2100ms;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: linear-gradient(135deg, rgba(212, 189, 135, 0.045), transparent 46%, rgba(255, 255, 255, 0.028));
  transition: opacity 560ms var(--ease);
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 241, 234, 0.095);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 48px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(212, 189, 135, 0.02);
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card > * {
  position: relative;
}

.contact-card__icon {
  width: clamp(18px, calc(var(--u) * 3.8), 38px);
  height: clamp(18px, calc(var(--u) * 3.8), 38px);
  margin-bottom: clamp(7px, 2.1svh, 26px);
  fill: none;
  stroke: rgba(244, 241, 234, 0.48);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.05));
}

.contact-card__label {
  font-size: clamp(0.5rem, calc(var(--u) * 0.82), 0.76rem);
  font-weight: 300;
  letter-spacing: clamp(0.32em, calc(var(--u) * 0.42), 0.42em);
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.42);
}

.contact-card__line {
  width: clamp(26px, calc(var(--u) * 3.6), 34px);
  margin: clamp(6px, 1.6svh, 19px) 0 clamp(7px, 1.9svh, 22px);
  opacity: 0.42;
}

.contact-card strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(0.72rem, calc(var(--u) * 1.28), 1.22rem);
  font-weight: 300;
  letter-spacing: 0.045em;
  color: rgba(244, 241, 234, 0.58);
}

.site-footer {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(12px, 2.2svh, 44px);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2.4svh, 38px);
  width: min(90vw, 1180px);
  margin: 0;
  transform: translateX(-50%);
}

.footer-spark {
  display: none;
}

.footer-spark::before,
.footer-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(244, 241, 234, 0.4);
}

.footer-spark::before {
  width: clamp(36px, calc(var(--u) * 11), 112px);
  height: 1px;
}

.footer-spark::after {
  width: 1px;
  height: clamp(36px, calc(var(--u) * 11), 112px);
}

.site-footer p {
  margin: 0;
  font-size: clamp(0.56rem, calc(var(--u) * 0.92), 0.92rem);
  font-weight: 300;
  letter-spacing: clamp(0.26em, calc(var(--u) * 0.36), 0.34em);
  color: rgba(244, 241, 234, 0.66);
  animation: revealUp 900ms var(--ease) 2320ms both;
}

@keyframes beamBreath {
  0%,
  100% {
    opacity: 0.4;
    filter: blur(0);
  }
  50% {
    opacity: 0.62;
    filter: blur(0.2px);
  }
}

@keyframes revealDown {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes titleReveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(18px) scale(0.985);
    letter-spacing: calc(var(--title-track) + 0.08em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    letter-spacing: var(--title-track);
  }
}

@keyframes titleSweep {
  0% {
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%) skewX(-12deg);
  }
}

@keyframes titleTextSweep {
  0% {
    opacity: 0;
    background-position: 130% 50%;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -130% 50%;
  }
}

@keyframes titleGlow {
  0%,
  100% {
    text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.18),
      0 14px 28px rgba(0, 0, 0, 0.82),
      0 0 34px rgba(255, 255, 255, 0.12);
  }
  50% {
    text-shadow:
      0 2px 0 rgba(255, 255, 255, 0.26),
      0 14px 28px rgba(0, 0, 0, 0.86),
      0 0 54px rgba(255, 255, 255, 0.2),
      0 0 22px rgba(212, 189, 135, 0.08);
  }
}

@keyframes caretBlink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0;
  }
}

@keyframes lineReveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 0.68;
    transform: scaleX(1);
  }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.82;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes softPulse {
  0%,
  100% {
    color: rgba(244, 241, 234, 0.58);
  }
  50% {
    color: rgba(244, 241, 234, 0.82);
  }
}

@keyframes valueGlow {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow: 0 0 14px rgba(244, 241, 234, 0.16);
  }
}

@media (min-aspect-ratio: 18 / 9) {
  :root {
    --page-x: clamp(120px, 19vw, 320px);
    --title-size: clamp(2.8rem, calc(var(--u) * 8.2), 6.6rem);
    --circle-size: clamp(280px, calc(var(--u) * 49), 500px);
    --card-w: clamp(500px, 40vw, 760px);
  }

  .background::before {
    display: none;
  }

  .background__image {
    background-size: cover;
  }
}

@media (max-aspect-ratio: 4 / 5) {
  :root {
    --u: min(1.14vw, 1svh);
    --page-x: clamp(20px, 6vw, 38px);
    --title-size: clamp(1.85rem, 8vw, 3.1rem);
    --title-track: clamp(0.035em, 0.52vw, 0.085em);
    --circle-size: clamp(245px, 80vw, 390px);
  }

  .topbar {
    top: clamp(20px, 4svh, 34px);
  }

  .brand-mark {
    max-width: 64vw;
    gap: 10px;
    letter-spacing: 0.2em;
  }

  .brand-mark i {
    width: 24px;
  }

  .hero {
    top: clamp(108px, 16svh, 150px);
    width: 96vw;
  }

  .display-title {
    white-space: nowrap;
    max-width: 98vw;
  }

  .orbit {
    top: clamp(-40px, -4svh, -22px);
  }

  .identity {
    margin-top: clamp(20px, 5.2svh, 46px);
  }

  .contact-section {
    bottom: clamp(30px, 4.8svh, 48px);
    width: min(90vw, 420px);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.6svh, 14px);
  }

  .contact-card {
    min-height: clamp(62px, 9.5svh, 88px);
    padding: clamp(9px, 1.8svh, 15px) clamp(14px, 4vw, 22px);
  }

  .contact-card__icon {
    width: clamp(16px, 4.4vw, 22px);
    height: clamp(16px, 4.4vw, 22px);
    margin-bottom: clamp(5px, 1svh, 8px);
  }

  .contact-card__line {
    margin: clamp(5px, 1svh, 8px) 0;
  }

  .contact-card strong {
    font-size: clamp(0.72rem, 2.7vw, 0.9rem);
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  :root {
    --page-x: clamp(42px, 16vw, 160px);
    --title-size: clamp(2.1rem, calc(var(--u) * 6.9), 4rem);
    --title-track: clamp(0.1em, calc(var(--u) * 0.44), 0.22em);
    --circle-size: clamp(215px, calc(var(--u) * 39), 310px);
    --card-w: clamp(460px, 40vw, 590px);
  }

  .topbar {
    top: clamp(16px, 3svh, 24px);
  }

  .hero {
    top: clamp(82px, 15svh, 112px);
  }

  .identity {
    margin-top: clamp(16px, 4.2svh, 28px);
  }

  .identity__spark,
  .identity__tagline {
    margin-top: clamp(9px, 2svh, 16px);
  }

  .contact-section {
    bottom: clamp(36px, 6.4svh, 50px);
  }

  .contact-card {
    min-height: clamp(72px, 12svh, 92px);
  }
}

@media (min-width: 1024px) and (max-height: 920px) and (orientation: landscape) {
  :root {
    --title-size: clamp(2.62rem, calc(var(--u) * 6.75), 5.9rem);
    --title-track: clamp(0.12em, calc(var(--u) * 0.52), 0.34em);
    --circle-size: clamp(260px, calc(var(--u) * 43.5), 485px);
  }

  .brand-mark {
    font-size: clamp(0.52rem, calc(var(--u) * 0.84), 0.78rem);
  }

  .microcopy {
    font-size: clamp(0.72rem, calc(var(--u) * 1.2), 1.2rem);
  }

  .identity__name {
    font-size: clamp(0.8rem, calc(var(--u) * 1.52), 1.58rem);
  }

  .identity__tagline {
    font-size: clamp(0.72rem, calc(var(--u) * 1.24), 1.24rem);
  }

  .section-kicker h2 {
    font-size: clamp(0.6rem, calc(var(--u) * 0.9), 0.9rem);
  }

  .contact-card__label {
    font-size: clamp(0.44rem, calc(var(--u) * 0.64), 0.64rem);
  }

  .contact-card strong {
    font-size: clamp(0.64rem, calc(var(--u) * 0.94), 0.94rem);
    letter-spacing: 0.035em;
  }

  .contact-section {
    width: min(48vw, 540px);
  }

  .contact-grid {
    gap: clamp(10px, calc(var(--u) * 2.4), 24px);
  }

  .contact-card {
    min-height: clamp(68px, 10.5svh, 112px);
    padding: clamp(8px, 1.7svh, 20px) clamp(12px, 2vw, 24px);
  }

  .contact-card__icon {
    width: clamp(14px, calc(var(--u) * 2.4), 24px);
    height: clamp(14px, calc(var(--u) * 2.4), 24px);
    margin-bottom: clamp(4px, 1.2svh, 12px);
  }

  .contact-card__line {
    width: clamp(18px, calc(var(--u) * 2.4), 28px);
    margin: clamp(4px, 1svh, 10px) 0 clamp(4px, 1.1svh, 10px);
  }

  .site-footer p {
    font-size: clamp(0.5rem, calc(var(--u) * 0.74), 0.74rem);
  }
}

@media (max-width: 380px), (max-height: 590px) {
  .section-kicker {
    display: none;
  }

  .contact-card__icon {
    display: none;
  }

  .contact-card {
    min-height: 68px;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  :root {
    --page-x: clamp(28px, 10vw, 78px);
    --title-size: clamp(1.82rem, 8.4svh, 3rem);
    --title-track: 0.1em;
    --circle-size: clamp(188px, 45svh, 250px);
    --card-w: min(72vw, 520px);
  }

  .topbar {
    top: 14px;
  }

  .brand-mark {
    font-size: 0.52rem;
  }

  .hero {
    top: clamp(64px, 17svh, 82px);
  }

  .identity {
    margin-top: clamp(12px, 4svh, 20px);
  }

  .identity__spark,
  .identity__tagline {
    margin-top: 8px;
  }

  .contact-section {
    bottom: 32px;
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .particle-field {
    display: none;
  }
}