/* ============================================================
   Luis Sandoval — Brand Overrides
   Loaded after the shared stylesheet to apply portfolio-specific design rules.
   ============================================================ */

/* ==========================================================
   LIGHT MODE OVERRIDES
   Header stays white (always over dark hero).
   Hero stays dark. Service cards stay dark.
   Only content sections below hero switch themes.
   ========================================================== */

/* --- Header: force white in both modes (sits over dark hero) --- */
:root[color-scheme="light"] .mxd-menu {
  --base-opp: #ffffff;
  --base-opp-rgb: 255, 255, 255;
  --t-opp-bright: #121212;
  --t-opp-medium: #575960;
  --t-opp-muted: #7d7f89;
  --t-opp-muted-extra: #dbd8d8;
}

:root[color-scheme="light"] .mxd-header,
:root[color-scheme="light"] .mxd-header__controls,
:root[color-scheme="light"] .mxd-header__link,
:root[color-scheme="light"] .mxd-color-switcher,
:root[color-scheme="light"] .mxd-logo,
:root[color-scheme="light"] .mxd-logo__text {
  color: #fff;
}

:root[color-scheme="light"] .mxd-header__link svg {
  fill: #fff;
}

:root[color-scheme="light"] .mxd-header .hamburger__line {
  background-color: #fff;
}

/* --- Hero: force dark in both modes --- */
:root[color-scheme="light"] .mxd-hero-section {
  background-color: #0f0f0f;
  color: #fff;
}

:root[color-scheme="light"] .mxd-hero-03,
:root[color-scheme="light"] .mxd-hero-03 * {
  color: inherit;
}

:root[color-scheme="light"] .mxd-hero-03 h1,
:root[color-scheme="light"] .mxd-hero-03 .line-mask {
  color: #fff;
}

:root[color-scheme="light"] .mxd-hero-03__control-left,
:root[color-scheme="light"] .mxd-hero-03__control-right {
  color: rgba(255,255,255,0.5);
}

:root[color-scheme="light"] .mxd-hero-03__bottom,
:root[color-scheme="light"] .mxd-hero-03__dataline,
:root[color-scheme="light"] .mxd-hero-03__socials,
:root[color-scheme="light"] .mxd-hero-03__controls {
  color: rgba(255,255,255,0.6);
}

:root[color-scheme="light"] .mxd-hero-03 .tag {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.15);
}

/* --- Service niche cards: force dark in both modes --- */
:root[color-scheme="light"] .mxd-niche-cards__item {
  background: #0f1115;
  border-color: rgba(255,255,255,0.08);
}

:root[color-scheme="light"] .mxd-niche-cards__inner {
  background: #0f1115;
}

:root[color-scheme="light"] .mxd-niche-cards__name p,
:root[color-scheme="light"] .mxd-niche-cards__name p.permanent {
  color: #fff;
}

:root[color-scheme="light"] .mxd-niche-cards .t-bold {
  color: rgba(255,255,255,0.85);
}

:root[color-scheme="light"] .mxd-niche-cards .t-bold span,
:root[color-scheme="light"] .mxd-niche-cards .t-medium span {
  color: rgba(255,255,255,0.5);
}

:root[color-scheme="light"] .mxd-niche-cards .tag {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.12);
}

:root[color-scheme="light"] .mxd-niche-cards__gradient.gradient-linear {
  background: linear-gradient(to top, #0f1115 0%, transparent 100%);
}

:root[color-scheme="light"] .mxd-niche-cards__gradient.gradient-radial {
  background: radial-gradient(ellipse at center bottom, #0f1115 0%, transparent 70%);
}

/* --- Blur section backgrounds: keep dark for hero-adjacent sections --- */
:root[color-scheme="light"] .mxd-niche-cards__column {
  background: transparent;
}

/* --- Niche card spacing & border-radius --- */
.mxd-niche-cards__inner {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .mxd-niche-cards .mxd-grid-item {
    padding: 8px;
  }
}

/* --- Reduce gap after video divider before Featured Work --- */
.mxd-divider--video + .mxd-container + .mxd-section,
.mxd-section.blur-section:has(.mxd-divider--video) + .mxd-section.padding-top-number {
  padding-top: 6rem;
}

/* --- CTA cursor circle: white bg, black text --- */
.mxd-cursor__dot.active-accent {
  background-color: #fff;
}

.mxd-cursor__dot.active-accent ~ .mxd-cursor__text {
  color: #111;
}

/* ------ Logo Text ------ */
.mxd-logo__text span:first-child,
.menu-logo__text span:first-child {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mxd-logo__text span:last-child,
.menu-logo__text span:last-child {
  opacity: 0.5;
}

/* ------ Header CTA ------ */
.mxd-header__link .btn-caption {
  font-weight: 500;
}

/* ------ Solutions Submenu in Main Nav ------ */
.submenu__item.submenu-heading {
  pointer-events: none;
  opacity: 0.45;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.5em;
}

/* ------ Hero Fullscreen Video Background ------ */
.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.mxd-hero-03 .line-mask {
  padding-bottom: 0.15em;
}

.mxd-hero-03__control-left,
.mxd-hero-03__control-right,
.mxd-hero-03__bottom {
  z-index: 1;
}

/* ------ Hero Subtitle ------ */
.mxd-hero-03 .hero-subtitle {
  max-width: 640px;
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.7;
  margin-top: 1.5rem;
}

@media (max-width: 767px) {
  .mxd-hero-03 .hero-subtitle {
    font-size: 1rem;
    max-width: 100%;
  }
}

/* ------ Stats Section Tweaks ------ */
.mxd-stats-lines .stats-line__title {
  font-weight: 500;
}

/* ------ Capabilities / Services List ------ */
.mxd-cpb-list .mxd-cpb-item__description {
  max-width: 480px;
}

/* ------ Marquee Service Images ------ */
.marquee__image {
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.marquee__image img {
  filter: brightness(1.6) contrast(1.1);
}

/* ------ Service Card Visuals (Vercel/Linear-style) ------ */
.card-visual {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.card-visual__glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.15) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s ease;
}
.card-visual__glow--wide { border-radius: 40%; }
.card-visual__glow--purple { background: radial-gradient(ellipse at center, rgba(139,92,246,0.12) 0%, rgba(59,130,246,0.06) 40%, transparent 70%); }
.card-visual__glow--cyan { background: radial-gradient(ellipse at center, rgba(6,182,212,0.12) 0%, rgba(59,130,246,0.06) 40%, transparent 70%); }

.card-visual:hover .card-visual__glow { opacity: 1.4; }

.card-visual__scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.03,0.98,0.52,0.99);
}

/* ===== Product Ecosystem Visuals ===== */

/* Ambient gradient orbs */
.cv-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.cv-orb--lg { width: 200px; height: 200px; }
.cv-orb--md { width: 120px; height: 120px; }
.cv-orb--blue { background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%); }
.cv-orb--purple { background: radial-gradient(circle, rgba(139,92,246,0.25) 0%, transparent 70%); }
.cv-orb--cyan { background: radial-gradient(circle, rgba(6,182,212,0.2) 0%, transparent 70%); }

/* SVG connection lines */
.cv-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.cv-flow-line {
  stroke-dasharray: 8 12;
  stroke-width: 2;
  animation: cv-dash-flow 3s linear infinite;
}
@keyframes cv-dash-flow {
  to { stroke-dashoffset: -60; }
}

/* Node dots (Card 1: Neural Constellation) */
.cv-node-pt {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  background: #3b82f6;
  box-shadow: 0 0 12px rgba(59,130,246,0.6), 0 0 24px rgba(59,130,246,0.15);
  animation: cv-node-pulse 3s ease-in-out infinite;
}
.cv-node-pt--xl {
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(59,130,246,0.7), 0 0 40px rgba(59,130,246,0.25);
}
.cv-node-pt--md { width: 7px; height: 7px; transform: translate(-50%, -50%); }
.cv-node-pt--sm { width: 5px; height: 5px; transform: translate(-50%, -50%); }
.cv-node-pt--purple {
  background: #8b5cf6;
  box-shadow: 0 0 12px rgba(139,92,246,0.6), 0 0 24px rgba(139,92,246,0.15);
}
.cv-node-pt--cyan {
  background: #06b6d4;
  box-shadow: 0 0 12px rgba(6,182,212,0.6), 0 0 24px rgba(6,182,212,0.15);
}
@keyframes cv-node-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
}

/* Floating glass panels */
.cv-float {
  position: absolute;
  z-index: 5;
  transition: transform 0.4s cubic-bezier(0.03,0.98,0.52,0.99);
}
.cv-float--tr { top: 8%; right: 4%; }
.cv-float--bl { bottom: 8%; left: 4%; }
.cv-float--br { bottom: 8%; right: 4%; }

.cv-glass {
  background: rgba(26,35,50,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.cv-glass--compact { padding: 10px 14px; }

.cv-glass__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 80px;
}
.cv-glass__bars span {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, rgba(59,130,246,0.15) 100%);
}
.cv-glass__ring { width: 32px; height: 32px; display: block; }
.cv-glass__spark { width: 64px; height: 24px; display: block; }

.cv-glass__sync {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 80px;
}
.cv-glass__sync-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
  flex-shrink: 0;
  animation: cv-sync-pulse 2s ease-in-out infinite;
}
@keyframes cv-sync-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.cv-glass__sync-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cv-glass__sync-bars span {
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(6,182,212,0.5) 0%, rgba(6,182,212,0.1) 100%);
}

/* === Card 2: Architecture Stack === */
.cv-stack {
  position: relative;
  width: 75%;
  max-width: 400px;
  min-height: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.cv-layer {
  position: absolute;
  width: 100%;
  height: 48%;
  background: linear-gradient(180deg, rgba(26,35,50,0.6) 0%, rgba(20,28,40,0.4) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.cv-layer--back {
  transform: translateY(24px) scale(0.9);
  opacity: 0.4;
  border-left: 2px solid rgba(6,182,212,0.3);
}
.cv-layer--mid {
  transform: translateY(0) scale(0.95);
  opacity: 0.65;
  border-left: 2px solid rgba(139,92,246,0.4);
}
.cv-layer--front {
  transform: translateY(-24px) scale(1);
  opacity: 1;
  border-left: 2px solid rgba(59,130,246,0.5);
}
.cv-layer__content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-code-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cv-code-block {
  height: 3px;
  border-radius: 2px;
  opacity: 0.5;
}
.cv-code-block--blue { background: #3b82f6; }
.cv-code-block--purple { background: #8b5cf6; }
.cv-code-block--cyan { background: #06b6d4; }
.cv-code-block--slate { background: #475569; }

.cv-cursor {
  width: 7px;
  height: 14px;
  background: #3b82f6;
  border-radius: 1px;
  animation: cv-blink 1s step-end infinite;
}
@keyframes cv-blink {
  50% { opacity: 0; }
}

/* === Card 3: Commerce Flow === */
.cv-product-card {
  position: absolute;
  z-index: 2;
  background: linear-gradient(180deg, rgba(26,35,50,0.75) 0%, rgba(20,28,40,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  overflow: hidden;
}
.cv-product-card__swatch {
  height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.cv-product-card__swatch--purple { background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(30,41,59,0.6) 100%); }
.cv-product-card__swatch--blue { background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(30,41,59,0.6) 100%); }
.cv-product-card__swatch--indigo { background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(30,41,59,0.6) 100%); }

.cv-product-card__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv-product-card__line {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  display: block;
}
.cv-product-card__accent {
  height: 3px;
  width: 40%;
  border-radius: 2px;
  background: rgba(59,130,246,0.3);
  display: block;
}

.cv-product-card--1 { width: 110px; top: 12%; left: 8%; transform: rotate(-3deg); }
.cv-product-card--2 {
  width: 130px; top: 22%; right: 10%; transform: rotate(2deg);
  z-index: 3;
  border-color: rgba(59,130,246,0.12);
  box-shadow: 0 8px 32px rgba(59,130,246,0.08), 0 4px 20px rgba(0,0,0,0.3);
}
.cv-product-card--2 .cv-product-card__swatch { height: 62px; }
.cv-product-card--3 { width: 100px; bottom: 18%; left: 22%; transform: rotate(1deg); }

.cv-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  z-index: 3;
  animation: cv-sparkle-pulse 2.5s ease-in-out infinite;
}
.cv-sparkle::before, .cv-sparkle::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
}
.cv-sparkle::before { width: 6px; height: 1px; top: 2.5px; left: 0; }
.cv-sparkle::after { width: 1px; height: 6px; top: 0; left: 2.5px; }
.cv-sparkle--sm { transform: scale(0.7); animation-delay: -1.2s; }
@keyframes cv-sparkle-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* === Card 4: Hub & Spoke === */
.cv-hub-container {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cv-hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #3b82f6 0%, rgba(59,130,246,0.3) 100%);
  box-shadow: 0 0 30px rgba(59,130,246,0.5), 0 0 60px rgba(59,130,246,0.15);
  z-index: 3;
  animation: cv-hub-glow 3s ease-in-out infinite;
}
@keyframes cv-hub-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(59,130,246,0.5), 0 0 60px rgba(59,130,246,0.15); }
  50% { box-shadow: 0 0 40px rgba(59,130,246,0.7), 0 0 80px rgba(59,130,246,0.25); }
}

.cv-hub-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(59,130,246,0.1);
}
.cv-hub-ring--inner { width: 100px; height: 100px; }
.cv-hub-ring--outer {
  width: 180px; height: 180px;
  border-style: dashed;
  border-color: rgba(59,130,246,0.06);
  animation: cv-spin 50s linear infinite;
}
@keyframes cv-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.cv-spoke-node {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(26,35,50,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  z-index: 4;
  transform: translate(-50%, -50%);
}
.cv-spoke-node::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cv-spoke-node--1 { top: 23%; left: 80%; }
.cv-spoke-node--1::after { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.5); }
.cv-spoke-node--2 { top: 70%; left: 83%; }
.cv-spoke-node--2::after { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.5); }
.cv-spoke-node--3 { top: 81%; left: 32%; }
.cv-spoke-node--3::after { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.cv-spoke-node--4 { top: 43%; left: 17%; }
.cv-spoke-node--4::after { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.5); }
.cv-spoke-node--5 { top: 15%; left: 38%; }
.cv-spoke-node--5::after { background: #06b6d4; box-shadow: 0 0 8px rgba(6,182,212,0.5); }

.cv-hub-line {
  stroke-dasharray: 4 8;
  stroke-width: 1.5;
  animation: cv-dash-flow 2.5s linear infinite;
}
.cv-orbit-ring {
  animation: cv-orbit-spin 50s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cv-orbit-spin {
  to { transform: rotate(360deg); }
}

/* ===== Unified Image Border Radius ===== */
.mxd-project-item__media {
  border-radius: 16px;
}
.mxd-cpb-list__image {
  border-radius: 16px;
}

/* ===== Client Logos ===== */
.mxd-clients__item {
  align-items: center;
}
.mxd-clients__logo {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mxd-clients__logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
@media (max-width: 991px) {
  .mxd-clients__item {
    justify-content: center;
    text-align: center;
  }
  .mxd-clients__logo {
    justify-content: center;
  }
}
.client-logo-hover img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}
.client-logo-hover:hover img {
  transform: scale(1.08);
  filter: brightness(1.3);
}
:root[color-scheme="light"] .mxd-clients__logo img {
  filter: invert(1);
}
:root[color-scheme="light"] .client-logo-hover:hover img {
  filter: invert(1) brightness(0.7);
}

/* ===== Niche Card SVG Visuals ===== */
.nc-visual {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.4s ease;
}
.nc-visual:hover {
  filter: brightness(1.15);
}
.nc-visual--wide {
  border-radius: 12px;
}
.nc-orbit {
  animation: nc-orbit-spin 60s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes nc-orbit-spin {
  to { transform: rotate(360deg); }
}
.nc-breathe {
  animation: nc-breathe 4s ease-in-out infinite;
}
@keyframes nc-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
.nc-drift {
  animation: nc-drift 7s ease-in-out infinite;
}
@keyframes nc-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.nc-energy {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: nc-energy-flow 4s ease-in-out infinite;
}
@keyframes nc-energy-flow {
  0% { stroke-dashoffset: 200; opacity: 0.3; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -200; opacity: 0.3; }
}

/* ===== Featured Service Visuals ===== */
.fs-visual {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.4s ease;
}
.fs-breathe {
  animation: fs-breathe 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fs-breathe {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.25); }
}
.fs-drift {
  animation: fs-drift 5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fs-drift {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-8px) translateX(3px); }
  50% { transform: translateY(-14px) translateX(0); }
  75% { transform: translateY(-8px) translateX(-3px); }
}
.fs-orbit {
  animation: fs-orbit-spin 20s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fs-orbit-spin {
  to { transform: rotate(360deg); }
}
.fs-wander {
  animation: fs-wander 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fs-wander {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(8px, -6px); }
  50% { transform: translate(-4px, -10px); }
  75% { transform: translate(-8px, 4px); }
}
.fs-pulse-ring {
  animation: fs-pulse-ring 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fs-pulse-ring {
  0%, 100% { opacity: 0.05; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.08); }
}
.fs-flow {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: fs-flow 3.5s ease-in-out infinite;
}
@keyframes fs-flow {
  0% { stroke-dashoffset: 160; opacity: 0.2; }
  50% { stroke-dashoffset: 0; opacity: 0.8; }
  100% { stroke-dashoffset: -160; opacity: 0.2; }
}

/* ------ CTA Section ------ */
.mxd-divider-xl__caption h2 {
  font-weight: 600;
}

.mxd-split-lines .line-mask,
.mxd-split-lines-reverse .line-mask,
.loading-split .line-mask {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* ------ Footer Closing Statement ------ */
.mxd-stats-lines__number p.home-stat-design-code {
  width: 100%;
  max-width: 100%;
  font-size: clamp(2.4rem, 3.4vw, 4.6rem);
  letter-spacing: 0;
  white-space: nowrap;
}

.mxd-page-content li::marker {
  color: currentColor;
}

.footer-statement {
  padding: 3rem 0;
  text-align: center;
}

.footer-statement__quote p {
  font-family: var(--_font-default);
  font-size: clamp(3rem, 6.6vw, 5.9375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--t-bright);
}

.footer-statement__supporting {
  margin-top: 1rem;
}

.footer-statement__supporting p {
  font-size: clamp(1.25rem, 2.36vw, 2.125rem);
  line-height: 1.6;
  opacity: 0.45;
  color: var(--t-bright);
}

/* ------ Niche Cards Description ------ */
.mxd-niche-cards .niche-card__text {
  line-height: 1.65;
}

/* ------ Why Section ------ */
.why-section__text {
  max-width: 680px;
  font-size: 1.125rem;
  line-height: 1.7;
  opacity: 0.75;
}

@media (max-width: 767px) {
  .why-section__text {
    font-size: 1rem;
  }
}

/* ------ Portrait ------ */
.luis-portrait {
  padding-top: 1rem;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.luis-portrait__image {
  max-width: 100%;
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
}

.luis-portrait__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1199px) {
  .luis-portrait {
    margin-bottom: 2rem;
    height: auto;
  }
  .luis-portrait__image {
    max-width: 100%;
    max-height: 500px;
  }
}

/* ------ Video Divider Parallax ------ */
.mxd-divider--video {
  position: relative;
  overflow: hidden;
}

.mxd-divider--video .mxd-divider__image {
  overflow: hidden;
  height: 380px;
}

@media only screen and (min-width: 768px) {
  .mxd-divider--video .mxd-divider__image {
    height: 460px;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-divider--video .mxd-divider__image {
    height: 500px;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-divider--video .mxd-divider__image {
    height: 560px;
  }
}

.mxd-divider--video-full .mxd-divider__image {
  height: 500px;
}
@media only screen and (min-width: 768px) {
  .mxd-divider--video-full .mxd-divider__image {
    height: 660px;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-divider--video-full .mxd-divider__image {
    height: 760px;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-divider--video-full .mxd-divider__image {
    height: 930px;
  }
}

.mxd-divider--video video {
  width: 100%;
  height: 140%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.mxd-divider--video .divider-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15,15,15,0.85) 0%,
    rgba(15,15,15,0.15) 18%,
    transparent 40%,
    transparent 60%,
    rgba(15,15,15,0.15) 82%,
    rgba(15,15,15,0.85) 100%
  );
}

/* CTA "Let's build something better" – enlarge center photo.
   Fills all remaining width between the two side images (5x would exceed the screen). */
.mxd-divider-gif__front {
  width: max(18rem, calc(100% - 18rem)); /* never smaller than the original on phones */
}
@media only screen and (min-width: 768px) {
  .mxd-divider-gif__front {
    width: max(26rem, calc(100% - 28rem)); /* side images: 15rem + 15rem - 2rem overlap */
  }
}

/* CTA center photo – match site image radius (16px, see Unified Image Border Radius) */
.mxd-divider-gif__front,
.mxd-divider-gif__front .cta-photo {
  border-radius: 16px;
  overflow: hidden;
}
.mxd-divider-gif__front .cta-photo { display: block; }

/* CTA center photo – B&W by default, color on hover (same image, CSS filter) */
.mxd-divider-gif__front .cta-photo img {
  filter: grayscale(1);
  transition: filter 0.5s ease;
}
.mxd-divider-gif__front .cta-photo:hover img,
.mxd-divider-gif__front .cta-photo:focus-visible img {
  filter: grayscale(0);
}

/* ------ Theme-inverted sections (Luis: alternate black and white bands as you scroll) ------
   Add class="theme-invert" to any .mxd-section. Night mode: light section with dark text.
   Day mode: dark section with light text. Components inside keep working because they read
   the same theme variables. */
.theme-invert {
  --base: var(--base--light); --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light); --base-tint-rgb: var(--base-tint-rgb--light);
  --base-bright: var(--base-bright--light); --base-bright-rgb: var(--base-bright-rgb--light);
  --base-opp: var(--base-opp--light); --base-opp-rgb: var(--base-opp-rgb--light);
  --t-bright: var(--t-bright--light); --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light); --t-muted-extra: var(--t-muted-extra--light);
  --t-opp-bright: var(--t-opp-bright--light); --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light); --t-opp-muted-extra: var(--t-opp-muted-extra--light);
  --st-muted: var(--st-muted--light); --st-medium: var(--st-medium--light); --st-bright: var(--st-bright--light);
  --cs-line: rgba(0, 0, 0, 0.12);
  position: relative;
  background-color: var(--base);
  color: var(--t-bright);
}
[color-scheme=light] .theme-invert {
  --base: var(--base--dark); --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark); --base-tint-rgb: var(--base-tint-rgb--dark);
  --base-bright: var(--base-bright--dark); --base-bright-rgb: var(--base-bright-rgb--dark);
  --base-opp: var(--base-opp--dark); --base-opp-rgb: var(--base-opp-rgb--dark);
  --t-bright: var(--t-bright--dark); --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark); --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark); --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark); --t-opp-muted-extra: var(--t-opp-muted-extra--dark);
  --st-muted: var(--st-muted--dark); --st-medium: var(--st-medium--dark); --st-bright: var(--st-bright--dark);
  --cs-line: rgba(255, 255, 255, 0.14);
}
/* Opaque normal band: used where a section scrolls over a pinned section above it */
.theme-solid { position: relative; background-color: var(--base); }
/* Brand logos: the site inverts them for day mode; inside a flipped band the rule flips too */
.theme-invert .mxd-clients__logo img { filter: invert(1); }
[color-scheme=light] .theme-invert .mxd-clients__logo img { filter: none; }
.theme-invert .client-logo-hover:hover img { filter: invert(1) brightness(0.7); }
[color-scheme=light] .theme-invert .client-logo-hover:hover img { filter: brightness(1.3); }
/* Project case-study brand titles */
.project-brand {
  display: block;
  margin: 0 0 2.4rem;
  line-height: 1;
}
.project-brand img {
  display: block;
  max-width: none;
}
.project-brand__crop {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.project-brand__crop img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}
.project-brand--tivo { width: min(52rem, 82vw); }
.project-brand--tivo .project-brand__crop { aspect-ratio: 3.45 / 1; }
.project-brand--xperi { width: min(52rem, 82vw); }
.project-brand--xperi .project-brand__crop { aspect-ratio: 5 / 1; }
.project-brand--optima { width: min(56rem, 84vw); }
.project-brand--optima .project-brand__crop { aspect-ratio: 3.65 / 1; }
.project-brand--first-descendant { width: min(58rem, 86vw); }
.project-brand--first-descendant > img { width: 100%; height: auto; }
/* Keep primary action buttons readable and consistent in the day theme. */
:root[color-scheme="light"] .btn.btn-default-accent {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
:root[color-scheme="light"] .btn.btn-default-accent .btn-caption {
  color: #000 !important;
}
:root[color-scheme="light"] .btn.btn-default-accent i svg {
  fill: #000 !important;
}

/* ------ Home: service visuals link to their service page ------ */
.mxd-cpb-list__image .fs-visual-link {
  display: block;
  width: 100%;
}

/* ------ Home: statement banner ("I design what people see.") ------ */
/* The divider takes the video's height, so the caption centres on the video at every width */
.mxd-divider--statement {
  height: auto;
}
/* One sentence per line (SplitType sets an inline display on nested spans, hence !important) */
.mxd-divider--statement .statement-line {
  display: block !important;
}
@media only screen and (min-width: 768px) {
  .mxd-divider--statement .mxd-divider__caption {
    max-width: none;
  }
  .mxd-divider--statement .statement-line {
    white-space: nowrap;
  }
}

/* ------ Home: service card visuals link to their service page ------ */
.mxd-niche-cards__image .nc-visual-link {
  display: block;
  width: 100%;
}
/* The decorative gradient sits over the visual; let clicks through to the link */
.mxd-niche-cards__gradient {
  pointer-events: none;
}
/* On desktop two cards use the visual as the card background, under the text.
   Let clicks on the text blocks reach the link too (tags keep their hover effect). */
@media only screen and (min-width: 1200px) {
  .mxd-niche-cards__inner:has(.absolute-desktop-full .nc-visual-link) .mxd-niche-cards__title,
  .mxd-niche-cards__inner:has(.absolute-desktop-full .nc-visual-link) .mxd-niche-cards__descr {
    pointer-events: none;
  }
  .mxd-niche-cards__inner:has(.absolute-desktop-full .nc-visual-link) .tag {
    pointer-events: auto;
    align-self: flex-start;
  }
}

/* ------ Home: service cards grow with their copy ------ */
/* The template fixes these cards at 420px from 1200px up, which clipped the bottom padding
   (and the last line) of the longer descriptions. Cards in a row still match heights. */
@media only screen and (min-width: 1200px) {
  .mxd-niche-cards__inner.fixed-height-desktop {
    height: 100%;
    min-height: 420px;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-niche-cards__inner.fixed-height-desktop {
    min-height: 500px;
  }
}