/* ------------------------------
   Base — derived from portfolio v8
-------------------------------- */

:root {
  --bg: #eaf0fa;
  --text: #272a31;
  --muted: rgba(39, 42, 49, 0.56);
  --soft: rgba(39, 42, 49, 0.1);
  --accent: #c6ff3f;
  --accent-2: #c6ff3f;

  --page: min(100% - 12.9vw, 1720px);
  --mx: 50%;
  --my: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --title-x: 0px;
  --title-y: 0px;
}

* {
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: none;
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

a,
button {
  color: inherit;
  cursor: none;
}

button {
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

.page-pad {
  width: var(--page);
  margin-inline: auto;
}

/* ------------------------------
   Pixel intro
-------------------------------- */

.intro-loader.pixel-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  overflow: hidden;
  background: var(--bg);
  opacity: 1;
  transition: opacity 760ms ease, visibility 760ms ease;
}

.pixel-loader__noise {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(90deg, rgba(39, 42, 49, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(39, 42, 49, 0.11) 1px, transparent 1px),
    radial-gradient(circle at 78% 62%, rgba(198, 255, 63, 0.2), transparent 16rem);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  image-rendering: pixelated;
  transform: scale(1.08);
  animation:
    pixel-noise-shift 520ms steps(2, end) infinite,
    pixel-noise-soften 1100ms cubic-bezier(.77, 0, .175, 1) forwards;
}

.pixel-loader__noise::before,
.pixel-loader__noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
}

.pixel-loader__noise::before {
  background-image:
    linear-gradient(45deg, rgba(39, 42, 49, 0.14) 25%, transparent 25% 50%, rgba(198, 255, 63, 0.24) 50% 75%, transparent 75%);
  background-size: 24px 24px;
  opacity: 0.42;
  animation: pixel-noise-shift-alt 380ms steps(2, end) infinite;
}

.pixel-loader__noise::after {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 10px,
      rgba(39, 42, 49, 0.08) 10px 12px
    );
  opacity: 0.24;
  animation: pixel-scan 700ms steps(4, end) infinite;
}

.pixel-loader__fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 12%, rgba(234, 240, 250, 0.4) 38%, var(--bg) 72%);
  transform: scale(0.8);
  opacity: 0;
  animation: pixel-fade-bloom 1100ms cubic-bezier(.77, 0, .175, 1) forwards;
}

body.is-ready .intro-loader.pixel-loader {
  opacity: 0;
  visibility: hidden;
}

/* ------------------------------
   Cursor
-------------------------------- */

.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--text);
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition:
    width 220ms ease,
    height 220ms ease,
    background 220ms ease,
    opacity 220ms ease;
}

.cursor-label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 301;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 160ms ease;
}

body.cursor-active .cursor-dot {
  width: 76px;
  height: 76px;
  background: var(--text);
  mix-blend-mode: normal;
}

body.cursor-active .cursor-label {
  opacity: 1;
}

/* ------------------------------
   Header
-------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  width: var(--page);
  margin-inline: auto;
  padding-top: 31px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
  background: transparent;
  pointer-events: none;
}

.topbar a,
.topbar button {
  pointer-events: auto;
}

.topbar__name,
.topbar__email,
.topbar__location {
  font-size: clamp(12px, 0.72vw, 16px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.topbar__name {
  text-decoration: none;
}

.topbar__location {
  text-align: right;
}

.live-clock {
  display: inline-block;
  min-width: 74px;
}

/* ------------------------------
   Copy email
-------------------------------- */

.copy-email {
  position: relative;
}

.copy-email__text {
  display: inline-block;
  transition: transform 220ms ease, opacity 220ms ease;
}

.copy-email__feedback {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 8px);
  opacity: 0;
  color: var(--accent);
  pointer-events: none;
  white-space: nowrap;
  transition: transform 220ms ease, opacity 220ms ease;
}

.copy-email.is-copied .copy-email__text {
  transform: translateY(-8px);
  opacity: 0;
}

.copy-email.is-copied .copy-email__feedback {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* ------------------------------
   Coming soon stage
-------------------------------- */

.coming {
  min-height: calc(100svh - 248px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 92px;
  padding-bottom: 36px;
}

.coming__stage {
  position: relative;
  width: 100%;
  perspective: 1200px;
}

.coming-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: 128pt;
  line-height: 0.92;
  letter-spacing: -0.105em;
  font-weight: 800;
  transform:
    translate3d(var(--title-x), var(--title-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  isolation: isolate;
}

.coming-title__base,
.coming-title__glow {
  display: block;
  white-space: nowrap;
}

.coming-title__base {
  position: relative;
  z-index: 2;
  color: var(--text);
}

.coming-title__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: var(--accent);
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(circle 220px at var(--mx) var(--my), #000 0, #000 34%, transparent 72%);
  mask-image:
    radial-gradient(circle 220px at var(--mx) var(--my), #000 0, #000 34%, transparent 72%);
  filter: drop-shadow(0 0 22px rgba(198, 255, 63, 0.28));
}

.coming-title::before {
  content: "";
  position: absolute;
  left: var(--mx);
  top: var(--my);
  z-index: 1;
  width: 300px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(198, 255, 63, 0.22), transparent 62%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.coming-title::after {
  content: "";
  position: absolute;
  inset: -0.2em -0.35em;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(198, 255, 63, 0.14) 18% 19%, transparent 19% 100%),
    linear-gradient(0deg, transparent 0 72%, rgba(39, 42, 49, 0.04) 72% 73%, transparent 73% 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
}

.coming__stage:hover .coming-title::before {
  opacity: 1;
}

.coming__stage:hover .coming-title::after {
  opacity: 1;
  transform: translateY(0);
}

.coming-title .char {
  display: inline-block;
  transform:
    translate3d(var(--char-x, 0px), var(--char-y, 0px), 0)
    rotate(var(--char-r, 0deg));
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    color 220ms ease,
    opacity 220ms ease;
  will-change: transform;
}

.coming-title .space {
  display: inline-block;
  width: 0.28em;
}

/* ------------------------------
   Footer
-------------------------------- */

.contact {
  padding-bottom: 74px;
}

.contact__email {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 28px;
  color: var(--text);
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(48px, 5vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.08em;
  font-weight: 800;
  text-align: left;
  overflow-wrap: anywhere;
}

.contact .copy-email__feedback {
  left: 0;
  transform: translate(0, 8px);
  text-align: left;
}

.contact .copy-email.is-copied .copy-email__feedback {
  transform: translate(0, -50%);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(48px, 9vw, 220px);
}

.socials a {
  position: relative;
  isolation: isolate;
  padding: 4px 0;
  font-size: clamp(12px, 0.7vw, 16px);
  line-height: 1;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.socials a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.socials a:hover {
  transform: translateY(-2px);
}

.socials a:hover::after {
  transform: scaleX(1);
}

/* ------------------------------
   Keyframes
-------------------------------- */

@keyframes pixel-noise-shift {
  0% { transform: translate3d(0, 0, 0) scale(1.08); }
  25% { transform: translate3d(-9px, 7px, 0) scale(1.08); }
  50% { transform: translate3d(6px, -5px, 0) scale(1.08); }
  75% { transform: translate3d(11px, 9px, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1.08); }
}

@keyframes pixel-noise-shift-alt {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(12px, -12px, 0); }
  100% { transform: translate3d(-12px, 12px, 0); }
}

@keyframes pixel-noise-soften {
  0% { filter: contrast(1.6); opacity: 1; }
  58% { filter: contrast(1.15); opacity: 0.86; }
  100% { filter: contrast(1); opacity: 0; }
}

@keyframes pixel-scan {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(12px); }
}

@keyframes pixel-fade-bloom {
  0% { opacity: 0; transform: scale(0.8); }
  45% { opacity: 0.25; }
  100% { opacity: 1; transform: scale(1.25); }
}

/* ------------------------------
   Responsive
-------------------------------- */

@media (max-width: 1200px) {
  .coming-title {
    font-size: clamp(82px, 13.2vw, 128pt);
  }
}

@media (max-width: 1100px) {
  :root {
    --page: min(100% - 48px, 1720px);
  }

  .coming {
    min-height: calc(100svh - 220px);
  }
}

@media (max-width: 700px) {
  body {
    cursor: auto;
  }

  a,
  button {
    cursor: pointer;
  }

  .cursor-dot,
  .cursor-label {
    display: none;
  }

  :root {
    --page: min(100% - 28px, 1720px);
  }

  .topbar {
    position: absolute;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 22px;
  }

  .topbar__email {
    justify-self: end;
    text-align: right;
  }

  .topbar .copy-email__feedback {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
    text-align: right;
  }

  .topbar .copy-email.is-copied .copy-email__feedback {
    transform: translate(0, -50%);
  }

  .topbar__location {
    grid-column: 1 / -1;
    text-align: left;
    color: var(--muted);
  }

  .coming {
    min-height: calc(100svh - 270px);
    padding-top: 126px;
    align-items: center;
  }

  .coming-title {
    font-size: clamp(56px, 18vw, 98px);
    line-height: 0.94;
    letter-spacing: -0.09em;
  }

  .coming-title__base,
  .coming-title__glow {
    white-space: normal;
  }

  .coming-title__glow {
    -webkit-mask-image:
      radial-gradient(circle 150px at var(--mx) var(--my), #000 0, #000 32%, transparent 72%);
    mask-image:
      radial-gradient(circle 150px at var(--mx) var(--my), #000 0, #000 32%, transparent 72%);
  }

  .contact {
    padding-bottom: 34px;
  }

  .contact__email {
    font-size: 32pt;
    line-height: 1;
    letter-spacing: -0.075em;
  }

  .contact .copy-email__feedback {
    font-size: 32pt;
    line-height: 1;
  }

  .socials {
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .intro-loader.pixel-loader {
    display: none;
  }

  .coming-title {
    transform: none !important;
  }

  .coming-title .char {
    transform: none !important;
  }
}


/* ------------------------------
   v7 fixes
-------------------------------- */

/* Remove the visible rectangular overlay behind the Coming Soon title */
.coming-title::after {
  display: none;
}

/* Restore orange copied-email feedback from portfolio v8 */
:root {
  --copy-orange: #ff6c37;
}

.copy-email__feedback,
.contact .copy-email__feedback,
.topbar .copy-email__feedback {
  color: var(--copy-orange);
}


/* ------------------------------
   v8 title hover clipping fix
-------------------------------- */

/*
  The neon overlay needs extra room because glyphs like "g" and "." can draw
  slightly outside the normal text box. This prevents the hover color from
  clipping on descenders and punctuation.
*/
.coming-title {
  overflow: visible;
  padding: 0.16em 0.22em 0.32em 0.08em;
  margin: -0.16em -0.22em -0.32em -0.08em;
}

.coming-title__base,
.coming-title__glow {
  overflow: visible;
}

.coming-title__glow {
  inset: 0;
  width: max-content;
  padding: inherit;
  margin: inherit;
  -webkit-mask-image:
    radial-gradient(circle 260px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
  mask-image:
    radial-gradient(circle 260px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
}

.coming-title::before {
  width: 360px;
}

@media (max-width: 700px) {
  .coming-title {
    padding: 0.18em 0.22em 0.36em 0.08em;
    margin: -0.18em -0.22em -0.36em -0.08em;
  }

  .coming-title__glow {
    -webkit-mask-image:
      radial-gradient(circle 190px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
    mask-image:
      radial-gradient(circle 190px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
  }
}


/* ------------------------------
   v9 fixes: title alignment + bigger pixel intro
-------------------------------- */

/* Keep the title itself clean; do not offset the real text layer */
.coming-title {
  overflow: visible;
  padding: 0;
  margin: 0;
}

/* Base layer stays exactly in place */
.coming-title__base {
  position: relative;
  z-index: 2;
}

/*
  Extend only the glow layer's render area so descenders/punctuation can be
  revealed, without shifting the green layer away from the black base text.
*/
.coming-title__glow {
  position: absolute;
  top: -0.16em;
  right: -0.20em;
  bottom: -0.30em;
  left: -0.08em;
  z-index: 3;
  box-sizing: border-box;
  padding: 0.16em 0.20em 0.30em 0.08em;
  margin: 0;
  width: auto;
  height: auto;
  overflow: visible;
  -webkit-mask-image:
    radial-gradient(circle 260px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
  mask-image:
    radial-gradient(circle 260px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
}

.coming-title__glow .space {
  width: 0.28em;
}

/* Slightly larger halo to suit the bigger interaction */
.coming-title::before {
  width: 360px;
}

/* Bigger, chunkier pixel intro */
.pixel-loader__noise {
  background-size: 34px 34px, 34px 34px, 100% 100%;
}

.pixel-loader__noise::before {
  background-size: 46px 46px;
  opacity: 0.46;
}

.pixel-loader__noise::after {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 18px,
      rgba(39, 42, 49, 0.08) 18px 22px
    );
  opacity: 0.22;
}

/* Add chunkier block hints in the intro corners */
.pixel-loader__fade::before,
.pixel-loader__fade::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
  opacity: 0.82;
}

.pixel-loader__fade::before {
  top: 0;
  left: 0;
  width: 24vw;
  height: 10vw;
  background:
    linear-gradient(90deg, rgba(39, 42, 49, 0.94) 0 32%, rgba(198, 255, 63, 0.95) 32% 50%, rgba(39, 42, 49, 0.16) 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 84% 72%, 84% 100%, 58% 100%, 58% 84%, 36% 84%, 36% 64%, 0 64%);
}

.pixel-loader__fade::after {
  left: 0;
  bottom: 8%;
  width: 28vw;
  height: 13vw;
  background:
    linear-gradient(135deg, rgba(198, 255, 63, 0.46), rgba(198, 255, 63, 0.12) 48%, rgba(39, 42, 49, 0.12)),
    linear-gradient(90deg, rgba(39, 42, 49, 0.88) 0 7%, transparent 7% 100%);
  clip-path: polygon(0 0, 12% 0, 12% 20%, 18% 20%, 18% 0, 100% 0, 100% 60%, 84% 60%, 84% 80%, 74% 80%, 74% 100%, 0 100%);
}

@media (max-width: 700px) {
  .coming-title__glow {
    top: -0.18em;
    right: -0.20em;
    bottom: -0.34em;
    left: -0.08em;
    padding: 0.18em 0.20em 0.34em 0.08em;
    -webkit-mask-image:
      radial-gradient(circle 190px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
    mask-image:
      radial-gradient(circle 190px at var(--mx) var(--my), #000 0, #000 38%, transparent 76%);
  }

  .pixel-loader__noise {
    background-size: 24px 24px, 24px 24px, 100% 100%;
  }

  .pixel-loader__noise::before {
    background-size: 32px 32px;
  }

  .pixel-loader__fade::before {
    width: 42vw;
    height: 18vw;
  }

  .pixel-loader__fade::after {
    width: 44vw;
    height: 22vw;
  }
}


/* ------------------------------
   v10 clean 16x16 square-grid reveal
-------------------------------- */

/* Remove previous dithering/noise loader visuals */
.pixel-loader__noise,
.pixel-loader__fade {
  display: none !important;
}

/* Keep the loader visible while individual tiles reveal the page */
.intro-loader.pixel-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 1250ms;
}

body.is-ready .intro-loader.pixel-loader {
  opacity: 1;
  visibility: hidden;
}

.pixel-reveal-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 0;
  background: transparent;
}

.pixel-reveal-grid span {
  display: block;
  background: var(--bg);
  transform: scale(1.01);
  opacity: 1;
  will-change: transform, opacity;
  transition:
    transform 620ms cubic-bezier(.77, 0, .175, 1),
    opacity 620ms cubic-bezier(.77, 0, .175, 1);
  transition-delay: var(--delay, 0ms);
}

body.is-ready .pixel-reveal-grid span {
  transform: scale(0);
  opacity: 0;
}

/* Slightly different feel on mobile: still square-grid, just faster */
@media (max-width: 700px) {
  .intro-loader.pixel-loader {
    transition: visibility 0s linear 1050ms;
  }

  .pixel-reveal-grid span {
    transition-duration: 520ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader.pixel-loader {
    display: none;
  }
}


/* ------------------------------
   v11 mobile title line-break fix
-------------------------------- */

.coming-title .word {
  display: inline-block;
  white-space: nowrap;
}

.coming-title .line-break {
  display: none;
}

@media (max-width: 700px) {
  .coming-title__base,
  .coming-title__glow {
    white-space: normal;
  }

  .coming-title .line-break {
    display: block;
    height: 0;
    width: 100%;
  }
}


/* ------------------------------
   v12 mobile empty-scroll fix
-------------------------------- */

@media (max-width: 700px) {
  html,
  body {
    min-height: 100svh;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  .coming {
    flex: 1 0 auto;
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 18px;
    align-items: flex-start;
    justify-content: center;
  }

  .contact {
    flex: 0 0 auto;
    padding-bottom: 30px;
  }
}

@media (max-width: 700px) and (min-height: 720px) {
  .coming {
    padding-top: 128px;
    padding-bottom: 8px;
  }
}

@media (max-width: 700px) and (max-height: 680px) {
  .coming {
    padding-top: 118px;
    padding-bottom: 10px;
  }

  .contact {
    padding-bottom: 22px;
  }
}


/* ------------------------------
   v13 mobile overflow lock
-------------------------------- */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  .page-pad {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    margin-inline: auto;
  }

  .topbar {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
  }

  .coming {
    flex: 1 1 auto;
    min-height: 0;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding-top: 118px;
    padding-bottom: 0;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
  }

  .coming__stage {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .coming-title {
    max-width: 100%;
    font-size: clamp(52px, 15.8vw, 76px);
    line-height: 0.95;
    letter-spacing: -0.085em;
    transform: none;
  }

  .coming-title__base,
  .coming-title__glow {
    max-width: 100%;
    white-space: normal;
  }

  .coming-title .word {
    max-width: 100%;
  }

  .coming-title__glow {
    pointer-events: none;
  }

  .contact {
    flex: 0 0 auto;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding-bottom: 22px;
    overflow: hidden;
  }

  .contact__email {
    max-width: 100%;
    font-size: clamp(30px, 10vw, 40px);
    line-height: 1;
    letter-spacing: -0.07em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .contact .copy-email__feedback {
    font-size: clamp(30px, 10vw, 40px);
    line-height: 1;
  }

  .socials {
    max-width: 100%;
    gap: 28px;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .coming-title {
    font-size: clamp(48px, 15.2vw, 66px);
  }

  .contact__email,
  .contact .copy-email__feedback {
    font-size: clamp(28px, 9.4vw, 36px);
  }
}


/* ------------------------------
   v14 mobile title ghosting fix
-------------------------------- */

/*
  Mobile has no real cursor, so the duplicated neon hover layer can create
  a ghosted third line after tap/focus. Keep the premium hover effect on
  desktop, but simplify mobile to a single clean text layer.
*/
@media (max-width: 700px) {
  .coming-title__glow {
    display: none !important;
  }

  .coming-title__base {
    color: var(--text);
  }

  .coming-title {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .coming-title::before,
  .coming-title::after {
    display: none !important;
  }

  .coming-title .char {
    transform: none !important;
  }
}