/* ========== PAGE TRANSITION ========== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-cursor) + 5);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.page-transition__panel {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #04050a 0%, #0a1226 48%, #150a2e 100%);
  transform-origin: top center;
}

/* ========== PAGE HERO ========== */
/* Sub-page headers echo the homepage hero: near-black with the glow parked right. */
.page-hero {
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-8);
  background:
    radial-gradient(ellipse 34% 46% at 88% 42%, rgba(43, 104, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 20% 26% at 94% 74%, rgba(255, 92, 196, 0.12), transparent 68%),
    radial-gradient(ellipse 18% 24% at 76% 16%, rgba(70, 224, 255, 0.12), transparent 66%),
    var(--bg-950);
}

.page-hero .section__title {
  max-width: 18ch;
}

.page-hero--studio,
.page-hero--about {
  background:
    radial-gradient(ellipse 34% 44% at 84% 34%, rgba(79, 125, 255, 0.24), transparent 68%),
    radial-gradient(ellipse 22% 28% at 92% 76%, rgba(168, 85, 247, 0.16), transparent 66%),
    radial-gradient(ellipse 20% 26% at 68% 12%, rgba(70, 224, 255, 0.14), transparent 64%),
    var(--bg-950);
}

.legal-page {
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 4.5rem;
  min-height: 60svh;
  max-width: 52rem;
}

.legal-page__intro {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--surface-line);
}

.legal-page__intro .section__label {
  margin-bottom: var(--space-3);
}

.legal-page h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 18ch;
}

.legal-page__meta {
  margin: 0 0 var(--space-4);
  color: var(--text-low);
  font-size: 0.9rem;
}

.legal-page section {
  margin-bottom: var(--space-6);
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.85rem;
  color: var(--text-hi);
}

.legal-page h3 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 1.25rem 0 0.55rem;
  color: var(--text-hi);
}

.legal-page p,
.legal-page li {
  color: var(--text-mid);
  margin-bottom: 0.75rem;
  max-width: 70ch;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.legal-page strong {
  color: var(--text-hi);
  font-weight: 600;
}

.legal-page a {
  color: rgba(70, 224, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal-page a:hover {
  color: var(--text-hi);
}

.legal-page ul {
  padding-left: 1.25rem;
  list-style: disc;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.legal-page__back {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--surface-line);
  max-width: none;
}

.legal-page__back a {
  text-decoration: none;
}

/* ========== CTA BAND ========== */
.cta-band {
  --cta-pad-y: clamp(3rem, 7vw, 4.75rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--surface-line);
  padding-block: var(--cta-pad-y);
  background:
    radial-gradient(ellipse 46% 120% at 88% 50%, rgba(79, 125, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 100% at 98% 70%, rgba(255, 110, 199, 0.14), transparent 70%),
    radial-gradient(ellipse 34% 90% at 18% 40%, rgba(70, 224, 255, 0.1), transparent 68%),
    var(--bg-950);
}

.cta-band__ambient {
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 48%, rgba(70, 224, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 62%, rgba(124, 92, 255, 0.16), transparent 30%);
}

@media (prefers-reduced-motion: no-preference) {
  .cta-band:not(.is-offscreen) .cta-band__ambient {
    animation: cta-ambient 8s ease-in-out infinite;
  }
}

@keyframes cta-ambient {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.06) translate3d(-1.5%, 1%, 0);
  }
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.cta-band__copy .section__label {
  margin-bottom: var(--space-3);
}

.cta-band__copy h2 {
  max-width: 16ch;
  margin-bottom: 0;
}

.cta-band__lead {
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  color: var(--text-mid);
  font-size: 0.975rem;
  line-height: 1.55;
}

.cta-band__signal {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  pointer-events: none;
}

.cta-band__words {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(70, 224, 255, 0.12);
  user-select: none;
}

.cta-band__words span {
  grid-area: 1 / 1;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-band:not(.is-offscreen) .cta-band__words span {
    animation: cta-word 9s ease-in-out infinite;
  }

  .cta-band:not(.is-offscreen) .cta-band__words span:nth-child(2) {
    animation-delay: 3s;
  }

  .cta-band:not(.is-offscreen) .cta-band__words span:nth-child(3) {
    animation-delay: 6s;
  }
}

@keyframes cta-word {
  0%,
  8% {
    opacity: 0;
    transform: translateY(10px);
  }
  16%,
  28% {
    opacity: 1;
    transform: none;
  }
  36%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.cta-band__rail {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}

.cta-band__wire {
  fill: none;
  stroke: rgba(70, 224, 255, 0.28);
  stroke-width: 1.25;
}

.cta-band__node {
  fill: #46e0ff;
  filter: drop-shadow(0 0 8px rgba(70, 224, 255, 0.7));
}

.cta-band__carrier {
  fill: #fff;
  filter: drop-shadow(0 0 10px rgba(70, 224, 255, 0.9));
}

html[data-motion="reduce"] .cta-band__ambient,
html[data-motion="reduce"] .cta-band__words span,
.cta-band.is-offscreen .cta-band__ambient,
.cta-band.is-offscreen .cta-band__words span {
  animation: none !important;
}

html[data-motion="reduce"] .cta-band__words span:first-child {
  opacity: 1;
  transform: none;
}

html[data-motion="reduce"] .cta-band__carrier {
  display: none;
}

.cta-band__action {
  justify-self: start;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
    gap: var(--space-7);
  }

  .cta-band__signal {
    display: grid;
  }

  .cta-band__action {
    justify-self: end;
  }
}

/* 404 */
.not-found-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
  padding-top: calc(var(--header-h) + var(--space-8));
  background:
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(79, 125, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 30% 26% at 62% 58%, rgba(168, 85, 247, 0.12), transparent 62%),
    var(--bg-950);
}

.not-found-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 10rem);
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}

.not-found-page h1 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.not-found-page p {
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--text-mid);
}


/* ========== ABOUT ========== */
/* Starts on the hero's exact near-black and eases up a shade, so the fold
   between hero and page reads as one surface instead of a step. */
.about {
  background: linear-gradient(180deg, var(--bg-950) 0%, var(--bg-900) 55%);
}

/* Legacy / About Us page text split */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-9);
  }

  .about__grid .about__statement {
    margin-bottom: 0;
  }
}

.about__split {
  display: grid;
  grid-template-columns: 1fr;
}

.about__media {
  position: relative;
  margin: 0;
  isolation: isolate;
  min-height: min(52vw, 340px);
  padding: var(--gutter);
  perspective: 900px;
}

.about__media-stage {
  position: relative;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0d16;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(70, 224, 255, 0.08);
  transform-style: preserve-3d;
  will-change: transform;
}

.about__media-stage::before,
.about__media-stage::after {
  content: "";
  position: absolute;
  width: 1.65rem;
  height: 1.65rem;
  z-index: 4;
  pointer-events: none;
  border: 1.5px solid rgba(70, 224, 255, 0.7);
}

.about__media-stage::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}

.about__media-stage::after {
  right: 12px;
  bottom: 12px;
  border-left: 0;
  border-top: 0;
}

.about__media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.1);
  filter: saturate(0.92) contrast(1.05);
  will-change: transform;
  animation: about-kenburns 18s ease-in-out infinite alternate;
}

.about__media::after {
  content: "";
  position: absolute;
  inset: var(--gutter);
  border-radius: 1.35rem;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 58%, rgba(4, 5, 10, 0.62) 100%),
    linear-gradient(90deg, transparent 70%, rgba(4, 5, 10, 0.28) 100%);
}

.about__caption {
  position: absolute;
  left: calc(var(--gutter) + 1.15rem);
  bottom: calc(var(--gutter) + 1rem);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-hi);
}

.about__copy {
  display: flex;
  align-items: center;
}

.about__copy-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
}

.about__copy .section__label {
  margin-bottom: var(--space-4);
}

.about__statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.about__statement .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about__body {
  color: var(--text-mid);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  max-width: 42ch;
}

.about__body + .about__body {
  margin-top: var(--space-4);
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--surface-line);
}

.about__facts dt {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -0.03em;
  color: var(--text-hi);
  line-height: 1.1;
}

.about__facts dd {
  margin: 0.3rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}

.about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.about .section__actions {
  margin-top: var(--space-5);
}

@keyframes about-kenburns {
  from {
    transform: scale(1.1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.2) translate3d(-2.2%, -1.8%, 0);
  }
}

html[data-motion="reduce"] .about__media img {
  animation: none;
  transform: none;
}

@media (min-width: 900px) {
  .about__split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }

  .about__media {
    min-height: 0;
    height: 100%;
    padding: clamp(1.25rem, 2.8vh, 2rem) 0 clamp(1.25rem, 2.8vh, 2rem) var(--gutter);
  }

  .about__copy-inner {
    padding: var(--space-8) clamp(1.5rem, 4vw, 3.5rem) var(--space-8) clamp(1.25rem, 3vw, 2.5rem);
    max-width: none;
  }
}

/* ========== SERVICE CATALOG (services.php) ========== */
.service-catalog {
  background: var(--bg-800);
}

/* ========== AI SECTION ========== */
.ai__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.ai__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out),
    border-color var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out);
}

/* Gradient rail on the active item — same accent order as the hero headline */
.ai__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 2px;
  border-radius: 2px;
  background: var(--grad-brand-v);
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease-out);
}

.ai__item:hover,
.ai__item.is-active {
  background: var(--surface-card-hover);
  border-color: var(--surface-line);
  transform: translateX(4px);
}

.ai__item.is-active::before {
  opacity: 1;
}

.ai__item-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--text-hi);
  font-weight: 500;
}

.ai__item-desc {
  font-size: 0.9375rem;
  color: var(--text-low);
  display: block;
}

.ai__item.is-active .ai__item-desc {
  color: var(--text-mid);
}

.ai__canvas,
.ai__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ai__fallback {
  display: none;
  align-items: center;
  justify-content: center;
}

.ai__fallback.is-visible {
  display: flex;
}

.ai__fallback svg {
  width: 80%;
  height: 80%;
  opacity: 0.7;
}

/* ========== PORTFOLIO ========== */
.portfolio {
  background: var(--bg-800);
}

.portfolio__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.project {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.project__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-card-line);
  aspect-ratio: 16 / 10;
  background: var(--bg-700);
}

.project__media-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 28%, rgba(70, 224, 255, 0.32), transparent 40%),
    radial-gradient(circle at 62% 52%, rgba(79, 125, 255, 0.38), transparent 45%),
    radial-gradient(circle at 82% 82%, rgba(255, 110, 199, 0.24), transparent 42%),
    linear-gradient(145deg, #101528, #04050a);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.project__media-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}

.project__media-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background-color: rgba(12, 16, 30, 0.9);
  background-image:
    radial-gradient(circle at 70% 30%, rgba(70, 224, 255, 0.2), transparent 22%),
    linear-gradient(135deg, rgba(79, 125, 255, 0.24), rgba(168, 85, 247, 0.12) 55%, transparent 80%);
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-out);
}

.project__media-inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project__media-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

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

.project__title a:hover {
  color: var(--accent, #46e0ff);
}

.project__case-link {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(70, 224, 255, 0.35);
  padding-bottom: 0.15rem;
  transition: color var(--dur-xs) var(--ease-out), border-color var(--dur-xs) var(--ease-out);
}

.project__case-link:hover {
  color: var(--accent, #46e0ff);
  border-color: rgba(70, 224, 255, 0.7);
}

.project__media-label {
  position: relative;
  z-index: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(5, 6, 10, 0.45);
}

.project__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.project__industry {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-low);
}

.project__title {
  font-size: clamp(1.75rem, 3vw, 3rem);
}

.project__desc {
  color: var(--text-mid);
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.project:hover .project__media-inner {
  transform: scale(1);
}

@media (min-width: 1024px) {
  .project {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
  }

  .project:nth-child(even) {
    grid-template-columns: 1fr 1.2fr;
  }

  .project:nth-child(even) .project__media {
    order: 2;
  }
}

/* ========== PROCESS ========== */
.process {
  background: var(--bg-900);
}

.process__list {
  position: relative;
  max-width: 860px;
  padding-left: var(--space-7);
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
}

.process__line {
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--surface-line);
}

.process__line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--grad-brand-v);
  transform-origin: top;
}

.process__item {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--dur-sm) var(--ease-out),
    background var(--dur-sm) var(--ease-out);
}

.process__item:hover {
  border-color: var(--surface-line-strong);
  background: var(--surface-card-hover);
}

.process__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-7) + 3px);
  top: 1.6rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-900);
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 12px rgba(70, 224, 255, 0.5);
}

.process__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--text-low);
  margin-bottom: var(--space-2);
}

.process__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: var(--space-2);
}

.process__desc {
  color: var(--text-mid);
  font-size: 0.975rem;
}

/* ========== HOW WE WORK (homepage) ========== */
.work {
  background:
    radial-gradient(ellipse 42% 48% at 12% 88%, rgba(70, 224, 255, 0.08), transparent 62%),
    radial-gradient(ellipse 28% 36% at 92% 8%, rgba(46, 123, 255, 0.08), transparent 58%),
    var(--bg-900);
}

.work__intro {
  margin-bottom: var(--space-6);
}

.work-flow {
  --p: 0;
}

.work-flow__rail {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  border-bottom: 1px solid var(--surface-line);
}

.work-flow__rail::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: calc((var(--p) + 0.5) / 6 * 100%);
  background: var(--grad-brand);
  pointer-events: none;
  transition: width 0.45s var(--ease-out);
}

@media (max-width: 799px) {
  .work-flow__rail::after {
    display: none;
  }
}

.work-flow__stage {
  appearance: none;
  flex: 1 1 33%;
  margin: 0;
  padding: 0.85rem 0.6rem 1rem;
  border: 0;
  background: transparent;
  color: var(--text-low);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
  transition: color 0.35s var(--ease-out);
}

.work-flow__stage:hover,
.work-flow__stage:focus-visible {
  color: var(--text-mid);
}

.work-flow__stage.is-active {
  color: var(--text-hi);
}

.work-flow__stage:focus-visible {
  outline: 1px solid rgba(70, 224, 255, 0.5);
  outline-offset: 4px;
}

.work-flow__panel {
  min-height: 5.5rem;
  padding-top: var(--space-6);
}

.work-flow__kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(70, 224, 255, 0.8);
}

.work-flow__copy {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--text-hi);
  opacity: 0;
  transform: translateY(6px);
}

.work-flow__copy.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

@media (min-width: 800px) {
  .work-flow__stage {
    flex: 1 1 0;
    padding-block: 1.05rem 1.2rem;
  }

  .work-flow__panel {
    min-height: 6.25rem;
  }

  .work-flow__copy {
    max-width: 42ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-flow__rail::after,
  .work-flow__copy,
  .work-flow__copy.is-in {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ========== WHY ========== */
.why {
  background:
    radial-gradient(ellipse 40% 60% at 96% 30%, rgba(79, 125, 255, 0.1), transparent 68%),
    var(--bg-800);
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--surface-line);
}

.why__item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--surface-line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}

.why__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--accent-cyan);
  padding-top: 0.35em;
}

.why__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: var(--space-2);
}

.why__desc {
  color: var(--text-mid);
}

@media (min-width: 768px) {
  .why__grid {
    grid-template-columns: 1fr 1fr;
  }

  .why__item:nth-child(odd) {
    padding-right: var(--space-6);
    border-right: 1px solid var(--surface-line);
  }

  .why__item:nth-child(even) {
    padding-left: var(--space-6);
  }
}

/* ========== STUDIO (homepage why + proof) ========== */
.studio {
  background:
    radial-gradient(ellipse 40% 55% at 94% 18%, rgba(79, 125, 255, 0.12), transparent 64%),
    radial-gradient(ellipse 28% 36% at 8% 88%, rgba(70, 224, 255, 0.08), transparent 58%),
    var(--bg-800);
}

.studio__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}

.studio__copy .section__title {
  margin-bottom: 0;
}

.studio__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) 0;
}

.studio__fact {
  padding-inline: clamp(var(--space-4), 3vw, var(--space-6));
  border-left: 1px solid var(--surface-line);
}

.studio__fact:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.studio__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--surface-line);
}

.studio__reason {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--surface-line);
}

.studio__name {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--text-hi);
}

.studio__desc {
  margin: 0;
  max-width: 36ch;
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.5;
}

.studio__fact-value {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.studio__fact-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-low);
}

@media (min-width: 768px) {
  .studio__reasons {
    grid-template-columns: 1fr 1fr;
  }

  .studio__reason:nth-child(odd) {
    padding-right: var(--space-7);
    border-right: 1px solid var(--surface-line);
  }

  .studio__reason:nth-child(even) {
    padding-left: var(--space-7);
  }

  .studio__reason:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  .studio__reason:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 800px) {
  .studio__intro {
    grid-template-columns: minmax(16rem, 0.95fr) minmax(14rem, 1.05fr);
    gap: var(--space-8);
    align-items: end;
  }

  .studio__copy .section__title,
  .home-main .studio .section__title {
    max-width: 13ch;
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .studio__intro {
    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
    gap: var(--space-9);
  }
}

/* ========== STATS ========== */
.stats {
  background: var(--bg-900);
  padding-block: var(--space-9);
  border-block: 1px solid var(--surface-line);
}

/* Hairline dividers mirror the hero metrics strip. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) 0;
}

.stat {
  padding-inline: clamp(var(--space-4), 3vw, var(--space-7));
  border-left: 1px solid var(--surface-line);
}

.stat:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-2);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-low);
}

@media (min-width: 1024px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat:nth-child(odd) {
    padding-left: clamp(var(--space-4), 3vw, var(--space-7));
    border-left: 1px solid var(--surface-line);
  }

  .stat:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ========== INDUSTRIES ========== */
.industries {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 55% at 88% 18%, rgba(70, 224, 255, 0.1), transparent 62%),
    radial-gradient(ellipse 34% 42% at 8% 82%, rgba(46, 123, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 28% 36% at 70% 90%, rgba(168, 85, 247, 0.08), transparent 64%),
    var(--bg-900);
}

.industries__intro {
  margin-bottom: var(--space-7);
}

.industries__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.industries__title-row .section__title {
  margin-bottom: 0;
  max-width: 14ch;
}

.industries__cta {
  flex-shrink: 0;
  margin-bottom: 0.15em;
}

.industries__kicker {
  color: var(--text-mid);
  max-width: 52ch;
  margin-top: var(--space-3);
}

.industries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  align-items: start;
}

.industry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  height: auto;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: #060914;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-sm) var(--ease-out),
    box-shadow var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out);
}

.industry__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.industry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  transform: scale(1.04);
  filter: saturate(1.05) brightness(0.92);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out), filter 0.45s var(--ease-out);
}

.industry__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, rgba(4, 6, 14, 0.72) 0%, rgba(4, 6, 14, 0.38) 42%, rgba(4, 6, 14, 0.78) 100%),
    linear-gradient(90deg, rgba(4, 8, 18, 0.55) 0%, rgba(4, 8, 18, 0.18) 55%, rgba(4, 8, 18, 0.35) 100%);
}

.industry:hover .industry__media img {
  opacity: 0.72;
  transform: scale(1.08);
  filter: saturate(1.1) brightness(1);
}

.industry::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 2;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease-out);
}

.industry:hover {
  border-color: var(--surface-card-line-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.industry:hover::before {
  opacity: 0.95;
}

.industry__top,
.industry__icon,
.industry__title,
.industry__desc {
  position: relative;
  z-index: 1;
}

.industry__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.55rem;
  width: 100%;
}

.industry__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: 0.75rem;
  color: var(--accent-cyan);
  background: rgba(70, 224, 255, 0.1);
  border: 1px solid rgba(70, 224, 255, 0.22);
  backdrop-filter: blur(8px);
}

.industry__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.industry__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.industry__desc {
  margin: 0;
  color: rgba(232, 240, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: none;
  width: 100%;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .industries__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .industries__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

html[data-motion="reduce"] .industry,
html[data-motion="reduce"] .industry__media img {
  transition: none;
}

html[data-motion="reduce"] .industry:hover {
  transform: none;
}

html[data-motion="reduce"] .industry:hover .industry__media img {
  transform: none;
}

/* ========== CONTACT ASSURANCE ========== */
.contact__assure {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.contact__assure li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--text-mid);
  font-size: 0.975rem;
}

.contact__assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
  transform: rotate(-45deg);
}

/* ========== TESTIMONIALS ========== */
.testimonials {
  background:
    radial-gradient(ellipse 42% 55% at 92% 22%, rgba(79, 125, 255, 0.14), transparent 66%),
    radial-gradient(ellipse 30% 40% at 78% 82%, rgba(168, 85, 247, 0.1), transparent 64%),
    var(--bg-800);
  overflow: hidden;
}

.testimonials__head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}

.testimonials__head p:last-child {
  color: var(--text-mid);
}

.testimonials__marquee {
  margin-top: 0;
}

.testimonials__viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
  );
}

.testimonials__viewport.is-dragging {
  cursor: grabbing;
}

.testimonials__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.testimonials__group {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-4);
  padding-right: var(--space-4);
}

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 min(22.5rem, 78vw);
  width: min(22.5rem, 78vw);
  min-height: 11.5rem;
  padding: var(--space-6);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
  transition: border-color var(--dur-sm) var(--ease-out),
    background var(--dur-sm) var(--ease-out);
}

.testimonial:hover {
  border-color: var(--surface-line-strong);
  background: var(--surface-card-hover);
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.22em;
  right: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.45;
  color: var(--text-hi);
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.testimonial__author {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* No-JS: native horizontal scroll */
.testimonials__marquee:not(.is-marquee) .testimonials__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: auto;
  mask-image: none;
  -webkit-mask-image: none;
  scroll-snap-type: x proximity;
  padding-inline: var(--space-4);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.testimonials__marquee:not(.is-marquee) .testimonials__track,
html[data-motion="reduce"] .testimonials__track {
  padding-inline: max(0px, calc(var(--gutter) - var(--space-4)));
}

.testimonials__marquee:not(.is-marquee) .testimonial,
html[data-motion="reduce"] .testimonial {
  scroll-snap-align: start;
}

/* ========== TEAM ========== */
.team {
  background: var(--bg-900);
}

.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.team-card {
  text-align: left;
}

.team-card__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-line);
  aspect-ratio: 3 / 4;
  background: var(--bg-700);
  margin-bottom: var(--space-4);
}

.team-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1s var(--ease-out);
}

.team-card:hover .team-card__photo img {
  transform: scale(1.04);
}

/* Initials only when no photo is present */
.team-card__photo:has(img) .team-card__initials {
  display: none;
}

.team-card__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  background:
    radial-gradient(circle at 72% 22%, rgba(70, 224, 255, 0.3), transparent 26%),
    radial-gradient(circle at 30% 82%, rgba(255, 110, 199, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(79, 125, 255, 0.3), rgba(168, 85, 247, 0.14));
}

.team-card__name {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: var(--space-2);
}

.team-card__role {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* ========== CONTACT ========== */
.contact {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--space-9));
  background: var(--bg-950);
}

.contact__ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 42% at 88% 34%, rgba(79, 125, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 34% 34% at 78% 82%, rgba(255, 110, 199, 0.1), transparent 58%),
    radial-gradient(ellipse 26% 28% at 62% 12%, rgba(70, 224, 255, 0.1), transparent 60%);
  pointer-events: none;
}

.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.contact__title {
  margin-bottom: var(--space-5);
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__detail {
  color: var(--text-mid);
}

.contact__detail a:hover {
  color: var(--text-hi);
}

.contact__social {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.contact__social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition:
    color var(--dur-sm) var(--ease-out),
    border-color var(--dur-sm) var(--ease-out),
    background var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out),
    box-shadow var(--dur-sm) var(--ease-out);
}

.contact__social-link svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.contact__social-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

.contact__social-link--facebook:hover {
  border-color: transparent;
  background: #1877f2;
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.35);
}

.contact__social-link--instagram:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
  box-shadow: 0 8px 22px rgba(221, 42, 123, 0.35);
}

/* ========== RESPONSIVE POLISH ========== */
@media (max-width: 479px) {
  .stat__value {
    font-size: clamp(2rem, 12vw, 3rem);
  }
}

/* ========== FOOTER ========== */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--surface-line);
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse 70% 85% at 0% 0%, rgba(70, 224, 255, 0.09), transparent 58%),
    radial-gradient(ellipse 55% 70% at 100% 8%, rgba(79, 125, 255, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-950) 0%, var(--bg-900) 100%);
}

.footer__ambient {
  position: absolute;
  left: -18%;
  top: -45%;
  width: min(52rem, 78%);
  height: 120%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at 40% 42%,
    rgba(70, 224, 255, 0.16),
    rgba(70, 224, 255, 0.05) 38%,
    transparent 68%
  );
  filter: blur(28px);
  opacity: 0.9;
  transform-origin: 30% 40%;
}

@media (prefers-reduced-motion: no-preference) {
  .footer__ambient {
    animation: footer-ambient 12s ease-in-out infinite;
  }
}

@keyframes footer-ambient {
  0%,
  100% {
    opacity: 0.75;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(2%, 1.5%, 0) scale(1.04);
  }
}

.footer__ghost {
  position: absolute;
  bottom: -0.08em;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(70, 224, 255, 0.04));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-bottom: var(--space-6);
}

.footer__brand,
.footer__group {
  min-width: 0;
}

.footer__heading {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(70, 224, 255, 0.78);
  line-height: 1;
}

.footer__brand .footer__logo {
  margin-top: 0;
}

.footer__logo {
  display: inline-flex;
  margin: 0 0 var(--space-4);
}

.footer__logo .logo__img--lockup {
  width: min(168px, 48vw);
}

.footer__blurb {
  margin: 0;
  max-width: 32ch;
  color: var(--text-mid);
  font-size: 0.92rem;
  line-height: 1.55;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-5);
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(70, 224, 255, 0.08);
  transition:
    color var(--dur-sm) var(--ease-out),
    border-color var(--dur-sm) var(--ease-out),
    background var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out),
    box-shadow var(--dur-sm) var(--ease-out);
}

.footer__social-link svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.footer__social-link:hover {
  color: #fff;
  transform: translateY(-2px);
}

.footer__social-link--facebook:hover {
  border-color: transparent;
  background: #1877f2;
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.35);
}

.footer__social-link--instagram:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af);
  box-shadow: 0 8px 22px rgba(221, 42, 123, 0.35);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__list a {
  display: inline-block;
  color: var(--text-mid);
  font-size: 0.94rem;
  line-height: 1.35;
  transition: color var(--dur-sm) var(--ease-out);
}

.footer__list a:hover {
  color: var(--text-hi);
}

.footer__list--contact a.footer__contact-link {
  display: flex;
  font-size: 0.92rem;
  line-height: 1.4;
}

.footer__services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.footer__mail {
  overflow-wrap: normal;
  word-break: normal;
}

.footer__list--contact {
  gap: 0.75rem;
}

.footer__contact-link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-mid);
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  min-width: 0;
  transition: color var(--dur-sm) var(--ease-out);
}

a.footer__contact-link:hover {
  color: var(--text-hi);
}

a.footer__contact-link:hover .footer__contact-icon {
  border-color: rgba(70, 224, 255, 0.4);
  background: rgba(70, 224, 255, 0.14);
  color: var(--accent-cyan, #46e0ff);
}

.footer__contact-link--static {
  color: var(--text-low);
  cursor: default;
}

.footer__contact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: 0.05rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(70, 224, 255, 0.22);
  background: rgba(70, 224, 255, 0.08);
  color: var(--accent-cyan, #46e0ff);
  transition:
    border-color var(--dur-sm) var(--ease-out),
    background var(--dur-sm) var(--ease-out),
    color var(--dur-sm) var(--ease-out);
}

.footer__contact-text {
  min-width: 0;
  overflow-wrap: anywhere;
  padding-top: 0.2rem;
}

.footer__meta {
  color: var(--text-low);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 22ch;
}

.footer__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-low);
}

.footer__copy,
.footer__note {
  margin: 0;
}

.footer__copy {
  text-align: center;
  order: -1;
}

.footer__note {
  text-align: left;
}

.footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.footer__legal a {
  color: var(--text-low);
  transition: color var(--dur-sm) var(--ease-out);
}

.footer__legal a:hover {
  color: var(--text-hi);
}

@media (min-width: 800px) {
  .footer__bottom {
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem 1.5rem;
  }

  .footer__copy {
    order: 0;
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }

  .footer__note {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }

  .footer__legal {
    grid-column: 3;
    justify-self: end;
  }
}

html[data-motion="reduce"] .footer__ambient {
  animation: none !important;
}

@media (min-width: 560px) {
  .footer__services {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-5);
    align-items: start;
  }

  .footer__services .footer__list {
    gap: 0.7rem;
  }
}

@media (min-width: 720px) and (max-width: 1099px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: var(--space-8);
    row-gap: var(--space-7);
  }
}

@media (min-width: 1100px) {
  .site-footer {
    padding-top: clamp(2.75rem, 4.5vw, 3.5rem);
    padding-bottom: clamp(3rem, 5vw, 4rem);
  }

  .footer__grid {
    grid-template-columns:
      minmax(15rem, 1.15fr)
      minmax(7.5rem, 0.7fr)
      minmax(16rem, 1.45fr)
      minmax(13rem, 1.05fr);
    gap: 0 var(--space-8);
    margin-bottom: var(--space-6);
  }

  .footer__heading {
    margin-bottom: var(--space-5);
  }

  .footer__blurb {
    font-size: 0.9rem;
  }

  .footer__group--contact .footer__list {
    max-width: 22rem;
  }
}

@media (min-width: 1280px) {
  .footer__grid {
    column-gap: var(--space-9);
  }
}

/* ========== HOME UX COMPACT PASS ========== */
/* Hero is not a `.section`, so this never reaches it. */
.home-main {
  --section-pad-y: clamp(2.5rem, 5vw, 3.5rem);
  --section-intro-gap: var(--space-5);
}

.home-main > .section {
  padding-block: var(--section-pad-y);
}

.home-main .section__title {
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.home-main .section__head,
.home-main .services-stage__intro,
.home-main .technology__intro,
.home-main .industries__intro,
.home-main .work__intro,
.home-main .studio__intro,
.home-main .testimonials__head {
  margin-bottom: var(--section-intro-gap);
}

.home-main .section__lead,
.home-main .services-stage__kicker,
.home-main .testimonials__head p:last-child {
  max-width: 46ch;
}

/* About — color shift after hero. Same section padding as the rest of the page. */
.home-main .about {
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4, 5, 10, 0.82) 0%, transparent 14%),
    linear-gradient(0deg, rgba(5, 6, 10, 0.72) 0%, transparent 14%),
    radial-gradient(ellipse 80% 42% at 50% -20%, rgba(70, 224, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 48% 32% at 100% 110%, rgba(46, 123, 255, 0.1), transparent 60%),
    #0a1020;
}

@media (min-width: 900px) {
  .home-main .about {
    height: calc(100svh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
  }

  .home-main .about__split {
    height: 100%;
    min-height: 0;
  }

  .home-main .about__media {
    height: 100%;
    min-height: 0;
  }

  .home-main .about__copy {
    min-height: 0;
    overflow: hidden;
  }

  .home-main .about__copy-inner {
    padding-block: clamp(1.25rem, 3vh, 2.25rem);
  }
}

.home-main .about__copy-inner {
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.home-main .about__copy .section__label {
  margin-bottom: var(--space-3);
}

.home-main .about__statement {
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  margin-bottom: var(--space-3);
}

.home-main .about__body {
  font-size: 0.95rem;
  line-height: 1.55;
}

.home-main .about .section__actions {
  margin-top: var(--space-4);
}

@media (max-width: 899px) {
  .home-main .about__media {
    min-height: 0;
    height: min(42svh, 320px);
  }
}

.home-main .ai-home__intro {
  margin-bottom: var(--section-intro-gap);
}

.home-main .ai-home .section__title {
  margin-bottom: 0;
}

.home-main .ai-home .section__lead {
  margin-bottom: 0;
}

.home-main .ai__list {
  margin-top: var(--space-3);
  gap: 0.3rem;
}

.home-main .ai__item {
  gap: 0.2rem;
  padding: 0.55rem 0.85rem;
}

.home-main .ai__item-title {
  font-size: 0.95rem;
}

.home-main .ai__item-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.home-main .industry {
  padding: 1rem 1.05rem 1.1rem;
}

.home-main .industry__icon {
  width: 2.25rem;
  height: 2.25rem;
}

.home-main .industry__desc {
  font-size: 0.88rem;
  line-height: 1.45;
}

.home-main .studio__name {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.home-main .studio__desc {
  font-size: 0.88rem;
  line-height: 1.5;
}

.home-main .studio__reason {
  padding-block: 1rem;
}

.home-main .studio__facts {
  gap: var(--space-5) 0;
}

.home-main .studio__fact-value {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.home-main .testimonials__marquee {
  margin-top: 0;
}

.home-main .testimonial {
  min-height: auto;
  padding: var(--space-5);
}

.home-main .testimonial__quote {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  margin-bottom: var(--space-4);
}

.home-main .work-flow__stage {
  padding-block: 0.7rem 0.85rem;
  font-size: clamp(0.98rem, 1.8vw, 1.25rem);
}

.home-main .work-flow__panel {
  min-height: 4.75rem;
  padding-top: var(--space-5);
}

.home-main .work-flow__copy {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.home-main > .section.cta-band {
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.home-main .cta-band__inner {
  gap: var(--space-5) var(--space-6);
}

.home-main .cta-band__copy h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  max-width: 14ch;
}

.home-main .cta-band__lead {
  font-size: 0.9rem;
}

@media (min-width: 1024px) {
  .home-main .ai-home__grid {
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
    align-items: start;
  }
}

/* ========== START A PROJECT ========== */
.start-project {
  position: relative;
  padding-top: 0;
  background: var(--bg-950);
}

.start-project__ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 40% at 12% 8%, rgba(70, 224, 255, 0.08), transparent 62%),
    radial-gradient(ellipse 36% 36% at 88% 72%, rgba(79, 125, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.start-project__note {
  position: relative;
  z-index: 1;
  color: var(--text-mid);
  margin-bottom: var(--space-7);
}

.start-project__note a {
  color: var(--text-hi);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.start-project__note a:hover {
  color: var(--accent-cyan);
}

.start-project__form {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}