/* ==========================================
   Auroze Landing Page Core Styles
   ========================================== */

/* Resets & Base Configuration */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-color: #040508;
  --text-offwhite: #d9d9d9;
  --text-white: #ffffff;
  --accent-orange: #ff5f00;
  --accent-orange-rgb: 255, 95, 0;

  --font-display: 'Outfit', sans-serif;
  --font-ui: 'Inter', sans-serif;

  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.3s ease;
}

body {
  background-color: var(--bg-color);
  color: var(--text-offwhite);
  font-family: var(--font-ui);
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Background canvas for decorative thin diagonal lines and star dots */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* WebGL Container for 3D Monolith */
#webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: grab;
}

#webgl-container:active {
  cursor: grabbing;
}

/* ==========================================
   TOP BAR HEADER
   ========================================== */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  background: transparent;
  z-index: 10;
  pointer-events: auto;
}

.top-bar-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.top-bar-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-bar-nav {
  gap: clamp(20px, 3vw, 36px);
}

.top-nav-link {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(217, 217, 217, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.top-nav-link:hover {
  color: var(--text-white);
}

.top-nav-link.is-active {
  color: var(--accent-orange);
}

.top-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: rgba(255, 95, 0, 0.6);
}

.top-bar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

/* Mobile: single-row header (logo left, controls right) */
@media (max-width: 680px) {
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 56px;
    padding: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) 20px 14px;
    grid-template-columns: unset;
    grid-template-rows: unset;
    gap: 0;
  }

  .top-bar-center {
    display: none;
  }

  .top-bar-left {
    grid-column: unset;
    grid-row: unset;
    justify-content: flex-start;
    width: auto;
  }

  .top-bar-right {
    grid-column: unset;
    grid-row: unset;
    justify-content: flex-end;
    width: auto;
    gap: 10px;
  }
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.5px;
  user-select: none;
  cursor: pointer;
  z-index: 15;
}

.logo-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  z-index: 2;
}

.logo-mark {
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtle continuous metallic shine sweep animation */
.shine-bar {
  animation: shine-sweep 4s infinite ease-in-out;
  transform-origin: center;
}

@keyframes shine-sweep {
  0% {
    transform: translateX(-400px) rotate(25deg);
  }

  100% {
    transform: translateX(1200px) rotate(25deg);
  }
}

.logo-hover-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 0, 0.14) 0%, rgba(255, 95, 0, 0.03) 45%, rgba(255, 95, 0, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.5px;
  color: var(--text-white);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s ease, margin-right 0.5s ease;
  user-select: none;
  z-index: 2;
}

/* Logo Hover Animation */
.logo:hover .logo-wrap {
  transform: scale(1.1) rotate(5deg);
}

.logo:hover .wordmark {
  color: var(--text-white);
}

#logo-sparks-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 2;
}

/* Accessibility & Light/Dark styling support */
@media (prefers-reduced-motion: reduce) {

  .logo-wrap,
  .wordmark {
    transition: none !important;
    transform: none !important;
  }

  .logo:hover .logo-wrap {
    transform: none !important;
  }

  .logo:hover .wordmark {
    color: var(--text-white) !important;
  }
}

body.light-theme .logo-mark {
  filter: invert(1);
}

body.light-theme .wordmark {
  color: var(--bg-color);
}

.registered {
  font-size: 10px;
  vertical-align: super;
  font-weight: 400;
  margin-left: 2px;
  color: var(--accent-orange);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Circular Sound Toggle */
.sound-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 17, 24, 0.5);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
}

.sound-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.sound-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.sound-toggle:active .sound-icon {
  transform: scale(0.9);
}

.hidden {
  display: none !important;
}

/* Pill buttons */
.cta-talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 22px;
  background: var(--text-white);
  color: var(--bg-color);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
}

.cta-talk:hover {
  background: var(--text-offwhite);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: rgba(15, 17, 24, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-white);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger .bar {
  width: 14px;
  height: 2px;
  background: var(--text-white);
  transition: var(--transition-smooth);
}

/* ==========================================
   HERO CONTENT (HEADLINE & CTA)
   ========================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.hero-content {
  position: absolute;
  top: 18vh;
  left: 40px;
  max-width: 680px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 300;
  color: var(--text-offwhite);
  line-height: 1.05;
  margin: 0 0 40px 0;
  letter-spacing: -3px;
  user-select: none;
}

.word-morph {
  display: inline-block;
  color: var(--text-white);
  font-weight: 500;
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0);
  transition: filter 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: filter, opacity, transform;
}

/* States during swapping */
.word-morph.blur-out {
  filter: blur(20px);
  opacity: 0;
  transform: translateY(-24px) scale(0.95);
}

.word-morph.blur-in {
  filter: blur(20px);
  opacity: 0;
  transform: translateY(24px) scale(1.05);
  transition: none;
  /* Instant reset at starting position */
}

/* Underlined Project CTA Link */
.cta-project {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  position: relative;
  padding-bottom: 12px;
  width: 200px;
  justify-content: space-between;
  transition: var(--transition-fast);
}

.cta-arrow {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.cta-project:hover .cta-arrow {
  transform: translateX(6px);
}

.underline-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-white);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-project:hover .underline-line {
  transform: scaleX(1.1);
  background: var(--accent-orange);
}

/* Hero Description & Partners */
.hero-description {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: rgba(217, 217, 217, 0.65);
  line-height: 1.65;
  margin: 0 0 28px 0;
  max-width: 520px;
  letter-spacing: 0.01em;
}

.hero-partners {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-partners-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
}

.hero-partners-list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-partner-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-flag {
  font-size: 14px;
  line-height: 1;
}

.partner-name {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================
   COOKIE BANNER (BOTTOM-CENTER)
   ========================================== */
.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 28px;
  background: rgba(10, 11, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  backdrop-filter: blur(16px);
  z-index: 8;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.cookie-banner.dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(30px);
  pointer-events: none;
}

.cookie-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-offwhite);
  white-space: nowrap;
}

.cookie-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cookie-btn {
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
  cursor: pointer;
  padding: 4px 8px;
  transition: var(--transition-fast);
}

.cookie-btn:hover {
  opacity: 0.7;
}

.btn-accept {
  color: var(--accent-orange);
  position: relative;
}

/* ==========================================
   INTERACTION HINTS (BOTTOM-CENTER)
   ========================================== */
.interaction-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.8;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

.hint-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.emoji {
  display: inline-block;
}

.animate-blast {
  animation: pulse-blast 2s infinite ease-in-out;
}

.animate-lightning {
  animation: pulse-lightning 1.5s infinite steps(2);
}

@keyframes pulse-blast {

  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.15);
    filter: brightness(1.3);
  }
}

@keyframes pulse-lightning {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ==========================================
   CREDIBILITY BLOCK (BOTTOM-RIGHT)
   ========================================== */
.credibility-block {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 320px;
  z-index: 5;
  pointer-events: auto;
}

.credibility-card {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(10, 11, 15, 0.6);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.credibility-card:hover {
  border-color: rgba(255, 95, 0, 0.3);
  box-shadow: 0 4px 20px rgba(255, 95, 0, 0.05);
}

.card-left {
  flex: 0 0 100px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.globe-icon {
  color: var(--text-white);
  opacity: 0.7;
  animation: spin-slow 24s linear infinite;
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.est-text {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
}

.card-right {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
  line-height: 1.5;
}

.credibility-desc {
  font-size: 13px;
  font-weight: 400;
  color: rgba(217, 217, 217, 0.65);
  line-height: 1.6;
  margin: 0;
  max-width: 100%;
}

/* ==========================================
   SCROLL INDICATOR (BOTTOM-LEFT)
   ========================================== */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 40px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  z-index: 5;
  transition: var(--transition-smooth);
  pointer-events: auto;
}

.scroll-indicator:hover {
  color: var(--text-white);
  border-color: var(--text-white);
  transform: translateY(4px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.scroll-arrow {
  width: 14px;
  height: 14px;
  animation: float-down 2s infinite ease-in-out;
}

@keyframes float-down {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

/* ==========================================
   FULLSCREEN NAVIGATION OVERLAY
   ========================================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.menu-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

.overlay-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-color);
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.menu-overlay.active .overlay-background {
  transform: scaleY(1);
}

.overlay-header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-white);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.menu-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-white);
}

.close-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
}

.close-icon .cross {
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--text-white);
  transition: var(--transition-smooth);
}

.close-icon .cross-1 {
  transform: rotate(45deg);
}

.close-icon .cross-2 {
  transform: rotate(-45deg);
}

/* Nav elements */
.overlay-nav {
  margin: auto 0;
  display: flex;
  flex-direction: column;
}

.overlay-nav ul {
  list-style: none;
}

.overlay-nav li {
  margin: 16px 0;
  overflow: hidden;
}

.nav-item {
  display: inline-flex;
  align-items: baseline;
  gap: 28px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.25);
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  transition: var(--transition-smooth);
  transform: translateY(100px);
  opacity: 0;
}

.menu-overlay.active .nav-item {
  transform: translateY(0);
  opacity: 1;
}

.menu-overlay.active li:nth-child(1) .nav-item {
  transition-delay: 0.1s;
}

.menu-overlay.active li:nth-child(2) .nav-item {
  transition-delay: 0.18s;
}

.menu-overlay.active li:nth-child(3) .nav-item {
  transition-delay: 0.26s;
}

.menu-overlay.active li:nth-child(4) .nav-item {
  transition-delay: 0.34s;
}

.menu-overlay.active li:nth-child(5) .nav-item {
  transition-delay: 0.42s;
}

.nav-number {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--accent-orange);
  letter-spacing: 2px;
}

.nav-label {
  letter-spacing: -3px;
}

.nav-item:hover {
  color: var(--text-white);
  transform: translateX(20px);
}

.overlay-footer {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.social-links {
  display: flex;
  gap: 24px;
}

.social-item {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  transition: var(--transition-fast);
}

.social-item:hover {
  color: var(--text-white);
}

.office-location {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   RESPONSIVENESS & MEDIA QUERIES
   ========================================== */
@media (max-width: 1200px) {
  .hero-headline {
    font-size: 70px;
    margin-bottom: 32px;
  }

  .hero-content {
    top: 20vh;
  }
}

/* Laptop 1920×1080 — slightly smaller hero text */
@media (min-width: 1201px) and (max-height: 1199px) {
  .hero-content {
    top: 17vh;
    max-width: 600px;
  }

  .hero-headline {
    font-size: 82px;
    margin-bottom: 32px;
    letter-spacing: -2.5px;
  }

  .hero-description {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 480px;
  }

  .hero-partners {
    margin-top: 24px;
    gap: 10px;
  }

  .hero-partners-label {
    font-size: 8px;
  }

  .partner-name {
    font-size: 10px;
  }

  .cta-project {
    font-size: 10px;
    letter-spacing: 2.5px;
    width: 180px;
  }
}

@media (max-width: 900px) {

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 56px;
    padding: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) 20px 14px;
    grid-template-columns: unset;
    grid-template-rows: unset;
    gap: 0;
  }

  .top-bar-left,
  .top-bar-right {
    display: flex;
    align-items: center;
    grid-column: unset;
    grid-row: unset;
    width: auto;
  }

  .top-bar-left {
    justify-content: flex-start;
  }

  .top-bar-right {
    justify-content: flex-end;
    gap: 10px;
  }

  .logo {
    align-items: center;
    gap: 10px;
    line-height: 1;
  }

  .logo-wrap {
    flex-shrink: 0;
  }

  .wordmark {
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1;
  }

  .registered {
    vertical-align: top;
    font-size: 8px;
    position: relative;
    top: -1px;
  }

  .sound-toggle,
  .menu-toggle {
    flex-shrink: 0;
  }

  .menu-overlay {
    padding: 0 20px;
  }

  .hero-content {
    left: 20px;
    right: 20px;
    max-width: 100%;
  }

  .hero-headline {
    font-size: 52px;
    margin-bottom: 24px;
  }

  .hero-description {
    font-size: 12px;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .hero-partners {
    margin-top: 24px;
  }

  .hero-partners-list {
    gap: 20px;
  }

  .credibility-block {
    right: 20px;
    left: auto;
    width: auto;
    max-width: calc(100vw - 40px);
  }

  .credibility-desc {
    font-size: 12px;
  }

  .scroll-indicator {
    left: 20px;
    right: auto;
  }

  .cookie-banner {
    width: calc(100% - 40px);
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    padding: 16px 20px;
  }

  .cookie-text {
    white-space: normal;
    text-align: center;
  }

  .nav-item {
    font-size: 50px;
    gap: 16px;
  }

  .overlay-footer {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    height: auto;
    padding: 20px 0;
  }
}

@media (max-width: 600px) {
  .hero-headline {
    font-size: 38px;
    letter-spacing: -1.5px;
  }

  .hero-partners-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cta-talk {
    display: none;
    /* Hide talk button to prevent header clutter */
  }

  .credibility-block {
    display: none;
    /* Hide credibility panel on very small screens to clear space */
  }
}

/* ==========================================
   HERO — MOBILE ONLY (SECTION 1)
   max-width: 768px — desktop layout unchanged
   ========================================== */
@media (max-width: 768px) {
  .hero-section {
    height: 100svh;
    min-height: 100svh;
  }

  .hero-content {
    top: calc(88px + env(safe-area-inset-top, 0px) + 16px);
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    z-index: 9;
  }

  .hero-headline {
    font-size: clamp(34px, 8.8vw, 48px);
    letter-spacing: -1.4px;
    line-height: 1.08;
    margin-bottom: 18px;
  }

  .hero-description {
    font-size: 11px;
    line-height: 1.55;
    margin-bottom: 20px;
    max-width: 100%;
    color: rgba(217, 217, 217, 0.7);
  }

  .cta-project {
    font-size: 10px;
    letter-spacing: 2px;
    width: auto;
    min-width: 168px;
    padding-bottom: 10px;
  }

  .hero-partners {
    margin-top: 18px;
    gap: 8px;
  }

  .hero-partners-label {
    font-size: 8px;
    letter-spacing: 1.8px;
  }

  .hero-partners-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .partner-flag {
    font-size: 13px;
  }

  .partner-name {
    font-size: 10px;
  }

  .credibility-block {
    display: none;
  }

  .scroll-indicator {
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    left: 20px;
    right: auto;
    transform: none;
    width: 36px;
    height: 36px;
  }

  .scroll-indicator:hover {
    transform: translateY(4px);
  }

  .centerpiece-logo-wrapper {
    top: 73%;
    left: 62%;
    width: min(76vw, 300px);
    height: min(76vw, 300px);
    z-index: 7;
    pointer-events: auto;
    touch-action: none;
  }

  .centerpiece-logo {
    width: min(62vw, 240px);
    height: min(62vw, 240px);
    pointer-events: auto;
    touch-action: none;
  }

  .centerpiece-wordmark {
    font-size: clamp(17px, 4.8vw, 24px);
    letter-spacing: 4px;
    bottom: -32px;
  }

  .centerpiece-wordmark .registered {
    font-size: 10px;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .hero-content {
    top: calc(76px + env(safe-area-inset-top, 0px) + 12px);
  }

  .hero-headline {
    font-size: clamp(30px, 8vw, 40px);
    margin-bottom: 14px;
  }

  .hero-description {
    font-size: 10px;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-partners {
    margin-top: 14px;
  }

  .centerpiece-logo-wrapper {
    top: 77%;
    left: 64%;
    width: min(68vw, 260px);
    height: min(68vw, 260px);
  }

  .centerpiece-logo {
    width: min(54vw, 200px);
    height: min(54vw, 200px);
  }

  .centerpiece-wordmark {
    font-size: 16px;
    bottom: -26px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .hero-content {
    top: calc(68px + env(safe-area-inset-top, 0px) + 12px);
    left: 16px;
    right: auto;
    max-width: 46%;
  }

  .hero-headline {
    font-size: clamp(26px, 5.5vw, 36px);
    margin-bottom: 12px;
  }

  .hero-description {
    font-size: 10px;
    margin-bottom: 14px;
    -webkit-line-clamp: 3;
  }

  .hero-partners {
    margin-top: 12px;
  }

  .centerpiece-logo-wrapper {
    top: 65%;
    left: 72%;
    width: min(42vw, 220px);
    height: min(42vw, 220px);
  }

  .centerpiece-logo {
    width: min(36vw, 180px);
    height: min(36vw, 180px);
  }

  .centerpiece-wordmark {
    font-size: 15px;
    bottom: -24px;
  }

  .scroll-indicator {
    bottom: 14px;
    left: auto;
    right: 16px;
    transform: none;
  }

  .scroll-indicator:hover {
    transform: translateY(4px);
  }
}

@media (max-width: 390px) {
  .hero-content {
    left: 16px;
    right: 16px;
  }

  .hero-headline {
    font-size: 32px;
    letter-spacing: -1.1px;
  }

  .centerpiece-logo-wrapper {
    left: 58%;
    top: 75%;
    width: min(80vw, 260px);
    height: min(80vw, 260px);
  }

  .centerpiece-logo {
    width: min(66vw, 200px);
    height: min(66vw, 200px);
  }
}

/* ==========================================
   CENTERPIECE LOGO OVERLAY STYLING
   ========================================== */
.centerpiece-logo-wrapper {
  position: fixed;
  top: calc(50% + 20px);
  left: 56%;
  transform: translate(-50%, -50%);
  width: 920px;
  height: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  pointer-events: none;
  perspective: 900px;
}

.centerpiece-logo {
  position: relative;
  width: 520px;
  height: 520px;
  pointer-events: auto;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.centerpiece-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0px 12px 30px rgba(0, 0, 0, 0.5));
  transition: filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: centerpiece-idle-rotate 10s ease-in-out infinite;
}

@keyframes centerpiece-idle-rotate {
  0%, 100% {
    transform: rotateY(-14deg) rotateX(6deg) translateY(0);
  }

  50% {
    transform: rotateY(14deg) rotateX(-6deg) translateY(10px);
  }
}

.centerpiece-logo:hover .centerpiece-logo-svg,
.centerpiece-logo.is-interacting .centerpiece-logo-svg {
  animation-play-state: paused;
}

.centerpiece-wordmark {
  position: absolute;
  bottom: -72px;
  left: 50%;
  transform: translateX(-50%) translateZ(15px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 50px;
  letter-spacing: 6px;
  color: var(--text-white);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.45s ease, color 0.45s ease;
  pointer-events: none;
  white-space: nowrap;
}

.centerpiece-wordmark .registered {
  font-size: 22px;
  vertical-align: super;
  margin-left: 2px;
}

/* Hover: Premium 3D Perspective rotation + layered shadows to simulate extrusion */
/* Woofer vibration animation */
@keyframes woofer-vibrate {
  0% {
    transform: scale(1.02) translate(0, 0);
  }

  20% {
    transform: scale(1.02) translate(-1.5px, 1.5px);
  }

  40% {
    transform: scale(1.02) translate(-1.5px, -1.5px);
  }

  60% {
    transform: scale(1.02) translate(2px, 0.5px);
  }

  80% {
    transform: scale(1.02) translate(0.5px, -2px);
  }

  100% {
    transform: scale(1.02) translate(-0.5px, 1px);
  }
}

.logo-main {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Vibrate the main logo when centerpiece logo is hovered */
.centerpiece-logo:hover .logo-main {
  animation: woofer-vibrate 0.08s infinite linear;
}

/* Trail layers styling */
.logo-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(1);
  mix-blend-mode: screen;
  /* Smooth standard transition for retracting collapse on mouseleave */
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 901px) {
  .centerpiece-logo-wrapper {
    pointer-events: auto;
    perspective: 1200px;
    /* enable 3D perspective for horizontal turns */
  }

  /* Disable transform transition on hover to prevent conflict with JS lerp loop */
  .centerpiece-logo-wrapper:hover .centerpiece-logo {
    transition: none !important;
  }



  /* Hover scale-up for centerpiece wordmark */
  .centerpiece-logo-wrapper:hover .centerpiece-wordmark {
    transform: translateX(-50%) translateZ(15px) scale(1.02);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }
}



/* Continuous shine sweep animation inside centerpiece logo */
.centerpiece-logo-svg .shine-bar {
  animation: shine-sweep 4.5s infinite ease-in-out;
  transform-origin: center;
}

/* Large desktop monitors (24"+ / taller displays) */
@media (min-width: 1600px) and (min-height: 1200px) {
  .centerpiece-logo-wrapper {
    left: 57%;
    width: 1000px;
    height: 1000px;
  }

  .centerpiece-logo {
    width: 560px;
    height: 560px;
  }

  .centerpiece-wordmark {
    font-size: 54px;
    bottom: -78px;
  }
}

/* Laptop 1920×1080 and similar wide-but-short screens */
@media (min-width: 1201px) and (max-height: 1199px) {
  .centerpiece-logo-wrapper {
    left: 56%;
    width: 860px;
    height: 860px;
  }

  .centerpiece-logo {
    width: 470px;
    height: 470px;
  }

  .centerpiece-wordmark {
    font-size: 46px;
    bottom: -66px;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .centerpiece-logo-wrapper {
    left: 54%;
    width: 820px;
    height: 820px;
  }

  .centerpiece-logo {
    width: 460px;
    height: 460px;
  }

  .centerpiece-wordmark {
    font-size: 42px;
    bottom: -62px;
  }
}

@media (max-width: 900px) {
  .centerpiece-logo-wrapper {
    left: 50%;
    top: 60%;
    width: 420px;
    height: 420px;
    pointer-events: auto;
    touch-action: none;
  }

  .centerpiece-logo {
    width: 280px;
    height: 280px;
  }

  .centerpiece-wordmark {
    font-size: 26px;
    bottom: -40px;
  }
}

@media (max-width: 600px) {
  .centerpiece-logo-wrapper {
    width: 300px;
    height: 300px;
  }

  .centerpiece-logo {
    width: 180px;
    height: 180px;
  }

  .centerpiece-wordmark {
    font-size: 18px;
    bottom: -30px;
  }
}

/* Accessibility settings support */
@media (prefers-reduced-motion: reduce) {

  .centerpiece-logo-svg {
    animation: none !important;
  }

  .centerpiece-logo,
  .centerpiece-wordmark {
    transition: opacity 0.45s ease, transform 0.45s ease !important;
    transform: none !important;
  }

  .centerpiece-logo:hover {
    transform: scale(1.04) !important;
  }

  .centerpiece-logo:hover .centerpiece-logo-svg {
    filter: drop-shadow(0px 12px 30px rgba(0, 0, 0, 0.6)) !important;
  }

  .centerpiece-logo:hover .centerpiece-wordmark {
    transform: translateX(-50%) !important;
    text-shadow: none !important;
  }
}

/* ==========================================
   ABOUT SECTION (SECOND SCREEN)
   ========================================== */
.about-section {
  --about-accent: #c5dcee;
  --about-accent-muted: rgba(197, 220, 238, 0.38);
  --about-accent-faint: rgba(197, 220, 238, 0.1);
  --about-pad-x: 48px;
  --about-eyebrow-top: clamp(64px, 8vh, 90px);
  --about-eyebrow-left: 40px;
  --about-statement-top: clamp(100px, 16vh, 180px);
  --about-statement-pad-left: 56px;
  --about-statement-max: 340px;
  --about-lead-size: clamp(30px, 2.8vw, 44px);
  --about-body-size: clamp(14px, 1.3vw, 18px);
  --about-panel-top: 108px;
  --about-panel-right: 48px;
  --about-panel-width: 236px;
  --about-divider-bottom: clamp(210px, 26vh, 278px);
  --about-columns-bottom: clamp(76px, 10vh, 98px);
  --about-column-gap: 56px;
  --about-slogan-margin: 18vw;
  --about-slogan-size: 13px;
  --about-mission-size: 15px;

  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #040508;
  overflow: hidden;
  z-index: 4;
  box-sizing: border-box;
}

/* Desktop scroll performance — compositor-friendly, no expensive filters during pin */
@media (min-width: 769px) {
  .about-section {
    background-color: transparent;
  }

  .about-section.is-about-active,
  .about-section.is-about-blending {
    z-index: 50;
    isolation: isolate;
  }

  /* Foreground copy + UI always above the fixed video layer */
  .about-section.is-about-active .about-eyebrow,
  .about-section.is-about-active .about-statement-container,
  .about-section.is-about-active .about-divider-container,
  .about-section.is-about-active .about-columns-container,
  .about-section.is-about-active .about-info-panel,
  .about-section.is-about-active .about-decorations {
    z-index: 5;
  }

  .about-section .scroll-word {
    filter: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .about-info-panel {
    filter: none;
    will-change: transform, opacity;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 12, 18, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .about-panel-stat-num {
    color: #dce8f2;
  }

  .about-panel-stat-title {
    color: rgba(255, 255, 255, 0.96);
  }

  .about-panel-stat-sub {
    color: rgba(255, 255, 255, 0.62);
  }

  .about-service-tag {
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
  }

  .about-region-item {
    color: rgba(255, 255, 255, 0.72);
  }

  .about-panel-est {
    color: rgba(255, 255, 255, 0.52);
  }

  .about-panel-corner {
    border-color: rgba(197, 220, 238, 0.55);
  }

  .about-glow-blob {
    display: none;
  }

  .about-bg-video {
    transform: none;
    will-change: auto;
  }

  .about-video-bg {
    transform: none;
    contain: none;
    isolation: isolate;
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .about-video-bg.is-viewport-fixed {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    margin: 0;
    padding: 0;
    transform: none;
    contain: none;
    overflow: hidden;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .about-video-bg.is-viewport-fixed .about-bg-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 36%;
    transform: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .about-section.is-about-active .about-video-bg {
    transform: none;
    will-change: auto;
  }

  .about-section.is-about-active .about-statement-container,
  .about-section.is-about-active .about-columns-container,
  .about-section.is-about-active .about-divider-container,
  .about-section.is-about-active .about-info-panel,
  .about-section.is-about-active .about-eyebrow {
    transform: translateZ(0);
  }
}

/* Full-screen looping video background */
.about-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
}

.about-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 36%;
  transform: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.about-video-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(4, 5, 8, 0.88) 0%,
      rgba(4, 5, 8, 0.55) 18%,
      rgba(4, 5, 8, 0.2) 30%,
      rgba(4, 5, 8, 0) 46%),
    linear-gradient(180deg,
      rgba(4, 5, 8, 0.9) 0%,
      rgba(4, 5, 8, 0.62) 10%,
      rgba(4, 5, 8, 0.12) 26%,
      rgba(4, 5, 8, 0) 40%,
      rgba(4, 5, 8, 0) 56%,
      rgba(4, 5, 8, 0.18) 70%,
      rgba(4, 5, 8, 0.78) 84%,
      rgba(4, 5, 8, 0.95) 100%);
  pointer-events: none;
}

/* Ambient glow lighting blob for color depth and contrast */
.about-glow-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 0, 0.045) 0%, rgba(255, 95, 0, 0.01) 50%, rgba(255, 95, 0, 0) 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(80px);
  opacity: 0;
}

/* Exploded 3D wireframe slabs — hidden when video background is used */
.about-backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1500px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wireframe-slab {
  position: absolute;
  width: 290px;
  height: 56vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.008);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px);
  /* Refracts drifting background stars beautifully! */
  -webkit-backdrop-filter: blur(4px);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Diagonal glass reflection line shine sweeps */
.wireframe-slab::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
}

/* Slabs positioned to form an exploded 3D monolith outline */
.slab-1 {
  transform: translate3d(-70px, -40px, 130px) rotateX(15deg) rotateY(-20deg) rotateZ(5deg);
  animation: float-slab-1 12s infinite ease-in-out;
}

.slab-2 {
  transform: translate3d(50px, 30px, -70px) rotateX(25deg) rotateY(-15deg) rotateZ(-8deg);
  animation: float-slab-2 15s infinite ease-in-out;
}

.slab-3 {
  transform: translate3d(-30px, -90px, 50px) rotateX(10deg) rotateY(-30deg) rotateZ(12deg);
  animation: float-slab-3 14s infinite ease-in-out;
}

.slab-4 {
  transform: translate3d(60px, 70px, -150px) rotateX(30deg) rotateY(-10deg) rotateZ(-4deg);
  animation: float-slab-4 16s infinite ease-in-out;
}

/* Continuous 3D floating animations for exploded slabs */
@keyframes float-slab-1 {

  0%,
  100% {
    transform: translate3d(-70px, -40px, 130px) rotateX(15deg) rotateY(-20deg) rotateZ(5deg);
  }

  50% {
    transform: translate3d(-60px, -50px, 150px) rotateX(18deg) rotateY(-18deg) rotateZ(7deg);
  }
}

@keyframes float-slab-2 {

  0%,
  100% {
    transform: translate3d(50px, 30px, -70px) rotateX(25deg) rotateY(-15deg) rotateZ(-8deg);
  }

  50% {
    transform: translate3d(40px, 20px, -60px) rotateX(22deg) rotateY(-17deg) rotateZ(-6deg);
  }
}

@keyframes float-slab-3 {

  0%,
  100% {
    transform: translate3d(-30px, -90px, 50px) rotateX(10deg) rotateY(-30deg) rotateZ(12deg);
  }

  50% {
    transform: translate3d(-35px, -80px, 40px) rotateX(12deg) rotateY(-28deg) rotateZ(10deg);
  }
}

@keyframes float-slab-4 {

  0%,
  100% {
    transform: translate3d(60px, 70px, -150px) rotateX(30deg) rotateY(-10deg) rotateZ(-4deg);
  }

  50% {
    transform: translate3d(55px, 75px, -130px) rotateX(28deg) rotateY(-12deg) rotateZ(-6deg);
  }
}

/* Accent decorations — hidden when video background is active */
.about-decorations {
  display: none;
  position: absolute;
  bottom: 40px;
  left: 40px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: accent-glow-pulse 6s infinite ease-in-out;
}

.about-decorations .spark-line-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(255, 95, 0, 0.5));
}

@keyframes accent-glow-pulse {

  0%,
  100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 6px rgba(255, 95, 0, 0.4));
  }

  50% {
    opacity: 1.0;
    filter: drop-shadow(0 0 16px rgba(255, 95, 0, 0.7));
  }
}

/* Top-right info panel — slim chrome accent */
.about-info-panel {
  --panel-accent: var(--about-accent);
  --panel-accent-soft: var(--about-accent-faint);
  --panel-accent-border: var(--about-accent-muted);

  position: absolute;
  top: var(--about-panel-top);
  right: var(--about-panel-right);
  width: var(--about-panel-width);
  padding: 18px 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  filter: none;
  will-change: opacity, transform;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

.about-panel-frame {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}

.about-panel-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--panel-accent-border);
  border-style: solid;
}

.about-panel-corner-tl {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.about-panel-corner-br {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.about-panel-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-panel-stat-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--panel-accent);
}

.about-panel-stat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-panel-stat-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.about-panel-stat-sub {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}

.about-panel-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.about-service-tag {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.about-service-tag:hover {
  border-color: var(--panel-accent-border);
  color: rgba(255, 255, 255, 0.9);
  background: var(--panel-accent-soft);
}

.about-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.about-panel-regions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-region-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.55);
}

.about-panel-est {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.about-panel-reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

/* Eyebrow marker */
.about-eyebrow {
  position: absolute;
  top: var(--about-eyebrow-top);
  left: var(--about-eyebrow-left);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-white);
  z-index: 3;
  opacity: 0;
}

/* Left statement — editorial two-tier layout */
.about-statement-container {
  position: absolute;
  top: var(--about-statement-top);
  left: 0;
  width: auto;
  max-width: var(--about-statement-max);
  padding: 0 0 0 var(--about-statement-pad-left);
  display: flex;
  justify-content: flex-start;
  z-index: 3;
}

.about-statement-rail {
  position: absolute;
  left: var(--about-statement-pad-left);
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg,
      var(--about-accent) 0%,
      var(--about-accent-muted) 55%,
      var(--about-accent-faint) 100%);
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
}

.about-statement {
  position: relative;
  padding-left: 22px;
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.about-statement-lead,
.about-statement-body {
  display: flex;
  flex-direction: column;
}

.about-statement-lead {
  gap: 2px;
  margin-bottom: 0;
}

.about-statement-break {
  display: block;
  width: 52px;
  height: 1px;
  margin: 18px 0;
  background: rgba(255, 255, 255, 0.28);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.about-statement-body {
  gap: 4px;
}

.statement-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  max-width: 300px;
  width: 100%;
}

/* Lead — who we are */
.statement-line.is-lead .scroll-word {
  font-family: var(--font-display);
  font-size: var(--about-lead-size);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.12;
  margin-right: 10px;
}

.statement-line.is-lead .scroll-word.is-brand {
  color: var(--about-accent);
}

/* Body — what we do */
.statement-line.is-body .scroll-word {
  font-family: var(--font-ui);
  font-size: var(--about-body-size);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.2px;
  line-height: 1.55;
  margin-right: 6px;
}

/* Word scroll reveal — animated via GSAP */
.scroll-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px) scale(0.98);
  will-change: opacity, filter, transform;
}

/* Horizontal Divider — sits above bottom content */
.about-divider-container {
  position: absolute;
  bottom: var(--about-divider-bottom);
  top: auto;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
  pointer-events: none;
}

.about-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin-left: var(--about-pad-x);
  width: 0%;
  max-width: calc(100% - var(--about-pad-x) * 2);
}

.divider-plus {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
  transform: translateY(-1px) scale(0);
  user-select: none;
}

.about-eyebrow,
.slogan-line,
.mission-paragraph,
.cta-about-more {
  will-change: opacity, transform, filter;
}

.slogan-line,
.mission-paragraph,
.cta-about-more {
  opacity: 0;
}

/* Supporting Columns — bottom safe zone */
.about-columns-container {
  position: absolute;
  bottom: var(--about-columns-bottom);
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  transform: none;
  padding: 0 var(--about-pad-x);
  display: grid;
  grid-template-columns: clamp(300px, 34vw, 540px) auto minmax(280px, 420px);
  column-gap: var(--about-column-gap);
  z-index: 3;
  box-sizing: border-box;
  align-items: end;
}

.column-left {
  position: relative;
  left: auto;
  top: auto;
  grid-column: 2;
  margin-left: var(--about-slogan-margin);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Slogan lines with marker + magic-letter hover */
.slogan-line {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: var(--about-slogan-size);
  font-weight: 700;
  letter-spacing: 2.2px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  padding-left: 0;
  cursor: default;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.slogan-marker {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  padding-top: 6px;
}

.slogan-marker-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 8px rgba(255, 95, 0, 0.45);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s ease;
}

.slogan-text {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
}

.slogan-char {
  display: inline-block;
  will-change: transform, opacity;
}

.slogan-line:hover {
  color: var(--text-white);
}

.slogan-line:hover .slogan-marker-dot {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255, 95, 0, 0.65);
}

.slogan-line.is-scrambling .slogan-text {
  color: var(--text-white);
}

.column-right {
  position: relative;
  left: auto;
  top: auto;
  grid-column: 3;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mission-paragraph {
  font-family: var(--font-ui);
  font-size: var(--about-mission-size);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  margin: 0;
}

/* CTA: MORE ABOUT US underline styling (matches start-a-project) */
.cta-about-more {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  position: relative;
  padding-bottom: 12px;
  width: 200px;
  justify-content: space-between;
  transition: var(--transition-fast);
}

.cta-about-arrow {
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-about-more:hover .cta-about-arrow {
  transform: translateX(8px);
}

.cta-about-more .underline-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.cta-about-more:hover .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
  box-shadow: 0 0 8px rgba(255, 95, 0, 0.6);
}

/* ==========================================
   RESPONSIVE LAYOUT FOR ABOUT SECTION
   ========================================== */

/* Large monitors — 24"+ / 2K+ */
@media (min-width: 1600px) and (min-height: 1200px) {
  .about-section {
    --about-pad-x: 56px;
    --about-statement-max: 360px;
    --about-lead-size: clamp(32px, 2.6vw, 46px);
    --about-body-size: clamp(15px, 1.2vw, 19px);
    --about-panel-width: 248px;
    --about-column-gap: 64px;
    --about-slogan-margin: 20vw;
  }
}

/* Laptop 1080p — 14" / 16" @ 1920×1080, 1536×864 */
@media (min-width: 769px) and (max-height: 1199px) {
  .about-section {
    --about-pad-x: 32px;
    --about-eyebrow-top: clamp(56px, 7vh, 72px);
    --about-eyebrow-left: 32px;
    --about-statement-top: clamp(88px, 13vh, 140px);
    --about-statement-pad-left: 44px;
    --about-statement-max: 300px;
    --about-lead-size: clamp(26px, 2.4vw, 36px);
    --about-body-size: clamp(13px, 1.15vw, 16px);
    --about-panel-top: 80px;
    --about-panel-right: 32px;
    --about-panel-width: 210px;
    --about-divider-bottom: clamp(200px, 27vh, 250px);
    --about-columns-bottom: clamp(68px, 9vh, 88px);
    --about-column-gap: 36px;
    --about-slogan-margin: 13vw;
    --about-slogan-size: 12px;
    --about-mission-size: 14px;
  }

  .about-info-panel {
    padding: 14px 16px 12px;
    gap: 12px;
  }

  .about-panel-stat-num {
    font-size: 28px;
  }

  .about-statement {
    max-width: 280px;
  }

  .statement-line {
    max-width: 280px;
  }

  .about-statement-break {
    margin: 14px 0;
  }

  .column-right {
    max-width: 360px;
    gap: 18px;
  }

  .slogan-line {
    letter-spacing: 1.8px;
    gap: 12px;
  }
}

/* 14" / compact-width laptops */
@media (min-width: 769px) and (max-width: 1440px) {
  .about-section {
    --about-statement-max: 280px;
    --about-slogan-margin: 10vw;
    --about-column-gap: 32px;
  }

  .about-columns-container {
    grid-template-columns: clamp(180px, 24vw, 360px) auto minmax(220px, 340px);
  }

  .about-info-panel {
    --about-panel-width: 200px;
    --about-panel-right: 28px;
  }

  .about-statement {
    max-width: 260px;
  }

  .statement-line {
    max-width: 260px;
  }

  .column-right {
    max-width: 320px;
  }
}

/* Tablet landscape — iPad / small laptops */
@media (min-width: 769px) and (max-width: 1024px) {
  .about-section {
    --about-pad-x: 24px;
    --about-eyebrow-top: 60px;
    --about-eyebrow-left: 24px;
    --about-statement-top: clamp(80px, 11vh, 120px);
    --about-statement-pad-left: 36px;
    --about-statement-max: 250px;
    --about-lead-size: clamp(22px, 3vw, 30px);
    --about-body-size: clamp(12px, 1.4vw, 15px);
    --about-panel-top: 68px;
    --about-panel-right: 24px;
    --about-panel-width: 186px;
    --about-divider-bottom: clamp(185px, 29vh, 230px);
    --about-columns-bottom: clamp(58px, 10vh, 76px);
    --about-column-gap: 24px;
    --about-slogan-margin: 0;
    --about-slogan-size: 11px;
    --about-mission-size: 13px;
  }

  .about-info-panel {
    padding: 12px 14px 10px;
    gap: 10px;
  }

  .about-panel-stat-num {
    font-size: 24px;
  }

  .about-panel-stat-title {
    font-size: 9px;
  }

  .about-service-tag {
    font-size: 7px;
    padding: 4px 7px;
  }

  .about-statement {
    max-width: 240px;
  }

  .statement-line {
    max-width: 240px;
  }

  .statement-line.is-lead .scroll-word {
    margin-right: 6px;
  }

  .about-columns-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  .column-left {
    grid-column: 1;
    margin-left: 0;
    margin-bottom: 8px;
  }

  .column-right {
    grid-column: 2;
    max-width: 100%;
    gap: 16px;
  }

  .slogan-line {
    letter-spacing: 1.5px;
    gap: 10px;
  }

  .cta-about-more {
    font-size: 10px;
    letter-spacing: 2.5px;
    width: 180px;
  }
}

/* Very short laptop displays */
@media (min-width: 769px) and (max-height: 800px) {
  .about-section {
    --about-statement-top: clamp(72px, 11vh, 110px);
    --about-divider-bottom: clamp(175px, 30vh, 220px);
    --about-columns-bottom: clamp(52px, 9vh, 68px);
    --about-panel-top: 64px;
  }

  .about-statement-break {
    margin: 10px 0;
  }

  .column-left {
    gap: 8px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .about-columns-container {
    grid-template-columns: clamp(220px, 28vw, 420px) auto minmax(260px, 380px);
  }

  .about-divider-container.expanded .about-divider {
    width: calc(100% - var(--about-pad-x) * 2);
  }
}

/* ==========================================
   ABOUT — MOBILE ONLY (≤768px)
   Desktop & tablet layouts unchanged above 768px.
   ========================================== */
@media (max-width: 768px) {
  .about-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    padding:
      calc(80px + env(safe-area-inset-top, 0px)) 24px calc(80px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    gap: 0;
    position: relative;
  }

  .about-video-bg,
  .about-glow-blob,
  .about-info-panel,
  .about-backdrop,
  .about-decorations {
    display: none !important;
  }

  .about-eyebrow {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.8px;
    color: rgba(255, 255, 255, 0.45);
    z-index: 2;
  }

  .about-statement-container {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    order: 2;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin: 24px 0 36px;
    padding: 0;
    z-index: 2;
  }

  .about-statement-rail,
  .about-statement-break {
    display: none !important;
  }

  .about-statement {
    padding: 0;
    max-width: 100%;
    width: 100%;
    display: block;
  }

  .about-statement-lead,
  .about-statement-body {
    display: block;
  }

  .statement-line {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  .statement-line.is-lead .scroll-word,
  .statement-line.is-body .scroll-word {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(40px, 9vw, 54px);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin-right: 0.28em;
    vertical-align: baseline;
    white-space: normal;
  }

  .statement-line.is-lead .scroll-word.is-brand {
    color: #ffffff;
    font-weight: 300;
  }

  .about-divider-container {
    display: flex !important;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    order: 3;
    flex-shrink: 0;
    width: 100%;
    margin: 32px 0;
    padding: 0;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
  }

  .about-divider {
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }

  .divider-plus {
    margin-left: 12px;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
  }

  .about-section .scroll-word {
    will-change: opacity, transform, filter;
  }

  .about-columns-container {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    order: 4;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    z-index: 2;
  }

  .column-left {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0;
    margin: 0 0 28px;
    gap: 0;
    display: flex;
    flex-direction: column;
  }

  .slogan-line {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.8;
    padding-left: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    filter: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .slogan-marker {
    width: 12px;
    padding-top: 7px;
  }

  .slogan-marker-dot {
    width: 4px;
    height: 4px;
  }

  .slogan-line+.slogan-line {
    margin-top: 0;
  }

  .column-right {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .mission-paragraph {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 40px;
    max-width: 100%;
  }

  .cta-about-more {
    width: fit-content;
    max-width: none;
    margin: 0 0 64px;
    align-self: flex-start;
  }
}

/* ==========================================
   KEY FACTS SECTION — 3 Card Layout
   ========================================== */
.key-facts-section {
  --kf-pad-top: clamp(72px, 9vh, 100px);
  --kf-pad-bottom: clamp(64px, 8vh, 90px);
  --kf-container-pad: 48px;
  --kf-container-max: 1320px;
  --kf-header-mb: 56px;
  --kf-headline-size: clamp(42px, 5vw, 72px);
  --kf-subtext-size: 15px;
  --kf-subtext-max: 560px;
  --kf-card-gap: 22px;
  --kf-card-min-h: 480px;
  --kf-card-pad-y: 28px;
  --kf-card-pad-x: 26px;
  --kf-card-pad-b: 24px;
  --kf-card-radius: 22px;
  --kf-visual-min-h: 200px;
  --kf-cycle-min-h: 140px;
  --kf-cycle-text-size: clamp(22px, 2.4vw, 32px);
  --kf-spotlight-min-h: 260px;
  --kf-partner-name-size: clamp(18px, 2vw, 26px);
  --kf-stat-size: clamp(44px, 4.5vw, 64px);
  --kf-stat-suffix-size: clamp(28px, 3vw, 40px);

  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: var(--kf-pad-top) 0 var(--kf-pad-bottom);
  background-color: #040508;
  overflow: hidden;
  z-index: 3;
  box-sizing: border-box;
}

/* Stay hidden while About pin is active — prevents double reveal during scroll */
.key-facts-section.is-awaiting-about {
  visibility: hidden;
  pointer-events: none;
}

/* About → Key Facts bridge overlay (inside About only) */
.about-kf-bridge {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  background: #040508;
  overflow: hidden;
}

.about-kf-bridge-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 15%, transparent 78%);
}

.about-section.is-about-passed {
  visibility: hidden;
  pointer-events: none;
}

.about-section.is-about-blending {
  pointer-events: none;
}

.about-section.is-about-passed .about-video-bg,
.about-section.is-about-passed .about-statement-container,
.about-section.is-about-passed .about-columns-container,
.about-section.is-about-passed .about-divider-container,
.about-section.is-about-passed .about-info-panel,
.about-section.is-about-passed .about-eyebrow,
.about-section.is-about-passed .about-backdrop,
.about-section.is-about-passed .about-decorations,
.about-section.is-about-passed .about-glow-blob {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Fixed video can live on body — hide when About is passed */
.about-video-bg.is-viewport-fixed.is-hidden-after-blend,
.about-section.is-about-passed .about-video-bg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.kf-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Innovation band — dedicated row above Key Facts */
.kf-innovation-stage {
  --kf-innovation-size: clamp(96px, 15vw, 210px);
  --kf-innovation-script-size: clamp(36px, 5vw, 72px);
  --kf-innovation-right: clamp(28px, 4.5vw, 56px);

  position: relative;
  width: 100%;
  height: clamp(110px, 16vh, 200px);
  background-color: #040508;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.kf-innovation-stage.is-awaiting-about {
  visibility: hidden;
}

/* Large 2D title — right-aligned at bottom of stage (above section) */
.kf-innovation-banner {
  position: absolute;
  right: var(--kf-innovation-right);
  bottom: clamp(8px, 1.5vh, 20px);
  left: auto;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  text-align: right;
}

.kf-innovation-display {
  margin: 0;
  padding: 0;
  line-height: 0.88;
}

.kf-innovation-main {
  display: block;
  font-family: var(--font-display);
  font-size: var(--kf-innovation-size);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.kf-innovation-script {
  display: block;
  margin-top: -0.06em;
  margin-right: 0.12em;
  margin-left: 0;
  font-family: 'Great Vibes', cursive;
  font-size: var(--kf-innovation-script-size);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  text-shadow: none;
}

.kf-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.kf-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 5, 8, 0.72) 0%, rgba(4, 5, 8, 0.48) 45%, rgba(4, 5, 8, 0.78) 100%),
    radial-gradient(ellipse 90% 80% at 50% 40%, rgba(4, 5, 8, 0.15) 0%, rgba(4, 5, 8, 0.65) 100%);
}

.kf-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 15%, transparent 78%);
}

.kf-bg-glow {
  position: absolute;
  top: 28%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 95, 0, 0.08) 0%, rgba(255, 95, 0, 0.02) 45%, transparent 72%);
  animation: kf-glow-drift 14s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes kf-glow-drift {
  0% { transform: translate(-48%, -52%) scale(1); }
  100% { transform: translate(-52%, -48%) scale(1.08); }
}

.kf-bg-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kf-bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 3;
}

.key-facts-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kf-container-max);
  margin: 0 auto;
  padding: 0 var(--kf-container-pad);
  box-sizing: border-box;
}

.kf-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--kf-header-mb);
}

.facts-eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-white);
  opacity: 0.55;
  margin-bottom: 20px;
}

.facts-headline {
  font-family: var(--font-display);
  font-size: var(--kf-headline-size);
  font-weight: 300;
  line-height: 1.08;
  color: #cfcfcf;
  letter-spacing: -2px;
  margin: 0 0 20px;
}

.facts-headline span {
  color: var(--text-white);
  font-weight: 500;
}

.facts-subtext {
  font-family: var(--font-ui);
  font-size: var(--kf-subtext-size);
  font-weight: 300;
  line-height: 1.65;
  color: #8c8d94;
  margin: 0 auto;
  max-width: var(--kf-subtext-max);
}

/* 3-card row */
.kf-cards-grid--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kf-card-gap);
  align-items: stretch;
}

.kf-card,
.key-fact-card {
  position: relative;
  min-height: var(--kf-card-min-h);
  border-radius: var(--kf-card-radius);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-card-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: var(--kf-card-min-h);
  padding: var(--kf-card-pad-y) var(--kf-card-pad-x) var(--kf-card-pad-b);
  display: flex;
  flex-direction: column;
  border-radius: var(--kf-card-radius);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.kf-card--dark .kf-card-inner {
  background: rgba(8, 10, 14, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.kf-card--light .kf-card-inner {
  background: rgba(28, 30, 36, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.14);
}

.kf-card-border {
  position: absolute;
  inset: 0;
  border-radius: var(--kf-card-radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 3;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.kf-card-border--gradient {
  border: none;
  padding: 1px;
  background: conic-gradient(from var(--kf-border-angle, 0deg), rgba(255, 95, 0, 0.6), rgba(255, 255, 255, 0.1), rgba(197, 220, 238, 0.4), rgba(255, 95, 0, 0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: kf-border-spin 5s linear infinite;
}

@keyframes kf-border-spin { to { --kf-border-angle: 360deg; } }

@property --kf-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.kf-card-shine {
  position: absolute;
  inset: 0;
  border-radius: var(--kf-card-radius);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.04) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.45s ease;
}

.kf-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.5), 0 0 48px rgba(255, 95, 0, 0.1);
}

.kf-card:hover .kf-card-shine { opacity: 1; }

.kf-card:hover .kf-card-border:not(.kf-card-border--gradient) {
  border-color: rgba(255, 95, 0, 0.3);
  box-shadow: 0 0 28px rgba(255, 95, 0, 0.14);
}

.kf-card-top-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
}

.kf-card-index {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}

.kf-card-visual {
  position: relative;
  flex: 1;
  min-height: var(--kf-visual-min-h);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* Left — Success projects cycle */
.kf-card-visual--cycle {
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.kf-cycle-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--kf-cycle-min-h);
  text-align: center;
}

.kf-cycle-text {
  font-family: var(--font-display);
  font-size: var(--kf-cycle-text-size);
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.2;
  background: linear-gradient(180deg, #ffffff 0%, #d4d7de 45%, #a8adb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  will-change: transform, opacity;
}

.kf-card-bg-shift {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 95, 0, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.7s ease;
  z-index: 0;
  pointer-events: none;
}

.kf-card--projects:hover .kf-card-bg-shift {
  opacity: 1;
  transform: translate(10px, -6px);
}

/* Center logo card */
.kf-card--logo .kf-card-inner {
  gap: 16px;
}

.kf-card--logo .kf-spotlight-stage {
  flex: 1;
  min-height: var(--kf-spotlight-min-h);
  margin: 0;
  border-radius: 16px;
}

.kf-spotlight-stage {
  position: relative;
  overflow: hidden;
  background: rgba(4, 5, 8, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  --mx: 50%;
  --my: 50%;
  --spot-radius: 115px;
}

.kf-spotlight-glow {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  left: var(--mx);
  top: var(--my);
  background: radial-gradient(
    circle,
    rgba(255, 120, 45, 0.55) 0%,
    rgba(255, 95, 0, 0.32) 30%,
    rgba(255, 95, 0, 0.1) 48%,
    transparent 72%
  );
  opacity: 0.9;
  filter: blur(14px);
  transition: opacity 0.5s ease, width 0.6s ease, height 0.6s ease, filter 0.5s ease;
}

.kf-spotlight-stage.is-hovered .kf-spotlight-glow {
  width: 280px;
  height: 280px;
  opacity: 0.35;
  filter: blur(24px);
}

.kf-spotlight-logo {
  position: absolute;
  inset: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  display: block;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  -webkit-mask-image: radial-gradient(
    circle var(--spot-radius) at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 36%,
    rgba(0, 0, 0, 0) 70%
  );
  mask-image: radial-gradient(
    circle var(--spot-radius) at var(--mx) var(--my),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 36%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: drop-shadow(0 0 24px rgba(255, 95, 0, 0.25));
  transition: filter 0.5s ease, -webkit-mask-image 0.55s ease, mask-image 0.55s ease;
}

.kf-spotlight-stage.is-hovered .kf-spotlight-logo {
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 0 32px rgba(255, 95, 0, 0.45));
}

.kf-spotlight-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 46%;
  margin: -23% 0 0 -29%;
  border: 1px dashed rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: kf-orbit-spin 14s linear infinite;
}

@keyframes kf-orbit-spin {
  to { transform: rotate(360deg); }
}

.kf-spotlight-stage.is-hovered .kf-spotlight-orbit {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.kf-spotlight-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: kf-ring-pulse 4s ease-in-out infinite;
}

.kf-spotlight-stage.is-hovered .kf-spotlight-ring {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes kf-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.08); opacity: 0.7; }
}

.kf-spotlight-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.kf-spotlight-hint--mobile { display: none; }

.kf-spotlight-stage.is-hovered .kf-spotlight-hint,
.kf-spotlight-stage.is-auto .kf-spotlight-hint { opacity: 0; }

.kf-card-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.kf-card-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 95, 0, 0.55);
  box-shadow: 0 0 8px rgba(255, 95, 0, 0.45);
  animation: kf-particle-float 7s ease-in-out infinite;
}

.kf-card-particles span:nth-child(1) { left: 15%; top: 25%; }
.kf-card-particles span:nth-child(2) { left: 82%; top: 18%; animation-delay: 1.5s; }
.kf-card-particles span:nth-child(3) { left: 70%; top: 75%; animation-delay: 2.8s; }
.kf-card-particles span:nth-child(4) { left: 22%; top: 70%; animation-delay: 0.6s; }

@keyframes kf-particle-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(6px, -10px); opacity: 0.95; }
}

/* Partners card — center cycle (like card 01) */
.kf-card-visual--partner-cycle {
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.kf-partner-cycle-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--kf-cycle-min-h);
  text-align: center;
}

.kf-partner-cycle-country {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(196, 202, 214, 0.85);
  will-change: transform, opacity;
}

.kf-partner-cycle-name {
  font-family: var(--font-display);
  font-size: var(--kf-partner-name-size);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.3;
  text-align: center;
  max-width: 280px;
  background: linear-gradient(180deg, #ffffff 0%, #d4d7de 45%, #a8adb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: transform, opacity;
}

/* Card footer */
.kf-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.kf-card-footer--center {
  justify-content: center;
  text-align: center;
}

.kf-card-footnote {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 72%;
}

.kf-card-footer--center .kf-card-footnote {
  max-width: 100%;
}

.kf-card-stat-wrap {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  line-height: 1;
}

.kf-card-stat {
  font-family: var(--font-display);
  font-size: var(--kf-stat-size);
  font-weight: 600;
  letter-spacing: -2px;
  color: var(--text-white);
}

.kf-card-stat-suffix {
  font-family: var(--font-display);
  font-size: var(--kf-stat-suffix-size);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.kf-card--projects:hover .kf-card-stat {
  color: var(--accent-orange);
  text-shadow: 0 0 30px rgba(255, 95, 0, 0.25);
}

.kf-progress-track {
  width: 100%;
  height: 2px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.kf-progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-orange), rgba(255, 95, 0, 0.35));
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.kf-card--projects:hover .kf-progress-fill,
.kf-card--projects.is-counted .kf-progress-fill {
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(255, 95, 0, 0.45);
}

.kf-card.is-reveal-pending {
  opacity: 0;
  transform: translateY(64px) scale(0.94);
}

/* ==========================================
   KEY FACTS — RESPONSIVE (ALL SCREENS)
   ========================================== */

/* Large monitors — 24"+ / 2K+ */
@media (min-width: 1600px) and (min-height: 1200px) {
  .key-facts-section {
    --kf-container-max: 1400px;
    --kf-container-pad: 56px;
    --kf-headline-size: clamp(48px, 4.8vw, 76px);
    --kf-card-gap: 26px;
    --kf-card-min-h: 500px;
  }

  .kf-innovation-stage {
    --kf-innovation-size: clamp(108px, 14vw, 240px);
    --kf-innovation-script-size: clamp(42px, 4.8vw, 80px);
    height: clamp(130px, 18vh, 220px);
  }
}

/* Laptop 1080p — 14" / 16" @ 1920×1080 */
@media (min-width: 769px) and (max-height: 1199px) {
  .key-facts-section {
    --kf-pad-top: clamp(56px, 7.5vh, 80px);
    --kf-pad-bottom: clamp(52px, 6.5vh, 72px);
    --kf-container-pad: 32px;
    --kf-header-mb: 40px;
    --kf-headline-size: clamp(34px, 4vw, 56px);
    --kf-subtext-size: 14px;
    --kf-subtext-max: 500px;
    --kf-card-gap: 16px;
    --kf-card-min-h: 400px;
    --kf-card-pad-y: 22px;
    --kf-card-pad-x: 22px;
    --kf-card-pad-b: 20px;
    --kf-visual-min-h: 168px;
    --kf-cycle-min-h: 118px;
    --kf-cycle-text-size: clamp(18px, 1.9vw, 26px);
    --kf-spotlight-min-h: 220px;
    --kf-partner-name-size: clamp(16px, 1.7vw, 22px);
    --kf-stat-size: clamp(36px, 3.8vw, 52px);
    --kf-stat-suffix-size: clamp(22px, 2.4vw, 32px);
  }

  .kf-innovation-stage {
    --kf-innovation-size: clamp(84px, 13vw, 170px);
    --kf-innovation-script-size: clamp(32px, 4.5vw, 58px);
    height: clamp(96px, 14vh, 170px);
  }

  .facts-eyebrow {
    font-size: 10px;
    margin-bottom: 16px;
  }

  .facts-headline {
    margin-bottom: 16px;
    letter-spacing: -1.5px;
  }

  .kf-card-top-label {
    font-size: 9px;
    margin-bottom: 16px;
  }

  .kf-card-footnote {
    font-size: 10px;
  }
}

/* 14" / compact-width laptops */
@media (min-width: 769px) and (max-width: 1440px) {
  .key-facts-section {
    --kf-container-pad: 32px;
    --kf-card-gap: 18px;
    --kf-subtext-max: 480px;
  }
}

/* Mid-width laptops */
@media (min-width: 1025px) and (max-width: 1280px) {
  .key-facts-section {
    --kf-card-min-h: 420px;
    --kf-spotlight-min-h: 230px;
    --kf-headline-size: clamp(36px, 4.2vw, 52px);
  }
}

/* Tablet landscape — iPad / small laptops */
@media (min-width: 769px) and (max-width: 1024px) {
  .key-facts-section {
    --kf-pad-top: clamp(52px, 7vh, 72px);
    --kf-pad-bottom: clamp(48px, 6vh, 64px);
    --kf-container-pad: 24px;
    --kf-header-mb: 36px;
    --kf-headline-size: clamp(30px, 4.5vw, 42px);
    --kf-subtext-size: 13px;
    --kf-card-gap: 14px;
    --kf-card-min-h: 360px;
    --kf-card-pad-y: 20px;
    --kf-card-pad-x: 18px;
    --kf-visual-min-h: 150px;
    --kf-cycle-min-h: 108px;
    --kf-cycle-text-size: clamp(16px, 2.2vw, 22px);
    --kf-spotlight-min-h: 200px;
    --kf-partner-name-size: clamp(15px, 2vw, 20px);
    --kf-stat-size: clamp(32px, 4vw, 44px);
    --kf-stat-suffix-size: clamp(20px, 2.6vw, 28px);
  }

  .kf-cards-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kf-card--logo {
    grid-column: 1 / -1;
    order: -1;
  }

  .kf-section-header {
    max-width: 100%;
  }

  .facts-eyebrow {
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  .facts-headline {
    letter-spacing: -1px;
  }

  .kf-partner-cycle-country {
    font-size: 10px;
  }
}

/* Very short laptop displays */
@media (min-width: 769px) and (max-height: 800px) {
  .key-facts-section {
    --kf-pad-top: clamp(48px, 7vh, 64px);
    --kf-pad-bottom: clamp(44px, 6vh, 56px);
    --kf-header-mb: 28px;
    --kf-card-min-h: 340px;
    --kf-visual-min-h: 140px;
    --kf-cycle-min-h: 100px;
    --kf-spotlight-min-h: 180px;
  }

  .facts-headline {
    margin-bottom: 12px;
  }

  .facts-subtext {
    line-height: 1.55;
  }
}

/* Mobile + small tablet */
@media (max-width: 768px) {
  .key-facts-section {
    --kf-pad-top: clamp(72px, 12vh, 90px);
    --kf-pad-bottom: clamp(56px, 9vh, 70px);
    --kf-container-pad: 24px;
    --kf-header-mb: 40px;
    --kf-headline-size: clamp(30px, 8vw, 40px);
    --kf-subtext-size: 13px;
    --kf-card-gap: 14px;
    --kf-card-min-h: 380px;
    --kf-card-pad-y: 22px;
    --kf-card-pad-x: 20px;
    --kf-spotlight-min-h: 220px;
    --kf-stat-size: 40px;
    --kf-stat-suffix-size: 28px;
  }

  .kf-innovation-stage {
    --kf-innovation-size: clamp(64px, 18vw, 96px);
    --kf-innovation-script-size: clamp(28px, 8vw, 40px);
    --kf-innovation-right: clamp(20px, 5vw, 28px);
    height: clamp(80px, 12vh, 120px);
  }

  .kf-cards-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kf-card--logo {
    grid-column: 1 / -1;
    order: -1;
  }

  .kf-card:hover {
    transform: none;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42);
  }

  .kf-card:hover .kf-card-shine { opacity: 0; }

  /* Logo card — mobile-first reveal (no hover spotlight) */
  .kf-card--logo {
    --kf-card-min-h: auto;
  }

  .kf-card--logo .kf-card-inner {
    gap: 12px;
    min-height: auto;
    padding-bottom: 18px;
  }

  .kf-card--logo .kf-spotlight-stage {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 200px;
    border-radius: 14px;
    cursor: default;
    background: rgba(4, 5, 8, 0.82);
    box-shadow: none;
  }

  .kf-card--logo .kf-card-particles {
    display: none;
  }

  .kf-spotlight-stage.is-mobile .kf-spotlight-glow,
  .kf-spotlight-stage.is-mobile .kf-spotlight-hint {
    display: none !important;
  }

  .kf-spotlight-stage.is-mobile .kf-spotlight-logo {
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: 50% 50%;
    filter: none;
    will-change: transform, opacity;
    z-index: 2;
  }

  .kf-spotlight-stage.is-mobile.is-mobile-revealed .kf-spotlight-logo {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }

  .kf-spotlight-stage.is-mobile .kf-spotlight-orbit {
    width: 72%;
    height: 58%;
    margin: -29% 0 0 -36%;
    opacity: 0.22;
    animation-duration: 18s;
  }

  .kf-spotlight-hint--desktop { display: none; }

  .kf-card--logo .kf-card-top-label {
    margin-bottom: 14px;
  }

  .kf-card-footer--center .kf-card-footnote {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.58);
    max-width: 100%;
    padding: 0 4px;
  }
}

@media (max-width: 600px) {
  .key-facts-section {
    --kf-container-pad: 20px;
    --kf-header-mb: 32px;
    --kf-headline-size: 34px;
    --kf-card-gap: 16px;
    --kf-card-min-h: 360px;
    --kf-spotlight-min-h: 200px;
    --kf-stat-size: 36px;
    --kf-stat-suffix-size: 24px;
  }

  .kf-cards-grid--three {
    grid-template-columns: 1fr;
  }

  .kf-card--logo .kf-spotlight-stage {
    max-height: 190px;
    aspect-ratio: 5 / 3;
  }

  .kf-card-footnote {
    max-width: 100%;
    font-size: 11px;
  }

  .kf-card-footer {
    padding-top: 14px;
  }

  .facts-subtext {
    font-size: 12px;
    line-height: 1.6;
  }
}

@media (max-width: 400px) {
  .key-facts-section {
    --kf-container-pad: 16px;
    --kf-headline-size: 28px;
    --kf-card-min-h: 340px;
    --kf-card-pad-x: 16px;
  }

  .kf-cycle-text {
    letter-spacing: 2px;
  }

  .kf-partner-cycle-name {
    max-width: 100%;
  }
}

/* ==========================================
   THEME FLIP SYSTEM (DARK -> LIGHT)
   ========================================== */
body {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Active States */
body.light-theme-active {
  background-color: #e8e8e6 !important;
  color: #1a1a1a !important;
}

body.light-theme-active #bg-canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Fixed Header Transitions for Light Theme */
.top-bar,
.top-bar .logo .wordmark,
.top-bar .sound-toggle,
.top-bar .cta-talk,
.top-bar .menu-toggle {
  transition:
    color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    fill 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme-active .top-bar {
  color: #1a1a1a;
}

body.light-theme-active .logo .wordmark,
body.light-theme-active .menu-toggle span {
  color: #1a1a1a !important;
}

body.light-theme-active .logo-mark path {
  fill: #1a1a1a !important;
}

body.light-theme-active .sound-toggle {
  border-color: rgba(26, 26, 26, 0.15) !important;
  color: #1a1a1a !important;
}

body.light-theme-active .sound-toggle:hover {
  border-color: #1a1a1a !important;
}

body.light-theme-active .cta-talk {
  background-color: #1a1a1a !important;
  color: #e8e8e6 !important;
  border-color: #1a1a1a !important;
}

body.light-theme-active .cta-talk:hover {
  background-color: transparent !important;
  color: #1a1a1a !important;
}

body.light-theme-active .menu-toggle {
  border-color: rgba(26, 26, 26, 0.15) !important;
  color: #1a1a1a !important;
}

body.light-theme-active .menu-toggle:hover {
  border-color: #1a1a1a !important;
}

body.light-theme-active .menu-toggle .bar {
  background-color: #1a1a1a !important;
}

/* Cookie Banner Light Theme Adaptation */
body.light-theme-active .cookie-banner {
  background-color: rgba(26, 26, 26, 0.05);
  border: 1px solid rgba(26, 26, 26, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.light-theme-active .cookie-text {
  color: #1a1a1a;
}

body.light-theme-active .cookie-btn.btn-decline {
  color: #1a1a1a;
  border-color: rgba(26, 26, 26, 0.2);
}

body.light-theme-active .cookie-btn.btn-accept {
  background-color: #1a1a1a;
  color: #e8e8e6;
}

/* ==========================================
   SELECTED WORK — horizontal scroll showcase
   ========================================== */
.selected-work-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  background-color: #e8e8e6;
  overflow: hidden;
  z-index: 4;
}

.work-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.work-horizontal-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  min-height: 100vh;
  will-change: transform;
  padding-right: 10vw;
  box-sizing: border-box;
}

.work-slide {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.intro-slide {
  width: 50vw;
  min-width: 420px;
  padding: 0 clamp(40px, 6vw, 100px);
  justify-content: flex-start;
}

.intro-slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 520px;
  will-change: transform;
}

.work-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 300;
  line-height: 1.06;
  color: #8f8f92;
  letter-spacing: -2px;
  margin: 0;
}

.work-headline span {
  color: #1a1a1a;
  font-weight: 500;
}

.project-slide {
  width: clamp(600px, 64vw, 820px);
  padding: 0 clamp(28px, 3.5vw, 56px);
}

.outro-slide {
  width: clamp(380px, 42vw, 560px);
  padding: 0 clamp(40px, 5vw, 80px);
}

.outro-slide-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.cta-view-all {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: #1a1a1a;
  font-family: var(--font-ui);
  position: relative;
  gap: 20px;
}

.cta-view-all--outro .outro-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: #1a1a1a;
}

.cta-explore-row {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.cta-view-all .cta-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-view-all .underline-line {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.25);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.cta-view-all:hover .cta-arrow {
  transform: translateX(6px);
}

.cta-view-all:hover .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
}

.project-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform, opacity;
}

.project-media {
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(26, 26, 26, 0.08);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08);
  background-color: #e8e8e6;
  display: block;
  box-sizing: border-box;
  transition: box-shadow 0.5s ease;
}

.project-card-link:hover .project-media {
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.14);
}

.project-media-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* Media Mockup: Navigation Header */
.mini-site-nav {
  height: 44px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
  pointer-events: none;
}

.mini-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #ffffff;
}

.mini-tagline {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
}

.mini-site-hero {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* CARD 1 — "MyWorker AI" Custom CSS */
.myworker-media {
  background: radial-gradient(circle at 50% 120%, #4a2105 0%, #150901 60%, #060200 100%);
}

.myworker-media .mini-site-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 95, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 95, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Surreal landscape abstract art inside MyWorker */
.myworker-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 200px;
  background: radial-gradient(ellipse at center bottom, rgba(255, 95, 0, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}

.alex-greeting {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  z-index: 2;
  letter-spacing: -1px;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
  animation: float-alex 6s infinite ease-in-out;
}

@keyframes float-alex {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* CARD 2 — "Pulse Studio" Custom CSS */
.pulse-media {
  background: #060608;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pulse-media .mini-logo {
  font-family: var(--font-display);
  color: #ff3b30;
  font-weight: 700;
}

.mini-nav-links {
  display: flex;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

.pulse-media .mini-site-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pulse-media .mini-site-hero {
  align-items: center;
  justify-content: flex-start;
  padding-top: 40px;
}

.sound-chip {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  color: #ff3b30;
  border: 1px solid rgba(255, 59, 48, 0.4);
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 1.5px;
  background: rgba(255, 59, 48, 0.05);
  box-shadow: 0 0 15px rgba(255, 59, 48, 0.1);
  z-index: 3;
}

/* Ambient concert backdrop glow */
.guitar-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 59, 48, 0.25) 0%, rgba(255, 59, 48, 0.05) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  z-index: 1;
}

.floating-chip {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  z-index: 2;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.chip-1 {
  top: 60px;
  left: 35px;
  transform: rotate(-5deg);
}

.chip-2 {
  top: 75px;
  right: 40px;
  transform: rotate(8deg);
}

.chip-3 {
  bottom: 85px;
  left: 45px;
  transform: rotate(12deg);
}

.chip-4 {
  bottom: 95px;
  right: 50px;
  transform: rotate(-10deg);
}

.project-card:hover .chip-1 {
  transform: rotate(-12deg) translate(-5px, -5px);
  color: #ffffff;
}

.project-card:hover .chip-2 {
  transform: rotate(15deg) translate(5px, -5px);
  color: #ffffff;
}

.project-card:hover .chip-3 {
  transform: rotate(5deg) translate(-5px, 5px);
  color: #ffffff;
}

.project-card:hover .chip-4 {
  transform: rotate(-18deg) translate(5px, 5px);
  color: #ffffff;
}

.pulse-headline {
  padding: 12px 20px;
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #cfcfcf;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-align: center;
  z-index: 2;
}

/* CARD 3 — "Loftloom" Custom CSS */
.loftloom-media {
  background: linear-gradient(180deg, #15181e 0%, #0d0f13 100%);
}

/* Architecture visual simulation */
.loftloom-media::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(13, 15, 19, 0.9) 0%, rgba(13, 15, 19, 0.1) 80%);
  z-index: 2;
}

.luxury-headline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 5px;
  text-align: center;
  z-index: 3;
  margin-bottom: 15px;
  opacity: 0.9;
}

.real-estate-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  z-index: 3;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.project-card:hover .real-estate-card {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
}

.re-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.re-details {
  grid-column: 1;
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
  letter-spacing: 0.5px;
}

.re-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #1a1a1a;
  background-color: #ffffff;
  padding: 5px 10px;
  border-radius: 4px;
}

/* Project Card Info Row */
.project-info {
  margin-top: 24px;
  width: 100%;
}

.project-title-row {
  margin-bottom: 8px;
}

.project-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  color: #1a1a1a;
}

.project-desc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.project-caption {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #555558;
  max-width: 320px;
  transition: color 0.8s ease;
}

.cta-explore {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #1a1a1a;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  position: relative;
  white-space: nowrap;
}

.cta-explore .cta-arrow {
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-explore .underline-line {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.25);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.project-card-link:hover .cta-explore .cta-arrow {
  transform: translateX(4px);
}

.project-card-link:hover .cta-explore .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
}

/* ==========================================
   RESPONSIVE — SELECTED WORK
   ========================================== */
@media (max-width: 1100px) {
  .project-slide {
    width: clamp(520px, 66vw, 680px);
  }
}

@media (max-width: 900px) {
  .selected-work-section {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .work-stage {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .work-horizontal-track {
    flex-direction: column;
    height: auto;
    min-height: auto;
    width: 100%;
    padding: 72px 20px 80px;
    gap: 56px;
    transform: none !important;
  }

  .intro-slide,
  .project-slide,
  .outro-slide {
    width: 100%;
    min-width: 0;
    padding: 0;
    height: auto;
    justify-content: center;
  }

  .intro-slide-content {
    max-width: none;
    transform: none !important;
  }

  .project-card {
    max-width: 600px;
    margin: 0 auto;
  }

  .project-card {
    transform: none !important;
    opacity: 1 !important;
  }

  .project-caption {
    max-width: 70%;
  }
}

@media (max-width: 600px) {
  .work-horizontal-track {
    padding: 56px 16px 64px;
    gap: 44px;
  }

  .work-headline {
    font-size: clamp(34px, 10vw, 44px);
  }

  .cta-view-all--outro .outro-title {
    font-size: clamp(32px, 9vw, 40px);
  }
}

@media (max-width: 480px) {
  .sound-chip {
    padding: 4px 10px;
    font-size: 8px;
  }

  .alex-greeting {
    font-size: 32px;
  }

  .luxury-headline {
    font-size: 20px;
    letter-spacing: 2px;
  }

  .real-estate-card {
    padding: 8px 12px;
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .re-price {
    font-size: 13px;
  }

  .re-badge {
    padding: 4px 8px;
  }

  .project-title {
    font-size: 20px;
  }

  .project-desc-row {
    flex-direction: column;
    gap: 15px;
  }

  .project-caption {
    max-width: 100%;
    font-size: 12px;
  }
}

/* ==========================================
   SECTION A: OUR SERVICES (DARKENS ON SCROLL)
   ========================================== */
.services-section {
  --svc-pad-x: 80px;
  --svc-eyebrow-top: 90px;
  --svc-slab-size: 370px;
  --svc-slab-depth: 20px;
  --svc-logo-size: 140px;
  --svc-centerpiece-size: 600px;
  --svc-centerpiece-scale: 0.8;
  --svc-tagline-bottom: 120px;
  --svc-cta-bottom: 80px;
  --svc-cta-right: 80px;

  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #e8e8e6;
  overflow: hidden;
  z-index: 4;
}

.services-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050505;
  opacity: 0;
  /* animated on scroll */
  z-index: 1;
}

.services-lightning {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}

body:not(.light-theme-active) .services-lightning {
  opacity: 1;
}

.services-lightning-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.88;
}

.services-lightning-haze {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 130% 85% at var(--haze-x, 50%) var(--haze-y, 14%),
      rgba(168, 186, 214, var(--haze-core, 0.07)) 0%,
      rgba(120, 145, 178, calc(var(--haze-core, 0.07) * 0.55)) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 90% 40% at 50% 0%,
      rgba(140, 160, 190, calc(var(--haze-core, 0.07) * 0.35)) 0%,
      transparent 68%
    );
  transition: opacity var(--haze-fade, 1.8s) ease-out;
  will-change: opacity;
}

.services-lightning-haze.is-lit {
  opacity: 1;
  transition: opacity 0.12s ease-out;
}

.services-lightning-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 125% 90% at var(--flash-x, 50%) var(--flash-y, 16%),
      rgba(198, 212, 232, var(--flash-core, 0.08)) 0%,
      rgba(145, 165, 195, calc(var(--flash-core, 0.08) * 0.42)) 34%,
      transparent 70%
    );
  mix-blend-mode: screen;
  will-change: opacity;
}

.services-lightning-flash.is-flashing {
  opacity: var(--flash-opacity, 0.2);
  transition: opacity 0.03s linear;
}

.services-lightning-flash.is-fading {
  opacity: 0;
  transition: opacity var(--flash-fade, 1.4s) ease-out;
}

.services-smoke-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='smoke'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23smoke)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  transition: opacity 1s ease;
}

body:not(.light-theme-active) .services-smoke-overlay {
  opacity: 0.75;
}

.services-container {
  width: 100%;
  height: 100%;
  padding: 0 var(--svc-pad-x);
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Centered eyebrow */
.services-eyebrow {
  position: absolute;
  top: var(--svc-eyebrow-top);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #1a1a1a;
  transition: color 0.8s ease;
}

body:not(.light-theme-active) .services-eyebrow {
  color: var(--text-white);
}

/* Service Poster Stage (Light Entry State) */
.services-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  pointer-events: none;
  /* so users scroll past naturally */
}

.poster-text {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #1a1a1a;
  text-transform: uppercase;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.poster-line {
  display: inline;
}

.poster-line + .poster-line::before {
  content: ' / ';
}

.poster-cta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #1a1a1a;
  border-bottom: 1px solid rgba(26, 26, 26, 0.2);
  padding-bottom: 5px;
}

/* Settled Dark Centerpiece Slab Container */
.services-centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--svc-centerpiece-scale));
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  width: var(--svc-centerpiece-size);
  height: var(--svc-centerpiece-size);
  z-index: 5;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* CSS 3D rotating stone slab */
.stone-slab-wrapper {
  perspective: 1200px;
  width: var(--svc-slab-size);
  height: var(--svc-slab-size);
  position: relative;
}

.stone-slab {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-20deg);
  animation: rotate-slab 24s infinite linear;
}

@keyframes rotate-slab {
  0% {
    transform: rotateX(15deg) rotateY(0deg);
  }

  50% {
    transform: rotateX(-15deg) rotateY(180deg);
  }

  100% {
    transform: rotateX(15deg) rotateY(360deg);
  }
}

.slab-face {
  position: absolute;
  background-color: #121316;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Craggy stone noise texture overlay */
.slab-face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    linear-gradient(135deg, #18191d 0%, #090a0c 100%);
  opacity: 0.95;
  pointer-events: none;
}

.slab-front {
  width: var(--svc-slab-size);
  height: var(--svc-slab-size);
  transform: translateZ(var(--svc-slab-depth));
  display: flex;
  justify-content: center;
  align-items: center;
}

.slab-back {
  width: var(--svc-slab-size);
  height: var(--svc-slab-size);
  transform: rotateY(180deg) translateZ(var(--svc-slab-depth));
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Carved logo — front & back faces */
.slab-carved-logo {
  width: var(--svc-logo-size);
  height: var(--svc-logo-size);
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
  transform: translateZ(2px);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.slab-carved-logo--back {
  transform: rotateY(180deg) translateZ(2px);
}

.slab-left,
.slab-right,
.slab-top,
.slab-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slab-carved-logo--edge {
  width: calc(var(--svc-logo-size) * 0.3);
  height: calc(var(--svc-logo-size) * 0.3);
  min-width: 26px;
  min-height: 26px;
  opacity: 0.8;
  transform: translateZ(1px);
}

.slab-carved-logo path {
  fill: none;
  stroke: #ff5f00;
  stroke-width: 2.5;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px rgba(255, 95, 0, 0.6));
}

.slab-left {
  width: 40px;
  height: var(--svc-slab-size);
  left: calc((var(--svc-slab-size) - 40px) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--svc-slab-size) / 2));
}

.slab-right {
  width: 40px;
  height: var(--svc-slab-size);
  left: calc((var(--svc-slab-size) - 40px) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--svc-slab-size) / 2));
}

.slab-top {
  width: var(--svc-slab-size);
  height: 40px;
  top: calc((var(--svc-slab-size) - 40px) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--svc-slab-size) / 2));
}

.slab-bottom {
  width: var(--svc-slab-size);
  height: 40px;
  top: calc((var(--svc-slab-size) - 40px) / 2);
  transform: rotateX(-90deg) translateZ(calc(var(--svc-slab-size) / 2));
}

/* Scattered letterform fragments orbiting the slab */
.services-letter-fragments {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.floating-glyph {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
  animation: float-glyph-anim 8s infinite ease-in-out alternate;
  will-change: transform;
}

@keyframes float-glyph-anim {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-20px) rotate(15deg);
  }
}

.floating-glyph.depth-1 {
  font-size: 28px;
  filter: blur(1px);
  opacity: 0.15;
}

.floating-glyph.depth-2 {
  font-size: 40px;
  filter: blur(0px);
  opacity: 0.3;
}

.floating-glyph.depth-3 {
  font-size: 54px;
  filter: blur(2px);
  opacity: 0.1;
}

.floating-glyph:nth-child(1) {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
}

.floating-glyph:nth-child(2) {
  top: 25%;
  right: 15%;
  animation-delay: 1.5s;
}

.floating-glyph:nth-child(3) {
  bottom: 20%;
  left: 15%;
  animation-delay: 3s;
}

.floating-glyph:nth-child(4) {
  bottom: 25%;
  right: 20%;
  animation-delay: 0.8s;
}

.floating-glyph:nth-child(5) {
  top: 40%;
  left: 8%;
  animation-delay: 2.2s;
}

.floating-glyph:nth-child(6) {
  top: 35%;
  right: 8%;
  animation-delay: 1.1s;
}

.floating-glyph:nth-child(7) {
  bottom: 45%;
  left: 88%;
  animation-delay: 3.5s;
}

.floating-glyph:nth-child(8) {
  top: 12%;
  left: 55%;
  animation-delay: 1.9s;
}

/* Giant emerging letter — removed */
.emerging-letter {
  display: none !important;
}

/* Service Tagline & CTA White layout */
.services-tagline {
  position: absolute;
  bottom: var(--svc-tagline-bottom);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-white);
  opacity: 0;
  /* animated on scroll */
  transition: opacity 0.8s ease;
  white-space: nowrap;
}

.cta-services-footer {
  position: absolute;
  bottom: var(--svc-cta-bottom);
  right: var(--svc-cta-right);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0;
  /* animated on scroll */
  transition: opacity 0.8s ease;
}

.cta-services-footer .cta-arrow {
  margin-left: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-services-footer .underline-line {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-services-footer:hover .cta-arrow {
  transform: translateX(5px);
}

.cta-services-footer:hover .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
}

/* ==========================================
   SHUTTER WIPE TRANSITION (VENETIAN BLINDS)
   ========================================== */
.shutter-wipe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.shutter-wipe.is-active {
  opacity: 1;
  visibility: visible;
}

.shutter-bar {
  flex-grow: 1;
  width: 100%;
  background-color: #e8e8e6;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.shutter-bar:nth-child(even) {
  transform-origin: right center;
}

.services-section.is-shutter-hidden {
  visibility: hidden !important;
  pointer-events: none;
}

/* ==========================================
   SECTION B: CLIENT STORIES (DARK THEME)
   ========================================== */
.stories-section {
  --stories-pad-top: 140px;
  --stories-pad-bottom: 100px;
  --stories-pad-x: 40px;
  --stories-header-mb: 100px;
  --stories-card-gap: 120px;
  --stories-card-indent: 90px;
  --stories-quote-indent: 30px;

  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #050505;
  padding: var(--stories-pad-top) 0 var(--stories-pad-bottom);
  box-sizing: border-box;
  z-index: 4;
}

.stories-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--stories-pad-x);
  box-sizing: border-box;
}

.stories-header-row {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: flex-start;
  margin-bottom: var(--stories-header-mb);
}

.stories-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -2px;
  padding-left: var(--stories-card-indent);
}

.stories-intro {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  padding-top: 15px;
  max-width: 36ch;
}

/* Testimonial Cards Layout */
.testimonials-container {
  display: flex;
  flex-direction: column;
  gap: var(--stories-card-gap);
}

.testimonial-card {
  max-width: 960px;
  margin-left: var(--stories-card-indent);
  opacity: 0.88;
  transition: opacity 0.5s ease;
}

.testimonial-card:hover {
  opacity: 1;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.35;
  color: #ffffff;
  letter-spacing: -1px;
  margin: 0 0 35px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: var(--stories-quote-indent);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--stories-quote-indent);
}

.author-name {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
}

.author-role {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================
   SECTION C: EXPLORATIONS / DRIBBBLE GALLERY
   ========================================== */
.explorations-section {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 120px 0 100px 0;
  box-sizing: border-box;
  z-index: 4;
}

.explorations-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* Masonry collage layout */
.explorations-collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  position: relative;
}

.collage-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 380px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  will-change: transform;
}

.collage-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.card-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.95;
}

.collage-card:hover .card-image-bg {
  transform: scale(1.05);
}

.card-inner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.3) 0%, rgba(26, 26, 26, 0.7) 100%);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 2;
}

.card-badge {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  color: #1a1a1a;
  background-color: #ffffff;
  padding: 5px 10px;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: 1.5px;
}

.card-title-main {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.card-copyright {
  align-self: flex-end;
  font-family: var(--font-ui);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

/* Card 1 specific width */
.card-sketches {
  width: calc(48% - 20px);
}

/* Card 2 specific width & top offset */
.card-mockup {
  width: calc(52% - 20px);
  margin-top: 40px;
}

/* Card 3 swank branding card */
.card-swank {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  /* floats top-right layout */
  background: #2a201c;
  height: 320px;
}

.card-swank .card-inner-overlay {
  background: linear-gradient(135deg, rgba(74, 33, 5, 0.4) 0%, rgba(21, 9, 1, 0.85) 100%);
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.card-brand {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: #dfb295;
  letter-spacing: 4px;
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.card-microcopy {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: rgba(223, 178, 149, 0.6);
  text-transform: uppercase;
}

/* Explanations caption and Dribbble CTA footer */
.explorations-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  padding-top: 40px;
}

.explorations-caption {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: #555558;
  max-width: 320px;
  margin: 0;
}

.cta-dribbble {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #1a1a1a;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
}

.cta-dribbble .cta-arrow {
  margin-left: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-dribbble .underline-line {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 26, 0.25);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-dribbble:hover .cta-arrow {
  transform: translateX(5px);
}

.cta-dribbble:hover .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
}

/* ==========================================
   SECTION D: FOOTER (DARK THEME)
   ========================================== */
.footer-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #050505;
  overflow: hidden;
  z-index: 4;
}

.footer-smoke-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='smoke-ft'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23smoke-ft)'/%3E%3C/svg%3E");
  opacity: 0.8;
  z-index: 1;
}

.footer-container {
  width: 100%;
  height: 100%;
  padding: 0 80px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Top Row: CTA and Headline */
.footer-top-row {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: flex-end;
  padding-top: 100px;
}

.footer-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--text-white);
  letter-spacing: -2px;
  margin: 0;
}

.cta-collab {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  width: fit-content;
  margin-bottom: 15px;
}

.cta-collab .cta-arrow {
  margin-left: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-collab .underline-line {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-collab:hover .cta-arrow {
  transform: translateX(5px);
}

.cta-collab:hover .underline-line {
  transform: scaleX(1.08);
  background: var(--accent-orange);
}

/* Middle Row: Contact columns and copyright */
.footer-middle-row {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: flex-start;
  margin-top: 40px;
}

.footer-left-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-copyright {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #8c8d94;
}

.footer-instruction {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
}

.footer-right-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8c8d94;
  margin-bottom: 5px;
}

.info-val {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-white);
}

.info-val .prefix {
  color: #8c8d94;
  margin-right: 5px;
}

.social-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-white);
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-link:hover {
  color: var(--accent-orange);
  transform: translateX(3px);
}

.social-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 95, 0, 0.85);
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-link:hover .social-link-icon {
  color: var(--accent-orange);
  transform: scale(1.08);
}

/* Bottom Half: Giant Interactive Wordmark */
.footer-wordmark-container {
  width: 100%;
  height: 40vh;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

#footer-lines-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================
   SERVICES — RESPONSIVE (ALL SCREENS)
   ========================================== */

/* Large monitors — 24"+ */
@media (min-width: 1600px) and (min-height: 1200px) {
  .services-section {
    --svc-pad-x: 88px;
    --svc-slab-size: 400px;
    --svc-logo-size: 152px;
    --svc-centerpiece-size: 640px;
    --svc-centerpiece-scale: 0.85;
  }
}

/* Laptop 1080p — 14" / 16" */
@media (min-width: 769px) and (max-height: 1199px) {
  .services-section {
    --svc-pad-x: 48px;
    --svc-eyebrow-top: 72px;
    --svc-slab-size: 320px;
    --svc-logo-size: 122px;
    --svc-centerpiece-size: 520px;
    --svc-centerpiece-scale: 0.78;
    --svc-tagline-bottom: 100px;
    --svc-cta-bottom: 68px;
    --svc-cta-right: 48px;
  }

  .services-eyebrow {
    font-size: 10px;
  }

  .poster-text {
    font-size: clamp(32px, 4.8vw, 58px);
  }
}

/* Compact-width laptops */
@media (min-width: 769px) and (max-width: 1440px) {
  .services-section {
    --svc-slab-size: 330px;
    --svc-logo-size: 126px;
    --svc-centerpiece-size: 540px;
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .services-section {
    --svc-pad-x: 32px;
    --svc-slab-size: 290px;
    --svc-logo-size: 110px;
    --svc-centerpiece-size: 460px;
    --svc-centerpiece-scale: 0.72;
    --svc-tagline-bottom: 88px;
    --svc-cta-bottom: 56px;
    --svc-cta-right: 32px;
  }

  .floating-glyph.depth-1 { font-size: 22px; }
  .floating-glyph.depth-2 { font-size: 32px; }
  .floating-glyph.depth-3 { font-size: 42px; }
}

/* Very short displays */
@media (min-width: 769px) and (max-height: 800px) {
  .services-section {
    --svc-eyebrow-top: 60px;
    --svc-slab-size: 280px;
    --svc-logo-size: 106px;
    --svc-centerpiece-size: 440px;
    --svc-centerpiece-scale: 0.7;
    --svc-tagline-bottom: 76px;
    --svc-cta-bottom: 48px;
  }
}

/* ==========================================
   RESPONSIVE LAYOUTS FOR FINAL SECTIONS
   ========================================== */
@media (max-width: 900px) {
  .services-section {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    overflow: hidden;
    --svc-pad-x: 24px;
    --svc-slab-size: min(58vw, 280px);
    --svc-slab-depth: 14px;
    --svc-logo-size: min(22vw, 100px);
    --svc-centerpiece-size: 100%;
    --svc-centerpiece-scale: 1;
    --svc-eyebrow-top: 0;
    --svc-tagline-bottom: 0;
    --svc-cta-bottom: 0;
    --svc-cta-right: 0;
  }

  .services-container {
    min-height: 100svh;
    min-height: 100dvh;
    padding:
      calc(88px + env(safe-area-inset-top, 0px)) var(--svc-pad-x)
      calc(52px + env(safe-area-inset-bottom, 0px));
    height: auto;
    gap: clamp(22px, 4.5vh, 36px);
    justify-content: flex-start;
    align-items: center;
  }

  .services-eyebrow {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 0 4px;
  }

  .services-poster {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    pointer-events: auto;
    margin: 0;
    gap: 18px;
  }

  .poster-text {
    font-size: clamp(24px, 6.8vw, 36px);
    letter-spacing: -1px;
    line-height: 1.12;
  }

  .poster-line {
    display: block;
  }

  .poster-line + .poster-line::before {
    content: none;
  }

  .poster-cta {
    font-size: 10px;
    letter-spacing: 1.8px;
  }

  .services-centerpiece {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: min(100%, 360px);
    height: min(60vw, 300px);
    min-height: 230px;
    margin: 4px auto 0;
    opacity: 1;
    pointer-events: auto;
    flex-shrink: 0;
  }

  .stone-slab-wrapper {
    width: var(--svc-slab-size);
    height: var(--svc-slab-size);
    margin: 0 auto;
  }

  .slab-left,
  .slab-right {
    width: 32px;
    height: var(--svc-slab-size);
    left: calc((var(--svc-slab-size) - 32px) / 2);
  }

  .slab-right {
    transform: rotateY(90deg) translateZ(calc(var(--svc-slab-size) / 2));
  }

  .slab-top,
  .slab-bottom {
    width: var(--svc-slab-size);
    height: 32px;
    top: calc((var(--svc-slab-size) - 32px) / 2);
  }

  .slab-carved-logo {
    width: var(--svc-logo-size);
    height: var(--svc-logo-size);
  }

  .slab-carved-logo--edge {
    width: calc(var(--svc-logo-size) * 0.32);
    height: calc(var(--svc-logo-size) * 0.32);
    min-width: 22px;
    min-height: 22px;
  }

  .floating-glyph.depth-1 { font-size: 20px; }
  .floating-glyph.depth-2 { font-size: 28px; }
  .floating-glyph.depth-3 { font-size: 34px; opacity: 0.08; }

  .services-tagline {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    opacity: 1;
    text-align: center;
    white-space: normal;
    max-width: 300px;
    line-height: 1.55;
    padding: 0 8px;
  }

  .cta-services-footer {
    position: relative;
    bottom: auto;
    right: auto;
    opacity: 1;
    margin: 0;
    min-height: 48px;
    padding: 10px 0;
    justify-content: center;
    width: 100%;
    max-width: 300px;
  }

  .stories-section {
    --stories-pad-top: clamp(72px, 11vh, 96px);
    --stories-pad-bottom: clamp(56px, 9vh, 80px);
    --stories-pad-x: 24px;
    --stories-header-mb: clamp(40px, 7vh, 60px);
    --stories-card-gap: clamp(48px, 8vh, 72px);
    --stories-card-indent: 0;
    --stories-quote-indent: 16px;
    min-height: auto;
    padding: var(--stories-pad-top) 0 var(--stories-pad-bottom);
  }

  .stories-container {
    padding: 0 var(--stories-pad-x);
  }

  .stories-header-row {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3vh, 22px);
    margin-bottom: var(--stories-header-mb);
  }

  .stories-headline {
    padding-left: 0;
    font-size: clamp(34px, 9vw, 44px);
    letter-spacing: -1px;
    line-height: 1.08;
  }

  .stories-intro {
    padding-top: 0;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.65;
    max-width: 100%;
  }

  .testimonials-container {
    gap: var(--stories-card-gap);
  }

  .testimonial-card {
    margin-left: 0;
    max-width: 100%;
  }

  .testimonial-quote {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.42;
    letter-spacing: -0.5px;
    padding-left: var(--stories-quote-indent);
    margin-bottom: clamp(16px, 3vh, 22px);
  }

  .testimonial-author {
    padding-left: var(--stories-quote-indent);
  }

  .author-name {
    font-size: 10px;
    letter-spacing: 1.8px;
  }

  .author-role {
    font-size: 8px;
    letter-spacing: 1.2px;
    line-height: 1.45;
  }

  .explorations-collage {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .collage-card {
    width: 100% !important;
    margin-top: 0 !important;
    height: 260px;
  }

  .explorations-footer-row {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }

  .footer-section {
    height: auto;
    overflow: visible;
  }

  .footer-container {
    padding: 80px 20px 40px 20px;
    gap: 60px;
  }

  .footer-top-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    padding-top: 0;
  }

  .footer-headline {
    font-size: 38px;
  }

  .cta-collab {
    margin-bottom: 0;
  }

  .footer-middle-row {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
    margin-top: 0;
  }

  .footer-right-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .footer-wordmark-container {
    height: 200px;
  }
}

/* ==========================================
   CINEMATIC INTRO OVERLAY
   ========================================== */
.cinematic-intro {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-content {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.corner-mark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: rgba(26, 26, 26, 0.45);
  border-style: solid;
  opacity: 0;
  will-change: top, left, right, bottom, opacity;
}

.corner-tl {
  top: 77px;
  left: 77px;
  border-width: 1px 0 0 1px;
}

.corner-tr {
  top: 77px;
  right: 77px;
  border-width: 1px 1px 0 0;
}

.corner-bl {
  bottom: 77px;
  left: 77px;
  border-width: 0 0 1px 1px;
}

.corner-br {
  bottom: 77px;
  right: 77px;
  border-width: 0 1px 1px 0;
}

.square-frame-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 2;
}

.frame-line {
  stroke: rgba(26, 26, 26, 0.16);
  stroke-width: 1px;
  fill: none;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  will-change: stroke-dashoffset, opacity;
}

.intro-square-container {
  position: absolute;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  overflow: visible;
}

.intro-logo-svg {
  width: 90px;
  height: 90px;
  overflow: visible;
}

.logo-segment {
  fill: transparent;
  stroke: rgba(26, 26, 26, 0.2);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  will-change: stroke-dashoffset, fill, opacity, transform;
}

.intro-slogan {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  white-space: nowrap;
  opacity: 0;
  z-index: 4;
  will-change: opacity, transform;
}

.slogan-word {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: rgba(26, 26, 26, 0.7);
}

.intro-progress {
  position: absolute;
  bottom: -64px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1px;
  color: rgba(26, 26, 26, 0.45);
  opacity: 0;
  z-index: 4;
  will-change: opacity;
}

/* ==========================================
   GLOBAL MOBILE — ALL SECTIONS (≤768px)
   Covers common phone sizes; desktop unchanged
   ========================================== */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .cookie-banner {
    bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 14px 18px;
    gap: 14px;
  }

  .cinematic-intro {
    height: 100svh;
    height: 100dvh;
  }

  /* Section 1 — hero fine-tuning */
  .hero-section {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .hero-content {
    padding-right: 4px;
  }

  .cta-project {
    min-height: 44px;
    align-items: center;
  }

  .centerpiece-logo-wrapper {
    perspective: 900px;
  }

  /* Section 2 — about */
  .about-section {
    padding:
      calc(72px + env(safe-area-inset-top, 0px)) 20px calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .statement-line.is-lead .scroll-word,
  .statement-line.is-body .scroll-word {
    font-size: clamp(36px, 8.5vw, 50px);
  }

  .mission-paragraph {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 32px;
  }

  .cta-about-more {
    margin-bottom: 48px;
    min-height: 44px;
  }

  /* Innovation band */
  .kf-innovation-stage {
    height: clamp(72px, 11vh, 112px);
  }

  .kf-innovation-main {
    font-size: clamp(58px, 17vw, 88px);
  }

  /* Section 3 — key facts */
  .key-facts-section {
    padding-left: 0;
    padding-right: 0;
  }

  .kf-card-inner {
    min-height: auto;
  }

  /* Section 4 — services */
  .services-section {
    --svc-pad-x: 18px;
    --svc-slab-size: min(56vw, 250px);
    --svc-logo-size: min(20vw, 88px);
    --svc-slab-depth: 12px;
  }

  .services-container {
    padding:
      calc(76px + env(safe-area-inset-top, 0px)) var(--svc-pad-x)
      calc(44px + env(safe-area-inset-bottom, 0px));
    gap: clamp(18px, 3.8vh, 28px);
  }

  .poster-text {
    font-size: clamp(22px, 6.2vw, 30px);
  }

  .services-centerpiece {
    height: min(56vw, 270px);
    min-height: 210px;
    max-width: 320px;
  }

  .services-eyebrow {
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  .services-tagline {
    font-size: 10px;
    letter-spacing: 1.4px;
    max-width: 260px;
  }

  .floating-glyph.depth-3 {
    display: none;
  }

  .slab-left,
  .slab-right {
    width: 26px;
    left: calc((var(--svc-slab-size) - 26px) / 2);
  }

  .slab-top,
  .slab-bottom {
    height: 26px;
    top: calc((var(--svc-slab-size) - 26px) / 2);
  }

  .cta-services-footer {
    min-height: 44px;
    font-size: 10px;
  }

  .services-lightning-canvas {
    opacity: 0.65;
  }

  .services-smoke-overlay {
    opacity: 0.45 !important;
  }

  /* Section 5 — client stories */
  .stories-section {
    --stories-pad-x: 18px;
    --stories-pad-top: clamp(68px, 10vh, 88px);
    --stories-pad-bottom: clamp(52px, 8vh, 72px);
    --stories-header-mb: clamp(36px, 6vh, 48px);
    --stories-card-gap: clamp(44px, 7vh, 64px);
    --stories-quote-indent: 14px;
  }

  .stories-headline {
    font-size: clamp(30px, 8.5vw, 40px);
  }

  .stories-intro {
    font-size: 13px;
  }

  .testimonial-quote {
    font-size: clamp(17px, 4.8vw, 22px);
  }

  /* Selected work */
  .selected-work-section .work-horizontal-track {
    padding: 64px 18px 72px;
    gap: 48px;
  }

  .work-headline {
    font-size: clamp(30px, 8.5vw, 40px);
  }

  .work-subtext {
    font-size: 13px;
    line-height: 1.6;
  }

  .project-media {
    aspect-ratio: 16 / 10;
    min-height: 180px;
  }

  .project-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .project-caption {
    font-size: 12px;
    max-width: 100%;
  }

  /* Footer */
  .footer-container {
    padding: 64px 18px 36px;
    gap: 48px;
  }

  .footer-headline {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.1;
  }

  .footer-wordmark-container {
    height: clamp(140px, 28vw, 200px);
  }

  .menu-overlay {
    padding: 0 18px;
  }

  .nav-item {
    font-size: clamp(36px, 10vw, 48px);
  }
}

/* Small phones — 480px and under */
@media (max-width: 480px) {
  .hero-headline {
    font-size: clamp(30px, 8.2vw, 38px);
  }

  .hero-description {
    font-size: 10px;
  }

  .centerpiece-logo-wrapper {
    top: 75%;
    left: 56%;
    width: min(82vw, 240px);
    height: min(82vw, 240px);
  }

  .centerpiece-logo {
    width: min(68vw, 190px);
    height: min(68vw, 190px);
  }

  .about-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .statement-line.is-lead .scroll-word,
  .statement-line.is-body .scroll-word {
    font-size: clamp(32px, 9vw, 42px);
  }

  .services-container {
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }

  .poster-text {
    font-size: clamp(20px, 5.8vw, 26px);
  }

  .services-section {
    --svc-slab-size: min(54vw, 220px);
    --svc-logo-size: min(18vw, 76px);
  }

  .services-centerpiece {
    height: min(54vw, 240px);
    min-height: 190px;
    max-width: 280px;
  }

  .services-tagline {
    font-size: 9px;
    max-width: 240px;
  }

  .stone-slab {
    animation-duration: 28s;
  }

  .stories-section {
    --stories-pad-x: 16px;
    --stories-card-gap: 40px;
  }

  .stories-headline {
    font-size: clamp(28px, 8vw, 34px);
  }

  .testimonial-quote {
    font-size: clamp(16px, 4.5vw, 20px);
  }

  .kf-innovation-stage {
    height: clamp(64px, 10vh, 96px);
  }

  .kf-innovation-main {
    font-size: clamp(52px, 16vw, 72px);
  }
}

/* Very small phones — 360px */
@media (max-width: 360px) {
  .hero-content {
    left: 16px;
    right: 16px;
  }

  .hero-headline {
    font-size: 28px;
  }

  .centerpiece-logo-wrapper {
    top: 77%;
    width: min(86vw, 220px);
    height: min(86vw, 220px);
  }

  .centerpiece-logo {
    width: min(72vw, 170px);
    height: min(72vw, 170px);
  }

  .centerpiece-wordmark {
    font-size: 14px;
    bottom: -24px;
  }

  .services-section {
    --svc-slab-size: min(52vw, 200px);
    --svc-logo-size: min(17vw, 68px);
  }

  .services-centerpiece {
    min-height: 170px;
    height: min(52vw, 220px);
  }

  .poster-text {
    font-size: 20px;
  }

  .stories-headline {
    font-size: 26px;
  }

  .testimonial-quote {
    font-size: 15px;
  }
}

/* Services — mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .services-container {
    padding-top: calc(60px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  .services-centerpiece {
    height: min(38vh, 180px);
    min-height: 140px;
    max-width: 260px;
  }

  .poster-text {
    font-size: clamp(18px, 4.2vw, 22px);
  }

  .services-tagline {
    font-size: 9px;
    max-width: 320px;
  }
}

/* Stories — mobile landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .stories-section {
    --stories-pad-top: 56px;
    --stories-pad-bottom: 44px;
    --stories-header-mb: 28px;
    --stories-card-gap: 32px;
  }

  .stories-headline {
    font-size: clamp(28px, 6vw, 36px);
  }
}

/* Short mobile screens */
@media (max-width: 768px) and (max-height: 640px) {
  .hero-content {
    top: calc(76px + env(safe-area-inset-top, 0px) + 8px);
  }

  .hero-headline {
    margin-bottom: 12px;
  }

  .hero-partners {
    margin-top: 12px;
  }

  .centerpiece-logo-wrapper {
    top: 79%;
  }

  .about-section {
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
  }

  .kf-innovation-stage {
    height: clamp(56px, 9vh, 80px);
  }

  .services-container {
    padding-top: calc(68px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
  }

  .services-centerpiece {
    height: min(50vw, 200px);
    min-height: 160px;
  }

  .poster-text {
    font-size: clamp(18px, 5.2vw, 24px);
  }

  .stories-section {
    --stories-pad-top: clamp(56px, 9vh, 72px);
    --stories-pad-bottom: 48px;
    --stories-header-mb: 32px;
    --stories-card-gap: 36px;
  }

  .stories-headline {
    font-size: clamp(26px, 7.5vw, 32px);
  }

  /* Scroll & paint performance — mobile only */
  html {
    scroll-behavior: auto;
  }

  body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  .about-section,
  .key-facts-section,
  .selected-work-section,
  .services-section,
  .stories-section {
    contain: layout style;
  }

  #bg-canvas,
  #logo-sparks-canvas,
  #footer-lines-canvas {
    contain: strict;
  }
}