:root {
  --bg: #07090d;
  --panel: rgba(10, 13, 18, 0.48);
  --panel-strong: rgba(8, 11, 16, 0.74);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --text: #f4f5f7;
  --muted: rgba(244, 245, 247, 0.74);
  --dim: rgba(244, 245, 247, 0.46);
  --accent: #b7d7ff;
  --shadow-soft: 0 30px 90px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 34px 110px rgba(0, 0, 0, 0.55);
  --display: "Anton", Impact, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-space: clamp(20px, 3vw, 40px);
  --content-space: clamp(20px, 4vw, 64px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-width: none;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  overflow: visible;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: 0;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  z-index: 1;
  background: #0a0c12;
  overflow-x: clip;
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  pointer-events: none;
}

.bg-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(68px) brightness(0.58) saturate(1.18);
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 1.1s var(--ease-premium), transform 1.8s var(--ease-premium);
  z-index: -6;
}

.bg-image.is-visible {
  opacity: 1;
  transform: scale(1.14);
}

.gradient-canvas {
  z-index: -5;
}

.contour-canvas {
  mix-blend-mode: screen;
  opacity: 0.36;
  z-index: -4;
}

.bg-sweep {
  background:
    radial-gradient(circle at 18% 32%, rgba(255, 255, 255, 0.1), transparent 28%),
    linear-gradient(108deg, transparent 25%, rgba(255, 255, 255, 0.085) 48%, transparent 70%);
  filter: blur(18px);
  opacity: 0.6;
  transform: translate3d(-18%, -8%, 0) rotate(-6deg);
  animation: sweepDrift 16s ease-in-out infinite;
  z-index: -3;
}

.bg-grid {
  background:
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 68px),
    radial-gradient(circle at 78% 28%, transparent 0 78px, rgba(255, 255, 255, 0.055) 78px 79px);
  opacity: 0.22;
  transform: scale(1.12);
  animation: gridFloat 34s ease-in-out infinite;
  z-index: -2;
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  mix-blend-mode: overlay;
  opacity: 0.09;
  z-index: -1;
  animation: noiseShift 7s steps(6) infinite;
}

.bg-vignette {
  background:
    radial-gradient(circle at 50% 46%, transparent 0 34%, rgba(8, 10, 14, 0.08) 46%, rgba(2, 4, 6, 0.7) 100%),
    linear-gradient(180deg, rgba(6, 9, 12, 0.14), rgba(6, 9, 12, 0.54));
  z-index: 0;
}

.site-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: var(--nav-space) var(--content-space);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  justify-self: start;
}

.brand-mark {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
  height: 28px;
  width: auto;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav-center {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: fixed;
  right: clamp(22px, 2.4vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
}

.nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  position: relative;
  text-transform: uppercase;
  transition: color 240ms ease;
}

.nav-link::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(183, 215, 255, 0.95), rgba(255, 255, 255, 0));
  bottom: -7px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transform: scaleX(0.65);
  transform-origin: center;
  transition: opacity 240ms ease, transform 280ms var(--ease-premium);
  width: 100%;
}

.nav-link:hover {
  color: #fff;
}

.nav-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* scroll-spy: the link for the section currently in view stays underlined */
.nav-link.is-active {
  color: #fff;
}
.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.lang-switch {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  justify-self: end;
}

.lang-btn {
  color: var(--dim);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 220ms ease, opacity 220ms ease;
}

.lang-btn.active,
.lang-btn:hover {
  color: #fff;
}

.lang-divider {
  color: rgba(255, 255, 255, 0.25);
}

.hero {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(96px, 11vh, 126px) var(--content-space) clamp(28px, 4vh, 42px);
  position: relative;
  z-index: 1;
}

.hero-stage {
  display: block;
  min-height: calc(100vh - clamp(180px, 22vh, 260px));
  position: relative;
  width: 100%;
}

.hero-stage-copy {
  bottom: clamp(104px, 12vh, 148px);
  left: 0;
  max-width: clamp(320px, 33vw, 560px);
  position: absolute;
  z-index: 8;
}

.eyebrow {
  align-items: center;
  color: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  margin-bottom: 16px;
  padding: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  background: linear-gradient(90deg, rgba(183, 215, 255, 0.95), rgba(255, 255, 255, 0.28));
  border-radius: 999px;
  content: "";
  display: block;
  flex: none;
  height: 1px;
  width: 38px;
}

.title-stack {
  max-width: min(38rem, 100%);
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(3.4rem, 7.1vw, 7.4rem);
  letter-spacing: 0.02em;
  line-height: 0.88;
  text-shadow: 0 12px 38px rgba(0, 0, 0, 0.42);
  text-transform: uppercase;
}

.hero-stage-copy[data-title-size="medium"] .hero-title {
  font-size: clamp(3.2rem, 6.4vw, 6.6rem);
}

.hero-stage-copy[data-title-size="long"] .hero-title {
  font-size: clamp(2.9rem, 5.5vw, 5.7rem);
}

.hero-stage-copy[data-title-size="xlong"] .hero-title {
  font-size: clamp(2.55rem, 4.9vw, 5rem);
  line-height: 0.9;
}

.hero-sub {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.45vw, 1.12rem);
  line-height: 1.65;
  margin-top: 18px;
  max-width: 36ch;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.36);
}

.text-mask {
  display: block;
  overflow: hidden;
}

.eyebrow.text-mask {
  display: inline-flex;
  overflow-x: hidden;
  overflow-y: auto;
}

.text-mask-inner {
  display: block;
  transform: translateY(0);
  transition: transform 520ms var(--ease-premium), opacity 520ms ease;
}

.text-mask.is-switching .text-mask-inner {
  opacity: 0;
  transform: translateY(108%);
}

.hero-actions {
  align-items: center;
  display: flex;
  gap: 18px;
  margin-top: 28px;
}

.hero-btn {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  color: #091018;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.16em;
  min-height: 52px;
  overflow: hidden;
  padding: 0 24px 0 28px;
  position: relative;
  text-transform: uppercase;
  transition: transform 220ms ease, background 220ms ease;
}

.hero-btn:hover {
  background: #fff;
  transform: translateY(-2px);
}

.hero-btn-arrow {
  font-size: 0.9rem;
}

.halo-btn .halo-rings {
  inset: 0;
  position: absolute;
}

.halo-btn .halo-rings span {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  inset: 2px;
  opacity: 0;
  position: absolute;
  transform: scale(0.86);
}

.halo-btn:hover .halo-rings span:first-child {
  animation: buttonEcho 1.15s ease forwards;
}

.halo-btn:hover .halo-rings span:last-child {
  animation: buttonEcho 1.15s ease 120ms forwards;
}

.hero-link {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  position: relative;
  text-transform: uppercase;
}

.hero-link::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(183, 215, 255, 0.9), rgba(255, 255, 255, 0));
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.7;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  transform: scaleX(0.72);
  transform-origin: left;
  transition: transform 260ms var(--ease-premium), opacity 220ms ease;
}

.hero-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.slider {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - clamp(220px, 24vh, 300px));
  padding-right: 0;
  position: relative;
  z-index: 3;
  width: 100%;
}

.slider-frame {
  aspect-ratio: 16 / 9;
  perspective: 2000px;
  position: relative;
  width: min(64vw, 980px);
}

.slider-track {
  cursor: grab;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  user-select: none;
  width: 100%;
}

.slider-track.is-dragging {
  cursor: grabbing;
}

.project-card {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform-origin: center center;
  transition:
    transform 760ms var(--ease-premium),
    opacity 760ms ease,
    filter 760ms ease,
    box-shadow 760ms ease;
  width: 100%;
  will-change: transform, opacity, filter;
}

.project-card.is-active {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.6);
}

.project-card.is-playing .project-play {
  opacity: 0;
}

.project-poster,
.project-video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.project-video {
  border: 0;
}

.project-overlay {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(0deg, rgba(4, 7, 10, 0.66), transparent 36%);
  inset: 0;
  position: absolute;
}

.project-reflection {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 28%, transparent 62%, rgba(255, 255, 255, 0.08));
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.38;
  position: absolute;
}

.project-play {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 36px rgba(255, 255, 255, 0.1);
  color: #fff;
  display: inline-flex;
  font-size: 1.6rem;
  height: 92px;
  justify-content: center;
  left: 50%;
  opacity: 0;
  padding-left: 6px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease, transform 260ms ease, background 260ms ease;
  width: 92px;
}

.project-card.is-active .project-play {
  opacity: 1;
}

.project-card.is-active:hover .project-play {
  background: rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%) scale(1.06);
}

.slider-side {
  aspect-ratio: 4 / 7;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  opacity: 0.22;
  overflow: hidden;
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  width: clamp(120px, 11vw, 168px);
}

.slider-side::after {
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.2), rgba(10, 13, 18, 0.65));
  content: "";
  inset: 0;
  position: absolute;
}

.slider-side-left {
  left: max(-20px, 1vw);
}

.slider-side-right {
  right: max(-20px, 1vw);
}

.slider-controls {
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.4vh, 20px);
  transform: translateX(-50%);
  z-index: 7;
}

.slider-arrow {
  align-items: center;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: 62px;
  justify-content: center;
  position: relative;
  transition: transform 180ms ease, background 220ms ease, border-color 220ms ease;
  width: 62px;
}

.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

.halo-circle::before,
.halo-circle::after {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  content: "";
  inset: 4px;
  opacity: 0;
  position: absolute;
}

.halo-circle:hover::before {
  animation: circlePulse 1s ease forwards;
}

.halo-circle:hover::after {
  animation: circlePulse 1s ease 120ms forwards;
}

.hero-footer {
  align-items: end;
  bottom: clamp(20px, 4vh, 34px);
  display: flex;
  justify-content: space-between;
  left: var(--content-space);
  position: absolute;
  right: var(--content-space);
  z-index: 8;
}

.thumbs-panel {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(56vw, 760px);
}

.thumbs-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.thumbs-label,
.thumbs-counter {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.thumbs-counter {
  font-variant-numeric: tabular-nums;
}

.thumbs-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 2px;
  scrollbar-width: none;
}

.thumbs-strip::-webkit-scrollbar {
  display: none;
}

.thumb {
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  flex: none;
  height: 58px;
  overflow: hidden;
  position: relative;
  transition: transform 260ms var(--ease-premium), border-color 240ms ease, opacity 240ms ease, box-shadow 240ms ease;
  width: 58px;
}

.thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.72));
  content: "";
  inset: 0;
  opacity: 0.72;
  position: absolute;
  transition: opacity 260ms ease;
}

.thumb-progress {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  bottom: 6px;
  height: 3px;
  left: 6px;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  right: 6px;
  transform: translateY(2px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.thumb-progress-fill {
  background: #fff;
  border-radius: inherit;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  width: 100%;
}

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

.thumb.is-active {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 34px rgba(255, 255, 255, 0.18);
}

.thumb.is-active::before {
  opacity: 0.12;
}

.thumb.is-active .thumb-progress {
  opacity: 1;
  transform: translateY(0);
}

.contact-orbit {
  align-items: center;
  display: inline-flex;
  height: 78px;
  justify-content: center;
  position: relative;
  width: 78px;
}

.contact-orbit svg {
  animation: orbitSpin 14s linear infinite;
  height: 100%;
  width: 100%;
}

.contact-orbit text {
  fill: rgba(255, 255, 255, 0.82);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2.1px;
}

.contact-orbit::before {
  background: rgba(9, 12, 17, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
  inset: 16px;
  position: absolute;
}

.contact-orbit-arrow {
  font-size: 1.15rem;
  position: absolute;
}

@keyframes sweepDrift {
  0%,
  100% {
    transform: translate3d(-18%, -8%, 0) rotate(-6deg);
  }
  50% {
    transform: translate3d(18%, 8%, 0) rotate(-1deg);
  }
}

@keyframes gridFloat {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(1.08) translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.14) translateY(-1.5%);
  }
}

@keyframes noiseShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(3%, -2%); }
  60% { transform: translate(-2%, 3%); }
  80% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

@keyframes orbitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes circlePulse {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes buttonEcho {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  30% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@media (max-width: 1120px) {
  .hero-stage-copy {
    max-width: clamp(280px, 31vw, 420px);
  }

  .slider-side {
    opacity: 0.26;
    width: 132px;
  }
}

@media (max-width: 920px) {
  .site-nav {
    grid-template-columns: 1fr auto;
  }

  .site-nav-center {
    display: none;
  }

  .hero {
    display: block;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 24px;
  }

  .hero-stage {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
  }

  .hero-stage-copy {
    bottom: auto;
    left: auto;
    max-width: 100%;
    padding-bottom: 0;
    position: relative;
    z-index: 8;
  }

  .slider {
    justify-content: center;
    min-height: 54vh;
    padding-top: 8px;
    padding-right: 0;
  }

  .slider-frame {
    width: 88vw;
  }

  .slider-side {
    display: none;
  }

  .slider-controls {
    bottom: -70px;
  }

  .hero-footer {
    align-items: start;
    flex-direction: column;
    gap: 18px;
    left: auto;
    margin-top: 20px;
    position: relative;
    right: auto;
    bottom: auto;
  }

  .thumbs-panel {
    background: rgba(7, 10, 14, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 14px 14px 12px;
    max-width: 100%;
    width: 100%;
  }

  .contact-orbit {
    align-self: end;
    height: 68px;
    width: 68px;
  }
}

@media (max-width: 640px) {
  .brand-name {
    font-size: 1.2rem;
  }

  .brand-mark {
    height: 24px;
  }

  .hero-title {
    font-size: clamp(3.1rem, 18vw, 5.7rem);
  }

  .hero-stage-copy[data-title-size="medium"] .hero-title,
  .hero-stage-copy[data-title-size="long"] .hero-title,
  .hero-stage-copy[data-title-size="xlong"] .hero-title {
    font-size: clamp(2.95rem, 15vw, 5.3rem);
  }

  .hero-sub {
    font-size: 0.96rem;
    max-width: 32ch;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .hero-btn {
    justify-content: center;
    width: 100%;
  }

  .hero-link {
    align-self: flex-start;
  }

  .slider-frame {
    width: 92vw;
  }

  .slider-controls {
    bottom: -60px;
    gap: 10px;
  }

  .project-card,
  .project-poster,
  .project-video {
    border-radius: 18px;
  }

  .project-play {
    font-size: 1.35rem;
    height: 76px;
    width: 76px;
  }

  .thumb {
    height: 54px;
    width: 54px;
  }

  .thumbs-head {
    gap: 10px;
  }

  .thumbs-label,
  .thumbs-counter {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   THINK FIRST — scroll-pinned camera-lens reveal
   (zoom into the lens with the title engraved, smooth zoom-out
   reveals the shutter, it opens, the four elements push through)
   ============================================================ */
/* Cinematic Chemistry — produx-style scroll reveal */
.chem {
  height: 560vh;
  position: relative;
  z-index: 1;
}

.chem-sticky {
  align-items: center;
  background: #0a0c12;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100%;
}

/* moving electric-blue / violet gradient backdrop */
.chem-grad {
  animation: chemGrad 22s ease-in-out infinite alternate;
  background:
    radial-gradient(38% 46% at 24% 30%, rgba(46, 139, 255, 0.72), transparent 70%),
    radial-gradient(42% 52% at 78% 72%, rgba(123, 92, 255, 0.66), transparent 72%),
    radial-gradient(34% 42% at 62% 16%, rgba(34, 211, 238, 0.42), transparent 70%),
    radial-gradient(40% 46% at 50% 96%, rgba(80, 60, 220, 0.5), transparent 72%);
  filter: blur(44px) saturate(1.1);
  inset: -30%;
  position: absolute;
  will-change: transform;
  z-index: 0;
}

@keyframes chemGrad {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1.16); }
  50%  { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.32); }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-6deg) scale(1.2); }
}

/* the diagram group — scales, rotates and blurs across the scroll */
.chem-venn {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: 1;
}

/* laid out at 2x and shown at transform scale 0.5 — the browser caches a
   double-density raster, so the scroll zoom stays SHARP (Safari incl.) */
.chem-stage {
  flex: 0 0 auto; /* the 2x stage may exceed the flex container — never shrink it */
  height: min(172vmin, 2240px);
  width: min(172vmin, 2240px);
}

.chem-stage svg {
  height: 100%;
  overflow: visible;
  width: 100%;
}

.chem-stage .venn-code { font-family: var(--display); font-size: 64px; }
.chem-stage .venn-name { font-family: var(--sans); font-size: 25px; font-weight: 500; letter-spacing: 0.05em; }
.chem-stage .venn-edge { font-family: var(--sans); font-size: 17px; letter-spacing: 0.07em; }
/* RESOLVED — back inside the diagram (scales + rotates with the circles); dark halo + sheen + glow */
.chem-stage .venn-core { font-family: var(--sans); font-size: 24px; font-weight: 500; letter-spacing: 0.1em; text-shadow: 0 0 6px rgba(150, 190, 255, 0.5), 0 0 15px rgba(80, 140, 255, 0.32); }

/* intro: radial tick-ring + headline, shrinks and fades out early */
.chem-intro {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  z-index: 2;
}

.chem-ring {
  height: min(86vmin, 800px);
  position: absolute;
  width: min(86vmin, 800px);
}

.chem-ring svg { height: 100%; width: 100%; }

.chem-introtext {
  color: #eef1ea;
  font-family: var(--sans);
  font-size: clamp(3.4rem, 8.8vmin, 6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.12;
  max-width: 9em;
  position: relative;
  text-align: center;
}

/* end cards — rise up from the bottom edge into a staircase over the blurred diagram */
.chem-cards {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.chem-card {
  backdrop-filter: blur(3px);
  background: rgba(12, 14, 22, 0.5);
  border: 1px solid rgba(210, 222, 255, 0.16);
  border-radius: 14px;
  opacity: 1;
  padding: clamp(28px, 2.2vw, 52px) clamp(24px, 2vw, 46px);
  pointer-events: auto;
  position: absolute;
  transform: translateY(120vh);
  width: clamp(260px, 24vw, 480px);
  will-change: transform;
}

.chem-card:nth-child(1) { bottom: 7%; left: 3.5%; }
.chem-card:nth-child(2) { bottom: 23%; left: 33%; }
.chem-card:nth-child(3) { bottom: 39%; left: 60.5%; }

.chem-card-title {
  color: #eef2fb;
  font-family: var(--sans);
  font-size: clamp(1.55rem, 2.2vw, 2.7rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.18;
  margin: 0 0 2.3em;
}

.chem-card-body {
  color: rgba(228, 234, 248, 0.76);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  line-height: 1.72;
  margin: 0;
}

/* Mobile (≤860px) — GUARANTEED-SMOOTH variant: the circles hold their resting
   size and FADE + DRIFT into place (no heavy zoom scrub → no per-frame SVG
   re-raster = buttery), then the three cards present ONE AT A TIME centred in
   the pinned viewport. (script.js render() mobile branch drives it.) The intro
   headline + tick-ring belong to the desktop zoom act, so they're hidden here.
   Also applies to touch tablets (iPads) >860px via (pointer: coarse). */
@media (max-width: 860px), (pointer: coarse) {
  /* shorter scroll runway on touch: the whole sequence plays in ~2.8 screens
     instead of ~4.6, so the diagram + cards arrive noticeably faster */
  .chem { height: 380vh; }
  .chem-stage { height: min(94vmin, 560px); width: min(94vmin, 560px); }
  .chem-intro { display: none; }
  .chem-card,
  .chem-card:nth-child(1),
  .chem-card:nth-child(2),
  .chem-card:nth-child(3) {
    bottom: auto;
    left: 50%;
    max-height: 84vh;
    opacity: 0;
    overflow-y: auto;
    padding: clamp(18px, 3.2vh, 34px) clamp(18px, 4.5vw, 28px);
    top: 50%;
    transform: translate(-50%, -50%) translateY(46px);
    width: min(88vw, 500px);
  }
  .chem-card-title { font-size: clamp(1.3rem, 2.6vh, 1.5rem); margin: 0 0 1.2em; }
  .chem-card-body { font-size: clamp(0.9rem, 2vh, 1rem); }
}

/* Touch tablets (iPads) — screens WIDER than a phone: scale the diagram right
   up to fill the big screen. The SVG carries ~9% padding around the visible
   circles+labels, so a 108vmin stage renders the artwork at ~88% of the
   viewport's short side — large, responsive, and the labels never clip.
   (Phones ≤860px keep their own size above; mouse/desktop is untouched.) */
@media (pointer: coarse) and (min-width: 861px) {
  .chem-stage { height: min(108vmin, 1180px); width: min(108vmin, 1180px); }
  .chem-card { width: min(70vw, 620px); }
  .chem-card-title { font-size: clamp(1.5rem, 3.4vh, 2rem); }
  .chem-card-body { font-size: clamp(1rem, 2.2vh, 1.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-image,
  .project-card,
  .thumb,
  .text-mask-inner,
  .slider-arrow,
  .contact-orbit svg,
  .bg-sweep,
  .bg-grid,
  .bg-noise {
    animation: none !important;
    transition: none !important;
  }

  .chem { height: 100vh; }
  .chem-sticky { position: relative; }
  .chem-grad { animation: none !important; }
  .chem-intro { display: none; }
  .chem-cards { display: none; }
  .pa-panel, .pa-img, .pa-scrim, .pa-cap { transition: none !important; }
}

/* ============================================================
   Photography — produx-style contained accordion + intro reveal
   ============================================================ */
.photo {
  background: #0b0805;
  position: relative;
  z-index: 1;
  padding-bottom: clamp(64px, 10vh, 130px);
}

/* drifting warm-ember background (mirrors the Chemistry gradient motion) */
.photo-grad {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.photo-grad::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(50% 56% at 78% 8%, rgba(150, 85, 35, 0.5), transparent 70%),
    radial-gradient(42% 48% at 28% 40%, rgba(200, 120, 45, 0.34), transparent 72%),
    radial-gradient(34% 40% at 62% 60%, rgba(225, 160, 75, 0.24), transparent 70%),
    radial-gradient(46% 52% at 54% 98%, rgba(115, 46, 26, 0.42), transparent 72%);
  filter: blur(46px) saturate(1.08);
  animation: photoGrad 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes photoGrad {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.14); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(7deg) scale(1.3); }
  100% { transform: translate3d(-2%, 2%, 0) rotate(-5deg) scale(1.18); }
}

/* pinned scroll-reveal intro line (produx-style) — the line holds centred
   and fills in word-by-word as you scroll through the tall stage */
.pi-stage {
  position: relative;
  z-index: 1;
  height: 185vh;
}
.pi-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
.pi-text {
  max-width: min(86vw, 1440px);
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 96px);
  font-family: "Space Grotesk", var(--sans);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 4.8rem);
  line-height: 1.32;
  letter-spacing: 0.002em;
  color: #f6f1ea;
  text-indent: clamp(44px, 9vw, 200px);
}
.pi-text .pw {
  opacity: 0.1;
  will-change: opacity;
}

/* contained accordion */
.pa-wrap {
  max-width: min(92vw, 1760px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3.2vw, 48px);
  position: relative;
  z-index: 1;
  min-height: 175vh;
}
/* the accordion pins vertically centred while the section is in view */
.pa-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pa-row {
  display: flex;
  gap: clamp(7px, 0.7vw, 12px);
  height: clamp(440px, 62vh, 700px);
  width: 100%;
}

.pa-panel {
  cursor: pointer;
  filter: brightness(0.46) saturate(0.88);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1), flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
}

/* the open panel (JS keeps the LAST-hovered one open) expands to a square + brightens */
.pa-panel.is-open { flex: 0 0 clamp(440px, 62vh, 700px); filter: brightness(1) saturate(1); }

/* Portrait tablets (e.g. iPad held vertically): the height-based active panel
   would swallow almost the whole narrow width and squeeze the other photos to
   slivers. Size it by viewport WIDTH here so the inactive strips stay visible —
   matching the landscape balance. (Phones ≤860px use the stacked version.) */
@media (orientation: portrait) and (min-width: 861px) {
  .pa-row { height: min(48vw, 62vh); }
  .pa-panel.is-open { flex: 0 0 min(48vw, 62vh); }
}

.pa-img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
  transition: transform 0.8s ease;
  width: 100%;
}
/* very subtle continuous zoom-in on the active photo */
@keyframes paZoom { from { transform: scale(1.002); } to { transform: scale(1.055); } }
.pa-panel.is-open .pa-img { animation: paZoom 11s ease-out forwards; }

.pa-scrim {
  background: linear-gradient(to top, rgba(6, 8, 14, 0.86) 0%, rgba(6, 8, 14, 0.3) 28%, transparent 56%);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.5s ease;
}
.pa-panel.is-open .pa-scrim { opacity: 1; }

.pa-cap {
  bottom: clamp(22px, 3.4vh, 42px);
  left: clamp(22px, 2vw, 38px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: clamp(18px, 2vw, 38px);
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.06s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}
.pa-panel.is-open .pa-cap { opacity: 1; transform: none; }

.pa-title {
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(1.5rem, 2.1vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.004em;
  line-height: 1.12;
  margin: 0 0 0.45em;
}
.pa-line {
  color: rgba(238, 242, 248, 0.88);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}

@media (prefers-reduced-motion: reduce) {
  .pa-img, .pa-panel.is-open .pa-img { animation: none !important; transform: none !important; }
  .photo-grad::before { animation: none !important; }
  .pi-text .pw { opacity: 1 !important; }
}

@media (max-width: 860px) {
  .pi-stage { height: auto; }
  .pi-sticky { position: static; height: auto; padding: 78px 0 60px; }
  .pi-text { padding: 0 22px; font-size: clamp(1.35rem, 6vw, 1.9rem); text-indent: 28px; }
  .pi-text .pw { opacity: 1; }
  .pa-wrap { padding: 0 14px; min-height: 0; }
  .pa-sticky { position: static; height: auto; }
  .pa-row { flex-direction: column; gap: 12px; height: auto; }
  .pa-panel, .pa-panel.is-open { aspect-ratio: 1 / 1; cursor: default; filter: brightness(1) saturate(1); flex: none; height: auto; }
  .pa-img, .pa-panel.is-open .pa-img { animation: none; transform: none; }
  .pa-scrim, .pa-panel.is-open .pa-scrim { opacity: 1; }
  .pa-cap, .pa-panel.is-open .pa-cap { opacity: 1; transform: none; }
  .pa-title { font-size: 1.55rem; }
}

/* ============================================================
   Contact — curtain-lift footer (revealed from behind the photos)
   ============================================================ */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: #08090d;
  color: #e9ecef;
  overflow: hidden;
}
.ft-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(46px, 6.5vh, 86px) clamp(24px, 5vw, 84px) clamp(26px, 3.6vh, 46px);
}
.ft-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 70px);
}
.ft-col { display: flex; flex-direction: column; }
.ft-label {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(233, 236, 243, 0.46);
  margin: 0 0 1.4em;
}
.ft-label::after { content: " /"; }
.ft-link,
.ft-line {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.95;
  color: rgba(233, 236, 243, 0.84);
  text-decoration: none;
}
.ft-link { transition: color 0.25s ease; }
.ft-link:hover { color: #fff; }
.ft-cta-head {
  font-family: "Space Grotesk", var(--sans);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.9vw, 1.95rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 0.6em;
}
.ft-contact {
  display: block;
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(233, 236, 243, 0.82);
  text-decoration: none;
  transition: color 0.25s ease;
}
.ft-contact:hover { color: #fff; }
.ft-icons { display: flex; gap: 14px; }
.ft-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(233, 236, 243, 0.22);
  border-radius: 50%;
  color: rgba(233, 236, 243, 0.78);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.ft-icon svg { width: 19px; height: 19px; }
.ft-icon:hover { color: #08090d; background: #fff; border-color: #fff; }
.ft-wordmark {
  font-family: "Space Grotesk", var(--sans);
  font-weight: 500;
  font-size: clamp(3rem, 17.3vw, 16rem);
  letter-spacing: -0.02em;
  line-height: 0.86;
  text-align: center;
  white-space: nowrap;
  color: #f1ede6;
  margin: clamp(26px, 4.6vh, 64px) 0 0;
}
.ft-base {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(14px, 2.2vh, 28px);
}
.ft-copy {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgba(233, 236, 243, 0.4);
}

@media (max-width: 860px) {
  .site-footer { position: static; }
  .page-shell { margin-bottom: 0 !important; }
  .ft-inner { padding: 64px 22px 40px; }
  .ft-cols { flex-direction: column; gap: 34px; }
  .ft-wordmark { font-size: 15vw; letter-spacing: -0.03em; margin-top: 44px; }
  .ft-base { justify-content: flex-start; margin-top: 28px; }
}

/* ============================================================
   Subpages — service pages (video-production / photography / ai-visuals)
   ============================================================ */
body.subpage { background: #0a0c12; }
body.subpage .site-footer { position: static; }

.page-nav {
  align-items: center;
  background: linear-gradient(180deg, rgba(10, 12, 18, 0.88), rgba(10, 12, 18, 0));
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 18px clamp(20px, 3vw, 44px) 26px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 40;
}
.page-nav .brand { align-items: center; display: flex; gap: 10px; text-decoration: none; }
.page-nav .brand img { height: 30px; width: auto; }
.page-nav .brand span { color: #fff; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.06em; }
.page-nav-links { align-items: center; display: flex; gap: 22px; }
.page-nav-links a {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.page-nav-links a:hover, .page-nav-links a.is-current { color: #fff; }

.svc { margin: 0 auto; max-width: min(90vw, 1240px); padding: clamp(120px, 16vh, 190px) clamp(20px, 3vw, 44px) clamp(70px, 9vh, 120px); }
.svc-eyebrow { color: rgba(233, 236, 243, 0.5); font-family: var(--sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.22em; margin: 0 0 1.6em; text-transform: uppercase; }
.svc h1 { color: #f3f5fa; font-family: "Space Grotesk", var(--sans); font-size: clamp(2.4rem, 4.6vw, 4.6rem); font-weight: 500; line-height: 1.08; margin: 0 0 0.45em; max-width: 18ch; }
.svc-lead { color: rgba(228, 234, 246, 0.78); font-family: var(--sans); font-size: clamp(1.05rem, 1.35vw, 1.4rem); line-height: 1.7; margin: 0; max-width: 62ch; }
.svc-h2 { color: #eef1f8; font-family: "Space Grotesk", var(--sans); font-size: clamp(1.5rem, 2.3vw, 2.3rem); font-weight: 500; margin: clamp(60px, 9vh, 110px) 0 1.1em; }

.svc-grid { display: grid; gap: clamp(14px, 1.4vw, 22px); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.svc-box { background: rgba(12, 14, 22, 0.55); border: 1px solid rgba(210, 222, 255, 0.14); border-radius: 14px; padding: clamp(22px, 2vw, 34px); }
.svc-box h3 { color: #eef2fb; font-family: var(--sans); font-size: clamp(1.15rem, 1.4vw, 1.45rem); font-weight: 500; line-height: 1.25; margin: 0 0 0.7em; }
.svc-box p { color: rgba(228, 234, 248, 0.72); font-family: var(--sans); font-size: clamp(0.98rem, 1.05vw, 1.12rem); line-height: 1.65; margin: 0; }

.films-grid { display: grid; gap: clamp(16px, 1.6vw, 26px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.yt { aspect-ratio: 16 / 9; background-position: center; background-size: cover; border-radius: 12px; cursor: pointer; overflow: hidden; position: relative; }
.yt::after { background: rgba(6, 8, 14, 0.25); content: ""; inset: 0; position: absolute; transition: background 0.3s ease; }
.yt:hover::after { background: rgba(6, 8, 14, 0.05); }
.yt-play {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.05rem;
  height: 64px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
  width: 64px;
  z-index: 2;
}
.yt:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; }
.film-cap { color: rgba(233, 238, 248, 0.8); font-family: var(--sans); font-size: 0.98rem; line-height: 1.5; margin: 10px 4px 0; }
.film-cap strong { color: #fff; font-weight: 500; }

.photo-cats { display: grid; gap: clamp(14px, 1.5vw, 24px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.photo-cat img { aspect-ratio: 1 / 1; border-radius: 12px; display: block; object-fit: cover; width: 100%; }
.photo-cat h3 { color: #eef2fb; font-family: var(--sans); font-size: 1.12rem; font-weight: 500; margin: 0.9em 0 0.35em; }
.photo-cat p { color: rgba(228, 234, 248, 0.7); font-family: var(--sans); font-size: 0.96rem; line-height: 1.6; margin: 0; }

.svc-steps { display: grid; gap: clamp(14px, 1.6vw, 26px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.svc-step span { color: rgba(180, 205, 255, 0.55); display: block; font-family: "Space Grotesk", var(--sans); font-size: clamp(1.9rem, 2.6vw, 2.7rem); font-weight: 500; margin-bottom: 0.35em; }
.svc-step h3 { color: #eef2fb; font-family: var(--sans); font-size: 1.2rem; font-weight: 500; margin: 0 0 0.5em; }
.svc-step p { color: rgba(228, 234, 248, 0.72); font-family: var(--sans); font-size: 1rem; line-height: 1.65; margin: 0; }

.svc-faq { max-width: 860px; }
.svc-faq details { border-top: 1px solid rgba(210, 222, 255, 0.14); }
.svc-faq details:last-child { border-bottom: 1px solid rgba(210, 222, 255, 0.14); }
.svc-faq summary { color: #eef2fb; cursor: pointer; font-family: var(--sans); font-size: clamp(1.05rem, 1.2vw, 1.25rem); font-weight: 500; list-style: none; padding: 20px 44px 20px 2px; position: relative; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { color: rgba(233, 238, 248, 0.6); content: "+"; font-size: 1.5rem; font-weight: 300; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); transition: transform 0.25s ease; }
.svc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.svc-faq details p { color: rgba(228, 234, 248, 0.74); font-family: var(--sans); font-size: 1.02rem; line-height: 1.7; margin: 0; max-width: 68ch; padding: 0 2px 22px; }

.svc-cta { background: rgba(12, 14, 22, 0.5); border: 1px solid rgba(210, 222, 255, 0.14); border-radius: 18px; margin-top: clamp(60px, 9vh, 110px); padding: clamp(40px, 5vw, 70px); text-align: center; }
.svc-cta h2 { color: #f3f5fa; font-family: "Space Grotesk", var(--sans); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; margin: 0 0 0.9em; }
.svc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-btn { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; color: #fff; display: inline-block; font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; padding: 14px 30px; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.cta-btn:hover { background: #fff; border-color: #fff; color: #0a0c12; }
.cta-btn--solid { background: #fff; border-color: #fff; color: #0a0c12; }
.cta-btn--solid:hover { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }

/* homepage service cards are now links to the service pages */
.chem-card { transition: border-color 0.3s ease; }
.chem-card:hover { border-color: rgba(210, 222, 255, 0.34); }
.chem-card-link { color: rgba(180, 205, 255, 0.9); display: inline-block; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.03em; margin-top: 1.6em; text-decoration: none; }
.chem-card-link::before { content: ""; inset: 0; position: absolute; }
.chem-card-link::after { content: " →"; }

@media (max-width: 860px) {
  .page-nav { padding: 14px 18px 20px; }
  .page-nav-links { gap: 14px; }
  .svc { padding-top: 104px; }
  .svc h1 { font-size: 2.1rem; }
}

/* ============================================================
   Subpage motion — ambient drift, entrance, scroll reveals
   ============================================================ */
.page-grad { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 0; }
.page-grad::before {
  animation: pageDrift 26s ease-in-out infinite alternate;
  content: "";
  filter: blur(52px) saturate(1.06);
  inset: -25%;
  position: absolute;
  will-change: transform;
}
.page-grad--video::before {
  background:
    radial-gradient(44% 52% at 22% 18%, rgba(46, 139, 255, 0.32), transparent 70%),
    radial-gradient(40% 48% at 80% 66%, rgba(123, 92, 255, 0.26), transparent 72%),
    radial-gradient(36% 44% at 60% 8%, rgba(34, 211, 238, 0.15), transparent 70%),
    radial-gradient(42% 50% at 46% 96%, rgba(80, 60, 220, 0.2), transparent 72%);
}
.page-grad--photo::before {
  background:
    radial-gradient(46% 54% at 76% 10%, rgba(150, 85, 35, 0.34), transparent 70%),
    radial-gradient(40% 48% at 24% 44%, rgba(200, 120, 45, 0.22), transparent 72%),
    radial-gradient(34% 40% at 60% 64%, rgba(225, 160, 75, 0.15), transparent 70%),
    radial-gradient(44% 52% at 52% 98%, rgba(115, 46, 26, 0.26), transparent 72%);
}
.page-grad--ai::before {
  background:
    radial-gradient(44% 52% at 20% 16%, rgba(34, 211, 238, 0.24), transparent 70%),
    radial-gradient(42% 50% at 78% 60%, rgba(123, 92, 255, 0.28), transparent 72%),
    radial-gradient(36% 44% at 58% 6%, rgba(46, 139, 255, 0.17), transparent 70%),
    radial-gradient(42% 50% at 48% 98%, rgba(60, 40, 160, 0.22), transparent 72%);
}
@keyframes pageDrift {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.12); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.26); }
  100% { transform: translate3d(-2%, 2%, 0) rotate(-5deg) scale(1.16); }
}
.svc { position: relative; z-index: 1; }
body.subpage .site-footer { position: relative; z-index: 1; }

/* hero entrance — eyebrow, headline and lead rise in on load */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.svc-eyebrow { animation: riseIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s backwards; }
.svc h1 { animation: riseIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s backwards; }
.svc-lead { animation: riseIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s backwards; }

/* scroll reveals — page.js adds .rv (so content is never hidden without JS) */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  transition-delay: var(--rvd, 0s), var(--rvd, 0s), 0s, 0s;
  will-change: opacity, transform;
}
.rv.is-in { opacity: 1; transform: none; }

/* micro-interactions */
.svc-box, .svc-step { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.svc-box:hover { border-color: rgba(180, 205, 255, 0.38); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35); }
.photo-cat img { transition: transform 0.6s ease; }
.photo-cat:hover img { transform: scale(1.04); }
.yt { transition: transform 0.45s ease; }
.yt:hover { transform: scale(1.012); }
.cta-btn { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.cta-btn:hover { transform: translateY(-2px); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.svc-faq details[open] p { animation: faqIn 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .page-grad::before { animation: none !important; }
  .svc-eyebrow, .svc h1, .svc-lead { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-faq details[open] p { animation: none !important; }
  .photo-cat img, .yt, .cta-btn { transition: none !important; }
}

/* ============================================================
   Clients — infinite logo marquee (homepage)
   ============================================================ */
.clients {
  background: #0a0c12;
  padding: clamp(56px, 9vh, 100px) 0 clamp(60px, 10vh, 110px);
  position: relative;
  z-index: 1;
}
.cl-label {
  color: rgba(233, 236, 243, 0.6);
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.1vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  margin: 0 0 clamp(40px, 6vh, 66px);
  text-align: center;
  text-transform: uppercase;
}
.cl-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cl-track {
  align-items: center;
  animation: clMarquee 55s linear infinite;
  display: flex;
  width: max-content;
  will-change: transform;
}
.cl-track:hover { animation-play-state: paused; }
.cl-copy { display: contents; }
.cl-track img {
  display: block;
  height: clamp(46px, 4.6vw, 70px);
  margin-right: clamp(66px, 8vw, 130px);
  opacity: 0.65;
  transition: opacity 0.3s ease;
  width: auto;
}
.cl-track img:hover { opacity: 1; }
.cl-track img.cl-tall { height: clamp(86px, 8vw, 126px); }
.cl-track img.cl-big { height: clamp(58px, 5.7vw, 88px); }
.cl-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: clamp(66px, 8vw, 130px);
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
.cl-item:hover { opacity: 1; }
.cl-item img { margin-right: 0; opacity: 1; }
.cl-name {
  color: #f1ede6;
  font-family: var(--sans);
  font-size: clamp(0.85rem, 0.95vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.26em;
}
@keyframes clMarquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-track { animation: none !important; flex-wrap: wrap; justify-content: center; row-gap: 26px; width: auto; }
  .cl-copy { display: none; }
}
@media (max-width: 860px) {
  .cl-label { font-size: 1.2rem; }
  .cl-track img { height: 38px; margin-right: 52px; }
  .cl-track img.cl-tall { height: 74px; }
  .cl-track img.cl-big { height: 48px; }
  .cl-item { margin-right: 52px; }
  .cl-item img { margin-right: 0; }
  .cl-name { font-size: 0.78rem; }
}

/* ============================================================
   Smoothness — iOS-safe hero carousel + calm chem layers
   ============================================================ */
/* Hero carousel: flat 2D on ANY touch device (phones AND iPads) — Safari drops
   composited tiles on filtered 3D stacks, whatever the screen width */
@media (max-width: 860px), (pointer: coarse) {
  .slider-frame { perspective: none; }
  .slider-track { transform-style: flat; }
  .project-card {
    transition:
      transform 640ms var(--ease-premium),
      opacity 480ms ease,
      box-shadow 640ms ease;
    will-change: transform, opacity;
  }
}
/* Chem: on phones, kill the heaviest costs. The ambient gradient's blur(44px)
   on an oversized layer is expensive for the compositor to blend under the
   scaling circles EVERY frame — drop the filter (radial gradients are already
   soft) and shrink it to the viewport. Cards get a solid tint, not a live blur.
   Also applies to touch tablets (iPads) >860px via (pointer: coarse). */
@media (max-width: 860px), (pointer: coarse) {
  .chem-grad {
    animation: none;
    filter: none;
    inset: 0;
    will-change: auto;
  }
  .chem-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(12, 14, 22, 0.85);
  }
}

/* ============================================================
   Contact form — native inquiry form in the footer (Web3Forms)
   ============================================================ */
/* standalone section at the end of the page flow — the footer curtain
   reveals AFTER it, back at its original compact height */
.cf {
  margin: 0 auto;
  max-width: 1500px;
  padding: clamp(70px, 9vw, 120px) clamp(24px, 5vw, 84px) clamp(80px, 10vw, 140px);
  position: relative;
  z-index: 1;
}
.cf-head {
  color: #eef2fb;
  font-family: var(--sans);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  margin: 0 0 8px;
}
.cf-sub {
  color: rgba(228, 234, 248, 0.62);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  margin: 0 0 26px;
}
.cf-form {
  display: grid;
  gap: 16px clamp(16px, 2vw, 28px);
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
}
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field-full { grid-column: 1 / -1; }
.cf-field label {
  color: rgba(228, 234, 248, 0.6);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(210, 222, 255, 0.18);
  border-radius: 10px;
  color: #eef2fb;
  font-family: var(--sans);
  font-size: 1rem;
  outline: none;
  padding: 13px 15px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
}
.cf-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(228,234,248,0.7) 50%), linear-gradient(135deg, rgba(228,234,248,0.7) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-repeat: no-repeat; background-size: 6px 6px; cursor: pointer; }
.cf-field select option { background: #10131c; color: #eef2fb; }
.cf-field textarea { min-height: 120px; resize: vertical; }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(180, 205, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(120, 160, 255, 0.14);
}
.cf-hp { display: none !important; }
.cf-err {
  color: #ffb4b4;
  font-family: var(--sans);
  font-size: 0.95rem;
  grid-column: 1 / -1;
  margin: 0;
}
.cf-btn {
  background: #f4f6fb;
  border: none;
  border-radius: 999px;
  color: #0a0c12;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  justify-self: start;
  letter-spacing: 0.06em;
  padding: 15px 42px;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.cf-btn:hover { box-shadow: 0 8px 30px rgba(160, 190, 255, 0.25); transform: translateY(-2px); }
.cf-btn:disabled { cursor: default; opacity: 0.55; transform: none; }
.cf-done { max-width: 880px; padding: 26px 0 10px; }
.cf-done-title {
  color: #eef2fb;
  font-family: var(--sans);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 500;
  margin: 0 0 8px;
}
.cf-done-text {
  color: rgba(228, 234, 248, 0.72);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  margin: 0;
}
@media (max-width: 700px) {
  .cf-form { grid-template-columns: 1fr; }
  .cf-btn { justify-self: stretch; width: 100%; }
}