/* Landing Page Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scale side margin from 80px at 1440 to 108px at 1920. */
@media (min-width: 1440px) and (max-width: 1920px) {
  :root {
    --grid-margin: calc(80px + (100vw - 1440px) * 0.0583333333);
  }
}

/* Scale side margin from 108px at 1920 to 320px at 2460. */
@media (min-width: 1921px) and (max-width: 2460px) {
  :root {
    --grid-margin: calc(108px + (100vw - 1920px) * 0.3925925926);
  }
}

/* Keep 320px side margin above 2460px. */
@media (min-width: 2461px) {
  :root {
    --grid-margin: 320px;
  }
}

html {
  -webkit-text-size-adjust: 100%; /* Prevent iOS/mobile from scaling fonts (e.g. 16px → 13.33px) */
  text-size-adjust: 100%;
  /* Single scroll container, always reserve scrollbar space to prevent layout shift */
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background-color: #F8F7F7;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent overscroll/bounce on touch devices */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  /* Additional touch device fixes */
  position: relative;
  overflow: visible;
}

@media (min-width: 1025px) {
  body {
    font-size: 16px;
  }
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Remove mobile tap highlight/callout for button-like controls */
button,
.pricing-card-btn,
.portfolio-page-master-btn,
.view-projects-btn,
.mobile-menu-trigger,
.nav-item a,
.mobile-menu-link,
.site-footer-link,
.portfolio-more-pill {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */

.custom-cursor {
  position: fixed;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-cursor__shape {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #0F1513;
  background-color: #ABCB41;
  transform-origin: center;
  will-change: transform;
}

.custom-cursor__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.custom-cursor__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.custom-cursor.is-drag-mode {
  background-color: transparent;
  border-color: transparent;
  mix-blend-mode: normal;
}

.custom-cursor.is-drag-mode .custom-cursor__shape {
  opacity: 0;
}

.custom-cursor.is-drag-mode .custom-cursor__icon {
  opacity: 1;
}

html.has-custom-cursor .navbar,
html.has-custom-cursor .navbar * {
  cursor: none !important;
}

/* Disable custom cursor on mobile/touch viewports */
@media (max-width: 1024px) {
  .custom-cursor {
    display: none !important;
  }

  .navbar,
  .navbar * {
    cursor: auto !important;
  }
}

/* Dynamic content hydration guards (prevent static flash before API data binds) */
[data-hydration="pending"] {
  opacity: 0;
  pointer-events: none;
}

[data-hydration="ready"] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.26s ease;
}

/* Selected Works: no fade – track appears instantly when ready (backup: portfolio on top, no wrapper fade) */
.portfolio-cards-track[data-hydration="ready"] {
  transition: none;
}

/* Studio page preloader - slides down to reveal when content loaded */
.studio-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #F8F7F7;
  transform: translateY(0);
  transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  pointer-events: auto;
}

.studio-preloader.studio-preloader--hiding {
  transform: translateY(100%);
  pointer-events: none;
}

.studio-preloader-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.preloader-logo-lottie.site-footer-logo-lottie {
  width: 200px;
  height: 200px;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.preloader-logo-lottie.site-footer-logo-lottie.preloader-logo-lottie--ready {
  opacity: 1;
}

.studio-preloader-status {
  margin-top: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: #0F1513;
  text-align: center;
}

.studio-preloader-status-text.preloader-glitch-cycle {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.studio-preloader-status-text.preloader-glitch-cycle::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.studio-preloader-status-text.preloader-glitch-cycle::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

.studio-preloader-progress {
  position: absolute;
  left: var(--grid-margin, 24px);
  right: var(--grid-margin, 24px);
  bottom: 64px;
}

.studio-preloader-progress-value {
  position: absolute;
  bottom: 10px;
  left: 0;
  transform: translateX(0);
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #0F1513;
  white-space: nowrap;
}

.studio-preloader-progress-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(15, 21, 19, 0.4);
  overflow: hidden;
}

.studio-preloader-progress-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: #0F1513;
}

@media (prefers-reduced-motion: reduce) {
  .studio-preloader {
    transition-duration: 0.2s;
  }
}

/* Page refresh restore + entry animation */
html.page-preload .page-enter-wrapper,
html.page-preload .header,
html.page-preload .landing-scene-wrapper,
html.page-preload .about-col-grid,
html.page-preload .book-call-col-grid {
  opacity: 0;
  pointer-events: none;
}

@keyframes page-enter-up {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.page-enter-active .page-enter-wrapper {
  animation: page-enter-up 0.75s cubic-bezier(0, 0, 0.58, 1) forwards;
}

/* Explicit final state when animation ends - no transform so fixed elements work, no snap */
html.page-enter-done .page-enter-wrapper {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.page-enter-active .page-enter-wrapper {
    animation: none;
  }
  html.page-preload .page-enter-wrapper {
    opacity: 0;
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 var(--grid-margin, 24px);
}

/* Logo in Navbar */
.nav-item.logo-item {
  padding: 0;
  margin-right: 12px;
}

.logo {
  height: 40px;
  width: auto;
  display: block;
  -webkit-user-drag: none;
}

/* Navbar */
.navbar {
  height: 56px;
  background-color: #EAE6E5;
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
  border-radius: 28px;
  padding: 8px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 101;
}

.navbar,
.navbar * {
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

.lets-talk-pill {
  position: fixed;
  top: 36px;
  right: var(--grid-margin, 24px);
  height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
  background: #0F1513;
  color: #F8F7F7;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  z-index: 1101;
  transition: background-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.lets-talk-pill-text {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.lets-talk-pill-text::before,
.lets-talk-pill-text::after {
  background: #0F1513;
}

.lets-talk-pill-text::before {
  color: #FCE7E4;
  text-shadow: -2px 0 #FCE7E4;
}

.lets-talk-pill-text::after {
  color: #ABCB41;
  text-shadow: 2px 0 #ABCB41;
}

.lets-talk-pill:hover {
  background: #0F1513;
  border-color: #0E1412;
  color: #F8F7F7;
}

.lets-talk-pill:hover .lets-talk-pill-text {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lets-talk-pill:hover .lets-talk-pill-text::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.lets-talk-pill:hover .lets-talk-pill-text::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

.lets-talk-pill.is-reversed {
  background: #F8F7F7;
  color: #0F1513;
  border-color: #0E1412;
}

.lets-talk-pill.is-reversed:hover {
  background: #F8F7F7;
  color: #0F1513;
  border-color: #0E1412;
}

/* Floating Pill */
.nav-pill {
  position: absolute;
  height: 40px;
  background-color: #F99C8D;
  border: 2px solid #C7523E;
  border-radius: 100px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.navbar:hover .nav-pill {
  opacity: 1;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  z-index: 2;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-item a {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  text-decoration: none;
  color: #0E1412;
  font-size: 16px;
  font-weight: 400;
  border-radius: 100px;
  transition: color 0.3s ease;
  white-space: nowrap;
  height: 100%;
  position: relative;
}

.nav-item a.active {
  font-weight: 400; /* keep active state, but no bold */
}

.nav-work-together-link {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.nav-work-together-link::before,
.nav-work-together-link::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  background: #EAE6E5;
}

.nav-work-together-link::before {
  color: #FCE7E4;
  text-shadow: -2px 0 #FCE7E4;
}

.nav-work-together-link::after {
  color: #ABCB41;
  text-shadow: 2px 0 #ABCB41;
}

.nav-work-together-link.is-glitching {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-work-together-link.is-glitching::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.nav-work-together-link.is-glitching::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

/* ============================================
   MOBILE MENU (REFERENCE-STYLE)
   ============================================ */

.mobile-menu-trigger {
  display: none;
}

.mobile-menu-panel {
  display: none;
}

@media (max-width: 1024px) {
  .header {
    top: max(24px, env(safe-area-inset-top));
    padding: 0 var(--grid-margin, 24px);
    justify-content: flex-end;
  }

  .lets-talk-pill {
    display: none;
  }

  .lets-talk-pill {
    top: max(24px, env(safe-area-inset-top));
    height: 50px;
    right: calc(var(--grid-margin, 24px) + 154px);
    padding: 0 16px;
    font-size: 15px;
    z-index: 1301;
  }

  .navbar {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 3px;
    border-radius: 999px;
    border: 2px solid #0E1412;
    background-color: #EAE6E5;
    justify-content: stretch;
    box-sizing: border-box; /* Border drawn inside, not outside */
    overflow: hidden;
    max-width: 100%;
    margin-left: auto;
    will-change: max-width;
    transition: border-color 0.45s ease;
  }

  .nav-pill,
  .nav-list {
    display: none;
  }

  .mobile-menu-trigger {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0F1513;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-trigger,
  .mobile-menu-trigger *,
  .mobile-menu-panel,
  .mobile-menu-panel * {
    font-family: neue-haas-grotesk-text, sans-serif !important;
    font-style: normal;
  }

  .mobile-menu-trigger-logo {
    display: inline-flex;
    align-items: center;
    height: 42px;
    max-width: 220px;
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
    opacity: 1;
    will-change: opacity;
    transition: none;
  }

  .mobile-menu-trigger-logo img {
    height: 42px;
    width: auto;
    display: block;
  }

  /* Menu button pill: MENU text + icon */
  .mobile-menu-button-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background-color: #0F1513; /* Black brand */
    border: 2px solid #0F1513;
    margin-left: 0;
    flex-shrink: 0;
    box-sizing: border-box; /* Border drawn inside, not outside */
    transition: border-color 0.5s ease;
  }

  html.mobile-nav-collapsed .navbar,
  body.mobile-nav-collapsed .navbar {
    max-width: var(--mobile-nav-collapsed-width, 184px);
    transition: border-color 0.45s ease;
  }

  html.mobile-nav-collapsing .mobile-menu-trigger-logo,
  body.mobile-nav-collapsing .mobile-menu-trigger-logo {
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
    transition: none;
  }

  html.mobile-nav-collapsed .mobile-menu-trigger-logo,
  body.mobile-nav-collapsed .mobile-menu-trigger-logo,
  html.mobile-nav-expanding .mobile-menu-trigger-logo,
  body.mobile-nav-expanding .mobile-menu-trigger-logo {
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }

  html.mobile-nav-expanding .navbar,
  body.mobile-nav-expanding .navbar {
    transition: border-color 0.45s ease;
  }

  .mobile-menu-trigger-labels {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 1em;
    pointer-events: none;
  }

  .mobile-menu-trigger-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: neue-haas-grotesk-text, sans-serif;
    font-weight: 400;
    font-size: 16px !important; /* Prevent browser zoom/text-size-adjust from scaling to 13.33px */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    letter-spacing: 0;
    line-height: 1;
    color: #F8F7F7;
    /* GSAP animates */
  }

  .mobile-menu-trigger-label--close {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
  }

  .mobile-menu-trigger-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
  }

  .mobile-menu-icon-sun {
    position: absolute;
    inset: 0;
    /* GSAP animates */
  }

  .mobile-menu-icon-sun img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  /* No ::after - was adding unwanted black dot in center of icon */

  .mobile-menu-icon-close {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  .mobile-menu-icon-close img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* Use red source icon but render it in light UI color */
    filter: brightness(0) saturate(100%) invert(98%);
  }

  /* Keep header (with close trigger) above panel when menu is open */
  html.mobile-menu-open .header,
  body.mobile-menu-open .header {
    z-index: 1300;
  }

  /* GSAP controls transform - only pointer-events when open */
  html.mobile-menu-open .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-panel {
    pointer-events: auto;
  }

  html.mobile-menu-open .navbar,
  body.mobile-menu-open .navbar {
    border-color: #AB3C2A;
  }

  .mobile-menu-panel {
    display: block;
    position: fixed;
    inset: 0;
    background: #CE5541;
    z-index: 1200;
    transform: translateY(-104%);
    will-change: transform;
    pointer-events: none;
    /* GSAP animates transform */
  }

  .mobile-menu-panel-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(max(72px, env(safe-area-inset-top) + 56px)) var(--grid-margin, 24px) calc(64px + env(safe-area-inset-bottom));
  }

  .mobile-menu-links {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mobile-menu-link-item {
    overflow: hidden;
  }

  .mobile-menu-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: #F8E8E3;
    font-family: neue-haas-grotesk-text, sans-serif;
    font-weight: 400;
    /* iPhone 16 Pro (402px wide) as master: 48px there, scales down/up on narrower/wider mobiles */
    font-size: 48px;
    line-height: 0.96;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform, opacity;
    transition: color 180ms ease;
    /* GSAP animates transform and opacity - no initial values to avoid conflict */
  }

  .mobile-menu-link--long {
    font-size: 48px;
    letter-spacing: -0.01em;
    white-space: normal;
    max-width: 100%;
    text-wrap: pretty;
    line-height: 0.98;
  }

  .mobile-menu-link-item--cta {
    margin-top: 8px;
  }

  .mobile-menu-link--cta {
    display: inline-flex;
    width: auto;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: #AB3C2A;
    color: #F8F7F7;
    text-transform: none;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .mobile-menu-link--cta:active,
  .mobile-menu-link--cta.active {
    color: #F8F7F7;
    opacity: 0.9;
  }

  .mobile-menu-link.active {
    color: #FDF4F2;
  }

  .mobile-menu-link:active {
    opacity: 0.8;
  }

  .mobile-menu-social {
    margin-top: auto;
    padding-top: 24px;
    border-top: 2px solid rgba(248, 232, 227, 0.75);
    width: min(100%, 360px);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
    transform: translateY(18px);
    opacity: 0;
    /* GSAP animates transform and opacity */
  }

  .mobile-menu-social-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobile-menu-social-title {
    margin: 0;
    font-family: neue-haas-grotesk-text, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #F8E8E3;
    opacity: 0.9;
  }

  .mobile-menu-social-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: flex-start;
  }

  .mobile-menu-social-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
  }

  .mobile-menu-social-icon:active {
    opacity: 0.75;
  }

  .mobile-menu-social-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(267%) hue-rotate(314deg) brightness(99%) contrast(96%);
  }

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* Tablet nav tuning */
@media (min-width: 768px) and (max-width: 1024px) {
  html,
  body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    min-height: var(--tablet-real-vh, 100dvh);
    background-color: #0F1513;
  }

  .navbar {
    min-height: 58px;
    padding: 4px;
  }

  .mobile-menu-panel {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    min-height: var(--tablet-real-vh, 100dvh);
    height: 100dvh;
    height: -webkit-fill-available;
    height: var(--tablet-real-vh, 100dvh);
    inset: 0;
  }

  .mobile-menu-panel-inner {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    min-height: var(--tablet-real-vh, 100dvh);
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .mobile-menu-trigger-logo {
    height: 50px;
    max-width: 260px;
  }

  .mobile-menu-trigger-logo img {
    height: 50px;
  }

  .mobile-menu-button-pill {
    min-height: 50px;
    padding: 0 12px;
  }

  .lets-talk-pill {
    right: calc(var(--grid-margin, 24px) + 176px);
  }

  .mobile-menu-link {
    font-size: 64px;
    line-height: 0.94;
  }

  .mobile-menu-link--long {
    font-size: 64px;
    line-height: 0.98;
  }

  .mobile-menu-link--cta {
    font-size: 20px;
    padding: 12px 20px;
  }

  .mobile-menu-links {
    margin-top: 96px;
    gap: 32px;
  }

  .mobile-menu-social {
    width: 100%;
  }
}

/* Scene wrapper - backup structure: z-index 1 so portfolio (z-index 10) scrolls on top */
.landing-scene-wrapper {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: #F8F7F7;
}

/* Hero only: prevent iOS long-press text selection/callout */
.landing-scene-wrapper,
.landing-scene-wrapper * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Canvas fixed to viewport */
#webgl-landing {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  z-index: 11;
}

/* Landing background grid with edge-fade gradients */
.landing-grid-overlay {
  --landing-grid-step: clamp(30px, 4.2vw, 64px);
  --landing-grid-line: rgba(199, 82, 62, 0.2);
  --landing-grid-fade-x: clamp(72px, 12vw, 220px);
  --landing-grid-fade-top: clamp(130px, 20vh, 280px);
  --landing-grid-fade-bottom: clamp(170px, 28vh, 380px);
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  background-color: #F8F7F7;
  background-image:
    linear-gradient(to right, rgba(248, 247, 247, 0.52) 0%, rgba(248, 247, 247, 0) 100%),
    linear-gradient(to left, rgba(248, 247, 247, 0.52) 0%, rgba(248, 247, 247, 0) 100%),
    linear-gradient(to right, var(--landing-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--landing-grid-line) 1px, transparent 1px);
  background-size:
    var(--landing-grid-fade-x) 100%,
    var(--landing-grid-fade-x) 100%,
    var(--landing-grid-step) var(--landing-grid-step),
    var(--landing-grid-step) var(--landing-grid-step);
  background-position: center center;
  background-position:
    left top,
    right top,
    center center,
    center center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat;
}

.landing-grid-overlay::before,
.landing-grid-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.landing-grid-overlay::before {
  display: none;
}

.landing-grid-overlay::after {
  bottom: 0;
  height: var(--landing-grid-fade-bottom);
  background: linear-gradient(
    to top,
    rgba(248, 247, 247, 0.92) 0%,
    rgba(248, 247, 247, 0.72) 34%,
    rgba(248, 247, 247, 0) 100%
  );
}

.landing-grid-overlay .v-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--landing-grid-line);
  z-index: 1;
}

.landing-grid-overlay .h-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--landing-grid-line);
  z-index: 1;
}

/* Vertical line at START of 4th column (left edge) */
.landing-grid-overlay .col-4 { 
  left: calc(var(--grid-margin, 24px) + ((100% - 2 * var(--grid-margin, 24px) - 11 * var(--grid-gutter, 12px)) / 12) * 3 + var(--grid-gutter, 12px) * 3); 
}

/* Vertical line at END of 7th column (right edge) - spans columns 4,5,6,7 */
.landing-grid-overlay .col-8 { 
  left: calc(var(--grid-margin, 24px) + ((100% - 2 * var(--grid-margin, 24px) - 11 * var(--grid-gutter, 12px)) / 12) * 7 + var(--grid-gutter, 12px) * 6); 
}

.landing-grid-overlay .center-v-line {
  left: 50%;
}

.landing-grid-overlay .row-3 { 
  top: calc((100% - 5 * 16px) / 6 * 2 + 16px * 2); 
}

.landing-grid-overlay .row-5 { 
  top: calc((100% - 5 * 16px) / 6 * 4 + 16px * 4); 
}

.landing-grid-overlay .bottom-line {
  bottom: 166px;
  top: auto;
}

@media (max-width: 1024px) {
  .landing-grid-overlay {
    --landing-grid-step: clamp(42px, 7.2vw, 88px);
    --landing-grid-line: rgba(199, 82, 62, 0.15);
  }
}

/* Scroll spacer - creates scroll area for animation scrubbing
   Height optimized for Elementor compatibility */
.landing-scroll-spacer {
  position: relative;
  width: 100%;
  height: 300vh; /* 3x viewport height for smooth scroll experience */
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

/* Download Screenshot Button */
.download-screenshot-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 15;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.75);
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  opacity: 0;
  animation: fadeInButton 0.5s ease 1s forwards;
}

@keyframes fadeInButton {
  to {
    opacity: 1;
  }
}

.download-screenshot-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.download-screenshot-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ============================================
   HERO TEXT ELEMENTS
   ============================================ */

.hero-text-container {
  position: fixed;
  top: calc(36px + 79px + 93px); /* navbar top (36px) + navbar height (79px) + gap (93px) = 208px */
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
}

.hero-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: #0F1513;
  margin: 0;
}

.hero-text-left {
  grid-column: 1 / span 3;
  text-align: left;
}

.hero-text-right {
  grid-column: 10 / span 3;
  text-align: right;
}

/* ============================================
   MAIN HEADING
   ============================================ */

.main-heading-container {
  position: fixed;
  top: calc(204px * (100vh / 900px)); /* 204px at 900px height, scales with viewport */
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
  will-change: opacity, transform;
}

.tagline-text--below-heading {
  display: none; /* Shown on mobile only */
}

.main-heading {
  grid-column: 1 / span 12;
  text-align: center;
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-size: clamp(48px, 5.56vw, 120px); /* 48px min, 80px at 1440px, 107px at 1920px, 120px max */
  line-height: 100%;
  color: #CE5541;
  margin: 0;
}

/* ============================================
   DESCRIPTION TEXT (Frame 48+)
   ============================================ */

.description-container {
  position: fixed;
  top: calc(300px * (100vh / 900px)); /* 300px at 900px height, scales with viewport */
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.description-text {
  grid-column: 6 / span 7;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 3.33vw, 72px);
  line-height: 100%;
  color: #0F1513;
  margin: 0;
}

.description-glitch {
  color: #0F1513;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

.description-glitch.active {
  color: #CE5541;
}

.description-glitch.glitching {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.description-glitch::before,
.description-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.description-glitch.glitching::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.description-glitch.glitching::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

/* Project Navigation Arrows */
.project-nav-arrows {
  grid-column: 1 / span 7;
  display: flex;
  gap: 8px;
  margin-top: 32px;
  pointer-events: auto;
}

.arrow-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.arrow-btn:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.arrow-btn:active {
  transform: scale(0.95);
}

.arrow-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Project Cards */
.project-cards {
  grid-column: 1 / span 6;
  display: flex;
  gap: var(--grid-gutter, 32px);
  align-items: start;
  margin-top: 16px;
  pointer-events: auto;
}

.project-card-wrapper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
}

.project-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  height: 22px;
  min-height: 22px;
  overflow: visible;
}

.project-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  color: #40160F;
  margin: 0;
  line-height: 1;
}

.project-tags-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.project-card {
  height: 208px;
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid #1A1816;
  background: #FCE7E4;
  overflow: hidden;
  box-sizing: border-box;
}

.project-card-image {
  position: relative;
}

.project-card-info {
  padding: 24px 16px;
  background: #FCE7E4 url('../images/suenos-sports-pl.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.project-card-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(244, 183, 173, 0.9);
  z-index: 0;
  transition: opacity 0.4s ease;
}

.project-card-info.hide-overlay::before {
  opacity: 0;
}

.project-card-info > * {
  position: relative;
  z-index: 1;
}

.project-card-info.animating-out > * {
  position: absolute;
  left: 16px;
  right: 16px;
}

.project-card-wrapper-info {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
}

.project-header-spacer {
  height: 22px;
  min-height: 22px;
  margin-bottom: 16px;
  overflow: hidden;
}

.project-card-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  color: #40160F;
  margin: 0 0 16px 0;
  line-height: 1;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.project-tag {
  background: #9B4031;
  color: #FCE7E4;
  padding: 4px 8px;
  border-radius: 20px;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.project-image {
  flex: 1;
  background: #1A1816;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.project-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #40160F;
  text-decoration: none;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  transition: gap 0.3s ease;
}

.project-link:hover {
  gap: 8px;
}

.project-link img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Hidden card 1 content (shown on hover) */
.project-card-content {
  z-index: 2;
}

.project-card-title-hidden {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  color: #40160F;
  margin: 0 0 16px 0;
  line-height: 1;
}

.project-tags-hidden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}

.project-link-hidden {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #40160F;
  text-decoration: none;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  transition: gap 0.3s ease;
}

.project-link-hidden:hover {
  gap: 8px;
}

.project-link-hidden img {
  width: 24px;
  height: 24px;
  display: block;
}

.project-card-image {
  position: relative;
}

/* Glitch Text Animation */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0F1513;
  overflow: hidden;
  opacity: 0;
  clip: rect(0, 0, 0, 0);
}

.glitch-text::before {
  color: #FCE7E4;
  z-index: -2;
  left: -2px;
  text-shadow: -2px 0 #FCE7E4;
}

.glitch-text::after {
  color: #ABCB41;
  z-index: -1;
  left: 2px;
  text-shadow: 2px 0 #ABCB41;
}

.glitch-text.glitching {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glitch-text.glitching::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.glitch-text.glitching::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

/* Mouse action text - smaller displacement for Hold/Release */
.mouse-action-text.glitching::before {
  animation: channel-split-dark-small 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.mouse-action-text.glitching::after {
  animation: channel-split-green-small 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

/* Main text - subtle RGB chromatic aberration */
@keyframes rgb-split {
  0%, 100% {
    text-shadow: 0 0 transparent, 0 0 transparent;
  }
  20% {
    text-shadow: -3px 0 #0F1513, 3px 0 #ABCB41;
  }
  40% {
    text-shadow: -5px 0 #0F1513, 5px 0 #ABCB41;
  }
  60% {
    text-shadow: -3px 0 #0F1513, 3px 0 #ABCB41;
  }
  80% {
    text-shadow: -1px 0 #0F1513, 1px 0 #ABCB41;
  }
}

/* Pricing buttons: same effect, but no black ghost on light backgrounds */
@keyframes rgb-split-pricing {
  0%, 100% {
    text-shadow: 0 0 transparent, 0 0 transparent;
  }
  20% {
    text-shadow: -3px 0 #ABCB41, 3px 0 #ABCB41;
  }
  40% {
    text-shadow: -5px 0 #ABCB41, 5px 0 #ABCB41;
  }
  60% {
    text-shadow: -3px 0 #ABCB41, 3px 0 #ABCB41;
  }
  80% {
    text-shadow: -1px 0 #ABCB41, 1px 0 #ABCB41;
  }
}

/* Pricing button 2: allow the "dark" ghost to be #0F1513 */
@keyframes rgb-split-pricing-dark {
  0%, 100% {
    text-shadow: 0 0 transparent, 0 0 transparent;
  }
  20% {
    text-shadow: -3px 0 #0F1513, 3px 0 #ABCB41;
  }
  40% {
    text-shadow: -5px 0 #0F1513, 5px 0 #ABCB41;
  }
  60% {
    text-shadow: -3px 0 #0F1513, 3px 0 #ABCB41;
  }
  80% {
    text-shadow: -1px 0 #0F1513, 1px 0 #ABCB41;
  }
}

/* Dark channel - stepped horizontal displacement */
@keyframes channel-split-dark {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(-9px);
  }
  75% {
    transform: translateX(-6px);
  }
}

/* Green channel - stepped horizontal displacement (opposite direction) */
@keyframes channel-split-green {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(9px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* Dark channel - smaller displacement for mouse action text */
@keyframes channel-split-dark-small {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(-1px);
  }
}

/* Green channel - smaller displacement for mouse action text */
@keyframes channel-split-green-small {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(1px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(1px);
  }
}

/* Dark channel - vertical slicing effect */
@keyframes slice-dark {
  0%, 100% { 
    clip: rect(0, 9999px, 0, 0); 
  }
  12.5% { 
    clip: rect(0px, 9999px, 25px, 0); 
  }
  25% { 
    clip: rect(35px, 9999px, 60px, 0); 
  }
  37.5% { 
    clip: rect(15px, 9999px, 40px, 0); 
  }
  50% { 
    clip: rect(50px, 9999px, 75px, 0); 
  }
  62.5% { 
    clip: rect(5px, 9999px, 30px, 0); 
  }
  75% { 
    clip: rect(45px, 9999px, 70px, 0); 
  }
  87.5% { 
    clip: rect(20px, 9999px, 45px, 0); 
  }
}

/* Green channel - vertical slicing effect (offset pattern) */
@keyframes slice-green {
  0%, 100% { 
    clip: rect(0, 9999px, 0, 0); 
  }
  12.5% { 
    clip: rect(40px, 9999px, 65px, 0); 
  }
  25% { 
    clip: rect(10px, 9999px, 35px, 0); 
  }
  37.5% { 
    clip: rect(55px, 9999px, 80px, 0); 
  }
  50% { 
    clip: rect(5px, 9999px, 30px, 0); 
  }
  62.5% { 
    clip: rect(50px, 9999px, 75px, 0); 
  }
  75% { 
    clip: rect(15px, 9999px, 40px, 0); 
  }
  87.5% { 
    clip: rect(35px, 9999px, 60px, 0); 
  }
}

/* ============================================
   MOUSE HOLD MICRO COPY
   ============================================ */

.mouse-hold-container {
  position: fixed;
  /* Heading top + heading height (2 lines * line-height 100% * font-size) + 150px gap */
  top: calc((204px * (100vh / 900px)) + (2 * clamp(48px, 6.67vw, 144px)) + var(--mouse-hold-shift-y, 150px));
  z-index: 12;
  pointer-events: none;
  /* Center horizontally at the center of 8th column */
  left: 50%;
  transform: translateX(calc(
    /* Move to left edge of grid */
    -50vw + var(--grid-margin, 24px) +
    /* Move to start of 8th column (7 columns + 7 gaps) */
    (7 * ((100vw - 2 * var(--grid-margin, 24px) - 11 * var(--grid-gutter, 12px)) / 12)) +
    (7 * var(--grid-gutter, 12px)) +
    /* Move to center of 8th column (half column width) */
    (0.5 * ((100vw - 2 * var(--grid-margin, 24px) - 11 * var(--grid-gutter, 12px)) / 12)) -
    /* Center the component itself (compensate for the flex container width) */
    32px +
    /* Additional horizontal shift to the right */
    var(--mouse-hold-shift-x, 36px)
  ));
}

.mouse-hold-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mouse-hold-svg {
  width: auto;
  height: 49px;
}

.mouse-hold-icon-mobile {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Animate the mouse dot - radiating effect */
.mouse-hold-svg .mouse-dot {
  animation: mouse-radiate 2s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes mouse-radiate {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

.mouse-hold-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: #0F1513;
  margin: 0;
  opacity: 0.6;
  text-align: left;
}

/* ============================================
   VIEW PROJECTS BUTTON
   ============================================ */

.view-projects-btn {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #0F1513;
  border-radius: 100px;
  padding: 3.5px 4px;
  text-decoration: none;
  cursor: pointer;
}

.view-projects-btn:hover .view-projects-text {
  animation: rgb-split 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.view-projects-btn:hover .view-projects-text::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
}

.view-projects-btn:hover .view-projects-text::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
}

.view-projects-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.view-projects-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #EAE6E5;
  padding-right: 20px;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 0;
  display: inline-block;
}

.view-projects-text::before,
.view-projects-text::after {
  background: #0F1513;
}

.view-projects-text::before {
  color: #FCE7E4;
  text-shadow: -2px 0 #FCE7E4;
}

.view-projects-text::after {
  color: #ABCB41;
  text-shadow: 2px 0 #ABCB41;
}

/* ============================================
   TAGLINE TEXT
   ============================================ */

.tagline-container {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
}

.tagline-text {
  grid-column: 1 / span 3;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  color: #0F1513;
  opacity: 0.6;
  margin: 0;
  text-align: left;
}

/* ============================================
   CATEGORY LINKS
   ============================================ */

.category-links {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
  row-gap: 16px;
}

.category-links > .category-link {
  grid-column: 12 / 13;
  justify-self: end;
}

.category-links-row {
  grid-column: 12 / 13;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
}

.category-link {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #0F1513;
  opacity: 0.6;
  text-decoration: none;
  text-align: right;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.category-link:hover {
  opacity: 0.8;
}

/* ============================================
   SCROLL DOWN INDICATOR
   ============================================ */

.scroll-down-container {
  position: fixed;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  padding: 0 var(--grid-margin, 24px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 12px);
}

.scroll-down-line {
  grid-column: 9 / span 1;
  justify-self: center;
  width: 2.5px;
  height: 70px;
  background-color: #CE5541;
}

.scroll-down-text {
  grid-column: 9 / span 1;
  justify-self: center;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: #0F1513;
  margin: 0;
  margin-top: 12px;
  text-align: center;
  opacity: 0.6;
}

/* Pin-spacer styling: prevent white gap when scrolling past pinned sections */
.pin-spacer:has(.portfolio-cards-section) {
  background-color: transparent;
  overflow: hidden;
}

.pin-spacer:has(.how-we-work-section) {
  overflow: hidden;
}


/* ============================================
   PORTFOLIO CARDS SECTION
   ============================================ */

.portfolio-cards-section {
  --sw-section-pt: 80px;
  --sw-section-pb: 64px;
  --sw-title-gap: 16px;
  --sw-track-gap: var(--grid-gutter, 12px);
  --sw-card-radius: 36px;
  --sw-card-border-width: 3px;
  --sw-card-border-color: rgba(15, 21, 19, 0.1);
  --sw-card-pad-top: 16px;
  --sw-card-pad-x: 16px;
  --sw-card-pad-bottom: 38px;
  /* Inner media radius follows the rule: outer radius - outer horizontal padding */
  --sw-image-radius: calc(var(--sw-card-radius) - var(--sw-card-pad-x));
  --sw-bottom-gap: 16px;
  --sw-bottom-margin-top: 16px;
  --sw-bottom-margin-left: clamp(6px, 0.56vw, 8px);
  --sw-pill-gap: 6px;
  --sw-pill-font-size: 14px;
  --sw-pill-pad-y: 4px;
  --sw-pill-pad-x: 8px;
  --sw-description-margin-top: 64px;
  --sw-description-size: 28px;
  margin-top: 0;
  padding-top: var(--sw-section-pt);
  padding-bottom: var(--sw-section-pb);
  position: relative;
  z-index: 10;
  min-height: 100vh;
  overflow: hidden;
  background-color: transparent;
}

.portfolio-description {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--sw-description-size);
  line-height: 130%;
  color: #0F1513;
  opacity: 0.6;
  margin: var(--sw-description-margin-top) var(--grid-margin, 24px) 0;
  padding: 0;
  width: calc(100% - 2 * var(--grid-margin, 24px));
  max-width: none;
}

.portfolio-sticky-frame {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  will-change: transform;
}

/* Ease wrapper - contains the cards */
.portfolio-ease-wrapper {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.portfolio-section-title {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px); /* 24px min, 36px at 1440px */
  color: #0F1513;
  margin: 0;
  margin-bottom: var(--sw-title-gap); /* spacing below title, above cards */
  padding-left: var(--grid-margin, 24px);
  width: 100%;
}

@media (min-width: 1440px) {
  .portfolio-cards-section {
    /* Keep 28px at 1440, then scale up only on wider screens */
    --sw-description-size: clamp(28px, calc(28px + (100vw - 1440px) * 0.02), 44px);
  }

  .portfolio-section-title {
    font-size: clamp(36px, 1.875vw, 48px); /* 36px at 1440px, scales to 48px at 2560px, then caps */
  }
}

/* Container for horizontal scroll */
.portfolio-cards-container {
  width: 100%;
  /* Allow incoming cards to be fully visible even when
     they slightly extend past the track while animating */
  overflow-x: visible;
  overflow-y: visible;
}

/* Track that will slide horizontally */
.portfolio-cards-track {
  display: flex;
  gap: var(--sw-track-gap);
  /* Horizontal padding is handled via JS margins on the track,
     so keep padding 0 to avoid asymmetric gaps / clipping */
  padding: 0;
  transform: translateZ(0);
}

.portfolio-card {
  border-radius: var(--sw-card-radius);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: #F8F7F7;
  border: 0;
  box-shadow: inset 0 0 0 var(--sw-card-border-width) var(--sw-card-border-color);
  padding: var(--sw-card-pad-top) var(--sw-card-pad-x) var(--sw-card-pad-bottom);
  box-sizing: border-box;
}

.portfolio-card-large {
  /* 8 columns: width of 8 columns + 7 gutters between them */
  /* Column width = (100% - 11 gutters) / 12 */
  width: calc((100% - 11 * var(--grid-gutter, 12px)) / 12 * 8 + 7 * var(--grid-gutter, 12px));
}

.portfolio-card-small {
  /* 4 columns: width of 4 columns + 3 gutters between them */
  /* Column width = (100% - 11 gutters) / 12 */
  width: calc((100% - 11 * var(--grid-gutter, 12px)) / 12 * 4 + 3 * var(--grid-gutter, 12px));
}

.portfolio-card-image {
  background: #EAE6E5;
  background-size: cover;
  background-position: center;
  border-radius: var(--sw-image-radius);
  overflow: hidden;
  height: 52vh;
  min-height: 52vh;
  max-height: 52vh;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

.portfolio-card-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-card-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 110%;
  color: rgba(15, 21, 19, 0.8);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-card-bottom {
  display: flex;
  align-items: center;
  gap: var(--sw-bottom-gap);
  margin-top: var(--sw-bottom-margin-top);
  margin-left: var(--sw-bottom-margin-left);
}

.portfolio-card-pills {
  display: flex;
  align-items: center;
  gap: var(--sw-pill-gap);
  flex-wrap: nowrap;
  overflow: hidden;
}

.portfolio-pill {
  background-color: #E1E1E1;
  color: #0F1513;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--sw-pill-font-size);
  padding: var(--sw-pill-pad-y) var(--sw-pill-pad-x);
  border-radius: 100px;
  white-space: nowrap;
}

/* ========================= */
/* Services Section */
/* ========================= */

.services-section {
  --svc-section-mt: 64px;
  --svc-section-pb: 64px;
  --svc-grid-gap: var(--grid-gutter, 12px);
  --svc-card-radius: 28px;
  --svc-title-mt: 32px;
  --svc-title-size: 28px;
  --svc-title-lh: 110%;
  --svc-desc-mt: 16px;
  --svc-desc-size: 20px;
  --svc-desc-lh: 132%;
  margin-top: var(--svc-section-mt);
  padding: 0 var(--grid-margin, 24px) var(--svc-section-pb);
  position: relative;
  z-index: 10;
  min-height: auto;
}

.services-section-title {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  color: #0F1513;
  margin: 0 0 16px 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 1440px) {
  .services-section-title {
    font-size: clamp(36px, 1.875vw, 48px);
  }
}

.services-cards-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--svc-grid-gap);
  width: 100%;
}

.service-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
}

.service-card-motion {
  position: relative;
}

.service-card-content {
  background: #EAE6E5;
  border-radius: var(--svc-card-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* Maintain aspect ratio based on 1440px master: 341.33px width / 484px height */
  aspect-ratio: 407.33 / 484;
  isolation: isolate;
  border: 2.5px solid #0F1513;
}

.service-card-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
  transform: scale(1.02);
}

.service-card-number {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 8vw, 120px);
  color: #0F1513;
  opacity: 0.1;
  line-height: 1;
  display: none;
}

.service-card-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--svc-title-size);
  line-height: var(--svc-title-lh);
  color: #0F1513;
  margin: var(--svc-title-mt) 0 0 6px;
  padding: 0;
}

.service-card-description {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--svc-desc-size);
  line-height: var(--svc-desc-lh);
  color: rgba(15, 21, 19, 0.6);
  margin: var(--svc-desc-mt) 0 0 6px;
  padding: 0;
}

.service-card-featured-link {
  position: absolute;
  top: 0;
  left: 6px;
  transform: translateY(calc(-100% - 8px));
  display: inline-block;
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  background-image: linear-gradient(
    120deg,
    #CF5541 0%,
    #E0644A 38%,
    #ABCB41 62%,
    #CF5541 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: service-featured-gradient 7s ease-in-out infinite;
}

@keyframes service-featured-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================= */
/* How We Work Section */
/* ========================= */

.how-we-work-section {
  --hww-orange: #E0644A;
  --hww-bg-rgb: 15, 21, 19;
  --hww-title-rgb: 224, 100, 74;
  --hww-title-alpha: 0.86;
  --hww-text-rgb: 248, 247, 247;
  --hww-text-alpha: 0.6;
  --hww-step-title-size: 20px;
  --hww-step-text-size: clamp(32px, 3.33vw, 72px);
  --hww-step-text-lh: 100%;
  --hww-empty-radius: 28px;
  --hww-grid-step: clamp(30px, 4.2vw, 64px);
  --hww-grid-line: rgba(199, 82, 62, 0.2);
  --hww-grid-fade-x: clamp(72px, 12vw, 220px);
  --hww-grid-fade-top: clamp(130px, 20vh, 280px);
  --hww-grid-fade-bottom: clamp(170px, 28vh, 380px);
  margin-top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  padding: 0 var(--grid-margin, 24px);
  background: rgb(var(--hww-bg-rgb));
  position: relative;
  z-index: 10;
  display: flex;
  isolation: isolate;
  overflow: hidden;
}

.how-we-work-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image:
    linear-gradient(to right, rgba(var(--hww-bg-rgb), 0.52) 0%, rgba(var(--hww-bg-rgb), 0) 100%),
    linear-gradient(to left, rgba(var(--hww-bg-rgb), 0.52) 0%, rgba(var(--hww-bg-rgb), 0) 100%),
    linear-gradient(to right, var(--hww-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hww-grid-line) 1px, transparent 1px);
  background-size:
    var(--hww-grid-fade-x) 100%,
    var(--hww-grid-fade-x) 100%,
    var(--hww-grid-step) var(--hww-grid-step),
    var(--hww-grid-step) var(--hww-grid-step);
  background-position:
    left top,
    right top,
    center center,
    center center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat;
}

.how-we-work-grid-overlay::before,
.how-we-work-grid-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.how-we-work-grid-overlay::before {
  top: 0;
  height: var(--hww-grid-fade-top);
  background: linear-gradient(
    to bottom,
    rgba(var(--hww-bg-rgb), 0.92) 0%,
    rgba(var(--hww-bg-rgb), 0.72) 34%,
    rgba(var(--hww-bg-rgb), 0) 100%
  );
}

.how-we-work-grid-overlay::after {
  bottom: 0;
  height: var(--hww-grid-fade-bottom);
  background: linear-gradient(
    to top,
    rgba(var(--hww-bg-rgb), 0.92) 0%,
    rgba(var(--hww-bg-rgb), 0.72) 34%,
    rgba(var(--hww-bg-rgb), 0) 100%
  );
}

.how-we-work-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: rgb(var(--hww-bg-rgb));
  pointer-events: none;
}

.how-we-work-grid {
  width: 100%;
  min-height: inherit;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter, 12px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.how-we-work-content {
  grid-column: 1 / span 7;
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.how-we-work-step-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.how-we-work-step {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.how-we-work-step + .how-we-work-step {
  margin-top: 48px;
}

.how-we-work-step-title {
  margin: 0 0 16px 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--hww-step-title-size);
  line-height: 120%;
  color: rgba(var(--hww-title-rgb), var(--hww-title-alpha));
}

.how-we-work-step-text {
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--hww-step-text-size);
  line-height: var(--hww-step-text-lh);
  color: rgba(var(--hww-text-rgb), var(--hww-text-alpha));
}

.how-we-work-empty {
  grid-column: 8 / span 5;
  justify-self: stretch;
  align-self: center;
  min-width: 0;
  display: flex;
}

.how-we-work-empty::before {
  display: none;
}

.how-we-work-canvas-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: clamp(300px, 58vh, 560px);
  min-height: clamp(300px, 58vh, 560px);
  border-radius: var(--hww-empty-radius);
  background: transparent;
  overflow: hidden;
}

.how-we-work-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.how-we-work-section--animated .how-we-work-step-stack {
  height: var(--hww-stack-height, clamp(300px, 36vh, 430px));
  overflow: hidden;
}

.how-we-work-section--animated .how-we-work-step {
  position: absolute;
  inset: 0;
  margin: 0;
  min-height: auto;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.how-we-work-section--animated .how-we-work-step + .how-we-work-step {
  margin-top: 0;
}

/* Studio section mobile/tablet layout */
@media (max-width: 1024px) {
  .portfolio-cards-section {
    --sw-section-pt: 48px;
    --sw-section-pb: 48px;
    --sw-title-gap: 14px;
    --sw-track-gap: 20px;
    --sw-card-radius: 24px;
    --sw-card-border-width: 2px;
    --sw-card-pad-top: 12px;
    --sw-card-pad-x: 12px;
    --sw-card-pad-bottom: 20px;
    --sw-bottom-gap: 10px;
    --sw-bottom-margin-top: 14px;
    --sw-bottom-margin-left: 0;
    --sw-pill-gap: 8px;
    --sw-pill-font-size: 14px;
    --sw-pill-pad-y: 6px;
    --sw-pill-pad-x: 10px;
    --sw-description-margin-top: 32px;
    --sw-description-size: clamp(16px, 2.6vw, 20px);
    --sw-mobile-side-padding: var(--grid-margin, 24px);
    min-height: auto;
    overflow: visible;
  }

  .portfolio-section-title {
    margin-bottom: var(--sw-title-gap);
    letter-spacing: 0 !important;
  }

  .services-section-title,
  .pricing-section-title,
  .how-we-work-step-title,
  .how-we-work-step-text {
    letter-spacing: 0 !important;
  }

  .portfolio-section-title,
  .services-section-title,
  .pricing-section-title {
    font-size: 28px;
    line-height: 1.04;
    font-weight: 400 !important;
    opacity: 1 !important;
    color: #0F1513 !important;
  }

  .services-section-title {
    margin-bottom: 14px;
  }

  :where(h1, h2, h3, h4, h5, h6, p, span, a, li, button, label, input, textarea) {
    letter-spacing: 0 !important;
  }

  .portfolio-cards-container {
    padding: 0 var(--sw-mobile-side-padding);
    overflow: visible;
  }

  .portfolio-cards-track {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--sw-track-gap);
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .portfolio-card {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    border-radius: var(--sw-card-radius);
    padding: var(--sw-card-pad-top) var(--sw-card-pad-x) var(--sw-card-pad-bottom);
  }

  .portfolio-card-image {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 5;
    border-radius: var(--sw-image-radius);
  }

  .portfolio-card-bottom {
    margin-top: var(--sw-bottom-margin-top);
    margin-left: var(--sw-bottom-margin-left);
    gap: var(--sw-bottom-gap);
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(20px, 3.5vw, 24px);
  }

  .portfolio-card-pills {
    flex-wrap: wrap;
    overflow: visible;
    gap: var(--sw-pill-gap);
  }

  .portfolio-pill {
    font-size: var(--sw-pill-font-size);
    padding: var(--sw-pill-pad-y) var(--sw-pill-pad-x);
  }

  .portfolio-description {
    margin-top: var(--sw-description-margin-top);
    font-size: var(--sw-description-size);
    line-height: 140%;
  }

  .services-section {
    --svc-section-mt: 48px;
    --svc-section-pb: 48px;
    --svc-grid-gap: 18px;
    --svc-card-radius: 22px;
    --svc-title-mt: 12px;
    --svc-title-size: clamp(22px, 3.6vw, 28px);
    --svc-desc-mt: 6px;
    --svc-desc-size: 16px;
    --svc-desc-lh: 130%;
  }

  .services-cards-container {
    grid-template-columns: 1fr;
  }

  .service-card {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .service-card-content {
    aspect-ratio: 4 / 5;
  }

  .service-card-title {
    margin-top: var(--svc-title-mt);
    margin-left: 6px;
    font-size: var(--svc-title-size);
  }

  .service-card-description {
    margin-top: var(--svc-desc-mt);
    margin-left: 6px;
    font-size: var(--svc-desc-size);
    line-height: var(--svc-desc-lh);
  }

  .how-we-work-section {
    --hww-step-title-size: 18px;
    --hww-step-text-size: 56px;
    --hww-grid-step: clamp(42px, 7.2vw, 88px);
    --hww-grid-line: rgba(199, 82, 62, 0.15);
    min-height: auto;
    height: auto;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .how-we-work-grid {
    align-items: start;
  }

  .how-we-work-content {
    grid-column: 1 / span 12;
    min-height: auto;
    height: auto;
  }

  .how-we-work-empty {
    display: none;
  }

  .how-we-work-step-stack {
    height: auto;
    overflow: visible;
  }

  .how-we-work-step {
    min-height: auto;
    padding: 0;
  }

  .how-we-work-step + .how-we-work-step {
    margin-top: 40px;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
  .services-section {
    --svc-grid-gap: var(--grid-gutter, 16px);
    --svc-title-size: clamp(20px, 2.4vw, 24px);
    --svc-desc-size: 16px;
    --svc-title-mt: 12px;
    --svc-desc-mt: 6px;
  }

  .mouse-hold-container {
    --mouse-hold-shift-x: 84px;
    --mouse-hold-shift-y: 190px;
  }

  .mouse-hold-svg {
    display: none;
  }

  .mouse-hold-icon-mobile {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
  }

  .mouse-hold-inner {
    position: relative;
    display: inline-block;
    min-height: 32px;
    padding-left: 40px;
  }

  .main-heading-container {
    top: calc(max(24px, env(safe-area-inset-top)) + 58px + 80px);
    z-index: 13;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 12px);
    row-gap: 16px;
  }

  .main-heading {
    width: 100%;
    grid-column: 1 / span 12;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .tagline-text--below-heading {
    display: none;
    margin-top: 0;
    grid-column: 2 / span 10;
    text-align: center;
    font-size: 22px !important;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .tagline-container {
    display: grid;
  }

  .tagline-text {
    grid-column: 1 / span 4;
    font-size: 20px;
  }

  .main-heading {
    grid-column: 1 / span 12;
  }

  .description-container {
    top: auto;
    bottom: calc((64px + 20px + 32px) + 49px + 64px);
  }

  .description-text {
    grid-column: 1 / span 12;
    text-align: left;
    font-size: 56px;
    line-height: 1;
  }

  .category-links {
    bottom: 64px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 12px);
    row-gap: 16px;
  }

  .category-links > .category-link {
    grid-column: 12 / 13;
    justify-self: end;
    text-align: right;
  }

  .category-links-row {
    grid-column: 12 / 13;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .category-links-row .category-link:first-child,
  .category-links-row .category-link:last-child {
    grid-column: auto;
    justify-self: auto;
    text-align: right;
  }

  .category-links-row .category-link {
    width: max-content;
    align-self: flex-end;
  }

  .category-links .category-link {
    font-size: 20px;
    line-height: 1;
  }

  /* 32px gap above bottom links on tablet */
  .view-projects-btn {
    bottom: calc(64px + 20px + 8px);
  }

  .main-heading {
    font-size: clamp(80px, 9.2vw, 108px);
    line-height: 0.96;
  }

  .portfolio-cards-section {
    --sw-track-gap: 20px;
    --sw-card-pad-top: 14px;
    --sw-card-pad-x: 14px;
    --sw-card-pad-bottom: 24px;
  }

  .portfolio-cards-track {
    grid-template-columns: 1fr !important;
  }

  .portfolio-card:last-child {
    grid-column: auto;
  }

  .portfolio-card {
    width: 100% !important;
  }

  .portfolio-card-image {
    aspect-ratio: 16 / 10;
  }

  .services-cards-container {
    gap: var(--svc-grid-gap);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .service-card {
    grid-column: span 4 !important;
    width: 100% !important;
    min-width: 0;
  }

  .service-card:last-child {
    grid-column: span 4 !important;
  }

  .service-card-content {
    aspect-ratio: 407.33 / 484;
  }

  .how-we-work-section {
    --hww-step-text-size: 56px;
    --hww-step-title-size: 18px;
    --hww-step-text-lh: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .how-we-work-grid {
    align-items: center;
    align-content: center;
    row-gap: 8px;
  }

  .how-we-work-content {
    grid-column: 1 / span 12;
    order: 2;
    min-height: auto;
    height: auto;
    align-self: center;
    align-items: flex-start;
  }

  .how-we-work-empty {
    display: flex;
    grid-column: 1 / span 12;
    order: 1;
    align-self: center;
    position: static;
    top: auto;
    height: auto;
  }

  .how-we-work-canvas-frame {
    height: clamp(240px, 42vh, 380px);
    min-height: clamp(240px, 42vh, 380px);
  }

  .how-we-work-section--animated .how-we-work-step-stack {
    height: var(--hww-stack-height, clamp(200px, 30vh, 300px));
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .portfolio-cards-section {
    --sw-title-gap: 12px;
  }

  .services-section {
    --svc-title-size: clamp(18px, 5.3vw, 22px);
    --svc-desc-size: 16px;
    --svc-title-mt: 12px;
    --svc-desc-mt: 6px;
  }

  .mouse-hold-container {
    left: calc(100vw - 24px - 132px);
    right: auto;
    /* Keep current vertical logic and move it 80px further down vs original */
    top: calc((204px * (100vh / 900px)) + (2 * clamp(48px, 6.67vw, 144px)) + 230px);
    transform: none;
    width: max-content;
  }

  .mouse-hold-svg {
    display: none;
  }

  .mouse-hold-icon-mobile {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .mouse-hold-text {
    font-size: 14px;
    white-space: nowrap;
  }

  .mouse-hold-inner {
    position: relative;
    display: inline-block;
    min-height: 32px;
    padding-left: 40px;
  }

  .main-heading-container {
    top: calc(max(24px, env(safe-area-inset-top)) + 58px + 64px); /* 64px below menu pill */
    z-index: 13;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 12px);
    row-gap: 16px;
  }

  .main-heading {
    width: 100%;
    grid-column: 1 / span 12;
    text-align: center;
    /* Keep hero heading as 2 lines (explicit <br>) across mobile widths */
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .tagline-text--below-heading {
    display: block;
    margin-top: 0;
    grid-column: 2 / span 10; /* 10-column width on mobile */
    text-align: center;
    font-size: 18px !important;
    line-height: 1.22;
    letter-spacing: 0;
  }

  .tagline-container {
    display: none; /* Hide desktop tagline - use the one below heading on mobile */
  }

  .view-projects-btn {
    bottom: 72px; /* 32px (links from bottom) + 16px (link text) + 24px gap */
  }

  .description-container {
    top: auto;
    /* 24px gap above button top: 72px button bottom + 49px button height + 24px gap */
    bottom: calc(72px + 49px + 24px);
  }

  .category-links {
    bottom: 32px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter, 12px);
    row-gap: 0;
    align-items: center;
  }

  .category-links > .category-link {
    grid-column: 1 / span 4;
    justify-self: start;
    min-width: 0;
    text-align: left;
  }

  .category-links-row {
    grid-column: 5 / span 8;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--grid-gutter, 12px);
    align-items: center;
    min-width: 0;
  }

  .category-links-row .category-link:first-child {
    grid-column: 1 / span 4;
    justify-self: center;
    text-align: center;
  }

  .category-links-row .category-link:last-child {
    grid-column: 5 / span 4;
    justify-self: end;
    text-align: right;
  }

  .category-links .category-link {
    min-width: 0;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .main-heading {
    font-size: clamp(36px, 11.94vw, 48px);
    line-height: 0.96;
  }

  .main-heading,
  .description-text {
    grid-column: 1 / span 12;
  }

  .description-text {
    text-align: left;
    font-size: 32px;
    line-height: 1;
  }

  .landing-scroll-spacer {
    height: 200vh; /* More mobile scroll distance for smoother scrub/camera progression */
  }

  .how-we-work-section {
    --hww-step-text-size: 32px;
    --hww-step-title-size: 17px;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .how-we-work-grid {
    align-items: start;
    align-content: start;
    row-gap: 8px;
  }

  .how-we-work-content {
    grid-column: 1 / span 12;
    order: 2;
    min-height: auto;
    height: auto;
    align-self: start;
    align-items: flex-start;
  }

  .how-we-work-empty {
    display: flex;
    grid-column: 1 / span 12;
    order: 1;
    align-self: start;
  }

  .how-we-work-canvas-frame {
    height: clamp(240px, 42vh, 360px);
    min-height: clamp(240px, 42vh, 360px);
  }

  .how-we-work-section--animated .how-we-work-step-stack {
    height: var(--hww-stack-height, clamp(180px, 28vh, 260px));
  }

  .download-screenshot-btn {
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    font-size: 14px;
  }

  .service-card-motion {
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .portfolio-cards-section {
    --sw-title-gap: 10px;
    --sw-track-gap: 16px;
    --sw-card-radius: 20px;
    --sw-card-pad-top: 10px;
    --sw-card-pad-x: 10px;
    --sw-card-pad-bottom: 18px;
    --sw-bottom-gap: 8px;
    --sw-pill-font-size: 12px;
    --sw-pill-pad-y: 5px;
    --sw-pill-pad-x: 8px;
    --sw-description-size: clamp(15px, 4.2vw, 17px);
  }

  .main-heading-container {
    top: calc(max(24px, env(safe-area-inset-top)) + 58px + 36px);
  }

  .tagline-text--below-heading {
    grid-column: 2 / span 10;
  }

  .landing-scroll-spacer {
    height: 250vh; /* More scroll distance on small mobile for smoother scrub */
  }

  .how-we-work-section {
    --hww-step-text-size: 32px;
    --hww-step-title-size: 16px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .download-screenshot-btn {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ================================
   Pricing Section
   ================================ */

.pricing-section {
  --pricing-section-pt: 128px;
  --pricing-section-pb: 128px;
  --pricing-title-gap: 16px;
  --pricing-cards-gap: var(--grid-gutter, 24px);
  --pricing-card-radius: 28px;
  --pricing-card-min-h: 400px;
  --pricing-card-pad-y: 48px;
  --pricing-card-pad-x: 24px;
  --pricing-category-size: 20px;
  --pricing-category-mb: 24px;
  --pricing-price-gap: 16px;
  --pricing-price-mb: 24px;
  --pricing-price-size: 48px;
  --pricing-currency-size: 14px;
  --pricing-currency-pt: 4px;
  --pricing-tagline-size: 20px;
  --pricing-tagline-lh: 140%;
  --pricing-tagline-mb: 32px;
  --pricing-subtitle-size: 24px;
  --pricing-subtitle-mb: 16px;
  --pricing-list-mb: 48px;
  --pricing-list-size: 16px;
  --pricing-list-lh: 110%;
  --pricing-list-icon-size: 32px;
  --pricing-bestfor-size: 16px;
  --pricing-bestfor-icon-size: 24px;
  --pricing-list-indent: 32px;
  --pricing-list-bullet-left: 12px;
  --pricing-list-item-gap: 8px;
  --pricing-testimonial-mt: 128px;
  --pricing-testimonial-col-gap: var(--grid-gutter, 24px);
  --pricing-testimonial-avatar: 90px;
  --pricing-testimonial-name-size: 28px;
  --pricing-testimonial-role-size: 20px;
  --pricing-testimonial-quote-mt: 32px;
  --pricing-testimonial-quote-size: 36px;
  --pricing-testimonial-pill-mt: 32px;
  --pricing-testimonial-pill-w: 252px;
  --pricing-testimonial-pill-h: 56px;
  --pricing-dots-size: 16px;
  --pricing-dots-offset: 16px;
  --pricing-dots-gap: 16px;
  background-color: #EAE6E5;
  padding: var(--pricing-section-pt) var(--grid-margin, 24px) var(--pricing-section-pb);
  position: relative;
  z-index: 10;
}

.pricing-section-title {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  color: #0F1513;
  margin: 0 0 var(--pricing-title-gap) 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 1440px) {
  .pricing-section-title {
    font-size: clamp(36px, 1.875vw, 48px);
  }
}

.pricing-cards-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pricing-cards-gap);
  width: 100%;
}

.pricing-card {
  border-radius: var(--pricing-card-radius);
  min-height: var(--pricing-card-min-h);
}

.pricing-card-left {
  grid-column: span 5;
  background-color: #0F1513;
  border: none;
  padding: var(--pricing-card-pad-y) var(--pricing-card-pad-x);
  display: flex;
  flex-direction: column;
}

.pricing-card-right {
  grid-column: span 5;
  background-color: #EAE6E5;
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
  padding: var(--pricing-card-pad-y) var(--pricing-card-pad-x);
  display: flex;
  flex-direction: column;
}

.pricing-card-cta {
  grid-column: span 2;
  --pricing-cta-bg: #EAE6E5;
  background-color: var(--pricing-cta-bg);
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
  padding: var(--pricing-card-pad-y) 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.32s ease, box-shadow 0.32s ease;
  text-decoration: none;
  cursor: pointer;
}

.pricing-card-cta::before,
.pricing-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pricing-card-cta::before {
  z-index: 0;
  inset: 2px;
  border-radius: calc(var(--pricing-card-radius) - 2px);
  background-image:
    linear-gradient(to right, rgba(15, 21, 19, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 21, 19, 0.12) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  background-position: center center, center center;
  background-repeat: repeat, repeat;
  /* Fade grid towards edges without introducing color overlays. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 36%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse at center, #000 36%, rgba(0, 0, 0, 0) 100%);
}

.pricing-card-cta::after {
  content: none;
}

.pricing-card-cta::after {
  content: none;
}

.pricing-card-cta > * {
  position: relative;
  z-index: 2;
}

.pricing-card-cta:hover,
.pricing-card-cta:focus-within {
  --pricing-cta-bg: #CF5541;
}

.pricing-card-cta:hover::after,
.pricing-card-cta:focus-within::after {
  content: none;
}

.pricing-card-cta:hover::before,
.pricing-card-cta:focus-within::before {
  content: "";
}

.pricing-card-cta-title {
  width: 100%;
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.05;
  color: #0F1513;
  transition: color 0.38s ease;
}

.pricing-card-cta-link {
  display: inline-flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: auto;
  gap: 10px;
  text-decoration: none;
  transition: color 0.38s ease;
}

.pricing-card-cta-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
}

.pricing-card-cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pricing-card-cta-icon svg circle,
.pricing-card-cta-icon svg path {
  transition: fill 0.38s ease, stroke 0.38s ease, opacity 0.38s ease;
}

.pricing-card-cta-icon svg circle {
  fill: #0F1513;
}

.pricing-card-cta-icon svg path {
  stroke: #CF5541;
}

.pricing-card-cta:hover .pricing-card-cta-icon svg path,
.pricing-card-cta:focus-within .pricing-card-cta-icon svg path {
  stroke: #F8F7F7;
}

.pricing-card-cta-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: #0F1513;
  text-align: left;
  transition: color 0.38s ease;
}

.pricing-card-category {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-category-size);
  color: rgba(15, 21, 19, 0.8);
  margin: 0 0 var(--pricing-category-mb) 0;
  padding: 0;
}

.pricing-card-price-container {
  display: flex;
  align-items: flex-start;
  gap: var(--pricing-price-gap);
  margin-bottom: var(--pricing-price-mb);
}

.pricing-card-price {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--pricing-price-size);
  line-height: 1;
  color: #0F1513;
  margin: 0;
  padding: 0;
}

.pricing-card-currency {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-currency-size);
  color: #0F1513;
  padding-top: var(--pricing-currency-pt);
}

.pricing-card-tagline {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--pricing-tagline-size);
  line-height: var(--pricing-tagline-lh);
  color: rgba(15, 21, 19, 0.6);
  margin: 0 0 var(--pricing-tagline-mb) 0;
  padding: 0;
}

.pricing-card-subtitle {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-subtitle-size);
  color: #0F1513;
  margin: 0 0 var(--pricing-subtitle-mb) 0;
  padding: 0;
}

.pricing-card-bestfor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pricing-bestfor-size);
}

.pricing-card-bestfor-icon {
  width: var(--pricing-bestfor-icon-size);
  height: var(--pricing-bestfor-icon-size);
  display: block;
}

.pricing-card-left .pricing-card-bestfor-icon {
  filter: brightness(0) invert(1);
}

.pricing-card-right .pricing-card-bestfor-icon {
  filter: brightness(0) saturate(100%);
}

.pricing-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--pricing-list-mb) 0;
}

.pricing-card-list li {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: var(--pricing-list-size);
  line-height: var(--pricing-list-lh);
  color: #0F1513;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--pricing-list-item-gap);
}

.pricing-card-list li:before {
  content: "";
  width: var(--pricing-list-icon-size);
  height: var(--pricing-list-icon-size);
  flex: 0 0 var(--pricing-list-icon-size);
  align-self: flex-start;
  margin-top: -2px;
  background-color: #0F1513;
  -webkit-mask-image: url("../icons/Arrow_Up_Right_MD.svg");
  mask-image: url("../icons/Arrow_Up_Right_MD.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pricing-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #0F1513;
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
  border-radius: 100px;
  padding: 3.5px 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.24s ease, box-shadow 0.24s ease;
}

.pricing-card-left .pricing-card-btn,
.pricing-card-right .pricing-card-btn {
  margin-top: auto;
  align-self: flex-start;
}

.pricing-card-btn:hover {
  transform: none;
  background-color: #161d1a;
  box-shadow: inset 0 0 0 2px #0E1412;
}

.pricing-card-btn:hover .pricing-card-btn-text {
  animation: rgb-split-pricing 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pricing-card-btn:hover .pricing-card-btn-text::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
  background: #0F1513 !important;
}

.pricing-card-btn:hover .pricing-card-btn-text::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
  background: #0F1513 !important;
}

.pricing-card-btn-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.pricing-card-btn-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #F8F7F7;
  padding-right: 20px;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 0;
  display: inline-block;
}

.pricing-card-btn-text::before,
.pricing-card-btn-text::after {
  background: #0F1513 !important;
}

.pricing-card-btn-text::before {
  color: #ABCB41;
  text-shadow: -2px 0 #ABCB41;
}

.pricing-card-btn-text::after {
  color: #ABCB41;
  text-shadow: 2px 0 #ABCB41;
}

/* Dark card variations - placed after base styles for proper specificity */
.pricing-card-category-dark {
  color: rgba(234, 230, 229, 0.8) !important;
}

.pricing-card-price-dark {
  color: rgba(248, 247, 247, 0.92) !important;
  font-weight: 400 !important;
}

.pricing-card-currency-dark {
  color: rgba(248, 247, 247, 0.92) !important;
}

.pricing-card-tagline-dark {
  color: rgba(248, 247, 247, 0.6) !important;
}

.pricing-card-subtitle-dark {
  color: rgba(234, 230, 229, 0.9) !important;
}

.pricing-card-list-dark li {
  color: rgba(248, 247, 247, 0.8) !important;
}

.pricing-card-list-dark li:before {
  background-color: #CF5541 !important;
}

.pricing-card-right .pricing-card-list li:before {
  background-color: #0F1513;
}

.pricing-card-btn-light {
  background-color: #F8F7F7 !important;
  border: 0;
  box-shadow: inset 0 0 0 2px #0E1412;
}

.pricing-card-right .pricing-card-btn-light {
  background-color: #EAE6E5 !important;
}

.pricing-card-btn-light:hover {
  background-color: #F1EEEE !important;
  box-shadow: inset 0 0 0 2px #0E1412;
}

.pricing-card-btn-light:hover .pricing-card-btn-text-light {
  animation: rgb-split-pricing-dark 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pricing-card-btn-light:hover .pricing-card-btn-text-light::before {
  animation: channel-split-dark 0.5s steps(4, end), slice-dark 0.5s steps(8, end);
  opacity: 0.8;
  background: #F8F7F7 !important;
}

.pricing-card-btn-light:hover .pricing-card-btn-text-light::after {
  animation: channel-split-green 0.5s steps(4, end), slice-green 0.5s steps(8, end);
  opacity: 0.9;
  background: #F8F7F7 !important;
}

.pricing-card-right .pricing-card-btn-light:hover .pricing-card-btn-text-light::before {
  background: #EAE6E5 !important;
}

.pricing-card-right .pricing-card-btn-light:hover .pricing-card-btn-text-light::after {
  background: #EAE6E5 !important;
}

.pricing-card-btn-text-light {
  color: #0F1513 !important;
}

.pricing-card-btn-text-light::before,
.pricing-card-btn-text-light::after {
  background: #CF5541 !important;
}

.pricing-card-btn-text-light::before {
  color: #0F1513;
  text-shadow: -2px 0 #0F1513;
}

.pricing-card-btn-text-light::after {
  color: #ABCB41;
  text-shadow: 2px 0 #ABCB41;
}

/* ================================
   Pricing Testimonial
   ================================ */

.pricing-testimonial-grid {
  margin-top: var(--pricing-testimonial-mt);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--pricing-testimonial-col-gap);
  width: 100%;
}

.pricing-testimonial {
  grid-column: 2 / span 10;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-testimonial-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.pricing-testimonial-slide {
  width: 100%;
}

.pricing-testimonial-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.pricing-testimonial-avatar {
  width: var(--pricing-testimonial-avatar);
  height: var(--pricing-testimonial-avatar);
  border-radius: 9999px;
  background: #ABCB41;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.pricing-testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-testimonial-name {
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-testimonial-name-size);
  line-height: 110%;
  color: #0F1513;
  position: relative;
  z-index: 0;
}

.pricing-testimonial-role {
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-testimonial-role-size);
  line-height: 110%;
  color: rgba(15, 21, 19, 0.6);
  position: relative;
  z-index: 0;
}

.pricing-testimonial-quote {
  margin: var(--pricing-testimonial-quote-mt) 0 0 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: var(--pricing-testimonial-quote-size);
  line-height: 110%;
  color: rgba(15, 21, 19, 0.6);
  position: relative;
  z-index: 0;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pricing-testimonial-quote {
    --quote-base: rgba(15, 21, 19, 0.6);
    --quote-dark: rgba(15, 21, 19, 0.78);
    color: transparent;
    background-image:
      linear-gradient(
        120deg,
        var(--quote-base) 0%,
        var(--quote-dark) 35%,
        var(--quote-base) 60%,
        var(--quote-dark) 85%,
        var(--quote-base) 100%
      ),
      repeating-linear-gradient(
        0deg,
        rgba(15, 21, 19, 0.05) 0px,
        rgba(15, 21, 19, 0.05) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 5px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(15, 21, 19, 0.035) 0px,
        rgba(15, 21, 19, 0.035) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 7px
      );
    background-size: 240% 240%, 220px 220px, 260px 260px;
    background-position: 0% 50%, 0px 0px, 0px 0px;
    background-blend-mode: normal, overlay, overlay;
    -webkit-background-clip: text;
    background-clip: text;
    animation: pricing-testimonial-gradient-noise 12s ease-in-out infinite;
  }
}

@keyframes pricing-testimonial-gradient-noise {
  0% {
    background-position: 0% 50%, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 100% 50%, 80px -60px, -70px 50px;
  }
  100% {
    background-position: 0% 50%, 0px 0px, 0px 0px;
  }
}

.pricing-testimonial-pill {
  margin-top: var(--pricing-testimonial-pill-mt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pricing-testimonial-pill-w);
  max-width: 100%;
  height: var(--pricing-testimonial-pill-h);
  padding: 0;
  border-radius: 9999px;
  background: #D3CFCE;
  overflow: hidden;
}

.pricing-testimonial-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1) saturate(0) contrast(1.08);
}

.pricing-testimonial-dots {
  position: absolute;
  left: calc(100% + var(--pricing-dots-offset));
  top: 50%;
  transform: translateY(-50%);
  width: var(--pricing-dots-size);
  display: flex;
  flex-direction: column;
  gap: var(--pricing-dots-gap);
  align-items: flex-start;
  z-index: 10;
  pointer-events: auto;
}

.pricing-testimonial-dot-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pricing-dots-size);

  /* The moving dot is drawn as a background image and animated via CSS var. */
  --dot-travel-y: 0px;
  background-image: radial-gradient(
    circle calc(var(--pricing-dots-size) / 2) at 50% 50%,
    #DF6854 99%,
    rgba(223, 104, 84, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: var(--pricing-dots-size) var(--pricing-dots-size);
  background-position: 0 var(--dot-travel-y);
  pointer-events: none;
  z-index: 2;
}

.pricing-testimonial-dot {
  width: var(--pricing-dots-size);
  height: var(--pricing-dots-size);
  border-radius: 9999px;
  background: #E5B4AB;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.pricing-testimonial-dot:focus {
  outline: none;
}

.pricing-testimonial-dot-active {
  background: #E5B4AB;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .pricing-section {
    --pricing-cards-gap: 20px;
    --pricing-card-pad-y: 40px;
    --pricing-card-pad-x: 20px;
    --pricing-price-size: 44px;
    --pricing-testimonial-col-gap: 20px;
    --pricing-dots-offset: 12px;
  }

  .pricing-card-left,
  .pricing-card-right,
  .pricing-card-cta {
    grid-column: auto;
  }

  .pricing-card-left {
    grid-column: span 5;
  }

  .pricing-card-right {
    grid-column: span 5;
  }

  .pricing-card-cta {
    grid-column: span 2;
  }

  .pricing-testimonial {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .pricing-section {
    --pricing-section-pt: 56px;
    --pricing-section-pb: 96px;
    --pricing-title-gap: 14px;
    --pricing-cards-gap: 20px;
    --pricing-card-min-h: 0;
    --pricing-card-radius: 24px;
    --pricing-card-pad-y: 32px;
    --pricing-card-pad-x: 20px;
    --pricing-category-size: clamp(17px, 2.1vw, 19px);
    --pricing-price-size: clamp(34px, 5.2vw, 42px);
    --pricing-currency-size: 14px;
    --pricing-tagline-size: clamp(16px, 2.2vw, 18px);
    --pricing-tagline-lh: 132%;
    --pricing-tagline-mb: 28px;
    --pricing-subtitle-size: clamp(20px, 2.8vw, 22px);
    --pricing-list-size: clamp(14px, 1.8vw, 15px);
    --pricing-list-icon-size: 28px;
    --pricing-bestfor-size: clamp(14px, 1.8vw, 16px);
    --pricing-bestfor-icon-size: 22px;
    --pricing-list-lh: 124%;
    --pricing-list-indent: 28px;
    --pricing-list-bullet-left: 10px;
    --pricing-testimonial-mt: 88px;
    --pricing-testimonial-avatar: 80px;
    --pricing-testimonial-name-size: 24px;
    --pricing-testimonial-role-size: 18px;
    --pricing-testimonial-quote-size: clamp(28px, 4.2vw, 34px);
    --pricing-testimonial-pill-w: 220px;
    --pricing-testimonial-pill-h: 52px;
  }

  .pricing-card-left,
  .pricing-card-right,
  .pricing-card-cta {
    grid-column: 1 / -1;
  }

  .pricing-testimonial {
    grid-column: 1 / -1;
    padding-right: calc(var(--pricing-dots-size) + var(--pricing-dots-gap) + 12px);
  }

  .pricing-testimonial-dots {
    display: flex;
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .pricing-card-cta-icon {
    width: 48px;
    height: 48px;
  }

  .pricing-card-cta-text {
    font-size: 16px;
  }

  .pricing-card-cta-title {
    font-size: clamp(24px, 3.8vw, 32px);
  }

  .pricing-card-cta-link {
    margin-top: 32px;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    --pricing-section-pt: 48px;
    --pricing-section-pb: 72px;
    --pricing-title-gap: 12px;
    --pricing-cards-gap: 16px;
    --pricing-card-radius: 22px;
    --pricing-card-pad-y: 28px;
    --pricing-card-pad-x: 16px;
    --pricing-category-size: clamp(16px, 4.2vw, 18px);
    --pricing-category-mb: 18px;
    --pricing-price-gap: 12px;
    --pricing-price-mb: 18px;
    --pricing-price-size: clamp(30px, 9vw, 38px);
    --pricing-tagline-size: clamp(15px, 4.2vw, 17px);
    --pricing-tagline-mb: 24px;
    --pricing-subtitle-size: clamp(18px, 5vw, 20px);
    --pricing-subtitle-mb: 14px;
    --pricing-list-mb: 20px;
    --pricing-list-size: clamp(13px, 3.8vw, 14px);
    --pricing-list-icon-size: 24px;
    --pricing-bestfor-size: clamp(14px, 3.8vw, 15px);
    --pricing-bestfor-icon-size: 20px;
    --pricing-list-lh: 130%;
    --pricing-list-indent: 26px;
    --pricing-list-item-gap: 10px;
    --pricing-testimonial-mt: 64px;
    --pricing-testimonial-avatar: 72px;
    --pricing-testimonial-name-size: 22px;
    --pricing-testimonial-role-size: 16px;
    --pricing-testimonial-quote-mt: 24px;
    --pricing-testimonial-quote-size: clamp(24px, 7vw, 30px);
    --pricing-testimonial-pill-mt: 24px;
    --pricing-testimonial-pill-w: 200px;
    --pricing-testimonial-pill-h: 48px;
    --pricing-dots-size: 13px;
    --pricing-dots-gap: 12px;
    --pricing-dots-offset: 8px;
  }

  .pricing-card-price-container {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .pricing-testimonial-header {
    gap: 24px;
  }

  .pricing-card-cta-title {
    font-size: clamp(22px, 7vw, 30px);
  }

  .pricing-card-cta-link {
    margin-top: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pricing-card-left,
  .pricing-card-right,
  .pricing-card-cta {
    grid-column: span 6;
  }

  .pricing-card-left .pricing-card-tagline,
  .pricing-card-right .pricing-card-tagline {
    min-height: calc(var(--pricing-tagline-size) * 3.96);
  }

  .pricing-card-cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pricing-section {
    --pricing-section-pt: 40px;
    --pricing-section-pb: 56px;
    --pricing-title-gap: 10px;
    --pricing-card-radius: 20px;
    --pricing-card-pad-y: 24px;
    --pricing-card-pad-x: 14px;
    --pricing-price-size: clamp(28px, 11vw, 34px);
    --pricing-tagline-size: 16px;
    --pricing-subtitle-size: 18px;
    --pricing-list-size: 14px;
    --pricing-testimonial-mt: 56px;
    --pricing-testimonial-avatar: 64px;
    --pricing-testimonial-name-size: 20px;
    --pricing-testimonial-role-size: 15px;
    --pricing-testimonial-quote-size: clamp(21px, 8vw, 26px);
    --pricing-testimonial-pill-w: 180px;
    --pricing-testimonial-pill-h: 44px;
    --pricing-dots-size: 12px;
    --pricing-dots-gap: 10px;
    --pricing-dots-offset: 6px;
  }

  .pricing-testimonial-header {
    gap: 20px;
  }
}

/* ================================
   Footer CTA
   ================================ */

.footer-cta-section {
  margin-top: 0;
  background: #0F1513;
  padding: 128px var(--grid-margin, 24px) 0;
  position: relative;
  z-index: 20;
  isolation: isolate;
  backface-visibility: hidden;
}

.footer-cta-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer-cta-title {
  font-family: ohno-blazeface, sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 64px;
  line-height: 100%;
  color: #F8F7F7;
  margin: 0;
}

.footer-cta-subtitle {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 130%;
  color: rgba(248, 247, 247, 0.92);
  margin: 16px 0 32px 0;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #CE5541;
  border-radius: 9999px;
  padding: 3.5px 4px;
  text-decoration: none;
}

.footer-cta-btn-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.footer-cta-btn-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #F8F7F7;
  padding-right: 20px;
  white-space: nowrap;
}

.site-footer {
  background: #0F1513;
  padding: 128px var(--grid-margin, 24px) 32px;
  position: relative;
  z-index: 10;
  min-height: 400px;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 50px;
  align-self: start;
}

.site-footer-logo-container {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100px;
  margin-top: -12px;
}

.site-footer-logo {
  width: 110px;
  height: auto;
  display: block;
}

.site-footer-logo-lottie {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.site-footer-logo-text {
  height: 49.775px;
  width: auto;
  flex-shrink: 0;
  display: block;
  margin-bottom: 12.4px;
  margin-top: 0;
  padding: 0;
}

.site-footer-brand-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 18.6px;
  line-height: 130%;
  color: #EAE6E5;
  margin: -16px 0 0 24px;
}

.site-footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer-link {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #F8F7F7;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  position: relative;
  display: inline-block;
}

.site-footer-link::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -12px;
  right: -12px;
  bottom: -8px;
  cursor: pointer;
}

.site-footer-link:hover {
  opacity: 1;
}

.site-footer-social {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-footer-social-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #F8F7F7;
  opacity: 0.8;
  margin: 0 0 16px 0;
}

.site-footer-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-footer-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  position: relative;
}

.site-footer-icon::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  cursor: pointer;
}

.site-footer-icon:hover {
  opacity: 1;
}

.site-footer-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(267%) hue-rotate(314deg) brightness(99%) contrast(96%);
}

.site-footer-bottom {
  margin-top: 64px;
  text-align: center;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #F8F7F7;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer-footnote {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.site-footer-copyright {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .footer-cta-section {
    margin-bottom: -1px;
    padding-bottom: 1px;
    border-bottom: 0;
  }

  .site-footer {
    margin-top: -1px;
    border-top: 0;
  }

  .footer-cta-section {
    padding: 96px var(--grid-margin, 24px) 0;
  }

  .footer-cta-title {
    font-size: clamp(48px, 8vw, 60px);
  }

  .footer-cta-subtitle {
    max-width: 44ch;
  }

  .site-footer {
    padding: 96px var(--grid-margin, 24px) 28px;
  }

  .site-footer-inner {
    max-width: none;
  }

  .site-footer-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    align-items: start;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }

  .site-footer-logo-container {
    justify-content: center;
  }

  .site-footer-brand-text {
    margin: -16px 0 0 0;
  }

  .site-footer-social {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .site-footer-bottom {
    margin-top: 56px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    transform: translateY(-24px);
  }

  .site-footer-links {
    min-width: 0;
    width: max-content;
    justify-self: center;
  }

  .site-footer-top > .site-footer-links:first-of-type {
    grid-column: 1;
  }

  .site-footer-top > .site-footer-links:nth-of-type(2) {
    grid-column: 2;
  }

  .site-footer-social {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
    width: max-content;
    justify-self: center;
    align-items: flex-start;
  }

  .site-footer-social-group:first-child {
    grid-column: auto;
  }

  .site-footer-social-group:last-child {
    grid-column: auto;
  }

  .site-footer-social-group {
    min-width: 0;
    align-self: start;
  }

  .site-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  .footer-cta-section {
    padding: 72px var(--grid-margin, 24px) 0;
  }

  .footer-cta-inner {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .footer-cta-title {
    font-size: clamp(42px, 13vw, 52px);
    line-height: 96%;
  }

  .footer-cta-subtitle {
    font-size: 15px;
    margin: 12px 0 24px 0;
    max-width: 30ch;
  }

  .footer-cta-section .pricing-card-btn {
    align-self: center;
  }

  .site-footer {
    padding: 72px var(--grid-margin, 24px) 24px;
    min-height: auto;
  }

  .site-footer-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 16px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .site-footer-logo-container {
    justify-content: center;
    height: 84px;
    margin-top: -8px;
  }

  .site-footer-logo-lottie {
    width: 84px;
    height: 84px;
  }

  .site-footer-logo-text {
    height: 42px;
    margin-bottom: 10px;
  }

  .site-footer-brand-text {
    margin: -12px 0 0 0;
    font-size: 16px;
  }

  .site-footer-links {
    gap: 12px;
    min-width: 0;
  }

  .site-footer-link {
    font-size: 16px;
  }

  .site-footer-social {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 8px;
  }

  .site-footer-social-group {
    min-width: 0;
  }

  .site-footer-social-title {
    margin: 0 0 12px 0;
    font-size: 14px;
  }

  .site-footer-icons {
    gap: 14px;
  }

  .site-footer-icon {
    width: 26px;
    height: 26px;
  }

  .site-footer-bottom {
    margin-top: 40px;
    text-align: center;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }

  .site-footer-footnote {
    font-size: 13px;
  }

  .site-footer-copyright {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .footer-cta-section {
    padding: 64px var(--grid-margin, 24px) 0;
  }

  .footer-cta-title {
    font-size: clamp(36px, 12vw, 44px);
  }

  .footer-cta-subtitle {
    font-size: 14px;
    max-width: 28ch;
  }

  .site-footer {
    padding: 64px var(--grid-margin, 24px) 20px;
  }

  .site-footer-top {
    gap: 34px 12px;
  }

  .site-footer-logo-container {
    justify-content: center;
    height: 76px;
    margin-top: -6px;
  }

  .site-footer-logo-lottie {
    width: 76px;
    height: 76px;
  }

  .site-footer-logo-text {
    height: 38px;
    margin-bottom: 8px;
  }

  .site-footer-brand-text {
    margin: -10px 0 0 0;
    font-size: 14px;
  }

  .site-footer-link {
    font-size: 16px;
  }

  .site-footer-icons {
    gap: 12px;
  }

  .site-footer-social {
    gap: 16px 12px;
    margin-top: 6px;
  }

  .site-footer-icon {
    width: 24px;
    height: 24px;
  }
}